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

Собрание

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

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

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

Разбираем функции, замыкания в JavaScript и многое другое.

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

Объекты и массивы, основы тестирования

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

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

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

Объектно-ориентированное программирование, введение в DOM.

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

• Методы объектов, динамический контекст this.
• Потеря контекста, передача контекста в функцию и его привязка.
• Функции-конструкторы.
• Прототипное наследование, свойство prototype.
• Классы, их внутреннее устройство.

Введение в DOM и компонентную архитектуру.

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

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

Глубже изучаем DOM-модель документа и методы работы с ней. Они нужны, чтобы отображать кнопки, меню и другие компоненты, а также динамических их менять.

JavaScript-модули, их особенности по сравнению с "обычными" скриптами.

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

События

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

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

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

Асинхронный код: Promise, async/await, fetch

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

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

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

Формы, Fetch для POST-запросов:

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

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

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

• TDD/BDD-разработка.
• Виды тестирования: юнит-тестирование, интеграционное и E2E-тестирование.
• Jasmine/Jest API. "Спаи" (spy), "моки" (mock) и "стабы" (stub).
• Инструменты для E2E-тестирования: puppeteer, cypress.

Одностраничные веб-приложения, роутинг.

Создание SPA-приложений, которые работают без перезагрузки страницы.

• History API в браузере.
• Динамическая подгрузка модулей.
• Архитектура: роутер для перехода по страницам.

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

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

Пожалуй, самым мощным и гибким средством сборки является Webpack.

• Конфигурация Webpack, примеры сборки.
• Лоадеры, подключение и сборка CSS.
• Важные плагины: HtmlWebpackPlugin, DefinePlugin, CopyWebpackPlugin и ряд других.
• Полифилы для работы сборки в старых браузерах.

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

Вопросы по темам, которые не вошли в основную программу курса.

Фреймворки: React, Angular, другие, куда двигаться дальше.