Преодоление различий DHTML

Есть и другой способ улучшения внешнего вида 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 и одинаково работающий в обоих браузерах:

 
  
  
  
 
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 использует тег

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

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

... 
  
 ...

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