Как связать JavaScript-файл с HTML
Благодаря JavaScript сайтам добавляется интерактивность вроде адаптивных кнопок, динамического содержимого и других интерактивных элементов. Пошагово пройдем процесс привязки файлов JavaScript и HTML, делая веб-страницы привлекательнее и интерактивнее.
Привязка файла JavaScript тегом <script>
Основной способ связать файл JavaScript с HTML — использовать тег <script> с атрибутом src. Вот простой пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linking JavaScript Example</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<script src="script.js"></script>
</body>
</html>
Объяснение
<script src=”script.js”> — это тег, которым внешний файл JavaScript связывается с HTML-документом. Атрибутом src указывается, где найти файл JavaScript, здесь это script.js, который находится в одной папке с HTML-файлом.
Размещаем <script> непосредственно перед закрывающим тегом </body>, и содержимое HTML гарантированно загрузится первым. Это важно, потому что JavaScript взаимодействует с элементами HTML, и размещением скрипта в конце <body> гарантируется, что все элементы полностью загрузятся перед выполнением JavaScript.
Создание и запись файла JavaScript
Создадим сам файл JavaScript. В одной папке с HTML-файлом сохраняем новый файл script.js, в который добавляем эту строку кода:
console.log("Hello, world!");
Объяснение
Функцией console.log на консоль браузера отправляется вывод. Так подтверждается, что JavaScript-файл рабочий.
Чтобы просмотреть это сообщение в инструментах разработчика, нажимаем правой кнопкой мыши в любом месте страницы браузера и выбираем Inspect («Посмотреть код») или нажимаем F12. Затем переходим на вкладку Console, где появляется надпись Hello, world!
Реальный сценарий: добавление взаимодействий по кликам
Теперь создадим интерактивную кнопку, снабдив ее способностью реагировать на клики — необходимой для повышения привлекательности веб-страниц.
Вот обновленный HTML-файл:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Button Example</title>
</head>
<body>
<h1>Interactive Button</h1>
<button id="myButton">Click Me</button>
<script src="script.js"></script>
</body>
</html>
А вот код JavaScript для размещения в script.js:
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
Объяснение
В HTML-файле атрибуту id элемента кнопки задано значение myButton. По этому id JavaScript нацеливается на конкретную кнопку.
Функцией document.getElementById(“myButton”) в файле JavaScript выбирается кнопка по ее идентификатору. Методом addEventListener(“click”, …) прослушивается событие нажатия кнопки.
Когда кнопка нажимается, код внутри функции запускается. Здесь отображается окно предупреждения с сообщением о нажатии кнопки “Button clicked!”.
Где разместить тег <script>: в заголовке или в теле
Тег <script> размещается в разных местах HTML-документа: обычно либо в разделе <head>, либо непосредственно перед закрывающим тегом </body>. У каждого варианта имеются собственные эффекты.
Включаем JavaScript в <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Head Script Example</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>JavaScript in Head Example</h1>
</body>
</html>
Объяснение
Размещением <script> в разделе <head> браузеру указывается загрузить JavaScript перед отображением содержимого страницы.
Чтобы предотвратить замедление загрузки страницы, атрибутом defer браузеру указывается загрузить файл JavaScript в фоновом режиме и запустить его только после полной загрузки содержимого HTML.
Атрибут defer особенно полезен при взаимодействии JavaScript с элементами HTML: они гарантированно становятся доступны до того, как JavaScript попытается получить к ним доступ.
Относительные и абсолютные пути в атрибуте src
Атрибутом src в теге <script> используется либо относительный, либо абсолютный путь. Выбор определяется в зависимости от того, где хранится файл JavaScript и как организованы файлы.
Пример относительного пути:
<script src="js/script.js"></script>
Объяснение
Относительным путем, например js/script.js, браузеру указывается искать файл JavaScript в папке js в одном каталоге с HTML-файлом. Это кстати, когда папка файлов проекта не одна.
Пример абсолютного пути:
<script src="https://example.com/scripts/script.js"></script>
Объяснение
Абсолютный путь — это полный URL-адрес к файлу JavaScript, размещаемому на внешнем сервере. Это приходится кстати при связывании библиотек JavaScript или файлов из других источников.
Типичные ошибки и их устранение
Вот перечень типичных проблем и рекомендации по их устранению:
- Ошибка File not found (Файл не найден): убедитесь, что путь к файлу в
srcуказан правильно иscript.jsнаходится в указанном месте. - Не выполняется код JavaScript: перепроверьте, нет ли опечаток, и убедитесь, что тег
<script>привязан корректно. Проверьте консоль на наличие сообщений об ошибках с указанием на то, что что-то не так. - JavaScript загружается раньше HTML: если сталкиваетесь с ошибками неопределенных элементов, JavaScript запущен до загрузки HTML-элементов. Проблема решается размещением тега
<script>в нижней части<body>или использованиемdeferв<head>.
Заключение
Мы изучили основы связывания JavaScript с HTML при помощи тега <script>, разобрались с путями к файлам и разместили тег <script> в соответствующем месте.
Начав с простых сообщений console.log и перейдя к интерактивным кнопкам, освоили необходимые навыки для повышения привлекательности веб-страниц.
Читайте также:
- 18 полезных приемов написания JavaScript-кода
- Создаем сайт для кинорулетки
- Типы данных JavaScript: передача по значению и ссылке
Читайте нас в Telegram, VK и Дзен
Перевод статьи ryan: Link a JavaScript File to HTML: Complete Guide
