Способы реализации клиентской активности

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

Например, предварительную обработку введенных данных, отправляемых серверу, имеет смысл выполнять на стороне клиента. Это позволит исключить повторные передачи неправильно заполненных форм. Графическое представление результатов запроса также стоит выполнять на стороне клиента, что существенно сократит объем данных, передаваемых по сети.

Для реализации клиентской активности возможно применение сценариев JavaScript, VB Script, аплетов Java и элементов управления ActiveX.

Клиентские сценарии JavaScript

Понятие языка JavaScript

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

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

Конструкции языка сценариев JavaScript встраиваются в страницы HTML и исполняются (интерпретируются) под управлением браузера при загрузке страниц, а также при совершении пользователем определенных действий над объектами, расположенными в этих страницах.

Назначение клиентских сценариев JavaScript

Назначение клиентских сценариев JavaScript:

1. Оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер. Сценарии JavaScript способны обрабатывать данные, введенные пользователями в полях форм, а также события, возникающие в процессе манипуляций пользователя с мышью, копировать в окно браузера другие страницы HTML или изменять содержимое уже загруженных страниц.
2. Создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа.
3. Взаимодействие с пользователем при решении "локальных" задач, решаемых приложением JavaScript, встроенном в HTML-страницу. В частности, сценарии JavaScript широко применяются для создания различных визуальных эффектов. Например, изменение внешнего вида элементов управления, над которыми установлен курсор мыши, анимация графических изображений, создание звуковых эффектов и т. д. Механизм локальной памяти Cookie позволяет сценариям JavaScript сохранять на компьютере локальную информацию, введенную пользователем. Например, в Cookie может храниться список товаров из Интернет-магазина, отобранных для покупки.

Приложение JavaScript представляет набор операторов языка, последовательно обрабатываемых встроенным в браузер интерпретатором.

Способы включения сценариев JavaScript в HTML-страницу

Встроить сценарий JavaScript в HTML-страницу можно несколькими способами:

