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

С выходом каждой новой версии браузера в синтаксисе языка HTML появлялись дополнительные теги и атрибуты. Не миновала эта участь и четвертые версии двух самых распространенных в сетевом мире браузеров - Microsoft Internet Explorer и Netscape Communicator (ранее Netscape Navigator). Однако на сей раз компании-разработчики сумели предложить нечто большее, чем просто расширение языка HTML. Они реализовали новую документную объектную модель браузеров (Document Object Model) вкупе с новым диалектом HTML - Dynamic HTML (DHTML), ориентированным на использование этой модели. Применяя эту "сладкую парочку" в скриптах Web-страниц или самостоятельных приложениях, можно не только отображать статическую информацию, но и изменять содержимое документа, его стиль, осуществляя это на стороне компьютера-клиента без обращения к серверу Web.

Ключевым отличием Dynamic HTML от обычного HTML является новый взгляд на документ. Теперь документ рассматривается в качестве коллекции отдельных объектов, его составляющих: параграфов, рисунков, таблиц и т. д., ко всем атрибутам которых имеется полный доступ из скриптов. Доступные атрибуты объектов включают свойства, методы и события, возникающие как реакция на какое-либо действие пользователя или системы. Например, при нажатии указателем мыши на рисунке возникает событие onmousedown для объекта, представляющего этот рисунок, и всех объектов более высокого порядка в иерархии документа. Все это позволяет без применения технологий Java и ActiveX строить Internet- и intranet-приложения с развитым пользовательским интерфейсом, что соответственно снижает требования к пропускной способности сети и производительности компьютера.

Однако при всех достоинствах нового языка следует учитывать, что реализации Dynamic HTML в деталях все-таки отличаются (видимо, компании Microsoft и Netscape не смогли договориться между собой). В результате не так-то просто создать Web-страницу, которая при активном использовании новых возможностей Dynamic HTML выглядела бы одинаково в обоих браузерах. Но, как говорится, нет ничего невозможного. И в подтверждение этого предлагаю небольшой пример, показывающий некоторые возможности DHTML и одинаково работающий в обоих браузерах:

 
 Пример для IE 4.x и NC 4.x 
  
  
 

Dynamic HTML

Dynamic HTML

Dynamic HTML

onMouseOut="ChangePosition(10)">
onMouseOver="ChangePosition(50)" onMouseOut="ChangePosition(10)">

Dynamic HTML

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

К сожалению, браузеры по-разному описывают стили документов: например, некоторые стили в Internet Explorer пишутся через дефис, а в Netscape Communicator слитно. Это же относится и к описанию типа шрифтов. Если для Internet Explorer нужно перечислить названия шрифтов через запятую в общих кавычках, то для Netscape Communicator необходимо заключать в кавычки название каждого шрифта. Чтобы решить проблему различия в синтаксисе описания стилей и достигнуть совместимости с обоими браузерами, необходимо дважды объявить стиль параграфа (тег

):

P {font-family: "Comic Sans MS, Times New Roman"; font-size: 50; color: red }
P {fontfamily: "Comic Sans MS", "Times New Roman"; fontsize: 50; color: red }

Эта маленькая хитрость основана на интересном свойстве браузеров: если они не в состоянии распознать какой-либо тег HTML, то такой тег попросту игнорируется. Таким образом, при загрузке примера в Netscape Communicator будет пропущена первая строка описания стиля параграфа и распознается лишь вторая, а в Internet Explorer наоборот.

Различается и обработка событий. Для разделения документа на произвольные части Explorer использует тег

, а Communicator - тег . И хотя последний также может распознавать
, он не способен обрабатывать события, описываемые этим тегом. Чтобы добиться обработки событий обоими браузерами, необходимо сделать нечто большее, чем простое дублирование строки исходного текста. Для этого Netscape Communicator предусматривает тег : событие, содержащееся внутри него, Communicator будет пропускать, а Explorer, напротив, выполнит его. В общем виде структуру исходного текста с обработкой событий можно представить следующим образом:

 
 		<- выполняется только NC 
     
       
<- выполняется только IE ...
<- выполняется только IE
<- выполняется только NC

Помещая тег

между и , мы тем самым исключаем его из области видимости Netscape Communicator. Explorer же, наоборот, сумеет распознать и обработать
, пропустив при этом все остальные теги.

Так как Explorer и Communicator будут видеть разные теги, то доступ к ним из скриптов также должен осуществляться разными способами. Для этого в приведенном примере производится проверка поддержки специфичной для Explorer коллекции all объекта document:

... 
 if( null != document.all ) 
    document.all.divTest.style.left=newposition;    
 	 // выполняется только в IE 
 else 
    left=newposition;      // выполняется только в NC 
 ...

Обратите внимание на код, выполняемый Netscape Communicator: объект, у которого изменяется свойство left, не указан. Это одна из особенностей этого браузера: если скрипт находится между тегами и , то объектом по умолчанию становится текущий объект LAYER, в то время как в Explorer объектом по умолчанию всегда является window.

Показанный нами способ определения типа браузера далеко не единственный. Например, можно анализировать свойство userAgent объекта navigator, принадлежащего объекту window. При этом функция ChangePosition может выглядеть так:

... 
  
 ...

Существует еще один способ, заставляющий браузер выполнить предназначенный для него код, - опишите обработку событий непосредственно в тегах:

... 
  
  
    
onMouseOver=" document.all.divTest.style.left=50"
onMouseOut=" document.all.divTest.style.left=50"> ...

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


Михаил Сашников - разработчик компании Digital Design, MSCD. Тел. в С.-Петербурге: (812) 168-39-72

493