[HTML ACADEMY] Профессиональный онлайн‑курс JavaScript, уровень 1 [17 января — 23 марта 2020]
Как проходит курс. Организационные вопросы.
Организационные вопросы.
Разбираемся со сложными типами данных: массивы и объекты, циклические алгоритмы, а также посмотрим на встроенные в JavaScript объекты для работы с окном браузера, открытой страницей, DOM-элементами и графикой.
Отладка кода.
Сложные типы данных.
Управление DOM-деревом.
Асинхронность, Event Loop.
События.
Третья неделя
Раздел 5
Модули
Обсудим принцип DRY (не повторяйся) и как им пользоваться для того, чтобы писать меньше кода, но при этом делать больше.Перетаскивание.
Раздел 6
Работа с сетью
Взглянем на протокол HTTP и инструменты, которые позволяют делать запросы из браузера. Рассмотрим, как меняется взаимодействие пользователя с сайтом при начале работы с сетью, что может пойти не так и что с этим делать.Исключения.
Оператор множественного выбора switch.
Протокол HTTP и форматы данных.
Четвёртая неделя
Раздел 7
Структуры данных
Разберём непопулярную среди фронтенд-разработчиков тему структур данных. Что такое данные, почему у них есть структура, и на доступных примерах посмотрим, как использование структур данных может облегчить разработчику жизнь.
Контекст функций.
Страница курса:
Скрытое содержимое.
Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Программа курсаНа этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Первая неделя
Раздел 1
Знакомство
Рассмотрим схему работы на интенсиве, какие инструменты понадобятся. Начнём разбирать основы JavaScript.
Раздел 1
Знакомство
Рассмотрим схему работы на интенсиве, какие инструменты понадобятся. Начнём разбирать основы JavaScript.
Как проходит курс. Организационные вопросы.
Организационные вопросы.
- Обзор проектов.
- Схема работы на интенсиве.
- Программирование и алгоритмы.
- Данные.
- Линейные алгоритмы.
- Ветвящиеся алгоритмы.
- Типы данных.
- Операторы.
- Приведение типов.
- Переменные.
- Функции.
- Условные операторы.
Раздел 2
Встроенные API
Встроенные API
Разбираемся со сложными типами данных: массивы и объекты, циклические алгоритмы, а также посмотрим на встроенные в JavaScript объекты для работы с окном браузера, открытой страницей, DOM-элементами и графикой.
Отладка кода.
Сложные типы данных.
- Циклические алгоритмы.
- Массивы.
- Объекты.
- document, элемент для работы c DOM-деревом.
- canvas, элемент для работы c программируемой графикой.
Вторая неделя
Раздел 3
DOM
Пробуем создавать, удалять, перемещать и управлять DOM-элементами. Опишем данные, которые будем отображать на странице, а затем, с помощью шаблонов отрисуем их.Раздел 3
DOM
Управление DOM-деревом.
- DOM-дерево: структура.
- Поиск элементов на странице.
- Управление атрибутами DOM-элементов.
- Перемещение элементов в DOM-дереве.
- Управление разметкой: insertAdjacentHTML, innerHTML, textContent.
- Создание DOM-объектов.
- Строковая шаблонизация.
- Специальный тег <template>.
Раздел 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
Компонентный подход
Разберём продвинутую работу с объектами, узнаем как можно удобным способом создавать большое количество одинаковых объектов и зачем это нужно.
Типизированные объекты.Раздел 8
Компонентный подход
Разберём продвинутую работу с объектами, узнаем как можно удобным способом создавать большое количество одинаковых объектов и зачем это нужно.
- Функции-конструкторы.
- Прототипы.
- Цепочки прототипов, наследование.
- Полиморфизм, переопределение методов.
Раздел 9
Узкие места в JavaScript
Посмотрим на особенности JavaScript, которые лучше не забывать учитывать при разработке. Заодно взглянем на дополнительные полезные техники, не разобранные на интенсиве.
Узкие места в JavaScript
Посмотрим на особенности JavaScript, которые лучше не забывать учитывать при разработке. Заодно взглянем на дополнительные полезные техники, не разобранные на интенсиве.
- Необязательные точки с запятой.
- Подвешивание (hoisting) переменных и функций.
- Продвинутые техники программирования.
- Регулярные выражения.
- Минификация кода.
Учебный проект
Учебный проект будет общим для всех, над ним вы будете работать вместе с преподавателем на живых лекциях.
«Код и Магия»
Демо-страница игры-платформера «Код и Магия», на которой можно поиграть в игру, а в специальном окне настроить внешний вид игрового персонажа, купить для него артефакты, которые помогают в игре и посмотреть на похожих персонажей других игроков.
Личные проекты
После каждой лекции вы будете выполнять задания над одним из двух личных проектов на выбор. Над ними вы будете работать и самостоятельно, и в паре с наставником.
Сервис просмотра фотографий. Пользователи могут выкладывать свои фотографии, предварительно редактируя их и накладывая фильтры. Можно просматривать фотографии других пользователей, отмечать их как понравившиеся и комментировать..
Сервис размещения объявлений об аренде недвижимости в Токио. Пользователи делятся информацией о своём объекте недвижимости, размещают фотографии, указывают адрес, перемещая метку по карте города. Кроме этого, можно посмотреть на объявления, размещённые другими пользователями.
Учебный проект будет общим для всех, над ним вы будете работать вместе с преподавателем на живых лекциях.
«Код и Магия»
Демо-страница игры-платформера «Код и Магия», на которой можно поиграть в игру, а в специальном окне настроить внешний вид игрового персонажа, купить для него артефакты, которые помогают в игре и посмотреть на похожих персонажей других игроков.
Личные проекты
После каждой лекции вы будете выполнять задания над одним из двух личных проектов на выбор. Над ними вы будете работать и самостоятельно, и в паре с наставником.
Сервис просмотра фотографий. Пользователи могут выкладывать свои фотографии, предварительно редактируя их и накладывая фильтры. Можно просматривать фотографии других пользователей, отмечать их как понравившиеся и комментировать..
Сервис размещения объявлений об аренде недвижимости в Токио. Пользователи делятся информацией о своём объекте недвижимости, размещают фотографии, указывают адрес, перемещая метку по карте города. Кроме этого, можно посмотреть на объявления, размещённые другими пользователями.
Страница курса:
Скрытое содержимое.