54. Структура клиентского скрипта. Язык Java Script. Пример
Клиентский скрипт – программа, выполняющаяся на стороне пользователя, причем средой выполнения такой программы является web-браузер. В отличие от серверных скриптов, для которых интерфейс стандартизован протоколом CGI, стандарта de jure на взаимодействие браузера и клиентского скрипта не существует. Множество браузеров и их версий предоставляют несколько различающиеся версии программного интерфейса, что, безусловно, затрудняет написание таких скриптов.
Основой такого интерфейса в любом современном браузере является объектная модель документа – document object model - DOM. Браузер предоставляет интерфейс к своим собственным функциям и к телу документа посредством предопределенных методов соотвествующих объектов. Вторым базовым понятием этого интерфейса являются события и средства их обработки. Событийно-ориентированное программирование – концепция программирования в которой вся программа представляет собой коллекцию особых функций, называемых обработчиками событий. Такой тип программирования используется при выполнении программы в некоторой сложной среде, когда задача программы состоит в модификации поведения этой среды, причем последовательность выполнения нашей программы заранее не известна и определяется внешними факторами. В отличие от классического стиля, при котором поведение среды модифицируется путем передачи ей неких управляющих параметров или вызове функций среды, при событийно-ориентированном программировании в среде при выполнении определенных условий или возникновении определенных ситуаций генерируется соответствующее (предопределенное!) событие, для которого ищется функция-обработчик. Для каждого события в среде присутствует обработчик по умолчанию. Интефейс среды состоит в предоставлении «крючков» (hooks) на которые прикладной программист может «зацепить» свои обработчики событий, которые и будут вызываться вместо стандартных обработчиков по умолчанию. Дакой подход часто используется в реализации графических пользовательских интерфейсов (GUI). Браузер, будучи сложной программной средой и, одновременно, пользовательским интерфейсом, создает условия для удобного использования такого стиля программирования.
JavaScript – интерпретирующий язык с синтаксисом, похожим на язык C. Он может использоваться и в качестве обычного скриптового языка, работающего самостоятельно, но в таком виде большого распространения не получил. Однако как язык событийно-ориентированного программирования для скриптов, выполняющихся в среде web-браузера он занял доминрующее положение, хотя, в принципе, для этих целей можно использовать и другие скриптовые языки.
Иерархии объектов в модели DOM соответствует иерархии HTML тэгов отображаемого документа, причем каждому атрибуту тэга соответствует свойство объекта. Кроме того, в качестве объектов со своими свойствами и методами прдставляется и сам браузер. Основная идея использования клиентского скрипта состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем в зависимости от его действий.
Объекты с одинаковым набором свойств, методов и событий объединяются в классы однотипных объектов. Классы — это описания возможных объектов. Сами объекты появляются только после загрузки документа браузером или как результат работы программы. Об этом нужно всегда помнить, чтобы не обратиться к объекту, которого нет.
Свойства
Многие HTML-контейнеры имеют атрибуты. Например, контейнер якоря <A ...>...</A> имеет атрибут HREF, который превращает его в гипертекстовую ссылку:
<A HREF=www.yandex.ru>yandex</A>
Если рассматривать контейнер якоря <A ...>...</A> как объект, то атрибут HREF будет задавать свойство объекта "якорь". Программист может изменить значение атрибута и, следовательно, свойство объекта:
document.links[0].href="example.htm";
Методы
Методы объекта определяют функции изменения его свойств. Например, с объектом "документ" связаны методы open(), write(), close(). Эти методы позволяют сгенерировать или изменить содержание документа. Приведем простой пример:
wid=window.open(); wid.document.open(); wid.document.write("Hello");
События
Кроме методов и свойств объекты характеризуются событиями. Суть программирования на JavaScript заключается в написании обработчиков этих событий. Например, с объектом типа Button (контейнер INPUT типа button — "Кнопка") может происходить событие click, т.е. пользователь может нажать на кнопку. Для этого атрибуты контейнера INPUT расширены атрибутом обработки события click — onClick. В качестве значения этого атрибута указывается программа обработки события, которую должен написать на JavaScript автор HTML-документа:
<INPUT TYPE=button VALUE="Нажать" onClick="window.alert('Пожалуйста, нажмите еще раз');">
Размещение кода на HTML-странице
- гипертекстовая ссылка (схема URL);
- обработчик события (handler);
- принудительный вызов.
URL-схема JavaScript
Схема URL (Uniform Resource Locator) — это один из основных элементов Web-технологии. Каждый информационный ресурс в Web имеет свой уникальный URL. Каждый URL начинается с задания протокола доступа к ресурсу, например, для доступа к FTP-архиву применяется протокол ftp, для отправки электронной почты — протокол smtp. Для www таким протоколом является http (например, http://www.cnn.com/weather).
Для вызова клиентского скрипта был введен новый псевдопротокол – javascript. Например, <A HREF="javascript:alert('Внимание!!!');">Внимание!!!</A>. При нажатии на гипертекстовую ссылку «Внимание!!!» вместо перехода куда-либо появится окно предупреждения. Такой же подход можно использовать и в формах.
В URL можно размещать сложные программы и вызовы функций. Следует только помнить, что схема javascript работает не во всех браузерах, а только в версиях Netscape Navigator и Internet Explorer, начиная с четвертой.
Таким образом при программировании гипертекстового перехода интерпретатор получает управление после того, как пользователь "кликнул" по гипертекстовой ссылке.
Обработчики событий
Такие программы, как обработчики событий (handler), указываются в атрибутах контейнеров, с которыми эти события связаны. Например, при нажатии на кнопку происходит событие click:
<FORM><INPUT TYPE=button VALUE="Кнопка" onClick="window.alert('test');"></FORM>
В случае большого объема требуемых действий программу оформляют в виде пользовательской функции, а в тэге или URL’е остается только ее вызов. Такие функции раопределяют в контейнерах <SCRIPT>, размещенных в заголовке (контейнер <head>) HTML страницы.
Вставка контейнера SCRIPT в тело — принудительный вызов интерпретатора
Если при разборе документа HTML-парсер встречает тэг <SCRIPT> внутри тела (контейнера <body>), он передает управление интерпретатору указанного языка. Интерпретатор получает на исполнение весь фрагмент кода внутри контейнера SCRIPT и возвращает управление HTML-парсеру для обработки текста страницы после тега конца контейнера SCRIPT. Результат исполнения JavaScript-кода (вывод скрипта) подставляется в отображаемый документ всесто тела скрипта.
Пример скрипта.
<html><head>
<script language="javascript">
var boom = 0;
var count = 0;
var hd = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F');
function toHex(dec){ return hd[Math.floor(dec/16)]+''+hd[dec%16]; }
function clean() { boom = count = 0; document.forms[0].c.value = "Countdown!"; document.bgColor = "#FFFFFF" }
function make_boom() {
if (boom >255) {setTimeout("clean()", 2000); return; }
color="#FF"+toHex(255-boom)+toHex(255-boom);
boom += 8;
document.bgColor = color;
setTimeout("make_boom()", 20);
}
function counter() {
count -= 1;
document.forms[0].c.value = ' '+count+' ';
if (count < 1) { make_boom(); return }
setTimeout("counter()", 1000);
}
function countdown() { if (count > 0 || boom > 0) return; count = 6; counter(); }
</script>
</head><body><center>
<form><input type="button" name="c" value="Countdown!" size=20 onClick="countdown()"></form>
<br><br><font size=7 color = "#FFFFFF">GO</font>
</body></html>