Современный JavaScript: каталог в браузере
Новые курсы · Все опубликованные курсы
В 40 уроках соберём учебный каталог в браузере и постепенно усложним его поведение. Первые 20 шагов ведут от значений и функций к DOM, форме, модулям и загрузке JSON. Продолжение добавляет состояние в URL, управление запросами, работу с данными, компоненты и отдельные браузерные API.
Учебные программы и измерения пока не запускались; описанные состояния являются ожидаемыми.
Перед началом
Базовые HTML, файлы проекта и инструменты разработчика. Для модулей и fetch потребуется локальный HTTP-сервер.
В первой части используется catalog-lab. В продолжении каждый опыт имеет самостоятельный снимок в advanced: можно читать исходники одного урока, сохраняя общие данные и модули. Учебные числа в каталоге фиксированы для объяснения и не обозначают размер настоящей библиотеки.
Основа: уроки 1–20
- JavaScript в браузере: первая программа
- Значения и типы JavaScript
- Переменные и область видимости
- Условия и отбор карточки
- Циклы и обход учебных данных
- Функции: параметры и возвращаемый результат
- Массивы: порядок, изменение и копирование
- Объекты и модель учебного курса
- filter, map и reduce: обработка каталога
- Деструктуризация и значения по умолчанию
- Ошибки и проверка данных каталога
- DOM: поиск элементов страницы
- Создание карточек через DOM
- События и изменение состояния каталога
- Форма и FormData: применение параметров
- ES-модули без сборщика
- Promise и результат отложенной операции
- Загрузка JSON через fetch
- Последовательность операций с async и await
- Собираем каталог из модулей и состояний
Продолжение: уроки 21–40
- Состояние интерфейса в URL
- Отмена устаревшего запроса
- Гонки сетевых ответов
- Постраничный интерфейс для API
- Проверка формы в браузере
- Делегирование событий
- Локальное хранение настроек
- Даты и часовые пояса в интерфейсе
- Форматирование с Intl
- Строки и Unicode
- Map и Set для данных интерфейса
- Итераторы и генераторы
- Контекст вызова функции
- Замыкания и время жизни данных
- Классы и прототипы
- Пользовательский элемент каталога
- IntersectionObserver: реагируем на конец каталога
- ResizeObserver: диаграмма по размеру контейнера
- Web Worker: считаем сводку каталога сообщениями
- Перенос jQuery-компонента на стандартные API
Учебные исходники
Исходники первой части · Исходники продолжения. В архивах есть инструкции, целые файлы и отдельные состояния примеров.