Добавление JavaScript в HTML

В этой главе:

  • Встроенный сценарий

  • Внешний сценарий

  • Сравнение внешних и встроенных сценариев

Перед тем как использовать JavaScript, его необходимо добавить в HTML-документ. Сделать это можно с помощью элемента <script> двумя способами:

  1. Определить встроенный сценарий, который располагается непосредственно между парой тегов <script> и </script>

  2. Подключить внешний файл с JavaScript-кодом

Встроенный сценарий

JavaScript-код можно вставить непосредственно внутри элемента <script>. Элемент <script> может быть расположен в любом месте внутри элемента <head> и/или внутри элемента <body>. В одном документе элемент <script> может быть указан любое количество раз. Сценарий, расположенный непосредственно внутри элемента, называется встроенным.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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, например script1.js, открываем его и добавляем строку кода:

1
alert("Добро пожаловать!");

Сохраняем файл и закрываем его. Обратите внимание, что сценарий внутри внешнего файла не нужно располагать между тегами <script> и </script>.

  • Теперь создадим ещё один файл и назовём его script2.js, открываем его и добавляем следующую строку кода:

1
document.write("<h1>Это моя домашняя страница</h1>");

Сохраняем файл и закрываем его.

  • Далее создаём HTML-документ, назовём его к примеру test.html и подключаем два внешних файла c JavaScript-кодом:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название документа</title>
  <script src="script1.js"></script>
</head>
<body>
  <script src="script2.js"></script>
</body>
</html>

Сохраняем HTML-докумет и открываем его в браузере. У вас должно получиться нечто подобное:


Будьте внимательны, так как мы указали с помощью тега <meta> кодировку utf-8 в HTML-документе, кодировка самих файлов (test.html, script1.js и script2.js) также должна быть utf-8.

Примечание: если подключается внешний сценарий, внутри того же самого элемента <script> нельзя одновременно располагать встроенный сценарий, так как в этом случае он не будет исполняться.

Сравнение внешних и встроенных сценариев

Использование внешних сценариев даёт ряд преимуществ перед встроенными:

  • HTML-документы становятся проще для редактирования, так как из них можно убрать большие блоки JavaScript-кода и отделить структуру от поведения страницы.

  • Если один и тот же JavaScript-код, используется в нескольких HTML-документах, его лучше подключать в качестве внешнего сценария. Это намного облегчает поддержку и редактирование кода, так как при внесении изменений отпадает необходимость редактировать каждый HTML-документ в отдельности.

  • Внешний сценарий загружается браузером всего один раз, при первом посещении страницы. Переходя на другие страницы, использующие тот же сценарий, он будет извлекаться из кэша браузера, что в свою очередь ускорит загрузку и обработку содержимого страницы.

Примечание: располагать сценарий (как внешний так и встроенный) лучше всего в конце HTML-документа, перед закрывающим тегом </body>. Такое расположение сценария позволяет браузеру загружать страницу быстрее, так как сначала загрузится контент страницы, а потом будет загружаться код сценария.