[Udemy] JavaScript: Полное руководство от нуля до React [Ruslan Tissen]

Хотите освоить JavaScript так, чтобы код в React и бэкенде больше не казался магией?

Основы JS, синтаксис, DOM, ООП и глубокий разбор асинхронности (Promises, Async/Await) для уверенного перехода к React.
Большинство курсов обучают лишь сухому синтаксису. Наш курс построен иначе: мы пройдем путь от настройки рабочего окружения до сложных архитектурных паттернов, асинхронных запросов и сборки реальных проектов. Этот курс — мост, который превратит вас из начинающего в разработчика, готового к глубокому изучению экосистемы React.

Что уникального в этом курсе?

• Глубокий разбор DOM-манипуляций: Мы детально разберем архитектуру DOM, концепции API и визуализацию структур. Вы поймете разницу между querySelector и getElementById, научитесь элегантно работать со сложными CSS-селекторами и событиями.
• Чистый код и архитектура: Никаких бездумных "if/else". Мы учимся писать расширяемый код, разбираем делегирование событий, погружение и всплытие, модули ES6 (Named vs Default export) и работу с пакетными менеджерами (Node.js, NPM, основы Webpack и Babel).
• Ультимативный блок по асинхронности: Promises и Async/Await — это фундамент для React. Мы детально разберем синтаксис New Promise, Chaining, обработку ошибок через Try/Catch, Race Condition, а также тонкости работы с форматом JSON.
• Настоящая сетевая практика и API: Мы разберем, как устроен Web, изучим статус-коды, Fetch API, разницу между GET и POST, а также обойдем подводные камни CORS, работу с Web Storage API (LocalStorage, SessionStorage) и реализуем автосохранение форм.

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

• Основы JavaScript, манипуляции с DOM-деревом, продвинутую работу с консолью, DevTools, сложными CSS-селекторами и событиями.
• Инструменты экосистемы: инициализацию проектов через Node.js и NPM, транспиляцию кода в Babel и бандлинг через Webpack.
• Глубокую теорию асинхронности: работу с синтаксисом New Promise, Promise Chaining, синтаксисом Async/Await и обработку ошибок.
• Сетевые запросы через Fetch API (GET/POST), обход CORS, работу с Web Storage API (LocalStorage) и основы архитектуры SPA.

Программа:

• Окружение и основы манипуляции DOM.
• Архитектура DOM, узлы (Nodes) и работа с API.
• Интерактивный UI: обработка событий и валидация форм.
• Продвинутый JS: чистая архитектура, ES6-модули и сборка проекта.
• Асинхронный JavaScript: Promises, JSON и Async/Await.
• Продвинутый асинхронный JS: Async/Await и живая практика.
• Продвинутый JavaScript | DOM-манипуляции, CORS и Web Storage API.

Полная программа:

Окружение и основы манипуляции 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 и экосистемы веб-разработки.