1.3 Подключение JavaScript к html-документу
Опубликовано: 15.07.2017
Для того, чтобы сценарий JavaScript мог управлять веб-страницей, его нужно сперва к ней подключить. Для этого в HTML предусмотрен специальный парный тег <script> , который позволяет либо использовать встроенный сценарий JavaScript , т.е. писать код языка непосредственно внутри элемента 'script' , либо дает возможность подключить к странице внешний файл с кодом JavaScript .
Для подключения к странице внешнего файла со скриптами применяется атрибут src (от англ. source), в качестве значения принимающий абсолютный или относительный путь к файлу, который обычно имеет расширение .js (посмотреть принципы построения относительных и абсолютных адресов можно здесь ).
13. Виджет АниМоушн - Коды вручную JavaScript
Важно помнить, что когда атрибут src присутствует, между открывающим и закрывающим тегом элемента 'script' код не пишется, хотя сами теги указываются. Кроме того, по умолчанию применяется type ="text/javascript" , поэтому указывать атрибут type необязательно.
Drawing the boarderline between HTML, CSS and JavaScript
Внимательно и неторопясь изучите пример 1.3.1 (здесь и далее, чтобы посмотреть код внешних файлов JavaScript , используйте значок загрузки под примером). Обратите внимание, что внутри элемента 'script' используются комментарии JavaScript , синтаксис которых имеет вид, отличный от синтаксиса комментариев HTML (подробно о комментариях мы поговорим немного позже).
<!DOCTYPE html> <html> <head> <!-- Сообщаем браузеру кодировку документа --> <meta charset="utf-8"> <!-- Не забываем про заголовок документа --> <title>Подключение JavaScript к веб-странице</title> <!-- Подключаем 1-й внешний файл со скриптами --> <script src="file_1_3_1.js"></script> <!-- Используем встроенный сценарий. Атрибут type можно не указывать --> <script type="text/javascript"> //Метод alert() выводит на экран диалоговое окно. alert("Я - 1-й встроенный сценарий!"); </script> </head> <body> <!-- Подключать внешние файлы со скриптами можно --> <!-- в любом месте страницы по мере необходимости --> <script src="file_1_3_2.js"></script> <p> Я - содержимое первого абзаца в теле документа. </p> <!-- Тоже самое касается и встроенных сценариев JavaScript --> <script> alert("Я - 2-й встроенный сценарий!"); </script> <p> Я - содержимое второго абзаца в теле документа. </p> </body> </html>Пример 1.3.1. Подключение JavaScript к веб-странице