Материал подготовлен командой Simple-Server для администраторов VPS и выделенных серверов. Команды и пути проверяйте на тестовой машине перед production.
Вставка кода внутри парного тега
Самый простой способ вставить 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-код можно держать в одном файле и при необходимости подключать его к разным страницам.
- Если один скрипт используется несколькими страницами, то он будет загружаться полностью только один раз, а затем использоваться повторно из кэша браузера.
Вы можете разместить 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 заметно ухудшает читабельность кода.
Нужен сервер для практики? Арендуйте VPS/VDS в России — root-доступ, NVMe, DDoS-защита и поддержка 24/7.