Как это ни печально, но рано или поздно некогда приличная собственная web-страница начнет казаться безмерно скучной и какой-то бесцветно тоскливой. Фотографии. Таблицы. Ссылки. Естественно, в Большой Паутине провожают по уму, но встречают все же исключительно по одежке. Таким образом, просто хорошее содержание сайта скоро приедается и время от времени обыкновенное обновление упаковочной обертки способно внести очень много свежести в страницу, не меньше, чем новомодные жевательные резинки и карамельки от кашля. Одним из способов придания виртуальной странице привлекательного вида - это использование JavaScript.

Современные гипертекстовые информационные системы условно можно представить как совокупность нескольких компонентов: систем хранения гипертекстовых объектов, систем отображения гипертекстовых объектов, систем подготовки гипертекстовых объектов и систем программирования просмотра совокупности гипертекстовых объектов. С этой точки зрения, технология World Wide Web только к 1996 году получила законченный, функционально полный вид. Первыми были разработаны системы хранения и просмотра (1989-1991), которые продолжают развиваться и в настоящее время. После 1990 года стали появляться первые системы подготовки документов. Наконец, в 1995 году были предложены первые языки управления сценариями просмотра.

Как бы там ни было, но практически любой язык, аналогичный HTML, содержит возможность манипулировать встроенными объектами, как это делается в обычных программах. С точки зрения центрального процессора, руководство по управлению объектами интерактивной страницы и операция умножения двух чисел - события одного порядка. Взять то-то и проделать над этим то, что будет написано в инструкции номер такой-то, которую надо взять из библиотеки, находящейся там-то. Это и называется языком управления сценариями.

Честно говоря, речь уже идет о программировании, потому что язык управления сценариями внешне очень похож на обычный язык программирования, например Visual Basic. Так что если процесс написания программы кажется средневековым ритуалом, где дело вот-вот дойдет до человеческих жертвоприношений, то лучше дальше не читать. Я никогда не был выдающимся программистом и старался избегать заумностей, если такое было возможно. Тем не менее существуют ситуации, когда другого выхода просто нет. Одна из них - собственная страница в Интернет.

Простое придание результату работы привлекательного вида только с помощью красочных картинок чрезвычайно быстро упирается в непреодолимый барьер пропускной способности канала. По собственному опыту скажу, что по обычной коммутированной линии (т.е. по простому телефону) попытка прочитать страницу суммарным объемом более трехсот-четырехсот килобайт превращается в сущую пытку. Барьер в пятьсот "ка" вообще практически непреодолим. Во всяком случае я обычно не дожидаюсь окончания издевательства и предпочитаю перейти туда, где компьютер сможет скачивать полезную информацию с нужной скоростью, а не созерцать ужасы окружающего мира при тридцати байтах в секунду.

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

Браузеры гипертекстовых страниц традиционно называют скриптами (scripts), по аналогии с исполняемыми файлами, написанными для командных интерпретаторов типа sh. Собственно, как это было и раньше в локальных системах, в программировании просмотра гипертекстовых документов World Wide Web существуют два подхода: создание интерпретируемых браузером скриптов или компиляция байт-кода. Первый не выходит за рамки традиции World Wide Web, согласно которой для разработки гипертекстовой страницы нужен только обычный текстовый редактор, и сам гипертекстовый документ должен легко читаться человеком-оператором. Второй подход позволяет повысить эффективность исполнения программы и защищенность кода от несанкционированных модификаций. Как первый, так и второй подходы опираются на объектно-ориентированный подход к программированию. По поводу байт-кодов, или, как их еще называют, мобильных кодов, написано в контексте технологии программирования Java достаточно много, поэтому сосредоточим внимание на скриптах, точнее, на скриптах, написанных на языке JavaScript.

Идея JavaScript очень проста. Поскольку элементы любой страницы фактически являются типичными законченными объектами, то все операции, которые можно исполнять в программе на JavaScript, как раз описывают действия над ними. Собственно, объектная ориентированность JavaScript на этом и кончается, что может послужить достаточным утешением для всех сомневающихся и колеблющихся... Никаких классов объектов, а тем более наследования в JavaScript нет. Есть только объекты с набором свойств и набор функций над объектами, которые называются методами. Кроме методов, существуют и другие функции, больше похожие на функции из традиционных языков программирования. Они позволяют работать со стандартными математическими типами или управлять процессом выполнения программы. Еще в JavaScript есть события - аналог программных прерываний. Эти события также ориентированы на работу в World Wide Web, например загрузка страницы в рабочую область Navigator или выбор гипертекстовой ссылки. Используя события, автор гипертекстовой страницы и программы, ее отображающей, может организовать просмотр динамических объектов (например, бегущей строки) или управление многооконным интерфейсом. Словом, именно с помощью JavaScript можно значительно оживить web-страницу. К примеру, предусмотреть поведение сайта в ответ на те или иные действия оператора. Всякие выпадающие меню, интерактивные подсказки, бегущие строки и прочие радости жизни. И прелесть происходящего заключается в несоизмеримо меньшем объеме, занимаемом исходным кодом скрипта, по сравнению даже с самой мутной и маленькой картинкой.

