Браузерное окружение, BOM

Современный JavaScript используется не только в браузерах. Среда, в которой он запускается, будь то браузер, сервер или что-то ещё, называется окружением.

У разных окружений разные возможности и функциональность. В этой статье рассмотрим браузерное окружение и браузерную модель документа.

Окружение предоставляет языку дополнительные возможности и функции. Браузерное окружение, например, даёт возможность работать со страницами сайтов.

Представление этих дополнительных возможностей и функциональностей в виде объектов, к которым у языка есть доступ — это объектная модель.

В случае с браузерным окружением — это объектная модель браузера (Browser Object Model, BOM). Она предоставляет доступ к navigator, location, fetch и другим объектам.

#Браузерное_окружение #Браузерное_окружение #BOM

Подробнее

DOM

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

Браузер создаёт DOM при загрузке страницы, складывает его в переменную document и сообщает, что DOM создан, с помощью события DOMContentLoaded. С переменной document начинается любая работа с HTML-разметкой в JavaScript.

#Браузерное_окружение #DOM

Подробнее

console.log()

console.log() — это метод, предназначенный для печати в консоль браузера.

При написании скриптов иногда нужно увидеть промежуточный результат прямо в консоли браузера — это просто, удобно и не требует никакой дополнительной логики для отображения.

#Браузерное_окружение #consolelog

Подробнее

window.history

History API даёт доступ к управлению историей браузера в рамках текущей сессии. Браузер создаёт новую сессию, когда пользователь открывает новую вкладку или новое окно браузера.

С помощью History API можно переходить по истории вперёд, назад и управлять содержимым истории. Доступ к API осуществляется с помощью объекта window.history.

Основные методы:

• back() перемещает пользователя по истории на страницу назад;
• forward() перемещает пользователя по истории на страницу вперёд;
• go() универсальный метод для перемещения по истории вперёд или назад;
• pushState() добавляет новую запись в истории сессии;
• replaceState() изменяет текущую запись в истории сессии.

#Браузерное_окружение #windowhistory

Подробнее

fetch()

С помощью функции fetch() можно отправлять сетевые запросы на сервер — как получать, так и отправлять данные. Метод возвращает промис с объектом ответа, где находится дополнительная информация (статус ответа, заголовки) и ответ на запрос.

#Браузерное_окружение #fetch

Подробнее

window.navigator

Свойство window.navigator возвращает объект описания приложения (user agent), которое выполняет скрипт. В подавляющем большинстве случаев это приложение — браузер. Объект содержит свойства, описывающие браузер, и методы для выполнения действий.

#Браузерное_окружение #windownavigator

Подробнее

FormData

FormData — это специальная коллекция данных, которая позволяет передавать данные в виде пар [ключ, значение] на сервер при помощи fetch() или XMLHttpRequest. При этом используется точно такой же формат данных, какой использует тег <form> с типом кодирования 'multipart/form-data'. Поэтому, значения в FormData, как и у обычной HTML формы, могут быть только строками или файлами.

#Браузерное_окружение #FormData

Подробнее

window.location

location — это объект хранящийся в window, который позволяет получать информацию о текущем адресе страницы и менять его с помощью функций или обновления полей объекта.

#Браузерное_окружение #windowlocation

Подробнее

Geolocation API

Geolocation API позволяет запросить у пользователя данные о географическом местоположении.

Работать с геопозицией пользователей можно только при защищённом соединении (HTTPS).

#Браузерное_окружение #GeolocationAPI

Подробнее

window.matchMedia

Интерфейс в глобальной области видимости window.matchMedia, который позволяет получить доступ к медиавыражениям из JavaScript и подписываться на их срабатывание. Медиавыражения активно используются в CSS с помощью директивы @media.

#Браузерное_окружение #windowmatchMedia

Подробнее

URLSearchParams

URLSearchParams — это класс, предоставляющий удобное API для формирования строки поисковых параметров, которую потом можно использовать для формирования полного адреса. Все параметры в строке будут закодированы для безопасной вставки в адрес. Также этот класс можно встретить как часть класса URL.

#Браузерное_окружение #URLSearchParams

Подробнее

localStorage

Это объект, хранящийся в window, который позволяет долговременно сохранять данные в браузере. Работает как хранилище данных в формате ключ-значение — при сохранении данных мы указываем имя поля, в которое должны быть сохранены данные, и затем используем это имя для их получения.

• Значения хранятся в виде строк. При попытке сохранения других типов данных, они будут приведены к строке. Например, если записать число, то при чтении нам вернётся число, записанное в строку.
• Не имеет ограничений по времени хранения, может быть очищен пользователем вручную или браузером при переполнении автоматически (браузеры на основе движка WebKit, например Safari, очищают localStorage, если к нему не обращались в течение 7 дней).
• Максимальный объем данных ограничен размером 5MB.

#Браузерное_окружение #localStorage

Подробнее

sessionStorage

Это объект, хранящийся в window, который позволяет сохранять данные в браузере на время сессии. Этот тип хранилища очень похож на localStorage и работает как хранилище данных в формате ключ-значение. При сохранении данных мы указываем имя поля, в которое должны быть сохранены данные, и затем используем это имя для их получения.

• Сессия страницы создаётся при открытии новой вкладки браузера. Сессия остаётся активной до тех пор, пока открыта вкладка, а состояние сессии сохраняется между перезагрузками. Открытие новой вкладки с таким же адресом приведёт к созданию новой сессии.
• Значения хранятся в виде строк. При попытке сохранения других типов данных, они будут приведены к строке. Например, если записать число, то при чтении нам вернётся число, записанное в строку.
• Максимальный объем данных ограничен размером 5MB.

#Браузерное_окружение #sessionStorage

Подробнее

performance

Performance API — это API браузера, позволяющее измерять время работы программы при помощи различных методов. Для этого используется очень точный тип измерения времени – DOMHighResTimeStamp, работающий с точностью до 5 микросекунд (в одной миллисекунде их тысяча).

#Браузерное_окружение #performance

Подробнее

alert()

При помощи директивы alert() можно вывести на экран пользователя модальное окно с каким-нибудь текстом.

Из-за того, что окно модальное — работа с интерфейсом браузера и страницами будет заблокирована. Это неудобно, и может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует его работу с браузером до тех пор, пока он это окно не закроет.

#Браузерное_окружение #alert

Подробнее

prompt()

При помощи функции prompt() можно вывести на экран пользователя модальное окно c полем ввода и текстом-пояснением.

Из-за того, что окно модальное — работа с интерфейсом браузера и страницами будет заблокирована. Это неудобно, плюс может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует его работу с браузером до тех пор, пока он это окно не закроет.

#Браузерное_окружение #prompt

Подробнее

confirm()

При помощи функции confirm() можно вывести на экран пользователя модальное окно с текстом и кнопками «Ок» и «Отмена».

Из-за того, что окно модальное — работа с интерфейсом браузера и страницами будет заблокирована. Это неудобно, плюс может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует его работу с браузером до тех пор, пока он это окно не закроет.

#Браузерное_окружение #confirm

Подробнее

queueMicrotask()

Браузерное API, которое выполняет переданный код асинхронно.

#Браузерное_окружение #queueMicrotask

Подробнее

setTimeout()

setTimeout() позволяет исполнить функцию через указанный промежуток времени. Функция возвращает числовой идентификатор установленного таймера. Этот идентификатор можно передать в функцию clearTimeout(), чтобы остановить таймер.

#Браузерное_окружение #setTimeout

Подробнее

clearTimeout()

clearTimeout() очищает таймаут установленный с помощью setTimeout().

#Браузерное_окружение #clearTimeout

Подробнее