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

8 августа — 20 сентября 2017

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

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

Как проходит онлайн‑курс

Начальный уровень: новичок

Курс рассчитан на людей без навыков программирования. Для прохождения понадобятся навыки вёрстки, которые можно получить пройдя интерактивные курсы или интенсив «Базовый HTML и CSS».

Даты интенсива

Интенсив длится шесть недель, c 8 августа по 20 сентября. Каждую неделю проходят два живых вебинара, после которых надо выполнять практические задания и работать с наставником.
Программа интенсива

Живые вебинары

Вебинары проходят по вторникам и пятницам с 19:00 до 21:00 по московскому времени. Преподаватель рассказывает лекцию, а студенты задают вопросы.

Записи вебинаров

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

Практика

После вебинаров нужно выполнять практические задания — проходить интерактивные курсы и программировать части учебных проектов. В этом вам будет помогать ваш наставник.

Личный наставник

Персональный наставник помогает выполнять задания и проверяет результаты работы. Это ваш личный преподаватель, который помогает вам весь курс и делится секретами мастерства. Расписание работы с наставником вы определяете сами.

Защита проекта

Интенсив завершается защитой проекта, где ваш проект проверяется в соответствии с профессиональными критериями качества.

Что даёт курс

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

Информация о средних зарплатах получена на основе исследования SuperJob.

Проекты для работы на интенсиве

Учебный проект

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

Учебный проект «Код и Магия»

Код и Магия

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

Личные проекты

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

Личный проект «Кекстаграм»

Кекстаграм

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

Личный проект «Кексобукинг»

Кексобукинг

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

Программа

Раздел 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
Финал

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

Сертификат

После курса вы получите сертификат.

Сертификат курса «Базовый JavaScript»

Об Академии

5лет на рынке обучения
41интенсив проведено
5 694студента закончили курсы

Главная цель интенсивных курсов — готовить профессионалов для IT-индустрии.

Поэтому обучение на интенсивах максимально приближено к рабочему процессу в компаниях: разработка проектов ведётся в Гитхабе, а роль старшего разработчика берёт на себя наставник. Во время курса ученики создают учебный проект и защищают его по критериям качества, которые были составлены совместно с сообществом разработчиков и считаются актуальными на рынке.

20 500

К сожалению, места на курс, который стартует 8 августа, закончились. Запись на интенсив закрыта. Через несколько недель после старта курса откроется запись на следующий поток, который пройдёт c 14 ноября по 27 декабря 2017.