Объектная модель MS Internet Explorer

Как отмечалось в уроке 2 при обсуждении языков сценариев, последние используются для расширения возможностей некоторой среды, которая для этих целей "поставляет" ряд объектов, доступных из сценариев. В рамках клиентского Web-программирования такой средой является программа просмотра Интернета. Если она поддерживает программирование на каком-либо языке сценариев, то она предоставляет ряд объектов для взаимодействия с ней из сценариев.

Раскрываемые браузером MS Internet Explorer объекты представляют собой иерархию, во главе которой расположен объект window, соответствующий окну браузера. Ряд объектов (navigator, history, location) непосредственно связан с функциональностью самого браузера, тогда как другие объекты (семейство frames и объект document) позволяют получить доступ к отображаемому в данный момент в окне браузера документу HTML.

Рис. 1.

1.6.1. Объект window

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

Из всех перечисленных свойств объекта window сейчас мы остановимся на трех последних.

Изменяя значения свойств screenLeft и screenTop объекта window (задаются в пикселях) можно изменить положение окна браузера относительно верхнего левого угла экрана монитора компьютера клиента.

Свойство status полезно для получения в сценарии строки, отображающейся в строке состояния окна браузера, а также для отображения информации для пользователя, например, что документ HTML обработан и загружен:

Методы объекта window

У этого объекта есть много полезных методов, но основным можно считать метод open(), с помощью которого создается новое окно браузера (загружается еще одна его копия). Синтаксис этого метода представлен ниже:

В переменной хранится возвращаемая методом ссылка на новое окно, которую можно использовать для доступа к нему из сценария JavaScript.

Первым параметром имя_файла определяется полный или относительный URL-адрес открываемого в окне документа (если задана пустая строка, то открывается пустая станица).

Второй параметр имя_ссылки_окна позволяет задать имя вновь открытого окна, которое можно использовать в документе HTML в атрибуте target гипертекстовой ссылки для указания загрузки в него документа.

Параметр строка_параметров - строка, представляющая список параметров вновь создаваемого окна со значениями. Каждый параметр задается в виде параметр=значение. Все параметры вместе со своими значениями в строке отделены друг от друга запятыми. Допустимые параметры:

height=высота - определяет высоту окна в пикселях;

width=ширина - определяет ширину окна в пикселях;

left=значение - определяет горизонтальную координату верхнего левого окна в пикселях;

top=значение - определяет вертикальную координату верхнего левого окна в пикселях;

resizable={yes|no|1|0} - может ли пользователь изменять размеры окна;

location={yes|no|1|0} - отображается ли адресная строка;

menubar={yes|no|1|0} - отображается ли строка меню;

scrollbars={yes|no|1|0} - отображаются ли полосы прокрутки;

titlebar={yes|no|1|0} - отображается ли строка заголовка окна (только для HTML-приложений);

toolbar={yes|no|1|0} - отображается ли панель инструментов;

status={yes|no|1|0} - отображается ли строка состояния.

Например, следующий вызов, создаст новое окно браузера без панели инструментов и полос прокрутки, загрузив в него документ с указанным первым параметром абсолютным адресом. В любом документе HTML, для ссылки на это окно можно использовать имя linkWin. В сценарии ссылаться на это окно можно с помощью переменной winExample.

Вывод во вновь открытое окно осуществляется методом write() объекта document этого окна.

Закрывается окно методом close() без параметров:

В сценарии можно использовать специальное имя self для ссылки на текущее окно или использовать переменную, хранящую ссылку на требуемое окно:

Ряд методов объекта window влияет на положение окна относительно экрана монитора, его размеры и отображаемый документ:

Ряд методов объекта windowотображают диалоговые окна для взаимодействия с пользователем (мы с ними уже знакомы из предыдущих уроков):

Метод setTimeout() запускает выполнение кода JavaScript, задаваемого первым строковым параметром, через определенный промежуток времени после выполнения метода.

Метод setInterval() запускает периодический "процесс" выполнения кода JavaScript, задаваемого первым строковым параметром, с интервалом, указанным вторым параметром.

Интервал задается в миллисекундах (1000 соответствует 1 секунде).

Необязательный параметр язык определяет язык сценария для выполняемого кода (JavaScript, VBScript). По умолчанию предполагается язык JavaScript.

Для остановки запущенных процессов используются соответственно методы и , параметрами которых является переменная, в которой сохранен результат запуска "процесса":

Одновременно можно запустить много "процессов". Обычно метод setInterval() используется для создания страницы HTML с движущимися элементами.

Фреймы

В HTML элемент-контейнер <FRAMESET>...</FRAMESET>, используемый вместо элемента BODY, определяет специальный тип документа, позволяющий отображать одновременно несколько документов HTML в одном окне браузера. Область отображения браузера разбивается на несколько частей (фреймов) с помощью вложенных в элемент FRAMESET элементов FRAME, в которых и отображаются соответствующие документы HTML.

Контейнер <FRAMESET> может содержать кроме элементов <FRAME> и другие теги <FRAMESET>, образуя, таким образом, вложенные наборы фреймов. Пример страницы HTML, задающей вложенные наборы фреймов, представлен ниже:

Для доступа к фреймам из сценария JavaScript предусмотрен объект top, являющийся родителем всех фреймов (в нашем примере clock, menu и content). Для ссылки на фреймы страницы можно использовать либо символические имена, либо свойство-массив frames объекта top, в котором содержатся ссылки на все фреймы страницы. Так, на первый фрейм можно сослаться двумя способами:

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

