Глиф Учебники

Как подключить JavaScript к HTML

Справочник · JavaScript · 2 минуты чтения

Положите код в файл script.js рядом со страницей и подключите его в <head> с атрибутом defer:

HTML
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Страница</title>
  <script src="script.js" defer></script>
</head>
<body>
  <button id="hello">Нажмите</button>
</body>
</html>
JavaScript
document.querySelector("#hello").addEventListener("click", () => {
  alert("Скрипт подключён");
});

defer велит браузеру скачать файл сразу, а выполнить, когда вся страница прочитана. Поэтому скрипт находит любые элементы <body>, где бы ни стоял тег. Несколько скриптов с defer выполняются в том порядке, в каком подключены.

Другие способы

Путь к файлу

Путь в src отсчитывается от папки, где лежит страница:

Где лежит файлЧто писать в src
рядом со страницейscript.js
в папке js рядом со страницейjs/script.js
на уровень выше../script.js
от корня сайта (на сервере)/js/script.js

Регистр букв в именах важен: на серверах с Linux Script.js и script.js — разные файлы.

Скрипт не работает — что проверить

Откройте консоль (F12 → Console) и перезагрузите страницу.