Интернет технологии -> HTML / DHTML -> Основы языка разметки гипертекста - HTML

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

Итак, сценарии выполняемые клиентом это - фрагмент кода интерпретируемого языка программирования (поддерживаемого броузером), который внедряется в 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. Одному элементу документа можно назначить несколько обработчиков, по одному для каждого типа порождаемых им событий. Рассмотрим эти атрибуты подробнее:

При использовании данных атрибутов в тегах 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>


В вышеприведенном примере (рекомендую скопировать, сохранить как файл-htm и проверить), продемонстрированы все три варианта размещения сценариев в HTML-документе: в заголовке размещаются служебные функции, в теле документа размещается исполняемый при загрузке код, а элементу формы - кнопка, назначен обработчик события - onClick. Обратите внимание на комментарии в документе, в коде сценария используется синтаксис языка разработки сценария, а в документе синтаксис 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 элементов документа (См. раздел 3.6.), необходимо знать правила преобразования имени свойства 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().

<HTML>
<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>

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

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

• Документация JavaScript - раздел посвященный JavaScript, содержит описание языка, примеры и рекомендации по разработке сценариев;

• Документация VBscript - раздел посвященный VBscript, содержит описание языка, примеры и рекомендации по разработки сценариев;