WMASTER.RU - Всё для web-мастера

Дом Книги

Любой разработчик Web-страницы - и профессионал, и любитель - рано или поздно осознает, что возможности языка гипертекстовой разметки (HTML) не могут реализовать все его творческие задумки. Например, как заставить сайт "откликаться" на действия пользователя, изменяться в зависимости от времени года, суток, то есть стать "динамическим"? А вот благодаря технологии Dynamic HTML (DHTML), вы сможете сделать активной любую часть Web-страницы.

Возникает, естественно, вопрос: "С чего же начать?". В первую очередь, необходимо представлять, что же такое HTML, - тут вам помогут учебники. Например, для первого знакомства подойдет "Учебник по HTML" (http://www.magnit.net/master/), а дополнит и расширит ваши познания "Справочник начинающего по HTML" www.dov.narod.ru
(http://virtlib.odessa.net/books/book/0001.htm). Теперь смело приступайте к изучению технологии DHTML, которая предполагает использование языков написания сценариев: например, JavaScript и VBScript. Каждый из них имеет свои достоинства и недостатки.
Благодаря простоте и совместимости (его "понимают" как Internet Explorer, так и Netscape Navigator), JavaScript пользуется большой популярностью. Элементарную информацию ищите тут "Введение в JavaScript для Мага" (автор - Стефан Кох, http://rtfm.vn.ua/prog/js/jsmag/).

Одновременно по мере распространения браузера Microsoft Internet Explorer растет популярность VBScript - языка, хотя и не уступающего по своим возможностям JavaScript, однако - с весомым недостатком - он не обрабатывается некоторыми браузерами, в частности Netscape. Собственно, VBScript - это реализация Visual Basic, ориентированная на Web, именно его предпочитает Microsoft при разработке документации по DHTML. В общем, кто знаком с VB или VBA для MS Office, без труда изучит VBScript, ведь он базируется на Basic (он знаком многим со школьной скамьи и является самым простым, но и достаточно мощным языком программирования). Впрочем, и тем, кто уже умеет немного программировать на VB, и начинающим рекомендуем статьи "Азбука Visual Basic" (http://www.cm.f2s.com/). Так, что же выбрать - JavaScript или VBScript? По-моему, чтобы создать хорошо читаемый обоими браузерами сайт, желательно использовать оба языка, тем более, они похожи. Приведу простой пример.
На VBScript:

<HTML>
<HEAD>
<TITLE>Для обработки текстового поля использован VBScript</TITLE>

</HEAD>
<BODY LANGUAGE=VBScript onLoad=Page_Initialize ()>
<INPUT TYPE="TEXT" NAME="Textbox" SIZE="20">
<SCRIPT LANGUAGE=VBScript>
SUB Page_Initialize()
Textbox.Value="Привет от VBScript!"
END SUB
</SCRIPT>
</BODY>
</HTML>
На JavaScript:
<HTML>
<HEAD>
<TITLE> Для обработки текстового поля использован JavaScript</TITLE>

</HEAD>
<BODY onLoad = "Page_Initialize()">

<FORM NAME="Form1">
<INPUT TYPE="TEXT" NAME="Textbox" SIZE="20">
</FORM>
<SCRIPT LANGUAGE = JavaScript>
function Page_Initialize()
{
document.Form1.Textbox.value = "Привет от JavaScript !"
}
</SCRIPT>

</BODY>
</HTML>

Даже из этого примера очевидно, что код на VBScript компактнее и не требует создания дополнительных объектов, к тому же, он, в отличие от JavaScript, не чувствителен к регистру символов. Однако последний "универсален", поэтому, так как почти каждый пятый посетитель сайта - пользователи Netscape, его нельзя сбрасывать со счетов.
Думаю, вы уже поняли, что реализации DHTML для Internet Explorer и Netscape Navigator, двух наиболее популярных на сегодняшний день браузеров, различны, и при создании качественного дизайна Web-страницы этот нюанс следует учитывать. Но в основе использования любого из языков сценариев лежит обработка событий, генерируемых браузером.
Код скрипта должен располагаться в специальном контейнере, ограниченном открывающим (<SCRIPT>) и закрывающим (</SCRIPT>) тэгами, как это показано выше. В простом случае синтаксис этого тэга выглядит так:
<SCRIPT LANGUAGE = язык>

</SCRIPT>

Для Internet Explorer допустимы следующие атрибуты:
<SCRIPT LANGUAGE = язык CLASS = строка DEFER EVENT = строка FOR = строка ID = идентификатор SRC = местонахождение TITLE = строка TYPE = строка>, а для Netscape Navigator:

<SCRIPT LANGUAGE = язык SRC = местонахождение>.
Браузеры, не поддерживающие скрипты, скорее всего, просто проигнорируют расположенный между этими тэгами код. В программах-сценариях используются встроенные свойства HTML-элементов. К примеру, размер поля находится в свойстве size, а текст - в value. Свойств элементов достаточно много.
DHTML дает возможность в любой момент изменить Web-страницу, а также создать формы для отправки и обработки данных. Отдельно следует выделить возможности использования мыши, в частности следующие события:
- onMouseDown - событие, связанное с нажатие кнопки мыши, "кликом"; для определения координат нажатия следует использовать объект event, входящий в объект window, координаты x и y определяются соответственно выражениями window.event.x и window.event.y;
- onMouseOver - помещение указателя мыши в область окна документа;
- onMouseOut - курсор мыши выходит за пределы области окна документа;
- onMouseMove - перемещение мыши.
В зависимости от браузера, методы обработки событий для мыши сильно различаются. Но это тема для другого разговора.
В качестве отклика на эти события, к примеру, может быть загружено изображение, изменен HTML-код или текст произвольной, определенной разработчиком, области страницы.
Если созданы две версии сайта для различных браузеров, можно запрограммировать ту или иную последовательность действий, в зависимости от того, каким приложением пользуется Ваш гость. Здесь приведен пример сценария, определяющего и выводящего на экран название и версию используемого браузера:
<SCRIPT LANGUAGE = JavaScript>
if (navigator.appName == "Microsoft Internet Explorer")

{
document.write("<H3><CENTER>")
document.write("Вы работаете в Microsoft Internet Explorer" + navigator.appVersion)
document.write("</H3></CENTER>")
}

if (navigator.appName == "Netscape")

{
document.write("<H3><CENTER>")
document.write("Вы работаете в Netscape Navigator" + navigator.appVersion)
document.write("</H3></CENTER>")
}

</SCRIPT>

В Internet Explorer'е обрабатывают не только элементы управления, но и любые объекты Web-страницы. То есть события, методы и свойства могут быть добавлены для каждого тэга, таким образом в процессе просмотра сайта меняются значения атрибутов тэгов. Как это работает на практике? Допустим, Вы хотите, чтобы в зависимости от действий пользователя изменялся фон или изображение, служащее фоном, цвет и размер шрифта, изображения и их размер, а также параметры таблиц. С помощью небольших подпрограмм на VBScript, - это достаточно просто. К сжалению, это не работает для Netscape Navigator.
Что действительно сделает Вашу страничку "живой", так это использование анимированной графики: изображения будут вращаться и перемещаться в заданном направлении или в зависимости от действий пользователя. С помощью языков JavaScript и VBScript пишутся даже игры - гарантирую, на посетителя это произведет впечатление. Но изобильно "начиненная" таким образом страница становится в лучшем случае неудобочитаемой, ну а в худшем, если код не отлажен разработчиком, выдает ошибку за ошибкой и предлагает запустить отладчик. Поэтому при использовании многослойной анимированной графики соблюдайте меру.
Диалоговые окна, создаваемые с помощью DHTML, мало чем отличаются от всем привычных Windows-приложений. Они не только выводят определенную предупреждающую информацию, но и используются для получения информации от пользователя, например окна подтверждений, содержащие две кнопки - "OK" и "Cancel". С помощью метода confirm() можно выяснить, какая кнопка нажата: если "OK", то возвращается значение TRUE, а если "Cancel", то - FALSE. Дальнейшие действия определяются сценарием. Также диалоговые окна служат для ввода пользователем определенной информация, например, необходимой для регистрации в качестве подписчика новостей Вашего сайта.
Благодаря элементу управления Tabular Data в Internet Explorer (служит для доступа к данным), решается проблема производительности, столь актуальная для работы в Интернете. То есть вся информация, необходимая для работы, может быть получена без дополнительных обращений к серверу.

Возможности Dynamic HTML не ограничиваются этим. Даже беглое с ним знакомство позволит создать привлекательные Web-страницы, добавить компактную гостевую книгу или чат для общения с друзьями - то есть все зависит только от Вашей фантазии.
Но, к сожалению, чрезмерное увлечение скриптами может замедлить доступ к странице, поэтому лучше использовать DHTML только, когда возможностей HTML недостаточно. Поэтому приступайте к написанию сценариев после основательного знакомства с языком гипертекста. Помните, DHTML - отнюдь не замена, а скорее, дополнение к HTML. Тем, кто решил освоить DHTML, как говорится, "с нуля", рекомендую изданную в 1999 году группой BHV (http://www.bhv.kiev.ua) книгу Стивен Хольцнера "Dynamic HTML. Руководство разработчика", ее можно приобрести, не отходя от компьютера (http://www.bookshop.kiev.ua/) за 12,96, я сам, правда, не пробовал.
Удачи всем, кто все же решился создать свой виртуальный "дом"!