Подключение JavaScript к HTML
Перед тем как использовать JavaScript, его необходимо добавить в HTML документ. Сделать это можно с помощью элемента <script>
двумя способами:
- Определить встроенный сценарий, который располагается непосредственно между парой тегов
<script>
и</script>
- Подключить внешний файл с JavaScript-кодом
Примечание: элемент <script>
может быть расположен в любом месте внутри элемента <head> и/или внутри элемента <body> и использоваться любое количество раз.
Встроенный сценарий
JavaScript код можно вставить непосредственно внутри элемента <script>. Сценарий, расположенный непосредственно внутри элемента, называется встроенным.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <script> // JavaScript-код </script> </head> <body> <script> // JavaScript-код </script> </body> </html>
Внешний сценарий
В HTML документ можно также добавить JavaScript код, расположенный во внешнем файле. Сценарий, расположенный внутри внешнего файла, называется внешним. Подключение внешнего файла выполняется с помощью атрибута src
тега <script>
следующим образом:
- Создадим папку и назовём её к примеру
example
, внутри этой папки создаём текстовый файл с расширением.js
, напримерmyscript.js
(имя файла может быть любым), открываем его и добавляем строку JavaScript-кода:
alert("Добро пожаловать!");
Примечание: если вы не знаете как менять расширение у файлов, то можете прочитать об этом в разделе: смена расширения файла.
Обратите внимание, что внутри внешнего файла JavaScript-код не нужно располагать между тегами <script>
и </script>
. Сохраняем изменения в файле и закрываем его.
- Теперь создадим ещё один файл и назовём его
myscript2.js
, открываем его и добавляем следующую строку JavaScript кода:
document.write("<h1>Это моя домашняя страница</h1>");
Сохраняем изменения в файле и закрываем его.
- И последнее, что нам осталось сделать, это создать HTML-документ, к которому будут подключены наши созданные два файла с внешними сценариями. В той же папке, где хранятся наши два сценария (example), создаём HTML-документ и называем его к примеру
test.html
. Теперь c помощью элемента<script>
подключаем два внешних файла c JavaScript-кодом:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <script src="myscript.js"></script> </head> <body> <script src="myscript2.js"></script> </body> </html>
Вот и всё! Сохраняем изменения в HTML-документе, открываем его в браузере и смотрим результат. У вас должно получиться нечто подобное:


Будьте внимательны, так как мы указали с помощью тега <meta> кодировку utf-8
в HTML-документе, кодировка самих файлов (test.html, myscript.js
и myscript2.js
) также должна быть utf-8
.
Примечание: если подключается внешний сценарий, то внутри того же самого элемента <script>
нельзя одновременно располагать встроенный сценарий.
Сравнение внешних и встроенных сценариев
Использование внешних сценариев даёт ряд преимуществ перед встроенными:
- HTML-документы становятся проще для редактирования, так как из них можно убрать большие блоки JavaScript-кода и отделить структуру от поведения страницы.
- Если один и тот же JavaScript-код, используется в нескольких HTML-документах, его лучше подключать в качестве внешнего сценария. Это намного облегчает поддержку и редактирование кода, так как при внесении изменений отпадает необходимость редактировать каждый HTML-документ в отдельности.
- Внешний сценарий загружается браузером всего один раз, при первом посещении страницы. Переходя на другие страницы, использующие тот же сценарий, он будет извлекаться из кэша браузера, что в свою очередь ускорит загрузку и обработку содержимого страницы.
Примечание: располагать сценарий (как внешний так и встроенный) лучше всего в конце HTML-документа, перед закрывающим тегом </body>
. Такое расположение сценария позволяет браузеру загружать страницу быстрее, так как сначала загрузится контент страницы, а потом будет загружаться код сценария.