Объектная модель браузера(ВОМ)

Объектная модель браузера(ВОМ)

При помощи JavaScript получаем и меняем существующие элементы на странице, а также создаём новые.

Окружение: DOM, BOM и JS

Сам по себе язык JavaScript не предусматривает работы с браузером.

Но позволяет легко расширять себя новыми функциями и объектами. На рисунке ниже схематически отображена структура браузерных объектов. 

Как видно из рисунка, на вершине стоит window.

У этого объекта двоякая позиция – он с одной стороны является глобальным объектом в JavaScript, с другой – содержит свойства и методы для управления окном браузера, открытия новых окон, например:

// открыть новое окно/вкладку с URL http://ya.ru window.open('http://ya.ru');

Объектная модель документа (DOM)

Глобальный объект  document  даёт возможность взаимодействовать с содержимым страницы.

Пример использования:

document.body.style.background = 'red'; alert( 'Элемент BODY стал красным, а сейчас обратно вернётся' ); document.body.style.background = '';

Он и его свойства и методы описаны в  стандарте W3C DOM.

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

Объектная модель браузера в качестве компонента JavaScript появилась в обозревателе Netscape Navigator 2.0 в 1996 году. В том же году Microsoft представила Internet Explorer 3.0 с собственной версией JavaScript — JScript и собственной моделью BOM. Оба браузера поддерживали примерно одинаковый набор объектов, ставших основой  DOM  0 (legacy DOM) и последующих спецификаций  объектной модели документа .  

Основные объекты BOM и связи между ними приведены на рис. 2. Следует отметить, что объект document, с которого начинается иерархия DOM, сам является частью модели браузера.

Объекты BOM: особенности реализации

Рассмотрим особенности реализации некоторых объектов BOM в разных браузерах на нескольких примерах. Основные отличия проявляются в свойствах и методах объектов. Итак:

window  — объект, который поддерживается всеми программами просмотра, представляет окно браузера. Корень иерархии BOM, через который осуществляется доступ ко всем прочим объектам JavaScript. Пример:

window.open(URL, name[, args]) — открывает новое окно.

Поведение открываемого окна зависит от браузера и списка параметров (args).

var newwindow = window.open("example.com", "sample");

window.document  — представляет доступ ко всем элементам HTML гипертекстового документа, загруженного в заданное окно. Поддерживается всеми браузерами. Примеры:

document.getElementById("outbox").innerHTML = "

Hello!

var x = document.getElementsByTagName("p");

var y = x.getElementsByClass("asH2");

window.history  — управляет историей просмотра веб-страниц. Для перемещения по журналу просмотра используются методы back, forward, go:

// вернет на предыдущую просмотренную страницу // работает во всех обозревателях window.history.back();

window является глобальным объектом, поэтому при доступе к его свойствам и методам необязательно использовать его имя. Например, window имеет метод , который отображает окно сообщения. Но нам необязательно писать:

window.alert("Привет мир!");

window можно не использовать:

alert("Привет мир!");

Но так как данный объект глобальный, то это накладывает некоторые ограничения. Все объявляемые в программе глобальные переменные или функции автоматически добавляются к объекту window. Если название новой функции будет совпадать с названием метода alert(), то произойдет переопределение этого метода в объекте window новой функцией.  

И если мы объявим в программе какую-нибудь глобальную переменную, то она нам доступна как свойство в объекте window:

var message = "hello";

document.write(window.message);

Управление окнами

Для взаимодействия с пользователем в объекте window определен ряд методов, которые позволяют создавать диалоговые окна.

Метод   alert() выводит окно с сообщением .

Метод confirm()   отображает окно с сообщением, в котором пользователь должен подтвердить действие двух кнопок OK и Отмена.

Метод  promt()  позволяет с помощью диалогового окна запрашивать у пользователя какие-либо данные. 

Открытие, закрытие и позиционирование окон

Объект window также предоставляет ряд методов для управления окнами браузера. Так, метод  открывает определенный ресурс в новом окне браузера:

var popup = window.open(' https://microsoft.com ', 'Microsoft', 'width=400, height

Метод  open()  принимает ряд параметров: путь к ресурсу, описательное название для окна и в качестве третьего параметра набор стилевых значений окна. Метод возвращает ссылку на объект нового окна.

Можно установить следующие стилевые характеристики :

width : ширина окна в пикселях. Например, width=640

height : высота окна в пикселях. Например, height=480

left : координата X относительно начала экрана в пикселях. Например, left=0

top : координата Y относительно начала экрана в пикселях. Например, top=0

titlebar : будет ли окно иметь строку с заголовком. Например, titlebar=no

menubar : будет ли окно иметь панель меню. Например, menubar=yes

toolbar : будет ли окно иметь панели инструментов. Например, toolbar=yes

location : будет ли окно иметь адресную строку. Например, location=no

scrollbar s: допускается ли наличие полос прокрутки. Например, scrollbars=yes

status : наличие статусной строки. Например, status=yes

resizable : может ли окно изменять размеры. Например, resizable=no

С помощью метода  можно закрыть окно. Например, откроем новое окно и через 10 секунд закроем его:

var popup = window.open(' https://microsoft.com ', 'Microsoft', 'width=400, height=400, resizable=yes');

function closeWindow(){

     popup.close();

}

setTimeout(closeWindow, 10000);

Метод   moveTo() позволяет переместить окно на новую позицию:

var popup = window.open(' https://microsoft.com ', 'Microsoft', 'width=400, height=400, resizable=yes');

popup.moveTo(50,50);

В данном случае окно перемещается на позицию с координатами x=50, y=50 относительно левого верхнего угла экрана.

Метод  resizeTo()  позволяет изменить размеры окна:

var popup = window.open(' https://microsoft.com ', 'Microsoft', 'width=400, height=400, resizable=yes');

popup.resizeTo(500,350); // 500 - ширина и 350 – высота

История браузера. Объект history

Объект  предназначен для хранения истории посещений веб-страниц в браузере. Нам этот объект доступен через объект window.

Все сведения о посещениях пользователя хранятся в специальном стеке ( history stack ). С помощью свойства  можно узнать, как много веб-станиц хранится в стеке:

document.write("В истории " + history.length + " станиц");

Для перемещения по страницам в истории в объекте history определены методы  back() (перемещение к прошлой посмотренной странице) и   forward() (перемещение к следующей просмотренной странице)

history.back(); // перемещение назад

Также в объекте history определен специальный метод  go() , который позволяет перемещаться вперед и назад по истории на определенное число страниц. Например, переместимся на 2 страницы назад:

history.go(-2);

Соответственно если надо переместиться на несколько страниц вперед, то в метод передается положительное значение. Например, переместимся вперед на три страницы:

history.go(3);

Объект location

Объект  содержит информацию о расположении текущей веб-страницы: URL, информацию о сервере, номер порта, протокол. С помощью свойств объекта мы можем получить эту информацию:

• полная строка запроса к ресурсу
• путь к ресурсу
• общая схема запроса
• протокол
• порт, используемый ресурсом
• хост
• название хоста
• если строка запроса содержит символ решетки (#), то данное свойство возвращает ту часть строки, которая идет после этого символа
• если строка запроса содержит знак вопроса (?), например, то данное свойство возвращает ту часть строки, которая идет после знака вопроса

     document.write("Строка запроса: " + location.href + ""); document.write("Путь к ресурсу: " + location.pathname + ""); document.write("Схема: " + location.origin + ""); document.write("Протокол: " + location.protocol + ""); " width="640"

Например, пусть есть следующая веб-страница  test.html , которая лежит на локальном веб-сервере:

!DOCTYPE html

document.write("Строка запроса: " + location.href + "
");

document.write("Путь к ресурсу: " + location.pathname + "
");

document.write("Схема: " + location.origin + "
");

document.write("Протокол: " + location.protocol + "
");

document.write("Порт: " + location.port + "
");

document.write("Хост: " + location.host + "
");

document.write("Имя хоста: " + location.hostname + "
");

document.write("Хэш: " + location.hash + "
");

document.write("Поиск: " + location.search + "
");

Также объект location предоставляет ряд методов, которые можно использовать для управления путем запроса:

• assign(url) загружает ресурс, который находится по пути url
• reload(forcedReload) перезагружает текущую веб-страницу. Параметр forcedReload указывает, надо ли использовать кэш браузера. Если параметр равен true, то кэш не используется
• replace(url) заменяет текущую веб-станицу другим ресурсом, который находится по пути url. В отличие от метода assign , который также загружает веб-станицу с другого ресурса, метод replace не сохраняет предыдущую веб-страницу в стеке истории переходов history , поэтому мы не сможем вызвать метод history.back() для перехода к ней.

Для перенаправления на другой ресурс мож y ноиспользовать как свойства, так и методы location :

location = " http://google.com ";

// аналогично

// location.href = " http://google.com ";

// location.assign(" http://google.com ");

Переход на другой локальный ресурс:

location.replace("index.html");

Объект navigator

Объект navigator содержит информацию о браузере и операционной системе, в которой браузер запущен. Он определяет ряд свойств и методов, основным из которых является свойство , представляющее браузер пользователя:

document.write(navigator.userAgent);

Данное свойство хранит полную стоку юзер-агента, например, Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36

Из этой информации, можно выбрать название браузера:

-1) {      browser = "Google Chrome"; } else if (uAgent.indexOf("Safari") -1) {      browser = "Apple Safari"; } else if (uAgent.indexOf("Opera") -1) {      browser = "Opera"; } else if (uAgent.indexOf("Firefox") -1) {      browser = "Mozilla Firefox"; } else if (uAgent.indexOf("MSIE") -1) {      browser = "Microsoft Internet Explorer"; } document.write(browser); " width="640"

var browser, uAgent = navigator.userAgent;

if(uAgent.indexOf("Chrome") -1) {

     browser = "Google Chrome";

} else if (uAgent.indexOf("Safari") -1) {

     browser = "Apple Safari";

} else if (uAgent.indexOf("Opera") -1) {

     browser = "Opera";

} else if (uAgent.indexOf("Firefox") -1) {

     browser = "Mozilla Firefox";

} else if (uAgent.indexOf("MSIE") -1) {

     browser = "Microsoft Internet Explorer";

}

document.write(browser);

Объект geolocation

Объект navigator хранит свойство geolocation , с помощью которого можно получить географическое положение пользователя. Для получения положения используется метод  getCurrentPosition()

Этот метод принимает два параметра: функцию, которая срабатывает при удачном запуске, и функцию, которая срабатывает при ошибке запроса геоданных:

function success(position) {

     var latitude = position.coords.latitude;

     var longitude = position.coords.longitude;

     var altitude = position.coords.altitude;

     var speed = position.coords.speed;

document.write("Широта: " + latitude + "
");

     document.write("Долгота: " + longitude + "
");

     document.write("Высота: " + altitude + "
");

     document.write("Скорость перемещения: " + speed + "
");

};

function error(obj) {

     document.write("Ошибка при определении положения");

};

navigator.geolocation.getCurrentPosition(success, error);

В функцию, которая выполняется при удачном определении геоданных, передается позиция пользователя в виде параметра position. Передаваемый объект имеет вложенный объект coords , 

с помощью свойств которого можно получить непосредственные координаты пользователя:

• latitude: географическая широта
• longitude : географическая долгота
• altitude: высота
• speed : скорость, с которой перемещается пользователь (например, если он идет или перемещается на транспорте)

При этом надо учитывать, что в браузерах действует политика безопасности, которая при обращении к методу  geolocation.getCurrentPosition()  отображает пользователю сообщение, в котором пользователь может подтвердить отправку географических координат. Если же пользователь откажется, то будет срабатывать функция  error().

Таймеры

Для выполнения действий через определенные промежутки времени в объекте window предусмотрены функции таймеров. Есть два типа таймеров: одни выполняются только один раз, а другие постоянно через промежуток времени.

Функция setTimeout

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

var timerId = setTimeout(someFunction,period)

Параметр  period  указывает на промежуток, через который будет выполняться функция из параметра  someFunction . А в качестве результата функция возвращает id таймера.

function timerFunction() {    document.write("выполнение функции setTimeout");}

setTimeout(timerFunction, 3000);

В данном случае через 3 секунды после загрузки страницы произойдет срабатывание функции timerFunction.

Для остановки таймера применяется функция  clearTimeout() .

function timerFunction() {

     document.write("выполнение функции setTimeout");

}

var timerId = setTimeout(timerFunction, 3000);

clearTimeout(timerId);

Функция setInterval

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

Например, напишем небольшую программу для вывода текущего времени:

function updateTime() {

     document.getElementById("time").innerHTML = new Date().toTimeString();

}

setInterval(updateTime, 1000);

Здесь через каждую секунду (1000 миллисекунд) вызывается функция updateTime(), которая обновляет содержимое поля , устанавливая в качестве его кода html текущее время.

requestAnimationFrame()

Метод  действует аналогично setInterval() за тем исключением, что он больше предназначен под анимации, работу с графикой и имеет ряд оптимизаций, которые улучшают его производительность.

• querySelector(value) - выбирает первый элемент, который соответствует css-селектору value
• querySelectorAll(value) - выбирает все элементы, которые соответствуют css-селектору value.