Итак, скрипт реализован тем же образом, что и язык HTML. Это текст, который можно набрать в обычном текстовом редакторе. В дальнейшем браузер уже сам интерпретирует текстовые символы в осмысленные действия. Таким образом, полностью отпадает необходимость в отдельном наборе инструментов. Правда, не обходится без некоторых трудностей. Так, мой основной рабочий инструмент, незабвенный HotDog, не позволяет лицезреть результаты работы скрипта, если они проявляются в строке статуса или ином специфическом месте интерфейса браузера. Тут уж или писать текст непосредственно в самом навигаторе или смириться с невозможностью просмотреть результаты немедленно, без запуска браузера.

Для встраивания скриптов в тело HTML-документа используется контейнер SCRIPT. Не все браузеры способны распознавать и исполнять скрипты. Поэтому само тело скрипта помещается в контейнер комментария. Рассмотрим первый пример.

В этом примере в заголовок документа (контейнер HEAD) включен контейнер SCRIPT. В нем до недавнего времени атрибут LANGUAGE не являлся обязательным. Но с момента выхода VBSCRIPT появился смысл в указании типа языка - Navigator не понимает скриптов на других языках. Отсутствие атрибута может привести к ошибкам при отображении гипертекстовых страниц.

Далее, в тексте страницы определен комментарий, в который включен текст скрипта. Начинается комментарий со строки <!- The JavaScript Function Definition и кончается строкой // The end of JavaScript Functions Definition ->

Внутри контейнера SCRIPT определены две функции пользователя: help_win() и main_menu(). Их смысл достаточно прозрачен. Help_win() предназначена для организации контекстно зависимого help, а main_menu() осуществляет допуск пользователя к главному меню Website. Обе функции используют один и тот же метод open (встроенную в JavaScript функцию, которая определена над объектом window) для того, чтобы открыть новое окно Netscape Navigator и загрузить в него гипертекстовые документы. При этом функция main_menu порождает стандартное окно (с кнопочками, иконками и т.п.), а help_win() - окно без стандартных атрибутов. У этого окна имеются только линейки прокрутки (scroll bars).

Вызов функций осуществляется после нажатия на соответствующие кнопки, которые определены в HTML-форме help_call. Таким образом, функции будут выполняться только в том случае, если произойдет событие, описанное атрибутом onClick в контейнере INPUT соответствующего поля формы.

Если быть более точным, то приведенный пример - это фрагмент, реализующий регистрацию пользователя. К моменту его выполнения окно главного меню уже открыто. Поэтому при выборе кнопки NEXT окно не создается, а текст загружается в уже открытое окно. Указанные неточности вызовут сообщения об имеющихся ошибках, так как отсутствуют некоторые документы, например описанные в комментарии в строке Main_menu = window.open ("main_m.htm","Main_menu"). Но в общем и целом текст примера можно скопировать в отдельный документ (желательно в Win Word97), сохранить в нужном формате (вот когда достоинства Word97 проявляются наиболее наглядно) и прочитать любым браузером.

Сравнение исходного текста с полученным результатом позволит ощутить прелесть применения скриптов. Хотя если вы вместе с примером создадите еще и недостающие в нем страницы, то все сработает без единой заминки.

Теперь самое время взяться за что-нибудь практическое, утилитарно применяемое на обычных web-страницах. Попробуем создать собственные часы. Наверно, вы часто обращали внимание во время свободного серфа по безбрежным просторам Интернет, что многие страницы нередко снабжены собственным индикатором системного времени, или "часами". Их то и попробуем изобразить.

Строка статуса окна, например Netscape Navigator, расположена в нижней части экрана и обычно применяется для вывода всяческой вспомогательной информации. Там можно увидеть, в каком состоянии в данный момент находится браузер, сколько процентов он уже скачал и с какой скоростью сейчас трудится. Этим же местом вполне можно воспользоваться для вывода собственных часов. Хочу обратить внимание на то, что данный пример упорно сбоит в Netscape Navigator 2.0 и ниже при нормальном уверенном функционировании в 3.0 и старше.

Вторая вариация часов - это пример скрипта, создающего часики (в сокращенном варианте) в поле form. На сей раз время бежит не где-то там, внизу, мелким шрифтом в самом углу экрана, а на видном месте. Впоследствии можно будет подыскать и более достойное место для часов в полном соответствии с замыслом и стилем конкретной страницы, а пока можно и так. Сейчас важнее всего сам принцип, а не его конкретная реализация.

Третий пример использования скриптов "в мирных целях":
<html>
<head>
<title>Clock</title>
<script language="JavaScript">
function clock_form()
{
day=new Date()
clock_f=day.getHours()+":"+day.getMinutes()+":"+day.getSeconds()
document.form.f_clock.value=clock_f
id=setTimeout("clock_form()",100)
}
</script>
</head>
<body bgcolor="ffffff" onLoad="clock_form()">
<center>
<form name=form metod="get">
<input name=f_clock maxlength=8 size=8>
</form>
</center>
</body>
</html>

Теперь мы имеем маленькое окно, размеры которого можно варьировать. Внутри него имеется электронный индикатор. На нем мерно меняется время. В дальнейшем положение "часов" вполне позволительно перемещать по экрану обычными средствами языка гипертекстовой разметки. Его разрешается выравнивать по центру и по сторонам, внедрять в ячейку таблицы и выводить в отдельном фрейме. Это обычный объект, как и все прочие. Только он в некотором отношении "живой", т.е. внешне напоминает самостоятельно живущую программу.

На этом имеет смысл закончить. Тексты приведенных примеров достаточно просты и позволяют на их основе организовать приличные испытания собственному воображению и возможностям языка JavaScript. Как там говорили древние?... дорогу осилит идущий.

Автор: Александр Запольскис