1. Задать операторы языка внутри тэга-контейнера <script>…</script> языка HTML. Браузеры, не поддерживающие какие-либо тэги HTML, их игнорируют, анализируя содержимое пропускаемых тэгов с точки зрения синтаксиса HTML. Это может приводить к ошибкам при отображении страницы. Поэтому операторы языка JavaScript помещаются в контейнер комментария <!-- … -->:

   <script type="text/javascript" language="javascript">
   <!--
   операторы JavaScript
   //-->
   </script>

   Символы ( // ) перед закрывающим тэгом комментария --> являются оператором комментария JavaScript. Он необходим для правильной работы интерпретатора. Документ может содержать несколько тэгов <script>, расположенных в любом месте документа. Все они последовательно обрабатываются интерпретатором JavaScript по мере отображения частей документа в окне браузера. Поэтому рекомендуется размещать сценарии с глобальными функциями и переменными в разделе <head> документа. В этом случае все определения обрабатываются интерпретатором в начале загрузки документа и хранятся в памяти с первых моментов отображения документа в окне браузера.
2. Указать файл с кодом JavaScript в параметре src тэга <script>. В качестве значения параметра задается полный или относительный URL-адрес внешнего файла, содержащего программный код на языке JavaScript. Задание закрывающего тэга </script> обязательно, независимо от того, заданы или нет операторы внутри тэга. Связываемый внешний файл не должен содержать тэгов HTML и должен иметь расширение .js:

   <script type="text/javascript" language="javascript" 
    src="http:www.mysite.ru/functions/jsfuncs.js">
   операторы JavaScript
   </script>
3. Использовать выражения JavaScript в качестве значений параметров тэгов HTML. Эта процедура аналогична процедуре встраивания числовых или символьных примитивов HTML. Элементы JavaScript также располагаются между амперсандом ( & ) и точкой с запятой ( ; ), но должны заключаться в фигурные скобки { } и использоваться только в качестве значений параметров тэгов HTML. Нельзя использовать элементы JavaScript в тексте HTML. Они интерпретируются только тогда, когда расположены справа от параметра и задают его значение. Пусть определена переменная barwidth, и ей присвоено значение 75. Следующий тэг нарисует горизонтальную линию длиной в 75% от горизонтального размера окна браузера:

   <hr width="&{barWidth};%"/>
4. Определить обработчик событий в тэге HTML. Для совместимости с языками сценариев в некоторые тэги HTML были введены специальные параметры обработки возникающих событий. Значениями этих параметров могут быть операторы языка JavaScript. Обычно в качестве значения задается имя функции, которая вызывается, когда происходит соответствующее событие, определяемое параметром обработки события. Имя параметра начинается с приставки on, за которым следует имя самого события. Например, параметр обработки события click будет иметь имя onClick. События в основном связаны с действиями, производимыми пользователем с элементами форм HTML. Поэтому чаще всего перехват и обработка событий задается в параметрах элементов форм, что позволяет проверить введенную информацию перед ее отправкой на обработку. Функция или процедура это именованная последовательность операторов, которая выполняет определенную задачу и может возвращать некоторое значение. Функция в JavaScript определяется оператором function, имеющем следующий синтаксис:

   function имя_функции ( [параметры] ) {
   [операторы JavaScript]
   [return значение]
   }

Параметры, передаваемые функции, разделяются запятыми. Необязательный оператор return в теле функции (блок операторов, заключенный в фигурные скобки), определяет возвращаемое функцией значение. Определение необходимых функций следует осуществлять в тэге <head>, так как все определенные в нем операторы сценария интерпретируются до отображения страницы, и, таким образом, будут известны в процессе отображения всей страницы.

Пример задания функции и ее вызова в процессе формирования документа:

<head>
 <title>Demo</title>
 <script type="text/javascript" language="javascript">
  <!-- //Скрыть сценарий от браузеров: не поддерживающих JavaScript
   function square(number) {
    return number * number;}
  //-->
 </script>
</head>
<body>
 <p>Начинается отображение страницы, в которую внедрен сценарий вычисления функции</p>
 <script type="text/javascript" language="javascript">
  <!-document.write("Значение, которое вычислялось, равно ", square(5), ".");
  //-->
 </script>
 <p> Теперь формирование страницы закончено.</p>
</body>

Пример явного вызова функции из сценария:

<head>
 <title>Demo</title>
  <script type="text/javascript" language="javascript">
   <!-- //Скрыть сценарий от браузеров: не поддерживающих JavaScript
    function validate(form) {
     if(form.value >=18) 
      {alert("Вы - совершеннолетний");
      }
    else {
     alert ("Вы - несовершеннолетний");
     }
    }
   //-->
  </script>
 </head>
<body>
 <form name="form_l" action="HTMLPage.htm">
  Ваш возраст: <input type="text" size="5" name="age" /> <hr/>
  <input type="button" value="Подтвердите" onclick="validate(this.form.age)"/>
 </form>
</body>

В этом примере обработчик события onclick кнопки формы связан с вызовом функции validate, которой передается значение, введенное в текстовое поле age. Имя поля задается параметром name. При нажатии на кнопку вызывается функция validate, отображающая сообщение в зависимости от введенного значения.

Параметр name элемента формы задает символическое имя элемента, которое можно использовать в операторах сценария для ссылки на соответствующий элемент. Передаваемый функции параметр this.form.age использует синтаксис объектно-ориентированных языков, обозначающий элемент с именем age (текстовое поле) формы. Ключевое слово this языка JavaScript означает в данном случае ссылку на текущую форму.

Браузер MSIE реализует собственную версию JavaScript, называемую JScript. Кроме того, для выполнения многих функций клиентские сценарии обращаются к интерфейсу объектной модели браузера. Эта модель отличается для разных браузеров.