Среда браузера JavaScript, спецификации
Среда браузера JavaScript: глобальный объект window, DOM (document), BOM (navigator, location, history, screen) и их спецификации с примерами кода.
JavaScript — очень важный инструмент для создания интерактивных веб-сайтов. Это руководство поможет вам понять, как JavaScript работает в браузере, охватывая такие темы, как Document Object Model (DOM), Browser Object Model (BOM) и способы их управления с помощью JavaScript. Мы также рассмотрим простые примеры кода, которые помогут вам начать работу.
Ядро JavaScript и среда хоста
Сам язык JavaScript — та его часть, которая определена спецификацией ECMAScript, — знает только о числах, строках, объектах, массивах, функциях, Math, JSON и тому подобном. У него нет представления о веб-странице, кнопке или URL.
Эти возможности предоставляет среда хоста — программа, которая запускает ваш код. В браузере эта среда передаёт JavaScript большой набор дополнительных объектов (DOM и BOM), чтобы ваши скрипты могли читать и изменять страницу и взаимодействовать с браузером. Другая среда хоста, например Node.js, предоставляет совершенно другой набор (файловая система, сетевые серверы) и не имеет ни document, ни window.
Таким образом, скрипт в браузере — это два взаимодействующих слоя:
- Ядро ECMAScript — языковые возможности, доступные везде.
- Объекты хоста (браузера) —
window,document,navigator,locationи другие, предоставляемые браузером, а не языком.
window: глобальный объект
В браузере главным объектом всего является window. Он выполняет сразу две роли:
- Он представляет окно браузера (его размер, открываемые вкладки, диалоги, таймеры).
- Он является глобальным объектом — каждая глобальная переменная и глобальная функция становится свойством
window.
Именно поэтому все три варианта ниже ссылаются на одно и то же:
Два больших семейства объектов, прикреплённых к window, — это DOM (страница) и BOM (браузер). Остальная часть этого руководства посвящена обоим.
Что такое Document Object Model (DOM)?
Document Object Model (DOM) — это своеобразная карта содержимого веб-сайта. Браузер разбирает HTML в дерево объектов, корнем которого является объект document. Каждый тег становится узлом, который можно читать, изменять, добавлять или удалять из JavaScript — это означает, что вы можете изменять содержимое, структуру и оформление сайта во время выполнения.
Для более подробного практического изучения выбора и изменения узлов см. статью Управление DOM.
Пример: добавление и изменение элементов
Вот как добавить новый элемент на страницу и изменить его содержимое. Как видно в примере ниже, в теле страницы нет текстового абзаца. Однако JavaScript-код добавляет новый тег p в объект document.
<!-- snippet: html-result -->
<!DOCTYPE html>
<html>
<head>
<title>Simple DOM Example</title>
</head>
<body>
<script>
// Make a new part of the page
const paragraph = document.createElement("p");
paragraph.textContent = "Hello, JavaScript!";
// Add the new part to the page
document.body.appendChild(paragraph);
</script>
</body>
</html>Что такое Browser Object Model (BOM)?
Browser Object Model (BOM) предоставляет JavaScript возможность взаимодействовать с браузером. Он включает несколько объектов, позволяющих скриптам выполнять функции, связанные с самим браузером, а не только с содержимым веб-страницы. BOM также включает стандартные объекты, такие как history для управления навигацией браузера и screen для доступа к размерам экрана. Важно разграничить: DOM сосредоточен на структуре и содержимом веб-страницы, а BOM — на самом окне браузера.
Компоненты BOM
window
Объект window представляет окно браузера. Он содержит функции для управления браузером, включая считывание его размера и позиции, прокрутку, установку таймеров (setTimeout, setInterval) и отображение диалогов (alert, confirm, prompt). Для измерения и прокрутки viewport в частности см. статью Размеры окна и прокрутка.
Вот как открыть новое окно браузера с помощью объекта window:
<!-- snippet: html-result -->
<!DOCTYPE html>
<html>
<head>
<title>Open New Window Example</title>
</head>
<body>
<button onclick="openNewWindow()">Click to Open a New Window</button>
<script>
function openNewWindow() {
// Open a new window and specify its properties
var myWindow = window.open("", "MsgWindow", "width=400,height=200");
myWindow.document.body.innerHTML = "<p>Welcome to a new pop-up window! This is created using JavaScript.</p>";
}
</script>
</body>
</html>Примечание: Современные браузеры, как правило, блокируют
window.open(), если вызов не инициирован непосредственно действием пользователя, например кликом.
navigator
Объект navigator содержит информацию о браузере: название, версию и возможности браузера, например поддержку cookies. Вот как использовать объект navigator для проверки, включены ли cookies:
Location
Объект location предоставляет информацию о текущем URL и может использоваться для перенаправления браузера на другой адрес. Этот пример выводит на страницу различные компоненты URL (например, протокол, имя хоста и путь).
history
Объект history позволяет перемещаться по истории сеанса пользователя — страницам, посещённым в текущей вкладке, — не раскрывая реальных URL. Именно он лежит в основе кнопок «Назад» и «Вперёд» браузера и является основой клиентской маршрутизации в одностраничных приложениях.
screen
Объект screen описывает весь дисплей пользователя (монитор), а не окно браузера. Он полезен для определения доступного пространства перед открытием или позиционированием окна.
Совет:
screenсообщает физические размеры дисплея. Чтобы измерить область, которую реально может использовать ваша страница, обращайтесь к viewport объектаwindow.
Спецификации среды браузера
Эти объекты не придуманы каждым браузером отдельно — они определены публичными стандартами, чтобы код вёл себя одинаково везде:
- ECMAScript (поддерживается TC39) — ядро языка JavaScript: синтаксис, типы и встроенные объекты, такие как
Array,Object,Math,JSON. - DOM Living Standard (WHATWG) —
documentи дерево узлов-элементов. - HTML Living Standard (WHATWG) — определяет
window,navigator,location,historyи то, как HTML-страницы выполняют скрипты. - CSSOM (W3C) — объектная модель для чтения и изменения стилей из JavaScript.
Когда говорят, что функция является «стандартной», это означает, что она присутствует в одной из этих спецификаций и браузеры реализовали её соответствующим образом.
Другие способы работы с DOM
JavaScript также позволяет динамически управлять содержимым веб-сайта с помощью событий и атрибутов данных.
Пример: обработка кликов и использование данных
Вот как настроить обработчики событий клика и использовать атрибуты данных:
<!-- snippet: html-result -->
<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
<style>
#first {
background-color: red;
max-width: 100px;
}
</style>
</head>
<body>
<div id="first">Click me!</div>
<script>
document.getElementById('first').addEventListener('click', function () {
alert(`Item clicked.`);
});
</script>
</body>
</html>Этот код устанавливает обработчик события клика для элемента div и показывает сообщение при нажатии. Некоторые события также запускают встроенное поведение браузера (ссылка выполняет переход, форма отправляется) — чтобы узнать, как управлять этим или отменять такое поведение, см. статью Действия браузера по умолчанию.
Заключение
Понимание того, как JavaScript взаимодействует с браузером, позволяет создавать отзывчивые, управляемые пользователем веб-сайты. Освоив DOM и BOM вместе с современными лучшими практиками, вы сможете создавать надёжные и привлекательные веб-приложения.