Маленькие секреты бо-о-ольшого WEB'а

Маленькие секреты бо-о-ольшого WEB'а

Через некоторое время после того, как человек наработает некоторые навыки работы с HTML, ему становится его возможностей маловато. Это, по моему мнению, связано с тем, что HTML — язык разметки текста, и он не предназначен для интерактивного взаимодействия с пользователем (если не считать форм, а также DHTML, который, правда, поддерживается не всеми браузерами). Обработка форм требует отдельного разговора. Их обрабатывает обычно программа на стороне сервера. И в принципе она может быть написана на любом языке (это может быть в том числе и *.exe-файл). А что делать, если нужно как-то "оживить" текст (или изображение) на стороне пользователя? Для этого существуют "надстройки" над HTML из различных скриптовых языков. Таких, например, как Vbasic или JavaScript. Вот о последнем мы сегодня и поговорим.

Во-первых, что такое скрипт? Скрипт — это программа. Но, в отличие от "обыкновенных" программ, это не двоичный файл, а обычный текст. Интерпретатор — это программа, которая выполняет скрипт (т.е. выполняет те действия, которые и программируются данным скриптом). Роль интерпретатора может выполнять как отдельная программа (например, cmd.exe — командный процессор в WinXP, если брать в общем случае), так и сам браузер с поддержкой данного скриптового языка (JavaScript, например; правда, вот этим как раз и не может в полной мере похвастать Internet Explorer в WinXP — доблестные программисты из Microsoft по решению суда только сейчас работают над встраиванием виртуальной машины в данную версию Windows, что, похоже, не очень у них получается). Конечно, существуют программы на Java, которые выполняются на стороне сервера, называются они "сервлеты", но сегодня мы их касаться не будем. Итак, что такое скрипт, мы выяснили, осталось выяснить, с чем этого зверя едят. Скрипт обычно содержится в тексте самого HTML-файла. Правда, в отдельных случаях их можно выносить и в отдельные файлы (это только ради удобства и на усмотрение программиста, об этом мы поговорим ниже). Для того, чтобы браузер знал, что нижеследующий текст — это скрипт, существует "специальный" HTML-тег. А выглядит он так: <SCRIPT LANGUAGE= "JavaScript"> текст самого скрипта </SCRIPT> . А что же делать, если браузер не поддерживает JavaScript (хотя теперь сложно поверить в такое — теперь даже в телефонные WAP-браузеры встраивают виртуальную Java-машину, которая понимает этот язык)? Необходимо скрыть текст скрипта.

Делается это так: <SCRIPT LANGUAGE= "JavaScript"> <!-- текст самого скрипта //--> </SCRIPT> . Пара тегов <!-- //--> вышесказанное и делает. Без этого отображение текста в старых браузерах будет неверным. Определение функций Java Script в теле HTML-документа можно располагать в любом месте (естественно, вне зоны действия остальных тегов). Все действия, которые вы программируете, выполняются на стороне пользователя, если касаться содержания приведенных примеров. Конечно, чтобы разобраться в новом языке, данной статьи недостаточно, но тем, кто знает хотя бы С/C++, синтаксис не покажется слишком сложным. Единственная проблема состоит в использовании функций. Они, как и для любого языка, имеют свои особенности. Что необходимо помнить? А помнить нужно следующее: JavaScript — объектно-ориентированный язык. Так для чего можно использовать сие достижение программистской мысли фирмы Netscape? Используется Java Script в основном для всякого рода украшательств. А также для создания различных интерактивных кнопочек-ссылочек. Хочу привести несколько листингов, часто используемых в практике. Они помогут придать вашей страничке более "профессиональный" вид:-).
А начнем мы с самого простого "интерактива" — с самодельной кнопочки "назад". Для этого нужно всего лишь в тело документа добавить одну строку:
<a href="javascript:history.back()"> Назад</a>

Попробуем выдать сообщения при нажатии на ссылку. Итак, открываем наш любимый notepad.exe, написав в консоли сие имя (еще известен как Блокнот, а кто попроще — открывает Macromedia Dream-weaver:-)) и пишем туда нижеследующее (напоминаю: для проверки всех приведенных примеров не понадобится ни web-сервер, ни какой-то отдельный компилятор — только web-браузер):

<HTML>
<body>
<center>
При нажатии на ссылку будет выдано сообщение: &
lt;a href="javascript:window. alert('А это, соответственно, сообщение')">
Ссылка для получения 
сообщения. </a>
. <form name=form1>
<input type=button value= "Получить сообщение
" onClick="window.alert('Сообщение')">
</form>
</center>
</body>
</H
TML>

