Как самопровозглашенный веб-мастер, я изо всех сил стараюсь не отставать от новейших веб-технологий. Моя текущая работа — DHTML, или Динамический HTML. Услышав много об этой технологии и о том, как она в конечном итоге произведет революцию в Интернете, я подумал, что мне нужно сойти с дивана и начать узнавать об этом, прежде чем я потеряю право называть себя «веб-мастером». Если вы так же невежественны, как и я, когда дело доходит до DHTML, этот урок для вас. Наслаждайтесь, и, пожалуйста, не стесняйтесь, напишите мне, если у вас есть вопросы.
Это отличный вопрос, и я признаю, что у меня было много проблем с поиском прямого ответа. Я помню публикацию в группе новостей JavaScript, которая пыталась ответить на этот вопрос ответом:
«DHTML — это сочетание HTML и JavaScript»
Я сказал себе: «Разве это не просто веб-страница с JavaScript?» Я был смущен, если не сказать больше. Перебрав сотни результатов поиска в поисковых системах для этого неуловимого ответа на мой вопрос, я все еще не мог найти его. Поэтому я подумал, какого черта, я сначала изучу DHTML, а потом выясню, что это такое! Теперь, когда я являюсь программистом DHTML, я думаю, что готов представить вам достойное однострочное определение слова DHTML:
«DHTML — это сочетание нескольких встроенных функций браузера в браузерах четвертого поколения, которые делают веб-страницу более динамичной»
Видите ли, DHTML — это НЕ язык сценариев (например, JavaScript), а просто функция браузера или расширение, которое дает вашему браузеру возможность быть динамичным. То, что вы действительно хотите изучить, это не сам DHTML, а синтаксис, необходимый для использования DHTML. Прежде всего, вы можете быстро посетить Dynamic Drive, чтобы увидеть, на что способен этот язык.
Как я уже сказал, DHTML — это набор функций, которые вместе обеспечивают динамичность вашей веб-страницы. Я думаю, что сейчас важно определить, что именно имели в виду создатели DHTML, когда говорят «динамический». «Динамический» определяется как способность браузера изменять внешний вид и стиль веб-страницы после загрузки документа. Я помню, когда я изучал JavaScript, меня учили, что вы можете использовать метод JavaScript document.write () для создания веб-страниц на лету. Например:
<script> document.write («Это текст, созданный на лету!») </ script>
«Не плохо», я помню, как говорил себе. Но что, если бы я хотел создавать контент не только на лету, но и по требованию? Тогда я был наивным, я пытался сделать это, вложив приведенный выше код в функцию и вызвав его с помощью кнопки формы:
<input type = «button» onClick = «writeconent ()» value = «text»>
Нажатие кнопки было не чем иным, как большим разочарованием. Вся моя веб-страница была стерта, и у меня остался только текст, созданный функцией.
Это было тогда. Теперь, с введением DHTML, я могу изменять контент на веб-странице по требованию, всякий раз, когда мне так хочется, без необходимости в браузере стирать все остальное. Вот что такое DHTML. Возможность браузера изменять внешний вид и стиль даже после загрузки документа.
Теперь, когда я вас всех взволновал, я думаю, это будет справедливо, если я добавлю амортизатор. Технология DHTML в настоящее время находится на стадии разработки, и NS 4 и IE 4 довольно сильно различаются в реализации этой замечательной технологии. В настоящее время невозможно написать один код DHTML и ожидать его правильной работы в обоих браузерах. Кроме того, два браузера находятся на разных этапах разработки DHTML; Исходя из моих собственных знаний и того, что я слышал, DHTML в IE 4 гораздо более мощный и универсальный, чем NS 4. Я не хочу распространять какую-либо пропаганду, поэтому я оставлю это на этом.
Это может быть как хорошо, так и плохо, в зависимости от вашего взгляда. DHTML в NS 4 довольно прост и сводится к одному слою слова. Я был очень удивлен, но это правда — NS 4 полностью полагается на новый тег, называемый тегом <layer>, чтобы ускорить его магию DHTML. Этот новый тег является динамическим в том смысле, что его можно размещать в любом месте на веб-странице (без связи с другим контентом), перемещать, обновлять его содержимое по требованию и многое другое.
Основной синтаксис
Основной синтаксис тега <layer> не может быть проще (как если бы любой тег в HTML был сложным!):
<layer> Текст внутри слоя </ layer>
Тег <layer> является тегом содержимого, что означает, что вы можете добавить в него содержимое (например, <table>). Продолжайте, попробуйте вставить приведенный выше код на свою страницу … вы заметите, что текст внутри слоя всплывает над другим текстом и перекрывает их. Представьте себе слой в виде листа бумаги, который располагается поверх остальной части страницы и не занимает места в потоке документа.
Атрибуты слоя
Слой сам по себе не может быть более скучным, не говоря уже о бесполезности. К счастью, это еще не все. Слои поддерживают атрибуты, которые позволяют позиционировать его с помощью системы координат x, y, дать ему фон, обрезать его (сделать видимой только определенную область слоя), скрыть его от просмотра и т. Д. Я перечислил самые важные атрибуты слоя ниже:
Атрибуты слоя id Имя слоя, используемое для его идентификации в вашем скрипте left Положение слоя по отношению к координатам x top Положение слоя по отношению к координатам y width Ширина слоя, в пикселях или % height Высота слоя, в пикселях или% bgColor Цвет фона фона слоя Фоновое изображение слоя src Внешний HTML-документ, содержащийся внутри слоя
Смешивайте и сочетайте различные атрибуты так, как вам нравится.
Нажмите здесь для примера слоя, который использует некоторые из вышеуказанных атрибутов
Обратите внимание, что я не указал левый и верхний атрибуты. Когда вы этого не сделаете, слой будет расположен там, где вы его определили.
Скриптовые слои
Вот одна из самых важных вещей, чтобы узнать о слоях — как их написать. В конце концов, это сценарии, которые оживляют слои. Для доступа к слою вам необходимо использовать следующий синтаксис:
document.layername
Доступ к слою — это только первый шаг. После того, как вы получили доступ к слою, вы можете продолжить и управлять одним из атрибутов слоя для создания динамических эффектов.
Нажмите здесь для примера, где цвет фона слоя меняется между красным и синим.
Все атрибуты слоев доступны для чтения / записи, поэтому обязательно поэкспериментируйте с каждым из них!
Когда я начал изучать реализацию DHTML в IE 4 и понял, что это намного больше, чем его коллега по NS. DHTML в IE не опирается ни на один тег, а на новые объекты и свойства, которые вытекают из обычных тегов HTML, с которыми вы привыкли работать, таких как <div> и <table>. Это намного мощнее, но в то же время и намного сложнее понять.
Объект стиля IE 4
Все элементы HTML в IE 4 теперь поддерживают объект стиля, который по сути является «динамическим» объектом, используемым для управления внешним видом и «ощущением» этого элемента. Как и тег <layer>, элементам также может быть присвоен атрибут «id», который затем можно использовать для его идентификации во время сценариев. Например:
<div id = «adiv»> </ div>
В вашем сценарии синтаксис, необходимый для доступа к объекту стиля «adiv», будет выглядеть следующим образом:
adiv.style
Объект стиля содержит много свойств, и, манипулируя этими свойствами, вы можете динамически изменять внешний вид элемента. Я покажу некоторые из этих свойств сейчас:
Важные свойства объекта стиля
- backgroundColor Цвет фона элемента
- backgroundImage Фоновое изображение элемента
- цвет Цвет элемента
- position Тип позиции элемента. Принимаемые значения являются «абсолютными» и относительными
- pixelWidth Ширина элемента
- pixelHeight Высота элемента
- pixelLeft Положение элемента относительно координат x
- pixelTop Положение элемента относительно координат y
Приведенные выше свойства представляют только подмножество общих поддерживаемых свойств, но являются наиболее часто используемыми. Основной синтаксис для манипулирования любым свойством стиля такой же, который я покажу через минуту. Получая доступ к этим свойствам, мы можем изменить внешний вид и стиль большинства элементов HTML (в отличие от только тега <layer> в Netscape)!
Нажмите здесь для простой демонстрации
Обратите внимание, как я изменил цвет текста:
sometext.style.color = ‘красный’
Сначала я использовал идентификатор элемента, чтобы получить к нему доступ, затем, через объект стиля и, наконец, свойство цвета стиля, я смог легко изменить цвет текста по требованию!
Все свойства стиля доступны для чтения и записи и доступны аналогичным образом: элемент id-> style object-> name свойства.
Нажмите здесь для другого примера, который расширяет изображение, когда мышь находится над ним, и возвращает его к исходному размеру, когда мышь выходит.
Да, я знаю, что это не самый практичный пример в мире, но он хорошо иллюстрирует работу DHTML. Изображение меняет размеры по требованию, без необходимости перезагрузки документа. Это то, что один JavaScript никогда не сможет сделать.
Если вы еще не испугались всех различий в синтаксисе и функциональности DHTML в NS 4 и IE 4, вы готовы узнать, как сделать контент на своей странице динамическим или изменять по требованию!
Динамический контент в NS 4
Изменение содержимого в NS 4 включает — как вы уже догадались — тег слоя. Все слои обрабатываются браузером NS как отдельный объект от остальной части страницы со своим собственным объектом документа (который, в свою очередь, содержит другие объекты, поддерживаемые документом). Это очень важно понять, поскольку тот факт, что слои содержат другой объект документа, позволяет создавать динамический контент в NS. Сначала я создам базовый слой, а затем покажу, как изменить его содержимое:
<layer id = «alayer» width = 100% height = 30> </ layer>
Готовы получить доступ к объекту документа вышеуказанного слоя? Вот необходимый синтаксис:
document.alayer.document
Итак, зная эту часть информации, я могу написать скрипт, который меняет содержимое слоя каждые 3 секунды.
Нажмите здесь для примера того, как это делается в Netscape.
Текст динамически генерируется и стирается без необходимости перезагрузки документа!
Динамический контент в IE 4
В IE 4 динамический контент реализуется с помощью специального свойства, называемого innerHTML, которое существует в тегах <span> и <div>. Просто установите для этого свойства новое значение HTML, и содержимое внутри этого span или div будет немедленно обновлено до нового значения! Я проиллюстрирую, как это сделать, изменив приведенный выше пример для создания динамического контента для пользователей IE 4:
Нажмите здесь для примера, который работает для IE.
Те же результаты, просто другой способ добраться туда!
Если вам нравится работать с анимацией, вы будете рады узнать, что благодаря DHTML вся веб-страница теперь является вашей чертежной доской! Вы можете создавать контент, который свободно распространяется по всему экрану. В Netscape это делается путем манипулирования левым и верхним атрибутами тега <layer>. В IE 4 то же самое достигается путем изменения свойств pixelLeft и pixelTop объекта стиля.
Движущиеся элементы в NS 4
Вспомните на уроке 2, что слои поддерживают свойство left и top, которое управляет смещением от верхнего левого угла документа. Ну, используя простую математику и пару строк скрипта, мы можем динамически обновлять эти свойства, чтобы слой двигался! В следующем примере изменяется свойство left слоя, чтобы оно перемещалось по горизонтали при нажатии кнопки.
Видите, все, что я делал, это постоянно добавлял в свойство left «space», чтобы переместить его, и возвращал свойству его первоначальное значение, когда я хочу, чтобы слой вернулся в исходное положение.
Перемещение элементов в IE 4
Кстати, день, когда NS и IE договорились об одной реализации DHTML, это день, когда я могу перестать писать две версии всего (просто выпуская небольшое разочарование). Перемещение элемента в IE 4 в основном включает в себя сначала обертывание этого элемента либо внутри позиционированного span, либо div, затем изменяя свойства spanel или div pixelLeft и pixelTop. Это звучит сложно, но на самом деле очень просто.
Сначала я установил внешний <div>, называемый «космический корабль», в положение относительного, что необходимо для того, чтобы сделать элемент подвижным (вы также можете установить для него значение «абсолютное»). Затем, манипулируя свойством pixelWidth своего объекта стиля, элемент перемещается.
Прежде чем «настоящий» кросс-браузерный DHTML станет доступным (другими словами, когда NS и IE придут в себя), кросс-браузерный DHTML в основном означает использование различных техник сценариев, выбранных вами в те годы JavaScript, чтобы выяснить, какой браузер использует пользователь и выполните код, предназначенный для этого браузера. В этом уроке я сначала проиллюстрирую способ создания «кросс-браузерного» слоя, а затем покажу вам методику написания сценариев, которую я недавно изучил, которая позволяет вам легко определить тип браузера для пользователя.
Создание кросс-браузерного слоя
Итак, у нас есть NS, который понимает тег <layer>, и IE, который понимает <span> и <div>. Если бы мы хотели создать простой эффект DHTML, такой как движущееся изображение, нам обычно нужно было бы использовать два тега: тег слоя для NS 4 и тег div или span для IE 4. Не совсем красиво, а? Ну, я недавно узнал, что на самом деле есть способ создать «кросс-браузерный» слой, который использует только один тег, хотя он немного глючит на стороне NS. Очевидно, NS 4 обрабатывает абсолютно позиционированный div так же, как слой. Итак, без дальнейших задержек, вот пример кросс-браузерного слоя:
<div id = «crosslayer» style = «position: absolute»> </ div>
NS 4 обрабатывает вышеуказанный div точно так же, как и со слоем. Как и любой другой слой, для доступа к нему мы сначала пройдемся по объекту документа, а затем по идентификатору слоя:
document.crosslayer
В IE 4 мы просто использовали бы идентификатор div:
crosslayer
Я обнаружил, что в NS определение слоя таким образом, хотя и удобно с точки зрения кросс-браузерной совместимости, имеет один существенный недостаток. Такой слой не всегда ведет себя так, как должен делать обычный слой, и иногда может фактически вызвать сбой браузера. Просто будьте готовы ожидать неожиданного!
Обнаружение сниффера в браузере
До недавнего времени всякий раз, когда я хотел определить тип браузера своих серферов, я использовал объект навигатора, как большинство программистов на JavaScript. Ниже показано использование этого объекта для обнаружения как NS 4, так и IE 4:
var ns4 = (navigator.appName == «Netscape» && navigator.appVersion> = 4) var ns4 = (navigator.appName == «Microsoft Internet Explorer» && navigator.appVersion> = 4)
Лично я ненавижу использовать объект навигатор — его так сложно использовать (просто посмотрите на этот беспорядок!). Ну, у меня есть хорошие новости для вас. На самом деле существует гораздо более быстрый способ прослушивания различных браузеров, и это называется обнаружением объектов.
Идея основана на том, как работает JavaScript. Если браузер НЕ поддерживает определенный объект, JavaScript возвращает ноль, когда вы ссылаетесь на него. Зная этот факт, мы можем использовать ссылку на объект в вашем операторе if (вместо объекта навигатора), чтобы определить браузер пользователя.
Давайте сделаем пример. Мы знаем, что NS 3+ и IE 4+ поддерживают объект document.images. Если бы мы хотели прослушать эти браузеры, мы бы сделали это:
предупреждение if (document.images) («Вы используете NS 3+ или IE 4+»)
В переводе вышеперечисленного на английский написано: «Если браузер поддерживает объект изображений (что делают только NS 3+ и IE 4+), отправьте сообщение.
Думайте об обнаружении объекта как о косвенном способе определения типа браузера пользователя. Вместо непосредственного определения имени и версии браузера пользователя (с помощью объекта навигатора), обнаружение объекта является более общей, менее изнурительной техникой анализа браузера.
Итак, как мы можем использовать обнаружение объектов для обнаружения NS 4 и IE 4? Ну, только NS 4 поддерживает объект document.layers, и только IE 4 поддерживает document.all. Мы можем использовать эти знания, чтобы легко определить, использует ли пользователь NS 4, IE 4 или оба:
предупреждение if (document.layers) («Вы используете NS 4+»)
предупреждение if (document.all) («Вы используете IE 4+»)
предупреждение if (document.layers || document.all) («Вы используете либо NS 4, либо IE 4+»)
Теперь вам не нужно возвращаться к грязному объекту навигатора, чтобы анализировать ваш браузер!
Ресурсы DHTML
Очевидно, что этот учебник служит только введением в DHTML. Вот несколько полезных ресурсов для продолжения вашей работы с DHTML: