Как добавить JavaScript в HTML: инструкция
В этой статье разберёмся, как добавить 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 информацию о текущем времени.
У такого подхода сразу несколько плюсов:
- Содержимое файлов HTML становится проще. В них остаются только контент и ссылки на внешние файлы.
- Весь JS-код можно держать в одном файле и при необходимости подключать его к разным страницам.
- Если один скрипт используется несколькими страницами, то он будет загружаться полностью только один раз, а затем использоваться повторно из кэша браузера.
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
300 ₽/мес
550 ₽/мес
Где лучше располагать скрипты
Технически нет ограничений на вставку тега <script>. Вы можете добавить JavaScript на странице в секциях <head> и <body>, в самом начале и в конце документа. Все эти варианты будут рабочими.
Однако обычно скрипты подключают в конце секции body, прямо перед закрывающим тегом. Это ускоряет загрузку страницы. Пользователи быстрее видят контент и понимают, что страница работает. Даже если JS загрузится чуть позже, это не так сильно ухудшает пользовательский опыт, как длительное ожидание отрисовки страницы.
Дело в том, что каждый тег <script> блокирует отрисовку страницы до тех пор, пока не будут завершены полная загрузка и выполнение JS. Но подключенные файлы (а иногда и целые библиотеки) могут весить достаточно много. При высокой скорости интернета пауза может быть минимальной. Но стоит пользователю оказаться в месте с плохим покрытием сотовой связи, как он заметит, что сайт очень долго не отображает контент.
Размещать скрипты в секции head нужно только в том случае, если на то есть причины. Например, без JS на странице не отображается вообще никакой контент. Но если таких причин нет, и вы беспокоитесь о скорости загрузки страницы, то лучше JavaScript добавить в HTML-код в самом конце документа, перед закрывающим тегом </body>.
Хотите внести свой вклад?
вознаграждение или запросите нужную вам инструкцию
В интернете без них никак