Курс на Stepik
Обложка курса «DOM — управление веб-страницами из JavaScript» на Stepik
290 ₽

DOM — управление веб-страницами из JavaScript 0.000

Открыть на
STEPIK.ORG

Если вы уже знаете переменные, функции, промисы, классы и даже ООП. Но всё это было в консоли. А как превратить этот код в то, что увидит и потрогает пользователь? Добро пожаловать в DOM. Это мост между вашими JS-знаниями и живыми веб-страницами.

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «DOM — управление веб-страницами из JavaScript»Учеников на курсе 0
Сертификаты, выданные на курсе «DOM — управление веб-страницами из JavaScript»Сертификатов выдано 0
Отзывы о курсе «DOM — управление веб-страницами из JavaScript»Отзывов получено 0
Рейтинг курса «DOM — управление веб-страницами из JavaScript»Рейтинг курса 0.000
Уроки в курсе «DOM — управление веб-страницами из JavaScript»Количество уроков 26
Стоимость курса «DOM — управление веб-страницами из JavaScript»Стоимость курса 290 ₽
Обновления курса «DOM — управление веб-страницами из JavaScript»Обновления курса
Дата публикации курса «DOM — управление веб-страницами из JavaScript»Дата публикации курса
Последнее обновление курса «DOM — управление веб-страницами из JavaScript»Последнее обновление
Сложность normal

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

  • Вы научитесь находить элементы на странице, менять их содержимое и стили, реагировать на клики и ввод с клавиатуры, создавать новые элементы и удалять старые.

О курсе

Если вы уже знаете переменные, функции, промисы, классы и даже ООП. Но всё это было в консоли. А как превратить этот код в то, что увидит и потрогает пользователь? Добро пожаловать в DOM. Это мост между вашими JS-знаниями и живыми веб-страницами.

Начальные требования

Курс построен как логическое продолжение моего основного курса по JavaScript. Если вы его прошли — вы полностью готовы. Если нет — вот минимальный набор знаний, с которым будет комфортно:

Базовые знания JS (обязательно):

  • Переменные (let, const)

  • Типы данных (строки, числа, массивы, объекты)

  • Функции (объявление, вызов, return)

  • Условные операторы (if/else)

  • Циклы (for, while)

  • Базовое понимание массивов и объектов (как читать и изменять)

Что НЕ обязательно знать для старта (научим в процессе):

  • Промисы и async/await (не понадобятся)

  • Классы и ООП (затронем слегка, но не критично)

  • Сложные методы массивов (map, filter, reduce)

Технические требования:

  • Любой современный браузер (Chrome, Firefox, Edge, Safari)

  • Любой текстовый редактор (обычный блокнот, VS Code, или даже встроенный редактор на платформе)

  • Базовое умение открывать консоль браузера (F12)

Преподаватели курса

Как проходит обучение

Как проходит обучение?

Всё обучение — текст + код + задачи.

Каждый модуль построен одинаково:

Теория: Коротко и по делу. Только то, что реально пригодится. Без «истории создания» и лишней философии. 5–10 минут

Примеры кода: Живые примеры, которые можно скопировать и запустить. Каждый пример решает одну конкретную задачу.2–3 минуты на пример

Задачи: 3–5 задач на закрепление. От простых («измени текст») до сложных («собери данные с формы»).15–30 минут

Как советую проходить:

  1. Прочитали теорию — поняли, что делает метод или свойство

  2. Посмотрели примеры — увидели, как это пишется в коде

  3. Решили задачи — попробовали сами (самое важное!)

  4. Если задача не идёт — перечитали примеры, попробовали ещё раз

Важно: Задачи никто не проверяет автоматически (и не ставит оценки). Вы проверяете себя сами — открываете браузер, пишете код, смотрите на результат.

Что вы получите

  • Знания:
  • Вы уверенно находите любые элементы на странице (через querySelector, getElementById и другие)
  • Меняете текст, HTML и атрибуты элементов
  • Создаёте и удаляете элементы прямо из JavaScript
  • Вешаете обработчики событий (клики, ввод в поля, отправка форм)
  • Используете делегирование событий (чтобы кнопки работали на динамически добавленных элементах)
  • Управляете стилями и классами (прячем, показываем, анимируем)
  • Работаете с формами (собираете данные, валидируете)
  • Сохраняете данные в localStorage (чтобы после перезагрузки страницы всё не пропадало)
  • Практический навык:
  • Вы соберёте итоговый проект на выбор:
  • To-Do список (задачи, фильтры, localStorage)
  • Галерея изображений (превью, модальное окно, вперед/назад)
  • Карточки товаров (фильтрация, сортировка, корзина)
  • Итоговый проект: ToDo-list

Нагрузка

2-3

Расскажите о курсе друзьям