New section: Web APIs

jvstme · Jan 28, 2024 · ef45e27 · ef45e27
1 parent 5a3b79a
commit ef45e27
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 2 deletions.
diff --git 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
@@ -0,0 +1,3 @@
+# Web-разработка
+
+> 🚩 Этот курс пока не полный, но постепенно дополняется. Исходный код страниц курса живёт на [GitHub](https://github.com/jvstme/grasp-webdev). Там можно исправить опечатку, добавить запятую или предложить изменения по содержимому.
diff --git 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
@@ -0,0 +1,56 @@
+# Document Object Model (DOM)
+
+Изначально веб-страница представляет из себя HTML-файл, однако работать напрямую с HTML из JavaScript достаточно сложно. Поэтому браузер представляет страницу в виде дерева объектов, называемого Document Object Model или DOM.
+
+Дерево DOM состоит из множества узлов, при этом каждый узел может содержать в себе ещё множество дочерних узлов. В качестве узла обычно выступает HTML-элемент или текстовый узел.
+
+Рассмотрим в качестве примера фрагмент HTML-страницы:
+
+```html
+<body>
+    <p>Hello world</p>
+    <p>Welcome to <strong>my</strong> page</p>
+</body>
+```
+
+Соответствующий фрагмент 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-скрипты подключаются к странице через тег `<script>` внутри тега `<head>`, поэтому к моменту выполнения скрипта браузер ещё не успеет добавить в DOM основное содержимое страницы, находящееся ниже по HTML-файлу, в теге `<body>`. Если скрипту важно содержимое DOM, то тег `<script>` следует помечать атрибутом `defer`.
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="script.js" defer></script>
+    </head>
+    <body>
+        <!-- Полезное содержимое страницы -->
+    </body>
+</html>
+```
+
+Благодаря `defer` браузер начнёт выполнение скрипта только после того, как вся страница будет добавлена в DOM.
diff --git a/src/web_apis/index.md 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
@@ -0,0 +1,75 @@
+# Поиск элементов в DOM
+
+Чтобы начать взаимодействовать с элементом на странице, сначала нужно найти соответствующий ему объект в дереве DOM. Это можно сделать через методы `document.querySelector` или `document.querySelectorAll`.
+
+К примеру, дан HTML:
+
+```html
+<div class="first">1</div>
+<div class="second">2</div>
+<div class="third">3</div>
+```
+
+Метод `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
+    <table>
+        <tr>
+            <td>1</td><td>2</td><td>3</td>
+        </tr>
+        <tr>
+            <td>4</td><td>5</td><td>6</td>
+        </tr>
+        <tr>
+            <td>7</td><td>8</td><td>9</td>
+        </tr>
+    </table>
+    ```
+
+    Не внося изменений в HTML-код таблицы, напиши скрипт, который выводит в консоль:
+
+    - Ячейку 1
+    - Ячейку 9
+    - Средний ряд
+
+1. Веб-страница содержит список дел, при этом уже сделанные дела помечаются классом `done`. Например:
+
+    ```html
+    <ul>
+        <li class="done">Купить продукты</li>
+        <li class="done">Покормить кота</li>
+        <li class="done">Убраться дома</li>
+        <li>Приготовить ужин</li>
+    </ul>
+    ```
+
+    Напиши скрипт, который выводит на экран, какой процент дел выполнен. Например, для списка выше скрипт выведет: `75%`.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Web-разработка

		> 🚩 Этот курс пока не полный, но постепенно дополняется. Исходный код страниц курса живёт на [GitHub](https://github.com/jvstme/grasp-webdev). Там можно исправить опечатку, добавить запятую или предложить изменения по содержимому.