[HTML Academy] JavaScript. Профессиональная разработка веб-интерфейсов [3 октября — 4 декабря 2023]

[HTML Academy] JavaScript. Профессиональная разработка веб-интерфейсов [3 октября — 4 декабря 2023] На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.​ Раздел 1 Знакомство c JavaScript Рассмотрим схему работы на курсе, какие инструменты понадобятся, и как их настроить. Разберём, что представляет собой язык JavaScript, причём здесь спецификация ECMAScript и браузер. Как проходит курс. Организационные вопросы. Схема работы на курсе. Обзор проектов. Критерии качества. Язык JavaScript Спецификация ECMAScript. Что даёт JavaScript'у браузер. Основы JavaScript. Базовый синтаксис: круглые и фигурные скобки, операторы, зарезервированные слова, комментарии. Основные строительные блоки — переменные и функции. Примитивы и сложные типы данных. Рабочие инструменты. Редакторы кода. Линтеры. Сервер для разработки. Практика Настройка рабочих инструментов. Создание репозитория, форк, клонирование. Создание ветки, коммита, синхронизация репозиториев. Создание пулреквеста на Гитхабе. Тренажёры. Раздел 2 Основные возможности JavaScript Начнём изучать основные конструкции JavaScript, особенно пристально — функции. Разберём нюансы объявления переменных. Познакомимся с инструментами разработчика. Переменные. Области видимости. Условные операторы. Тернарный оператор. Оператор множественного выбора switch. Циклы. Приведение типов. Функции. Стрелочные функции. Параметры функций по умолчанию. rest-параметры. Подвешивание (hoisting) переменных и функций. Знакомство с DevTools (инструментами разработчика). Практика Работа с техзаданием: превращение требований в код. Написание вспомогательных функций. Тренажёры. Раздел 3 Объекты и массивы Раздел без лайва Вы самостоятельно познакомитесь со сложными типами данных: массивами и объектами. Научитесь создавать их и управлять ими. Сложные типы данных. Массивы. Основные методы массивов. Объекты. Колбэки (функции обратного вызова). Практика Тренажёры. Раздел 4 Встроенные объекты и функции Рассмотрим существующие в самом языке JavaScript объекты и функции. Затронем контекст выполнения this. Запустим и отладим код в консоли инструментов разработчика. Деструктуризация. spread-синтаксис. Встроенные объекты и их методы. String. Number. Boolean. Date. Math. Оператор new. Встроенные в JavaScript функции. Контекст функций. Ключевое слово this. Потеря окружения. DevTools. Использование Console (консоли). Практика Разработка структур данных проекта. Генерация временных данных для разработки проекта. Раздел 5 Организация кода Разберём понятие областей видимости. Обсудим принцип DRY (не повторяйся) и как им пользоваться для того, чтобы писать меньше кода, и при этом делать больше. Узнаем, что такое модули и как «бить» код на них; что такое точка входа. Области видимости. Глобальная область видимости window. Замыкания. Модульность. Повторное использование кода, принцип DRY. Понятие модуля. Точка входа. Модули ECMAScript, синтаксис import и export. DevTools: отладка кода с помощью Sources (исходников). Практика Разделение кода на модули. Соблюдение принципа DRY и выделение повторяющихся частей кода в функции. Перенос функций, повторяющихся в разных файлах, в отдельные модули. Раздел 6 DOM и события Раздел без лайва DOM-дерево. document — корень всего. Структура DOM-дерева. Поиск элементов на странице. Управление атрибутами элементов. Шаблоны и данные. События на странице. Обработчики событий. Практика Тренажёры. Раздел 7 Манипуляции с DOM Попробуем создавать, удалять, перемещать и управлять DOM-элементами. С помощью шаблонов отрисуем данные, созданные ранее. Управление DOM-деревом. Управление атрибутами DOM-элементов. Перемещение элементов в DOM-дереве. Подходы к созданию DOM-элементов. Создание DOM-объектов. Управление разметкой: append, prepend, insertAdjacentHTML, innerHTML, textContent. Шаблонизация. Строковая шаблонизация (шаблонные строки). Специальный тег <template>. Практика Генерация DOM-элементов по шаблону и наполнение их данными. Тренажёры. Раздел 8 Работа с событиями Обработаем взаимодействие с пользователем, чтобы страница реагировала на ввод текста в формы, нажатие на определённые элементы, прокрутку и прочее. Рассмотрим, как сделать это взаимодействие доступным. События. Объект Event, управление событиями: preventDefault и stopPropagation. Фазы событий и делегирование. Клавиатурные события и доступность. Event Loop. Валидация форм. Pristine — библиотека для валидации форм. Валидация с помощью регулярных выражений. DevTools: возможности Elements (инспектора) для работы с DOM и событиями. Практика Работа с доступностью. Валидация форм. Тренажёры. Раздел 9 Внешние API и сторонние библиотеки Рассмотрим, как не «писать свой велосипед», а переиспользовать чужой опыт и код. Познакомимся с понятием программного интерфейса (англ. Application Programming Interface или API), рассмотрим API сторонних JavaScript-библиотек и JavaScript API картографических сервисов. Кратко рассмотрим API, которые предоставляет разработчикам браузер. Понятие API. Картографические сервисы и их JavaScript API. OpenStreetMap. Leaflet. Сторонние библиотеки. Зачем нужны библиотеки. Как подключить в проект. noUiSlider. Обзор API браузера. Практика Использование в проекте API карт. Подключение в проект сторонних библиотек. Раздел 10 Сеть Раздел без лайва Вы самостоятельно рассмотрите протокол HTTP, формат данных JSON. Рассмотрите, как меняется взаимодействие пользователя с сайтом при работе с сетью, что может пойти не так. Протокол HTTP и форматы данных. JSON. Обработка исключений. try...catch. Инструменты для работы с сетевыми запросами. Раздел 11 Асинхронность. Работа с сетью Разберём понятие асинхронности и способы её достижения с помощью промисов (англ. Promise, обещание). Познакомимся с технологиями, которые позволяют делать запросы к серверу из браузера. Рассмотрим, как на практике обработать ошибки при работе с сетью, если что-то пошло не так. Асинхронность. setTimeout и setInterval. Promise. Работа с сетью. fetch для обращения к серверу. Обработка ошибок в запросах. DevTools: работа с сетевыми запросами в Network (сети). Практика Загрузка данных для шаблонов из интернета. Раздел 12 Обратная связь и оптимизация Оптимизируем работу с данными и событиями на нашем сайте. Реализуем понятную и приятную пользователю обратную связь интерфейса. Продвинутая работа с массивами. Сортировка. Фильтрация. Оптимизации производительности. Пропуск кадров — тротлинг (throttle). Устранение дребезга — дебаунс (debounce). File API. URL.createObjectURL(). FileReader.