Приступим к "разбору полетов". HTML-теги пояснять не буду, остановлюсь лишь на JavaScript. Этим скриптом мы создаем документ, содержащий одну гиперссылку и одну кнопку. Соответственно при нажатии на них генерируется окошко с текстом сообщения, которое записано в качестве параметра функции windows. alert(). Видно, что в качестве адреса, на который ссылается гиперссылка, записано javascript: windows.alert(''). Собственно, после javascript: может идти любая функция, в том числе и определенная вами в этом же документе. Теперь следует немного рассказать, что такое событие. Событие — это любое действие пользователя. В JavaScript существует множество событий. Ниже приведена таблица наиболие часто используемых событий.
• onLoad — выполнение скрипта или функции при загрузке;
• onChange — порождается при изменении значения элемента формы;
• onClick — порождается при выборе объекта (button, checkbox и т.п.);
• onSelect — порождается при выборе текстового объекта (text, textarea);
• onSubmit — при нажатии на кнопку Submit;
• onUnload — при переходе к другой странице.

При нажатии кнопки в нашем примере происходит событие onClick. И строчкой onClick="window.alert('Сообщение')" мы заставляем выполнить функцию windows.alert(). Как и в случае с гиперссылкой, в принципе выполняться может любая функция, в том числе и определенная программистом. Теперь о кавычках. Кавычки должны открываться и закрываться согласованно. Т.е. если перед javascript: поставить двойные кавычки, тогда внутри, например, параметры функций следует заключать в одинарные. Конечно, можно и наоборот — главное — чтобы "зоны действия" кавычек не перекрывались. Тот же принцип действует везде, во всех выражениях. Теперь для чего это можно применять. А это уже ваши проблемы — мое дело предложить:-). Пожалуй, перейдем к более полезным:-) в практическом плане скриптам. И первый из них — закрытие окна браузера. Выглядит скрипт так:

<HTML>
<body>
<center>
Для того, чтобы закрыть данное окно, необходимо
 выбрать данную ссылку: <a href="javascript:window. close();void(0);">
Ссылка для закрытия о
кна</a>
: </center>
</body>
</HTML>

Как и в предыдущем примере, создается гиперссылка, при выборе которой выполняются две функции: уже известная вам alert() и void(). Функция viod() применяется в тех случаях, если нам необходимо выполнить какие-либо действия, но нет необходимости перезагружать открытую страницу. Результат работы скрипта — при выборе ссылки происходит закрытие активного окна браузера, правда, не сразу, а после вопроса к пользователю. Соответственно, если можно закрыть окно, то можно и открыть, загрузив в него какую-либо страничку (этот прием часто используется в назойливой рекламе). Окно можно открыть с различными параметрами: с линейками прокрутки и без, со строкой статуса и без оной. Итак, в нижеприведенном примере будет открыто окно, в котором будут линейки прокрутки, строка состояния, и размерами оно будет 300х200.

<HTML>
<body>
<center>
После нажатия на эту ссылку будет открыто окно,
 в которое "попытается" загрузиться документ index.htm. В новом окне будут наличествовать: линейки п
рокрутки, строка состояния, и размерами оно будет 300х200. <a href="javascript:window. open('inde
x.htm','example','scrollbars,status, menubar,resi-zable,width=300,height=200');void(0);">
Откры
ть окно</a>
</center>
</body>
</HTML>

Браузер будет пытаться загрузить в открытое окно указанную страничку. Наличие этих параметров будет означать присутствие в открываемом окне следующего:
• scrollbars — линеек прокрутки;
• status — строки состояния;
• menubar — строки меню;
• resizable — доступность разворачивания на весь экран;
• width, height — соответсвенно размер по ширине и высоте.

Отсутствие последних двух параметров означает открытие окна с такими же размерами, как и размеры "родительского" окна, т.е. окна со скриптом.
Часто возникает необходимость в получении каких-то данных от пользователя, причем нет возможности обработать эти данные на стороне сервера, если брать классический способ обработки форм. Так бывает обычно, если страничка хостится на бесплатном сервере:-). Вопрос можно решить с помощью примерно такого скрипта. Данные от пользователя можно получить тремя способами: просто выдать ему предупреждение с помощью alert(), задать вопрос типа "да\нет-yes\no" или попросить его ввести какие-то данные в открывшуюся форму. Что мы сейчас и продемонстрируем:

<HTML>
<body>
<center>
<a href="javascript:window. alert('Нажми кно
пку.');write ();">
Метод Alert.</a>
<a href="javascript:window. status=window.confir
m('Выбор да или нет.');void(0);write ();">
Метод Confirm.</a>
<a href="javascript:wi
ndow. status =window.prompt('Введите строку','');void(0);write(); ">
Метод Prompt.</a>
<SCRIPT LANGUAGE="JavaScript">
function write() {alert(window.status);} </script>
&l
t;/center>
</body>
</HTML>

Сразу необходимо оговориться, что те данные, которые мы получим, присваиваются одному и тому же объекту, и этот объект — windows.status. Чтобы это продемонстрировать, объявлена функция write(), которая выполняется также при выборе соответствующей гиперссылки вместе с windows.conform() и windows.promt(). Она выдает сообщение с данными, полученными соответствующим методом. При выполнении windows.alert() после нажатия пользователем кнопки windows.status принимает значение true. Это же значение он принимает и при нажатии OK в случае с windows.conform(). И, соответственно, windows.status=false — при выборе пользователем Отмена. Немного сложнее в случае с windows.promt(). Здесь мы уже можем получить текст и другие данные, которые потом можно будет использовать.
Проблема HTML в том, что различные браузеры по-разному интерпретируют его теги, что приводит к тому, что страничка, заточенная под Internet Explorer и отлично смотрящаяся в нем, будет очень даже неприглядно смотреться в Opera. Вот и приходится бедным web-дизайнерам тестировать все свои творения во всех распространенных браузерах. Каким же образом можно определить тип браузера? Используем возможности Java Script:

<HTML>
<body>
Здесь можно получить имя брaузера. Для этого нажмем кнопку "Полу
чить имя браузера" <form name=form1>
<input type=button name=browser value="Получить имя 
браузера" onClick="window.alert(window. navigator.appName)">
</form>
</body>
&l
t;/HTML>

При событии onClick мы получим сообщение с типом браузера. Он (тип) собственно хранится в обьекте window.na-vigator.appName. Когда скрипты небольшого размера, помещать их в текст HTML-документа довольно удобно. Но когда они становятся более объемистыми по размеру, отлаживать их становится достаточно неудобно, если сам документ довольно большой. Но существует возможность помещать скрипт в отдельный файл, что, надо сказать, уже удобнее. Это делается таким образом:

<HTML>
<body>
<h1 align=center>
Имя браузера</h1>
<hr>
<script language=JavaScript src=brouse.jsc>
</script>
</body>
</HTML>

Таким образом, мы включаем текст скрипта, который находится в отдельном файле brouse.jsc, в документ. На работе (для пользователя) это никак не будет заметно, а вот отладка и сам процесс программирования будут довольно сильно облегчены. В файле соответственно нет необходимости помещать текст скрипта в контейнер <script language=Java Script> …</script> . Многие, наверное, видели, как в строке состояния на некоторых страничках различным образом меняется текст. Вы можете добиться такого же эффекта. Делается это довольно несложно. Но начнем с самого простого — записи своей строки при наведении указателя мыши на ссылку. Это можно применять для того, чтобы сообщить пользователю, куда же ведет данная ссылка:

<HTML>
<body>
<a href="dontclck.htm" onMouseOver="window.status= 'Этот текс
т пишется в строке состояния'; return true;" onMouseOut="window.status='';">
link</a>
&
lt;/body>
</HTML>

Здесь используются два события, onMouseOver и on-MouseOut, которые происходят соответственно при наведении мыши на ссылку и после того, как ее убирают. При этом уже известному нам объекту windows.status присваиваются некоторые значения. Запись в строку состояния можно произвести и при нажатии на кнопку формы. Для этого необходимо написать что-то типа:

<HTML>
<body>
<script language="JavaScript">
<!-- function statbar(
txt) { window.status = txt; } // -->
</script>
</head>
<form>
<input
 type="button" value= "Запись в строку состояния" onClick="statbar('Текст');">
<input type="
button" value= "Clear" onClick="statbar('');">
</form>
</HTML>

При нажатии на одну из кнопок вызывается функция statbar() с передачей соответствующего значения, которое заносится в windows.status. Согласитесь, красиво смотрится, когда гиперссылка в меню сделана в виде красивой анимированной картинки. А что если сделать так, чтобы картинка, пусть даже и не анимированная, менялась при наведении на нее указателя мыши? Это можно сделать примерно следующим образом:

