Первые шаги в коде

JavaScript: добавь странице действие

Кнопка реагирует на клик, форма подсказывает ошибку, список обновляется — всё это делает JavaScript. Начнём с небольших задач, которые можно проверить сразу.

После HTML и CSS
51 тем
Много практики

Смотреть темы →

const button = document
  .querySelector('button');

button.addEventListener('click', () => {
  alert('Готово!');
});

Программа

Пишем код постепенно

Каждая тема заканчивается небольшим результатом: от первой переменной до работы с элементами страницы.

01 / данные

Переменные и типы

Где хранить значение и как с ним работать.

02 / логика

Условия

Как сказать программе, что делать в разных случаях.

03 / логика

Функции

Собираем повторяющийся код в понятные действия.

04 / данные

Массивы

Храним и обрабатываем список значений.

05 / браузер

DOM и события

Находим элементы и реагируем на действия.

06 / данные

Объекты

Объединяем связанные значения.

07 / текст

Строки

Очищаем, ищем и собираем текст.

08 / повторение

Циклы

Повторяем действия без копирования кода.

09 / справочник

Array.map()

Преобразуем каждый элемент массива.

10 / справочник

Array.filter()

Оставляем элементы, подходящие условию.

11 / справочник

querySelector()

Находим элементы страницы по CSS-селектору.

12 / справочник

Array.forEach()

Выполняем действие для элементов массива.

13 / справочник

Array.find()

Ищем первый элемент по условию.

14 / справочник

addEventListener()

Подписываем элементы на события.

15 / справочник

classList

Добавляем, удаляем и переключаем CSS-классы.

16 / браузер

localStorage

Сохраняем настройки между посещениями.

17 / справочник

Шаблонные строки

Подставляем значения и пишем многострочный текст.

18 / справочник

Деструктуризация

Достаём значения из объектов и массивов.

19 / справочник

Spread и rest

Копируем, объединяем и собираем значения.

20 / справочник

Array.reduce()

Сворачиваем массив в одно значение.

21 / справочник

Array.some()

Проверяем, подходит ли хотя бы один элемент.

22 / справочник

Array.every()

Проверяем все элементы массива.

23 / справочник

setTimeout()

Запускаем действие с задержкой.

24 / справочник

Fetch API

Отправляем HTTP-запросы из браузера.

25 / справочник

async / await

Пишем асинхронный код последовательно.

26 / справочник

try...catch

Перехватываем ошибки и восстанавливаем работу.

27 / справочник

Array.includes()

Проверяем наличие значения в массиве.

28 / справочник

Array.sort()

Сортируем числа, строки и объекты.

29 / справочник

Array.flat()

Разворачиваем вложенные массивы.

30 / справочник

String.includes()

Ищем фрагмент внутри строки.

31 / справочник

String.split()

Разделяем строку на массив частей.

32 / справочник

Object.keys / values / entries

Получаем ключи и значения объекта.

34 / справочник

JSON

Преобразуем данные в строку и обратно.

35 / справочник

Date

Работаем с датой и временем.

36 / справочник

Math.random()

Получаем случайное число в диапазоне.

100 / новая тема

document.createElement()

Создаём DOM-узлы и безопасно заполняем их.

101 / новая тема

append() и appendChild()

Вставляем элементы и строки в конец контейнера.

102 / новая тема

dataset в JavaScript

Передаём небольшие настройки из HTML в JavaScript.

103 / новая тема

Element.closest()

Поднимаемся по DOM до подходящего элемента.

104 / новая тема

FormData в JavaScript

Собираем поля формы без ручного поиска каждого input.

105 / новая тема

event.preventDefault()

Управляем отправкой формы и поведением ссылки.

106 / новая тема

Promise в JavaScript

Разбираемся с pending, fulfilled, rejected и цепочками.

107 / новая тема

setInterval() в JavaScript

Запускаем повторение и обязательно умеем его остановить.

108 / новая тема

URLSearchParams

Работаем с поиском, фильтрами и query string.

109 / новая тема

sessionStorage в JavaScript

Сохраняем временное состояние до закрытия вкладки.

110 / новая тема

Debounce в JavaScript

Не запускаем тяжёлую функцию на каждый символ.

111 / новая тема

Опциональная цепочка ?. в JavaScript

Читаем вложенные свойства без длинных проверок.

112 / новая тема

Оператор ?? в JavaScript

Сохраняем 0, false и пустую строку.

113 / новая тема

Модули JavaScript

Разделяем код и явно описываем зависимости.

114 / новая тема

Делегирование событий

Один обработчик управляет множеством элементов.

Практикумы

Короткие задачи по JavaScript

Короткие задачи на одну тему: прочитай, повтори в песочнице и проверь результат.

практикум

Вкладки без перехода на другую страницу

Характеристики, доставка и отзывы могут жить на одной странице, если видна только выбранная панель.

практикум

Индикатор, пока данные в пути

