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

Направление
JavaScript-разработка
Формат
Прямые эфиры
Домашние задания
Есть
Итоговый экзамен
Нет
Количество уроков
12
Документ об обучении
Сертификат
Обратная связь
Есть
Доступ
Сразу после покупки
Последнее обновление 14.08.2022

О курсе

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

Программа курса

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

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

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

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

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

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

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

    DOM — объектная модель документа, основные методы.
    Введение в компонентную архитектуру веб-страницы.
    Пример создания графического компонента «диаграмма», организация кода.
  5. Глубже изучаем DOM-модель документа и методы работы с ней. Они нужны, чтобы отображать кнопки, меню и другие компоненты, а также динамических их менять.

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

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

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

    Создание компонент «всплывающая подсказка» и «календарь с выбором диапазона дат» для проекта.
  7. Изучаем необходимые языковые средства для взаимодействия с сервером и других асинхронных операций.

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

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

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

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

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

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

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