[HTML Academy] Базовый JavaScript №1

[Moderator]

Программа интенсива Раздел 1: введение Теория: Инструменты работы с JavaScript: браузер, консоль, IDE. Введение в работу с системой контроля версий. Рабочий процесс на интенсиве. Введение в JavaScript. Области применения JavaScript. Функции, типы данных, переменные. Условные операторы, циклы. Диалоговые окна. Интерпретируемость языка, очередность выполнения команд. Исключения. Консоль. Практика: Клонирование репозитория. Выбор IDE. Настройка рабочего окружения. Раздел 2: знакомство с DOM Теория: Введение в работу с DOM. Формы. События. Модель DOM Level 0. Cookies. Javascript. Контекст функции. Практика: Валидация данных, введенных в форму. Сохранение последних валидных данных в форме в cookies. Продолжение описания Раздел 3: погружение в DOM Теория: Продвинутая работа с DOM: создание, удаление элементов, DocumentFragment. Введение в шаблонизацию. Работа с изображениями. Базовые структуры данных: массивы и объекты. Библиотеки jQuery, lodash/underscore, mout. Интервалы и таймауты. Асинхронность JavaScript, очередность выполнения кода, потеря окружения. Практика: Создание DOM-дерева на основе заданной структуры данных. Добавление обработчиков ошибок и таймеров на загрузку изображений. Раздел 4: передача и обработка данных Теория: Введение в HTTP: методы, коды состояния, заголовки. Введение в AJAX. Объект XMLHttpRequest. GlobalFetch. jQuery.ajax. Cross-Origin Resource Sharing (CORS). Работа с коллекциями. Хранение данных в localStorage. Практика: Загрузка структуры данных с прошлой недели с сервера по AJAX. Фильтрация списка. Сохранение состояния фильтров в LocalStorage. Раздел 5: события Теория: Модель событий DOM Level 2. Обработчики событий. Создание, удаление обработчиков. Объект Event. Фазы события. Контекст функции. Задание контекста. Замыкания. Делегирование событий. Обработка событий в jQuery. Практика: Добавление фотогалереи на учебный проект, начало. Раздел 6: введение в ООП Теория: Введение в объектно-ориентированное программирование (ООП). Особенности ООП в JavaScript: Прототипы. Конструкторы. Цепочка прототипов. Наследование в JavaScript. Практика: Продолжение работы с фотогалереей. Раздел 7: медиа и графика Теория: HTMLMediaElement на примере audio и video. Графика на SVG. Введение в графику на Canvas. Задание: Завершение фотогалереи, добавление видеопроигрывателя в качестве одного из слайдов. Начало работы над интерактивным компонентом учебного проекта. Раздел 8: работа с состояниями приложения Теория: Работа с адресной строкой. window.location. document.location. Введение в работу с историей браузера. pushState/popState. Введение в MVC. Библиотека backbone.js Практика: Cохранение состояния приложения в адресной строке браузера и восстановление после перезагрузки страницы. Рефакторинг кода, согласно паттерну MVC. Раздел 9: лучшие практики и оптимизация Теория: Лучшие практики JavaScript. Модульность. Паттерны проектирования. Введение в работу с памятью, профилирование. Задание: Завершение работы с интерактивным компонентом. Доведение проекта до финального состояния.