Свойство location фрейма содержит адрес загруженного в него документа. Изменение значения этого свойства приведет к загрузке нового документа в соответствующий фрейм. Следующий фрагмент кода HTML задает на странице menu.html кнопку с именем Во фрейм clock, при щелчке на которую во фрейм clock загружается страница HTML:

Для доступа из сценария к странице, загруженной во фрейм, следует использовать его свойство-объект document.

Если загружаемый во фрейм документ сам содержит набор фреймов, то объектная модель немного усложняется. В этом случае получить доступ ко всем фреймам через объект top нельзя. фреймы, отображаемого в заданном фрейме документа, являются подчиненными этому фрейму, который, в свою очередь, порождается от объекта верхнего уровня top.

1.7.1 Объект navigator

Является свойством объекта window и предоставляет информацию об используемом клиентом браузере.

1.7.2. Объект location

Объект location также является свойствоm объекта window и связан с URL-адресом отображаемого в браузере документа. Синтаксис URL-адреса имеет следующий вид:

Примеры URL-адресов

и соответствие их частей указанным в синтаксисе обозначениям:

Свойства

href возвращает полный адрес загруженного документа. Если его изменить, то будет загружен новый документ. Является свойством по умолчанию, поэтому для загрузки нового документа из сценария можно использовать следующую конструкцию:

Остальные свойства hash, host, hostname, pathname, port, protocol, search соответствуют частям адреса загруженного документа, используемые как для получения, так и для изменения соответствующих частей адреса.

Методы

1.7.3. Объект history

Объект history (свойство объекта window) содержит список адресов документов HTML, ранее загружавшихся в браузер.

Его свойство length хранит общее количество адресов в этом объекте.

Метод go() этого объекта загружает страницу из списка посещенных. Текущая страница имеет индекс 0, предыдущие по отношению к текущей страницы индексируются отрицательными целыми числами, а последующие положительными целыми числами:

Для перемещения на одну страницу назад и на одну страницу вперед относительно текущей в списке посещенных можно использовать соответственно методы back() и forward() этого объекта.

Объекты доступа к странице и ее элементам

1.7.4. Объект document

Этот объект содержит информацию о текущей загруженной странице. Для каждой страницы создается один объект document.

Свойства

Часть свойств соответствуют атрибутам тега-контейнера <BODY>: background, bgColor, fgColor (атрибут text), linkColor (атрибут link), alinkColor (атрибут alink) и vlinkColor (атрибут vlink). Другие свойства не соответствуют атрибутам указанного тега. Например, URL хранит адрес загруженного документа, parentWindow предоставляет ссылку на окно-родитель.

Семейства

Этот объект используется наиболее часто в связи с его двумя полезными методами write() и writeln(), которые записывают в документ информацию, и тем самым, позволяют динамически его создавать.

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

1.7.4. Объект body

Этот объект соответствует элементу BODY документа HTML и встроен в создаваемую браузером иерархию объектов, соответствующих элементам HTML всего отображаемого документа. Его "родителем" является объект document и поэтому в сценарии доступ к нему осуществляется с учетом этих "родственных" отношений:

По-существу он представляет область отображения окна браузера.

Часть его свойств соответствует атрибутам элемента BODY: aLink, link, vLink, background, bgColor, bgProperties, bottomMargin, topMargin, rightMargin, leftMargin, text. Из других свойств, специфичных для этого объекта, полезными представляются свойства, характеризующие размеры области отображения браузера и видимой части документа относительно всего большого документа:

1.7.5. Объект form

Каждая форма в документе, определенная тегом <FORM>, создает объект form, порождаемый объектом document. Ссылка на этот объект осуществляется с помощью переменной, определенной в атрибуте NAME тега <FORM>. В документе может быть несколько форм, поэтому для удобства ссылок и обработки в объект document введено свойство-массив forms, в котором содержатся ссылки на все формы документа. Ссылка на первую форму задается как document.forms[0], на вторую - document.forms[1] и т.д. Вместо индекса в массиве forms можно указывать строку, значение которой равно имени переменной для формы. Например, если в документе присутствует единственная форма со значением атрибута name=form1, то любой из следующих операторов JavaScript содержит ссылку на эту форму:

Последний оператор возможен в силу того, что объект document порождает объект form (как и все остальные объекты, соответствующие элементам HTML страницы) и ссылку на него можно осуществлять по обычным правилам наследования языка JavaScript.

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

Каждый объект form имеет также семейство elements, содержащее ссылки на все подчиненные форме элементы в том порядке, как они определены в документе HTML.

Элементы формы, точнее, их объекты, имеют свойство name, значение которого равно значению атрибута NAME тега <INPUT>, а также свойство value, значение которого определяется смыслом атрибута VALUE элемента формы. Например, для элементов text и textarea значением этого свойства будет строка содержимого полей ввода этих элементов; для кнопки подтверждения - надпись на кнопке и т.д.

У объекта, соответствующего элементу управления SELECT, имеется семейство options, в котором хранятся ссылки на объекты, соответствующие элементам OPTION этого элемента управления.

Для формы одним из важных действий на странице является проверка правильности заполнения полей пользователем на машине клиента до пересылки их на сервер. В следующем примере разъясняется, как выполнять эту процедуру.