Все курсы
Поступить на курс
Блог Kata Academy
Контакты
Поступить на курс

Как подключить JavaScript к сайту: пошаговая инструкция для начинающих

Разбираем четыре способа подключения JavaScript к сайту: напрямую в HTML, отдельным файлом, через атрибут defer, с помощью CMS.

Время чтения: 3 минуты
*Гарантия зарплаты от 120 000 ₽ после курсов пo Java или Go, от 100 000 ₽  после курса по frontend-разработке. 
Гарантируем трудоустройство
с зарплатой
от 120 000 рублей!
Обучаем с нуля и сопровождаем до оффера. Курс завершается твоим выходом на работу в ИТ!
Выбрать профессию
JavaScript помогает сделать сайт интерактивным: добавить проверку заполнения формы, открытие меню по нажатию на кнопку, всплывающие окна и другие функции. Но чтобы браузер мог выполнять JavaScript-код, его нужно правильно подключить к веб-странице.
В этой статье разберём:
  • Как подключить JavaScript в HTML (способ для новичков);
  • Как подключить отдельный файл JavaScript к сайту (популярный способ в реальных проектах);
  • Как подключить JavaScript через атрибут defer;
  • Как добавить JavaScript на сайт с помощью CMS или конструктора;
  • Как проверить работу JavaScript;
  • Частые ошибки и их исправление.
Чтобы повторить примеры из статьи, тебе понадобятся только HTML-файл и обычный текстовый редактор.
Узнай свою рыночную зарплату за 1 минуту!
Рассчитать доход
IT-калькулятор зарплат
Что нужно знать перед подключением JavaScript
Сайт может состоять из трёх основных частей:
  • HTML — определяет структуру страницы: заголовки, абзацы, кнопки и формы.
  • CSS — отвечает за внешний вид: цвета, размеры, расположение элементов и шрифты.
  • JavaScript — добавляет поведение и интерактивность: например, позволяет показать сообщение после нажатия на кнопку.
Представим, что ты создаёшь страницу с кнопкой «Нажми на меня». HTML добавит кнопку на страницу, CSS поможет оформить её, а JavaScript определит, что произойдёт после нажатия.
Чтобы браузер выполнил JavaScript-код, его нужно разместить в HTML-документе или подключить к нему отдельный файл с расширением .js.
С нуля до первой работы: с ментором, поддержкой на каждом этапе
и с гибким форматом оплаты
Узнать, как устроено обучение и трудоустройство
Обучение в IT с фокусом на трудоустройство

Способ 1. Как подключить JavaScript прямо в HTML

Это самый простой способ для первого знакомства с JavaScript. Код размещают внутри тега <script> в HTML-документе. Разберём процесс по шагам.
Шаг 1. Создай HTML-файл.
Создай папку для проекта, а внутри неё файл index.html. Открой его в текстовом редакторе, например Visual Studio Code, и добавь следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мой первый сайт</title>
</head>
<body>
    <h1>Привет, мир!</h1>
</body>
</html>
Это простая HTML-страница с заголовком «Привет, мир!». Сохрани файл.
Шаг 2. Добавь тег <script>.
Внутри HTML-документа можно разместить JavaScript-код между открывающим тегом <script> и закрывающим </script>. Для начала добавим его перед закрывающим тегом </body>:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мой первый сайт</title>
</head>
<body>
    <h1>Привет, мир!</h1>

    <script>
        alert("Привет! JavaScript работает.");
    </script>
</body>
</html>
Шаг 3. Сохрани файл и открой его в браузере.
Найди файл index.html в папке проекта и открой его двойным щелчком. Страница загрузится в браузере, после чего появится небольшое окно с сообщением «Привет! JavaScript работает.».
Это означает, что браузер выполнил JavaScript-код.
Разберём, что здесь происходит:
  • <script> сообщает браузеру, что внутри находится скрипт — код, который нужно выполнить.
  • alert() — встроенная в браузер функция, которая показывает окно с сообщением.
  • "Привет! JavaScript работает." — текст, который появится в окне.
После нажатия на кнопку «ОК» окно закроется, и ты увидишь заголовок страницы.
Когда подходит этот способ?
Встроенный JavaScript удобен для небольших примеров и простых экспериментов. Но если кода становится много, лучше вынести его в отдельный файл. Так HTML будет проще читать и редактировать.
Гарантируем трудоустройство с зарплатой:
от 120 000 ₽ —
после курсов по Java или Go
от 100 000 ₽ —
после курса по frontend-разработке
С нуля
С поддержкой ментора
Гарантии в договоре
С нуля
С поддержкой ментора
Гарантии в договоре
С нуля
С поддержкой ментора
С нуля
С поддержкой ментора
Гарантии в договоре
Выбрать профессию

