Как добавить JavaScript в HTML: инструкция
В этой статье разберёмся, как добавить JavaScript в HTML. Сделать это можно тремя способами:
- разместить JS-код внутри парного тега ;
- подключить внешний файл;
- прописать код прямо внутри HTML-тега, используя специальные атрибуты.
Рассмотрим каждый способ подробнее, чтобы понять его плюсы и минусы.
Вставка кода внутри парного тега
Самый простой способ вставить JS-код в HTML-страницу — использовать парный тег . Он сообщает браузеру, что всё его содержимое нужно интерпретировать как исполняемый скрипт, а не как текст или HTML-код.
В качестве примера добавим на страницу скрипт, который выводит текущие дату и время.
Теперь при загрузке страницы будет появляться уведомление с текущими датой и временем.
Внутри парного тега можно написать целую программу. В качестве примера создадим электронные часы.
Электронные часы
Отличный результат! У вас получилось с помощью JavaScript добавить в элемент HTML информацию о текущем времени, которая обновляется каждую секунду.
В комментариях подробно описано, что делает скрипт. Он находит элемент с Это тег , который находится внутри секции body сразу под заголовком. Затем программа получает текущее время, которое отображается сразу после загрузки документа и обновляется каждую секунду.
Выглядит удобно, но у такого подхода есть несколько минусов. Представьте, что вы хотите отображать время на каждой странице сайта. В таком случае придётся дублировать содержимое тега .
Другая проблема – чем больше содержимое скрипта, тем хуже читабельность кода. В примере выше только одна функция. А если их требуется 5-10-20, чтобы реализовать нужное поведение? В таком случае удобнее использовать следующий подход — подключать JS-код из внешних файлов.
Подключение внешних файлов
Для подключения JavaScript из внешних файлов тоже используется тег . Только внутри него появляется атрибут src, в котором вы указываете ссылку на JS-файл. Это может быть файл, который вы создали сами и храните рядом с HTML или в другом каталоге. А ещё это может быть файл JS-библиотеки, которая добавляет на страницу нужное вам поведение.
В качестве примера возьмём скрипт, который выводит текущее время. Перенесём всю логику в отдельный файл:
# Файл time.js
function displayTime() let element = document.getElementById("clock"); // Найти элемент с
let now = new Date(); // Получить текущее время
element.innerHTML = now.toLocaleTimeString(); // Отобразить время
setTimeout(displayTime, 1000); // Вызывать функцию каждую секунду
>
window.onload = displayTime; // Начать отображение времени после загрузки документаИз файла HTML можно удалить весь код JS. Останется только тег , в котором через атрибут src указана ссылка на файл time.js :
#Файл time.html
Электронные часы
Результат будет таким же — вам снова удалось с помощью JavaScript добавить в HTML div информацию о текущем времени.
У такого подхода сразу несколько плюсов:
- Содержимое файлов HTML становится проще. В них остаются только контент и ссылки на внешние файлы.
- Весь JS-код можно держать в одном файле и при необходимости подключать его к разным страницам.
- Если один скрипт используется несколькими страницами, то он будет загружаться полностью только один раз, а затем использоваться повторно из кэша браузера.
JS внутри тегов HTML
Вы можете разместить JavaScript внутри тега HTML, используя специальные атрибуты — например, onclick , onmouseover , onkeypress , onload . Они добавляют на элементы обработчики событий.
Если вы нажмёте на первую кнопку, то в браузере отобразится уведомление с текстом «Привет! Так JS тоже работает». На вторую кнопку достаточно навести курсор мыши — в ответ тоже появится браузерное уведомление с текстом «И это тоже работает». Это говорит о том, что обработчик событий работает корректно и реагирует на действия пользователя.
Вы можете добавить в один тег несколько атрибутов с обработчиками событий, разделив их точкой с запятой. Вот так:
Однако это плохая практика. Большинство разработчиков предпочитает разделять контент и управление поведением по разным файлам. К тому же, как вы видите, использование обработчиков внутри HTML заметно ухудшает читабельность кода.
Где лучше располагать скрипты
Технически нет ограничений на вставку тега . Вы можете добавить JavaScript на странице в секциях и , в самом начале и в конце документа. Все эти варианты будут рабочими.
Однако обычно скрипты подключают в конце секции body , прямо перед закрывающим тегом. Это ускоряет загрузку страницы. Пользователи быстрее видят контент и понимают, что страница работает. Даже если JS загрузится чуть позже, это не так сильно ухудшает пользовательский опыт, как длительное ожидание отрисовки страницы.
Дело в том, что каждый тег блокирует отрисовку страницы до тех пор, пока не будут завершены полная загрузка и выполнение JS. Но подключенные файлы (а иногда и целые библиотеки) могут весить достаточно много. При высокой скорости интернета пауза может быть минимальной. Но стоит пользователю оказаться в месте с плохим покрытием сотовой связи, как он заметит, что сайт очень долго не отображает контент.
Размещать скрипты в секции head нужно только в том случае, если на то есть причины. Например, без JS на странице не отображается вообще никакой контент. Но если таких причин нет, и вы беспокоитесь о скорости загрузки страницы, то лучше JavaScript добавить в HTML-код в самом конце документа, перед закрывающим тегом