JavaScript: Глава 2 - Объектная модель языка. Объекты браузера
В предыдущей главе мы рассмотрели базовые операторы языка JavaScript. В
примерах использовали объекты и методы языка. Для тех, кто только начал
изучать JavaScript некоторые моменты могли ввести в заблуждение. Здесь
я более подробно опишу объектную модель языка. Также как можно более
подробно опишу стандартные объекты JavaScript.
Объектная модель языка JavaScript
При создании HTML-документов и JavaScript-программ необходимо учитывать
структуру объектов. Все объекты можно разделить на три группы:
Объекты браузера
Внутренние, или встроенные, объекты языка JavaScript
Объекты, связанные с тегами языка HTML
Объектами браузера являются зависимые от браузера объекты: window (окно), location (местоположение) и history (история). Внутренние объекты включают простые типы данных, такие как строки (string), математические константы (math), дата (date) и другие. Объекты,
связанные с тегами HTML, соответствуют тегам, которые формируют текущий
документ. Они включают такие элементы как гиперсвязи и формы.
Методы объектов
С
объектами связаны методы, которые позволяют управлять этими объектами,
а также в некоторых случаях менять их содержимое. Кроме того в языке
JavaScript имеется возможность создавать свои методы объектов. При
использовании метода объекта, нужно перед именем метода указать имя
объекта к которому он принадлежит. Например, правильным обращением к
методу document является выражение document.write(), а просто выражение write() приведет к ошибке.
Свойства объектов языка JavaScript
В объектно-ориентированном программировании используется также термин свойство.
Свойство - это именованное значение, которое принадлежит объекту. Все
стандартные объекты языка JS имеют свойства. Например, в прошлой главе
мы использовали в одном из примеров свойство bgColor объекта document. данное свойство соответствует атрибуту bgColor тега <body>
- цвет фона документа. Для обращения к свойству необходимо указать
имена объекта и свойства, разделив их точкой. Каждый объект имеет
собственный набор свойств. Набор свойств нового объекта можно задать
при определении объекта. Однако, некоторые свойства объктов существуют
только для чтения, и вы не можете их менять. В таких случаях можно
получить только значения этих свойств. Как показывает практика, такие
свойства изменять обычно без надобности и проблем в связи с этим не
возникает.
Объекты браузеров
Браузеры поддерживают объекты
различных типов. HTML-объектами являются объекты, которые соответствуют
тегам языка HTML. К ним относятся метки, гиперсвязи и элементы формы -
текстовые поля, кнопки, списки и др. Объекты верхнего уровня, или
объекты браузера, - это объекты, поддерживаемые в среде браузера: window, location, history, document, navigator. Объекты, перечисленные в таблице, создаются автоматически при загрузке документа в браузер.
Имя объекта
Описание
window
Объект верхнего уровня в иерархии объектов языка JavaScript. Фреймосодержащий документ также имеет объект window.
document
Содержит
свойства, которые относятся к текущему HTML-документу, например имя
каждой формы, цвета, используемые для отображения документа, и др. В
языке JS большинству HTML-тегов соответствуют свойства объекта document.
location
Содержит свойства, описывающие местонахождение текущего документа, например адрес URL.
navigator
Содержит информацию о версии браузера.
Свойства данного объекта обычно только для чтения. Например свойство:
navigator.appname содержит строковое значение имени браузера.
history
Содержит информацию обо всех ресурсах, к которым пользователь обращался во время текущего сеанса работы с браузером.
Рассмотрим более подробно каждый объект.
Объект 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, определяемых в теге <body>. Эти же атрибуты могут быть определены в тегах <frameset> фреймосодержащих документов.
пример:
Мы хотим загрузить, например, страницу http://my.site.ru в окно размером в 640х480 пикселов:
myWin = open ("http://my.site.ru", "myWin",
"width=640, height=480"); Закрыть это окно можно из любого другого окна используя: myWin.close();
Объект document
Объект document соответствует всему гипертекстовому документ, вернее, той его части, которая заключена в контейнер <body> . . . </body>.
Документы отображаются в окнах браузера, поэтому каждый из них связан с
определенным окном. Все HTML-объекты являются свойствами объекта document, поэтому они находятся в самом документе. Например, в языке JS к первой форме документа можно обратиться, используя выражение:
document.forms[0]
в то время как к первой форме во втором фрейме следует обращаться выражением:
parent.frames[1].document.forms[0]
Объект document удобно использовать для динамического создания HTML-документов. Для этого применяется HTML-контейнер<body> . . . </body>.
Хотя в этом контейнере можно установить множество различных свойств
документа, всеже имеются такие свойства, значения которых нельзя
установить с помощбю этих тегов. Синтаксис тега я не буду приводить, -
его можно найти в спецификации HTML. Мы же, будем считать, что
синтаксис HTML знаем. Ну а если для вас имеются затруднения, можете
найти полное описание языка HTML на множестве других страниц в
Интернете. Перейдем же к свойствам и методам объекта document. Для обращения к свойствам и методам объекта document применяется следующий синтаксис:
Объект document имеет достаточно много свойств, каждое из которых соответствует определенному HTML-тегу в текущем документе:
alinkColor- соответствует атрибуту alink тега <body>;
anchors- массив, который соответствует всем меткам в документе;
bgColor- соответствует атрибуту bgColor (цвет фона) тега <body>;
cookie- представляет собой фрагмент информации, записанный на локальный диск ("ключик");
fgColor- соответствует атрибуту fgColor (цвет текста) тега <body>;
forms- массив, содержащий все теги <form> в текущем документе;
images- масив изображений, ссылки на которые заданы в текущем документе;
lastModified- дата последнего изменения текущего документа;
linkColor- соответствует атрибуту linkColor (цвет гиперсвязи по умолчанию);
links- масив, содержащий все гипервязи в текущем документе;
location- соответствует адресу URL текущего документа;
referrer- соответсствует адреу URL документа, из которого пользователь перешел к текущему документу;
title- соответствует содержимому контейнера <title> . . . </title>;
vlinkColor- соответствует атрибуту vlinkColor (цвет <FONT COLOR="#800080">посещенной связи) тега <body>.
Методы
Метод clear() предназначен для очистки текущего документа. Лучше использовать для очистки методы open() и close(). Для записи информации в браузер применяют методы write() и writeln().
Покольку эти методы записывают текст в браузер в HTML-формате, вы
можете создавать любой HTML-документ динамически, включая готовые
приложения на языке JavaScript. Если в окно загружен документ, то
запись данных поверх него может привести к сбою. Поэтому в окно следует
записывать поток данных, для чего с помощью метода document.open() нужно открыть документ, а затем, вызвав необходимое количество раз метод document.wtite(), записать данные в документ. В заключение, чтобы послать данные в браузер, следует вызвать метод document.close().
Обработчики событий
В тегах <body> и <frame> можно использовать обработчики событий, связанных загрузкой и выгрузкой документа, onLoad и onUnload. Примеры использования событий будем разбирать позже.
Приведем несколько примеров использования объекта document.
Для записи текста в HTML-формате в браузер иногда применяют функцию document.writeln(). Например, можно динамически создавать теги изображений, выводя изображения на экран посредством следующего:
С помощью JavaScript программ, а в частности при помощи объекта document, можно создавать законченные HTML-документы и другие JavaScript программы. Например:
document.open(); document.writeln("<script language='JavaSript'>"+ "alert('Hello World!')"+
"</script>"); document.close(); Красиво, не правда ли! Заметьте,
что в приведенных примерах неколько строк объединяются при помощи
операции сложения +. Этот способ удобно применять, когда строки текста
программы слишком длинны, чтобы поместиться в редактируемом окне, или
когда сложные строки необходимо разбить на несколько простых.
Объект 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 при первоначальной загрузке документа, потому, что документы всегда загружаются в окна.
Свойства
Объект location имеет следующие свойства:
hash - имя метки в адресе URL (если задано);
host - часть hostname:port адреса URL текущего документа;
hostname - имя хоста и домена (или цифровой IP-адрес) в адресе URL текущего документа;
href - полный адрес URL текущего документа;
pathname - часть адреса URL, описывающая каталог, в котором находится документ;
port - номер порта, который использует сервер;
protocol - префикс адреса URL, описывающий протокол обмена, (например, http:);
target - соответствует атрибуту target в теге <href>.
Методы и обработчики событий
Для объекта location методы, не определены, также не связан с какими-либо обработчиками событий.
Примеры
Чтобы присвоить свойству location текущего окна в качестве значения новый адрес URL, используйте такой вид: self.location="http://wdstudio.al.ru"; который в данном случае загружает в текущее окно Web-страницу. Вы можете опустить объект self, поскольку он является ссылкой на текущее окно. Чтобы загрузить ресурс в фреймосодержащий документ, можно записать так: parent.frames[0].location = "http://my.site.ru";
где parent.frames[0] соответствует первому фрейму в текущем документе.
Объект history
Объект history содержит список адресов URL, посещенных в этом сеансе. Объект history
связан с текущим документом. Несколько методов этого объекта позволяют
загружать в браузер различные ресурсы и обеспечивают навигацию по
посещенным ресурсам.
Значением свойства 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.
Объект navigator
Объект navigator содержит информацию об используемой в
настоящее время версии браузера. Этот объект применяется для получения
информации о версиях. Синтаксис:
navigator.propertyName
Методы
и события, как и не трудно догадаться не определены для этого объекта.
Да и свойства только для чтения, так как ресурс с информацией о версии
недоступен для редактирования.
Свойства
appCodeName - кодовое имя браузера;
appName - название браузера;
appVersion - информация о версии браузера;
userAgent - кодовое имя и версия браузера;
plugins - массив подключаемых модулей (похоже только для Netscape);
mimeTypes - поддерживаемый массив типов MIME.
Пока
закончим эту главу. Здесь я попытался ввести понятия объектов и
связанных с ними методов, свойств и обработчиков событий. Также описал
объекты браузера. В следующих главах будут описаны остальные объекты
языка JavaScript.
