Складчина Каталог
Мои курсы

JavaScript с нуля Практический Frontend и основы SPA

3 участника
RT Автор Ruslan Tissen Школа Udemy

О чём курс

Руслан Тиссен разбирает JavaScript с основ работы браузера и DOM, а затем показывает, как вручную собрать React-проект и разобраться в структуре SPA. Вы начнёте с настройки рабочего окружения, перейдёте к управлению элементами страницы и событиями, после чего изучите модули и инструменты сборки.

Работа с браузером и DOM

Вы настроите VS Code и терминал, научитесь пользоваться консолью и искать ошибки через DevTools. Автор показывает поиск элементов с помощью querySelector, querySelectorAll и getElementById, работу с CSS-селекторами, стилями, текстом, HTML и классами. В заданиях вы связываете ввод пользователя с изменениями на странице и перебираете элементы через forEach.

Отдельный блок охватывает узлы DOM и навигацию между элементами: nodeName, parentElement, matches, closest и соседние узлы. Автор также разбирает различия между HTMLCollection и массивом, применение innerHTML и связанную с ним опасность XSS.

События и формы

Вы работаете с addEventListener, объектом события и e.target, клавиатурным вводом и жизненным циклом загрузки страницы. В программе есть всплытие и погружение событий, делегирование, обработка форм, проверка ввода, событие submit и отмена стандартного поведения браузера через preventDefault(). Автор сравнивает встроенные в HTML обработчики с современным способом подписки на события.

Структура проекта и инструменты

Автор объясняет, зачем разделять код на компоненты и ES6-модули, как работают именованный и стандартный экспорт функций. Вы инициализируете проект с Node.js и NPM, разберёте package.json, node_modules, .gitignore и NPM Scripts. Завершающие темы связаны с Babel и Webpack: транспиляцией и объединением кода для сборки проекта.

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?
Складчина создана 22 июня 2026 г. · описание обновлено 25 октября 2026 г.

Теги курса

Профессии
Frontend-разработчикРазработчик
Инструменты
JavaScript

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

RT Ruslan Tissen Все материалы
JavaScript Мост к React асинхронность API и SPA Promises JavaScript Мост к React асинхронность API и SPA Promises 745 ₽ Backend: Node.js, API, базы данных, безопасность и деплой Backend: Node.js, API, базы данных, безопасность и деплой 385 ₽ 1 500 ₽ −74%JavaScript Полное руководство от нуля до React JavaScript Полное руководство от нуля до React 745 ₽

Ещё интересные курсы 12

Ещё интересные курсы

745 ₽