В
предыдущей главе мы рассмотрели базовые операторы языка JavaScript. В
примерах использовали объекты и методы языка. Для тех, кто только начал
изучать JavaScript некоторые моменты могли ввести в заблуждение. Здесь я
более подробно опишу объектную модель языка. Также как можно более подробно
опишу стандартные объекты JavaScript.
Объектная
модель языка JavaScript
При создании
HTML-документов и JavaScript-программ необходимо учитывать структуру
объектов. Все объекты можно разделить на три группы:
1. Объекты браузера
2. Внутренние, или
встроенные, объекты языка JavaScript
3. Объекты, связанные с
тегами языка 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.propertyName
document.methodName (parameters)
Свойства
Объект
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().
Например, можно динамически создавать теги изображений, выводя изображения на
экран посредством следующего:
document.open();
document.writeln("<img sr='myimage.gif'>");
document.close();
С помощью 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
связан с текущим документом. Несколько методов этого объекта позволяют
загружать в браузер различные ресурсы и обеспечивают навигацию по посещенным
ресурсам.
Синтаксис:
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.
Объект
navigator
Объект
navigator содержит информацию об используемой в настоящее время версии
браузера. Этот объект применяется для получения информации о версиях.
Синтаксис:
navigator.propertyName
Методы и
события, как и не трудно догадаться не определены для этого объекта. Да и
свойства только для чтения, так как ресурс с информацией о версии недоступен
для редактирования.
Свойства
- appCodeName - кодовое имя браузера;
- appName - название браузера;
- appVersion - информация о версии
браузера;
- userAgent - кодовое имя и версия
браузера;
- plugins - массив подключаемых модулей
(похоже только для Netscape);
- mimeTypes - поддерживаемый массив типов
MIME.
Пока закончим
эту главу. Здесь я попытался ввести понятия объектов и связанных с ними
методов, свойств и обработчиков событий. Также описал объекты браузера. В
следующих главах будут описаны остальные объекты языка JavaScript.
| 