разработка веб-сайтов под ключ
обучающие программы для веб-разработчиков

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

У объектов есть свойства, которые описывают их, как прилагательные описывают существительные. Мы пользуемся схемой oбъект.свойство.

Еще у объектов есть методы, или действия, которые можно к ним применить. После метода ставятся скобки по схеме oбъект.мeтoд(). У разных объектов разные свойства и методы.

А тепеь мы познакомимся с иерархией объектов JavaScript.

Иерархия объектов JavaScript

На вершине иерархии расположено окно браузера Window, являющееся объектом, в котором отображается текущий документ, содержащий код сценария. Обращение к окну браузера выполняется по имени window(синонимом имени window является имя self).

Связи между объуктами различных уровней, представленные на рисунке означают, что объект верхнего уровня содержит ссылку на объект нижнего уровня. Например, между объектами Window и Document есть связь. Это означает, что объект Window имеет свойство с именем document, содержащее ссылку на объект типа Document.

Исключением является объект Location. Из рисунка видно,что на этот объект ссылается объект как Window, так и объект Document. В объекте Document ссылка на объект Location также содержится в свойстве с именем location.

Самая большая путаница в том, что некоторые объекты также являются и свойствами.

• Window — только объект.
• Document является свойством окна, но в свою очередь и объектом.
• Form - это свойство документа, но также и объект со своими свойствами!
• Value (значение) и SRC (источник) — только свойства!
• Здесь представлены не все объекты и свойства. Однако этого достаточно, чтобы вы поняли концепцию в целом... Все команды начинаются сверху от window и идут по нисходящей. То есть, нельзя написать document.text.form или pic.src.document. Это неправильный порядок, следует писать слева направо от главного к второстепенному.
• Важно: чтобы показать содержимое поля формы, существует свойство value (значение), например, document.form.text.value. Если вы просто напишете document.form.text, это даст информацию о поле формы, но не о его содержании!

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

Например, после выполнения строки кода
winname=window.name;
в переменную winname будет записана последовательность символов, представляющая имя текущего окна. Чтобы закрыть окно, надо вызвать метод close( ),использовав для этого следующее выражение:

window.close( );

Поскольку свойства document объекта Window содержат ссылку на текущий документ, обратиться к документу можно с помощью выражения window.document. Однако, document-это объект, содержащий свойства и методы. Таким образом, обратиться к свойству или методу документа можно так:

window.document.свойство
или
window.document.метод( )

Чтобы вызвать метод write(), которым мы пользовались при написании первого сценария, надо использовать следующее выражение:

window.document.write("строка_для_вывода");

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

• window.navigator.ahhName— имя браузера.
• window.document.bgColor— цвет фона документа.
• window.location.protocol (или window.document.location.protocol) — имя протокола, использованного для получения текущего документа.
• window.alert( )— вывод на экран окна с сообщением. Текст сообщения пепредается методом alert() в качестве параметра.

• window.document.open()— открывается поток, позволяющий присоединить данные к документу.

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

Обращение document.write() означает то же самое, что и window.document.write().

Перемещаясь вниз по иерархии объектов, мы сталкиваемся с неожиданной проблемой. До сих пор не возникало необходимости организовывать ссылки нескольких объектов одного типа. Так, если в веб-странице не используются фреймы, то в окне отображается один HTML-документ, на который и ссылается свойство document объекта Window. Точно также окно принадлежит конкретному браузеру, ссылка на который содержится в свойстве navigator. Однако с объектами, на которые ссылается объект Document, дело обстоит иначе.

;Как видно из рисунка, объект Document, связан с объектами Link, Image и Form, представляющими соответственно гипертекстовые ссылки, изображения и формы. В составе документов может быть несколько объектов одного типа, по этой причине ссылки на них не могут храниться в обычных свойствах типа location и navigator, поэтому они организованы по-другому.

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

• links[]— массив ссылок на гипертекстовые связи, сформированные в HTML-документе с помощью дескриптора <A>.
• images[]— массив ссылок на изображения, включенные в состав веб-страницы с помощью дескриптора <IMG>.
• forms[]— массив ссылок на формы, созданные посредством дескриптора <FORM>.

