Как добавить 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-код из внешних файлов.

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

Для подключения 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>.

Хотите внести свой вклад?

Участвуйте в нашей контент-программе за вознаграждение или запросите нужную вам инструкцию

21 сентября 2022 г.

Время прочтения: 7 минут

HTML

JavaScript