Главная страницаКатегория javascriptDOM 2022 Создание динамических веб-сайтов на JavaScript, часть 1

DOM 2022 Создание динамических веб-сайтов на JavaScript, часть 1

Name: DOM 2022 Создание динамических веб-сайтов на JavaScript, часть 1
Price: 12.5 USD
Rating: 5 (5 reviews)

DOM 2022 Build Dynamic Websites JavaScript Part 1

udemy

★5 (всего оценок - 5)

Продолжительность

5 ч 31 мин

Категория

JavaScript

Количество уроков

80 Видео

Дата добавления

1 окт. 2022 г., 13:07

Язык

Английский

Дата выхода

7 сент. 2022 г., 01:00

Дата обновления

29 апр. 2026 г., 16:05

DOM — это фундамент динамического веба. В этом курсе вы шаг за шагом освоите, как браузер превращает HTML‑разметку в живую, интерактивную структуру, которой можно управлять с помощью JavaScript. Поймите, как работает DOM, — и ваши страницы станут по‑настоящему динамичными и отзывчивыми.

Что такое DOM и почему он важен

DOM (Document Object Model) — это программная модель страницы, создаваемая браузером. Она превращает элементы HTML в объекты, с которыми вы можете работать: находить, изменять, удалять, анимировать. Понимание DOM — ключ к созданию интерактивных интерфейсов, удобных форм и сложных пользовательских сценариев.

Как браузер строит модель страницы

Во время загрузки браузер анализирует HTML, CSS и JavaScript, формируя объекты и связи между ними. Именно эту структуру и называют DOM. Освоив принципы её работы, вы сможете контролировать все аспекты поведения страницы.

Что дает вам владение DOM

Создание динамичных элементов без перезагрузки страницы.
Реализация интерактивных форм и сообщений об ошибках.
Манипуляции с содержимым: добавление, редактирование, удаление.
Работа с событиями и реактивное обновление интерфейса.
Использование современных API браузера для улучшения UX.

Чему вы научитесь в этом курсе

Курс глубоко объясняет логику DOM, а не просто показывает, какие кнопки нажимать. Вы поймёте механизмы, которые скрыты «за кулисами», что позволит вам уверенно писать сложные динамические интерфейсы.

Основные темы обучения

Чем DOM отличается от HTML и JavaScript.
Как находить нужные элементы на странице разными способами.
Разница между NodeList и HTMLCollection.
Практические стратегии обхода и изменения DOM.
Создание и удаление узлов с помощью DOM API.
Современные методы работы, включая новый API удаления.

Практические навыки

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

Кому подойдет этот курс

Этот курс рассчитан на начинающих и продолжающих разработчиков, которые хотят углубиться в механику работы браузера. Независимо от уровня подготовки вы получите структурированное и понятное объяснение сложных процессов.

Почему этот курс выделяется среди других

Большинство курсов по фронтенду не объясняют, что происходит внутри DOM. Здесь же вы получаете детальный и понятный разбор работы модели документа — знания, которыми должен владеть каждый разработчик полного стека.

Уникальный подход автора

Материал курса основан на множестве реальных задач и пробелах, которые автор заметил в других обучающих программах. Контент подан так, как хотелось бы видеть при собственном обучении: просто, наглядно и практично.

Курс 1 из 2: ваша база для динамичных веб‑приложений

Этот курс — первая часть двухуровневой программы. Он дает прочный фундамент для самостоятельного создания интерактивных сайтов. Вторая часть углубляется в продвинутые примеры, но курс 1 полностью самодостаточен для овладения основами DOM.

Ваш результат после прохождения курса

Понимание, как устроен DOM и как им управлять.
Уверенное использование инструментов доступа к элементам.
Навыки создания интерактивных интерфейсов.
Готовность решать реальные задачи веб‑разработки.

