5.2. Сценарии, выполняемые клиентом

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

Итак, сценарии выполняемые клиентом это - фрагмент кода интерпретируемого языка программирования (поддерживаемого броузером), который внедряется в HTML-документ и выполняется Web-броузером в процессе работы пользователя с документом.

Для чего они предназначены, как и на чем разрабатываются и используются в HTML-документах?

Назначение сценариев выполняемых клиентом

Разработка интерактивных HTML-документов стандарта DHTML (Dinamic HTML), элементы оформления и даже содержание которых, меняются в зависимости от действий пользователя (без обмена данными с сервером !).

Разработка документов содержащих анимационные элементы (и даже Web-страниц с играми).

Настройка внешнего вида документа под параметры конкретного рабочего места клиента (определение типа и версии броузера и экранных параметров).

Предварительная обработка данных из форм перед их отправкой на сервер (обидно - заполнить большую форму, потом ожидать завершения транзакции с БД, а в результате получить ответ сценария сервера типа - НЕВЕРНАЯ ДАТА).

Средства разработки сценариев

При разработке сценариев интерактивного управления используются как правило два интерпретируемых языка программирования:

• JavaScript - язык разработки сценариев интерактивного управления для Web-страниц, разработанный фирмой Netscape на основе языка Java (Java - разработка фирмы Sun Microsystems). Поддерживается всеми современными броузерами.

• VBScript - язык разработки сценариев интерактивного управления для Web-страниц, разработанный фирмой Microsoft на основе языка VisualBasic. Поддерживается броузером Internet Explorer.

Вывод очевиден - для лучшей совместимости с броузерами используем JavaScript.

Для разработки сценариев используются методы объектно-ориентированного программирования, управляемого событиями. Данный метод заключается в сопоставлении различным объектами HTML-документа и Web-броузера, сценариев (функций) - обработчиков различных событий.

Внедрение сценария в документ

Внедрение сценария в документ это "штатная" возможность HTML. Рассмотрим способы и правила внедрения:

Для начала необходимо задать язык разработки сценариев для нашего HTML-документа. Это делается при помощи мета-записи Content-Script-Type (См. раздел 2.3.)в заголовке нашего документа. Например вот так:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

или так:

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/vbscript">

Мы можем и не определять тип сценариев документа данным способом, но гораздо проще задать его один раз в заголовке, чем при каждом использовании сценариев.

Как уже было упомянуто ранее, внедрение сценария в документ осуществляется "штатными" средствами HTML. Рассмотрим как это сделать.

Первый способ это - использование тега HTML <SCRIPT>. Возможно использование данного тега в формате контейнера для внедрения фрагмента кода в документ и в форме одиночного тега для связывания файла содержащего сценарии с документом.

Для внедрения используется контейнерный формат записи тега, с атрибутом TYPE, задающим тип сценария:

<SCRIPT TYPE="text/javascript">

/* код сценария на Javascript*/

document.write("Hi !!!");

</SCRIPT>

Для связывания документа с внешним файлом сценария, используется одиночный формат записи тега, с атрибутом SRC, задающим URL файла сценария:

<SCRIPT SRC="script.js" TYPE="text/javascript">

<SCRIPT SRC="script.vbs" TYPE="text/vbscript">

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

OnLoad	Броузер заканчивает открытие документа HTML
OnUnload	Броузер выгружает документ HTML
OnClick	Пользователь щелкнул мышью по элементу
OnDblClick	Пользователь дважды щелкнул мышью по элементу
OnMouseDown	Пользователь нажимает кнопку мыши
OnMouseOver	Пользователь перемещает мышь поверх элемента
OnMouseMove	Пользователь перемещает мышь поверх элемента
OnMouseOut	Пользователь перемещает мышь, выходя из элемента
OnFocus	Элемент получает фокус ввода
OnBlur	Элемент теряет фокус ввода
OnKeyPress	Пользователь нажимает и отпускает клавишу
OnKeyDown	Пользователь нажимает клавишу над элементом
OnKeyUp	Пользователь отпускает клавишу над элементом
OnSubmit	Данные из формы переданы Web-серверу
OnReset	Форма очищена
OnSelect	Пользователь выбирает текст в текстовом поле
OnChange	Потеря фокуса ввода элементом после изменения его значения

