Встраивание JS-кода в код страницы
Далее в тексте вместо JavaScript будет использовано сокращение JS !
Код JS, состоит из инструкций, выполняемых браузером; каждая инструкция должна оканчиваться знаком ; (точка с запятой).
Код JS может быть добавлен на страницу различными способами.
1.Встраивание JS-кода в код страницы
Для встраивания кода на страницу применяются теги <script> (открывающий) и </script> (закрывающий); код на JS вставляется между ними. Такой код может быть расположен между основными тегами <head> и </head> или <body> и </body>.
При размещения кода JavaScript важно помнить одну важную особенность: все элементы страницы загружаются браузером строго в том порядке, в котором они прописаны в файле.
Что это значит и почему это так важно?
Дело в том, что код JS может работать только с тем HTML-кодом, который уже загружен, т.е. находится в файле выше и, соответственно, уже загружен браузером. Код, который находится ниже, загружается позже и поэтому не может быть использован в уже загруженном скрипте JS.
Однако здесь стоит учитывать, что к элементу (тегу) <script> могут применяться атрибуты, позволяющие управлять работой скрипта, т.е. указывающие, в какое время скрипт должен быть выполнен (например, сразу после завершения загрузки страницы).
Вместе с открывающим тегом обычно указывается атрибут type='text/javascript', однако это делать не обязательно, так как он уже установлен по умолчанию. Выглядит код обычно так:
1 <script type="application/javascript">
2 код JavaScript ;
3 </script>
Такой скрипт будет выполнен сразу же, как только он будет загружен браузером. Однако, при необходимости вы можете это изменить при помощи атрибутов async и defer, но только при условии, что скрипт расположен в отдельном файле.
Атрибут async указывает, что получение и выполнение скрипта (расположенного в отдельном файле), будет происходить асинхронно, т.е. независимо от загрузки самой страницы скрипт будет запущен сразу после его загрузки.
1 <script type="application/javascript" async src="js/file.js">
2 код JavaScript ;
3 </script>
Атрибут defer указывает, что получение скрипта происходит так же асинхронно, т.е. независимо от загрузки самой страницы, а вот выполнение скрипта будет отложено до тех пор, пока страница полностью не загрузится (о чём говорилось выше).
1 <script type="application/javascript" defer src="js/file.js">
2 код JavaScript ;
3 </script>
Атрибут src используется для указания пути к файлу со скриптом. Так же может быть использован атрибут charset, указывающий кодировку этого файла.
2.Код в отдельном файле
Как правило, такие файлы хранятся в отдельных папках; такие папки могут быть где угодно - в компонентах, модулях, в шаблонах. Что бы подключить такой файл используется атрибут src:
1 <script type="application/javascript" src="полный путь к файлу"></script>
3.Код внутри тега
Код JS может быть встроен внутрь HTML-тега, например, так:
1 <a href="save.php" onclick="return confirm('Сохранить изменения?');"> Сохранить </a>
Разберём по порядку данный код.
Тег a создаёт ссылку, атрибут href указывает адрес файла, событие onclick указывает, что необходимо сделать, если пользователь кликнет левой кнопкой мыши по указанной ссылке. А вот в событии прописан (в кавычках) код JS:
"return confirm('Сохранить изменения?');"
Слово return означает, что должно быть возвращено какое-либо значение; confirm - это функция, которая заставляет браузер создать модальное окно и отразить надпись, указанную в скобках.
Стоит обратить внимание на то, что в событии onclick может быть прописан не весь JS-код, а только имя функции, которая будет вызвана при клике левой кнопки мыши по ссылке; при этом сама функция прописывается отдельно:
1 <script>
2 function iCaution() {
... тело функции
7 }
8 </script>
...
20 <a href="save.php" onclick="iCaution()"> Сохранить </a>
В приведённом примере функция прописана отдельно (строки 1-8), а в 20 строке она вызывается при помощи onclick.
Комментарии в коде
Комментарии в код можно добавлять используя /* ... */ для многострочных комментариев и // для однострочных, например:
1 <script>
2 function iCaution() {
... тело функции // комментарий на одной строке
7 }
8 </script>
или
1 <script>
2 function iCaution() {
3 /*
4 * комментарий,
5 * расположенный
6 * на нескольких строках
7 */
... тело функции
11 }
12 </script>
Литералы
В JavaScript значения представляются при помощи литералов.
Литерал строки. В JS любой текст (строки или отдельные слова, имена и т.д.) заключаются в кавычки: либо одинарные ' , либо двойные " . Для работы со строками применяются специальные символы (см. таблицу).
| \n | Перенос на новую строку (аналогично br/ в HTML) |
| \f | Перенос на новую страницу |
| \b | Возврат |
| \r | Возврат каретки |
| \t | Табуляция |
| \v | Вертикальная табуляция |
| \\ | Обратная косая черта |
| \' | Одинарная кавычка |
| \" | Двойная кавычка |
| \*** | Символ в кодировке ISO 8859-1, где *** - это три восьмеричных числа. |
| \x** | Символ в кодировке ISO 8859-1, где ** - это два шестнадцатиричных числа. |
| \u**** | Символ в Unicode, где **** - это четыре шестнадцатиричных числа. |
| \u{*****} | Символ в UTF-32BE. |
Литерал целого числа. Целые числа записываются обычным способом в различных системах исчисления (десятичной, двоичной и т.д. Обратите внимание на то, что десятичное число не должно начинаться с нуля, иначе произойдёт ошибка, так как если число начинается с цифры "0" это будет воспринято как число в восьмеричном исчислении. Двоичные числа должны начинаться на "0b", шестнадцатеричные - "0x".
Числа с плавающей точкой. Числа с плавающей точкой прописываются в коде как обычно, без каких либо дополнительных символов. Стоит иметь ввиду, что в качестве десятичной точки применяется именно символ "точка", а не "запятая".
Логические литералы (Boolean). Имеют два значения: true (истина) и false (ложь).
Литерал массива. Эта тема будет подробно раскрыта в главе JavaScript.Массивы.
Литерал объекта - список, состоящий из пар имя_свойства/значение, принадлежащих этому объекту; список заключается в фигурные скобки { } . В качестве значений могут использоваться строки, числа, результаты вызова функций, значения переменных и .т.д.
1 var Number_of_Pages = 100
2 var Book = { name: "Моя книга", volume: Number_of_Pages };
В приведённом примере свойству name объекта Book присваивается строка "Моя книга", а свойству volume - значение переменной Number_of_Pages.
В качестве имени свойства может быть использованы строка, пустая строка и даже число. Если имя свойства не является корректным (например, содержит недопустимые символы), оно быть заключено в кавычки. При обращении к таким свойствам используются квадратные скобки (см. пример ниже). Так же допускается вложение одного объекта в другой.
1 var a = Book.name
2 var a = Book["имя свойства"]
Так же при обращении к свойству, имя которого представляет собой число, необходимо либо использовать квадратные скобки (вторая строка в примере), либо использовать точку, как в первой строке примера, но заключать число в кавычки.
Литерал RegExp - это шаблон, расположенный между слешами:
1 var a = /d+w/
Экранирование символов
Иногда возникает необходимость прописать какой-либо символ в виде обычного текста, который в коде может быть воспринят не как текст, а как определённый литерал (например, [ { " ; и т.д.). В этом случае применяется экранирование, т.е. перед соответствующим символом ставиться символ \ . Стоит иметь в виду, что если вы хотите прописать в строке этот символ, то его так же следует экранировать.
Так же стоит обратить внимание на применение этого символа для отмены переноса текста на другую строку. Если в коде какой-либо текст, оформленный в начале и в конце кавычками, расположен на нескольких строках, то переносы будут сохранены и при выводе данного текста; что бы эти переносы убрать и вывести текст на одной строке, вы можете применить символ \ : если его поставить в конце каждой строки кода, переносы будут отменены.
