Этот курс является вторым курсом по JavaScript, который рассматривает уже продвинутые концепции и детально погружается в устройство JS. От вас нужно только базовое знание основ JS и HTML и CSS для финального проекта. Этот курс сфокусирован на том, чтобы донести продвинутые концепции языка, а так же подвести вас к использованию фреймворков, таких, как React, Vue и Angular с пониманием, что происходит под капотом.
Ведь все эти знания мы применим на финальном проекте – библиотеки книг. Мы сделаем полноценное SPA приложение с компонентной структурой, реактивностью и сборщиком. В процессе мы даже сделаем свой mini framework с использованием ООП.
Лекции содержат как теоретическую часть, так и live-code, где мы вместе будем писать код, разбираю особенности работы JavaScript. В конце каждого модуля вас ожидает тест, который позволит укрепить ваши знания.
Чему вы научитесь:
- После прохождения курса вы сможете:
- Работать с Map и Set, WeekMap и WeekSet
- Работать с числами, Math и BigInt
- Работать с интернационализацией чисел и дат через Intl API
- Работать с таймерами и интервалами
- Понимать принципы ООП
- Использовать prototype и ES6 классы
- Понимать и применять SOLID
- Писать асинхронный JavaScript
- Делать запросы на сервер и понимать принцип их работы
- Понимать как работает Event Loop
- Создавать и обрабатывать Promise
- Понимать устройство DOM и его работу
- Обрабатывать Event и понимать концепции захвата и всплытия
- Создавать модульные приложения на commonjs и es6
- Работать с NPM
- Настраивать сборку проекта
Программа курса
1. Введение
- Продвинутый JavaScript
- Как устроен курс
- Обзор проекта
- Обзор курсов
- Работа на платформе
2. Настройка окружения
- Настройка окружения
- Установка NodeJS
- Настройки VSCode
- Настройка проекта
- Рекомендуемый курс
3. Maps и Sets
- Структура Set
- Sets
- Структура Map
- Основы работы с Map
- Быстрое создание Map
- Итерация по Map
- Упражнение — swap ключей и значений
- WeakMap
- WeakSet
- Тест — Maps и Sets
- Занятие — Maps и Sets
4. Расчеты и math
- Конвертация и проверка чисел
- Библиотека Math
- Округление
- Упражнение — Функция случайного числа
- Оператор остатка от деления
- Разделитель чисел
- Работа с BigInt
- Интернационализация чисел
- Упражнение — Конвертер валют
- Тест — Расчёты и math
- Занятие — Расчёты и math
5. Даты и время
- Создание дат
- Операции с датами
- Сравнение дат
- Упражнение — Проверка на день рождения
- Интернационализация дат
- Тест — Даты и время
- Занятие — Даты и время
6. Таймеры
- Создание таймеров
- Таймеры и Event Loop
- Точность таймеров
- Работа с интервалами
- Упражнение — Таймер пиццы
- Тест — Таймеры
- Занятие — Таймеры
7. Объектно-ориентированное программирование
- Что такое ООП
- Реализация ООП в JS
- Оператор new
- Prototype
- Упражнение — Корзина товаров
- Цепочки prototype
- Тест — ООП
- Занятие — ООП
8. Классы
- Классы
- Setters и getters
- Static
- Приватные методы и свойства
- Упражнение — класс пользователя
- Object.create
- Тест — Классы
- Занятие — Классы
9. Принципы ООП в классах
- Абстракция и инкапсуляция
- Наследование
- Наследование в ES6
- Override методов
- Упражнение — Удар по орку
- Полиморфизм
- Паттерн Builder и chaining
- Тест — Принципы ООП в классах
- Занятие — Принципы ООП в классах
- Отзыв о курсе
10. Solid
- О Solid
- Принцип единой ответственности
- Принцип открытости и закрытости
- Принцип подстановки Барбары Лисков
- Принцип разделения интерфейса
- Принцип инверсии зависимостей
- Тест — Solid
- Занятие — Solid
11. Асинхронный JavaScript
- Асинхронный код в JS
- Запросы на сервер
- Пример работы с Insomnia
- JSON
- Получение данных
- Упражнение — Расчёт цены
- Проблемы callback
- Тест — Асинхронный JavaScript
- Занятие — Асинхронный JavaScript
12. Promises
- Promises и fetch
- Обработка promises
- Цепочка promise
- Обработка reject
- Finally
- Упражнение — Select выбора категорий
- Ручное создание ошибок
- Упражнение — Функция запросов
- Тест — Promises
- Занятие — Promises
13. Event Loop
- Как работает асинхронность
- Пример работы Event Loop
- Создание простого Promise
- Статические методы Promise
- Promise withResolvers
- Упражнение — создание fetch
- Тест — Event Loop
- Занятие — Event Loop
14. Современный Асинхронный JavaScript
- Async await
- Try catch
- Упражнение — Мой город
- Асинхронные методы
- Последовательность выполнения
- Параллельное выполнение
- Другие комбинации Promise
- Все возможности fetch
- Упражнение — Генератор активностей
- Тест — Современный Асинхронный JavaScript
- Занятие — Современный Асинхронный JavaScript
15. Продвинутый DOM и Events
- Как работает DOM
- Работа с элементами
- Визуальное положение элементов
- Типы событий и обработчики
- Всплытие событий
- Пример всплытия событий
- Делегирование событий
- Перемещение по DOM
- Жизненный цикл событий DOM
- Упражнение — Поиск по списку
- Загрузка скриптов defer и async
- Тест — Продвинутый DOM и Events
- Занятие — Продвинутый DOM и Events
16. Модульность
- Модули в JavaScript
- IIFE в модулях
- Модули commonjs
- ES6 модули
- Await на верхнем уровне
- Процесс сборки
- Тест — Модульность
- Занятие — Модульность
17. Работа с NPM
- Обзор NPM
- Авторизация и профиль
- Разбор package json
- Управление зависимостями
- Тест — Работа с NPM
- Занятие — Работа с NPM
18. Проект — Библиотека книг
- Обзор проекта
- Настройка проекта
- Конфигурация сборщика
- View страниц и роутинг
- State и реактивности
- Первый компонент
- Вёрстка шапки
- Компонент поиска
- Поиск книг
- Упражнение — Состояние загрузки
- Вёрстка карточки
- Упражнение — Добавление в избранное
- Упражнение — Избранное
- Развитие проекта
19. Temporal API
- О Temporal API
- Подключение Polyfill
- Instant
- Zoned и Plain DateTime
- Сравнение и изменение
20. Заключение
- Куда двигаться дальше?
- Рекомендуемый курс
- Финальное тестирование
