Для обычной страницы подключите JavaScript в head строкой script defer src="./script.js". Атрибут defer дождётся разбора HTML, а src укажет путь к файлу. Ниже соберём рабочую кнопку и найдём причину, если скрипт не загрузился, не видит элемент или остановился на ошибке.
Подключить JavaScript означает дать браузеру точный адрес файла и выбрать момент его выполнения. Большинство проблем новичка появляется в одной из этих двух точек: путь написан неверно или скрипт запускается раньше, чем нужная кнопка появилась в HTML.
Добавить defer и вывести контрольное сообщение через console.log.
Сверить id в HTML и селектор в document.querySelector.
Открыть Console, перейти к первой красной строке и исправить одну причину.
Три способа подключить JavaScript к HTML
JavaScript можно написать прямо внутри HTML или вынести в отдельный файл. Для учебного проекта отдельный script.js удобнее: разметка остаётся читаемой, один скрипт можно подключить к нескольким страницам, а ошибка в пути сразу видна во вкладке Network.
| Вариант | Когда выполняется | Когда использовать |
|---|---|---|
defer в head | После разбора HTML, до DOMContentLoaded | Основной вариант для обычного внешнего скрипта |
| Перед закрывающим body | После элементов, записанных выше | Простой вариант без defer, но подключение спрятано внизу |
type="module" | Модуль откладывается автоматически | Когда нужны import и export |
| Код внутри HTML | Зависит от места тега | Короткая проверка, но не структура проекта |
Если у вас один файл script.js без import, поместите подключение в head и добавьте defer. Не смешивайте сразу несколько вариантов: так проще понять порядок выполнения.
defer разрешает загружать файл параллельно, но выполнение ждёт, пока браузер закончит разбирать HTML.
Рабочий пример с кнопкой
Сделаем проект из двух файлов. Кнопка будет менять текст абзаца, а Console покажет, что файл действительно загрузился. Такая маленькая проверка отделяет проблему подключения от ошибки в остальной логике.
- Создайте папку
js-start. - Добавьте в неё
index.htmlиscript.js. Оба файла должны лежать на одном уровне. - Вставьте первый код в
index.html, второй вscript.jsи сохраните оба файла. - Откройте
index.htmlв браузере, нажмите кнопку и затем откройте инструменты разработчика клавишей F12.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript подключён</title>
<script defer src="./script.js"></script>
</head>
<body>
<h1>Проверка JavaScript</h1>
<button id="changeText">Нажмите меня</button>
<p id="message">Скрипт ждёт клика</p>
</body>
</html>console.log("script.js loaded")
const button = document.querySelector("#changeText")
const message = document.querySelector("#message")
button.addEventListener("click", () => {
message.textContent = "JavaScript работает"
})- В Console есть строка
script.js loadedбез красных сообщений. - После клика текст меняется на «JavaScript работает».
- В переменных
buttonиmessageнаходятся HTML-элементы, а неnull.
Как правильно написать путь в src
Браузер ищет файл относительно адреса текущего HTML-документа. Запись ./script.js означает «возьми script.js из этой же папки». Если скрипт лежит в подпапке js, путь станет ./js/script.js. Две точки поднимают поиск на один уровень вверх.
| Где лежит файл | Путь из index.html | Смысл |
|---|---|---|
| Рядом с index.html | ./script.js | Текущая папка |
| В папке js | ./js/script.js | Войти в подпапку js |
| На уровень выше | ../script.js | Подняться к родительской папке |
| На другом сайте | Полный https://... | Абсолютный сетевой адрес |
Путь читается от HTML-файла: сначала найдите index.html в дереве, затем пройдите от него к script.js.
У тега подключения скрипта адрес задаёт атрибут src. Атрибут href здесь не загрузит JavaScript.
Windows может скрывать расширения. Включите их показ и убедитесь, что имя заканчивается ровно на .js.
Локально ошибка иногда незаметна, но на хостинге Script.js и script.js могут быть разными файлами.
Если базовая структура страницы пока путается, сначала пройдите курс HTML. Там проще закрепить head, body, атрибуты и относительные пути до того, как добавится логика JavaScript.
Как найти ошибку через Console и Network
Не угадывайте причину по внешнему виду страницы. Откройте инструменты разработчика, обновите страницу и начните с первой красной строки в Console. В сообщении обычно есть имя файла, номер строки и столбца. Клик по ссылке переносит прямо к проблемному месту.
- Откройте Console и обновите страницу. Если нет даже
script.js loaded, файл, скорее всего, не подключён. - Перейдите в Network, включите фильтр JS и снова обновите страницу. Найдите запрос к
script.js. - Статус 404 означает неверный путь или имя. Статус 200 означает, что файл получен и проблему нужно искать внутри кода.
- Исправьте первую ошибку Console, сохраните файл, обновите страницу и только потом переходите к следующей.
Console отвечает, где код остановился, а Network отвечает, был ли файл загружен вообще.
| Симптом | Что проверить | Типичное исправление |
|---|---|---|
| Нет console.log | Network и путь src | Исправить имя или расположение файла |
| 404 для script.js | Регистр и папки | Сверить путь с деревом проекта |
| Unexpected token | Строку и соседние скобки | Закрыть кавычку, скобку или запятую |
| Cannot read properties of null | Селектор и порядок запуска | Исправить id или добавить defer |
| Ошибок нет, но клик молчит | Обработчик события | Сверить событие click и выбранную кнопку |
Почему скрипт загружен, но код не работает
Статус 200 в Network доказывает только загрузку файла. Дальше выполнение может остановить синтаксическая ошибка, неверный селектор или исключение. JavaScript чувствителен к регистру: getElementById и getElementByID являются разными именами. То же относится к вашим переменным.
В HTML нет элемента с указанным id, допущена опечатка или скрипт запустился раньше DOM. Сверьте #changeText с id="changeText" и оставьте defer.
Console может подсветить место, где парсер окончательно запутался. Проверьте также предыдущую строку на незакрытую кавычку, скобку или фигурную скобку.
Убедитесь, что сохранён нужный файл, затем обновите страницу без кеша. На опубликованном сайте дождитесь нового развёртывания.
Для type="module" и import запускайте локальный сервер, а не открывайте страницу через file://. Модули подчиняются дополнительным правилам загрузки.
src, путь совпадает с деревом проекта, defer стоит в head, запрос script.js получает 200, первая красная ошибка исправлена, а селекторы находят элементы.Куда вставлять JavaScript в HTML?
Для внешнего классического файла удобно добавить в head тег с атрибутами defer и src="./script.js". defer дождётся разбора HTML.
Почему JavaScript не видит кнопку?
Чаще всего id в HTML не совпадает с селектором или код выполняется раньше появления кнопки. Сверьте регистр букв и используйте defer.
Как понять, подключился ли script.js?
Добавьте в начало console.log("script.js loaded"). Затем проверьте Console и запрос script.js во вкладке Network.
Нужен ли defer для type=module?
Нет. Скрипты с type="module" по умолчанию выполняются отложенно. Атрибут defer нужен прежде всего обычному внешнему скрипту в head.
Чем src отличается от href?
У тега script адрес JavaScript-файла задаёт src. href используют ссылки и некоторые другие элементы, но не загрузку скрипта.
Закрепите основу на первой программе JavaScript, затем разберите, как JavaScript работает в браузере. Если интерфейс реагирует неправильно, поможет разбор ошибок кнопки и событий.
В курсе JavaScript в Кодике можно повторить переменные, условия, функции и DOM на коротких задачах. После этого вернитесь к примеру, добавьте вторую кнопку и сделайте отдельный обработчик без копирования готового решения.