Любой разработчик 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>
<!-- Данная страница будет отображена
только в Internet Explorer. -->
</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>
<!-- Данная страница будет отображена
как в Internet Explorer, так и в Netscape Navigator. -->
</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, я сам, правда, не пробовал.
Удачи всем, кто все же решился создать
свой виртуальный "дом"!