Объекты Link, Image и Form помещаются в массивы links[], images[] и forms[] в том же порядке, в котором они встречаются в исходном тексте HTML-документа. Так, images[0] ссылается на первое изображение в составе веб-страницы, images[1]-на второе изображение и т.д. Теперь, если мы захотим, например, определить ширину второго изображения на веб-странице, мы сможем сделать это с помощью следующей команды:

size_x = document.images[1].width;

После ее выполнения в переменной size_x будет записана ширина указанного изображения в пикселях.(В правой части выражения не указано имя window. Это допустимо, т.к. объект Window непосредственно ссылается на объект Document.)

Объект Form, в свою очередь, ссылается на интерактивные элементы, принадлежащие форме. Несмотря на то, что каждый из элементов является объектом определенного типа(например Text, Password,Radio,Checkbox и т.д.), для их описания существует также обобщенный тип Element. Соответственно ссылки на интерактивные элементы, принадлежащие форме, содержатся в свойстве elements[] объекта Form. Так, чтобы получить строку текста, которую пользователь ввел в поле редактирования, которое принадлежит форме, расположенной на веб-странице, надо использовать следующее выражение:

line = document.form[0].elements[2].value;

;В результате выполнения данной команды, значение третьего интерактивного элемента, принадлежащего первой форме, входящей в состав текущего документа, будет скопировано в переменную line. Команда выполнится корректно лишь в том случае, если мы правильно укажем индекс массива elements[]. Он должен соответствовать порядковому номеру элемента в составе формы.

Внизу представлена веб-страница, содержащая различные объекты: изображения, гипертекстовые ссылки и формы ввода. Текст возле каждого из элементов показывает, какое выражение должен использовать разработчик веб-сценария JavaScript для того, чтобы обратиться к этому элементу.

Исходный текст веб-страницы.

Изображение веб-страницы в окне браузера.

Как видите, документ содержит два изображения, две гипертекстовые ссылки и одну форму с тремя интерактивными элементами. Как видно из рисунка и текста HTML-документа, для обращению к первому изображению, которое содержится в файле prd.gif, используется последовательность идентификаторов window.document.images[0]. Ко второму изображению, хранящемуся в файле prd1.gif, можно обратиться с помощью выражения window.document.images[1]. Аналогично для обращения к гипертекстовым ссылкам и элементам формы используются выражения window.document.links[0] и window.document.links[1], и window.document.forms[0].elements[0], window.document.forms[0].elements[1], window.document.forms[0].elements[2] соответственно.

Имена объектов JavaScript

Создание и сопровождение сценариев, описанных выше, можно упростить. Для этого надо вместо порядковых номеров объектов на веб-странице использовать их имена. При создании практически любого объекта можно указать атрибут NAME. Последовательность символов, заданная в качестве значения этого атрибута, становится именем объекта.

<FORM ACTION="" METHOD="POST" NAME="person">

Имя <INPUT TYPE="TEXT" NAME="firstname">

Фамилия <INPUT TYPE="TEXT" NAME="lastname">

<INPUT TYPE="SUBMIT">

</FORM>

С помощью этой формы выполняется передача информации о пользователе. Для нее выбрано имя person. В форме содержаться два поля редактирования: в одном из них(firstname) пользователь должен внести свое имя, а в другом (lastname)-свою фамилию.

Если бы форма не имела имени, обратиться к ней можно было бы лиш с помощью выражения document.forms[0](при условии, что эта форма единственная на веб-странице, лобо первая, в противном случае пришлось бы менять индекс массива forms[]). Однако в дескрипторе <FORM> содержится атрибут NAME="person", поэтому мы можем обратиться к форме по ее имени document.person. Соответственно, чтобы получить текст, введенный в полях редактирования, можно использовать следующие выражения:

fnm = document.person.firstname.value;

и

lnm = document.person.lastname.value;

После выполнения этих команд в переменную fnm будет записана строка, введенная пользователем в поле Имя, а в переменную lnm-строка введенная в поле Фамилия.

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

fnm = document.forms[0].firstname.value;

и

lnm = document.person.elements[1].value;