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