Пока fetch не вернулся, повторные клики легко отправить тот же запрос несколько раз.

практикум

Окно поверх страницы на теге dialog

Подтверждение «удалить запись» не обязано быть отдельной страницей.

практикум

Очистить поле и вернуть фокус

Форма добавления удобнее, если после записи поле пустеет само и сразу готово к следующей строке.

практикум

Переключатель светлой и тёмной темы

Тёмная тема уже умеет жить в CSS. Кнопка должна только переключить атрибут и запомнить выбор.

практикум

Проверка формы до отправки

Браузер уже умеет required. Свой скрипт нужен, когда правило твоё: имя короче двух букв или не выбрана галочка согласия.

практикум

Скопировать текст кнопкой

Адрес урока или номер заказа удобно копировать одной кнопкой.

практикум

Сортировка уже показанного списка

Список задач или карточек можно упорядочить по имени, не запрашивая его заново.

практикум

Счётчик с пределом

Количество товара или шаг урока удобно менять кнопками, если у числа есть пол и потолок.

практикум

Текст ошибки в заранее готовом месте

Ошибку лучше писать в элемент, который был в HTML, а не создавать новый при каждом промахе.

практикум

Что показать, если сеть не ответила

Сервер может не ответить. Страница при этом обязана сказать, что случилось, и оставить способ повторить.

практикум

Экран, когда списка ещё нет

Пустой список без пояснения выглядит как сломанная загрузка.

Все материалы

Все материалы раздела JavaScript

Учебные материалы

Справочник

Новые темы

Практика: счётчик кликов

Сделай кнопку, которая увеличивает число на странице. Это простое упражнение, но в нём есть всё важное: переменная, событие и DOM.

Начать →

Подробнее

Скрипт работает с уже построенной страницей

Пока браузер читает HTML, он собирает элементы. Скрипт в конце body запускается, когда эти элементы уже можно найти. Скрипт в head без defer может выполниться раньше и честно сказать, что кнопки на странице нет. Для учебных файлов подключай скрипт перед закрывающим body или с defer.

JavaScript не обязан заменять разметку. Текст, ссылка и форма существуют и без него. Скрипт добавляет действие: открыть блок, проверить поле, подставить число. Если скрипт не загрузился, основное содержимое урока всё равно должно читаться.

<button type="button" id="theme">Тёмная тема</button>
<script src="/script.js" defer></script>

const button = document.querySelector("#theme");
button.addEventListener("click", () => {
  document.body.classList.toggle("theme-dark");
});

Где смотреть ошибки

Консоль браузера показывает строку, на которой выполнение остановилось. querySelector вернул null, если селектор никого не нашёл, и следующая строка с addEventListener упадёт. Опечатка в имени переменной тоже видна там, а не на странице.

Не оставляй рабочий код вперемешку с временными console.log. Один журнал на непонятное значение полезен. Десять старых журналов прячут новую ошибку.

Короткий маршрут по разделу

Переменные и условия дают данные и выбор.
Циклы, массивы и функции убирают копирование.
События связывают код с кнопкой и формой.
Fetch и JSON нужны, когда данные приходят не из самого файла.

Запомни: Запускай каждый пример сам и сломай в нём одну строку. Так быстрее видно, какая часть за что отвечает.

JavaScript: добавь странице действие

Пишем код постепенно

Переменные и типы

Условия

Функции

Массивы

DOM и события

Объекты

Строки

Циклы

Array.map()

Array.filter()

querySelector()

Array.forEach()

Array.find()

addEventListener()

classList

localStorage

Шаблонные строки

Деструктуризация

Spread и rest

Array.reduce()

Array.some()

Array.every()

setTimeout()

Fetch API

async / await

try...catch

Array.includes()

Array.sort()

Array.flat()

String.includes()

String.split()

replace() и replaceAll()

Object.keys / values / entries

JSON

Date

Math.random()

document.createElement()

append() и appendChild()

dataset в JavaScript

Element.closest()

FormData в JavaScript

event.preventDefault()

Promise в JavaScript

setInterval() в JavaScript

URLSearchParams

sessionStorage в JavaScript

Debounce в JavaScript

Опциональная цепочка ?. в JavaScript

Оператор ?? в JavaScript

Модули JavaScript

Делегирование событий

Короткие задачи по JavaScript

Вкладки без перехода на другую страницу

Индикатор, пока данные в пути

Окно поверх страницы на теге dialog

Очистить поле и вернуть фокус

Переключатель светлой и тёмной темы

Проверка формы до отправки

Скопировать текст кнопкой

Сортировка уже показанного списка

Счётчик с пределом

Текст ошибки в заранее готовом месте

Что показать, если сеть не ответила

Экран, когда списка ещё нет

Все материалы раздела JavaScript

Учебные материалы

Справочник

Новые темы

Практика: счётчик кликов

Скрипт работает с уже построенной страницей

Где смотреть ошибки

Короткий маршрут по разделу