HTML CSS JavaScript TypeScript — страница 2

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

Материалы

• Валидация формы в JavaScript

  Показать ошибки полей и сохранить введённое

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

  Обработать динамические карточки одним слушателем

• JavaScript: локальное хранение настроек интерфейса

  Сохранить предпочтения и пережить отказ хранилища

• Даты и часовые пояса в JavaScript

  Разделить момент времени и календарную дату

• Intl в JavaScript: форматирование чисел и дат

  Показать числа и даты для выбранной локали

• Строки и Unicode в JavaScript

  Объяснить различие символов и кодовых единиц

• Map и Set в JavaScript: коллекции данных

  Выбрать структуру для ключей и уникальных значений

• Итераторы и генераторы в JavaScript

  Получать последовательность значений по запросу

• this в JavaScript: контекст вызова функции

  Предсказать this и закрепить нужный контекст

• Замыкания в JavaScript и время жизни данных

  Хранить состояние в доступной функции

• Классы и прототипы в JavaScript

  Объяснить наследование свойств экземпляра

• Custom Elements в JavaScript: собственный элемент каталога

  Определить компонент с жизненным циклом

• IntersectionObserver в JavaScript: наблюдение за элементом

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

• ResizeObserver в JavaScript: размер контейнера и диаграмма

  Наблюдение за содержимым панели, координаты canvas, фактическая ширина и предотвращение циклических изменений.

• Web Worker в JavaScript: вычисления и обмен сообщениями

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

• Миграция jQuery-компонента на стандартные API JavaScript

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

• Структура HTML-документа: первая страница каталога

  Начнём каталог курсов с HTML-документа: зададим язык, метаданные и первые видимые элементы.

• Семантический HTML: структура веб-страницы

  Построим семантический каркас каталога: шапку, навигацию, основную область, карточки и футер.

• Ссылки в HTML: пути, относительные URL и якоря

  Добавим переходы из карточек и разберём абсолютные адреса, относительные пути и якоря страницы.

• Изображения в HTML: карточки учебных курсов

  Добавим изображение в карточку курса и зададим его текстовую альтернативу, пропорции и путь к файлу.

• HTML-форма: поля и отправка параметров

  Разберём устройство HTML-формы: подписи, имена полей, проверку заполнения и передачу параметров.

• Каскад и наследование CSS

  Подключим первые стили и разберём каскад, наследование и порядок CSS-правил на знакомом каталоге.

• Специфичность CSS и классы компонентов

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

• Блочная модель CSS: размеры элементов

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