Способ 2. Как подключить отдельный JavaScript-файл

В реальных проектах JavaScript часто хранится отдельно от HTML. Для этого создают файл с расширением .js, а затем указывают его путь в HTML-документе.
Шаг 1. Создай файл JavaScript.
В той же папке, где находится index.html, создай файл script.js. Внутри напиши:
alert("Привет! JavaScript работает.");
Расширение .js указывает на то, что файл содержит JavaScript-код.
Шаг 2. Подключи файл к HTML.
Открой index.html и добавь тег <script> перед закрывающим тегом </body>:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мой первый сайт</title>
</head>
<body>
    <h1>Привет, мир!</h1>

    <script src="script.js"></script>
</body>
</html>
Здесь появился новый атрибут — src. Он указывает браузеру, где находится JavaScript-файл, который нужно загрузить и выполнить.
В нашем примере script.js лежит в той же папке, что и index.html, поэтому достаточно указать его имя.
Шаг 3. Проверь результат.
Сохрани оба файла и обнови страницу в браузере. Должно появиться то же окно с сообщением, что и в первом примере.
Теперь JavaScript подключён к HTML через отдельный файл.
Важно: имена файлов и пути должны совпадать с тем, что указано в коде. Если файл называется main.js, а в HTML написано script.js, браузер не сможет найти скрипт.
Как правильно указать путь к JavaScript-файлу
Путь зависит от того, где находится файл относительно HTML-документа. Например, структура проекта может выглядеть так:
my-site/
├── index.html
└── js/
    └── script.js
В этом случае JavaScript-файл находится в папке js. Чтобы подключить его, укажи путь с учётом этой папки:
<script src="js/script.js"></script>
Если оба файла лежат в одной папке, достаточно написать src="script.js". Если JavaScript находится во вложенной папке, нужно добавить её имя в путь.

Способ 3. Как подключить JavaScript через атрибут defer

У тега <script> есть атрибут defer. Он позволяет браузеру загружать внешний JavaScript-файл параллельно с обработкой HTML, но выполнять скрипт только после того, как HTML-документ будет разобран.

Это особенно полезно, если JavaScript должен обращаться к элементам страницы — например, находить кнопку или менять текст в заголовке.
Чтобы использовать defer, добавь его в тег подключения:
<script src="script.js" defer></script>
Остальной HTML можно оставить без изменений. Например, такой код в script.js найдёт заголовок на странице и изменит его текст:
const heading = document.querySelector("h1");
heading.textContent = "JavaScript подключён!";
Здесь document.querySelector("h1") находит первый заголовок <h1> в HTML-документе, а textContent задаёт ему новый текст.

Если подключить этот файл с атрибутом defer, браузер сначала обработает HTML, а затем выполнит скрипт. Поэтому заголовок уже будет существовать к моменту запуска кода.

Для обычного внешнего скрипта defer — хороший вариант по умолчанию, если код должен работать с элементами страницы. Этот атрибут не нужен для встроенного кода между тегами <script>, а для скриптов с type="module" он не требуется: такие скрипты и так выполняются после разбора HTML.
Обучение с личным ментором, поддержкой
при поиске работы и оплатой на выбор: сразу или после трудоустройства
Узнать, как устроено обучение и трудоустройство
Frontend — понятный вход
в IT с поддержкой до оффера

Способ 4. Как добавить JavaScript на сайт с помощью CMS или конструктора

Если сайт создан на платформе для управления содержимым (CMS) или в конструкторе, не всегда нужно редактировать HTML-файлы вручную. Некоторые платформы позволяют добавлять JavaScript через настройки сайта, специальные поля или плагины.

Например, в системе WordPress можно использовать плагины для добавления пользовательского кода. В других CMS и конструкторах предусмотрены собственные способы подключения скриптов.
Общий порядок действий такой:
  1. Открой настройки сайта или раздел, связанный с пользовательским кодом.
  2. Найди поле для добавления JavaScript или настройки скриптов.
  3. Вставь код в соответствии с инструкцией платформы. Некоторые поля принимают только содержимое скрипта, другие требуют полный тег <script>.
  4. Сохрани изменения и открой страницу сайта.
  5. Проверь, работает ли добавленная функция.
Названия разделов и доступные возможности зависят от платформы, используемого шаблона и прав доступа. Перед изменением кода на работающем сайте лучше проверить его на тестовой копии, если она доступна.
Как проверить, что JavaScript работает
После подключения скрипта важно убедиться, что браузер действительно его выполняет. Самый простой способ — проверить результат на странице.

