JavaScript. Профессиональная разработка веб-интерфейсов

Профиль аудитории:

• Любые специалисты с базовыми знаниями в веб-технологиях.

Предварительные требования:

• Базовые знания HTML, CSS и JavaScript.

По окончании курса слушатели смогут:

• Профессионально разрабатывать интерактивные компоненты веб-страниц на чистом JavaScript по техническому заданию.

Раздел 1. Знакомство c JavaScript

• Рассмотрим схему работы на курсе, какие инструменты понадобятся, и как их настроить. Разберём, что представляет собой язык JavaScript, причём здесь спецификация ECMAScript и браузер.
• Как проходит курс. Организационные вопросы.
• Обзор проектов.
• Критерии качества.
• Спецификация ECMAScript.
• Базовый синтаксис: круглые и фигурные скобки, операторы, зарезервированные слова, комментарии.
• Основные строительные блоки — переменные и функции.
• Примитивы и сложные типы данных.
• Редакторы кода.
• Линтеры.
• Сервер для разработки.

Раздел 2. Основные возможности JavaScript

• Начнём изучать основные конструкции JavaScript, особенно пристально — функции. Разберём нюансы объявления переменных. Познакомимся с инструментами разработчика.
• Переменные.
• Области видимости.
• Условные операторы.
• Тернарный оператор.
• Оператор множественного выбора
• Циклы.
• Приведение типов.
• Функции.
• Стрелочные функции.
• Параметры функций по умолчанию.
• rest-параметры.
• Подвешивание (hoisting) переменных и функций.
• Знакомство с DevTools (инструментами разработчика).

Раздел 3. Объекты и массивы

• Вы познакомитесь со сложными типами данных: массивами и объектами. Научитесь создавать их и управлять ими.
• Сложные типы данных.
• Массивы.
• Основные методы массивов.
• Объекты.
• Колбэки (функции обратного вызова).

Раздел 4. Встроенные объекты и функции

• Рассмотрим существующие в самом языке JavaScript объекты и функции. Затронем контекст выполнения this. Запустим и отладим код в консоли инструментов разработчика.
• Деструктуризация.
• spread-синтаксис.
• Встроенные объекты и их методы.
• String.
• Number.
• Boolean.
• Date.
• Math.
• Оператор new.
• Встроенные в JavaScript функции.
• Контекст функций.
• Ключевое слово
• Потеря окружения.
• Использование Console (консоли).

Раздел 5. Организация кода

• Разберём понятие областей видимости. Обсудим принцип DRY (не повторяйся) и как им пользоваться для того, чтобы писать меньше кода, и при этом делать больше. Узнаем, что такое модули и как «бить» код на них; что такое точка входа.
• Области видимости.
• Глобальная область видимости window.
• Замыкания.
• Модульность.
• Повторное использование кода, принцип
• Понятие модуля.
• Точка входа.
• Модули ECMAScript, синтаксис import и export.
• DevTools: отладка кода с помощью Sources (исходников).

Раздел 6. DOM и события

• Вы познакомитесь с объектной моделью документа (англ. Document Object Model или DOM). Рассмотрите, как описывать реакции на действия пользователя: ввод текста, нажатие на определённые элементы, прокрутку и прочее.
• DOM-дерево.
• document — корень всего.
• Структура DOM-дерева.
• Поиск элементов на странице.
• Управление атрибутами элементов.
• Шаблоны и данные.
• События на странице.
• Обработчики событий.

Раздел 7. Манипуляции с DOM

• Попробуем создавать, удалять, перемещать и управлять DOM-элементами. С помощью шаблонов отрисуем данные, созданные ранее.
• Управление DOM-деревом.
• Управление атрибутами DOM-элементов.
• Перемещение элементов в DOM-дереве.
• Подходы к созданию DOM-элементов.
• Создание DOM-объектов.
• Управление разметкой: append, prepend, insertAdjacentHTML, innerHTML, textContent.
• Шаблонизация.
• Строковая шаблонизация (шаблонные строки).
• Специальный тег <template>.

Раздел 8. Работа с событиями

• Обработаем взаимодействие с пользователем, чтобы страница реагировала на ввод текста в формы, нажатие на определённые элементы, прокрутку и прочее. Рассмотрим, как сделать это взаимодействие доступным.
• События.
• Объект Event, управление событиями: preventDefault и
• Фазы событий и делегирование.
• Клавиатурные события и доступность.
• Event Loop.
• Валидация форм.
• Pristine — библиотека для валидации форм.
• Валидация с помощью регулярных выражений.
• DevTools: возможности Elements (инспектора) для работы с DOM и событиями.

Раздел 9. Внешние API и сторонние библиотеки

• Рассмотрим, как не «писать свой велосипед», а переиспользовать чужой опыт и код. Познакомимся с понятием программного интерфейса (англ. Application Programming Interface или API), рассмотрим API сторонних JavaScript-библиотек и JavaScript API картографических сервисов. Кратко рассмотрим API, которые предоставляет разработчикам браузер.
• Понятие API.
• Картографические сервисы и их JavaScript API.
• OpenStreetMap.
• Leaflet.
• Сторонние библиотеки.
• Зачем нужны библиотеки.
• Как подключить в проект.
• noUiSlider.
• Обзор API браузера.

Раздел 10. Сеть

• Вы рассмотрите протокол HTTP, формат данных Рассмотрите, как меняется взаимодействие пользователя с сайтом при работе с сетью, что может пойти не так.
• Протокол HTTP и форматы данных.
• JSON.
• Обработка исключений.
• try..catch.
• Инструменты для работы с сетевыми запросами.

Раздел 11. Асинхронность. Работа с сетью

• Разберём понятие асинхронности и способы её достижения с помощью промисов (англ. Promise, обещание). Познакомимся с технологиями, которые позволяют делать запросы к серверу из браузера. Рассмотрим, как на практике обработать ошибки при работе с сетью, если что-то пошло не так.
• Асинхронность.
• setTimeout и setInterval.
• Promise.
• Работа с сетью.
• fetch для обращения к серверу.
• Обработка ошибок в запросах.
• DevTools: работа с сетевыми запросами в Network (сети).

Раздел 12. Обратная связь и оптимизация

• Оптимизируем работу с данными и событиями на нашем сайте. Реализуем понятную и приятную пользователю обратную связь интерфейса.
• Продвинутая работа с массивами.
• Сортировка.
• Фильтрация.
• Оптимизации производительности.
• Пропуск кадров — тротлинг (throttle).
• Устранение дребезга — дебаунс (debounce).
• File API.
• createObjectURL().
• FileReader.