Среда браузера JavaScript, Спецификации
JavaScript — это очень важный инструмент, используемый для создания интерактивных веб-сайтов. Это руководство поможет вам понять, как работает JavaScript в веб-браузере, охватывая важные темы, такие как Объектная модель документа (DOM), Объектная модель браузера (BOM) и то, как мы можем управлять ими с помощью JavaScript. Мы также покажем вам несколько простых примеров кода, чтобы помочь вам начать.
Что такое Объектная модель документа (DOM)?
Объектная модель документа (DOM) подобна карте содержимого веб-сайта. JavaScript позволяет изменять содержимое, структуру и дизайн сайта с помощью DOM.
Пример: Добавление и изменение элементов
Вот как добавить новый элемент на веб-страницу и изменить его содержимое. Как вы можете видеть в примере ниже, в теле документа нет текстового абзаца. Но код JavaScript добавляет новый тег p в объект document.
<!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>Result
Что такое Объектная модель браузера (BOM)?
Объектная модель браузера (BOM) предоставляет JavaScript возможность взаимодействовать с браузером. Она включает несколько объектов, которые позволяют скриптам выполнять функции, связанные с самим браузером, а не только с содержимым веб-страницы. BOM также включает стандартные объекты, такие как history для управления навигацией в браузере и screen для доступа к размерам экрана. Чтобы сразу прояснить границы: DOM фокусируется на структуре и содержимом веб-страницы, тогда как BOM фокусируется на самом окне браузера.
Компоненты BOM
window
Объект window представляет окно браузера. Он содержит функции для управления браузером, включая изменение размера и положения окна браузера. Вот как вы можете открыть новое окно браузера с помощью объекта window:
<!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>Result
Примечание: Современные браузеры обычно блокируют
window.open(), если он не вызывается непосредственно действием пользователя, например, кликом.
navigator
Объект navigator содержит информацию о браузере, такую как имя, версия и возможности браузера, например, поддержка файлов cookie. Вот как использовать объект navigator для проверки того, включены ли файлы cookie:
Расположение
Объект location предоставляет информацию о текущем URL и может использоваться для перенаправления браузера на другой адрес. В этом примере различные компоненты URL (например, протокол, имя хоста и путь) будут отображаться на веб-странице.
Дополнительные способы использования DOM
JavaScript также позволяет динамически управлять содержимым веб-сайта с помощью событий и атрибутов данных.
Пример: Обработка кликов и использование данных
Вот как настроить события клика и использовать атрибуты данных:
<!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>Result
Этот код настраивает событие клика для элемента div и отображает сообщение при его нажатии.
Заключение
Понимание того, как JavaScript взаимодействует с браузером, позволяет вам создавать отзывчивые сайты, управляемые пользователем. Освоив DOM и BOM вместе с современными лучшими практиками, вы сможете создавать надежные и увлекательные веб-приложения.
Практика
Какова роль DOM в среде браузера JavaScript?