Переменные: сохраняем значения
Переменная — это имя, под которым программа хранит значение. Например, можно сохранить имя посетителя, количество очков или выбранную тему. Для объявления переменных часто используют const и let. const подходит, если не планируется присваивать переменной новое значение, а let — если значение будет меняться. Дай переменным понятные имена, чтобы по коду было легко догадаться, что в них хранится.
Условия: выбираем действие
Программа может выполнять разные действия в зависимости от ситуации. Для этого используют if и else. Например, если количество очков больше нуля, можно показать сообщение об успехе, иначе — предложить попробовать ещё раз. Условие должно давать понятный результат: истина или ложь. Попробуй изменить число в примере и посмотреть, как меняется ответ. Затем придумай собственное условие, связанное с возрастом, оценкой или количеством попыток.
Функции: не повторяем код
Функция объединяет несколько инструкций под одним именем. Её можно вызвать в разных местах, передать ей значения и получить результат. Например, отдельная функция может посчитать сумму двух чисел или показать приветствие. Если один и тот же код приходится копировать несколько раз, подумай, можно ли оформить его в функцию. Старайся, чтобы у функции была одна понятная задача — тогда её проще проверить и исправить.
Кнопки и события
Чтобы страница реагировала на нажатие, JavaScript может слушать событие click. Сначала нужно найти кнопку в документе, а затем назначить обработчик события. Внутри обработчика указывают, что должно произойти: изменить текст, увеличить счётчик или показать сообщение. Важно проверить, что обработчик срабатывает один раз на каждое нажатие и что он работает именно с нужной кнопкой.
Изменяем содержимое страницы
Браузер представляет HTML как набор объектов, с которыми можно работать через DOM. Метод querySelector помогает найти элемент, а свойство textContent — изменить его текст. Например, можно сделать кнопку, которая меняет подпись на странице. Для обычного пользовательского текста лучше использовать textContent, а не вставлять строку как HTML. Начни с изменения одного заголовка, затем попробуй обновлять результат небольшой викторины.
Как находить ошибки
Если программа не работает, открой консоль разработчика в браузере. Там могут появиться сообщения о неправильном имени переменной, пропущенной скобке или попытке обратиться к несуществующему элементу. Читай сообщение внимательно и проверь указанную строку. Если код большой, временно убери необязательные части и оставь только минимальный пример. После исправления проверь и обычный сценарий, и ситуацию, когда пользователь вводит пустое значение.
Практика: кнопка приветствия
Добавь в HTML кнопку и элемент, в котором будет появляться сообщение. В JavaScript найди кнопку через querySelector и назначь ей обработчик click. Когда посетитель нажмёт кнопку, измени текст сообщения на «Привет! Ты запустил JavaScript». Сначала проверь, что кнопка найдена, а затем убедись, что сообщение появляется при каждом нажатии. Это небольшое упражнение показывает, как HTML, событие и JavaScript работают вместе.
Если код не запускается
Проверь, что файл JavaScript подключён к HTML и путь указан правильно. Открой консоль браузера и посмотри, есть ли сообщение об ошибке. Частая причина — опечатка в имени переменной или селекторе. Также убедись, что нужный элемент действительно есть в HTML. Не пытайся исправить всё одновременно: найди первую ошибку, исправь её и проверь результат заново.
Мини-викторина
Как повесить действие на нажатие кнопки?
Выбери ответ — результат появится здесь.
Итого: 0 из 1 правильных ответов
addEventListener позволяет подписаться на событие, например click.
Отметь результат и выбери одну вещь для самостоятельной практики.
Отметка сохранится в этом браузере.