Перейти к содержанию
Профессор Веб

Современный JavaScript: каталог в браузере

Новые курсы · Все опубликованные курсы

В 40 уроках соберём учебный каталог в браузере и постепенно усложним его поведение. Первые 20 шагов ведут от значений и функций к DOM, форме, модулям и загрузке JSON. Продолжение добавляет состояние в URL, управление запросами, работу с данными, компоненты и отдельные браузерные API.

Сразу к продолжению

Учебные программы и измерения пока не запускались; описанные состояния являются ожидаемыми.

Перед началом

Базовые HTML, файлы проекта и инструменты разработчика. Для модулей и fetch потребуется локальный HTTP-сервер.

В первой части используется catalog-lab. В продолжении каждый опыт имеет самостоятельный снимок в advanced: можно читать исходники одного урока, сохраняя общие данные и модули. Учебные числа в каталоге фиксированы для объяснения и не обозначают размер настоящей библиотеки.

Основа: уроки 1–20

  1. JavaScript в браузере: первая программа
  2. Значения и типы данных в JavaScript
  3. Переменные и область видимости в JavaScript
  4. Условия в JavaScript: отбор карточек каталога
  5. Циклы в JavaScript: обход данных каталога
  6. Функции в JavaScript: параметры и возвращаемый результат
  7. Массивы в JavaScript: изменение и копирование
  8. Объекты в JavaScript: модель учебного курса
  9. filter, map и reduce в JavaScript: обработка массива
  10. Деструктуризация в JavaScript и значения по умолчанию
  11. Ошибки в JavaScript: проверка данных каталога
  12. JavaScript и DOM: поиск элементов страницы
  13. Создание элементов DOM в JavaScript: карточки каталога
  14. События в JavaScript: изменение состояния интерфейса
  15. FormData в JavaScript: чтение параметров формы
  16. ES-модули в JavaScript без сборщика
  17. Promise в JavaScript: результат асинхронной операции
  18. Fetch API в JavaScript: загрузка JSON
  19. async и await в JavaScript: последовательность операций
  20. Каталог на JavaScript: модули и состояния интерфейса

Продолжение: уроки 21–40

  1. JavaScript: хранение состояния интерфейса в URL
  2. AbortController в JavaScript: отмена устаревшего запроса
  3. JavaScript: гонки сетевых ответов и актуальность данных
  4. Пагинация на JavaScript: постраничная загрузка из API
  5. Валидация формы в JavaScript
  6. Делегирование событий в JavaScript
  7. JavaScript: локальное хранение настроек интерфейса
  8. Даты и часовые пояса в JavaScript
  9. Intl в JavaScript: форматирование чисел и дат
  10. Строки и Unicode в JavaScript
  11. Map и Set в JavaScript: коллекции данных
  12. Итераторы и генераторы в JavaScript
  13. this в JavaScript: контекст вызова функции
  14. Замыкания в JavaScript и время жизни данных
  15. Классы и прототипы в JavaScript
  16. Custom Elements в JavaScript: собственный элемент каталога
  17. IntersectionObserver в JavaScript: наблюдение за элементом
  18. ResizeObserver в JavaScript: размер контейнера и диаграмма
  19. Web Worker в JavaScript: вычисления и обмен сообщениями
  20. Миграция jQuery-компонента на стандартные API JavaScript

Учебные исходники

Исходники первой части · Исходники продолжения. В архивах есть инструкции, целые файлы и отдельные состояния примеров.

Вернуться к новым курсам · Открыть каталог