From ef45e2774aa2d7017d02c94cf03453d4c9f8bae1 Mon Sep 17 00:00:00 2001 From: Jvst Me Date: Sun, 28 Jan 2024 23:22:02 +0300 Subject: [PATCH] New section: Web APIs --- src/SUMMARY.md | 6 +++ src/index.md | 3 ++ src/js/index.md | 2 - src/web_apis/dom.md | 56 ++++++++++++++++++++ src/web_apis/index.md | 7 +++ src/web_apis/querying_dom_elements.md | 75 +++++++++++++++++++++++++++ 6 files changed, 147 insertions(+), 2 deletions(-) create mode 100644 src/index.md create mode 100644 src/web_apis/dom.md create mode 100644 src/web_apis/index.md create mode 100644 src/web_apis/querying_dom_elements.md diff --git a/src/SUMMARY.md b/src/SUMMARY.md index e302bf4..7c7c36b 100644 --- a/src/SUMMARY.md +++ b/src/SUMMARY.md @@ -1,5 +1,7 @@ # Summary +[Web-разработка](index.md) + - [JavaScript](js/index.md) - [Начало работы с JavaScript](js/getting_started.md) - [Переменные и числа](js/variables_and_numbers.md) @@ -39,3 +41,7 @@ - [Изменяемость объектов](js/objects_mutability.md) - [Динамический доступ к свойствам объекта](js/dynamic_property_access.md) - [Итерация по свойствам объекта](js/iterating_over_object_properties.md) + +- [Web APIs](web_apis/index.md) + - [Document Object Model (DOM)](web_apis/dom.md) + - [Поиск элементов в DOM](web_apis/querying_dom_elements.md) diff --git a/src/index.md b/src/index.md new file mode 100644 index 0000000..bf6b707 --- /dev/null +++ b/src/index.md @@ -0,0 +1,3 @@ +# Web-разработка + +> 🚩 Этот курс пока не полный, но постепенно дополняется. Исходный код страниц курса живёт на [GitHub](https://github.com/jvstme/grasp-webdev). Там можно исправить опечатку, добавить запятую или предложить изменения по содержимому. diff --git a/src/js/index.md b/src/js/index.md index fe274fd..ca2ec7a 100644 --- a/src/js/index.md +++ b/src/js/index.md @@ -1,5 +1,3 @@ # JavaScript JavaScript — язык программирования, изначально созданный для разработки интерактивных веб-страниц. Сейчас применяется и за пределами браузера и веб-разработки в целом. Назван в честь Java, другого языка программирования. - -> 🚩 Этот курс пока не полный, но постепенно дополняется. Исходный код страниц курса живёт на [GitHub](https://github.com/jvstme/grasp-webdev). Там можно исправить опечатку, добавить запятую или предложить изменения по содержимому. diff --git a/src/web_apis/dom.md b/src/web_apis/dom.md new file mode 100644 index 0000000..a18902a --- /dev/null +++ b/src/web_apis/dom.md @@ -0,0 +1,56 @@ +# Document Object Model (DOM) + +Изначально веб-страница представляет из себя HTML-файл, однако работать напрямую с HTML из JavaScript достаточно сложно. Поэтому браузер представляет страницу в виде дерева объектов, называемого Document Object Model или DOM. + +Дерево DOM состоит из множества узлов, при этом каждый узел может содержать в себе ещё множество дочерних узлов. В качестве узла обычно выступает HTML-элемент или текстовый узел. + +Рассмотрим в качестве примера фрагмент HTML-страницы: + +```html + +

Hello world

+

Welcome to my page

