 |
Обработка событий документа
|
|
|
|
Лабораторная работа 2
Изменение оформления HTML-документа с помощью DHTML
Цель работы: ознакомиться с Dynamic HTML. Научиться изменять с помощью него оформление HTML-документа.
Теоретические сведения.
В самом общем виде можно сказать, что Dynamic HTML — это набор технологий, работающих на стороне клиента и призванных преодолеть статичность традиционных Веб-страниц. Точнее говоря, это технологии, которые обеспечивают
· динамическое формирование Веб-страницы в процессе ее загрузки
· динамическое изменение Веб-страницы в ответ на действия пользователя.
Для достижения перечисленных целей используются следующие методы:
· динамическое изменение атрибутов и стилей элементов, составляющих HTML-документ;
· динамическое извлечение данных из внешних источников и включение их в Веб-страницу;
· использование динамически загружаемых шрифтов;
· поддержка визуальных и мультимедийных эффектов при отображении страниц;
· механизмы сохранения информации на компьютере-клиенте между сессиями работы.
Все эти явно разнородные методы покоятся, в действительности, на двух китах. Первым из них является интеграция HTML-документа, каскадных стилей и сценариев клиента, основанная на объектной модели документа. Вторым — использование компонентного программирования, позволяющего нам встраивать однажды разработанные компоненты во вновь создаваемые документы.
Основная идея DHTML – изменение документа с помощью программ, включённых в сам документ. Эти программы реагируют на некоторые события (например, щелчок мыши, сигнал таймера, завершение загрузки документа, изменение размера окна браузера). Программы реакции на события называются в DHTML сценариями или скриптами. В других системах они ещё называются обработчиками событий.
|
|
|
Для лучшего доступа к свойствам документа используется объектный подход, согласно которому документ и окно браузера представляют систему объектов, обладающих определённым набором свойств и отношений (которые также называются свойствами). Их изменение и приводит к изменениям того, что мы видим в окне браузера.
Изменять свойства можно с помощью простого оператора присваивания, но можно и с помощью специальных функций, называемых методами.
Далее рассмотрим основные способы и методы при помощи которых можно изменить оформление web-документа. Для этого следует ознакомиться с представлением документа, а точнее его модели в DHTML.
Объектная модель в Dynamic HTML
Рис. 2.1. Базовая объектная модель документа. Введение в DOM
HTML-документ рассматривается как дерево элементов. Приведем пример, иллюстрирующий этот подход. Пусть наш документ имеет вид:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML><HEAD><TITLE>Моя домашняя страница</TITLE></HEAD><BODY><H1>Моя домашняя страница</H1><P>Добро пожаловать!</P></BODY></HTML>Тогда мы можем представить его в виде следующего дерева:
Корнем этого дерева является элемент HTML, который имеет двух детей — HEAD и BODY. Элемент HEAD является отцом элемента TITLE, а элемент BODY — отцом элементов Hl и (два последних элемента называются братьями, причем Hl является старшим братом, а P — младшим). Все элементы дерева являются потомками корня, а тот является их предком. При этом все элементы и тексты, образующие их содержимое, являются узлами дерева документа.
Каждый элемент данного дерева соответствует элементу HTML и, следовательно, имеет тег(и), содержимое и набор атрибутов. Для перехода к объектной модели документа остается сделать единственный шаг: назвать все элементы дерева объектами, а их атрибуты сделать доступными для чтения и для изменения из сценариев и аплетов. В результате дерево элементов HTML-документа становится динамически управляемым; более того, теперь мы можем легко добавлять к каждому элементу новые свойства, помимо стандартных атрибутов HTML. Именно такой подход был положен в основу динамической модели HTML обозревателей Microsoft, а затем принят за основу стандартов W3C, получивших название объектная модель документа (Document Object Model или DOM). При этом W3C расширил понятие DOM на любые XML-документы, рассматривая HTML DOM как специализированный частный случай с дополнительными возможностями. Таким образом, DOM — это модель HTML- и XML-документов, независимая от платформы и языка программирования, которая определяет:
|
|
|
· интерфейсы и объекты, которые используются для представления документа и манипулирования им;
· семантику этих интерфейсов и объектов, включая их атрибуты и реакцию на события;
· взаимосвязи между этими интерфейсами и объектами.
На сегодняшний день W3C стандартизовал DOM первого и второго уровней (DOM 1 и DOM 2); в стадии рабочего проекта находится DOM 3. Эти аббревиатуры соответственно обозначают следующее:
· DOM 1 описывает базовое представление XML- и HTML-документов в виде деревьев объектов;
· DOM 2 расширяет базовые интерфейсы DOM 1 и добавляет к ним поддержку событий и стилей;
· DOM 3 описывает загрузку и синтаксический анализом документов, а также их отображение и форматирование.
Учитывая текущее состояние вещей, мы рассматриваем здесь только DOM 2 (и содержащуюся в нем DOM 1). DOM 2 состоит из следующих групп взаимосвязанных интерфейсов:
· Core — базовые интерфейсы, определяющие представление любого XML-документа в виде дерева;
· View — интерфейсы, описывающие возможные отображения документа;
· Event — интерфейсы, определяющие порядок генерации и обработки событий;
· Style — интерфейсы, определяющие применение к документам таблиц стилей;
· Traversal & Range — интерфейсы, определяющие прохождение дерева документа и манипулирование областями его содержимого;
· HTML — интерфейсы, определяющие представление HTML-документа в виде дерева.
Обработка событий документа
В этой главе описывается модель обработки событий, принятая в Internet Explorer (далее IE).
|
|
|
Жизненный цикл события
Для того, чтобы уяснить модель обработки событий в IE, начнем с описания жизненного цикла события в этом обозревателе. Этот цикл состоит из следующих фаз:
· Выполняется действие пользователя или иное условие, порождающее событие.
· Создается объект window.event, в который заносятся свойства сгенерированного события.
· Объектная модель документа оповещается о том, что произошло новое событие. Для этого вызывается обработчик данного события того элемента дерева документа, в котором это событие произошло.
· Обработчик выполняет указанные в нем действия и завершает работу. После этого событие просачивается в обработчик событий его отца в дереве документа и т. д. до тех пор, пока не будет достигнут объект window или пока какой-нибудь из обработчиков в этой цепочке не прервет просачивание.
· Если событие имеет типовую обработку и она не была отменена предшествующими обработчиками, то выполняется типовая обработка события.
|
|
|
