Top.Mail.Ru
Публичное облако на базе VMware с управлением через vCloud Director
Вход / Регистрация

Как добавить JavaScript в HTML: инструкция

Команда Timeweb Cloud
Команда Timeweb Cloud
Наши инженеры, технические писатели, редакторы и маркетологи
21 сентября 2022 г.
47976
7 минут чтения
Средний рейтинг статьи: 2.3

В этой статье разберёмся, как добавить JavaScript в HTML. Сделать это можно тремя способами:

  • разместить JS-код внутри парного тега <script>;
  • подключить внешний файл;
  • прописать код прямо внутри HTML-тега, используя специальные атрибуты. 

Рассмотрим каждый способ подробнее, чтобы понять его плюсы и минусы.

Миграция в Timeweb Cloud

Перенесем вашу инфраструктуру в облако — быстро,
безопасно и с гарантией результата.

Предоставим грант до 1 000 000 ₽ на облачную
инфраструктуру и возьмем на себя весь процесс.

Вставка кода внутри парного тега <script>

Самый простой способ вставить JS-код в HTML-страницу — использовать парный тег <script>. Он сообщает браузеру, что всё его содержимое нужно интерпретировать как исполняемый скрипт, а не как текст или HTML-код. 

В качестве примера добавим на страницу скрипт, который выводит текущие дату и время.

  
<!DOCTYPE html> <html lang="ru">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>Дата и время</title> </head> <body>     <script>         let date = new Date();         alert("Сейчас " + date);     </script>  </body>   </html>

Теперь при загрузке страницы будет появляться уведомление с текущими датой и временем.

