Как подключить JS к HTML: script, defer и первый рабочий при

Чтобы подключить JS к HTML, создайте отдельный файл script.js и добавьте его в HTML через тег <script src="script.js" defer></script>. Атрибут defer удобен для новичка: браузер загрузит скрипт, но выполнит его после разбора HTML, поэтому элементы страницы уже будут доступны

Минимальная структура проекта такая:

site/
  index.html
  script.js

Содержание

Файл index.html
Файл script.js
Почему лучше подключать отдельный файл
Куда ставить script
Частые ошибки
Неверный путь к файлу
Писать код до появления элемента
Путать Java и JavaScript
Как проверить подключение
Как проверить путь через Network
Когда нужен type="module"
Мини-задание
Что почитать дальше по JavaScript

Файл index.html

Создайте index.html:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Первый JS</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1 id="title">Текст до JavaScript</h1>
  <button id="button">Изменить текст</button>
</body>
</html>

Здесь важная строка:

<script src="script.js" defer></script>

Она говорит браузеру: найди файл script.js рядом с index.html и подключи его к странице

Файл script.js

Создайте рядом файл script.js:

const title = document.querySelector("#title");
const button = document.querySelector("#button");

button.addEventListener("click", () => {
  title.textContent = "JavaScript подключен и работает";
});

Откройте index.html в браузере и нажмите кнопку. Заголовок должен измениться

Почему лучше подключать отдельный файл

JavaScript можно написать прямо внутри HTML:

<script>
  console.log("Привет");
</script>

Но для нормального проекта лучше держать HTML и JS отдельно. HTML отвечает за разметку, а JavaScript — за поведение страницы. Так проще искать ошибки и переносить код

Куда ставить script

Есть два нормальных варианта

Первый: в head с defer:

<script src="script.js" defer></script>

Второй: перед закрывающим </body>:

<script src="script.js"></script>
</body>

Для учебных материалов я бы выбирал первый вариант с defer: он явно показывает, что скрипт подключен в документе, но не ломает доступ к элементам

Частые ошибки

Неверный путь к файлу

Если script.js лежит в папке js, путь должен быть таким:

<script src="js/script.js" defer></script>

Если путь неправильный, в консоли браузера будет ошибка загрузки файла

Писать код до появления элемента

Если убрать defer и поставить script в head, JavaScript может выполниться до того, как браузер увидит кнопку. Тогда button будет null, и обработчик не повесится

Путать Java и JavaScript

Для подключения к HTML нужен JavaScript-файл .js, а не Java. Это разные технологии

Как проверить подключение

Добавьте в начало script.js:

console.log("script.js загружен");

Откройте DevTools через F12 или Ctrl + Shift + I, вкладку Console. Если сообщение появилось, файл подключен

Как проверить путь через Network

Если console.log не появился, откройте DevTools и перейдите во вкладку Network. Обновите страницу. В списке запросов должен быть файл script.js

Если рядом с ним статус 200, файл найден. Если статус 404, браузер не нашел файл. Значит, путь в src не совпадает с реальным расположением файла

Пример ошибки:

GET file:///.../script.js net::ERR_FILE_NOT_FOUND

Что проверить:

файл называется именно script.js, а не script.js.txt;
HTML и JS лежат в одной папке, если путь src="script.js";
в названии нет лишних пробелов;
папка указана правильно: js/script.js, а не script/js.js.

Когда нужен type="module"

Если вы используете import и export, подключайте файл как модуль:

<script type="module" src="script.js"></script>

Пример math.js:

export function sum(a, b) {
  return a + b;
}

Пример script.js:

import { sum } from "./math.js";

console.log(sum(2, 3));

Но для первого подключения JS к HTML модуль не нужен. Начните с обычного script.js, а к модулям переходите, когда проект делится на несколько файлов

Мини-задание

Добавьте на страницу второй абзац:

<p id="status">Пока ничего не произошло</p>

И измените его по клику:

const status = document.querySelector("#status");

button.addEventListener("click", () => {
  title.textContent = "JavaScript подключен и работает";
  status.textContent = "Кнопка нажата";
});

Если меняются и заголовок, и абзац, значит вы не просто подключили файл, а уже управляете элементами страницы