JavaScript Полное руководство от нуля до React

3 участника

О чём курс

Руслан Тиссен разбирает программирование на JavaScript от настройки окружения до асинхронных сетевых запросов и подготовки к разработке на React. Автор делает упор на понимание процессов браузера, архитектуру приложений и работу с браузерными API без использования сторонних надстроек на начальном этапе. Вы пройдете путь от первых скриптов до сборки проектов и реализации одностраничных интерфейсов.

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

Что внутри

Обучение начинается с подготовки рабочего пространства в Visual Studio Code, работы с терминалом и инструментами разработчика DevTools. Автор подробно рассматривает Document Object Model: различия методов выборки элементов, работу с узлами дерева, изменение стилей через классы и защиту от межсайтовых атак при динамическом обновлении разметки. Отдельное внимание уделено обработке событий, механизмам всплытия и погружения, а также паттерну делегирования.

В инженерном блоке разбирается модульная система стандарта ES6 с именованным экспортом и экспортом по умолчанию. Рассматривается инициализация проектов через Node.js и пакетный менеджер NPM, транспиляция кода с помощью Babel и сборка модулей через Webpack.

Тема асинхронного программирования включает жизненный цикл промисов, цепочки вызовов, синтаксис async и await, перехват ошибок блоками try и catch, а также работу с форматом JSON. Завершающая часть охватывает сетевое взаимодействие: запросы к API с помощью Fetch, обработку статус-кодов, управление заголовками при политике CORS и сохранение состояния приложения через интерфейсы LocalStorage и SessionStorage.

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

  • Настраивать рабочую среду, терминал и анализировать ошибки через DevTools.
  • Управлять элементами страницы, свойствами узлов и динамически переключать классы оформления.
  • Настраивать интерактивные формы, перехватывать действия пользователя и предотвращать стандартное поведение браузера.
  • Организовывать структуру кода с помощью модулей ES6 и автоматизировать сборку проекта с Webpack и Babel.
  • Писать асинхронный код с использованием синтаксиса New Promise, цепочек методов и конструкций async и await.
  • Отправлять GET и POST запросы через Fetch API, обрабатывать сетевые ответы и избегать конфликтов CORS.
  • Работать с хранилищами LocalStorage и SessionStorage для автоматического сохранения форм и данных сессии.
  • Разбираться в концепциях архитектуры SPA для последующего перехода к React.

Программа обучения

