HTML CSS JavaScript TypeScript

Семантика, DOM, события, формы, модули, Fetch, async/await, типизация и проверка данных

Материалы

• JavaScript в браузере: первая программа

  Подключение JavaScript к HTML, порядок выполнения и наблюдение результата в консоли.

• Значения и типы JavaScript

  Строки, числа, логические значения и явные преобразования на данных учебного курса.

• Переменные и область видимости

  Выбор const и let, область блока и отделение исходных данных от состояния интерфейса.

• Условия и отбор карточки

  Сравнения, логические операторы и явное условие отбора по теме курса.

• Циклы и обход учебных данных

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

• Функции: параметры и возвращаемый результат

  Выделение операции форматирования курса и разделение вычисления с выводом.

• Массивы: порядок, изменение и копирование

  Индексы, добавление элементов и различие ссылки на массив с его копией.

• Объекты и модель учебного курса

  Объединение связанных полей, стабильный идентификатор и единый массив карточек.

• filter, map и reduce: обработка каталога

  Отбор, преобразование, суммирование и числовая сортировка без изменения исходных данных.

• Деструктуризация и значения по умолчанию

  Извлечение полей объекта, параметры выбора и поверхностная копия через spread.

• Ошибки и проверка данных каталога

  Исключения, граница try/catch и проверка обязательных полей до обработки.

• DOM: поиск элементов страницы

  Связь HTML и объектов браузера, querySelector и проверка обязательных узлов.

• Создание карточек через DOM

  createElement, textContent и повторная отрисовка без накопления дубликатов.

• События и изменение состояния каталога

  Регистрация обработчика change и связь пользовательского действия с отбором карточек.

• Форма и FormData: применение параметров

  Сбор параметров именованных полей, событие submit и явное преобразование числового ввода.

• ES-модули без сборщика

  Разделение данных, модели, представления и запуска через import и export в браузере.

• Promise и результат отложенной операции

  Состояния Promise, цепочка преобразований, передача результата и обработка ошибок на данных учебного каталога.

• Загрузка JSON через fetch

  Загрузка данных каталога по HTTP, проверка статуса ответа, разбор JSON и проверка структуры полученных записей.

• Последовательность операций с async и await

  Переписываем загрузку учебного каталога через async и await, разбираем возвращаемое значение, ошибки и завершение операции.

• Собираем каталог из модулей и состояний

  Итоговый учебный каталог: загрузка JSON, отбор и сортировка, повторная попытка и согласованные состояния интерфейса.

• Состояние интерфейса в URL

  Восстановить фильтр из параметров адреса

• Отмена устаревшего запроса

  Предотвратить применение ненужного ответа

• Гонки сетевых ответов

  Применять результат только актуального запроса

• Постраничный интерфейс для API

  Согласовать адрес, страницу и данные ответа