Объектная модель
В предыдущем разделе, мы уже отмечали, что JavaScript потдерживает возможность работы с объектами, и что набор объектов фиксирован, т. е. разработчик не может добавлять в него свои объекты. Все доступные объекты JavaScript представлены в виде разветвленной иерархии. Так же необходимо отметить, что все эти объекты относятся именно к окну просмотра HTML- документа в браузере. Каждый объект является совокупностью его свойств, методов и событий. Методы, как мы уже говорили — это некие действия, которые можно произвести с данным объектом, а события — это различные ситуации, возникающие при работе с объектом и адекватно отображающие изменения его состояния. Для каждого объекта набор его свойств, методов и событий уникален, поэтому все объекты необходимо рассмотреть максимально детально.
Иерархия объектов для программ-скриптов является единственной возможностью динамически управлять отображением Web-страниц. Фактически, это интерфейс доступа к внутренним механизмам браузера. И для того, что бы наши скрипты, реализующие возможности DHTML, могли работать в любом браузере, очевидно необходимо, чтобы объектные модели для всех браузеров совпадали. К сожалению, полного соответствия не произошло, и каждый браузер пользуется своей объектной моделью. Но различаются эти модели только в незначительных деталях, основные характеристики одинаковы для всех браузеров. По сути дела, производители браузеров лишь попытались добавить нечто свое к общепринятой модели.
В этой книге мы не будем рассматривать эти дополнения и изменения, и на т. е. веская причина. Еще несколько лет назад достаточно часто можно было встретить в Сети Web-странице с надписями "Эта Web-страница лучше всего отображается в браузере", и указывалось наименование того браузера, которому благоволил разработчик Web-страницы. К счастью, в последнее время в среде разработчиков все-таки распространилось мнение о недопустимости подобного поведения, поэтому всегда необходимо стараться создать Web-страницу, которая бы максимально одинаково отображалась во всех основных браузерах. Исходя из этих же соображений, мы рассмотрим только стандартную объектную модель DHTML, которая одинаково функционирует в каждом браузере.
Прежде чем мы перейдем к непосредственному рассмотрению объектов, следует сделать некоторое уточнение. Дело в том, что некоторые объекты в Web-страницах могут существовать только в единственном экземпляре, как например, объект window, олицетворяющий окно просмотра, а некоторых объектов может быть много. Так например, графические изображения, внедренные в состав содержимого Web-страницы, создают такое множество однотипных объектов. Подобные множества называются коллекциями, и больше всего похожи на массивы однотипных объектов. Доступ к какому-либо конкретному элементу коллекции производится при помощи указания наименования коллекции и порядкового номера интересующего нас элемента.
А вот теперь настало время перейти к непосредственному рассмотрению всего множества объектов, которым мы можем пользоваться для добавления некоей динамики и интерактивности к статичному содержимому наших Web-страниц.
Как мы не раз уже говорили, основой всего является объект window, который позволяет нам оперировать с окном просмотра браузера. Естественно, данный объект обладает набором свойств, методов и событий, который мы и рассмотрим. Следует отметить, что в этой части главы мы устроим лишь "обзорную экскурсию" по объектной модели, а примеры использования объектов рассмотрим немного позже. А сейчас вернемся к объекту window. Как известно, пользователь может открывать несколько копий программы-браузера, а значит, мы будем иметь несколько объектов window. Если при этом в качестве еодежимого этих окон используются Web-страницы, взаимное вязанные между собой гиперссылками, то объекты window также связываются друг с другом при помощи некоторых свойств. Сейчас как раз пришло время рассмотреть все свойства объекта window.
- Свойство client содержит информацию о браузере, используемом пользователем для просмотра данной Web-страницы. Свойство имеет статус "только для чтения", т. е. его значение не может быть изменено в процессе действия программы-скрипта.
- Свойство status содержит текстовую строку,отображающуюся в строке; статуса в нижней части окна программы-браузера.
- Свойство defauitstatus содержит текст, отображаемый в строке статус по умолчанию,
- Свойство opener является ссылкой на окно просмотра, которое было открыто из текущего окна. То есть, в данном свойстве находится ссылка на дочернее окно;
- Свойство parent является ссылкой на родительское окно,, из которого открыли текущее.
- Свойство пате содержит наименование текущего окна.
- Свойство self содержит ссылку на данное окно, в сущности, при помощи этого свойства объект ссылается сам на себя.
- Свойство top содержит ссылку на самое первое окно в иерархии связанных друг с другом окон.
- Свойство closed имеет логический тип и сообщает, закрыто или открыто данное окно.
- diaiogArguments — переменная параметр, или массив параметров, передаваемых диалоговому окну.
- diaiogHeight — высота диалогового окна в пикселах.
- diai.ogwidth — ширина диалогового окна в пикселах.
- dialogic — вертикальная координата верхнего левого угла диалогового окна в пикселах.
- diaio.gi.ef t — горизонтальная Координата верхнего левого угла диалогового окна в пикселах.
- returnvalue — применяется в модальных окнах диалогов, содержит значение, возвращаемое родительскому окну:,
Помимо свойств, естественно, имеется и список методов. Они реализованы в виде функций.
- Метод alert(messagestring) создает окно сообщения. Текст собщения передается к параметре.
- Метод confirm(messagestring) отображает подтверждающее окно, текст которого передан в функцию в качестве параметра. Окно отличается от предыдущего наличием дополнительной кнопки Отмена.
- Метод snowModalpialogturl (url, header, attributes) создает модальное диалоговое окно. В параметрах передается URL отображаемого файла, заголовок окна и атрибуты создаваемого окна.
- Метод open(uri, header, attributes) открывает новое окно браузера. В параметрах передается URL HTML-документа, который будет отображаться в этом окне, заголовок нового окна просмотра и его параметры.
- Метод close () закрывает данное окно.
- Метод setTimeout (expression, time, language) создает таймер, который вычислит выражение или выполнит действие спустя определенное время. Выражение или код действия передается в параметре expression, язык, на котором оно записано — в параметре language, а время, по истечении которого произойдет вычисление выражения или выполнение инструкций,— в параметре time. Функция возвращает идентификатор, который предоставляет возможность управлять созданным таймером впоследствии. Одновременно можно создавать несколько таймеров с уникальными идентификаторами.
- Метод setinterval (expression, time} по своему действию очень похож на предыдущий метод setTimeout, но в отличие от него производит заданное действие не единожды, а многократно, каждый раз перед выполнением делая паузу, длительность которой указана в параметре time.
- Метод ciearTimeout(timerid) ликвидирует созданный таймер. В качестве параметра передается идентификатор ликвидируемого таймера, Который был получен как возвращаемое значение функции setTimeout.
- Метод clear interval (timerid) ликвидирует повторяющийся таймер, созданный при помощи метода setinterval. В качестве параметра передается идентификатор ликвидируемого таймера.
- Метод focus () устанавливает фокус ввода на данное окно. Одновременно инициализируется осбытне onfocus.
- Метод blur () принудительно сбрасывает фокус ввода с окна. Инициализируется событие onbiur.
- Метод prompt(message, defa«lt_value) создает ОКНО с полем ввода и текстом подсказки. Текст подсказки передается в параметре message, а значение, находящееся в поле ввода по умолчанию — в параметре
default_value. - Метод execscript (script, language) выполняет блок кода, который передается в параметре script, а в параметре language — язык, на котором он написан.
- Метод scroll (mode) позволяет принудительно показывать и скрывать) полосы прокрутки в окне просмотра браузера. Для отображения полос | необходимо передать в параметре значение yes, для выключения — по.
Необходимо более тщательно рассмотреть метод open, при помощи которой создается новое окно просмотра браузера. Параметры uri и header достаточно понятны, а параметр attributes'мы не упомянули. Он представляет собой текстовую строку, в которой через запятую записываются пари "свойство—значение". Подобным способом указывается внешний вид создаваемого окна. Перечислим атрибуты создаваемого окна просмотра.
- fullscreen — открыть окно в полноэщшшом режиме или нет. Для полноэкранного режима необходимо значение i или yes, в ином случае — о или по. Эти значения используются и во всех других параметрах, которые указывают на наличие или отсутствие некоего свойства у вновь создаваемого окна просмотра.
- status — регулирует наличие строки состояния. Значения параметра полностью совпадают со значениями предыдущего параметра.
- menubar — указывает на использование строки меню в новом окне просмотра.
- scrollbars — будут ли присутствовать полосы прокрутки.
- resizable — будет ли пользователь иметь возможность изменять размеры нового окна просмотра.
- toolbar — регулирует наличие инструментальной панели.
- width — указывает ширину окна просмотра. В качестве значения указывается количество пикселов.
- height — указывает высоту нового окна просмотра. Как и в предыдущем параметре, значение указывается в пикселах.
- top — вертикальная координата верхнего левого .угла окна просмотра.
- left — горизонтальная координата верхнего левого угла окна просмотра.
Приведем пример использования метода open. Следующая конструкция предназначена для создания нового окна просмотра браузера, в котором будет отображаться основная .страница поискового ресурса www.yahoo.com. В заголовке будет находиться строка "Поисковая система", а само окно будет иметь панель быстрых кнопок и строку меню. Верхний левый угол окна будет находиться в точке с координатами (100; 100), а его размеры — 400 пикселов по вертикали и горизонтали: Выглядеть вызов метода для создания такого окна будет следующим образом:
open("http://www.yahoo.com", "Поисковая система", "menubar=yes, toolbar-yes, top-100, left-lQO, height=400, width=400"!;
У метода showModaioiaiog в качестве третьего параметра тоже передается строка атрибутов создаваемого диалогового окна. Но они не совпадают с набором свойств окна просмотра браузера, поэтому их придется перечислить отдельно.
- diaiogTop —вертикальная координата верхнего левого угла диалогового окна.
- diaiogLeft — горизонтальная координата верхнего левого угла диалогового окна.
- diaiogHeight — высота диалогового окна в пикселах.
- diaiogwidth — Ширина диалогового окна в пикселах.
- center — указывает на то, будет или нет диалоговое окно выводиться в центре экрана. Значения могут быть yes или по.
- border — позволяет выбрать внешний вид границы окна. На выбор предоставляется две вариации: "толстая" и "тонкая" границы. Указание конкретного варианта производится при помощи одного из двух возможных параметров: thin или thick.
- font — предназначендяя установки шрифта, .который будет использован в оформлении диалогового окна. В качестве значения параметра используется выражение CSS.
- font-family —Устанавливает семейство применяемого шрифта.
- font-style — позволяет указывать стиль применяемого шрифта, т. е. используемое начертание: полужирный, курсив, и т. д.
- font-weight — указывает величину используемого шрифта.
- font-variant — модификатор, указывающий, какие буквы будут использоваться в шрифте: строчные или прописные, чей размер не будет превышать размер строчных букв.
- help — регулирует наличие кнопки помощи в верхнем правом углу окна, на строке заголовка. Могут быть использованы значения yes или по.
- minimize — указывает на наличие или отсутствие кнопки минимизации окна в верхнем правом углу диалогового окна.
- maximize — указывает на наличие или отсутствие кнопки распахивания окна на весь экран в верхнем правом углу диалогового окна.
Формат указания атрибутов для диалогового окна немного отличается от порядка указания атрабутов окна просмотра. В данном случае они записываются не через знак равенства, а черед двоеточие. Приведем пример:
ShowModalDialog("dial.html", "New dialog", "border:thin, minimize-yes, center:yes, font-family:Courier, font-style: Bold");
При помощи этого метода мы создаем диалоговое окно, в котором будет отбражатьея содержимое HTML-файла dialhtml, в заголовке будет находиться текстовая отрока New dialog, диалоговое окно будет установлено
в центре экрана, его можно будет свернуть а использоваться в нем будет моноширинный шрифт Courier с полужирным начертанием.
А теперь перейдем к рассмотрению списка событий, которые возникают при работе с объектом window. В состав данного объекта входит девдаь событий.
- Событие onblur возникает в тот момент, когда текущее окна просмотра теряет фокус ввода, т. е. становится неактивным.
- Событие onfocus инициируется:в момент получения окном фокуса ввода. То есть, по своей сути данное событие противоположно предыдущему.
- Событие onerror возникает, если происходит ошибка при загрузке какого-либо ресурса, входящего в состав отображаемой Web-страницы. Чаще всего событие применяется для обработки ошибок загрузки графики и видеовставок.
- Событие onload инициируется сразу после того, как заканчивается загрузка Web-страницы в браузер.
- Событие onhelp инициируется, если пользователь нажал клавишу <F1> или кнопку оперативной справки.
- Событие onscroii возникает, когда пользователь использует прокрутку содержимого окна просмотра при помощи линеек прокрутки.
- Событие onresize возникает, когда пользователь изменяет размеры окна просмотра.
- Событие onbefpreunioad инициируется перед выгрузкой Web-страницы из браузера с маленькой временной задержкой, что позволяет провести некоторые операции, такие, как сохранение данных.
- Событие onunioad инициируется уже непосредственно в момент выгрузки Web-страницы из браузера.
На этом список свойств объекта window заканчивается. Таким образом, мы полностью рассмотрели структуру этого основного объекта. Теперь самое время перейти к другим объектам, которые детально описывают иные механизмы браузера и содержимое Web-страницы.
Как мы говорили, объект window является основой всей объещной иерархии, и все остальные объекты входят в его состав. Эти дочерние объекты мы можем разделить на два типа. Одни из них открывают доступ к частям отображаемой Web-страницы, а другие позволяют нам оперировать отдельными элементами самого браузера. Вот с этих объектов мы и начнем.
Объект location предоставляет нам доступ к URL текущей Web-страницы. Прежде всего, мы рассмотрим описание его свойств.
- Свойство href — содержит URL текущего документа. Если в процессе работы программы-скрипта этому свойству придается новое значение в виде URL, то браузер автоматически загружает в окно просмотра документ, находящийся по этому адресу.
- Свойство hostname — имя Web-сервера, указанное в URL, не включающее в себя явно указанный номер порта, на котором функционирует этот Web-сервер.
- Свойство host — имя Web-eepaepa» объединенное с номером порта, если тот указан явно.
- Свойство port — номер порта, на котором функционирует Web-сервер, чье имя указано в URL данного документа.
- Свойство pathname — путь к HTML-документу в файловой системе сервера.
- Свойство hash — имя локальной гиперссылки, не включающее в себя знак #.
Как видно, при помощи этих свойств мы можем полностью разобрать URL документа на составляющие. Что делать с ними потом, каждый решает для себя сам.
У объекта location есть и методы. Их всего три:
- Метод reload позволяет осуществлять принудительню перезагрузку данного HTML-документа.
- Метод replace (uri) загружает в окно просмотра браузера новый HTML-документ, URL которого передается в метод в качестве параметра. При этом изменяется и обвект history.
- Метод assign (uri) переназначает URL для данного окна просмотра, но принудительного перехода по новому адресу, который передается в качестве параметра, не производится.
Каких-либо специфичных событий объект location не имеет.
Адреса всех посещенных Web-ресурсов записываются в один список, и перемещение между ними осуществляется при помощи кнопок Back (Назад) и Forward (Вперед) любого браузера. Этот список доступен при помощи объекта с наименованием history. Обычно применяется три метода этого объекта.
- Метод forward () загружает следующий документ из списка загруженных ранее документов, фактически, аналог нажатия удаленным пользователем кнопки Forward (Вперед) в своем браузере.
- Метод back о загружает предыдущий документ из общего списка. Дублирует кнопку браузера Back (Назад).
- Метод go (offset) смешается по списку на величину, которая передается в параметре и загружает документ с данным URL. При положительном значении параметра смещение происходит вперед по списку, при отрицательном — назад.
Длина списка URL посещенных Web-страниц хранится в свойстве length.
Теперь рассмотрим объект navigator, предназначенный для получения данных об используемом, удаленным пользователем, браузере. Существование этого объекта обусловлено тем, что в результате "браузерных войн" основные браузеры Internet Explorer и Netscape Navigator по-разному интерпретируют некоторые тега HTML. У них не совпадают иерархии объектов, используемых в сценариях. Именно потому, если мы хотим создать HTML-документ, который будет максимально адекватно отображатся в обоих основных браузерах, мы должны получить информацию об используемом браузере, и на ее основании формировать страницу. Свойства объекта navigator перечислены в следующем списке.
- Свойство appName содержит наименование браузера.
- Свойство appveysion — номер версии браузера.
- Свойство appCodeName — наименование технологии, на которой работает браузер, часто называемой "движком" (engine).
- Свойство cookieEnabied указывает на то, разрешено ли сохранение cookie в данном браузере.
- Свойство us Agent содержит наименование браузера в том виде, в котором оно передается при помощи HTTP-протокола.
В состав Объекта navigator ВХОДИТ еще Два Объекта; mimeTypes И plugins, которые на самом деле являются не просто объектами, а коллекциями. Коллекция mimeTypes содержит различные типы MIME (способы кодирования передававемой информации), которые используются данным браузером. А при помощи коллекции plugins мы можем получить доступ к любому расширению браузера, установленному в качестве дополнения к стандартной поставке.
Помимо знания используемого браузера необходимо иметь информацию об установленном разрешении монитора удаленного пользователя. Для этого мы можем использовать свойства объекта screen.
- width — разрешение экрана по горизонтали.
- height — разрешение экрана по вертикали.
- coiorDepth — количество битов, используемых для указания цвета каждого пиксела. То есть, по сути это, глубина цвета.
- update interval—частота обновления экрана.
Данный-объект не имеет даже методов, так как вея работа с ним происходит путем изменения значений его свойств.
Мы видели, что большинство рассмотренных нами объектов не имеет обособленных событий. Связано это с тем, что большинство событий, происходящих при работе браузера, обрабатывается при помощи специализированного объекта event, который и несет информацию о большинстве подобных событий. В любой момент мы можем обратиться к одному из его свойств и получить информацию о каком-либо изменении статуса или произошедшем действии пользователя. Список свойств данного объекта достаточно обширен по сравнению с другими объектами и выглядит следующим образом.
- Свойство aitKey указывает, нажата или нет клавиша <Alt> в данный момент.
- Свойство button показывает состояние кнопки мыши в момент запроса.
- Свойство canceiBubbie запрещает событиям проходить вверх по объектной иерархии. Дело в том, что у многих объектов существуют одинаковые события, и в момент возникновения подобного события, оно сначала обрабатывается у активного объекта, а затем это же событие могут обрабатывать все родительские объекты. Если же значение свойства canceiBubbie установить в True, то это событие будет обработано лишь один раз и не будет передано по объектной иерархии вверх.
- Свойство ciientx содержит координату текущего объекта по горизонтали.
- Свойство clientY содержит координату текущего объекта по вертикали.
- Свойство fctrlKey указывает, нажата или нет клавиша <Ctrl> в данный момент.
- Свойство fromEiement указывает на элемент, с которого пользователь увел курсор мыши. Данное свойство обычно применяется при обработке событий onmpuseout И onmouseover.
- Свойство keyCode содержит код ASCII клавиши, нажатой пользователем.
- Свойство of fsetx содержит смещение по горизонтали в пикселах курсора мыши от элемента, при обработке которого было инициировано событие.
- Свойство offsetY содержит смещение по вертикали в пикселах курсора мыши от элемента, при обработке которого было инициировано событие.
- Свойство reason является индикатором успешной передачи данных. Если передача не удалась, в данном свойстве указывается причина.
- Свойство returnvalue содержит значение, которое будет возвращаться данным событием.
- Свойство screen x содержит абсолютную горизонтальную координату курсора мыши в пикселах относительно самого экрана.
- Свойство screen y содержит абсолютную вертикальную координату курсора мыши в пикселах относительно экрана.
- Свойство shi ftкеу указывает, нажата или нет клавиша < Shift> в данный момент.
- Свойство srcEiement ссылается на исходный, самый нижний объект в иерархии, при работе с которым было инициировано данное событие.
- Свойство srcjFiiter используется только вместе с событием onf iiterexchange и содержит указатель на графический фильтр, который и породил это событие.
- Свойство toEieraent указывает на элемент, на территории которого находится в данный момент курсор мыши.
- Свойство type содержит тип иницииррванного события. На самом деле, в качестве значения данного свойства используется наименование события без первьк двух символов "on".
- Свойство х содержит горизонтальную координату курсора мыши.
- Свойство у содержит вертикальную координату курсора мыши.
Объект event является именно информационным объектом, поэтому большинство его свойств имеют статус "только для чтения". Мы можем изменять значения только двух свойств: keycode и returnvaiue.
Теперь мы перейдем к рассмотрению объектов, которые описывают саму отображаемую Web-страницу. Основой этой ветви объектной иерархии является объект с наименованием document, который открывает нам доступ к операциям с Web-страницей, отображаемой в окне просмотра браузера. Естественно, в силу того, что данный объект является основой всей соответствующей ветви объектной иерархии, он обладает достаточно обширным списком свойств, .методов и событий. Начнем рассмотрение объекта document c его свойств.
- Свойство activeEiement содержит ссылку; на тот элемент управления Web-страницы, который в данный момент обладает фокусом ввода.
- Свойство alinkcoior содержит обозначение цвета, которым отображаются активные гиперссылки.
- Свойство bgcolor позволяет определять цвет фона загруженной Web-страяйаы.
- Свойство body в качестве значения содержит все наполнение Web-страницы, находящееся между тегами <body> и </body>. Естественно, свойство имеет статус "только для чтения".
- Свойство cookie содержит строку cookie, т. е. некоей информации» которая при зафузке Web-страницы записывается на локальном компьютере удаленного пользователя. Цри помощи технологии "cookie" разработчики Web-страниц могут сохранять некоторую информацию о посетителе страницы на его же компьютере и, таким образом, персонализиро-вать работу Web-сайта с пользователями.
- Свойство domain содержит доменное имя сайта, с которого была подучена загруженная Web-страница.
- Свойство fgcoior содержит определение цвета, применяемого для отображения текста по умолчанию.
- Свойство lastModified содержит, строку с рсазанием даты последнего изменения данной Web-страницы.
- Свойство linkdoior содержит обозначение цвета, которым отображаются ссылки, еще не активированные пользователем.
- Свойство location задает полный URL загруженной в браузер Web-страницы.
- Свойство parentwindow указывает на родительское окно, из которою было открыто текущее окно.
- Свойство readystate показывает текущий статус загрузки данного HTML-документа. В качестве значения данного свойства применяется число от единицы до четырех. Значение "1" указывает, что документ еще не инициализирован и загрузка его в браузер не началась. Значение "2" обозначает, что загрузка началась, но еще не закончилась. Значение "з" указывает, что загрузка закончена, но документ еще не отображен в окне просмотра. Значение "4" обозначает, что Web-страница полностью загружена, отображена в браузере и полностью готова к работе.
- Свойство referrer содержит URL страницы, которая ссылается на текущую Web-страницу загруженную в браузер. То на ту, с которой пользователь и перешел на текущую страничку,
- Свойство title содержит заголовок данной Web-страницы, заключенный между тегам» <title> и </titj«>.:. »
- Свойство URL содержит полный URt'Web-страницы, загруженной в браузер. Фактически дублирует свойство location, но у иных объектов может отличаться от него.
- Свойство viinkcoior определяет цвет, которым отображаются ссылки, уже посещенные пользователем.
На этом список свойств объекта document заканчивается, и мы переходим к рассмотрению его Методов.
- Метод createEiement (teg) срздает HTML-объект, наименование тега которого задано в качестве параметра данного метода. Так, если мы хотим создать на нашей Web-странице дополнительное графическое изображение, следует ВЫПОЛНИТЬ Метод document. createEiement {*IMG").
- Метод clear о очищает содержимое Web-страниц.
- Метод close () закрывает документ» ас ним и текущее окно просмотра.
- Метод eiententrrcmiPoint(x,y) возвращает HTML-объект,который находится в точке с координатами, переданными методу в качестве параметров.
- Метод execcommand(command) выполняет некую операцию, код которой, передан в качестве параметра, над выделенной областью Web-страницы.
- Метод open (type) создает новый документ, mime-тип которого передается в качестве параметра и открывает новое окно просмотра для отбраже-ния создаваемого документа. Метод обычно применяется для создания Web-страниц с динамически создаваемым содержимым, поэтому в качестве параметра передается строка "text/html".
- Метод queryCommandEnabled(command) ПОЗВОЛЯеТ определять, МОЖНО ЛИ выполнять данную команду над выделенной областью Web-страницы.
- Метод queryCcOTnandindetermfcommand) сообщает, какой статус имеет данная команда.
- Метод queryCoramandstate (command) возвращает в качестве своего значе-ния.текущее состояние данной команды. Может использоваться для контроля над выполнением переданных исполняемых инструкций.
- Метод queryeoramandsupported (command) указывает, поддерживается ли данная команда браузером пользователя.
- Метод queryCoraaandText (command) возвращает текстовое выделение, к которому применяется команда, переданная методу в качестве параметра.
- Метод write (text) записывает в тело документа новый HTML-код, который передается в качестве параметра. Таким образом можно динамически формировать содержимое Web^cfpammsi без использования CGI-приложений.
- Метод writein (text) позволяет записывать в тело документа HTML-код, но при этом дописывает в конце добавляемого блока символ перевода каретки.
Как видно, практически все методы объекта document предназначены для динамического формирования его содержимого. Немного позже мы увидим, как это делается, а пока перейдем к рассмотрению списка событий, которые могут возникнуть при работе с данным объектом.
- Событие onftf terupdate возникает, когда пользователь при работе с формой, размещенной на Web-странице, отослал свои данные на сервер, и тот успешно принял и обработал их.
- Событие onBeforeUpdate инициируется в том случае, если пользователь ввел данные в форму, но вместо их отправки попытался выгрузить страницу из браузера.
- Событие onclick происходит в момент, когда пользователь производит на документе одиночный щелчок мышью.
- Событие onDbiciick возникает в момент двойного щелчка мышью на одном из элементов загруженной Web-страницы.
- Событие onDragstart инициируется в тот момент, когда пользователь начинает перетаскивать при потйющи мыши какой-либо элемент загруженной Web-страницы.
- Событие onError инициируется щда наличии ошибки в сценарии или в случае возникновения ошибки.,при передаче каких-либо данных, например, графических изображений.
- Событие onHeip возникает в тот момент, когда пользователь нажимает клавишу <F1>.
- Событие onKeyDown возникает, когда пользователь нажимает какую-либо клавишу. Какая именно клавиша была нажата, мы можем узнать при помощи объекта event.
- Событие onKeyPress постоянно генерируется в то время, когда пользователь нажал какую-либо клавишу и еше не отпустил ее.
- Событие опкеуир возникает, когда пользователь отпускает ранее нажатую клавишу.
- Событие onLoact инициируется в тот момент, когда загрузка HTML-документа в браузер полностью заканчивается.
- Событие onMouseoown возникает в тот момент, когда пользователь нажимает какую-либо кнопку мыши.
- Событие onMouseMove постоянно генерируется при перемещении пользователем мыши.
- Событие onMbuseOut возникает, когда пользователь уводит курсор мыши с данного объекта.
- Событие onMouseOver возникает при попадании курсора мыши на объект.
- Событие onMouseup инициируется в тот момент, когда пользователь отпускает заранее нажатую кнопку мыши.
- Событие oaReadystateChange инициируется каждый раз, когда по каким-либо причинам изменяется значение свойства readystate.
- Событие onseiectstart инициируется в тот момент, когда пользователь начинает выделять мышью некую часть Web-страницы.
На этом заканчивается список событий, которые могут возникать при работе с объектом; document. Мы рдсемотреяи полностью структуру этого объекта. Но мы уже говорили что он является "родителем" для многих других объектов, которые более детально описывают элементы Web-страниц. Необходимо рассмотреть и их.
Мы уже видели, что объекта document существует свойство body, которое содержит все тело Web-страницы. Но страницы с фреймовой структурой вообще не содержат тег <body>. И здесь мы можем работать с коллекцией фреймов, которая носит наименование frames. Мы уже говорили, что коллекции, по сути, являются массивами, состоящими из объектов. Так, если нам надо получить доступ к какому-либо фрейму, мы можем сделать это либо при Помощи его порядкового номера, дибо при помощи его наименования. Так, например, если самый верхний фрейм нашей Web-страницы носит наименование "topframe", то обратиться к нему мы можем при помощи двух эквивалентых конструкций:
window.frames(0)
window,frames{"topframe")
Как мы помним, нумерация в массивах, а, следовательно, и в коллекциях, начинается с нуля. Но для циклической обработки коллекции нам необходимо будет знать не только стартовый номер, но и общее количество элементов, входящих в состав данной,коллекции. Поэтому следует знать, что для каждой коллекции существует служебное свойство length, которое содержит количество элементов в коллекции. Следует помнить, что количество элементов и порядковый номер последнего элемента — разные вещи, так как нумерация открывается нулем.
Из приведенного примера видно, что для доступа к элементу коллекции стоит сначала указать родительский объект. Наименования объектов разделяются точками.
Каждый элемент коллекции frames функционально эквивалентен объекту window, поэтому обладает всеми его свойствами, методами, событиями и встроенными объектами, исключая объекты, обеспечивающие доступ к внутренним механизмам браузера, такие как history и navigator. Следовательно, каждый элемент коллекции frames имеет встроенный объект document со всем его содержимым.
Объект document, как мы знаем, полностью описывает Web-страницу, отображаемую в окне просмотра браузера или фрейма. Следовательно, в состав этого объекта должны входить другие объекты и коллекции, которые смогут предоставить нам доступ к любому HTML-блоку, к любому тегу. Рассмотрим список этих объектов и коллекций с кратким описанием каждого из них.
- Коллекция links содержит все гиперссылки и области, сформированные тегами <агеа> на данной Web-странице.
- Коллекция forms обеспечивает яеступ ко всем формам данного HTML-документа. Соответственно, каждый элемент этой коллекции содержит в качестве своих составных частей объекты, позволяющие обращаться к различным органам ввода данных, из которых и состоит форма.
- Коллекция anchors содержит все закладки на странице, доступ к которым осуществляется при помощи гаперссылок.
- Коллекция linages предназначена для хранения объектов графических изображений, внедренных в состав содержимбго Web-страницы.
- Коллекция scripts обеспечивает доступ ко всем программам-сценариям, которые были вставлены в код HTML-документа при помощи тега <script>.
- Коллекция applets содержит все внедренные объекты, такие как аппле-ты, элементы ActiveX, графические изображения, видеоклипы и любые объекты, обрабатываемые и отображаемые при помощи расширений браузера.
- Коллекция piugins содержит объекты, связанные со всеми внедренными элементами, обрабатываемыми расширениями браузера.
- Коллекция stylesheets предоставляет нам доступ ко всем стилдевым таблицам, внедренным в данный HTML-документ.
- Коллекция filters содержит все графические фильтры, Примененные к содержимому данной Web-етраницы. Графические фильтры не уиаследо-ванны из HTML, они являются исключительной прерогативой DHTML.
- Колекция all содержит ссылки на все теги и объекты, внедренные в состав содержимого данной Web-страницы.
- Объект selection позволяет работать с выделенной частью содержимого Web-страницы- Обычно это выделение производит пользователь.
- Объект textRange представляет собой блок текста, при помощи которого обычно разработчик динамически формирует текстовое содержимое HTML-документа.
Мы перечислили основные составные гчасги объекта document. Конечно, одного их перечисления не достаточно для того, чтобы начать с ними работать. Но несколько позже, в следующих разделах данной главы мы будем разбирать примеры задач, решаемых с ломощью этих объектов, а следовательно, нам придется тщательно рассмотреть их структуру.
А сейчас пора перейти к рассмотрению; событийной модели DHTML и оза-накомиться с примерами применения программ-скриптов.