логотип PurpleSchool
логотип PurpleSchool
Главная
База знаний
javascript
JavaScript браузерное окружение и API
BOM в JavaScript

BOM в JavaScript

29 апреля 2025
Автор

Дмитрий Фандорин

JavaScript имеет доступ к браузерному окружению, которое значительно расширяет его возможности. BOM (Browser Object Model) - это один из важных элементов браузерного окружения для JavaScript. Он предоставляет доступ к различным функциям и свойствам браузера, что делает JavaScript таким мощным и популярным языком программирования.

Navigator - это объект, который предоставляет информацию о браузере, в котором запущен JavaScript. Он содержит различные свойства, такие как userAgent, который позволяет определить тип браузера, и appVersion, который указывает версию браузера.

Пример:

if (navigator.userAgent.indexOf("Chrome") != -1) {
  console.log("Вы используете Chrome");
} else if (navigator.userAgent.indexOf("Firefox") != -1) {
  console.log("Вы используете Firefox");
} else {
  console.log("Вы используете другой браузер");
}

Screen

Screen - это объект, который предоставляет информацию о разрешении экрана пользователя. Он содержит свойства, такие как width и height, которые указывают размеры экрана.

Пример:

console.log(`Ширина экрана: ${screen.width}`);
console.log(`Высота экрана: ${screen.height}`);

Location

Location - это объект, который предоставляет информацию о текущем URL-адресе страницы. Он содержит свойства, такие как href, который указывает на текущий URL-адрес, и search, который содержит строку запроса.

Пример:

console.log(`Текущий URL-адрес: ${location.href}`);
console.log(`Строка запроса: ${location.search}`);

Fetch

Fetch - это метод, который позволяет отправлять HTTP-запросы с помощью JavaScript. Он используется для получения данных с сервера и отправки данных на сервер.

Пример:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))

History

History - это объект, который предоставляет информацию о истории браузера. Он содержит методы, такие как back и forward, которые позволяют перемещаться по истории браузера.

Пример:

history.back(); // перейти на предыдущую страницу
history.forward(); // перейти на следующую страницу

LocalStorage и SessionStorage

LocalStorage и SessionStorage - это объекты, которые позволяют сохранять данные в браузере. SessionStorage хранит данные только в течение сессии браузера, а LocalStorage хранит данные даже после закрытия браузера.

Пример:

localStorage.setItem('name', 'John');
console.log(localStorage.getItem('name')); // выведет 'John'

Заключение

BOM - это один из важных элементов браузерного окружения для JavaScript, который предоставляет доступ к различным функциям и свойствам браузера. Например, объект Navigator позволяет определить тип браузера, Screen - получить размер экрана, Location - получить информацию о текущем URL-адресе, Fetch - отправлять HTTP-запросы, History - перемещаться по истории браузера, а LocalStorage и SessionStorage - сохранять данные в браузере. Использование этих функций и свойств BOM значительно расширяет возможности JavaScript и делает его мощным и популярным языком программирования.

Стрелочка влевоalert() в JavaScript

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний