Объекты браузера

Теперь рассмотрим объекты самого браузера. Отмечу, что объекты могут быть вложенными друг в друга. Вот некоторые из них:

• window — внутри этого объекта создаются остальные объекты браузера
• window.document — содержит элементы, определяемые на самой странице
• window.document.имя_формы — форма на странице
• window.document.имя_формы.имя_элемента — содержит элементы формы

Объект window

Рассмотрим некоторые возможности объекта window в действии:

Объект document

Этот объект тоже содержит много хорошего, но рассматривать его здесь я не буду, потому что лень. Давайте сразу перейдем к формам.

Формы

Как работать с формой через JavaScript? Так же, как и с любыми объектами. Чтобы с формой было удобно работать, дайте ей и всем ее компонентам удобные имена в HTML при помощи дополнительного параметра name. Например:

form name=» JS_Form » >
p >Имя: br >
input type=» text » name=» FirstName » size=» 30 » > /p >

p >Фамилия: br >
input type=» text » name=» SecondName » size=» 30 » > /p >

p >Телефон: br >
input type=» text » name=» Phone » size=» 30 » > /p >
/form >

Здесь JS_Form — имя формы. В форме есть три текстовых поля с именами FirstName, SecondName и Phone.

Чтобы получить доступ к введенному тексту, надо написать примерно следующее:

Здесь value это свойство текстового поля, которое содержит его текст.

Для элементов text и textarea наиболее полезное свойство — это свойство value, которое содержит набранный в окошке текст. Для элементов checkbox и radio наиболее полезное свойство — это checked, которое содержит ИСТИНУ, если флажок помечен, и ЛОЖЬ, если флажок не помечен.

Картинки

Картинками тоже можно управлять из JavaScript. Для этого задайте имя картинке при помощи параметра name. Например так:

img src=»http://economist.rudn.ru/files/web-studio/docs/misc/www.cl.spb.ru/chtushev/design/js/natasha.jpg» name=» PIC_NAME » width=» 300 » height=» 400 » alt=» Фотография » >

Теперь можно обращаться к этой картинке из JavaScript. Самое полезное свойство у объекта картинки — это свойство src, которое задает имя файла с картинкой. Если его изменить, то изменится и сама картинка. Это можно сделать так:

Надо сказать, что изменение картинок поддерживается только в Internet Explorer 4.0 и выше, и в Netscape Navigator 3.0 и выше. Если вы попытаетесь работать с картинками в более старых браузерах, то браузер начнет кричать об ошибках в JavaScript. Чтобы этого не произошло, можно проверять тип браузера и в соответствии с ним разрешать или запрещать изменение картинок. Для проверки, можете использовать следующий фрагмент, который надо исполнить сразу при загрузке HTML.

Если imgOk будет равен 1, то можно менять картинки, а если 0, то нельзя.

BOM — Объектная модель браузера

Объектная модель браузера (BOM от англ. Browser Object Model) позволяет JavaScript «общаться» с браузером.

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

Не существует каких-либо официальных стандартов для Объектной модели браузера (BOM).

Так как современные браузеры реализуют (почти) одни и те же методы и свойства для JavaScript интерактивно, их часто относят к методам и свойствам BOM.

Объект window

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

Все глобальные JavaScript объекты, функции и переменные автоматически становятся членами объекта window.

Глобальные переменные являются свойствами объекта window.

Глобальные функции являются методами объекта window.

Даже объект document (в HTML DOM) является свойством объекта window:

то же самое что:

Размер окна

Чтобы определить размер окна браузера, можно использовать два свойства.

Оба свойства возвращают размер в пикселях:

• window.innerHeight – внутренняя высота окна браузера (в пикселях)
• window.innerWidth – внутренняя ширина окна браузера (в пикселях)

Окно браузера (область просмотра) не включает панель инструментов и полосу прокрутки.

Свойства для Internet Explorer 8, 7, 6, 5:

• document.documentElement.clientHeight
• document.documentElement.clientWidth

• document.body.clientHeight
• document.body.clientWidth

Практическое решение JavaScript (охватывает все браузеры):

В примере вычисляется высота и ширина окна браузера (не включая панель инструментов и полосу прокрутки).

Другие методы объекта window:

Работа с браузером и BOM

Browser Object Model и объект window

Большое значение в JavaScript имеет работа с веб-браузером и теми объектами, которые он предоставляет. Например, использование объектов браузера позволяет манипулировать элементами html, которые имеются на странице, или взаимодействовать с пользователем.

Все объекты, через которые JavaScript взаимодействует с браузером, описываются таким понятием как Browser Object Model (Объектная Модель Браузера).

Browser Object Model можно представить в виде следующей схемы:

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

Объект window

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

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

Но так как данный объект глобальный, то это накладывает некоторые ограничения. Например:

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

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

JavaScript — Объектная модель браузера

На этом уроке мы рассмотрим, что такое объектная модель браузера (BOM – Browser Object Model), и из каких объектов она состоит.

Что такое объектная модель браузера

Веб-страницы бывают статическими и динамическими, последние отличаются тем, что в них используются сценарии (программы) на языке JavaScript.

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

На самом верху этой модели находится глобальный объект window . Он представляет собой одно из окон или вкладку браузера с его панелями инструментов, меню, строкой состояния, HTML страницей и другими объектами. Доступ к этим различным объектам окна браузера осуществляется с помощью следующих основных объектов: navigator , history , location , screen , document и т.д. Так как данные объекты являются дочерними по отношению к объекту window , то обращение к ним происходит как к свойствам объекта window .

Например, для того чтобы обратиться к объекту screen , необходимо использовать следующую конструкцию: window.screen . Но если мы работаем с текущим окном, то «window.» можно опустить. Например, вместо window.screen можно использовать просто screen .

Из всех этих объектов, наибольший интерес и значимость для разработчика представляет объект document, который является корнем объектной модели документа (DOM – Document Object Modal). Данная модель в отличие от объектной модели браузера стандартизована в спецификации и поддерживается всеми браузерами.

Объект document представляет собой HTML документ, загруженный в окно (вкладку) браузера. С помощью свойств и методов данного объекта Вы можете получить доступ к содержимому HTML-документа, а также изменить его содержимое, структуру и оформление.

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

Основная задача при создании динамических веб-страниц в основном сводится к отбору нужных объектов (элементов) и выполнению над ними различных действий. Результаты этих действий сразу отображаются на экране пользователя, а точнее в тех местах, за которые эти объекты отвечают.

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

Основные объекты Browser Object Model: window , navigator , history , location , screen , document .

Объект window

window – самый главный объект в браузере, который отвечает за одно из окон (вкладок) браузера. Он является корнем иерархии всех объектов доступных веб-разработчику в сценариях JavaScript. Объект window кроме глобальных объектов ( document , screen , location , navigator и др.) имеет собственные свойства и методы, которые предназначены для:

• открытия нового окна (вкладки);
• закрытия окна (вкладки) с помощью метода close() ;
• распечатывания содержимого окна (вкладки);
• передачи фокуса окну или для его перемещения на задний план (за всеми окнами);
• управления положением и размерами окна, а также для осуществления прокручивания его содержимого;
• изменения содержимого статусной строки браузера;
• взаимодействия с пользователем посредством следующих окон: alert (для вывода сообщений), confirm (для вывода окна, в котором пользователю необходимо подтвердить или отменить действия), prompt (для получения данных от пользователя);
• выполнения определённых действий через определённые промежутки времени и др.

Если в браузере открыть несколько вкладок (окон), то браузером будет создано столько объектов window , сколько открыто этих вкладок (окон). Т.е. каждый раз открывая вкладку (окно), браузер создаёт новый объект window связанный с этой вкладкой (окном).

Рассмотрим следующие примеры:

Вызвать метод write объекта document , который расположен в текущей вкладке (окне) браузера:

Вызвать метод alert для текущий вкладки (окна) браузера:

Объект navigator

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

• информацию о самом браузере в виде строки (User Agent);
• внутреннее «кодовое» и официальное имя браузера;
• версию и язык браузера;
• информацию о сетевом соединении и местоположении устройства пользователя;
• информацию об операционной системе и многое другое.

Объект history

history – объект, который позволяет получить историю переходов пользователя по ссылкам в пределах одного окна (вкладки) браузера. Данный объект отвечает за кнопки forward (вперёд) и back (назад). С помощью методов объекта history можно имитировать нажатие на эти кнопки, а также переходить на определённое количество ссылок в истории вперёд или назад. Кроме этого, с появлением HTML5 History API веб-разработчику стали доступны методы для добавления и изменения записей в истории, а также событие, с помощью которого Вы можете обрабатывать нажатие кнопок forward (вперёд) и back (назад).

Объект location

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

Объект screen

screen – объект, который предоставляет информацию об экране пользователя: разрешение экрана, максимальную ширину и высоту, которую может иметь окно браузера, глубина цвета и т.д.

Браузерное окружение, спецификации

Язык JavaScript изначально был создан для веб-браузеров. Но с тех пор он значительно эволюционировал и превратился в кроссплатформенный язык программирования для решения широкого круга задач.

Сегодня JavaScript может использоваться в браузере, на веб-сервере или в какой-то другой среде, даже в кофеварке. Каждая среда предоставляет свою функциональность, которую спецификация JavaScript называет окружением.

Окружение предоставляет свои объекты и дополнительные функции, в дополнение базовым языковым. Браузеры, например, дают средства для управления веб-страницами. Node.js делает доступными какие-то серверные возможности и так далее.

На картинке ниже в общих чертах показано, что доступно для JavaScript в браузерном окружении:

Как мы видим, имеется корневой объект window , который выступает в 2 ролях:

1. Во-первых, это глобальный объект для JavaScript-кода, об этом более подробно говорится в главе Глобальный объект.
2. Во-вторых, он также представляет собой окно браузера и располагает методами для управления им.

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

А здесь мы используем window как объект окна браузера, чтобы узнать его высоту:

Существует гораздо больше свойств и методов для управления окном браузера. Мы рассмотрим их позднее.

DOM (Document Object Model)

Document Object Model, сокращённо DOM – объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять.

Объект document – основная «входная точка». С его помощью мы можем что-то создавать или менять на странице.

Мы использовали в примере только document.body.style , но на самом деле возможности по управлению страницей намного шире. Различные свойства и методы описаны в спецификации:

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

Например, серверные скрипты, которые загружают и обрабатывают HTML-страницы, также могут использовать DOM. При этом они могут поддерживать спецификацию не полностью.

Правила стилей CSS структурированы иначе чем HTML. Для них есть отдельная спецификация CSSOM, которая объясняет, как стили должны представляться в виде объектов, как их читать и писать.

CSSOM используется вместе с DOM при изменении стилей документа. В реальности CSSOM требуется редко, обычно правила CSS статичны. Мы редко добавляем/удаляем стили из JavaScript, но и это возможно.

BOM (Browser Object Model)

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

• Объект navigator даёт информацию о самом браузере и операционной системе. Среди множества его свойств самыми известными являются: navigator.userAgent – информация о текущем браузере, и navigator.platform – информация о платформе (может помочь в понимании того, в какой ОС открыт браузер – Windows/Linux/Mac и так далее).
• Объект location позволяет получить текущий URL и перенаправить браузер по новому адресу.

Вот как мы можем использовать объект location :

Функции alert/confirm/prompt тоже являются частью BOM: они не относятся непосредственно к странице, но представляют собой методы объекта окна браузера для коммуникации с пользователем.

BOM является частью общей спецификации HTML.

Да, вы всё верно услышали. Спецификация HTML по адресу https://html.spec.whatwg.org не только про «язык HTML» (теги, атрибуты), она также покрывает целое множество объектов, методов и специфичных для каждого браузера расширений DOM. Это всё «HTML в широком смысле». Для некоторых вещей есть отдельные спецификации, перечисленные на https://spec.whatwg.org.

Итого

Говоря о стандартах, у нас есть:

Спецификация DOM описывает структуру документа, манипуляции с контентом и события, подробнее на https://dom.spec.whatwg.org. Спецификация CSSOM Описывает файлы стилей, правила написания стилей и манипуляций с ними, а также то, как это всё связано со страницей, подробнее на https://www.w3.org/TR/cssom-1/. Спецификация HTML Описывает язык HTML (например, теги) и BOM (объектную модель браузера) – разные функции браузера: setTimeout , alert , location и так далее, подробнее на https://html.spec.whatwg.org. Тут берётся за основу спецификация DOM и расширяется дополнительными свойствами и методами.

Кроме того, некоторые классы описаны отдельно на https://spec.whatwg.org/.

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

Когда вам нужно будет прочитать о каком-то свойстве или методе, справочник на сайте Mozilla https://developer.mozilla.org/ru/search тоже очень хороший ресурс, хотя ничто не сравнится с чтением спецификации: она сложная и объёмная, но сделает ваши знания максимально полными.

Для поиска чего-либо обычно удобно использовать интернет-поиск со словами «WHATWG [термин]» или «MDN [термин]», например https://google.com?q=whatwg+localstorage, https://google.com?q=mdn+localstorage.

А теперь давайте перейдём к изучению DOM, так как страница – это основа всего.