Динамические Web- страницы:
Технологии DHTML
Введение в Dynamic HTML
Dynamic HTML — это набор технологий, работающих на стороне клиента, которые обеспечивают динамическое формирование Web- страницы в процессе ее загрузки и динамическое изменение Web- страницы в ответ на действия пользователя.
Для достижения перечисленных целей используются следующие методы:
•динамическое изменение атрибутов и стилей элементов, составляющих HTML-документ;
•динамическое извлечение данных из внешних источников и включение их в Web -страницу;
•использование динамически загружаемых шрифтов;
•поддержка визуальных и мультимедийных эффектов при отображении страниц;
•механизмы сохранения информации на компьютере-клиенте между сессиями работы.
Все эти явно разнородные методы покоятся на двух китах:
•интеграция HTML-документа, каскадных стилей и сценариев клиента, основанная на объектной модели документа.
•использование компонентного программирования, позволяющего встраивать однажды разработанные компоненты во вновь создаваемые документы.
Основные преимущества DHTML:
• Повышение конкурентоспособности узла.
(Узел, содержащий динамически изменяемые цвета, анимированную графику, систему выпадающих меню и другие стандартные элементы пользовательского интерфейса, явно привлекательнее для пользователя, чем обычные статические страницы. Разумеется, при этом нужно иметь чувство меры и соблюдать общие принципы дизайна.)
• Легкость сопровождения.
(DHTML позволяет нам вынести типовые элементы формирования страниц нашего Web-узла в отдельные таблицы стилей и сценарии, а затем включать их одинаковым образом во все страницы. Это, безусловно, упрощает сопровождение и минимизирует количество возникающих опечаток и других ошибок.)
• Уменьшение трафика.
(Одна из основных особенностей DHTML состоит в том, что он переносит основную тяжесть по формированию Web-страниц с сервера на клиент. Платой за это является загрузка с сервера сценариев и программных компонентов, которые при правильном проектировании незначительны по объему. В результате динамические страницы загружаются и отображаются намного быстрее статических, что особенно важно для отечественных каналов связи, не страдающих чрезмерно высоким качеством.)
Базовая объектная модель документа (DOM)
Пусть наш документ имеет вид: <HTML>
<HEAD>
<TITLE>Моя домашняя страница</TITLE> </HEAD>
<BODY> <H1>Моя домашняя страница</H1> <P>Добро пожаловать!</P>
</BODY> </HTML>
Тогда мы можем представить его в виде следующего дерева:
Корнем этого дерева является элемент HTML, который имеет двух детей —
HEAD и BODY.
Элемент HEAD является отцом элемента TITLE, а элемент BODY — отцом элементов H1 и P .
(два последних элемента называются братьями, причем H1 является
старшим братом, а P — младшим).
Все элементы дерева являются потомками корня, а тот является их предком.
При этом все элементы и тексты, образующие их содержимое, являются узлами дерева документа.
Каждый элемент данного дерева соответствует элементу HTML и, следовательно, имеет тег(и), содержимое и набор атрибутов.
Для перехода к объектной модели документа остается сделать единственный шаг:
•назвать все элементы дерева объектами;
•сделать их атрибуты доступными для чтения и изменения из сценариев и аплетов.
Врезультате:
•дерево элементов HTML-документа становится динамически управляемым;
•к каждому элементу можно легко добавлять новые свойства, помимо стандартных атрибутов HTML.
Структура DOM
<html>
<head>
<title>My title</title> </head>
<body>
<a href="..."> My link
</a>
<h1>My header<h1> </body>
</html>
Элементы (Element), один из них - корневой Атрибуты (Attribute)
Текстовые узлы (Text)
DOM — это модель HTML-и XML-документов, независимая от платформы и языка программирования. DOM является всего лишь отображением Web-
страницы и без сценария JavaScript ни на что не пригодна.
[ XML (eXtensible Markup Language — расширяемый язык разметки), рекомендованный W3C язык разметки, фактически представляющий собой свод общих синтаксических правил. XML — текстовый формат, предназначенный для хранения структурированных данных (взамен существующих файлов баз данных), для обмена информацией между программами, а также для создания на его основе более специализированных языков разметки (например, XHTML), иногда называемых словарями. W3C расширил понятие DOM на любые XML-документы, рассматривая HTML DOM как специализированный частный случай с дополнительными возможностями. ]
Согласно DOM документу можно поставить в соответствие дерево объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:
•получение узлов;
•изменение узлов;
•изменение связей между узлами;
•удаление узлов.
DOM определяет:
•интерфейсы и объекты, которые используются для
представления |
документа и манипулирования им; |
•семантику этих интерфейсов и объектов, включая их атрибуты и реакцию на события;
•взаимосвязи между этими интерфейсами и объектами.
Модель DOM не накладывает ограничений на структуру документа:
Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями родительский-дочерний.
Изначально различные браузеры имели собственные модели документов (DOM), не совместимые с остальными. Для того, чтобы обеспечить взаимную и обратную совместимость, специалисты международного консорциума W3C классифицировали эту модель по уровням, для каждого из которых была создана своя спецификация. Все эти спецификации объединены в общую группу, носящую название W3C DOM.
На сегодняшний день введены в стандарт W3C DOM первого и второго уровней:
DOM 1 - описывает базовое представление XML- и HTML-документов в виде деревьев объектов;
DOM 2 - расширяет базовые интерфейсы DOM 1 и добавляет к ним поддержку событий и стилей.
В стадии рабочего проектирования
DOM 3 - описывает загрузку и синтаксический анализ документов, а также их отображение и форматирование.
DOM 2 (и содержащаяся в нем DOM 1)
состоит из следующих групп взаимосвязанных интерфейсов:
•Core — базовые интерфейсы, определяющие представление любого XML- документа в виде дерева;
•View — интерфейсы, описывающие возможные отображения документа;
•Event — интерфейсы, определяющие порядок генерации и обработки событий;
•Style — интерфейсы, определяющие применение к документам таблиц стилей;
•Traversal & Range — интерфейсы, определяющие прохождение дерева документа и манипулирование областями его содержимого;
•HTML — интерфейсы, определяющие представление HTML-документа в виде дерева.
Последняя версия объектной модели документа содержит четыре ключевых нововведения:
•доступ ко всем элементам страницы;
•постоянное обновление страницы;
•полная и всеобъемлющая модель событий;
•оперативное изменение содержимого страницы.
Иеще одна главная особенность - изменения на Web-странице могут происходить в любое время. До, во время и после загрузки страницы, когда пользователь нажимает клавишу, щелкает кнопкой мыши, перемещает курсор и т.д.