Фавиконка в адресной строке браузера
Необходимо нарисовать изображение размером 120 × 120, 32 × 32 или 16 × 16 пикселейи сохранить в формате SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Анимация не поддерживается.
Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится.
Это делается через тег "<link>".
<head>
<link> rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">
</head>
"rel" - тип ресурса
"icon" - учитывается большинством браузеров;
"shortcut icon" - учитывается браузером Internet Explorer
"type" - тип передаваемых данных. Зависит от формата файла.
Тот же рисунок отображается рядом со ссылкой при добавлении её в закладки браузера.
Очистка float
Вместо очистки float, можно использовать "Clearfix" (установку содержимого float).
Результат получится почти такой же, однако содержимое float действительно гарантирует,
что все стили будут отображаться надлежащим образом
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
zoom: 1;
}
Вставка .swf файла
<object><embed type="application/x-shockwave-flash" src="ЗдесьВашаРеклама.swf" width="245" height="220"></object>
Специальные символы
Специальный символ начинается с амперсанда (&) и заканчивается точкой с запятой.
Всё, что находится между ними, является уникальным кодом символа, будь это имя или число.
Список кодов символов можно найти на copypastecharacter.com
Изменение блочной модели
Изменяем блочную модель так, чтобы любые значения свойств border или padding
включались внутри width и height элемента(с префиксами для браузеров).
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Выравнивание блоков по центру
Прописывая "flex" в "display" активируем поддержку flexbox.
Свойства "align-items" и "justify-content" со значением "center"
выравнивают блок по центру (горизонтально и вертикально).
.blok {
display: flex;
align-items: center;
justify-content: center;
}
Элементы форм
Любой элемент, предполагающий взаимодействие с пользователем, должен быть размещён между тегами <form></form>
Текстовое поле:
<input type="text"
name="textInput"
value="your text here">
Элемент input, у которого атрибут type присвоено значение text, называют текстовым полем.
В текстовом поле нельзя ввести несколько строк, а длинна его может быть ограничена при помощи атрибута size
(Если присвоить атрибуту size значение 20, то пользователь сможет ввести в поле примерно 20 символов).
Атрибут value устанавливает значение по умолчанию для текстового поля.
Текстовая область:
<textarea name="textBigInput"
rows=10
cols=40>This is the stuff inside the textarea
</textarea>
Текстовая область имеет атрибут name, а также атрибуты rows и cols, определяющие её размер в строках и столбцах.
Атрибута value текстовая область не имеет. Вместо этого любой текст, расположенный между тегами <textarea> и </textarea>, воспринимается браузером в качестве содержимого области.
Поле для ввода пароля:
<input type="password"
name="secret"
value="you can't read this">
Текст, вводимый в поле для ввода пароля, на экране отображается звёздочками.
Скрытое поле:
<input type="hidden"
name="mystery"
value="secret formula">
Их удобно применять, когда странице нужно, например установить связь или обменяться информацией с сервером, а пользователю не обязательно знать все эти детали.
Элементы выбора
Флажки:
<input type="checkbox"
name="chkBurger">cholesto-burger
<input type="checkbox"
name="chkFries">fries
<input type="checkbox"
name="chkDrink">drink
Флажок - это элемент ввода "checkbox". Для него можно установить атрибут valye, однако, делать этого не требуется.
Каждый флажок является полностью независимым объектом.
Флажки применяют когда возможен ввод любой комбинации различных элементов.
Переключатели (радио-кнопки):
<input type="radio"
name="size"
value="small">small
<input type="radio"
name="size"
value="medium">medium
<input type="radio"
name="size"
value="large">large
В коде определено три кнопки - переключателя, но имя у них одно.
С помощью такого приёма переключатели объединяются в группу и реагируют на действия пользователя как единое целое: когда пользователь выбирает один из элементов в группе, все остальные элементы с тем же именкм автоматически выключаются.
Для каждого переключателя назначен атрибут value.
Обратившись к этому атрибуту, программа определит, какой из переключателей в группе был выбран.
Выпадающие списки:
Этот элемент позволяет выбрать значение из заданного набора вариантов.
<select name="selColor">
<option value="red">red</option>
<option value="orange">orange</option>
<option value="yellow">yellow</option>
<option value="blue">blue</option>
</select>
У объекта select есть атрибут name. Для каждого элемента назначается атрибут value. В прграмму поступит значение атрибута value для выбранного элемента, а само это значение не отображается на странице.
Текст, который должен быть показан для каждого из элементов списка, помещается в коде между тегами <option>и</option>
Списки с множественным выбором:
<select name="lstColor"
size=4
multiple>
<option value="red">red</option>
<option value="orange">orange</ option>
<option value="yellow">yellow</option>
<option value="blue">blue</option>
</select>
Присвоив атрибуту size значение 4, указано, что на экране элемент списка должен всегда занимать четыре строки.
Это позволит пользователю видеть все элементы выбора.
Если в описании тега включен атрибут multiple, пользователю позволено выбрать несколько элементов.
Кнопка:
<input type="button"
value="regular button">
<input type="reset"
value="reset button">
<input type="submit"
value="submit button">
Назначая атрибуту type значение button создаётся стандартная кнопка.
Для того, чтобы после нажатия кнопки было совершено какое-либо действие, понадобится включить в веб-страницу програмный код, написанный, например, на JavaScript.
При помощи значения reset,
пользователь может вернуть страницу к её начальному состоянию. Это удобно, если пользователь сделал что-то не верно в процессе ввода данных.
Для кнопки reset нет необходимости писать какой либо код.
Кнопка submit обеспечивает связь между веб-страницами и программой.
После того как пользователь выбирает и вводит все требуемые значения в элементы формы, он нажимает кнопку "Отправить" (имеющую тип submit), и тогда из данных в элементах формы создаётся пакет, который отправляется на обработку на сервер.
Форма задающая пользователю вопросы.
Страница, написанная на HTML, содержит форму, которую пользователь вначале заполняет, а затем нажимает кнопку "Отправить"
После этого информация из формы передаётся в назначенную для неё программу, где производится её обработка и пользователю возвращается результат в виде обычной веб-страницы.
<form method="post"
action="hiUser.php">
Please type your name:
<input type="text"
name="userName"
value="">
<input type="submit">
</form>
Атрибут method устанавливает, каким образом данные будут отправлены на сервер.
Существует два основных метода: get и post.
Метод post является более мощным и гибким.
Метод get используется для отправления данных без использования формы.
Атрибут action устанавливает URL (Uniform resource locator - унифицированный указатель информационного ресурса) программы, которая будет обрабатывать форму.
В URL может быть записана абсолютная ссылка (начинается с http://) или относительная ссылка (это означает, что программа находится в том же каталоге, что и исходная веб-страница).
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке.
Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>
В качестве значения "href" для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.
<body>
<p><a name="top"></a></p>
...
<p><a href="#top">Наверх</a></p>
</body>
Между тегами <a name="top"> и </a> текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке.
Имя ссылки на якорь начинается с символа #, после чего идет имя якоря.
Главное, чтобы значения атрибутов name и href совпадали (символ решетки не в счет).
Cсылка на закладку, находящуюся в другой веб-странице и даже другом сайте.
Для этого в атрибуте "href" тега "<a>" надо указать адрес документа и в конце добавить символ решетки # и имя закладки
<body>
<p><a href="text.html#top">Перейти на другую страницу</a></p>
<body>
Изменение курсора при наведении на элемент
Для задания вида курсора используется свойство cursor. Например:
.movelink { cursor: move; }.
Курсоры и как они называются, можно посмотреть
здесь.
Если необходимо задать свой курсор:
.movelink {cursor : url("my.cur"), default;}.
То есть нужно, используя url() указать путь к изображению курсора.
Вставка картинки в подпись почты
В подпись своих писем можно вставить небольшую картинку.
Вставленная таким образом картинка всегда доступна.
Данные должны быть предварительно закодированы в Base64.
Закодировать в Base64 можно при помощи команды:
~ $ base64 --ignore-garbage Картинка.png > Картинка.txt
Копируем и вставляем подготовленную картинку в нужное место html-страницы (подписи письма в формате html).
Используем тег <IMG>:
Для вставки используем конструкцию вида:
<img src="data:image/gif;base64,
iVBORw0KGgoAAAANSUhEUgAAA...">
Для создания такой ссылки значение атрибута "href" должно начинаться с mailto:,
затем следует адрес электронной почты, на который должно быть отправлено сообщение.
Чтобы создать ссылку на адрес получателя (или получателей через запятую)
umanov@mail.ru,
значением "href" будет mailto:mail@linuxtosha.ru.
Дополнительно может быть добавлена тема, текст и другая информация для почты.
Чтобы добавить тему, мы включим параметр subject= после адреса.
Первый параметр после адреса должен начинаться вопросительным знаком (?), чтобы связать его с адресом гиперссылки.
Несколько слов в строке темы требуют кодирование пробелов с помощью %20.
Добавление текста работает аналогичным образом, как и добавление темы, на этот раз с помощью параметра body= в значении "href".
Поскольку мы связываем один параметр с другим, нам нужно использовать амперсанд (&) для их разделения.
Как и с темой, пробелы должны быть кодированы через %20, а перенос строк с помощью %0A.
<a>href="mailto:mail@linuxtosha.ru?subject=Установка%20Linux&body=Спасибо%20!"</a>
Параметры можно добавлять и чередовать между собой столько, сколько необходимо.
Можно использовать следующие переменные.
&cc= чтобы установить CC получателя(ей)
&bcc= чтобы установить BCC получателя(ей)
Цвета
Значения ключевого слова — это названия (такие как red, green или blue), которые отображаются данным цветом.
Полный список этих названий можно найти на
"W3C"
Adobe
создал бесплатное приложение, которое предлагает цветовой круг для помощи в нахождении любого желаемого цвета и соответствующего шестнадцатеричного значения.
Русские странички в кодировке UTF-8
Первая строчка документа HTML-5 должна содержать:
<!DOCTYPE html>
Следующий тег:
<HTML lang="ru">
Это укажет, что документ на русском языке.
В <head> добавляем
<meta charset="utf-8">
Далее для Apache или Apache/RUS
в каталоге содержащем странички создаём файл .htaccess ,доступный всем на чтение со строчками:
AddDefaultCharset utf-8
AddType " text/html; charset=utf-8" .html .js
AddLanguage ru .txt .css .js
Если файл .htaccess существует, просто добавляем туда эти строчки.
Указание языка внутри HTML документа имеет приоритет над указанием для сервера.
Валидаторы
Валидатор HTML
Валидатор CSS
Атрибут "async"
Скрипт выполняется полностью асинхронно. То есть, при обнаружении <script async src="...">
браузер не останавливает обработку страницы, а спокойно работает дальше.
Когда скрипт будет загружен – он выполнится.
Атрибут "defer"
Скрипт также выполняется асинхронно, не заставляет ждать страницу, но есть два отличия
от async:
первое – браузер гарантирует, что относительный порядок скриптов с defer будет сохранён;
второе отличие – скрипт с defer.js сработает, когда весь HTML-документ будет обработан браузером.
Cкрипт async.js выполнится, как только загрузится – возможно, до того, как весь документ готов.
А defer подождёт готовности всего документа.
Атрибуты async/defer работают только в том случае, если назначены на внешние скрипты, т.е. имеющие src.
Если же нужно сохранить порядок выполнения, то есть добавить несколько скриптов,
которые выполнятся строго один за другим, то используется свойство script.async = false.
Теги <script> можно добавлять на страницу в любой момент при помощи самого javascript,
скрипты, добавленные таким образом, ведут себя так же, как <script>async. То есть, выполняются как только загрузятся, без сохранения относительного порядка.
Если же нужно сохранить порядок выполнения, то есть добавить несколько скриптов, которые выполнятся строго один за другим,
то используется свойство script.async = false.
Выглядит это примерно так:
function addScript(src){
var script = document.createElement('script');
script.src = src;
script.async = false; // чтобы гарантировать порядок
document.head.appendChild(script);
}
addScript('1.js'); // загружаться эти скрипты начнут сразу
addScript('2.js'); // выполнятся, как только загрузятся
addScript('3.js'); // но, гарантированно, в порядке 1 -> 2 -> 3
Директива "use strict"
Директива выглядит как строка "use strict"; и ставится вначале скрипта.
Например:
"use strict";// этот код будет работать по современному стандарту ES5...
Отменить действие use strict никак нельзя.
Не существует директивы no use strict или подобной, которая возвращает в старый режим.
Если уж вошли в современный режим, то это дорога в один конец.
Переменная
Можно объявить несколько переменных сразу:
var user = 'John', age = 25, message = 'Hello';
Можно объявить две переменные и копировать данные из одной в другую:
var hello = 'Hello world!';
var message;
message = hello;// скопировали значение
alert( hello ); // Hello world!
alert( message ); // Hello world!
Вместе с объявлением можно сразу присвоить значение:
var x = 10
На имя переменной в JavaScript наложены всего два ограничения.
Имя может состоять из: букв, цифр, символов $ и _ (нижнее подчёркивание).
Первый символ не должен быть цифрой.
Существует список зарезервированных слов, которые нельзя использовать для переменных,
так как они используются самим языком, например: var, class, return, export и др.
Константа
– это переменная, которая никогда не меняется. Как правило, их называют большими буквами, через подчёркивание
var COLOR_RED = "#F00";
var COLOR_GREEN = "#0F0";
var COLOR_BLUE = "#00F";
var COLOR_ORANGE = "#FF7F00";
var color = COLOR_ORANGE;
alert( color ); // #FF7F00
Во-первых, константа COLOR_ORANGE – это понятное имя.
По присвоению var color="#FF7F00" непонятно, что цвет – оранжевый.
Иными словами, константа COLOR_ORANGE является «понятным псевдонимом» для значения #FF7F00.
Во-вторых, опечатка в строке, особенно такой сложной как #FF7F00,
может быть не замечена, а в имени константы её допустить куда сложнее.
Число «number»
var n = 123;
n = 12.345;
Существуют специальные числовые значения Infinity (бесконечность) и
NaN (ошибка вычислений).
Эти значения формально принадлежат типу «число»,
хотя, конечно, числами в их обычном понимании не являются.
Строка «string»
Строки объявляются при помощи кавычек
var str = "Мама мыла раму";
str = 'Одинарные кавычки тоже подойдут';
Специальное значение «null»
var age = null;
В JavaScript null не является «ссылкой на несуществующий объект» или «нулевым указателем».
Это просто специальное значение, которое имеет смысл «ничего» или «значение неизвестно».
В частности, код выше говорит о том, что возраст age неизвестен.
Специальное значение «undefined»
Оно имеет смысл «значение не присвоено».
Если переменная объявлена, но в неё ничего не записано, то её значение как раз и есть undefined: var x;
alert( x ); // выведет "undefined"
В JavaScript есть логические значения true (истина) и false (ложь).
Операторы сравнения возвращают их.
Строки сравниваются побуквенно.
Значения разных типов приводятся к числу при сравнении, за исключением строгого равенства === (!==).
Значения null и undefined равны == друг другу и не равны ничему другому. В других сравнениях (с участием >,<)
их лучше не использовать, так как они ведут себя не как 0.
Тип «объекты»
Он используется для коллекций данных и для объявления более сложных сущностей.
Объявляются объекты при помощи фигурных скобок {...}, например:
var user = { name: "Вася" };
Оператор "typeof"
Возвращает тип аргумента.
Есть два вида функции. одни функции что-то возвращают другие просто производят определенные полезные действия.
Возвратить это означает осуществить какие-то вычисления и вставить результат вычисления в то место где была функция.
Например функция принимает два аргумента числа 2 и 3.
Внутри функции эти два числа складываются и возвращается результат 5.
Мысленно можно представить что вместо функции стоит число 5.
Если в функцию переданы другие аргументы например число 3 и 3.
Тогда функция возвратит число 6 мысленно подставляем вместо функции число 6.
К функциям которые осуществляют полезные действия можно отнести функцию которая просто изменяет цвет
текста в этом случае мы мысленно представляем результат полезного действия функции
в данном случае изменения цвета.
Вычислить да, вывести не совсем точно, под выводом обычно понимается вывод на экран,
в файл или другой поток вывода. Совсем не обязательно в этом смысле слова
выводить вычисленный результат, вы можете его передать другой функции и так делать почти до бесконечности,
пока результат и правда станет готов к выводу.
Таким образом функция превратится в возвращающую.
Она будет и выводить на экран и
возвращать результат вычислений.
Результатом typeof является строка, содержащая тип:
typeof undefined // "undefined"
typeof 0 // "number"
typeof true // "boolean"
typeof "foo" // "string"
typeof {} // "object"
typeof null // "object" Результат typeof null == "object"
– это официально признанная ошибка в языке, которая сохраняется для совместимости.
На самом деле null – это не объект, а отдельный тип данных.
typeof function(){} // "function" Функции не являются отдельным базовым типом в JavaScript,
а подвидом объектов. Но typeof выделяет функции отдельно, возвращая для них "function".
На практике это весьма удобно, так как позволяет легко определить функцию.
Операнд
– то, к чему применяется оператор.
Например: 5 * 2 – оператор умножения с левым и правым операндами. Другое название: «аргумент оператора».
Унарным называется оператор, который применяется к одному выражению.
Например, оператор унарный минус "-" меняет знак числа на противоположный.
Бинарным называется оператор, который применяется к двум операндам.
Тот же минус существует и в бинарной форме:
var x = 1, y = 3;
alert( y - x ); // 2, бинарный минус.
Если бинарный оператор '+' применить к строкам, то он их объединяет в одну:
var a = "моя" + "строка";
alert( a ); // моястрока
Иначе говорят, что «плюс производит конкатенацию (сложение) строк»
Если хотя бы один аргумент является строкой, то второй будет также преобразован к строке!
Это приведение к строке – особенность исключительно бинарного оператора "+".
Остальные арифметические операторы работают только с числами и всегда приводят аргументы к числу.
Унарный плюс используем , чтобы преобразовать строки к числу:
var apples = "2";
var oranges = "3";
alert( +apples + +oranges ); // 5, число, оба операнда предварительно преобразованы в числа
Оператор взятия остатка %
Его результат a % b – это остаток от деления a на b.
Инкремент/декремент ++, --
Инкремент ++ увеличивает на 1:
var i = 2;
i++; // более короткая запись для i = i + 1.
alert(i); // 3
Декремент -- уменьшает на 1:
var i = 2;
i--; // более короткая запись для i = i - 1.
alert(i); // 1
Инкремент/декремент можно применить только к переменной.
Постфиксная форма i++ отличается от префиксной ++i тем, что возвращает старое значение, бывшее до увеличения.
var i = 1;
var a = i++; // (*)
alert(a); // 1
Инкремент/декремент можно использовать в любых выражениях.
При этом он имеет более высокий приоритет и выполняется раньше, чем арифметические операции:
var i = 1;
alert( 2 * ++i ); // 4
Побитовые операторы
00000000000000000000000,256,128,64,32,16,8,4,2,1
00000000000000000000000 0 1 1 1 1 1 1 1 1 = 255
Внутренний формат 32-битных чисел устроен так, что для смены знака нужно все биты заменить
на противоположные («обратить») и прибавить 1
AND(и) ( & ) Ставит 1 на бит результата, для которого соответствующие биты операндов равны 1.
OR(или) ( | ) Ставит 1 на бит результата, для которого хотя бы один из соответствующих битов операндов равен 1.
XOR(побитовое исключающее или) ( ^ ) Ставит 1 на бит результата, для которого только один из соответствующих битов операндов равен 1 (но не оба).
NOT(не) ( ~ ) Заменяет каждый бит операнда на противоположный.
LEFT SHIFT(левый сдвиг) ( << ) Сдвигает двоичное представление a на b битов влево, добавляя справа нули.
RIGHT SHIFT(правый сдвиг) ( >> )
Сдвигает двоичное представление a на b битов вправо, отбрасывая сдвигаемые биты.
ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) ( >>> ) Сдвигает двоичное представление a на b битов вправо,
отбрасывая сдвигаемые биты и добавляя нули слева.
Побитовые операторы работают следующим образом:
Операнды преобразуются в 32-битные целые числа, представленные последовательностью битов. Дробная часть, если она есть, отбрасывается.
Для бинарных операторов – каждый бит в первом операнде рассматривается вместе с соответствующим битом второго операнда:
первый бит с первым, второй со вторым и т.п.
Оператор применяется к каждой паре бит, давая соответствующий бит результата.
Получившаяся в результате последовательность бит интерпретируется как обычное число.
Для удобной работы с примерами, чтобы протестировать что-то в консоли, пригодятся две функции.
parseInt("11000", 2) – переводит строку с двоичной записью числа в число.
n.toString(2) – получает для числа n запись в 2-ной системе в виде строки.
Например:
var access = parseInt("11000", 2); // получаем число из строки
alert( access ); // 24, число с таким 2-ным представлением
var access2 = access.toString(2); // обратно двоичную строку из числа
alert( access2 ); // 11000
(10 >> 1) == (10 / 2) Десять разделить на два 1 раз.
(10>>2) = (10/2/2) Десять разделить на два два раза.
Точно так же умножение.
(10<<1) ==(10*2) Десять умножить на два 1 раз.
(10<<2) == (10*2*2) Десять умножить на два и ещё раз умножить на два.
Если перевести число 230 в двоичную систему, то будет это выглядеть так: 1110 0110.
Если применить деление(230 >> 1),то сдвинется этот двоичный ряд вправо по импровизированной ленте на 1 символ и число станет 1110 011(ноль отсюда) перенёсся (сюда)111 0011= 0111 0011.
Если (230 >> 2), то отрубается уже две крайние цифры от числа 1110 0110.
В процессоре компьютера происходят операции именно с 0 и 1. На примере выключателя: 1 = горит, 0 = не горит.
Можно про это почитать книгу Чарльза Петцольда "Код: тайный язык информации".
Оператор запятая ","
Запятая позволяет перечислять выражения, разделяя их запятой ','.
Каждое из них – вычисляется и отбрасывается, за исключением последнего, которое возвращается.
Операторы сравнения
Равно a == b. Для сравнения используется два символа равенства '='.
«Не равно». В математике он пишется как ≠, в JavaScript – знак равенства с восклицательным знаком перед ним !=.
Строки сравниваются побуквенно:
alert( 'Б' > 'А' ); // true
В кодировке Unicode обычно код у строчной буквы больше, чем у прописной.
alert( 'а' > 'Я' ); // true, строчные буквы больше прописных
Для корректного сравнения символы должны быть в одинаковом регистре.
Любая буква больше отсутствия буквы:
alert( 'Привет' > 'Прив' ); // true, так как 'е' больше чем "ничего".
Для проверки равенства без преобразования типов используются операторы строгого равенства === (тройное равно) и !==.
Если тип разный, то они всегда возвращают false:
alert( 0 === false ); // false, т.к. типы различны.
Взаимодействие с пользователем
alert выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК».
prompt принимает два аргумента:
Она выводит модальное окно с заголовком title, полем для ввода текста, заполненным строкой по умолчанию default и кнопками OK/CANCEL.
Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL или нажатием Esc на клавиатуре.
Вызов prompt возвращает то, что ввёл посетитель – строку или специальное значение null, если ввод отменён.
var years = prompt('Сколько вам лет?', 100);
alert('Вам ' + years + ' лет!')
Рекомендуется всегда указывать второй аргумент, например, кавычки ""
confirm выводит окно с вопросом question с двумя кнопками: OK и CANCEL.
Результатом будет true при нажатии OK и false – при CANCEL(Esc).
var isAdmin = confirm("Вы - администратор?");
alert( isAdmin );
Оператор "if"
(«если») получает условие, в примере это year != 2011.
Он вычисляет его, и если результат – true, то выполняет команду.
var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', '');
if (year != 2011) alert( 'А вот и неправильно!' );
Если нужно выполнить более одной команды – они оформляются блоком кода в фигурных скобках:
if (year != 2011) {
alert( 'А вот..' );
alert( '..и неправильно!' ); }
Рекомендуется использовать фигурные скобки всегда, даже когда команда одна.
Необязательный блок "else" («иначе»)
выполняется, если условие неверно:
var year = prompt('Введите год появления стандарта ECMA-262 5.1', '');
if (year == 2011) {
alert( 'Да вы знаток!' );
} else {
alert( 'А вот и неправильно!' ); // любое значение, кроме 2011 }
Бывает нужно проверить несколько вариантов условия. Для этого используется блок else if .... Например:
var year = prompt('В каком году появилась спецификация ECMA-262 5.1?', '');
if (year < 2011) {
alert( 'Это слишком рано..' );
} else if (year > 2011) {
alert( 'Это поздновато..' );
} else {
alert( 'Да, точно в этом году!' ); }
Оператор вопросительный знак „?“
Он состоит из трех частей: условие ? значение1 : значение2
Проверяется условие, затем если оно верно – возвращается значение 1, если неверно – значение 2, например:
access = (age > 14) ? true : false;
Последовательность операторов '?' позволяет вернуть значение в зависимости не от одного условия, а от нескольких
var age = prompt('возраст?', 18);
var message = (age < 3) ? 'Здравствуй, малыш!' :
(age < 18) ? 'Привет!' :
(age < 100) ? 'Здравствуйте!' :
'Какой необычный возраст!';
alert( message );
Вопросительный знак проверяет сначала age < 3, если верно – возвращает 'Здравствуй, малыш!',
если нет – идет за двоеточие и проверяет age < 18. Если это верно – возвращает 'Привет!',
иначе проверка age < 100 и 'Здравствуйте!'… И наконец, если ничего из этого не верно, то 'Какой необычный возраст!'.
То же самое через if..else:
if (age < 3) {
message = 'Здравствуй, малыш!';
} else if (age < 18) {
message = 'Привет!';
} else if (age < 100) {
message = 'Здравствуйте!';
} else {
message = 'Какой необычный возраст!'; }
Логические операторы
|| (ИЛИ) Обычно оператор ИЛИ используется в if, чтобы проверить, выполняется ли хотя бы одно из условий, например:
var hour = 9;
if (hour < 10 || hour > 18) {
alert( 'Офис до 10 или после 18 закрыт' ); }
Оператор || вычисляет операнды слева направо до первого «истинного» и возвращает его,
а если все ложные – то последнее значение.
&& (И) Оператор && вычисляет операнды слева направо до первого «ложного» и возвращает его,
а если все истинные – то последнее значение.
Приоритет оператора И && больше, чем ИЛИ ||, так что он выполняется раньше.
Оператор ! (НЕ)
Преобразования
В JavaScript есть три преобразования:
Строковое: String(value) – в строковом контексте или при сложении со строкой. Работает очевидным образом.
Для явного преобразования применяется оператор "+", у которого один из аргументов строка. В этом случае он приводит к строке и другой аргумент.
Численное: Number(value) – в численном контексте, включая унарный плюс +value. Происходит при сравнении разных типов, кроме строгого равенства.
Логическое: Boolean(value) – в логическом контексте, можно также сделать двойным НЕ: !!value.
Численное преобразование:
Для преобразования к числу в явном виде можно вызвать Number(val), либо, что короче, поставить перед выражением унарный плюс "+".
Значение преобразуется в...
undefined NaN
null 0
true / false 1 / 0
Строка, пробельные символы по краям обрезаются.
Далее, если остаётся пустая строка, то 0, иначе из не пустой строки "считывается" число, при ошибке результат NaN.
Сравнение разных типов – значит численное преобразование
alert( "\n0 " == 0 ); // true
Специальные значения преобразуются к числу так:
Значение преобразуется в...
undefined NaN
null 0
null не подчиняется законам математики – он «больше либо равен нулю»: null>=0, но не больше и не равен.
Значение undefined вообще «несравнимо»
Логическое преобразование
Все значения, которые интуитивно «пусты», становятся false. Их несколько: 0, пустая строка, null, undefined и NaN.
Остальное, в том числе и любые объекты – true
Значение преобразуется в...undefined, null false
Числа Все true, кроме 0, NaN -- false.
Строки Все true, кроме пустой строки "" -- false
Объекты Всегда true
Для явного преобразования используется двойное логическое отрицание !!value или вызов Boolean(value).
Циклы
Для многократного повторения одного участка кода – предусмотрены циклы.
JavaScript поддерживает три вида циклов:
Цикл"while" имеет вид:
while (условие) { // код, тело цикла }
Например, цикл ниже выводит i пока i < 3:
var i = 0;
while (i < 3) {
alert( i );
i++; }
Начало: i=0. Условие: i < 3. Шаг: i++. Тело: alert(i)
Повторение цикла по научному называется «итерация».
Цикл в примере выше совершает три итерации.
while – проверка условия перед каждым выполнением.
Цикл do..while – проверка условия после каждого выполнения.
var i = 0;
do {
alert( i );
i++;
} while (i < 3);
Цикл for – проверка условия перед каждым выполнением, а также дополнительные настройки.
for (начало; условие; шаг) {// ... тело цикла ...}
var i;
for (i = 0; i < 3; i++) {
alert( i ); }
Любая часть for может быть пропущена.
Например, можно убрать начало:
var i = 0;
for (; i < 3; i++) {
alert( i ); // 0, 1, 2 }
Можно убрать и шаг, и т.д.
Прерывание цикла "break"
Выйти из цикла можно не только при проверке условия но и, вообще, в любой момент.
var sum = 0;
while (true) {
var value = +prompt("Введите число", '');
if (!value) break; // (*)
sum += value; }
alert( 'Сумма: ' + sum );
Директива break в строке (*), если посетитель ничего не ввёл, полностью прекращает выполнение цикла
и передаёт управление на строку за его телом, то есть на alert.
Итерация "continue"
Директива continue прекращает выполнение текущей итерации цикла.
Она прерывает не весь цикл, а только текущее выполнение его тела, как будто оно закончилось.
for (var i = 0; i < 10; i++) {
if (i % 2 == 0) continue;
alert(i); }
Чётность проверяется по остатку при делении на 2, используя оператор «деление с остатком» %: i % 2.
Для чётных i срабатывает continue, выполнение тела прекращается и управление передаётся на следующий проход for.
Метки для "break/continue"
Бывает нужно выйти одновременно из нескольких уровней цикла.
Например, внутри цикла по i находится цикл по j, и при выполнении некоторого условия мы бы хотели выйти из обоих циклов сразу:
outer: for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
var input = prompt('Значение в координатах '+i+','+j, ''); // если отмена ввода или пустая строка - // завершить оба цикла
if (!input) break outer; // (*) }}
alert('Готово!');
В коде выше для этого использована метка.
Метка имеет вид "имя:", имя должно быть уникальным. Она ставится перед циклом, вот так:
outer: for (var i = 0; i < 3; i++) { ... }
Вызов break outer ищет ближайший внешний цикл с такой меткой и переходит в его конец.
В примере выше это означает, что будет разорван самый внешний цикл и управление перейдёт на alert.
Директива continue также может быть использована с меткой, в этом случае управление перепрыгнет на следующую итерацию цикла с меткой.
Конструкция "switch"
Конструкция switch заменяет собой сразу несколько if.
Пример использования switch:
var a = 2 + 2;
switch (a) {
case 3:
alert( 'Маловато' );
break;
case 4:
alert( 'В точку!' );
break;
case 5:
alert( 'Перебор' );
break;
default:
alert( 'Я таких значений не знаю' ); }
Здесь оператор switch
последовательно сравнит a со всеми вариантами из case.
Каждый оператор case завершается командой break, которая указывает на завершение обработки данного значения и переходу к следующему.
Функции
Чтобы не повторять один и тот же код во многих местах, придуманы функции.
Объявление функции имеет вид:
function имя(параметры, через, запятую) {код функции}
Пример объявления функции:
function showMessage() {
alert( 'Привет всем присутствующим!' ); }
Вначале идет ключевое слово function, после него имя функции,
затем список параметров в скобках (в примере выше он пустой) и тело функции – код, который выполняется при её вызове.
Объявленная функция доступна по имени, например:
function showMessage() {
alert( 'Привет всем присутствующим!' ); }
showMessage();
showMessage();
Этот код выведет сообщение два раза. Уже здесь видна главная цель создания функций: избавление от дублирования кода.
Локальные переменные
Функция может содержать локальные переменные, объявленные через var. Такие переменные видны только внутри функции:
function showMessage() {
var message = 'Привет, я - Вася!'; // локальная переменная
alert( message ); }
showMessage(); // 'Привет, я - Вася!'
alert( message ); // <-- будет ошибка, т.к. переменная видна только внутри
Блоки if/else, switch, for, while, do..while не влияют на область видимости переменных.
При объявлении переменной в таких блоках, она всё равно будет видна во всей функции.
function count() { // переменные i, j не будут уничтожены по окончании цикла
for (var i = 0; i < 3; i++) {
var j = i * 2;}
alert( i ); // i=3, последнее значение i, при нём цикл перестал работать
alert( j ); // j=4, последнее значение j, которое вычислил цикл }
Неважно, где именно в функции и сколько раз объявляется переменная. Любое объявление срабатывает один раз и распространяется на всю функцию.
Внешние переменные
Функция может обратиться ко внешней переменной, например:
var userName = 'Вася';
function showMessage() {
var message = 'Привет, я ' + userName;
alert(message); }
showMessage(); // Привет, я Вася
Доступ возможен не только на чтение, но и на запись.
var userName = 'Вася';
function showMessage() {
userName = 'Петя'; // присвоение во внешнюю переменную
var message = 'Привет, я ' + userName;
alert( message ); }
showMessage();
alert( userName ); // Петя, значение внешней переменной изменено функцией
Переменные, объявленные на уровне всего скрипта, называют «глобальными переменными».
Параметры
При вызове функции ей можно передать данные, которые та использует по своему усмотрению.
Например, этот код выводит два сообщения:
function showMessage(from, text) { // параметры from, text
from = "** " + from + " **"; // здесь может быть сложный код оформления
alert(from + ': ' + text); }
showMessage('Маша', 'Привет!');
showMessage('Маша', 'Как дела?');
Параметры копируются в локальные переменные функции.
Аргументы по умолчанию
Функцию можно вызвать с любым количеством аргументов.
Если параметр не передан при вызове – он считается равным undefined.
Например, функцию показа сообщения showMessage(from, text) можно вызвать с
одним аргументом:
showMessage("Маша");
При этом можно проверить, и если параметр не передан – присвоить ему значение «по умолчанию»:
function showMessage(from, text) {
if (text === undefined) {
text = 'текст не передан'; }
alert( from + ": " + text ); }
showMessage("Маша", "Привет!"); // Маша: Привет!
showMessage("Маша"); // Маша: текст не передан
Можно использовать оператор ||:
function showMessage(from, text) {
text = text || 'текст не передан';
... }
Второй способ считает, что аргумент отсутствует, если передана пустая строка, 0, или вообще любое значение, которое в логическом контексте является false.
Возврат значения
Функция может возвратить результат, который будет передан в вызвавший её код.
Например, создадим функцию calcD, которая будет возвращать дискриминант квадратного уравнения по формуле b2 – 4ac:
function calcD(a, b, c) {
return b*b - 4*a*c; }
var test = calcD(-4, 2, 1);
alert(test); // 20
Для возврата значения используется директива return.
Она может находиться в любом месте функции. Как только до неё доходит управление – функция завершается и значение передается обратно.
Вызовов return может быть и несколько.
Директива return может также использоваться без значения, чтобы прекратить выполнение и выйти из функции:
function showMovie(age) {
if (!checkAge(age)) {
return; }
alert( "Фильм не для всех" ); // (*)
// ... }
В коде выше, если сработал if, то строка (*) и весь код под ней никогда не выполнится, так как return завершает выполнение функции.
Функциональные выражения
В JavaScript функция является значением, таким же как строка или число.
Как и любое значение, объявленную функцию можно вывести, вот так:
function sayHi() {
alert( "Привет" ); }
alert( sayHi ); // выведет код функции
Обратим внимание на то, что в последней строке после sayHi нет скобок (). То есть, функция не вызывается, а просто выводится на экран.
Функцию можно скопировать в другую переменную:
function sayHi() { // (1)
alert( "Привет" ); }
var func = sayHi; // (2)
func(); // Привет // (3)
sayHi = null;
sayHi(); // ошибка (4)
Объявление (1) как бы говорит интерпретатору "создай функцию и помести её в переменную sayHi
В строке (2) мы копируем функцию в новую переменную func. Ещё раз обратите внимание: после sayHi нет скобок. Если бы они были, то вызов var func = sayHi() записал бы в func результат работы sayHi() (кстати, он равен, undefined, ведь внутри sayHi нет return).
На момент (3) функцию можно вызывать и как sayHi() и как func()
…Однако, в любой момент значение переменной можно поменять. При этом, если оно не функция, то вызов (4) выдаст ошибку.
Обычные значения, такие как числа или строки, представляют собой данные. А функцию можно воспринимать как действие.
Это действие можно запустить через скобки (), а можно и скопировать в другую переменную, как было продемонстрировано выше.
Объявление Function Expression
Существует альтернативный синтаксис для объявления функции, который ещё более наглядно показывает, что функция – это всего лишь разновидность значения переменной.
Он называется «Function Expression» (функциональное выражение) и выглядит так:
var f = function(параметры) { // тело функции };
Например:
var sayHi = function(person) {alert( "Привет, " + person ); };
sayHi('Вася');
Сравнение с Function Declaration
«Классическое» объявление функции вида function имя(параметры) {...}, называется в спецификации языка «Function Declaration».
Function Declaration – функция, объявленная в основном потоке кода.
Function Expression – объявление функции в контексте какого-либо выражения, например присваивания.
Основное отличие между ними: функции, объявленные как Function Declaration, создаются интерпретатором до выполнения кода.
Поэтому их можно вызвать до объявления, например:
sayHi("Вася"); // Привет, Вася
function sayHi(name) {
alert( "Привет, " + name ); }
А если бы это было объявление Function Expression, то такой вызов бы не сработал:
sayHi("Вася"); // ошибка!
var sayHi = function(name) {
alert( "Привет, " + name ); }
Это из-за того, что JavaScript перед запуском кода ищет в нём Function Declaration (их легко найти: они не являются частью выражений и начинаются со слова function) и обрабатывает их.
А Function Expression создаются в процессе выполнения выражения, в котором созданы, в данном случае – функция будет создана при операции присваивания sayHi = function...
Как правило, возможность Function Declaration вызвать функцию до объявления – это удобно, так как даёт больше свободы в том, как организовать свой код.
Можно расположить функции внизу, а их вызов – сверху или наоборот.
Условное объявление функции
В некоторых случаях «дополнительное удобство» Function Declaration может сослужить плохую службу.
Например, попробуем, в зависимости от условия, объявить функцию sayHi по-разному:
var age = +prompt("Сколько вам лет?", 20);
if (age >= 18) {
function sayHi() {
alert( 'Прошу вас!' ); }
} else {
function sayHi() {
alert( 'До 18 нельзя' ); }}
sayHi();
Function Declaration при use strict видны только внутри блока, в котором объявлены. Так как код выполняется в режиме use strict, то будет ошибка.
А что, если использовать Function Expression?
var age = prompt('Сколько вам лет?');
var sayHi;
if (age >= 18) {
sayHi = function() {
alert( 'Прошу Вас!' ); }
} else {
sayHi = function() {
alert( 'До 18 нельзя' ); }}
sayHi();
Или даже так:
var age = prompt('Сколько вам лет?');
var sayHi = (age >= 18) ?
function() { alert('Прошу Вас!'); } :
function() { alert('До 18 нельзя'); };
sayHi();
Оба этих варианта работают правильно, поскольку, в зависимости от условия, создаётся именно та функция, которая нужна.
Анонимные функции
Взглянем ещё на один пример – функцию ask(question, yes, no) с тремя параметрами:
question Строка-вопрос, yes Функция, no Функция.
Она выводит вопрос на подтверждение question и, в зависимости от согласия пользователя, вызывает функцию yes() или no():
function ask(question, yes, no) {
if (confirm(question)) yes()
else no(); }
function showOk() {
alert( "Вы согласились." ); }
function showCancel() {
alert( "Вы отменили выполнение." ); }
// использование
ask("Вы согласны?", showOk, showCancel);
Обратим внимание на то, что то же самое можно написать более коротко:
function ask(question, yes, no) {
if (confirm(question)) yes()
else no(); }
ask(
"Вы согласны?",
function() { alert("Вы согласились."); },
function() { alert("Вы отменили выполнение."); });
Здесь функции объявлены прямо внутри вызова ask(...), даже без присвоения им имени.
Функциональное выражение, которое не записывается в переменную, называют анонимной функцией.
new Function
Она позволяет создавать функцию полностью «на лету» из строки:
var sum = new Function('a,b', ' return a+b; ');
var result = sum(1, 2);
alert( result ); // 3
То есть, функция создаётся вызовом new Function(params, code):
params Параметры функции через запятую в виде строки.
code Код функции в виде строки.
Таким образом можно конструировать функцию, код которой неизвестен на момент написания программы, но строка с ним генерируется или подгружается динамически во время её выполнения.
Рекурсия, стек
В теле функции могут быть вызываны другие функции для выполнения подзадач.
Частный случай подвызова – когда функция вызывает сама себя. Это называется рекурсией.
Рекурсия используется для ситуаций, когда выполнение одной сложной задачи можно представить как некое действие в совокупности с решением той же задачи в более простом варианте.
Степень pow(x, n) через рекурсию
Рассмотрим задачу возведения числа x в натуральную степень n.
Её можно представить как совокупность более простого действия и более простой задачи того же типа вот так:
pow(x, n) = x * pow(x, n - 1)
То есть, xn = x * xn-1.
Например, вычислим pow(2, 4), последовательно переходя к более простой задаче:
1. pow(2, 4) = 2 * pow(2, 3)
2. pow(2, 3) = 2 * pow(2, 2)
3. pow(2, 2) = 2 * pow(2, 1)
4. pow(2, 1) = 2
На шаге 1 нам нужно вычислить pow(2,3), поэтому мы делаем шаг 2, дальше нам нужно pow(2,2), мы делаем шаг 3, затем шаг 4, и на нём уже можно остановиться, ведь очевидно, что результат возведения числа в степень 1 – равен самому числу.
Далее, имея результат на шаге 4, он подставляется обратно в шаг 3, затем имеем pow(2,2) – подставляем в шаг 2 и на шаге 1 уже получаем результат.
Этот алгоритм на JavaScript:
function pow(x, n) {
if (n != 1) { // пока n != 1, сводить вычисление pow(x,n) к pow(x,n-1)
return x * pow(x, n - 1);
} else {
return x; }}
alert( pow(2, 3) ); // 8
Говорят, что «функция pow рекурсивно вызывает сама себя» до n == 1.
Значение, на котором рекурсия заканчивается, называют базисом рекурсии. В примере выше базисом является 1.
Общее количество вложенных вызовов называют глубиной рекурсии. В случае со степенью, всего будет n вызовов.
Максимальная глубина рекурсии в браузерах ограничена, точно можно рассчитывать на 10000 вложенных вызовов, но некоторые интерпретаторы допускают и больше.
Контекст выполнения, стек
У каждого вызова функции есть свой «контекст выполнения» (execution context).
Контекст выполнения – это служебная информация, которая соответствует текущему запуску функции. Она включает в себя локальные переменные функции и конкретное место в коде, на котором находится интерпретатор.
Например, для вызова pow(2, 3) из примера выше будет создан контекст выполнения, который будет хранить переменные x = 2, n = 3. Схематично обозначим его так:
Контекст: { x: 2, n: 3, строка 1 }
Далее функция pow начинает выполняться. Вычисляется выражение n != 1 – оно равно true, ведь в текущем контексте n=3. Поэтому задействуется первая ветвь if
Чтобы вычислить выражение x * pow(x, n-1), требуется произвести запуск pow с новыми аргументами.
При любом вложенном вызове JavaScript запоминает текущий контекст выполнения в специальной внутренней структуре данных – «стеке контекстов».
Затем интерпретатор приступает к выполнению вложенного вызова.
В данном случае вызывается та же pow, однако это абсолютно неважно. Для любых функций процесс одинаков.
Для нового вызова создаётся свой контекст выполнения, и управление переходит в него, а когда он завершён – старый контекст достаётся из стека и выполнение внешней функции возобновляется.
При выполнении pow(2, 1) выражение n != 1 будет равно false, поэтому сработает вторая ветка if..else
Глубина рекурсии равна максимальному числу контекстов, одновременно хранимых в стеке.
Обратим внимание на требования к памяти. Рекурсия приводит к хранению всех данных для неоконченных внешних вызовов в стеке, в данном случае это приводит к тому, что возведение в степень n хранит в памяти n различных контекстов.
Реализация возведения в степень через цикл гораздо более экономна:
function pow(x, n) {
var result = x;
for (var i = 1; i < n; i++) {
result *= x; }
return result; }
У такой функции pow будет один контекст, в котором будут последовательно меняться значения i и result.
Любая рекурсия может быть переделана в цикл. Как правило, вариант с циклом будет эффективнее.
Именованные функциональные выражения
Специально для работы с рекурсией в JavaScript существует особое расширение функциональных выражений, которое называется «Named Function Expression» (сокращённо NFE) или, по-русски, «именованное функциональное выражение».
Обычное функциональное выражение:
var f = function(...) { /* тело функции */ };
Именованное с именем sayHi:
var f = function sayHi(...) { /* тело функции */ };
Что же это за имя, которое идёт в дополнение к f, и зачем оно?
Имя функционального выражения (sayHi) имеет особый смысл. Оно доступно только изнутри самой функции.
Это ограничение видимости входит в стандарт JavaScript и поддерживается всеми браузерами, кроме IE8-.
Например:
var f = function sayHi(name) {
alert( sayHi ); // изнутри функции - видно (выведет код функции) };
alert( sayHi ); // снаружи - не видно (ошибка: undefined variable 'sayHi')
Кроме того, имя NFE нельзя перезаписать:
var test = function sayHi(name) {
sayHi = "тест"; // попытка перезаписи
alert( sayHi ); // function... (перезапись не удалась) };
test();
В режиме use strict код выше выдал бы ошибку.
Как правило, имя NFE используется для единственной цели – позволить изнутри функции вызвать саму себя.
NFE используется в первую очередь в тех ситуациях, когда функцию нужно передавать в другое место кода или перемещать из одной переменной в другую.
Внутреннее имя позволяет функции надёжно обращаться к самой себе, где бы она ни находилась.
Вспомним, к примеру, функцию-факториал из задачи "Вычислить факториал":
function f(n) {
return n ? n * f(n - 1) : 1; };
alert( f(5) ); // 120
Попробуем перенести её в другую переменную g:
function f(n) {
return n ? n * f(n - 1) : 1; };
var g = f;
f = null;
alert( g(5) ); // запуск функции с новым именем - ошибка при выполнении!
Ошибка возникла потому что функция из своего кода обращается к своему старому имени f. А этой функции уже нет, f = null.
Для того, чтобы функция всегда надёжно работала, объявим её как Named Function Expression:
var f = function factorial(n) {
return n ? n*factorial(n-1) : 1; };
var g = f; // скопировали ссылку на функцию-факториал в g
f = null;
alert( g(5) ); // 120, работает!
В браузере IE8- создаются две функции.
Как говорилось выше, в браузере IE до 9 версии имя NFE видно везде, что является ошибкой с точки зрения стандарта.
…Но на самом деле ситуация ещё забавнее. Старый IE создаёт в таких случаях целых две функции: одна записывается в переменную f, а вторая – в переменную factorial.
Например:
var f = function factorial(n) { /*...*/ };
// в IE8- false
// в остальных браузерах ошибка, т.к. имя factorial не видно
alert( f === factorial );
Все остальные браузеры полностью поддерживают именованные функциональные выражения.
Запрет на копирование картинок и текста
Вариант 1:
В <head> добавляем meta заголовок, для отключения тулбара при наведении на который можно сохранить изображение:
<meta http-equiv="imagetoolbar" content="no" />
Создаем в CSS селектор .locked.
Для отключение возможности выделения
.locked {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
pointer-events: none;
}
Добавляем полифил для селектора '.locked' (Файл.js):
/**
* '.locked' polyfill
*/ (function () {
"use strict";
var el = document.createElement('div');
el.style.cssText = 'pointer-events:auto';
if (el.style.pointerEvents !== 'auto') {
el = null;
var _lock = function (evt) {
evt = evt || window.event;
var el = evt.target || evt.srcElement;
if (el && /\slocked\s/.test(' ' + el.className + ' ')) {
if (evt.stopPropagation) {
evt.preventDefault();
evt.stopPropagation();
} else {
evt.returnValue = true;
evt.cancelBubble = true;
} } };
if (document.addEventListener) {
document.addEventListener('mousedown', _lock, false);
document.addEventListener('contextmenu', _lock, false);
} else {
document.attachEvent('onmousedown', _lock);
document.attachEvent('oncontextmenu', _lock, false);
} } })();
Добавляем в <head>
<script SRC="Файл.js"></script>
Устанавливаем class="locked":
<img class="locked" src="..."/>
<p class="locked">Запрет на копирование...</p>
Вариант 2:
вставляем в любом месте между <head> ... </head>
<script type="text/javascript">
document.ondragstart = noselect; // запрет на перетаскивание
document.onselectstart = noselect; // запрет на выделение элементов страницы
document.oncontextmenu = noselect; // запрет на выведение контекстного меню
function noselect() {return false;}
</script>
Просмотр исходного кода в браузере без мышки:
Ctrl + u
