Я бы начинал JavaScript не с переменных, типов и истории языка, а с маленького видимого действия: была обычная статичная страница, нажали кнопку, текст на странице изменился
Именно в этот момент JavaScript перестает быть словом из вакансий и становится поведением интерфейса. HTML отвечает за структуру, CSS — за внешний вид, а JavaScript — за реакцию: клик, ввод текста, отправку формы, раскрытие меню, запрос к серверу, счетчик, фильтр, модальное окно
В этом уроке сделаем первый рабочий пример. Без сборщиков, без React, без Node.js. Только один HTML-файл, кнопка и немного JavaScript
- Что получится в конце
- Что JavaScript делает на сайте
- Создаем HTML-заготовку
- Добавляем script
- Находим элементы через querySelector
- Реагируем на клик
- Добавляем счетчик кликов
- Полный код
- Частые ошибки
- Скрипт подключен раньше HTML
- Ошибка в селекторе
- Забыли кавычки вокруг события
- Смотрят на страницу, но не открывают Console
- Мини-задания
- Ответы на эти вопросы могут быть для вас полезными
- Нужно ли скачивать JavaScript?
- Где писать JavaScript-код?
- Можно ли учить JavaScript без HTML?
- Что такое консоль браузера?
- Чем JavaScript отличается от Java?
- Что почитать дальше по JavaScript
Что получится в конце
У нас будет страница с текстом, кнопкой и счетчиком кликов. После нажатия текст изменится, а число кликов увеличится
Итоговый код можно открыть в обычном браузере:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Первый JavaScript</title>
</head>
<body>
<h1>JavaScript с нуля</h1>
<p class="message">Пока кнопка не нажата.</p>
<button class="change-button">Изменить текст</button>
<p class="counter">Кликов: 0</p>
<script>
const message = document.querySelector(".message");
const button = document.querySelector(".change-button");
const counter = document.querySelector(".counter");
let clicks = 0;
button.addEventListener("click", () => {
clicks = clicks + 1;
message.textContent = "Теперь текст изменился через JavaScript.";
counter.textContent = `Кликов: ${clicks}`;
});
</script>
</body>
</html>Что JavaScript делает на сайте
Если коротко, JavaScript добавляет странице поведение. На MDN JavaScript описывают как язык, который позволяет делать сложные возможности на веб-страницах: обновлять содержимое, реагировать на действия пользователя, работать с интерактивными элементами
В реальном сайте JavaScript может:
- открыть меню по клику;
- проверить форму перед отправкой;
- показать подсказку;
- загрузить товары без перезагрузки страницы;
- сделать слайдер;
- сохранить настройку темы;
- отправить запрос на сервер;
- отрисовать график или карту.
Но первый шаг лучше сделать совсем маленьким. Если ты понял кнопку, текст и событие клика, дальше будет проще понять формы, модальные окна и запросы
Создаем HTML-заготовку
Создай файл index.html и вставь:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Первый JavaScript</title>
</head>
<body>
<h1>JavaScript с нуля</h1>
<p class="message">Пока кнопка не нажата.</p>
<button class="change-button">Изменить текст</button>
<p class="counter">Кликов: 0</p>
</body>
</html>Открой файл в браузере двойным кликом. Пока это просто HTML: текст и кнопка есть, но кнопка ничего не делает
Добавляем script
Перед закрывающим тегом </body> добавим:
<script>
console.log("JavaScript подключился");
</script>Открой страницу, нажми правой кнопкой мыши, выбери Inspect или "Просмотреть код", затем вкладку Console. Если видишь сообщение, JavaScript действительно выполняется
Почему script ставим перед </body>? Потому что к этому моменту браузер уже успел прочитать кнопку и текст. Новичок часто ставит скрипт в head, а потом JavaScript не находит элементы, которых еще нет на странице
Находим элементы через querySelector
Теперь найдем текст, кнопку и счетчик:
const message = document.querySelector(".message");
const button = document.querySelector(".change-button");
const counter = document.querySelector(".counter");document.querySelector(".message") ищет первый элемент с классом message. Точка перед именем класса такая же, как в CSS
Если написать класс с ошибкой:
document.querySelector(".messege");JavaScript вернет null. Потом при попытке что-то сделать с этим null появится ошибка. Поэтому селекторы проверяем внимательно
Реагируем на клик
Чтобы кнопка начала работать, нужен слушатель события:
button.addEventListener("click", () => {
message.textContent = "Теперь текст изменился через JavaScript.";
});addEventListener можно прочитать так: "когда у кнопки произойдет событие click, выполни эту функцию"
MDN описывает addEventListener как метод для добавления обработчика к событию объекта. Для новичка важен практический смысл: мы не запускаем код сразу, мы говорим браузеру, что делать потом, когда пользователь нажмет кнопку
Добавляем счетчик кликов
Сейчас текст меняется, но хочется видеть, сколько раз нажимали кнопку. Добавим переменную:
let clicks = 0;И обновим обработчик:
button.addEventListener("click", () => {
clicks = clicks + 1;
message.textContent = "Теперь текст изменился через JavaScript.";
counter.textContent = `Кликов: ${clicks}`;
});let clicks = 0 создает переменную, которую можно менять. Каждый клик увеличивает ее на 1
Строка:
`Кликов: ${clicks}`называется шаблонной строкой. Она удобна, когда внутрь текста нужно вставить значение переменной
Полный код
Вот полный файл:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Первый JavaScript</title>
</head>
<body>
<h1>JavaScript с нуля</h1>
<p class="message">Пока кнопка не нажата.</p>
<button class="change-button">Изменить текст</button>
<p class="counter">Кликов: 0</p>
<script>
const message = document.querySelector(".message");
const button = document.querySelector(".change-button");
const counter = document.querySelector(".counter");
let clicks = 0;
button.addEventListener("click", () => {
clicks = clicks + 1;
message.textContent = "Теперь текст изменился через JavaScript.";
counter.textContent = `Кликов: ${clicks}`;
});
</script>
</body>
</html>Сохрани файл и обнови страницу в браузере. Нажимай кнопку несколько раз. Если счетчик растет, первый JavaScript-сценарий работает
Частые ошибки
Скрипт подключен раньше HTML
Если скрипт стоит в head, а ты сразу ищешь кнопку, браузер может еще не успеть создать элемент
Простой вариант для первых уроков: ставить script перед </body>
Ошибка в селекторе
В HTML:
<button class="change-button">Изменить текст</button>В JavaScript должно быть:
document.querySelector(".change-button");Если написать .change_btn, кнопка не найдется
Забыли кавычки вокруг события
Правильно:
button.addEventListener("click", () => {});Неправильно:
button.addEventListener(click, () => {});Без кавычек JavaScript будет искать переменную click, а не название события
Смотрят на страницу, но не открывают Console
Когда что-то не работает, первым делом открой Console. JavaScript часто прямо говорит, на какой строке ошибка. Не нужно гадать глазами
Мини-задания
- Измени текст кнопки после первого клика.
- Сделай так, чтобы заголовок тоже менялся.
- Добавь второй абзац и меняй его цвет.
- Увеличивай счетчик на 2 вместо 1.
- Если кликов больше 5, покажи текст "Хватит тестировать, все работает".
Подсказка для пятого задания:
if (clicks > 5) {
message.textContent = "Хватит тестировать, все работает.";
}Ответы на эти вопросы могут быть для вас полезными
Нужно ли скачивать JavaScript?
Для первого урока нет. JavaScript уже выполняется в браузере. Тебе нужен браузер, текстовый редактор и HTML-файл
Где писать JavaScript-код?
На старте можно писать прямо внутри тега script в HTML. Потом удобнее вынести код в отдельный файл script.js
Можно ли учить JavaScript без HTML?
Можно изучать синтаксис отдельно, но для веба лучше сразу знать минимум HTML. JavaScript часто работает именно с элементами страницы
Что такое консоль браузера?
Это вкладка DevTools, где видны сообщения console.log и ошибки JavaScript. Для обучения она почти так же важна, как сам редактор кода
Чем JavaScript отличается от Java?
Это разные языки с разной историей и экосистемами. Похожие названия не означают, что JavaScript — это версия Java
Что почитать дальше по JavaScript
Чтобы двигаться по теме без рывков, рядом лучше открыть:
- События и клики в JavaScript: addEventListener без путаницы — следующий практический шаг после первого клика.
- If else в JavaScript: условия на живых примерах — добавить условия и простую логику поведения.
- JavaScript online compiler: как попробовать код без установки — потренироваться без локальной настройки проекта.
- Нужно ли скачивать JavaScript — разобраться, что действительно нужно установить для старта.
