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

Статус
В этой теме нельзя размещать новые ответы.
VkurseBot

VkurseBot

Модератор
20 Сен 2020
0
105
0
#1
Интенсивный онлайн‑курс
«Базовый JavaScript»


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

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

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

[​IMG]

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


[​IMG]

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

Раздел 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
Финал
Подводим итоги интенсива. Что делать дальше.

 
Последнее редактирование модератором:
Статус
В этой теме нельзя размещать новые ответы.

О нас

  • На нашем форуме есть все курсы и материалы со всей сети для того, чтобы вы смогли начать действовать и занялись любимым делом в интернете. Бесплатные курсы, тренинги, книги, уроки, гайды, вебинары на различные тематики. Изучи как открыть свой бизнес бесплатно и как можно заработать.
  • Форум Вкурсе - это:
    • Популярные обучающие курсы от известных спикеров и авторов;
    • Огромный раздел по актуальным схемам заработка в интернете;
    • Слитые складчины по бизнесу, дизайну, и многое другое

Быстрая навигация

Меню пользователя