Окружение и основы манипуляции DOM. Как развернуть проект за 5 минут: Настройка VS Code и терминала. Зачем разбивать код на компоненты? Объект Window и секреты чистой архитектуры. Как правильно искать элементы в DOM: Разница querySelector vs querySelectorAll. Сложные CSS-селекторы в JavaScript: Как прицелиться к любому элементу по ID. querySelector vs getElementById: Что быстрее и в чем разница. Навигация в консоли: Как читать DevTools и быстро находить ошибки в коде. Продвинутый логинг в консоли: Сокращенный синтаксис объектов ES6. Как изменять CSS стили через JavaScript: Правило camelCase и частые ошибки. Первая интерактивность на JS: Как связать ввод пользователя и CSS стили. Первая интерактивность на JS: Как связать ввод пользователя и CSS стили. Архитектура DOM: Концепция API и визуализация структуры проекта. Архитектура DOM, узлы (Nodes) и работа с API. Узлы и элементы в DOM: Свойство nodeName и почему автосохранение вредит коду. Почему HTMLCollection ломает код? parentElement и превращение в массив. DOM-навигациия: Методы matches, closest и ловушка previousSibling. Скрытые проблемы textContent: Работа с текстом в DOM и Template Literals. Свойство innerHTML: Как динамически менять HTML и не поймать XSS-атаку. Управление классами через classList: Методы add, remove и секрет toggle. Асинхронность для новичков: Как работают setTimeout, setInterval и console.table. Вся правда про Soft Skills: Почему софт-скиллы важнее чистого кода. Интерактивный UI: обработка событий и валидация форм. Интерактивность: Основы addEventListener и типы событий (Click, Focus, Blur). Элегантный код: Почему classList.toggle() лучше, чем условия If/Else. DOM: Свойства parentElement, nextElementSibling и основы Problem Solving. Секреты Event Object: Что скрывает аргумент (e) и как работает e.target. Перехват ввода: Как работает KeyboardEvent в keydown и зачем это нужно в React. Жизненный цикл страницы: Вся правда о DOMContentLoaded и блокировке парсинга. Как работать с легаси-кодом? Инлайновые события vs современные стандарты. Работа с формами: Специфические события, опасность тега reset и шаг к SPA. Перехват поведения браузера: Как укротить e.preventDefault() и функцию confirm(). Событие Submit: Отправка данных на сервер и основы валидации. Событие change: Динамическое управление атрибутами и интерактивные чекбоксы. Продвинутый JS: чистая архитектура, ES6-модули и сборка проекта. Жизненный цикл события: Всплытие (Bubbling) и Погружение (Capturing) в DOM. Почему stopPropagation() это плохая практика? Обратная сторона всплытия событий. Делегирование событий: Паттерн «Заставим работать родителя» и свойство nodeName. Чистая архитектура: Зачем нужны модули и как работает изоляция кода в JS. Модули в ES6: В чем разница между Named export и Default export? Лабораторная работа: Экспорт стрелочных функций и тонкости ES6 Modules. Что такое Node.js и NPM? Инициализация проекта и настройка package.json. Как устанавливать пакеты NPM? Разбор node_modules, .gitignore и Moment.js. NPM Scripts: Как автоматизировать рутину и развернуть любой проект с GitHub. Транспирация: Зачем нам Babel и что происходит с кодом под капотом. Что такое Бандлинг кода? Зачем нужен Webpack? Асинхронный JavaScript: Promises, JSON и Async/Await. Цикл Запрос-Ответ и проблема Race Condition (Гонка условий). Что такое Promise на самом деле? Три состояния и синтаксис New Promise. Создание собственных Promises: Resolve, Reject и имитация задержки сервера. Старый подход на колбэках и проблема Callback Hell (Пирамида ужаса). Первое знакомство с методом .then() и обработка результатов промиса. Цепочки Промисов (Chaining) и рефакторинг асинхронного кода. Обработка ошибок в промисах: методы .catch() и .finally(). Что такое формат JSON и главные методы: stringify и parse. Подводные камни JSON: Ошибки парсинга и форматирование данных. Оптимизация загрузки скриптов: Блокировка DOM, атрибуты Defer и Async. Продвинутый асинхронный JS: Async/Await и живая практика. Область видимости в JavaScript: Глобальный и Локальный Scope. Проблема областей видимости в цепочках .then() и ловушка вложенности. Синтаксический сахар: Пишем асинхронный код как синхронный с Async/Await. Практика Async/Await: Получаем данные и ломаем приложение. Обработка ошибок в Async/Await: Конструкция Try/Catch и Stack Trace. Ловушки Scope в Try/Catch и проблема нескольких асинхронных запросов. Async/Await и Try/Catch на практике: Как не сломать код в реальных модулях. Как устроен Web? Вся правда про Fetch API, Сетевые запросы и Статус-коды. В чем разница между GET и POST запросами? Разбор Payload и скрытой аналитики. Первая практика с API: Подключаем JSON Placeholder и разбираем Top-Level Await. Продвинутый JavaScript | DOM-манипуляции, CORS и Web Storage API. Динамический вывод данных: Связываем Fetch API с DOM через forEach и append. Отправка данных на сервер: addEventListener, Input.value и подготовка к POST. Пишем первый POST-запрос: Конфигурация Fetch, JSON.stringify() и дебаг ошибок. Динамический рендеринг POST-запроса: В чем разница между append и prepend? Что такое CORS? Главный вопрос на собеседовании, обход через Прокси и лимиты API. Где хранить данные в браузере? Web Storage API, LocalStorage и SessionStorage. Практика sessionStorage: Синтаксис setItem, лимиты памяти и изоляция вкладок. Практика LocalStorage: Главные отличия, реальные юзкейсы и основы авторизации. Псевдокод? Практика автоматического сохранения инпутов в sessionStorage. Автосохранение форм на чистом JS: Рефакторинг кода, событие change и LocalStorage. Финал курса: Зачем нам React? Разбор концепции SPA и экосистемы веб-разработки.

Складчина создана 22 июня 2026 г. · описание обновлено 25 октября 2026 г.

Теги курса

Инструменты

Другие материалы автора 3

RT Ruslan Tissen Все материалы
745 ₽