Можно также использовать инструменты разработчика — встроенные средства браузера, которые помогают изучать код страницы и находить ошибки.

Шаг 1. Открой инструменты разработчика.
Открой страницу сайта в браузере и нажми F12 или сочетание Ctrl + Shift + I в Windows. На macOS обычно используют Command + Option + I. Сочетания клавиш могут различаться в зависимости от браузера.

Шаг 2. Перейди во вкладку Console.
В ней отображаются сообщения JavaScript и ошибки, которые возникают при выполнении кода.

Шаг 3. Добавь проверочный код.
В файле script.js напиши:
console.log("JavaScript подключён!");

Сохрани файл и обнови страницу. Если скрипт подключён правильно, во вкладке Console появится сообщение JavaScript подключён!

Метод console.log() выводит информацию в консоль. Разработчики используют его, чтобы проверять значения переменных и разбираться в работе программы.

Если сообщения нет, это ещё не означает, что JavaScript совсем не работает. Возможно, файл не загрузился, код не выполнился или ты проверяешь не ту страницу.
Учись на практике с личной поддержкой ментора, карьерного консультанта и коуча ICF!
Узнать подробнее
Сопровождаем до оффера
Почему JavaScript на сайте не работает?
Если после подключения скрипта ничего не происходит, проверь несколько распространённых причин.

1. Неправильно указан путь к файлу
Например, файл находится в папке js, но в HTML указано только его имя:
<script src="script.js" defer></script>

Если файл лежит в js, правильный путь будет таким:
<script src="js/script.js" defer></script>

2. Код написан внутри тега с атрибутом src
Если у тега <script> указан атрибут src, браузер выполняет код из подключённого файла, а JavaScript между открывающим и закрывающим тегами игнорирует.
Например, в этом случае команда alert() не сработает:
<script src="script.js">
  alert('Привет!');
</script>
Чтобы выполнить оба скрипта, подключи внешний файл и напиши дополнительный код в отдельном теге <script>.

3. Файл не сохранён
После изменения кода сохрани HTML- и JavaScript-файлы, а затем обнови страницу. Если браузер показывает старую версию, попробуй принудительно обновить её сочетанием Ctrl + F5 в Windows.

4. В коде есть ошибка
Даже небольшая опечатка может помешать выполнению JavaScript. Например, если забыть закрывающую кавычку, браузер сообщит об ошибке. Посмотри сообщения во вкладке Console: там часто указаны тип ошибки и строка, в которой она возникла.

5. Скрипт запускается раньше, чем появляется нужный HTML-элемент
Представим, что JavaScript пытается найти кнопку, которой ещё нет в обработанной браузером части документа. В результате поиск может вернуть null, и дальнейшая работа с кнопкой вызовет ошибку.

Чтобы избежать такой проблемы, внешний скрипт можно подключить с атрибутом defer:
<script src="script.js" defer></script>
6. Изменения не появились на странице
Убедись, что ты открыл нужный HTML-файл или страницу сайта, обновил её и проверяешь именно тот файл JavaScript, который подключён в коде.
Какой способ подключения JavaScript выбрать
Для небольшого учебного примера подойдёт любой из первых трёх способов. Но если ты только начинаешь изучать веб-разработку, лучше привыкать хранить JavaScript в отдельном файле.

  • Встроенный код — подходит для простых экспериментов и коротких примеров.
  • Отдельный файл .js — удобен для организации кода, особенно когда проект растёт.
  • Отдельный файл с defer — хороший вариант, если скрипту нужно работать с HTML-элементами страницы.
  • Настройки CMS или конструктора — удобны, если сайт уже создан на платформе и не предполагает ручного редактирования файлов.
Хочешь стать frontend-разработчиком и устроиться в ИТ-компанию? Приглашаем тебя на курс с гарантией трудоустройства. Через 9 месяцев ты уже сможешь работать по новой специальности. Средняя зарплата выпускников при первом трудоустройстве: 196 000 рублей в месяц. Узнай подробности на сайте или задай вопрос в VK.

Статьи для старта в IT

Как создать простой API на Node.js и Java?
React: главные практики для начинающих разработчиков
Создание мобильного приложения с нуля: руководство для начинающих разработчиков

Истории наших выпускников

Friday, April 3
Как сменить профессию и стать Go-разработчиком с нуля: честная история выпускника
Friday, March 6
Как стать программистом в 50 лет: история пожарного, который устроился Java-разработчиком
Tuesday, February 4
Арман, из помощника машиниста электровоза в разработчики
Стань тем, кто задаёт тон в ИТ!
Подпишись на нашу рассылку и первым получай статьи по Java, JavaScript, Go и QA. Позволь себе быть экспертом!