[javascript.ru] Курс JavaScript/DOM/интерфейсы [Повтор]

Курс JavaScript/DOM/интерфейсы
​

Ведущий: Михаил Гринько

Курс состоит из трёх частей:

1. Первая часть позволяет хорошо разобраться в языке JavaScript, получить знания и навыки написания JavaScript-кода, соответствующего современным стандартам.
2. Вторая часть позволяет научиться работать со страницей и посетителем, создавать меню, слайдеры, Drag’n’Drop и прочие интерфейсные компоненты.
3. Третья часть посвящена более сложным интерфейсам. На ней мы изучаем, как построить архитектуру, взаимодействие между компонентами, как организовать проект и код, систему сборки с использованием ES6.

Большое внимание на этом курсе уделяется стилю и качеству кода, глубокому пониманию языка. Именно это отличает хорошего разработчика от выучившего пару десятков функций новичка.

Время обучения: 2 месяца, включая одну неделю каникул с самостоятельно выполняемым заданием и организационное собрание. Также участники получают вводный видеокурс за неделю до начала занятий.

Предварительные требования: знание основ HTML/CSS.

Спойлер: Первая часть курса

1. Основной JavaScript.
Здесь мы изучим сам язык, его конструкции и особенности, которые позволяют "разговаривать" на JavaScript коротко, понятно, а главное - без ошибок.

• IDE, настройка, полезные приёмы использования, средства для автопроверки кода.
• Основные структуры данных, работа с числами, строками, датами, массивами, объектами.
• Инструменты разработки, отладка в браузерах.
• Автоматизированное тестирование, инструменты и их применение.
• Современный стандарт ES-2015 (ES6), его кросс-браузерное использование сейчас.

2. Более глубокое понимание языка.
Чтобы писать хороший код, а также грамотно пользоваться современными фреймворками, мы изучим JavaScript лучше, включая тонкости и продвинутое применение языковых конструкций.

• Замыкания и их грамотное применение.
• Внутреннее устройство движка JavaScript.
• Контекст this в деталях.
• Форвардинг, одалживание и делегирование функций.
• Прототипы, классы, прототипное и функциональное ООП, детали использования.

По окончанию первой части курса вы свободно пользуетесь языком JavaScript, с учётом его особенностей и новых возможностей стандарта ES-2015. Мы улучшим эти навыки в последующих частях курса.

Спойлер: Вторая часть курса

1. Документ, генерация интерфейса.
Здесь мы учимся работать с документом, решать всевозможные задачи в браузере.

• Внутреннее устройство браузера, оптимальная организация страницы со скриптами.
• Дерево DOM, особенности разработки в современных браузерах с отмирающей, но иногда нужной поддержкой старых.
• Динамическая генерация интерфейса - методы DOM, их грамотное использование.

2. События, взаимодействие с посетителем.

• Основы и тонкости работы с различными событиями для решения основных интерфейсных задач.
• Drag'n'Drop, по окну и внутри элемента
• Паттерн "делегирование", оптимизация производительности и архитектуры, чтобы интерфейсы не тормозили.
• Объектно-ориентированная разработка, компонентная архитектура с использованием ООП, событий и DOM.

3. AJAX

• Общение с сервером при помощи XMLHttpRequest.
• Использование Promise для асинхронных цепочек вызовов.

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

Спойлер: Третья часть курса

1. Архитектура и сборка кода.

• Node.JS как средство запуска полезных утилит.
• Организация скриптов, стилей и других компонентов проекта на диске.
• Современные технологии Frontend-сборки.
• Шаблонизация, системы организации шаблонов и детали их работы.
• Архитектура сложных интерфейсов.

2. AJAX

• XMLHttpRequest и fetch, их использование.
• Promises ("промисы").

3. Куда дальше?

• Обзор фреймворков (AngularJS, React.js), куда двигаться дальше.

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

Результат обучения

1. Вы хорошо знаете JavaScript, свободно разрабатываете и отлаживаете программы на этом языке.
2. Вы умеете организовать JavaScript-проект, шаблоны и стили в файлах на диске в удобную структуру, собирать и оптимально подключать их к странице.
3. Ваши интерфейсы работают стабильно, без глюков, их можно удобно дорабатывать и развивать.
4. Мы идём от основ и до довольно-таки сложных штук. Успешное прохождение обучения гарантировано в том случае, если вы будете регулярно заниматься и делать домашнее задание.