Курс "JavaScript/​Интерфейсы" для новичков

Собрание

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

Основы языка, инструменты для разработки и отладки

К первому занятию вы посмотрели вводный видеокурс и уже знаете самые основы JavaScript. Вместе проходим по важным особенностям JavaScript, обращаем внимание на нюансы и особые возможности языка, убеждаемся в том, что понимаем их.

Изучаем инструменты для разработки и отладки JavaScript, которыми будем пользоваться далее.

Работаем с AI-ассистентом для понимания и написания кода.

Объекты

Объекты являются основной структурой данных в JavaScript, поэтому изучаем их подробно. AI-ассистент: изучаем "вайб-кодинг" и "анти-вайб-кодинг", что можно делать, а что – лучше нет.

• Основные действия с объектами: запись и чтение свойств, перебор.
• Особенности объектов в JavaScript: передача по ссылке, копирование объектов.
• Методы объектов, использование this.
• Деструктуризация объектов и массивов.

Массивы и Функции

Способы задания функций в JavaScript: Function Expression, Function Declaration, функции-стрелки, их отличия.

Замыкания, функции-колбэки и методы массивов, которые их используют, сортировка, поиск.

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

Используем AI-ассистента для ревью кода и другой помощи.

DOM-модель

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

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

• Создание, вставка, изменение элементов на странице.
• Атрибуты, свойства, управление классами.
• Простые задачи по генерации компонентов интерфейса.
• DOM и инструменты разработчика в браузере.
• Динамическая генерация элементов интерфейса.

AI-ассистент - используем для рефакторинга и улучшения кода.

Обработчики событий

Изучаем взаимодействие с посетителем при помощи событий:

Отладка ошибок, используя Chrome DevTools и AI.

• Установка обработчиков событий.
• Свойства событий.
• Погружение и всплытие.
• Приём проектирования "делегирование" для работы с большим количеством элементов, упрощения сложных интерфейсов.
• Приём проектирования "поведение" для добавления функционала при помощи HTML-атрибутов.
• Практика: меню, карусель изображений.

Компонентная архитектура, ООП

Современный подход к разработке приложений: создание интерфейсных компонентов, использование своих событий (Custom Events) для связи между ними. Архитектура веб-приложения.

Классы, ООП в JavaScript.

Модули в JavaScript.

На дом - компоненты для проекта: карточка товара, карусель с картинками.

Более сложные компоненты

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

• Drag'n'drop при помощи событий, компонент "слайдер" для проекта.
• События pointer events (mouse events/touch events).
• Обработка пользовательского ввода, события клавиатуры.
• Компоненты "модальное окно", "ленточное меню".
• Автодополнение при вводе.
• Оптимизация: throttle/debounce

Взаимодействие с сервером

Начинаем это занятие с обычных HTTP-форм, затем переходим к динамическим сетевым запросам.

• Создание и отправка форм, динамические формы, их валидация.
• DOM-свойства и методы для форм. Чтение данных из формы.
• Метод fetch, основы Promise для сетевых запросов.
• Обмен данными с сервером в формате JSON.
• Работа с данными: регулярные выражения.

Promise в деталях, более сложный асинхронный код

Для организации последовательных сетевых запросов или других асинхронных вызовов используются специальные объекты Promise. Изучаем, как с ними работать.

• Событийный цикл браузера.
• Объектов Promise в деталях, их методы, цепочки Promise.
• Промисификация функций.
• Использование async/await.

Основы TypeScript и сборка проекта.

На этом занятии мы научимся собирать проекты из модулей и компонетов, а так же изучим основы TypeScript.

• Сборка проекта при помощи Webpack.
• Подключение TypeScript и базовая настройка проекта.
• Основы типизации: типы, интерфейсы и проверка кода на этапе разработки.

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

Ответы на дополнительные вопросы.