HTML CSS JavaScript TypeScript

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

Материалы

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

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

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

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

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

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

• Условия в JavaScript: отбор карточек каталога

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

• Циклы в JavaScript: обход данных каталога

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

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

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

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

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

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

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

• filter, map и reduce в JavaScript: обработка массива

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

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

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

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

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

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

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

• Создание элементов DOM в JavaScript: карточки каталога

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

• События в JavaScript: изменение состояния интерфейса

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

• FormData в JavaScript: чтение параметров формы

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

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

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

• Promise в JavaScript: результат асинхронной операции

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

• Fetch API в JavaScript: загрузка JSON

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

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

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

• Каталог на JavaScript: модули и состояния интерфейса

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

• JavaScript: хранение состояния интерфейса в URL

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

• AbortController в JavaScript: отмена устаревшего запроса

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

• JavaScript: гонки сетевых ответов и актуальность данных

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

• Пагинация на JavaScript: постраничная загрузка из API

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