+ +``` + +Соответствующий фрагмент DOM можно условно представить так: + +``` +body +├── (текстовый узел) +├── p +│   └── (текстовый узел) Hello world +├── (текстовый узел) +├── p +│   ├── (текстовый узел) Welcome to +│   ├── strong +│   │   └── (текстовый узел) my +│   └── (текстовый узел) page +└── (текстовый узел) +``` + +Начинается фрагмент с элемента `body`. Внутри него содержатся 5 узлов: + +- Текстовый узел с переносом строки и отступом +- Элемент `p`, внутри которого содержится текстовый узел с текстом `Hello world` +- Снова текстовый узел с переносом строки и отступом +- Элемент `p`, внутри которого содержится ещё ряд узлов, представляющих текст `Welcome to my page` +- Ещё один текстовый узел с переносом строки + +Браузер позволяет скриптам на JavaScript взаимодействовать с DOM через глобальный объект `document`, как мы увидим в следующих главах. + +Следует отметить, что при загрузке страницы браузер постепенно заполняет DOM по мере получения с сервера и обработки HTML-файла. Обычно JavaScript-скрипты подключаются к странице через тег ` + + + + + +``` + +Благодаря `defer` браузер начнёт выполнение скрипта только после того, как вся страница будет добавлена в DOM. diff --git a/src/web_apis/index.md b/src/web_apis/index.md new file mode 100644 index 0000000..2365f54 --- /dev/null +++ b/src/web_apis/index.md @@ -0,0 +1,7 @@ +# Web APIs + +JavaScript — язык программирования общего назначения, то есть на нём можно написать почти любое приложение на любой платформе: веб-приложение для браузера, компьютерное приложение для Windows, серверное приложение и т.д. Но для взаимодействия программы с платформой требуется, чтобы платформа предоставляла определённый API. + +> API (Application Programming Interface, интерфейс разработки приложений) — набор инструментов, которые платформа предоставляет для разработки приложений. Обычно это множество функций, объектов и прочего, что разработчик может использовать в своей программе. + +В данном разделе мы рассмотрим основные возможности различных API, предоставляемых браузером для разработки веб-приложений на JavaScript. diff --git a/src/web_apis/querying_dom_elements.md b/src/web_apis/querying_dom_elements.md new file mode 100644 index 0000000..e469d16 --- /dev/null +++ b/src/web_apis/querying_dom_elements.md @@ -0,0 +1,75 @@ +# Поиск элементов в DOM + +Чтобы начать взаимодействовать с элементом на странице, сначала нужно найти соответствующий ему объект в дереве DOM. Это можно сделать через методы `document.querySelector` или `document.querySelectorAll`. + +К примеру, дан HTML: + +```html +
1
+
2
+
3
+``` + +Метод `document.querySelector` вернёт первый элемент, соответствующий заданному CSS-селектору. Если по селектору элементов не найдено, метод вернёт `null`. + +```js +document.querySelector("div"); // Возвращает элемент div с текстом "1" +document.querySelector(".third"); // Возвращает элемент div с текстом "3" +document.querySelector(".fourth"); // Возвращает: null +``` + +Метод `querySelectorAll` возвращает объект типа `NodeList` со всеми элементами, соответствующими заданному CSS-селектору. + +```js +document.querySelectorAll("div"); // Возвращает NodeList со всеми тремя элементами div +document.querySelectorAll(".third"); // Возвращает NodeList с одним элементом — div с текстом "3" +document.querySelectorAll(".fourth"); // Возвращает пустой NodeList +``` + +Объект `NodeList` похож на массив: у него есть свойство `length` и возможность брать элементы по индексу. Однако стандартных методов массива, например `map` или `sort`, у него нет. + +```js +const divs = document.querySelectorAll("div"); +divs.length; // Возвращает: 3 +divs[2]; // Возвращает элемент div с текстом "3" +divs[3]; // Возвращает: undefined +``` + +## Упражнения + +1. Напиши скрипт, который выводит на экран число абзацев на веб-странице. + +1. Дана таблица: + + ```html + + + + + + + + + + +
123
456
789
+ ``` + + Не внося изменений в HTML-код таблицы, напиши скрипт, который выводит в консоль: + + - Ячейку 1 + - Ячейку 9 + - Средний ряд + +1. Веб-страница содержит список дел, при этом уже сделанные дела помечаются классом `done`. Например: + + ```html + + ``` + + Напиши скрипт, который выводит на экран, какой процент дел выполнен. Например, для списка выше скрипт выведет: `75%`.