Внутри парного тега <script> можно написать целую программу. В качестве примера создадим электронные часы.

  
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Электронные часы</title> <script> function displayTime() {     let element = document.getElementById("clock"); // Найти элемент с id="clock"      let now = new Date();    // Получить текущее время     element.innerHTML = now.toLocaleTimeString(); // Отобразить время     setTimeout(displayTime, 1000);    // Вызывать функцию каждую секунду } window.onload = displayTime; // Начать отображение времени после загрузки документа </script> </head> <body>     <h1>Электронные часы</h1>      <div id="clock"></div> </body> </html>

Отличный результат! У вас получилось с помощью JavaScript добавить в элемент HTML информацию о текущем времени, которая обновляется каждую секунду.

В комментариях подробно описано, что делает скрипт. Он находит элемент с id=’clock’. Это тег <div>, который находится внутри секции body сразу под заголовком. Затем программа получает текущее время, которое отображается сразу после загрузки документа и обновляется каждую секунду.

Выглядит удобно, но у такого подхода есть несколько минусов. Представьте, что вы хотите отображать время на каждой странице сайта. В таком случае придётся дублировать содержимое тега <script>

Другая проблема – чем больше содержимое скрипта, тем хуже читабельность кода. В примере выше только одна функция. А если их требуется 5-10-20, чтобы реализовать нужное поведение? В таком случае удобнее использовать следующий подход — подключать JS-код из внешних файлов.

Подключение внешних файлов

Для подключения JavaScript из внешних файлов тоже используется тег <script>. Только внутри него появляется атрибут src, в котором вы указываете ссылку на JS-файл. Это может быть файл, который вы создали сами и храните рядом с HTML или в другом каталоге. А ещё это может быть файл JS-библиотеки, которая добавляет на страницу нужное вам поведение.

В качестве примера возьмём скрипт, который выводит текущее время. Перенесём всю логику в отдельный файл:

  
# Файл time.js function displayTime() {     let element = document.getElementById("clock"); // Найти элемент с id="clock"      let now = new Date();    // Получить текущее время     element.innerHTML = now.toLocaleTimeString(); // Отобразить время     setTimeout(displayTime, 1000);    // Вызывать функцию каждую секунду } window.onload = displayTime; // Начать отображение времени после загрузки документа

Из файла HTML можно удалить весь код JS. Останется только тег <script>, в котором через атрибут src указана ссылка на файл time.js:

  
#Файл time.html <html> <head>     <meta charset="utf-8">     <title>Электронные часы</title>     <script src="./time.js"></script> </head> <body>     <h1>Электронные часы</h1>      <div id="clock"></div> </body> </html>

Результат будет таким же — вам снова удалось с помощью JavaScript добавить в HTML div информацию о текущем времени.

У такого подхода сразу несколько плюсов:

  1. Содержимое файлов HTML становится проще. В них остаются только контент и ссылки на внешние файлы.
  2. Весь JS-код можно держать в одном файле и при необходимости подключать его к разным страницам.
  3. Если один скрипт используется несколькими страницами, то он будет загружаться полностью только один раз, а затем использоваться повторно из кэша браузера.

JS внутри тегов HTML

Вы можете разместить JavaScript внутри тега HTML, используя специальные атрибуты — например, onclick, onmouseover, onkeypress, onload. Они добавляют на элементы обработчики событий. 

  
<!DOCTYPE html> <html lang="ru"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>JavaScript внутри HTML-тега</title>         </head> <body>         <button onclick="alert('Привет! Так JS тоже работает')">Нажми на меня</button>     <button onmouseover="alert('И это тоже работает')">Наведи на меня курсор</button> </body> </html>

Если вы нажмёте на первую кнопку, то в браузере отобразится уведомление с текстом «Привет! Так JS тоже работает». На вторую кнопку достаточно навести курсор мыши — в ответ тоже появится браузерное уведомление с текстом «И это тоже работает». Это говорит о том, что обработчик событий работает корректно и реагирует на действия пользователя. 

Вы можете добавить в один тег несколько атрибутов с обработчиками событий, разделив их точкой с запятой. Вот так:

  
<button onclick="alert('Привет! Так JS тоже работает')" ; onmouseover="alert('И это тоже работает')">Нажми на меня</button>

Однако это плохая практика. Большинство разработчиков предпочитает разделять контент и управление поведением по разным файлам. К тому же, как вы видите, использование обработчиков внутри HTML заметно ухудшает читабельность кода.

Подготовили для вас выгодные тарифы на облачные серверы

  • Premium 3.3 ГГц
  • Dedicated CPU
Москва
Cloud MSK 15

300 ₽/мес

Процессор
1 x 3.3 ГГц
Память
1 ГБ
NVMe
15 ГБ
Канал
1 Гбит/с
Публичный IP
Cloud MSK 30

550 ₽/мес

Процессор
1 x 3.3 ГГц
Память
2 ГБ
NVMe
30 ГБ
Канал
1 Гбит/с
Публичный IP

Где лучше располагать скрипты

Технически нет ограничений на вставку тега <script>. Вы можете добавить JavaScript на странице в секциях <head> и <body>, в самом начале и в конце документа. Все эти варианты будут рабочими.

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

Дело в том, что каждый тег <script> блокирует отрисовку страницы до тех пор, пока не будут завершены полная загрузка и выполнение JS. Но подключенные файлы (а иногда и целые библиотеки) могут весить достаточно много. При высокой скорости интернета пауза может быть минимальной. Но стоит пользователю оказаться в месте с плохим покрытием сотовой связи, как он заметит, что сайт очень долго не отображает контент.

Размещать скрипты в секции head нужно только в том случае, если на то есть причины. Например, без JS на странице не отображается вообще никакой контент. Но если таких причин нет, и вы беспокоитесь о скорости загрузки страницы, то лучше JavaScript добавить в HTML-код в самом конце документа, перед закрывающим тегом </body>.

Хотите внести свой вклад?
Участвуйте в нашей контент-программе за
вознаграждение или запросите нужную вам инструкцию
img-server
21 сентября 2022 г.
47976
7 минут чтения
Средний рейтинг статьи: 2.3
  • Ваш комментарий
  • Предпросмотр
Пока нет комментариев
Произошла неизвестная ошибка
Мы используем на сайте куки.
В интернете без них никак