[HTML academy] Интенсивный онлайн‑курс «Базовый JavaScript» [Новый поток]

Интенсивный онлайн‑курс
«Базовый JavaScript»


HTML Academy — стандарт в обучении фронтендеров. Наша задача — готовить полноценных и востребованных специалистов, готовых работать в веб-индустрии.
​

Спойлер: ПРОЕКТЫ

Проекты для работы на интенсиве
Учебный проект
Учебный проект будет общим для всех, над ним вы будете работать вместе с преподавателем на вебинарах.


Код и Магия
Демо-страница игры-платформера «Код и Магия», на которой можно поиграть в игру, а в специальном окне настроить внешний вид игрового персонажа, купить для него артефакты, которые помогают в игре и посмотреть на похожих персонажей других игроков.

Личные проекты
После каждого вебинара вы будете выполнять задания над одним из двух личных проектов на выбор. Над личными проектами вы будете работать и самостоятельно, и в паре с персональным наставником.


Кекстаграм
Сервис просмотра фотографий. Пользователи могут выкладывать свои фотографии, предварительно редактируя их и накладывая фильтры. Можно просматривать фотографии других пользователей, отмечать их как понравившиеся и комментировать.
Обзор проекта на YouTube.


Кексобукинг
Сервис размещения объявлений об аренде недвижимости в Токио. Пользователи делятся информацией о своём объекте недвижимости, размещают фотографии, указывают адрес, перемещая метку по карте города. Кроме этого, можно посмотреть на объявления, размещённые другими пользователями.
Обзор проекта на YouTube.

Спойлер: Программа

Раздел 1
Знакомство
Рассмотрим схему работы на интенсиве, какие инструменты понадобятся. Начнём разбирать основы JavaScript.

Организационные вопросы.

• Обзор проектов.
• Схема работы на интенсиве.

Введение в программирование.

• Программирование и алгоритмы.
• Данные.
• Линейные алгоритмы.
• Ветвящиеся алгоритмы.

Основы JavaScript.

• Типы данных.
• Операторы.
• Приведение типов.
• Переменные.
• Функции.
• Условные операторы.

Практика

• Создание репозитория, форк, клонирование.
• Создание ветки, коммита, синхронизация репозиториев.
• Создание пулреквеста в Гитхабе.
• Первая программа: функции для управления параметрами онлайн-игры.

Раздел 2
Встроенные API
Разбираемся со сложными типами данных: массивы и объекты, циклические алгоритмы, а также посмотрим на встроенные в JavaScript объекты для работы с окном браузера, открытой страницей, DOM-элементами и графикой.

Отладка кода.

Сложные типы данных.

• Циклические алгоритмы.
• Массивы.
• Объекты.

Встроенные объекты.

• document, элемент для работы c DOM-деревом.
• canvas, элемент для работы c программируемой графикой.

Практика
Экран статистики для онлайн-игры с использованием программируемой графики.

Раздел 3
DOM
Пробуем создавать, удалять, перемещать и управлять DOM-элементами. Опишем данные, которые будем отображать на странице, а затем, с помощью шаблонов отрисуем их.

Управление DOM-деревом.

• DOM-дерево: структура.
• Поиск элементов на странице.
• Управление атрибутами DOM-элементов.
• Перемещение элементов в DOM-дереве.

Подходы к созданию DOM-элементов.

• Управление разметкой: insertAdjacentHTML, innerHTML, textContent.
• Создание DOM-объектов.

Шаблонизация.

• Строковая шаблонизация.
• Специальный тег <template>.

Практика

• Создание структуры данных.
• Генерация DOM-элементов из шаблона, на основе структуры данных.

Раздел 4
Обработка событий
Рассмотрим динамическое взаимодействие с пользователем: как сделать так, чтобы страница начала реагировать на ввод текста в формы, нажатие на определённые элементы, прокрутки и прочее. Заодно попробуем сделать страницу более доступной: как добавить правильную работу с клавиатурой и зачем это нужно.

Асинхронность, Event Loop.

События.

• Обработчики событий.
• Объект Event, управление событиями.
• Фазы событий и делегирование.
• Клавиатурные события и доступность.

Валидация форм.

Практика
Добавление реакции на действия пользователя.

• Обработка пользовательской реакции.
• Работа с доступностью.
• Валидация формы.

Раздел 5
Модули
Обсудим принцип DRY (не повторяйся) и как им пользоваться для того, чтобы писать меньше кода, но при этом делать больше.

Перетаскивание.

• Изменение координат элементов на странице.
• Drag and Drop.

Области видимости функций.

• Области видимости.
• Глобальная область видимости.
• Замыкания.
• Потеря окружения.

Модульность.

• Повторное использование кода, принцип DRY.
• Функции как модули.
• Понятие модуля, виды модулей.
• Инкапсуляция.
• Немедленно выполняющиеся функции (IIFE).

Практика
Избавление от повторяющегося кода.

• Нахождение повторяющихся частей кода и объединение их в функции.
• Перенос функций, повторяющихся в разных файлах в отдельные модули.

Раздел 6
Работа с сетью
Взглянем на протокол HTTP и инструменты, которые позволяют делать запросы из браузера. Рассмотрим, как меняется взаимодействие пользователя с сайтом при начале работы с сетью, что может пойти не так и что с этим делать.

Исключения.

Оператор множественного выбора switch.

Протокол HTTP и форматы данных.

• XML.
• JSON.
• JSONP.
• Объект XMLHttpRequest.
• Обработка ошибок в запросах.

Практика

• Загрузка данных для шаблонов из интернета.
• Добавление реакции на ошибки загрузки.

Раздел 7
Структуры данных
Разберём непопулярную среди фронтенд-разработчиков тему структур данных. Что такое данные, почему у них есть структура, и на доступных примерах посмотрим, как использование структур данных может облегчить разработчику жизнь.

Контекст функций.

• Ключевое слово this.
• Изменение контекста.

Продвинутая работа с массивами.

• Управление массивами: вставка и удаление элементов.
• Выборки из массива: slice и filter.
• Сортировка.
• Итераторы по массивам.
• Свёртка массивов: some, every и reduce.

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

• Оценка эффективности алгоритмов.
• Пропуск кадров — тротлинг (throttle).
• Устранение дребезга — дебаунс (debounce).

Практика

• Добавление поисковых фильтров на страницу.
• Создание функции «устранения дребезга».

Раздел 8
Компонентный подход
Разберём продвинутую работу с объектами, узнаем как можно удобным способом создавать большое количество одинаковых объектов и зачем это нужно.

Типизированные объекты.

• Функции-конструкторы.
• Прототипы.
• Цепочки прототипов, наследование.
• Полиморфизм, переопределение методов.

Рефакторинг.

Практика

• Загрузка изображений перетаскиванием в окно браузера.
• Рефакторинг кода в объектном стиле.

Задания в этом разделе необязательны.

Раздел 9
Узкие места в JavaScript
Посмотрим на особенности JavaScript, которые лучше не забывать учитывать при разработке. Заодно взглянем на дополнительные полезные техники, не разобранные на интенсиве.

• Необязательные точки с запятой.
• Подвешивание (hoisting) переменных и функций.
• Продвинутые техники программирования.
• Регулярные выражения.
• Минификация кода.

Раздел 10
Финал
Подводим итоги интенсива. Что делать дальше.