Динамический HTML

До этого язык JavaScript рассматривался в чистом виде. Правда, некоторые элементы, такие как окна сообщений, не принадлежат одному этому языку, но невозможно обойтись без ввода и вывода информации. Следующий шаг заключается в объединении JavaScript с HTML с технологиями, предоставляемыми браузерами, для создания смешанной технологии динамического HTML (DHTML).

В данной главе рассматривается:

  • что такое DHTML;
  • какие технологии включает в себя DHTML;
  • возможности, предоставляемые DHTML.

Что такое динамический HTML

Динамический HTML - понятие собирательное. Он представляет собой комбинацию новых тэгов HTML, опций и возможностей программирования (в виде сценариев), что позволяет сделать Web-страницы интерактивными и размещать на них анимационные объекты. Благодаря DHTML Web-страница начинает функционировать подобно любой компьютерной программе, и тем самым стирается различие между жестким диском и Internet.

Новые технологии, которые в совокупности привели к созданию DHTML, впервые использовались в версиях браузеров Netscape Navigator 4 и Microsoft Internet Explorer 4. Хотя ядро DHTML, базирующееся на стандарте HTML 4.0, поддерживалось обоими браузерами, дополнительные возможности программы поддерживаются либо одним браузером, либо другим. Это одна из трудностей, с которыми сталкиваются разработчики при использовании DHTML на Web-страницах. Еще одна существенная проблема заключается в том, что многие пользователи до сих пор работают со старыми версиями браузеров - третьей и даже более ранними.

Примечание Чтобы рассмотреть проблему совместимости DHTML с разными браузерами (здесь речь идет не только о различиях между Netscape Navigator и Internet Explorer, но и о разных версиях), потребовалось бы написать еще несколько книг. Изложенный здесь материал касается только взаимодействия JavaScript с различными технологиями DHTML. Используемые примеры, насколько это возможно, подходят для всех браузеров. Более подробно ознакомиться с технологиями DHTML вы можете на следующих страницах, посвященных браузерам Internet Explorer и Netscape Navigator: http://msdn.microsoft.com/workshop и http://developer.netscape.com.

Основные принципы функционирования DHTML

DHTML включает в себя:

  • объектно-ориентированное представление Web-страницы и всех ее элементов;
  • каскадные таблицы стилей и послойное представление информации;
  • сценарии, использующие все (или почти все) элементы страницы;
  • динамические шрифты.

Примечание В настоящей книге динамические шрифты не рассматриваются.

Рекомендация Многие из вас, конечно, знакомы с этими технологиями. В таком случае можете либо пропустить, либо бегло просмотреть эту главу.

Объектно-ориентированное представление элементов страницы

Любой элемент страницы (раздел или секция, заголовок, параграф, изображение, список, форма и т.п.) считается объектом.

Примечание В компании Microsoft этот принцип называют объектной моделью динамического HTML, в компании Netscape - объектной моделью HTML, а в Web Standards Organization (W3C) - объектной моделью документа. Это различные названия одного и того же понятия.

Каждой гиперссылке, заголовку или текстовому параграфу можно присвоить имя, атрибуты стиля или цвета текста и указать это имя в сценарии, имеющемся на данной странице. Сценарий может быть написан на любом существующем языке программирования (в том числе и на VBScript), но здесь подразумевается использование языка JavaScript. Элементы страницы впоследствии могут изменяться в результате определенного события, например при наведении курсора мыши, при щелчке, нажатии клавиши на клавиатуре либо после истечения заданного промежутка времени. Изменяться может не только стиль и цвет текста, но и весь объект, включая код HTML, текст или рисунок.

Таблицы стилей и разбиение на слои

Таблицы стилей (Style sheets) используются для описания применяемого по умолчанию стиля всего документа или какой-либо его части. Это касается таких параметров, как формат страницы, тип и размер шрифта для элементов текста.

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

Примечание Таблицы стилей можно поместить в заголовок страницы, встроить или присоединить точно так же, как и сценарий JavaScript, - от этого они становятся только полезнее и универсальнее.

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

Сценарии

Сценарии являются третьей составляющей DHTML, которой, собственно, и посвящена эта книга. Сценарии сейчас создаются повсеместно и в различных формах (JavaScript, VBScript, Java-апплеты, управляющие элементы ActiveX и т.д.), но возможности программирования, предоставляемые DHTML, относятся к более высокому уровню. Используя их, можно обратиться к большинству элементов страницы при помощи простого сценария.

Различия между браузерами

Начинающие Web-разработчики часто задаются вопросом, почему Netscape Navigator и Microsoft Internet Explorer так сильно различаются. Чтобы ответить на него, необходимо вспомнить историю браузеров и их производителей. Как и в случае разработки любой другой программы, каждый производитель браузеров шел своим путем. Возьмите, например, два любых текстовых редактора. У них тоже все разное: интерфейс и формат файлов, кнопки и команды. В результате пользователь привыкает к одному текстовому редактору и не хочет переходить на другой. Если бы все текстовые редакторы были унифицированы, они бы отличались только своими недоработками.

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

Представьте, что существует несколько различных телевизионных стандартов и посмотреть какую-либо программу можно только по определенному телевизору. Как бы вы к этому отнеслись? Стали бы вы покупать три или четыре телевизора, соответствующих всем этим стандартам? Конечно, нет. Примерно то же самое происходит и в сети. И пользователи, и разработчики устали преодолевать увеличивающееся с каждым днем расстояние между двумя браузерами.

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

А пока вам придется считаться с теми пользователями, которые еще не обзавелись последними версиями браузеров.

Что можно сделать с помощью DHTML

Возможности DHTML почти безграничны. Web-страницы теперь больше похожи на мини-приложения, чем на статичные документы. Если вам доводилось путешествовать по сети, то вы уже встречались с самыми различными вариантами использования DHTML. Показ слайдов, Web-сайты с определяемым пользователем интерфейсом, прокрутка изображений и анимация, интерактивное представление текста на экране, игры, заполнение форм, калькуляторы и многое, многое другое.

В последних главах книги вы узнаете, как пользоваться языком JavaScript для решения наиболее распространенных задач.

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

Для работы с DHTML JavaScript должен обеспечить взаимодействие с двумя ключевыми технологиями. Это объектная модель браузера и таблица стилей (являющаяся частью объектной модели документа). Объектная модель контролирует браузер и загруженный в него документ, а таблица стилей управляет форматированием и расположением элементов страницы.



[ Назад ] [ Вверх ] [ Далее ] 
Hosted by uCoz