JavaScript: интерактивная веб-разработка | ТЕРАКОР

Ежедневно 10:00–19:00

+7 (960) 352-38-05

info@terakor.ru Записаться на консультацию

Для кого курс

Начинающие веб-разработчики и верстальщики, переходящие к интерактивному фронтенду

Нужны базовые знания HTML/CSS. На выходе — навыки создания интерактивных веб-приложений на JavaScript: работа с DOM, событиями, асинхронным кодом и современным инструментарием. Все модули ведут к сквозному проекту — SmartCatalog: каталог товаров с фильтрами, корзиной, модальными окнами, localStorage и загрузкой данных через Fetch API.

Входной уровень: HTML и CSS: современная вёрстка сайтов или эквивалент. Следующий шаг — React и Redux: архитектура SPA.

Стек курса

JavaScript ES2021+ DOM / BOM Fetch API localStorage ES-модули npm Vite Jest

Чему вы научитесь

Компетенции frontend-разработчика — от основ языка до готового интерактивного приложения SmartCatalog

JavaScript с нуля

Типы, функции, ООП, замыкания и современный синтаксис ES2021+

DOM и события

Манипуляция страницей, формы, делегирование и UX-паттерны

Асинхронность

Promise, async/await, Fetch API и работа с внешними данными

SmartCatalog

Каталог, корзина, фильтры, модалки и localStorage — готовый проект

Состав программы

Что входит в программу

📚 Объём программы: 128 академических часов
• 64 академ/часов — занятия с преподавателем (лекции + практика)
• 64 академ/часов — самостоятельная работа, домашние задания, проекты

объём 128 ак. ч. (64 с преподавателем) · 14 модулей · 2 фазы · финал — SmartCatalog

Фаза I — Язык · 24 ак. ч.

Модуль 1

Типы и операции

4 ч

Модуль 2

Ветвления и циклы

4 ч

Модуль 3

Функции и scope

4 ч

Модуль 4

Объекты и коллекции

4 ч

Модуль 5

Классы и ООП

4 ч

Модуль 6

RegExp и ES2021+

4 ч

Фаза II — Браузер и production · 40 ак. ч.

Модуль 7

Array methods

4 ч

Модуль 8

BOM/DOM

4 ч

Модуль 9

DOM и формы

5 ч

Модуль 10

События и UX

5 ч

Модуль 11

Промеж. проект

4 ч

Модуль 12

async/Fetch

6 ч

Модуль 13

npm · Vite · Jest

6 ч

Модуль 14

SmartCatalog

6 ч

Фаза I — Язык

  • JavaScript в браузере и Node.js: среда выполнения, консоль и DevTools
  • let, const, var: область видимости, hoisting и strict mode
  • Примитивные и ссылочные типы, приведение типов и операторы
  • Шаблонные строки, выражения и базовая работа с числами и строками
  • Практика: модель данных SmartCatalog — товар, цена, категория в консоли

  • Условные конструкции if/else, switch и тернарный оператор
  • Циклы for, while, do…while, for…of и for…in
  • break, continue и управление потоком в алгоритмах
  • Фильтрация списка товаров по категории и диапазону цен
  • Практика: расчёт скидок и итоговой суммы корзины SmartCatalog

  • Function declaration, expression, arrow functions и параметры по умолчанию
  • Lexical scope, замыкания и практические паттерны их применения
  • IIFE, rest/spread в функциях и возврат значений
  • Утилиты форматирования цены и валюты для SmartCatalog
  • Практика: фабрика функций фильтрации с замыканием на параметры

  • Объектные литералы, свойства, методы и computed keys
  • Деструктуризация, spread/rest и копирование объектов
  • Map, Set, WeakMap и выбор структуры данных для задачи
  • Модель Product и хранение корзины в Map по id товара
  • Практика: каталог товаров как массив объектов с категориями

  • Цепочка прототипов, Object.create и наследование в JS
  • Синтаксис class, constructor, getters/setters и static-методы
  • extends, super и инкапсуляция в объектно-ориентированном коде
  • Классы Product, CartItem и ShoppingCart для SmartCatalog
  • Практика: методы добавления, удаления и подсчёта суммы корзины

  • Регулярные выражения: литералы, флаги, группы и типовые паттерны
  • JSON.parse / JSON.stringify и сериализация данных каталога
  • Optional chaining, nullish coalescing, logical assignment (ES2021+)
  • Загрузка каталога SmartCatalog из JSON-файла
  • Практика: поиск товаров по RegExp и валидация полей формы

