Объектная модель
В предыдущем разделе, мы уже отмечали, что 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 и оза-накомиться
с примерами применения программ-скриптов.
Содержание раздела