[Udemy] JavaScript с нуля: Практический Frontend и основы SPA [Ruslan Tissen]

От основ DOM и селекторов до ручной сборки React-проекта. Научитесь писать чистый код, который ценит бизнес

Этот курс — ваш путь от понимания того, как работает браузер, до создания архитектуры современного Single Page Application (SPA). Мы начинаем с «азов» JavaScript и фундаментальных основ DOM, постепенно переходя к профессиональной разработке на React.
Мы не просто учим синтаксис. Мы учимся думать как инженеры, которые ценят время бизнеса. Вы узнаете, почему чистый и читаемый код — это не прихоть, а способ зарабатывать больше, сокращая время на разработку и поддержку проектов.

Курс построен на практическом подходе «от простого к сложному»:

• Инструментарий и база: Настроим окружение, научимся мастерски владеть терминалом и VS Code, чтобы ваша работа была быстрой и эффективной.
• Манипуляции с DOM: Вы научитесь «прицеливаться» к любым элементам на странице, используя современные селекторы, и поймете разницу между актуальными методами и «старой школой» (Window, Prompt).
• Чистота кода: Разберем, зачем разбивать проект на блоки и компоненты и как организовать структуру файлов так, чтобы через год вы могли вернуться к коду и понять его за минуту.
• Погружение в React: Мы не будем использовать готовые шаблоны. Мы вручную соберем React-проект, детально изучив структуру папок public и src, чтобы вы понимали каждое звено в вашем приложении.

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

• Искать и манипулировать любыми элементами на странице с помощью querySelector и getElementById.
• Организовывать структуру проекта для командной разработки и высокой читаемости кода.
• Понимать разницу между современными стандартами и «старой школой» (Window, Prompt, глобальные объекты).
• Настраивать профессиональное окружение разработчика: терминал, VS Code и расширения.
• Создавать React-проекты вручную, понимая назначение папок public, src и структуру SPA.
• Применять философию «время — деньги бизнеса», оптимизируя написание кода.

Программа:

Окружение и основы манипуляции DOM.

• Как развернуть проект за 5 минут: Настройка VS Code и терминала.
• Зачем разбивать код на компоненты? Объект Window и секреты чистой архитектуры.
• Как правильно искать элементы в DOM: Разница querySelector vs querySelectorAll.
• Сложные CSS-селекторы в JavaScript: Как прицелиться к любому элементу по ID.
• querySelector vs getElementById: Что быстрее и в чем разница.
• Навигация в консоли: Как читать DevTools и быстро находить ошибки в коде.
• Продвинутый логинг в консоли: Сокращенный синтаксис объектов ES6.
• Как изменять CSS стили через JavaScript: Правило camelCase и частые ошибки.
• Первая интерактивность на JS: Как связать ввод пользователя и CSS стили.
• Первое сложное ДЗ: Перебор элементов через forEach и метод «озарения».
• Архитектура 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?