При использовании данных атрибутов в тегах HTML, следует понимать, что не каждый элемент документа может породить определенное событие. Например в следующем примере демонстрируется правильное и неправильное назначение cценария обработчика:

<INPUT TYPE="BUTTON" NAME="btnPress" VALUE="Нажми меня" onClick="btnClick();"> - в данном случае при нажатии кнопки, происходит выполнение функции btnClick;

<A HREF="help.htm" onReset="lnkClick();">Помощь</A> - в данном случае вы не дождетесь выполнения функции lnkClick, поскольку элемент документа - ссылка, никогда не породит событие onReset;

Как внедрять сценарии в документы мы разобрали, но не менее важный вопрос КУДА, вернее в какое место документа?

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

Правила таковы:

Код сценария <SCRIPT>...</SCRIPT> в теле HTML-документа. В данном случае сценарий выполняется броузером при загрузке документа, и результаты его работы (если они есть) отображаются в окне броузера при открытии документа (надеюсь вы понимаете что, функции помещенные в тело HTML-документа не выполняются, если не указан их вызов);

Код сценария <SCRIPT>...</SCRIPT> в заголовке HTML-документа. В данном случае сценарии не выполняются броузером при загрузке документа. В заголовке обычно размещают различные служебные функции которые вызываются при обработки событий и из других сценариев размещенных в теле документа;

Приведем пример:

<HTML>

<HEAD>

<TITLE>Куда внедрить сценарий имеет значение !</TITLE>

<SCRIPT TYPE="text/javascript">

/* код функции Javascript */