Освоив DOM, вы откроете путь к созданию современных динамических веб‑приложений. Этот курс покажет, как превратить идеи в работающий код и уверенно двигаться к уровню профессионального веб-разработчика.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:02:20
Introduction
Урок 2. 00:02:02
Everything is an object
Урок 3. 00:04:21
Building our own simple page
Урок 4. 00:07:06
DOM hierarchy
Урок 5. 00:04:09
DOM hierarchy conclusion
Урок 6. 00:03:21
What is the BOM
Урок 7. 00:03:43
DOM vs JavaScript vs Python
Урок 8. 00:07:39
The DOM is not the same as your HTML
Урок 9. 00:02:19
The DOM is not what you see in the browser
Урок 10. 00:01:43
The DOM is not what you see in DevTools
Урок 11. 00:08:19
Pseudo Elements
Урок 12. 00:02:53
Summary: What is the DOM?
Урок 13. 00:01:09
What can we do with the DOM?
Урок 14. 00:02:58
Quick example of changing the DOM
Урок 15. 00:03:08
What is the DOM API
Урок 16. 00:02:59
JavaScript lives in different environments
Урок 17. 00:09:24
Lets build a setTimeout() function
Урок 18. 00:03:21
setTimeout - JavaScript vs DOM
Урок 19. 00:03:14
The DOM was not solely for JavaScript
Урок 20. 00:01:38
Section introduction
Урок 21. 00:08:19
Accessing the DOM - Intro
Урок 22. 00:02:56
Understanding your HTML
Урок 23. 00:09:01
Lets build our page for this section
Урок 24. 00:02:18
getElementById()
Урок 25. 00:03:21
getElementById() Recap
Урок 26. 00:08:34
getElementsByClassName()
Урок 27. 00:01:02
TEST: Introduction
Урок 28. 00:10:42
TEST: building our test code
Урок 29. 00:11:40
SOLUTION
Урок 30. 00:06:09
getElementsByTagName()
Урок 31. 00:03:10
querySelector - Introduction
Урок 32. 00:06:27
querySelector - practical example
Урок 33. 00:03:03
Summary
Урок 34. 00:00:58
Nodes - Section Introduction
Урок 35. 00:01:53
Nodes - Introduction
Урок 36. 00:04:24
Nodes in action
Урок 37. 00:05:29
childNodes - How do we see nodes?
Урок 38. 00:04:15
Creating different nodes
Урок 39. 00:03:35
What are the different types of Nodes?
Урок 40. 00:03:20
Node - Family Tree
Урок 41. 00:02:42
Identifying nodes
Урок 42. 00:02:29
HTMLCollection vs NodeList
Урок 43. 00:11:00
Live vs Static lists
Урок 44. 00:02:16
Section Introduction
Урок 45. 00:02:38
Traversing the DOM - Introduction
Урок 46. 00:03:44
Building our section page together
Урок 47. 00:01:37
Why do we need to traverse the DOM?
Урок 48. 00:03:03
The 3 most important objects in the DOM
Урок 49. 00:04:05
Parent, child and siblings - a quick introduction
Урок 50. 00:09:40
Parent node
Урок 51. 00:03:53
Siblings in the DOM
Урок 52. 00:04:36
firstChild, lastChild and children - intro
Урок 53. 00:07:28
firstChild, lastChild and children - practical example
Урок 54. 00:02:55
Children property
Урок 55. 00:05:40
childNode vs children - what are the differences?
Урок 56. 00:02:04
Test - node types
Урок 57. 00:04:41
Test - solution
Урок 58. 00:00:56
Siblings - a quick word
Урок 59. 00:05:24
Working with sibling methods
Урок 60. 00:02:15
Summary of traversing the DOM
Урок 61. 00:01:19
Section introduction
Урок 62. 00:01:47
Static vs Dynamic websites
Урок 63. 00:02:16
How do you create elements
Урок 64. 00:05:23
Document vs document
Урок 65. 00:04:35
Understanding the createElement() method
Урок 66. 00:05:01
Lets attach our element to the DOM
Урок 67. 00:04:50
Using the textContent property to add text to our newly created element
Урок 68. 00:02:12
How does appendChild work?
Урок 69. 00:02:59
insertBefore() method
Урок 70. 00:02:24
Is there an insertAfter() method?
Урок 71. 00:03:41
Lets trick the insertBefore() method
Урок 72. 00:02:29
How to remove elements
Урок 73. 00:01:59
removeChild()
Урок 74. 00:03:29
remove()
Урок 75. 00:02:56
It's time to clone
Урок 76. 00:09:06
Clone example using setInterval()
Урок 77. 00:03:30
Lets analyze our clone code
Урок 78. 00:01:23
Test your skills
Урок 79. 00:04:32
Test - solution
Урок 80. 00:04:15
Course Outro

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+198

Комментарии