Фаза II — Браузер и production

  • Функции высшего порядка: map, filter, reduce, find, some, every
  • sort, flat, flatMap и цепочки преобразований данных
  • Сортировка и фильтрация каталога SmartCatalog по цене и рейтингу
  • Агрегация: подсчёт товаров по категориям через reduce
  • Практика: пайплайн обработки данных перед отрисовкой

  • DOM-дерево, узлы, типы элементов и обход структуры страницы
  • querySelector, querySelectorAll, getElementById и live-коллекции
  • BOM: window, location, history и размеры viewport
  • Разметка SmartCatalog: сетка товаров, sidebar фильтров, корзина
  • Практика: рендер карточек товаров из массива данных в DOM

  • createElement, append, replaceWith и DocumentFragment
  • classList, dataset, inline-стили и работа с CSS-классами
  • HTML-формы: input, select, validation API и FormData
  • Динамическая сетка товаров SmartCatalog с переключением вида
  • Практика: форма фильтров по категории, цене и поисковому запросу

  • Модель событий: capturing, bubbling, target и currentTarget
  • addEventListener, preventDefault, stopPropagation и custom events
  • Event delegation и оптимизация обработчиков на больших списках
  • Кнопка «В корзину» и счётчик количества через делегирование
  • Практика: модальное окно карточки товара и UX-обратная связь

  • Архитектура клиентского приложения: разделение данных, логики и представления
  • Сборка MVP SmartCatalog: каталог, фильтры и корзина без сервера
  • Сохранение корзины в localStorage и восстановление при перезагрузке
  • Модальные окна: просмотр товара, подтверждение удаления из корзины
  • Code review промежуточной версии и план доработок до финала

  • Callback hell, Promise: then/catch/finally и Promise.all/race
  • async/await, try/catch и обработка ошибок в асинхронном коде
  • Fetch API: GET/POST, headers, JSON-ответы и статус-коды
  • Загрузка каталога SmartCatalog с mock-API или JSON Server
  • Практика: индикатор загрузки, обработка ошибок сети и retry

  • import/export, именованные и default-экспорты, динамический import
  • npm: package.json, зависимости, scripts и структура проекта
  • Vite: dev-сервер, сборка и HMR; Jest: unit-тесты и assertions
  • Рефакторинг SmartCatalog на ES-модули: api, cart, ui, storage
  • Практика: тесты для Cart и filterProducts, сборка через Vite

  • Финальная архитектура SmartCatalog: модули, состояние и UX-паттерны
  • Интеграция Fetch API, localStorage, фильтров и модальных окон
  • Доработка корзины, оформления заказа и адаптивной вёрстки
  • Демонстрация проекта и подготовка кейса для портфолио
  • Итоговая аттестация и разбор типовых задач на собеседованиях

Итоговый проект — SmartCatalog

Интерактивное веб-приложение на JavaScript: каталог товаров с категориями и фильтрами, корзина с подсчётом суммы, модальные окна просмотра товара, сохранение состояния в localStorage и загрузка данных через Fetch API. Проект собирается поэтапно на протяжении всего курса — модули 8–10 добавляют UI, модуль 11 — промежуточную версию, модули 12–14 доводят SmartCatalog до production-ready.

  • Каталог товаров, фильтры и поиск
  • Корзина и модальные окна
  • localStorage — сохранение корзины
  • Fetch API · async/await
  • ES-модули · Vite · Jest
  • Готовый кейс для портфолио и собеседований

Официальный сертификат

Знак качества, который ценят работодатели

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

  • Два языка: Выдается на русском и английском языках для работы в РФ и за рубежом.
  • Уникальный номер: Каждый документ имеет свой номер для проверки подлинности работодателем.
  • Интеграция с резюме: Идеально дополняет профиль на hh.ru, Хабр Карьере и LinkedIn.
  • Лицензия: Выдается лицензированным учебным центром.
Сертификат ТЕРАКОР на английском языке
Сертификат ТЕРАКОР на русском языке

Стоимость курса

объём 128 ак. ч. (64 с преподавателем + 64 самостоятельно) · онлайн

JavaScript: интерактивная веб-разработка

