Создание справочных систем средствами DHTML

DHTML (Dynamic Hyper Text Markup Language) — язык динамической разметки гипертекста, является очень мощной технологией разработки современных диалоговых систем используемых не только для сетевого представления, но и для локального применения.

Некоторые разработчики причисляют аббревиатуру только к основным понятиям, связанным с языком разметки гипертекста, но это неверно.

DHTML — это объектно-ориентированная технология, включающая в себя три компоненты:

• — язык гипертекстовой разметки документов;
• — языки создания сценариев (JavaScript, VBScript);
• — технологии создания интерактивных приложений (аплетов, сервлетов) таковыми являются объектно-ориентированный язык Java и технология ActiveX;
• — технологию контроля над созданием макета страницы — CSS (Cascade Style Sheets) — каскадные таблицы стилей.

О принципах разметки документов средствами языка гипертекстовой разметки ранее уже много говорилось, далее имеет смысл рассмотреть остальные компоненты-составляющие DHTML-технологии. Целью дальнейшего рассмотрения ставиться изучения и понимание принципов разработки интерактивных компонентов справочных систем.

Программы просмотра гипертекстовых страниц традиционно называют скриптами (scripts) по аналогии с исполняемыми файлами, написанными для командных интерпретаторов. Собственно как это сложилось исторически, программирование просмотра гипертекстовых Web-документов существуют два подхода: написанные скрипты интерпретируются браузером или предварительная компиляция приложения в байт код.

Первый подход следует традиции WWW (World Wide Web), согласно которой для разработки гипертекстовой страницы нужен только обычный текстовый редактор. Второй подход позволяет повысить эффективность выполнения программы и защищенность кода от несанкционированных модификаций. Как первый, так и второй способ опираются на объектно-ориентированный подход к программированию [22]. .

Рассмотрим использование первого подхода. Создание динамического документа подразумевает использование языка сценариев JavaScript или VBScript. Более универсальным является JavaScript, поскольку он появился раньше и поддерживается как Microsoft Internet Explorer, так и Netscape Navigator. Несмотря на то, что оба производителя предлагают свои версии языка — различия в них не очень велики и заключаются в большинстве случаев в поддержке различных объектов. Оптимальной версией языка для поддержки всех основных возможностей свойств и методов объектов является JavaScript.

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

В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволяет легко управлять объектами web-документа, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML. Как это все действует, можно быстро понять на следующем примере.

Рассмотрим простой HTML-документ содержащий два рисунка, одну ссылка и некую форму с двумя полями для ввода текста и одной кнопкой. С точки зрения языка JavaScript окно браузера — это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состояния. Внутри можно разместить документ HTML (или файл какого-либо другого типа).

Такая страница является ни чем иным, как объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. Объект document является очень важным объектом в языке JavaScript. К свойствам объекта document относятся, например, цвет фона для web-страницы. Однако гораздо важнее то, что все без исключения объекты HTML являются свойствами объекта document.

Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма. На рис. 2.13 иллюстрируется иерархия объектов, создаваемая HTML-страницей из приведенного примера.

Рис. 2.13. Иллюстрация иерархии объектов Web-страницы

Разумеется, необходимо иметь возможность получать информацию о различных объектах в этой иерархии и управлять ею. Для этого нужно знать, как в языке JavaScript организован доступ к различным объектам. Как видно, каждый объект иерархической структуры имеет свое имя. Следовательно, если требуется узнать, как можно обратиться к первому рисунку на HTML-странице, то необходимо сориентироваться в иерархии объектов. И начать нужно с самой вершины. Первый объект такой структуры называется document. Первый рисунок на странице представлен как объект images[0]. Это означает, что имеется возможность получить доступ к этому объекту, записав на JavaScript document. images[0]. Если же, например, нужно знать, какой текст ввел пользователь в первый элемент формы, то сперва необходимо выяснить, как получить доступ к этому объекту. И снова обзор начинают с вершины иерархии объектов.

Затем прослеживается путь к объекту с именем elements[0] и последовательно записываются названия всех объектов, которые проходятся. В итоге получается, что доступ к первому полю для ввода текста можно получить, записав: document. forms[0]. elements[0].

А если требуется узнать текст, введенный пользователем. Элемент, соответствующий полю для ввода текста, имеет свойство value, которое как раз и соответствует введенному тексту. Чтобы прочитать искомое значение нужно написать на языке JavaScript строку:

Name = document. forms[0]. elements[0].value;

Полученная строка заносится в переменную name. Следовательно, теперь можно работать с этой переменной.

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

Для встраивания скриптов в тело HTML-документа используется контейнер SCRIPT.

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