function HelloUser(txtName) {

alert("Привет пользователю " + txtName);

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR ="SILVER", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">

<SCRIPT TYPE="text/javascript">

/* код исполняемого при загрузке сценария */

document.write("<H2>Вежливая страница</H2>");

</SCRIPT>

<FORM NAME="form1">

<p>Введите имя: <INPUT TYPE="TEXT" LENGTH="25" NAME="usnam">

<!-- а этой кнопке назначен обработчик события -->

<p><INPUT TYPE="BUTTON" NAME="btnPress" VALUE="Привет документу"

onClick="HelloUser(document.form1.usnam.value);">

</FORM>

</BODY>

</HTML>

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

Старые броузеры и сценарии

Попытка просмотра документа, содержащего сценарии, в броузере, не поддерживающем данную возможность, вызывает ошибку. Для исключения данной ситуации разработчики применяют один хитрый трюк, который заключается в использовании одной особенности Web-броузеров - пропускать неизвестные теги HTML.

Для скрытия сценария данным способом применяется комбинация комментариев HTML и комментариев языка разработки сценария. Старый броузер обнаружит неизвестный тег <SCRIPT>, пропустит его и обнаружит тег HTML - начало комментария, а далее исключит из обработки фрагмент документа до тега HTML, закрывающего комментарий. Современные броузеры "обучены" данному трюку и не обратят на него внимания, но перед закрывающим тегом комментария HTML надо поставить комментарий языка разработки сценария, для исключения данного фрагмента из интерпретации броузером.

Примеры:

<SCRIPT TYPE="text/javascript">

<!—

alert("Трам Пам Пам");

// -->

</SCRIPT>

<SCRIPT TYPE="text/vbscript">

<!—

Alert "Трам Пам Пам"

' -->

</SCRIPT>

Примеры и рекомендации по использованию сценариев

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

Пример 10. Определение Web-броузера клиента.

В основу броузеров MSIE и NN положены разные объектные модели документа - DOM (Document Object Model) и принципы обработки событий (MSIE-метод всплытия, NN-метод перехвата). Без учета данных особенностей невозможна разработка универсальных сценариев для Web-страниц:

<HTML>

<HEAD>

<TITLE>Сведени о броузере</TITLE>

</HEAD>

<BODY BGCOLOR ="SILVER", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">

<h1>Для навигации в Web вы используете:</h1>

<hr>

<ul>

<SCRIPT TYPE="text/javascript">

document.write("<li>Имя программы: <b>"+navigator.appName+"</b>");

document.write("<li>Версия: <b>"+navigator.appVersion+"</b>");

document.write("<li>Пользовательский агент: <b>"+navigator.userAgent+"</b>");

document.write("<li>Платформа: <b>"+navigator.platform+"</b>");

</SCRIPT>

</ul>

<hr>

</BODY>

</HTML>

Пример 11. Элементы DHTML в документах.

Документы DHTML содержат сценарии, позволяющие изменять свойства CSS (видимость, оформление и даже содержание) элементов документа, в зависимости от действий пользователя. При использовании в сценариях свойств CSS элементов документа необходимо знать правила преобразования имени свойства CSS к имени свойства JavaScript: из имени свойства удаляются все тире, а каждый символ имени свойства после тире заменяется на прописной символ. Например: border-color преобразуется в borderColor, а font-size в fontSize;

<HTML>

<HEAD>

<TITLE>Элементы DHTML в документах</TITLE>

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

<SCRIPT TYPE="text/javascript">

// определение броузера

function isMSIE() {

if (navigator.appName == "Microsoft Internet Explorer") return true;

else return false;

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">

<H1 ALIGN=CENTER>Демонстрация элементов DHTML в документе</H1>

<HR>

<H2>Динамические слои</H2>

<p>Управляя свойствами слоев из сценариев можно реализовать массу динамических элементов (<i>раскрывающиеся меню и списки, изменющиеся рисунки, дополнительные поля форм и т.д.</i>):

<p>Например вот так:

<FORM NAME="family">

<p><b>На кого глядеть будем ?</b>

<p><INPUT TYPE="radio" NAME="HorW" VALUE="H" CHECKED

onClick = "if ( isMSIE() ) document.all.husb.style.visibility = '';

else document.layer[1].visibility = '';"> Я

<p><INPUT TYPE="radio" NAME="HorW" VALUE="W"

onClick = "if ( isMSIE() ) document.all.husb.style.visibility = 'hidden';

else document.layer[1].visibility='hidden';"> Жена

</FORM>

<IMG ID="wife" SRC="girl1.gif" BORDER=0 ALT="Лицо" STYLE="position:absolute; top:260; left:150">

<IMG ID="husb" SRC="boy2.gif" BORDER=0 ALT="Морда" STYLE="position:absolute; top:260; left:150">

<HR>

<H2>Динамические ссылки</H2>

<p>Обрабатывая различные события можно динамически изменять стиль ссылок (<i>проще это реализовать через псевдоклассы в таблице стилей</i>):

<p><b>В MSIE можно слелать так: </b> Заходи сюда - не пожалеешь

<A href="#"

onMouseOver = "if ( isMSIE() ) this.style.textTransform='uppercase';"

onMouseOut = "if ( isMSIE() ) this.style.textTransform='none';"

onClick = "alert('Извиняйте, это лишь пример !');">Горячо !!!</A>

<p><b>Или даже вот так : </b> Заходи сюда - не пожалеешь

<A href="#"

onMouseOver = "if ( isMSIE() ) this.innerText='НУ ОЧЕНЬ УЖ ГОРЯЧО !';"

onMouseOut = "if ( isMSIE() ) this.innerText='Горячо !!!';"

onClick = "alert('Извиняйте, это лишь пример !');">Горячо !!!</A>

<p><b>Графические ссылки можно оформить так: </b> Заходи сюда - не пожалеешь

<A href="#"><IMG src="hot.gif" align="middle" border=0

onMouseOver = "this.src='ahot.gif';"

onMouseOut = "this.src='hot.gif';"

onClick = "alert('Извиняйте, это лишь пример !');"></A>

<HR>

<H2>Динамические подсказки</H2>

<p>В статусной строке броузера можно выводить подсказки об выделенных в текущий момент элементах документа:

<p><b>Например описание ссылки: </b>

<a href="#"

onMouseOver = "window.status='Переход на узел WWW.SITE.RU где ...'; return true;"

onMouseOut = "window.status=''; return true;">Ссылка с подсказкой</a>

<p><b>Или описание рисунка: </b>

<IMG SRC="boy2.gif" BORDER=0 ALIGN="MIDDLE"

onMouseOver = "window.status='Раньше я выглдел гораздо лучше !'; return true;"

onMouseOut = "window.status=''; return true;">

<HR>

</BODY>

</HTML>

Пример 12. Элементы анимации в документах.

Анимация основана на изменении средствами сценария, таких свойств CSS элементов, как видимость, размер и положение элемента (как правило слоев документа).

<HTML>

<HEAD>

<TITLE>Анимация в документах !</TITLE>

<SCRIPT TYPE="text/javascript">

var pos1 = 0;

var pos2 = 0;

var speed1 = Math.floor(Math.random() * 10)+25;

var speed2 = Math.floor(Math.random() * 10)+25;

function ctrlRun() {

pos1 = (pos1 > 600) ? 0 : pos1 + speed1;

pos2 = (pos2 > 600) ? 0 : pos2 + speed2;

switch(navigator.appName) {

case "Netscape": // броузер NN

document.layers[0].left = pos1;

document.layers[1].left = pos2;

window.setTimeout("ctrlRun()", 250);

break;

case "Microsoft Internet Explorer": // броузер MSIE

document.all.men.style.left = pos1;

document.all.wom.style.left = pos2;

window.setTimeout("ctrlRun()", 250);

break;

default:

window.alert("На чем вы работаете ?");

}

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR ="BLACK", TEXT="WHITE", LINK="WHITE", ALINK="RED", VLINK="SILVER">

<h2>Кто быстрее: бегун или бегунья ?</h2>

<IMG ID="men" SRC="people1.gif" BORDER=0 STYLE="position:absolute; top:150; left:0">

<IMG ID="wom" SRC="people2.gif" BORDER=0 STYLE="position:absolute; top:300; left:0">

<FORM NAME="form1">

<INPUT TYPE="BUTTON" NAME="btnStep" VALUE="Старт-Бегунов" onClick="ctrlRun();">

</FORM>

</BODY>

</HTML>

Пример 13. Обработка данных из форм.

Предварительная обработка данных из форм, позволяет сократить кол-во обменов данными с сервером, за счет выявления типовых ошибок пользователей, на этапе заполнения формы (неверные даты, пустые поля и др.).

<HTML>

<HEAD>

<TITLE>Проверка данных в формах</TITLE>

<SCRIPT TYPE="text/javascript">

function valid() {

if (document.form1.fio.value.length < 5) {

window.alert("Введите имя !");

return false;

}

if (document.form1.tel.value.length < 3) {

window.alert("Введите телефон !");

return false;

}

if (document.form1.edu.value.length < 10) {

window.alert("Заполните сведения об образовании !");

return false;

}

return true;

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">

<H1 ALIGN=CENTER>Заполните пожалуйста данные</H1>

<HR>

<FORM NAME="form1" ACTION="mailto:lst@user.ru" onSubmit = "return valid();">

<table width=100% align=center>

<col width=35% align=left valign=top>

<col align=left valign=top>

<tr>

<th>Введите ваше ФИО:

<td>

<INPUT TYPE="text" NAME="fio" SIZE=30 MAXLENGTH=40>

<tr>

<th>Введите телефон:

<td>

<INPUT TYPE="text" NAME="tel" SIZE=9 MAXLENGTH=9>

<tr>

<th>Сведения об образовании:

<td>

<TEXTAREA NAME="edu" TITLE="Образование" ROWS=5 COLS=30>

</TEXTAREA>

</table>

<p align=center><INPUT TYPE="reset" NAME="but2" VALUE="Очистить форму">

<INPUT TYPE="submit" NAME="but3" VALUE="Отправка данных">

</FORM>

<HR>

</BODY>

</HTML>

Пример 14. Управление окнами броузера.

Для управления окнами броузера средствами сценария используются методы JavaScript: window.open() и window.close().

<HEAD>

<TITLE>Работа с окнами в JavaScript</TITLE>

<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

</HEAD> <BODY BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">

<H1 ALIGN=CENTER>Управление окнами броузера из сценария</H1>

<HR>

<FORM NAME="form1">

<p><INPUT TYPE="button" NAME="open" VALUE="Открыть окно"

onClick="newWin=window.open('','newWin','toolbar=no, status=no, width=250, height=250');">

<p><INPUT TYPE="button" NAME="close" VALUE="Закрыть окно"

onClick="newWin.close();">

</FORM>

<HR>

<p>Для загрузки данных в созданное окно необходимо передать URL загружаемого ресурса, как первый параметр метода - <b>open</b> (<i>в нашем примере он пустой</i>).

</BODY><HTML>

</HTML>

Знания методов и средств разработки сценариев интерактивного управления документами, позволит вам перейти на качественно новый уровень профессионального мастерства.