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