Модель языка JavaScript

В предыдущей главе мы рассмотрели базовые операторы языка 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используют следующие варианты записи:

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

Свойства

Объект 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-тегу в текущем документе:


Методы

Метод 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 имеет следующие свойства:


Методы и обработчики событий

Для объекта 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

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

Свойства

Пока закончим эту главу. Здесь я попытался ввести понятия объектов и связанных с ними методов, свойств и обработчиков событий. Также описал объекты браузера. В следующих главах будут описаны остальные объекты языка JavaScript.