Як підключити JS в HTML — це одне з перших питань, з яким стикаються всі, хто починає працювати з веброзробкою. Від способу підключення залежить, коли саме завантажиться код, чи зможе він працювати з елементами сторінки і наскільки зручно буде підтримувати проєкт.
Основні способи підключення JavaScript
У HTML є три найпоширеніші варіанти роботи з JavaScript: внутрішній код у самій сторінці, зовнішній файл і підключення з додатковими атрибутами, які керують порядком завантаження.
1. Зовнішній файл через тег script
Найкращий варіант для більшості проєктів — винести код у окремий файл і підключити його через тег script:
<script src=”app.js”></script>
Такий підхід зручний для підтримки, особливо якщо на сторінці багато логіки або якщо JavaScript використовується на кількох сторінках.
2. Вбудований JavaScript у HTML
Іноді код пишуть прямо всередині HTML-документа:
<script>alert(‘Привіт’);</script>
Цей спосіб підходить для простих тестів або коротких прикладів, але в реальних проєктах його краще уникати. Коли логіка розміщена окремо, код легше читати, редагувати й повторно використовувати.
3. Підключення з defer або async
Якщо скрипт лежить у голові документа або ви хочете контролювати момент запуску, зверніть увагу на атрибути defer та async.
- defer — завантажує скрипт паралельно, але виконує його після побудови HTML.
- async — завантажує і запускає скрипт одразу після готовності файлу, без гарантії порядку.
Для більшості звичайних сторінок безпечнішим є defer, особливо якщо скрипт працює з елементами DOM.
Куди вставляти тег script
Найчастіше тег script розміщують перед закриваючим тегом </body>. Це дозволяє сторінці спочатку завантажити HTML, а вже потім виконати JavaScript.
Приклад:
<body>
<h1>Сторінка</h1>
<script src=”app.js”></script>
</body>
Якщо скрипт підключається в <head>, краще додати defer, інакше код може спрацювати раніше, ніж браузер створить потрібні елементи на сторінці.
Типові помилки під час підключення JS
- Неправильний шлях до файлу в src.
- Опечатка в назві файла або розширенні.
- Скрипт запускається до того, як HTML-елементи з’явилися в DOM.
- Підключено кілька файлів, але вони виконуються в неправильному порядку.
- Використано async там, де потрібна послідовність завантаження.
Якщо код не працює, спочатку перевірте консоль браузера. Помилки на кшталт 404 або Uncaught ReferenceError часто одразу підказують, де саме проблема.
Який спосіб обрати
Для навчання можна використовувати будь-який варіант, але для реальних сайтів найкраще дотримуватися простої логіки: HTML залишається для структури, а JavaScript — в окремому файлі. Це зручніше для командної роботи, дебагу та масштабування.
Якщо потрібен короткий підсумок, то найпрактичніша відповідь на питання, як підключити JS в HTML, така: створіть окремий файл, додайте тег script src, а для стабільної роботи сторінки використовуйте defer або розміщуйте скрипт наприкінці body.
