Курс «JavaScript-разработка: создаем интерактивные веб-страницы»

1.1 Контроль версий кода на примере системы Git

Разберемся, зачем нужны системы контроля версий и как работает Git. Вы установите и настроите окружение, научитесь создавать репозитории и фиксировать изменения. На практике изучите работу с историей коммитов, сравнением версий, ветвлением, а также подключением внешних репозиториев через сервисы вроде GitHub и BitBucket.

1.2 Организация рабочего процесса

Отработаем модели совместной разработки: работу с общим репозиторием, изолированное создание функциональности в отдельных ветках. Поговорим о ветках для разработки, подготовки релиза и быстрого исправления критических багов. Коснемся практики работы с форками проектов.

1.3 Знакомство с особенностями HTML5

Погрузимся в современный HTML: изучим элементы, важность правильного DOCTYPE. Узнаем, какие теги и атрибуты устарели. Разберем глобальные атрибуты, data-атрибуты и правила указания их значений. Освоим структуру документа, обязательные теги и метаданные.

2. Основы JavaScript

2.1 Синтаксис JavaScript

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

2.2 Массивы

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

2.3 Функции

Глубоко изучим функции: от объявления и передачи параметров до получения результата. Разберем понятие локальных переменных, механизм рекурсии и стека вызовов. Ключевое внимание уделим замыканиям и областям видимости переменных.

3. Объекты JavaScript

3.1 Функциональные выражения

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

3.2 Объекты

Освоим методы объектов, ключевое слово this и оператор new. Поймем, как работают геттеры и сеттеры, а также методы call, apply и bind для управления контекстом выполнения.

3.3 Конструктор, прототип и наследование

Введем в основы объектно-ориентированного программирования на JavaScript. Сравним функциональный стиль создания объектов с использованием прототипов. Поймем, как устроено прототипное наследование.

4. Расширенные возможности HTML и JavaScript

4.1 Объектная модель браузера (BOM)

Исследуем структуру BOM и глобальный объект window. Познакомимся с такими объектами, как navigator, location, history. Поработаем с диалоговыми окнами (alert, confirm, prompt) и консолью разработчика. Коснемся базового взаимодействия с документом.

4.2 Объектная модель документа (DOM)

Научимся представлять HTML-документ в виде дерева DOM. Освоим навигацию по элементам, их поиск и манипуляции. Разберем разницу между атрибутами и свойствами узлов, научимся динамически изменять структуру страницы.

4.3 События

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

4.4 Обзор событий

Рассмотрим основные типы событий: от кликов мыши и нажатий клавиш до прокрутки и изменения размеров окна. Отдельно разберем события загрузки документа, изображений, скриптов, а также события форм, элементов управления и перетаскивания.

4.5 Технология AJAX

Поймем, что такое AJAX и как он меняет взаимодействие с сервером. Научимся отправлять асинхронные запросы с помощью объекта XMLHttpRequest, работать с форматами JSON и XML. Затронем тему кросс-доменных запросов и техники вроде JSONP.

5. Расширенные возможности CSS

5.1 Анимация с помощью CSS

Создадим плавные и производительные анимации без JavaScript. Освоим CSS transitions для простых переходов и CSS animations для сложных последовательностей. Научимся отслеживать завершение анимаций через событие transitionend.

5.2 Градиенты и трансформации

Научимся создавать сложные фоновые градиенты - линейные и радиальные, с настройкой углов, цветовых остановок и формы. Освоим CSS-трансформации: перемещение, масштабирование, поворот элементов, в том числе в 3D-пространстве.

5.3 Адаптивная верстка

Изучим принципы создания сайтов для мобильных устройств. Разберем разные подходы к адаптивности, их сильные и слабые стороны. На практике применим CSS Media Queries, научившись настраивать стили в зависимости от типа устройства, ширины экрана, ориентации и других параметров.

5.4 Программируемый язык стилей SASS

Познакомимся с CSS-препроцессорами на примере SASS. Установим и настроим окружение. Научимся использовать переменные, расширять стили через наследование, создавать миксины с параметрами, организовывать код с помощью циклов и импорта.

5.5 Автоматизация задач с помощью менеджера зависимостей NPM

Настроим автоматизацию рутинных процессов. Установим Node.js и NPM, создадим новый проект, опишем его зависимости. Научимся вызывать, настраивать и создавать собственные задачи для сборки проекта, минификации кода и других операций.

6. Обзор библиотек и фреймворков

6.1 Библиотека jQuery

Изучим самую популярную JavaScript-библиотеку, упрощающую манипуляции с DOM, обработку событий и AJAX-запросы. Поймем, когда её использование оправдано в современной разработке, и напишем несколько типичных скриптов.

6.2 Фреймворк Bootstrap

Освоим самый известный CSS-фреймворк для быстрой и адаптивной верстки. На практике поработаем с его сеткой, готовыми компонентами (кнопки, формы, навигация) и утилитами. Научимся настраивать стили под свои нужды.

6.3 Фреймворк AngularJS

Познакомимся с концепцией фреймворков на примере AngularJS. Разберем архитектуру приложения, контроллеры, шаблоны и фильтры. Главный фокус - на двухстороннем связывании данных, работе с формами, обработке событий, а также внедрении зависимостей и использовании сервисов.