Всемирная Паутина (World Wide Web) спровоцировала революцию в информатике, предоставив любому пользователю возможность публикации HTML-документов. До недавнего времени информация в этих документах была в большинстве случаев статической, что требовало реакции сервера на действия пользователя. С введением динамического HTML парадигма Web сместилась от взаимодействия с сервером в сторону создания интерактивных Web-узлов и Web-приложений. Поскольку динамический HTML обеспечивает возможность взаимодействия HTML-документов с пользователем и полного их изменения на клиентском компьютере, вы можете создавать Web-приложения с богатыми возможностями.
Динамический HTML построен на объектной модели, которая расширяет традиционный статический HTML-документ. С помощью данной книги вы изучите динамический HTML и научитесь создавать страницы, которые будут в интерактивном режиме взаимодействовать с пользователем. Материал данной книги предполагает, что читатель знаком с HTML и основными принципами программирования. В книге нет описания HTML или основ программирования на языках JavaScript, JScript или VBScript. Данные языки рассматриваются как инструменты для манипулирования страницами в динамическом режиме.
В конце введения приведено описание четырех частей книги. Прочтите его, чтобы получить понятие о принципе представления информации о динамическом HTML в виде серии блоков. В заключение рассматривается создание интерактивных Web-страниц.
Концепция создания интерактивных Web-страниц не является новой - компании Microsoft и Netscape изначально определили простую объектную модель, которая была представлена как способ создания интерактивных страниц. При более внимательном рассмотрении объектная модель оказалась более эффективной только для базовой проверки форм. Динамические документы были по большей части мифом до появления Microsoft Internet Explorer 4.0, поскольку страница могла быть изменена только при ее создании. Интерактивные документы моделировались путем полной перезагрузки страницы или внедрения объектов на страницу. Многие апплеты Java, элементы управления ActiveX и даже анимированные изображения в формате GIF были разработаны для выполнения операций, аналогичных тексту, что позволяло преодолеть статическую природу HTML. Однако использование объектов вместо стиля и элементов управления содержанием представляет собой не самое лучшее решение.
После изучения множества схем для данных объектов и анимированных изображений GIF, разработчики Internet Explorer пришли к выводу, что для манипулирования документами необходим более мощный прикладной интерфейс программирования (application programming interface, API). С помощью объектной модели, которая обеспечивает полный доступ к документу, Web-мастеры могут использовать встроенные возможности размещения объектов в HTML и каскадные таблицы стилей (Cascading Style Sheets, CSS). Такая модель существенно улучшает производительность, сокращая необходимость загрузки больших анимированных изображений GIF и апплетов. Информация становится доступной мгновенно, поскольку она больше не спрятана внутри изображений или объектов.
Динамический HTML обеспечивает API, необходимый для полного управления HTML-документом. Больше не требуется определять страницу во время загрузки. После загрузки любая часть страницы может быть сразу же изменена в динамическом режиме. Например, вы можете создать приложение, которое разворачивает или сворачивает список содержания документа. Когда пользователь разворачивает или сворачивает список, на экран мгновенно выводится или с него удаляется содержание. Представьте создание страниц, которые автоматически изменяются и настраиваются для пользователя. Все это возможно с помощью динамического HTML.
Способность изменения документа и автоматическое переформатирование документа является основным нововведением, которое используется в динамическом HTML. Традиционные браузеры были основаны на инструментах перехода по документу, которые отображали документ и затем ожидали, пока пользователь выберет новый документ. Когда требовалось внести изменение в документ, для создания новой страницы отправлялся запрос на сервер, который и генерировал ее на машине клиента.
Язык программирования используется для манипулирования объектной моделью динамического HTML, но динамический HTML разработан как независимый от платформы и языка программирования. Поэтому могут быть использованы языки программирования JavaScript, JScript, VBScript, C++, Java, а также другие языки.
В данной книге используется преимущественно язык JScript для доступа к объектной модели документа. JScript является реализацией компании Microsoft стандарта ЕСМА262 (European Computer Manufacturers Association - европейская ассоциация производителей компьютеров), разработанного компаниями Microsoft, Netscape и другими организациями. Данный стандарт формализует языковые конструкции JavaScript и JScript, так что могут быть созданы реализации, допускающие совместное взаимодействие. Важно помнить, что данный стандарт определяет только конструкции языка. Несмотря на то, что язык часто ассоциируется с объектной моделью, данный стандарт не определяет объектную модель. Поэтому, когда вы определяете, поддерживает ли браузер версию JavaScript или JScript, следует четко различать объектную модель и элемент языка. JScript в Internet Explorer 4.0 совместим со стандартом ЕСМА, но реализация JavaScript 1.2 в Netscape 4.0 с ним не совместима.
Примечание: Термины JavaScript и JScript могут быть в общем случае использованы как синонимы при обсуждении языков программирования. В данной книге используется JavaScript, поскольку он более широко известен.
Апплеты и объекты на странице могут взаимодействовать с ней. Например, в Internet Explorer объект, написанный на C++ или другом языке, реализует взаимодействие со страницей посредством объектной модели. Описание метода создания апплетов, использующих динамический HTML, выходит за рамки этой книги. Однако данная книга содержит основы для понимания возможностей взаимодействия динамического HTML с такими объектами.
Если вы знакомы с языком JavaScript и существующей объектной моделью, то обнаружите, что расширения объектной модели динамического HTML совместимы со всеми предыдущими версиями. Все страницы, написанные для предыдущих версий Internet Explorer или Netscape Navigator 3.0, будут выполняться в Internet Explorer 4.0. Такая совместимость позволяет Web-мастерам использовать имеющиеся знания при изучении данных нововведений. Тем, кто не знаком с JavaScript, изучение методов программирования HTML-страницы позволит расширить и улучшить работу создаваемых страниц и приобрести некоторый опыт.
Динамический HTML снимает все ограничения на доступ к документу. Динамический HTML в Internet Explorer 4.0 предоставляет в распоряжение разработчиков ряд новых элементов, которые обсуждаются в следующих разделах.
HTML 4.0 и расширенная поддержка CSS. Браузер Internet Explorer 4.0 поддерживает последний стандарт HTML 4.0, CSSI и множество новых элементов в CSS. Эти стандарты HTML и CSS определяют элементы, представляемые объектной моделью динамического HTML.
Полный доступ к структуре документа. Доступ к элементам в документе поддерживается объектной моделью динамического HTML. Вы больше не ограничены программированием элементов форм. Стиль и содержание любого элемента могут быть изменены в динамическом режиме, и данные изменения будут немедленно отражены в документе.
Кроме того, улучшены внутренние элементы управления для поддержки HTML и CSS, что позволяет Web-мастеру манипулировать внешним видом данных элементов управления, включая установку цвета текста, фона и шрифта на кнопках и текстовых элементах управления. Объектная модель внутренних элементов управления сходна с объектной моделью документа и обеспечивает простой доступ к стилю и содержанию.
Динамический стиль. Таблицы стилей CSS документа могут быть изменены в любое время. Документ не требуется перезагружать из кэша или обращаться на сервер. Объектная модель разработана для предоставления возможности немедленного отображения любых изменений на странице. Например, внешний вид элемента может быть изменен при перемещении указателя мыши или нажатии кнопки мыши на элементе.
Динамическое содержание. Объектная модель позволяет обращаться к содержимому документа и изменять его. Кроме того, при этом не требуется взаимодействие с сервером и реакция будет мгновенной. Например, можно написать утилиту электронных часов в стандартном HTML. Больше не требуется использовать апплеты Java или элементы управления ActiveX для изменения содержания.
Мгновенный ответ пользователя. Динамический HTML предоставляет мощную новую модель событий, которая представляет все пользовательские действия на странице. Сценарии в документе могут реагировать на все действия пользователя внутри браузера. На основе действий пользователя любой апплет в содержании документа или стиле может быть изменен в динамическом режиме.
Web-страницы клиент/сервер. Internet Explorer 4.0 добавляет расширения в HTML-элементы для создания таблиц со связыванием данных и форм с одиночной записью и отчетов. Данные асинхронно загружаются и воспроизводятся в документе, используя несколько базовых HTML-расширений. Данные могут быть кэшированы локально, позволяя осуществлять поиск и сортировку на клиентской стороне без помощи сервера. Например, поисковые машины могут представлять множество результатов поиска одновременно. Напротив, поисковая машина может отправлять запросы клиенту, где они будут воспроизводиться по мере получения. Пользователь может мгновенно сортировать и отбирать данные полностью на локальной машине, не отправляя запросов на сервер.
Эффекты мультимедиа и анимации. Браузер Internet Explorer 4.0 тесно интегрирует эффекты мультимедиа и анимации с содержанием документа. Данные эффекты включают фильтры, которые могут моделировать источники света, тени и другие эффекты, которые реализуются непосредст-венно в тексте или других элементах управления. Могут быть также добавлены эффекты перехода между изображениями и текстом, и даже между страницами.
Все эти элементы основаны на текущем обсуждении внутри рабочих групп консорциума W3C (World Wide Web Consortium). Объектная модель динамического HTML рассматривается рабочей группой объектной модели документа (Document Object Model). Цель этой группы заключается в определении объектной модели, которая является независимой от языка и платформы и удовлетворяет ряду требований для структурированных документов. Объектная модель, которая определена в Internet Explorer 4.0, удовлетворяет всем требованиям, изложенным рабочей группой объектной модели документа.
HTML является приложением языка SGML (Standard Generalized Markup Language - стандартный обобщенный язык разметки). В документе HTML/SGML теги определяют структуру содержания документа. Традиционный SGML-документ имеет три различных компонента: структура, стиль и содержание. С введением динамического HTML был добавлен четвертый компонент: модель поведения. Термин модель поведения (behavior) определяет взаимодействие между пользователем и HTML-страницей. Основное внимание в данной книге сосредоточено на создании HTML-приложений путем манипулирования различными компонентами документа. Структура представлена рядом семейств элементов; стиль представлен для каждого элемента и во всех семействах таблиц стилей. Содержание представлено посредством всех элементов и объекта TextRange. Сценарии (скрипты) манипулируют структурой, стилем и содержанием в ответ на события для создания модели поведения документа.
Структура обеспечивает контекст для информации, которая содержится внутри документа. Например, элементы Header с H1 по H6 предназначены для определения различных заголовков и их относительного значения. После элемента H1 может находиться другой элемент H1 или элемент H2, но не элемент H3. Однако HTML быстро развивается и разделение между структурой и представлением часто игнорируется. Web-мастеры используют теги HTML не для создания структуры, а для определения стиля. Элемент H1 часто используется для отображения текста крупным шрифтом полужирного начертания, а не для определения заголовка высшего уровня. По мере дальнейшего отклонения от SGML были изобретены теги стилей. Например, были введены теги <B> и <I> для выделения текста полужирным начертанием и курсивом.
При просмотре страницы пользователь (а больше всего ее автор) обычно не заботится о ее структуре. Цель автора заключается в создании интересной страницы, которая бы чаще посещалась пользователями Web. Стремление к оригинальности является причиной создания множества стилистических тегов.
Однако нарушение стиля имеет последствия. Первое из них заключается в том, что инструменты становятся менее мощными. Если автор корректно использует структуру, то инструмент индексирования сможет правильно индексировать содержание документа. Если тег <STRONG> используется для обозначения значимости слова, то инструмент индексирования может назначить слову больший вес. Однако многие авторы используют тег <STRONG> просто для отображения слова полужирным начертанием, вместо подчеркивания значения слова, лишая данный тег его значения.
Более важной причиной необходимости правильного структурирования страницы является повышение доступности основной информации. Представьте, что браузер читает информацию вслух вместо ее визуального отображения. Например, браузер для слепых или голосовой браузер для автомобиля. Такие браузеры должны иметь возможность воспроизведения различных особенностей текста. Выделенные слова должны быть произнесены с ударением, и заголовки должны соответствовать списку содержания на странице. Если документ использует разметку только в целях представления, то голосовой браузер не сможет правильно воспроизвести содержание документа.
HTML также определяет набор правил, представляющих правильную структуру документа. Определение типа документа (document definition type, DTD) описывает, какие элементы могут находиться внутри других элементов. Важно понимать, что элементы HTML не могут располагаться в любом месте документа. Обычно плохое воспроизведение Web-страницы в браузере обусловлено несоответствием элементов HTML определению DTD. К сожалению, многие страницы в Web не соответствуют DTD, а вместо того, чтобы заставить пользователей создавать корректные документы, для браузеров был разработан упрощенный набор правил для анализа документа, которые пытаются интерпретировать замысел автора, часто не самым лучшим образом.
До середины 60-х годов стиль в HTML контролировался достаточно просто, путем использования тегов и атрибутов стиля, таких как ALIGN. В этих условиях HTML не являлся действительным языком SGML, в котором структура и стиль определены раздельно. В действительном языке SGML документ может иметь связанную с ним таблицу стиля, которая определяет воспроизведение структурных элементов.
В середине 60-х был введен новый язык SGML - каскадные таблицы стилей (Cascading Style Sheets) для определения стиля в HTML. Спецификация CSS была разработана с участием Берт Хос и Хекен Лью из консорциума W3C, а также с участием многих других членов W3C и была принята большинством браузеров. По существу, элементы Strong в CSS (и даже элемент Bold в данном случае) больше не служат для выделения текста полужирным начертанием. Вместо этого элемент Strong используется традиционным образом для выделения важного слова. Таблица стилей теперь определяет, что элемент Strong должен быть выделен полужирным начертанием:
STRONG (font-weight:bold)
Для полноценного использования возможностей динамического HTML документ должен правильно отделять содержание и структуру от представления. Динамический HTML проще использовать и он работает более предсказуемо с действительными HTML-документами. И как будет показано в этой книге, манипулирование недействительным HTML сложнее и может привести к непредсказуемым результатам.
Изучения программирования интерактивных страниц представляет собой постепенный процесс. Данная книга начинается с изложения основных концепций, затем рассматривается применение этих концепций для обучения методам обращения к различным компонентам браузера и документа. Книга состоит из четырех частей, краткое описание которых приведено ниже.
В главах с 1 по 5 рассматриваются отношения между программированием сценариев и HTML-документом, описывается окно браузера и объясняется использование модели событий динамического HTML. Предполагается, что читатель знаком с основами HTML и программирования на языках JavaScript или VBScript.
В части I вводится понятие иерархии объектов, которая представляет четыре компонента документа: структуру, стиль, содержание и модель поведения. Компоненты подробно обсуждаются в частях II-IV, а поскольку данные вопросы тесно связаны, многие объяснения частично повторяются.
В динамическом HTML все элементы и их атрибуты доступны для программ. В части II показано, как обращаться и использовать возможности семейства элементов документа и как манипулировать индивидуальными элементами внутри документа. Здесь же демонстрируется создание интерактивных форм с богатыми возможностями, которые могут обрабатывать информацию на клиентском компьютере без обмена информацией с сервером.
Основной темой обсуждения в части III является концепция стиля, которая тесно связана с индивидуальными элементами. Используя таблицы стилей, Web-мастер определяет внешний вид документа, пробелы, цветовую гамму и так далее.
В этой части также рассмотрено добавление базовых элементов анимации на HTML-страницу. Динамический HTML представляет набор функций-членов, которые позволяют создавать плавающие HTML-элементы, которые можно перемещать по HTML-странице, и создавать простые эффекты презентации. Кроме того, динамический HTML включает набор мощных расширений, которые позволяют добавлять реальные эффекты мультимедиа, анимации и переходов на вашу Web-страницу. С учетом этих улучшений содержание HTML может быть анимировано с использованием лишь нескольких строк кода.
В части IV демонстрируется, как с помощью динамического HTML можно установить режим динамического изменения страниц. Содержание представлено посредством свойств на каждом элементе и посредством модели текстового объекта. С помощью динамического содержания можно легко обращаться к тексту HTML, неформатированному тексту и изменять их.
В главе 15 показано, как использовать динамический HTML для создания Web-страниц клиент/сервер, включая связывания HTML-таблицы с набором данных, которым можно манипулировать локально. Данная возможность позволяет создавать быстро загружаемые страницы с данными, которые можно легко сортировать, отбирать и редактировать на стороне клиента.
Прилагаемый к книге компакт-диск содержит примеры кода, приведенные в книге, а также индексную страницу со ссылками на все примеры, что позволяет быстро находить требуемые программы.
Кроме того, на компакт-диске находится дистрибутив браузера Microsoft Internet Explorer 4.0 и пакета разработчика Microsoft Internet Client Software Development Kit. Документация по SDK включает полное описание динамического HTML, а также другую полезную информацию.
Персональный Web-узел автора книги (www.insideDHTML.com) содержит дополнительную информацию о динамическом HTML. Компания Microsoft поддерживает несколько Web-узлов, которые содержат информацию, связанную с динамическим HTML, включая Site Builder (www.niicrosoft.com/ sitebuilder) и JScript (www.microsoft.com/JScript).
Были приняты все меры для обеспечения корректности содержания данной книги и прилагаемого компакт-диска. Издательство Microsoft Press публикует исправления в издаваемых книгах на своем Web-узле по адресу mspress.microsoft.com/mspress/support/. Если у вас есть комментарии, вопросы или идеи относительно этой книги или прилагаемого компакт-диска, вы можете направить их в издательство Microsoft Press по обычной или электронной почте:
Microsoft Press
Attn: Inside Dynamic HTML Editor
One Microsoft Way
Redmond, WA 98052-6399
MSPINPUT@MICROSOFT.COM
Обратите внимание, что поддержка продуктов не осуществляется по данным почтовым адресам.