JS скрипт: что это и как написать первый script.js

JS-скрипт — это файл или фрагмент кода на JavaScript, который выполняется в браузере или в Node.js. Для сайта чаще всего создают файл script.js, подключают его к HTML через тег <script> и пишут в нем поведение страницы: клики, изменение текста, проверку формы, вывод списка

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

site/
  index.html
  script.js

Содержание

Создаем HTML
Создаем script.js
Как проверить скрипт через Console
Встроенный и внешний скрипт
Что может делать JS-скрипт
Где писать код: в HTML или в отдельном файле
Как понять, что скрипт реально управляет страницей
Частые ошибки
Файл называется script.js.txt
Неверный путь
Скрипт выполняется слишком рано
Мини-задание
Что почитать дальше по JavaScript

Создаем 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">Текст до скрипта</h1>
  <button id="button">Изменить</button>
</body>
</html>

Главная строка:

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

Она подключает файл script.js. Атрибут defer помогает выполнить скрипт после того, как браузер разобрал HTML

Создаем script.js

Файл script.js:

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

button.addEventListener("click", () => {
  title.textContent = "JS скрипт работает";
});

Откройте index.html в браузере и нажмите кнопку. Если заголовок изменился, скрипт подключен и выполняется

Как проверить скрипт через Console

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

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

Откройте DevTools и вкладку Console. Если сообщение появилось, файл найден. Если нет, проверьте путь в src, название файла и расширение

Встроенный и внешний скрипт

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

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

Но для нормальной работы удобнее отдельный файл. HTML отвечает за структуру, CSS — за внешний вид, JavaScript — за поведение

Отдельный файл легче искать, переиспользовать и подключать к нескольким страницам

Что может делать JS-скрипт

Примеры задач:

изменить текст;
показать или скрыть блок;
обработать клик;
проверить поле формы;
добавить элемент в список;
отправить запрос через fetch;
сохранить простую настройку в localStorage.

Не пытайтесь сразу писать большой скрипт. Начните с одного действия и проверяйте результат после каждого шага

Где писать код: в HTML или в отдельном файле

Для быстрых экспериментов можно написать код внутри тега <script> внизу HTML. Но если скрипт больше нескольких строк, лучше вынести его в script.js. Так проще читать страницу, находить ошибки и переносить код между проектами

Плохой старт для учебного проекта — держать HTML, CSS и много JavaScript в одном файле. Через час вы потеряете место, где находится нужная логика. Рабочий минимум такой:

index.html  -> структура страницы
style.css   -> оформление
script.js   -> поведение

Если скриптов несколько, называйте их по смыслу: menu.js, form.js, slider.js. Но на первом этапе один script.js удобнее: меньше путаницы с путями и порядком подключения

Как понять, что скрипт реально управляет страницей

Сделайте три проверки подряд:

console.log("1. файл подключен");

const button = document.querySelector("#button");
console.log("2. кнопка найдена:", button);

button.addEventListener("click", () => {
  console.log("3. клик работает");
});

Если первая строка есть, файл подключен. Если вторая выводит null, проблема в селекторе или HTML. Если третья не появляется после клика, проверьте, не изменился ли id кнопки и нет ли ошибки выше по коду

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

Файл называется script.js.txt

На Windows расширения могут быть скрыты. Файл выглядит как script.js, но реально называется script.js.txt. Браузер не найдет его по пути script.js

Неверный путь

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

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

Скрипт выполняется слишком рано

Если убрать defer и поставить script в head, элементы могут еще не существовать. Тогда querySelector вернет null

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

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

<p id="status">Ожидание</p>

И по клику меняйте не только заголовок, но и абзац. Так вы закрепите поиск элементов, обработчик события и изменение текста

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы: