sotrud.ru 1

Тема 3.7. Объектная модель браузера.


Тип лекции: текущая

План:


  1. Типы объектов браузера

  2. Объект window

  3. Объект document

  4. Объект location

  5. Объект history

  6. Объект navigator




  1. Вопросы для самостоятельного изучения студентами:

  • модель обработки событий DOM уровня 2, уровня 3

  • пользовательские объекты.

  • DOM и CSS.




  1. Типы объектов браузера


При создании HTML-документов и JavaScript-программ необходимо учитывать структуру объектов. Все объекты можно разделить на три группы:

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

  2. Внутренние, или встроенные, объекты языка JavaScript

  3. Объекты, связанные с тегами языка HTML

Объектами браузера являются зависимые от браузера объекты: window
(окно), location (местоположение) и history (история). Внутренние объекты включают простые типы данных, такие как строки (string), математические константы (math), дата (date) и другие.

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

Браузеры поддерживают объекты различных типов. HTML-объектами являются объекты, которые соответствуют тегам языка HTML. К ним относятся метки, гиперсвязи и элементы формы - текстовые поля, кнопки, списки и др. Объекты верхнего уровня, или объекты браузера, - это объекты, поддерживаемые в среде браузера: window, location, history, document, navigator. Объекты, перечисленные в таблице, создаются автоматически при загрузке документа в браузер.

Таблица 1- Типы объектов браузера



Имя объекта

Описание

window

Объект верхнего уровня в иерархии объектов языка JavaScript. Фреймосодержащий документ также имеет объект window.

document

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

location

Содержит свойства, описывающие местонахождение текущего документа, например адрес URL.

navigator

Содержит информацию о версии браузера. Свойства данного объекта обычно только для чтения. Например свойство: navigator.appname содержит строковое значение имени браузера.

history

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




  1. Объект window

Объект window обычно соответствует главному окну браузера и является объектом верхнего уровня в языке JavaScript, поскольку документы, собственно, и открываются в окне. В фреймосодержащих документах, объект window может не всегда соответствовать главному окну программы. Поэтому для обращения к конкретному окну следует использовать свойство frames объекта parent. Фреймы - это те же окна. Чтобы обратиться к ним в языке JavaScript, можно использовать массив frames. Например, выражение parent.frames[0] обращается к первому фрейму окна браузера. Предполагается, что такое окно существует, но при помощи метода window.open() можно открывать и другие окна и обращаться к ним посредством свойств объекта window.


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


    • window.propertyName

    • window.methodName (parameters)

    • self.propertyName

    • self.methodName (parameters)

    • top.propertyName

    • top.methodName (parameters)

    • parent.propertyName

    • parent.methodName (parameters)

    • windowVar.propertyName

    • windowVar.methodName (parameters)

    • propertyName

    • methodName (parameters)

Здесь windowVar - экземпляр объекта window. Имя self - синоним, используемый для обращения к текущему окну во фреймосодержащем документе, тогда как имя top применяется для обращения к главному окну браузера. Для этой цели можно применить и объект parent. Однако следует иметь в виду, что значением parent является ссылка на родительское окно, когда top - ссылка на окно верхнего уровня, которое содержит либо данный фрейм, либо фрейм содержащий вложенный фрейм. Обращение напрямую к методам и свойствам возможно при использовании оператора with.


Свойства

Объект window имеет свойства:

    • defaultStatus - текстовое сообщение, которое по умолчанию выводится в строке состояния (status bar) окна браузера.

    • frames - массив фреймов во фреймосодержащем документе.

    • length - количество фреймов во фреймосодержащем документе.

    • name - заголовок окна, который задается с помощью аргумента windowName метода open().

    • parent - синоним, используемый для обращения к родительскому окну.

    • self - синоним, используемый для обращения к текущему окну.

    • status - текст временного сообщения в строке состояния окна браузера.

    • top - синоним, используемый для обращения к главному окну браузера.


    • window - синоним, используемый для обращения к текущему окну.


Методы

Метод alert() применяется для того, чтобы вывести на экран текстовое сообщение. Для открытия окна используется метод open(), а для закрытия - метод close(). С помощью метода confirm() происходит вывод на экран окна сообщения с кнопками Yes и No, и возвращает булевое значение true или false, в зависимости от нажатой кнопки. Посредством метода prompt() на экран выводится диалоговое окно с полем ввода. Метод setTimeout() устанавливает в текущем окне обработку событий, связанных с таймером, а метод clearTimeout() отменяет обработку таких событий.


Обработчики событий

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

пример:

myWin = open ("http://my.site.ru","myWin","width=640, height=480");


  1. Объект document


Объект document соответствует всему гипертекстовому документ, вернее, той его части, которая заключена в контейнер . . . . Документы отображаются в окнах браузера, поэтому каждый из них связан с определенным окном. Все HTML-объекты являются свойствами объекта document, поэтому они находятся в самом документе. Например, в языке JS к первой форме документа можно обратиться, используя выражение:

document.forms[0]

в то время как к первой форме во втором фрейме следует обращаться выражением:parent.frames[1].document.forms[0]


Объект document удобно использовать для динамического создания HTML-документов. Для этого применяется HTML-контейнер . . . . Хотя в этом контейнере можно установить множество различных свойств документа, всеже имеются такие свойства, значения которых нельзя установить с помощбю этих тегов. Синтаксис тега я не буду приводить, - его можно найти в спецификации HTML. Мы же, будем считать, что синтаксис HTML знаем. Ну а если для вас имеются затруднения, можете найти полное описание языка HTML на множестве других страниц в Интернете. Перейдем же к свойствам и методам объекта document.

document.propertyName

document.methodName (parameters)


Свойства

Объект document имеет достаточно много свойств, каждое из которых соответствует определенному HTML-тегу в текущем документе:


  • alinkColor- соответствует атрибуту alink тега ;

  • anchors- массив, который соответствует всем меткам в документе;

  • bgColor- соответствует атрибуту bgColor (цвет фона) тега ;

  • cookie- представляет собой фрагмент информации, записанный на локальный диск ("ключик");

  • fgColor- соответствует атрибуту fgColor (цвет текста) тега ;

  • forms- массив, содержащий все теги
    в текущем документе;

  • images- масив изображений, ссылки на которые заданы в текущем документе;

  • lastModified- дата последнего изменения текущего документа;

  • linkColor- соответствует атрибуту linkColor (цвет гиперсвязи по умолчанию);

  • links- масив, содержащий все гипервязи в текущем документе;

  • location- соответствует адресу URL текущего документа;
  • referrer- соответсствует адреу URL документа, из которого пользователь перешел к текущему документу;


  • title- соответствует содержимому контейнера . . . ;

  • vlinkColor- соответствует атрибуту vlinkColor (цвет посещенной связи) тега .



Методы

Метод clear() предназначен для очистки текущего документа. Лучше использовать для очистки методы open() и close(). Для записи информации в браузер применяют методы write() и writeln(). Покольку эти методы записывают текст в браузер в HTML-формате, вы можете создавать любой HTML-документ динамически, включая готовые приложения на языке JavaScript. Если в окно загружен документ, то запись данных поверх него может привести к сбою. Поэтому в окно следует записывать поток данных, для чего с помощью метода document.open() нужно открыть документ, а затем, вызвав необходимое количество раз метод document.wtite(), записать данные в документ. В заключение, чтобы послать данные в браузер, следует вызвать метод document.close().


Обработчики событий

В тегах и можно использовать обработчики событий, связанных загрузкой и выгрузкой документа, onLoad и onUnload.

Для записи текста в HTML-формате в браузер иногда применяют функцию document.writeln(). Например, можно динамически создавать теги изображений, выводя изображения на экран посредством следующего:

document.open();

document.writeln("");

document.close();

С помощью JavaScript программ, а в частности при помощи объекта document, можно создавать законченные HTML-документы и другие JavaScript программы. Например:

document.open();

document.writeln("");

document.close();

  1. Объект location



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

[windowVar.]location.prepertyName

где windowVar - необязательная переменная, задающая конкретное окно, к которому хотите обратиться. Эта переменная также позволяет обращаться к фрейму во фреймосодержащем документе при помощи свойства parent - синонима, используемого при обращении к объекту window верхнего уровня, если окон несколько. Объект location является свойством объекта window. Если вы обращаетесь к объекту location без указания имени окна, то подразумевается свойство текущего окна.

Свойство location объекта window легко перепутать со свойством location объекта document. Значение свойства document.location изменить нельзя, а значение свойства location окна - можно, например при помощи выражения window.location.property. Значение document.location присваивается объекту window.location при первоначальной загрузке документа, потому, что документы всегда загружаются в окна.


Свойства

  • hash - имя метки в адресе URL (если задано);

  • host - часть hostname:port адреса URL текущего документа;

  • hostname - имя хоста и домена (или цифровой IP-адрес) в адресе URL текущего документа;

  • href - полный адрес URL текущего документа;

  • pathname - часть адреса URL, описывающая каталог, в котором находится документ;
  • port - номер порта, который использует сервер;


  • protocol - префикс адреса URL, описывающий протокол обмена, (например, http:);

  • target - соответствует атрибуту target в теге .


Примеры

Чтобы присвоить свойству location текущего окна в качестве значения новый адрес URL, используйте такой вид:

self.location="http://wdstudio.al.ru";

который в данном случае загружает в текущее окно Web-страницу. Вы можете опустить объект self, поскольку он является ссылкой на текущее окно.

Чтобы загрузить ресурс в фреймосодержащий документ, можно записать так:

parent.frames[0].location = "http://my.site.ru";

где parent.frames[0] соответствует первому фрейму в текущем документе.


  1. Объект history


Объект history содержит список адресов URL, посещенных в этом сеансе. Объект history связан с текущим документом. Несколько методов этого объекта позволяют загружать в браузер различные ресурсы и обеспечивают навигацию по посещенным ресурсам.

history.propertyName

history.methodName (parameters)


Свойства

Значением свойства length является количество элементов в списке объекта history.


Методы

Метод back() позволяет загружать в браузер предыдущий ресурс, в то время как метод forward() обеспечивает обращение к следующему ресурсу в списке. С помощью метода go() можно обратиться к ресурсу с определенным номером в списке объекта history.

Обработчики событий для объектов history не определены.

Приведем примеры использования объекта history:

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

history.go(-1);

или

history.back();

Для обращения к истории конкретного окна или фрейма применяют объект parent:


parent.frames[0].history.forward();

загружает в первый фрейм предыдущий документ. А если открыто несколько окон браузера можно использовать вид:

window1.frames[0].history.forward();

здесь в первый фрейм окна window1 будет загружен следующий документ из списка объекта history.


  1. Объект navigator


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

navigator.propertyName

Методы и события не определены для этого объекта. Да и свойства только для чтения, так как ресурс с информацией о версии недоступен для редактирования.

Свойства

  • appCodeName - кодовое имя браузера;

  • appName - название браузера;

  • appVersion - информация о версии браузера;

  • userAgent - кодовое имя и версия браузера;

  • plugins - массив подключаемых модулей (похоже только для Netscape);

  • mimeTypes - поддерживаемый массив типов MIME.

Контрольные вопросы:

  1. Назовите объекты, относящиеся к браузеру

  2. Перечислите методы и свойства объекта window

  3. Назовите основные типовые события при работе с объектом window

  4. Перечислите свойства и методы объекта document

  5. Какие основные события возникают при работе с объектом document?

  6. Каково назначение объекта location?

  7. Перечислите свойства объекта location

  8. Каково назначение объекта history?

  9. Перечислите свойства и методы объекта history

  10. Каково назначение объекта navigator?

  11. Перечислите свойства объекта history