Что такое BOM?

Что такое BOM (Browser Object Model)?

BOM (Browser Object Model) — это совокупность объектов, предоставляемых браузером для взаимодействия с ним на более высоком уровне, чем DOM. BOM позволяет JavaScript работать с самим браузером, а не только с содержимым страницы.

Основные компоненты BOM

Window — это главный объект BOM. Все глобальные переменные в браузере являются свойствами объекта window:

// window содержит все глобальные переменные
var x = 10;
console.log(window.x); // 10

// функции также становятся методами window
function myFunc() {
  console.log("Hello");
}
window.myFunc(); // Hello

Основные объекты и методы BOM

1. Location — управление URL страницы:

window.location.href = "https://example.com"; // переход на новую страницу
window.location.reload(); // обновление страницы
window.location.pathname; // /path/to/page
window.location.search; // ?query=value

2. History — история посещённых страниц:

window.history.back(); // назад (как кнопка back)
window.history.forward(); // вперёд
window.history.go(-2); // назад на 2 страницы

3. Navigator — информация о браузере и устройстве:

navigator.userAgent; // строка с информацией о браузере
navigator.language; // язык браузера
navigator.onLine; // есть ли интернет
navigator.geolocation; // доступ к геолокации

4. Screen — информация о экране устройства:

screen.width; // ширина экрана в пикселях
screen.height; // высота экрана
screen.availWidth; // доступная ширина (без панели)
screen.colorDepth; // глубина цвета в битах

Методы Window

// Диалоговые окна
alert("Сообщение"); // простое уведомление
var userInput = prompt("Введите значение:"); // окно с вводом
var result = confirm("Вы уверены?"); // окно подтверждения

// Таймеры
var timerId = setTimeout(() => {
  console.log("Выполнится через 2 секунды");
}, 2000);

var intervalId = setInterval(() => {
  console.log("Повторяется каждые 1 секунду");
}, 1000);

// Остановка таймеров
clearTimeout(timerId);
clearInterval(intervalId);

// Открытие нового окна
var newWindow = window.open("https://example.com", "name", "width=500,height=400");

Различие между BOM и DOM

DOM — это модель документа (HTML структура), то есть содержимое страницы. BOM — это модель браузера, окружающая DOM. BOM позволяет работать с браузером как таким: управлять историей, менять URL, получать информацию об экране и т.д.

Практические примеры

// Проверка онлайн статуса
if (navigator.onLine) {
  console.log("Вы онлайн");
} else {
  console.log("Вы оффлайн");
}

// Перенаправление на мобильную версию
if (/Mobile|Android/.test(navigator.userAgent)) {
  window.location.href = "https://m.example.com";
}

// Получение параметров из URL
var params = new URLSearchParams(window.location.search);
var id = params.get("id");

Заключение

BOM — это критически важная часть JavaScript в браузере. Она позволяет взаимодействовать с самим браузером, его историей, экраном и прочими компонентами. Хотя DOM получает больше внимания в повседневной разработке, понимание BOM необходимо для полноценного владения браузерным JavaScript.