Интенсивный онлайн‑курс
Профессиональный JavaScript,
уровень 1

13 ноября — 26 декабря 2018

Интенсивный онлайн‑курс «Профессиональный JavaScript, уровень 1»

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

Консультация по телефону
8 800 555-86-28

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

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

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

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

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

Живые лекции

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

Записи лекций

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

Практика

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

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

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

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

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

Что даёт курс

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

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

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

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

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

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

Код и Магия

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

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

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

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

Кекстаграм

Сервис просмотра фотографий. Пользователи могут выкладывать свои фотографии, предварительно редактируя их и накладывая фильтры. Можно просматривать фотографии других пользователей, отмечать их как понравившиеся и комментировать.
Обзор проекта на 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

Финал

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

Сертификат

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

Сертификат интенсива «Профессиональный Javascript, уровень 1»

Об Академии

6лет на рынке обучения
64интенсива проведено
10 756студентов закончили курсы

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

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

13 ноября — 26 декабря 2018

Записаться и оплатить
Курс «JavaScript, уровень 1»

21 500 до 20 октября21 000

Запись на интенсив закрыта.