<HTML>
<body>
<script language="JavaScript">
<!-- firstimage1=new I
mage() firstimage1.src="1.jpg" secondimage1=new Image() secondimage1.src="2.jpg" //-->
</scr
ipt>
<script>
<!-- function filter(imagename, objectsrc){ if (document.images) docum
ent.images[imagename]. src=eval(objectsrc+".src") } //-->
</script>
<a href="index.h
tm" onmouseo- ver="filter('a','secondimage1')" onmouseout="filter('a', 'firstimage1')">
<img
 src ="1. jpg" name="a" >
Ссылка</a>
</body>
</HTML>

Сначала требуется сказать, что все картинки в документе в JavaScript образуют единый массив. Этот массив называется images и является свойством объекта document. Причем важно то, что каждое изображение на странице получает свой порядковый номер. Первое изображение имеет номер 0. Поэтому к изображениям можно обращаться таким вот образом: document.images[0]. Все изображения рассматриваются в качестве объекта Image. Этот объект имеет определенные свойства, которые мы можем определять (например, размер document.images [0].width). Однако, если картинок много, отслеживать их номера очень сложно, поэтому и существует возможность задавать им "имена". Делается это так: <img src="img. gif" name="myImage" width= 100 height=100> . Теперь к ним можно обращаться следующим образом: document.myImage или document. images["myIma-ge"]. А как можно заменить изображение, уже загруженное на другое? Для этого используем атрибут src. Сначала, допустим, отобразим картинку img1.gif, а затем заменим его на img2.gif:
<img src="img1.gif" name="my Image" width=100 height=100>
document.myImage.src= "img2.src";

Но при этом возникает проблема. Дело в том, что только после изменения атрибута src браузер будет выкачивать новое изображение с сервера. При этом возникнут задержки, и так портящие вид страничек. Чтобы этого не происходило, необходимо сделать упреждающую загрузку. Делается это вот так:
firstimage1=new Image()
firstimage1.src="1.jpg"
secondimage1=new Image()
secondimage1.src="2.jpg"

Я думаю, что теперь работа скрипта стала понятна. При наведении и отводе указателя мыши меняется атрибут src, а значит, меняется и отображаемая картинка.
И в конце приведем скрипт, очень часто встречающийся на просторах Интернета. Это идущие часы:

<HTML>
<SCRIPT LANGVIGE="Java-Script">
<!-- function Clock() { var time = n
ew Date () var hour = time.getHours () var minute = time.getMinutes () var second = time.getSeconds 
() var temp = " " + hour temp+= ((minute < 10) ? ":0" : ":") + minute temp+= ((second <10) ? "
:0" : ":") + second document.Form.digits.value = temp id = setTimeout("Clock()",1000) } -->
<
;/SCRIPT>
<body onload="Clock ()">
<FORM NAME="Form">
<INPUT TYPE="text" NAM
E="di-gits" SIZE=8 VALUE="">
</FORM>
</body>
</HTML>

Как это работает? Создаем форму с одним полем типа text и именем digits размером 8 символов с пустым значением. Далее определяем Java Script функцию Clock(), которая начинает выполняться сразу же после загрузки странички (это достигается параметром тега body: <body onload="Clock ()"> ). В теле Clock() устанавливается таймер, который вызывает эту же функцию каждую секунду. Clock() вызывает методы объекта Date time. getHours (), time.getMinutes (), time.getSe-conds (), возвращаемые значения которых присваиваются соответствующим переменным достаточно красноречивыми именами. Требуется сказать, что объект Date не отслеживает значение времени каждую миллисекунду. Он лишь содержит определенную статическую запись, значение которой определяется при создании этого объекта (time = new Date ()). После определения текущего времени определяется переменная temp, задача которой — корректное отображение значения минут и секунд (нуля перед числом минут и секунд, если оно меньше 10, конструкция
temp+= ((minute < 10) ? ":0" : ":") + minute
temp+= ((second <10) ? ":0" : ":") + second
именно для этого и служит). И, наконец, обновляется значение в форме: document.Form.di-gits.value = temp.

Вставляя интерактивные скрипты на Java Script, можно довольно сильно преобразить свою страничку в лучшую сторону, но не стоит слишком усердствовать. Все нужно делать в меру.

Спичеков Александр aka MentALzavR