Як підключити JS до HTML — це базове питання для всіх, хто починає працювати з веброзробкою. Від правильного способу підключення залежить, коли саме запуститься скрипт, чи буде доступний DOM і наскільки зручно підтримувати код надалі.
Основні способи підключення JavaScript
Найчастіше JavaScript підключають трьома способами: через зовнішній файл, прямо в HTML-документі або за допомогою атрибутів, які керують моментом завантаження. Для реальних проєктів найкраще використовувати окремий файл, бо так код легше редагувати, повторно використовувати й перевіряти.
- Зовнішній файл — найзручніший варіант для більшості сайтів.
- Вбудований код — підходить для швидких тестів або дрібних прикладів.
- Атрибут defer — корисний, коли скрипт має запускатися після завантаження HTML.
Як підключити зовнішній файл JS
Створіть файл, наприклад script.js, і підключіть його через тег script у HTML. Найкраще розміщувати його перед закриваючим тегом body, щоб сторінка встигла завантажити розмітку до запуску коду.
<html>
<head>
<title>Мій сайт</title>
</head>
<body>
<h1>Привіт!</h1>
<script src="script.js"></script>
</body>
</html>
У файлі script.js можна писати звичайний JavaScript, наприклад:
console.log('Скрипт працює');
Що робить defer і коли його використовувати
Якщо ви хочете підключити файл у head, але не блокувати завантаження сторінки, використовуйте defer. Цей атрибут змушує браузер завантажити скрипт паралельно, а виконати його після побудови HTML-структури.
<head>
<script src="script.js" defer></script>
</head>
Це особливо зручно для сайтів, де JavaScript працює з елементами сторінки: кнопками, формами, меню, модальними вікнами.
Типові помилки під час підключення
Найпоширеніша проблема — скрипт запускається раніше, ніж браузер створив потрібні елементи HTML. У такому разі код не знаходить кнопку, форму або блок на сторінці. Ще одна часта помилка — неправильний шлях до файлу.
- Перевіряйте назву файлу та розширення.
- Слідкуйте за регістром у назвах папок і файлів.
- Не забувайте, що відносний шлях має відповідати реальній структурі проєкту.
- Якщо елементу ще немає в DOM, використовуйте defer або перенесіть скрипт униз сторінки.
Який спосіб обрати
Для навчання підійде будь-який спосіб, але для практики варто одразу звикати до зовнішнього файлу. Це дає чисту структуру, спрощує повторне використання коду й допомагає уникати хаосу в HTML. Якщо потрібне швидке тестування, можна вставити невеликий фрагмент прямо в документ, але для робочого проєкту це радше виняток.
Отже, якщо коротко: найпростіше як підключити JS до HTML — вставити тег script із посиланням на файл перед </body> або використати defer у <head>. Обидва варіанти надійні, а вибір залежить від того, коли саме ваш скрипт має почати працювати.
