From 6421fd3a48089b1650e9edfef138a1c1df4c017e Mon Sep 17 00:00:00 2001 From: roma-dxunvrs Date: Tue, 22 Sep 2026 00:07:22 +0300 Subject: [PATCH] 21.09.26 --- Веб/Фронтенд/BOM.md | 10 +++++++++- Веб/Фронтенд/DOM.md | 33 ++++++++++++++++++++++++++++++++- Веб/Фронтенд/ECMAScript.md | 22 +++++++++++----------- 3 files changed, 52 insertions(+), 13 deletions(-) diff --git a/Веб/Фронтенд/BOM.md b/Веб/Фронтенд/BOM.md index 25b0d24..97d98e7 100644 --- a/Веб/Фронтенд/BOM.md +++ b/Веб/Фронтенд/BOM.md @@ -15,4 +15,12 @@ contentsWindow = window.open("http://cs.ifmo.ru", "contents"); - управление информацией о браузере - управление информацией о параметрах монитора - ограниченное управление историей просмотра страниц -- поддержка работы с HTTP cookie \ No newline at end of file +- поддержка работы с HTTP cookie +## Главные API +1. `navigator` - информация о клиенте (ОС, версия браузера, геолокация, язык) +2. `location` - работа с URL-адресом текущей вкладки + - `location.href = "https://itmo.ru` - редирект на другую страницу (синхронный) + - Чтение параметров из URL (`?id=5&user=admin`) +3. `history` - управление историей сессии. Позволяет ходить вперед/назад или менять URL в строке без перезагрузки страницы (основа для React/Vue) +4. `localStorage`/`sessionStorage` - встроенная key-value база данных в браузере +5. Блокирующие диалоги: `alert()`, `confirm()`, `prompt()` \ No newline at end of file diff --git a/Веб/Фронтенд/DOM.md b/Веб/Фронтенд/DOM.md index 9171f1c..6dcea15 100644 --- a/Веб/Фронтенд/DOM.md +++ b/Веб/Фронтенд/DOM.md @@ -6,8 +6,39 @@ - Используется для динамического изменения страниц HTML - Генерируется браузером, браузер получил html с сервера и строит по нему дерево в ОЗУ. [[JavaScript|JS]] скрипты меняют содержимое DOM в оперативке (именно поэтому при нажатии F5 все сбрасывается) - Также браузер может менять и [[CSS]]-стили - для них создается CSSOM (CSS Object Model) - F12 и просмотр кода элемента ровно это и делают +- Точка входа - объект `document` (на самом деле `window.document`) ## Манипуляции через JavaScript - получение узлов: `document.all("image1").outerHTML;` - изменение узлов - изменение связей между узлами -- удаление узлов \ No newline at end of file +- удаление узлов +## Иерархия объектов DOM под капотом +1. `EventTarget` - базовый класс, дающий возможность вешать события `addEventListener` +2. `Node` - узел дерева, узлами бывают не только теги, но и просто куски текста или комментарии +3. `Element` - узел-тег, у которого есть атрибуты +4. `HTMLElement` - базовый класс для HTML-тегов +5. Конкретные классы: `HTMLInputElement`, `HTMLButtonEvent` +## API для изменения +#### Поиск элементов +- Современный стандарт `document.querySelector('.class #id'`) - ищет первый попавшийся по CSS-селектору +- `document.querySelectorAll` - возвращает коллекцию `NodeList` +- `getElementById`, `getElementsByClassName` - быстрее, но синтаксис хуже - легаси +#### Изменение содержимого и стилей +- `element.textContent = "Текст"` - вставляет текст +- `element.innerHTML = "Текст"` - вставляет HTML +- `element.styel.backgroundColor = "red"` - инлайн-стили +- `element.classList.add("active")` - добавить CSS-класс +#### Создание и удаление +```JavaScript +const btn = document.createElement('button'); // Создали объект в памяти (он еще не на экране!) +btn.textContent = "Нажми меня"; +document.body.append(btn); // Физически вставили в DOM (на экран) +btn.remove(); // Удалили +``` +## Reflow и Repaint +1. Reflow (Перекомпоновка): Происходит, если JS меняет геометрию (ширину, высоту, добавляет/удаляет элемент). Браузеру приходится заново пересчитывать Layout для всего дерева. Это очень медленно и грузит процессор. +2. Repaint (Перерисовка): Происходит, если JS меняет только внешний вид (цвет фона, цвет текста). Браузер просто перекрашивает пиксели. Это быстро. +> [!note] Индустрия +> Именно из-за проблемы медленного Reflow при прямых манипуляциях с DOM, Facebook в 2013 году придумал React и концепцию Virtual DOM. React собирает все изменения в "виртуальном" черновом дереве в ОЗУ, сравнивает их, и вносит в реальный DOM только одну математически идеальную минимальную правку, чтобы не вызывать лишних Reflow. +## События и всплытие +- Подключение `element.addEventListener("click", (event) => {...})`. Объект `event` хранит всю информацию о нажатии \ No newline at end of file diff --git a/Веб/Фронтенд/ECMAScript.md b/Веб/Фронтенд/ECMAScript.md index 475d182..ab07549 100644 --- a/Веб/Фронтенд/ECMAScript.md +++ b/Веб/Фронтенд/ECMAScript.md @@ -11,16 +11,16 @@ - [[#Классы и объекты|Классы и объекты]] - [[#Наследование|Наследование]] - [[#Типы данных|Типы данных]] - - [[#`Number`|`Number`]] - - [[#`String`|`String`]] - - [[#`Boolean`|`Boolean`]] - - [[#`Undefined`|`Undefined`]] - - [[#`Null`|`Null`]] - - [[#`Symbol`|`Symbol`]] - - [[#`Object`|`Object`]] + - [[#`Number`|Number]] + - [[#`String`|String]] + - [[#`Boolean`|Boolean]] + - [[#`Undefined`|Undefined]] + - [[#`Null`|Null]] + - [[#`Symbol`|Symbol]] + - [[#`Object`|Object]] - [[#Приведение типов|Приведение типов]] - - [[#Строгое равенство `===`|Строгое равенство `===`]] - - [[#Нестрогое равенство `==`|Нестрогое равенство `==`]] + - [[#Строгое равенство `===`|Строгое равенство ===]] + - [[#Нестрогое равенство `==`|Нестрогое равенство ==]] - [[#Нестрогое равенство `==`#Правила кастов|Правила кастов]] - [[#Стрелочные функции|Стрелочные функции]] - [[#Цикл с итератором|Цикл с итератором]] @@ -312,5 +312,5 @@ JavaScript в браузере (и Node.js) — **строго однопото Сюда попадают колбэки от **Промисов** (`.then()`, `catch()`, код после `await`) и `MutationObserver`. Как только Стек пустеет, Event Loop берет микротаски и выполняет их **все до единой**, пока эта очередь не станет абсолютно пустой. 3. **Обычная очередь (Макротаски / Macrotasks) — Низкий приоритет** Сюда попадают **Таймеры** (`setTimeout`, `setInterval`) и **события пользователя** (клики `click`, ввод с клавиатуры). Из этой очереди Event Loop берет строго **по ОДНОЙ** задаче за один цикл. Выполнив одну макрозадачу, он снова бежит проверять, не появились ли новые микротаски (Промисы), и только потом берет следующую макрозадачу. -> [!hint] Кратко: порядок выполнения - > **Синхронный СТЕК $\to$ ВСЕ Микротаски (Промисы) $\to$ ОДНА Макротаска (Таймеры) $\to$ повтор цикла.** \ No newline at end of file +> [!hint] Кратко: порядок выполнения +> Синхронный СТЕК $\to$ ВСЕ Микротаски (Промисы) $\to$ ОДНА Макротаска (Таймеры) $\to$ повтор цикла. \ No newline at end of file