объём 128 ак. ч. (64 с преподавателем) · DOM · Fetch · Vite · SmartCatalog

62 000 ₽

Оплата за весь курс

  • 14 модулей с практикой
  • Итоговый проект — SmartCatalog
  • Группа до 8 человек
  • Сертификат УЦ ТЕРАКОР
Записаться на курс

Отзывы о курсе

Мнения выпускников курса «JavaScript: интерактивная веб-разработка»

25 отзывов
5.0 средняя оценка

Обучение лично у основателя ТЕРАКОР

Сергей Герасименко — основатель ТЕРАКОР, преподаватель Java и Spring Boot

Сергей Валерьевич Герасименко

Руководитель ТЕРАКОР Digital · ведущий преподаватель

Опыт разработки в ОАО «РЖД» Победитель конкурса инноваций РЖД

4.9 на основе 1549 отзывов

Записаться на курс к Сергею →

Ближайший поток стартует в первый понедельник следующего месяца · осталось 4 места

Возможны вечерние занятия и обучение в выходные.

Все основные программы центра ведёт Сергей Валерьевич Герасименко — практикующий full-stack разработчик, технический директор и основатель ТЕРАКОР и ТЕРАКОР Digital.

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

Один руководитель.Два направления.Единая инженерная практика.

Сергей Герасименко — ведущий преподаватель и практикующий разработчик с многолетним опытом преподавания в ведущих учебных центрах страны. Проектирует современные программные системы и переносит рабочие инженерные практики в обучение.

  • 17+

    лет в Enterprise-разработке

  • 25 000+

    специалистов подготовил

  • 5 000+

    технических собеседований провёл

Enterprise-опыт, а не пересказ документации

Создавал программное обеспечение для Управления ОАО «РЖД» и спроектировал корпоративную систему «САОС» для массовых опросов. Система победила в конкурсе инновационных проектов РЖД и сегодня используется в крупных организациях. На занятиях Сергей разбирает именно те задачи, с которыми разработчики сталкиваются в реальных коммерческих компаниях.

Знает требования рынка изнутри

Проводит tech-собеседования для банков и IT-команд. На курсе — Spring Boot 4, Kafka 4, Core, SQL и архитектура. Mock-собеседования для выпускников включены.

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

Ключевые компетенции

  • Enterprise-архитектура — проектирование высоконагруженных систем (опыт в ОАО «РЖД»)
  • Java-экосистема — Java 21, Spring Boot 4, Spring AI: от основ до production-паттернов
  • Распределённые системы — практический опыт с Kafka 4 и микросервисной архитектурой
  • Базы данных — PostgreSQL на уровне production: оптимизация запросов, проектирование схем
  • System Design — подготовка к архитектурным секциям собеседований уровня Middle+
  • Техническое интервью — 5 000+ проведённых собеседований для банков и IT-компаний
Индивидуальный формат

Индивидуальное обучение по выбранным темам

Не нужно проходить весь курс, если вам нужны конкретные темы. Выбирайте модули из программы, разбирайте свой проект, закрывайте пробелы и двигайтесь в удобном темпе с преподавателем-практиком.

Стоимость индивидуального занятия от 3 000 ₽ за 1 академический час
  • Темы можно выбирать: берём только то, что нужно для работы, собеседования или проекта.
  • Индивидуальный план под ваш уровень: от базы до продвинутой архитектуры и практики.
  • Помощь с кодом, домашними заданиями, pet-проектом или рабочими задачами.
Записаться на индивидуальное обучение
Связаться с нами ТЕРАКОР

Оставьте заявку — специалист ответит в ближайшее время

Позвонить +7 (960) 352-38-05 Ежедневно 10:00–19:00
Написать в MAX Быстрый ответ в мессенджере Группа ВКонтакте Новости и анонсы ТЕРАКОР
Место нахождения г. Саратов, 1-й проезд имени С.Т. Разина, 3/7, 306, индекс 410054
Фактический адрес для встреч и консультаций в г. Москве ул. Каланчёвская, д. 15, м. Каланчёвская (по предварительной записи)
Фактический адрес для встреч и консультаций в Московской области, г. Королёв ул. Грабина, 5/2 (по предварительной записи)

ТЕРАКОР · ул. Каланчёвская, д. 15, м. Каланчёвская (по предварительной записи)

Открыть на Яндекс.Картах
Получить программу и цены