ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Category:

Учебник по JavaScript, ч.2: Документ

Прочел первый раздел «Документ» второй части («Браузер: документ, события, интерфейсы») учебника по JavaScript.

https://learn.javascript.ru

Часть 2. Браузер: документ, события, интерфейсы (в т.ч. 32 подраздела)

Разделы:

1. Документ (11 подразделов)

1.1 Браузерное окружение, спецификации
1.2 DOM-дерево
1.3 Навигация по DOM-элементам
1.4 Поиск: getElement*, querySelector*
1.5 Свойства узлов: тип, тег и содержимое
1.6 Атрибуты и свойства
1.7 Изменение документа
1.8 Стили и классы
1.9 Размеры и прокрутка элементов
1.10 Размеры и прокрутка окна
1.11 Координаты

Довольно объемный раздел. К некоторым подразделам (их довольно мало, к сожалению) есть достаточное количество интересных задач.

Предполагается, что ученик уже знает языки HTML и CSS, хотя бы поверхностно. Вообще, в обучении веб-разработке мне больше нравится подход от сайта «MDN Web Docs», на котором обучение HTML, CSS и JavaScript (и еще по нескольким другим связанным темам) происходит параллельно:

О сайте:
https://en.wikipedia.org/wiki/MDN_Web_Docs
https://developer.mozilla.org/ru/docs/MDN/About

Начало обучения:
https://developer.mozilla.org/ru/docs/Learn
https://developer.mozilla.org/en-US/docs/Learn

Однако, как учебник сайт «Learn.javascript.ru» гораздо лучше сайта «MDN Web Docs» (в части обучения языку JavaScript). По крайней мере, пока. Оба сайта активно развиваются. При изучении учебника «Learn.javascript.ru» его авторы рекомендуют использовать «MDN Web Docs» в качестве справочника (и это прекрасно работает).

Если в первой части учебника по большей части изучается чистый JavaScript, то во второй части — то, к чему изученное в первой части можно применить. Образно я себе это представляю так: в первой части ученику дают молоток, а во второй части — еще и гвозди с дощечками. Теперь ученик может сбить из них хоть и кривоватый, но уже готовый продукт — скворечник (интерактивную HTML-страницу).

Под словом «Документ» в этом разделе подразумевается, как я понимаю, HTML-страница.

При изучении этого раздела для меня, наконец, стали привычными инструменты разработчика (F12), из них наиболее часто употребляемые — «Elements», консоль, «Sources» и отладчик (у меня браузер «Microsoft Edge» на движке «Chromium»).

С точки зрения JavaScript всё вокруг состоит из объектов. Также и HTML-страница состоит из дерева объектов — DOM (объектная модель HTML-страницы, аббревиатура расшифровывается как «Document Object Model»). HTML-страница состоит из узлов, из которых некоторые являются текстовыми узлами, некоторые — комментариями, а самые важные — HTML-элементами. Все узлы представлены объектами в дереве DOM. Для просмотра дерева DOM текущей HTML-страницы удобно пользоваться инструментом «Elements» из инструментов разработчика (F12) браузера.

У объектов DOM есть методы, используя которые в скрипте на языке JavaScript, можно передвигаться по узлам дерева DOM, выбирать коллекции узлов и отдельные узлы для обработки. Через свойства объектов, представляющих узлы DOM, мы в скрипте на языке JavaScript имеем доступ к свойствам тегов HTML, можем их читать и изменять. Мы можем добавлять в дерево DOM новые узлы, удалять имеющиеся, изменять свойства имеющихся узлов, придавая HTML-странице интерактивность. Кроме работы с HTML-элементами страницы мы можем изменять стили этих HTML-элементов, заданные на языке CSS. Также мы можем определить размеры имеющихся на странице HTML-элементов, а также координаты этих HTML-элементов относительно самой HTML-страницы или относительно области просмотра браузера.

Пока я изучал этот раздел учебника, написал следующие посты:

1. Учебник по JavaScript: как устроены примеры, движок учебника, Prism.js
2. Учебник по JavaScript: ошибка в примере, eval, use strict
3. JavaScript: порядок выполнения скриптов и модулей на HTML-странице
4. JavaScript: DOM-дерево, консоль разработчика, переменные $0-$4
5. Учебник по JavaScript: 2 часть, нужно знание HTML и CSS, CSS-селекторы
6. Учебник по JavaScript: структуры данных
7. Учебник по JavaScript, структура данных «дерево»
8. Что такое обход дерева
9. Обход дерева в глубину без рекурсии
10. Обход дерева в глубину с рекурсией
11. Обход дерева в глубину, алгоритмы NLR из википедии
12. Обход дерева в глубину, обратный обход (от листьев)
13. HTML-дерево из объекта, рекурсивный способ
14. HTML-дерево из объекта, итеративный способ
15. HTML-дерево из объекта, рекурсия, innerHTML
16. HTML-дерево из объекта, итерации, innerHTML
17. JavaScript: добавление (append) HTML-элементов на страницу
18. JavaScript: задача подсчета элементов в ветках списка
19. JavaScript: задача по созданию HTML-календаря
20. JavaScript: создание цветных часов
21. JavaScript: сортировка строк в HTML-таблице
22. JavaScript: стили и классы, CSS-позиционирование
23. Можно ли использовать HTML-элемент style внутри body?
24. Стилизация по умолчанию от браузера
25. CSS: границы вида groove и ridge, значение initial
26. JavaScript: мяч на футбольном поле
27. JavaScript: координаты углов поля
28. JavaScript: заметка рядом с элементом
29. JavaScript: заметка рядом с элементом 2
30. JavaScript: заметка рядом с элементом 3
Tags: Образование, Программирование
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments