Курс "JavaScript/​TypeScript/​Интерфейсы" для программистов

Собрание и инструменты разработки

Первая встреча традиционно является собранием. На нём мы знакомимся, проверяем подключение, обсуждаем организационные вопросы, взаимодействие с преподавателем, как учиться на курсе.

Также рассмотрим инструменты разработки, использование AI-помощника.

Основы языка

К первому занятию вы посмотрели вводный видеокурс и уже знаете основы JavaScript. Вместе проходим по важным особенностям JavaScript, обращаем внимание на нюансы и особые возможности языка, убеждаемся в том, что понимаем их.

Разбираем:

• Примитивные типы данных (числа, строки, boolean, null, undefined).
• Методы примитивов.
• Преобразование типов.
• Объекты и их преобразования к примитивам.
• Спецификацию ECMAScript (как ее использовать).

Объекты, массивы и функции

Объекты, массивы и функции вам уже знакомы. На этом занятии мы изучаем их особенности в JavaScript.

• Замыкание и область видимости.
• Функции как значение, стрелочные функции.
• Объект как коллекция: передача по ссылке, итерация, копирование, флаги свойств.
• Set/Map: область использования, отличия от Object.
• Деструктуризация объектов и массивов.

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

TypeScript и объектно-ориентированное программирование.

Мы полагаем, что у вас уже есть опыт с ООП, поэтому сосредотачиваемся на особенностях JavaScript и изучим основы TypeScript.

• Настройка и использование TypeScript.
• Методы объектов, динамический контекст this.
• Потеря контекста, передача контекста в функцию и его привязка.
• Оператор new и экземпляры класса.
• Наследование и приватные поля.
• Введение в компонентную архитектуру веб-страницы.

Создание компонента "диаграмма" для проекта.

DOM-модель в деталях.

Изучаем DOM-модель документа и методы работы с ней. Применяем компонентный подход на основе классов для создания интерфейса.

• DOM - объектная модель документа, основные методы.
• JavaScript-модули, их особенности по сравнению с "обычными" скриптами.
• Способы подключения ресурсов на страницу и влияние на производительность страницы.
• Процесс загрузки страницы, порядок выполнения модулей и скриптов.

Создание компонент "всплывающая подсказка" и "календарь с выбором диапазона дат" для проекта.

События

Изучаем взаимодействие с посетителем при помощи событий:

• Установка обработчиков событий.
• Погружение и всплытие.
• Приём проектирования "делегирование" для работы с большим количеством элементов, упрощения сложных интерфейсов.
• Приём проектирования "поведение" для добавления функционала при помощи HTML-атрибутов.
• Архитектура, связывание компонентов при помощи своих событий.
• Drag'n'drop при помощи событий.

Создание компонент "всплывающая подсказка" и "календарь с выбором диапазона дат" для проекта.

Взаимодействие с сервером

Начинаем это занятие с обычных HTTP-форм, затем переходим к динамическим сетевым запросам:

• Создание и отправка форм, динамические формы, валидация.
• DOM-свойства и методы для форм.
• Fetch API, запросы на сервер
• POST-запросы на сервер, кодировка, обмен данными в формате JSON.
• События клавиатуры.
• Загрузка изображений.

Promise в деталях, более сложный асинхронный код

Изучаем продвинутые средства для работы с асинхронным кодом. Погружаемся во внутреннее устройство браузера.

• Событийный цикл: setTimeout(..., 0), макрозадачи, микрозадачи
• Promise и его продвинутые методы.
• Промисификация функций.
• Async/Await
• Обработка ошибок.
• Динамическая подгрузка модулей.
• AbortController для отмены запросов.

Тестирование JavaScript-приложений.

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

• Использование “AI” для написания тестов.
• TDD/BDD-разработка.
• Виды тестирования: юнит-тестирование, интеграционное и E2E-тестирование.
• "Спаи" (spy), "моки" (mock) и "стабы" (stub). Применяем их в Vitest.
• Инструменты для E2E-тестирования: Playwright, Cypress.

Архитектура веб-приложений, роутинг.

Изучаем существующие архитектуры приложений: SPA и MPA. Создаем SPA-приложение, которое работает без перезагрузки страницы.

• History API в браузере.
• Архитектура: роутер для перехода по страницам.
• Теория SSR и SSG.

Сборка проекта с помощью Vite.

Ранее мы делали различные компоненты для проекта. Теперь соберём их вместе и подготовим к публикации на "боевом" сервере.

Используем самый современный сборщик Vite

• Конфигурация Vite, примеры сборки.
• Плагины, подключение и сборка CSS.
• Полифилы для работы сборки в старых браузерах.

Дополнительные темы, ответы на вопросы.

Разбор тем, не вошедших в основную программу курса.

• Дальнейшее развитие: куда двигаться со знаниями JavaScript и где искать информацию.
• Продвинутое применение AI: MCP и агенты.
• Обзор основных фреймворков и библиотек.

Отвечаем на дополнительные вопросы.