Пошук уроків, статей та іншого контенту
Можливі варіанти підключення JavaScript до HTML сторінки
Щоб JavaScript працював на вебсторінці, браузер повинен знати, який код потрібно виконати.
Для цього використовується HTML-тег <script>.
Найпростіший варіант:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Hello!</h1>
<script>
console.log("JavaScript працює!");
</script>
</body>
</html>Код усередині <script> буде виконаний браузером.
Такий підхід підходить для маленьких прикладів, але у реальних проєктах JavaScript зазвичай зберігають окремо.
Створимо:
index.html
script.jsУ script.js:
console.log("Hello from JavaScript!");В HTML:
<script src="script.js"></script>Атрибут src вказує шлях до JavaScript-файлу.
Класичний варіант — перед закриваючим </body>:
<body>
<button id="button">Click</button>
<script src="script.js"></script>
</body>Так HTML-елементи вже будуть оброблені до моменту запуску скрипту.
Сучасний варіант — підключити файл у <head> із defer:
<head>
<script src="script.js" defer></script>
</head>defer дозволяє браузеру завантажувати скрипт, не блокуючи звичайний розбір HTML, а виконати його після завершення парсингу документа.
Якщо структура така:
project/
├── index.html
└── js/
└── app.jsпідключення буде:
<script src="./js/app.js"></script>Неправильний шлях — одна з найчастіших причин, чому JavaScript «не працює».
У сучасному JavaScript часто використовуються модулі:
<script type="module" src="./js/app.js"></script>Це дозволяє використовувати:
import { calculate } from "./calculator.js";та:
export function calculate() {
// ...
}Модулі детально розглядатимуться окремо.
Неправильний шлях до файлу.
<script src="app.js"></script>не знайде файл, якщо він знаходиться в js/app.js.
Використання одночасно src і коду всередині одного <script>. Краще розділяти ці способи.
Виконання коду до створення DOM-елементів. Використовуйте правильне розташування <script> або defer.
JavaScript підключається до HTML через <script>.
Для навчальних прикладів можна писати код прямо всередині HTML, але у проєктах краще використовувати окремі .js-файли.
Один із найпоширеніших сучасних варіантів:
<script src="./js/app.js" defer></script>