Клиентские скрипты сценарии

При разработке динамических 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. Кроме того, для выполнения многих функций клиентские сценарии обращаются к интерфейсу объектной модели браузера. Эта модель отличается для разных браузеров.

Одним
из основных недостатков языка HTML
является пассивность и статичность
документов на этом языке, то есть
невозможность алгоритмического
построения содержимого документа в
соответствии с программой, реализующей
алгоритм, или в зависимости от действий
пользователя, просматривающего документ.
Для преодоления этих недостатков в
язык HTML
введена поддержка сценариев – программ,
загружаемых с сервера вместе с документом
HTML
и выполняемых навигатором при просмотре
этого документа. Существует несколько
языков, на которых может быть написан
сценарий. Наибольшей популярностью
пользуется язык JavaScript
компании Netscape,
первой реализовавшей поддержку сценариев
стороны клиента в своем браузере.

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

JavaScript,
как и другие языки для встраивания
сценариев в HTML-документы, имеет
программный интерфейс для доступа
навигатору. Навигатор, как правило,
имеет панель инструментов, строку ввода
адреса, рабочую область и строку
состояния. Панель инструментов, как
минимум, содержит кнопки
«Back», «Forward», «Stop», «Reload»
и «Home».
Используя язык JavaScript, можно управлять
содержимым рабочей области и строки
состояния, а также открывать новые окна
навигатора, возможно, без панели
инструментов и строки ввода адреса.
Кроме того, можно вызывать простейшие
диалоговые панели с кнопками и полями
ввода.

Для
доступа к компонентам в языке JavaScript
используются объекты. Под объектом
понимается некоторая программная
абстракция, в которой инкапсулированы
свойства (данные) и методы (код) некоторого
реального объекта. В языке JavaScript
между объектами не устанавливается
отношения наследования. Таким образом,
JavaScript не является объектно-ориентированным
языком.

С
понятием объекта связано понятие
класса. Каждый объект принадлежит
определенному классу. Например, каждый
объект «окно» принадлежит классу
«окно» (window).
Можно сказать, что каждое конкретное
окно является переменной типа window
или экземпляром класса window.
С этой точки зрения, понятие класса
близко к понятию типа.

В
языке JavaScript
имеется возможность создавать собственные
новые классы, однако данная возможность
используется редко из-за малой гибкости
(по сравнению с объектно-ориентированными
языками) при создании интерфейса нового
класса. Можно определить JavaScript как язык
для доступа к некоторой объектной
библиотеке.

С
точки зрения лексики и синтаксиса, язык
JavaScript
похож на языки C++
и Java.

Рассмотрим
следующие элементы языка JavaScript:

типы;

операции;

операторы;

встроенные
функции;

объекты
и классы.

Типы
языка JavaScript, не соответствующие никаким
классам, – числовой и логический, будем
условно называть number и bool. Значения
типа number – целые и вещественные числа.
Значения типа bool соответствуют числовым
значениям 0 и 1. Константы языка JavaScript
могут быть числовыми и строковыми.
Последние имеют тип, соответствующий
классу string. Значения остальных типов
(bool и других классов) не представляются
в виде констант, но могут возвращаться
функциями и методами. Следует еще раз
отметить, что слов number и bool в JavaScript не
существует. Это условное обозначение
для указания типов свойств, параметров
и возвращаемых значений функций и
методов.

В
JavaScript имеется ряд операций аналогичных
операциям языка C: ‘+’, ‘–’, ‘*’, ‘/’, ‘%’, ‘<<‘,
‘>>’, ‘+=’, ‘–=’. Операция ‘+’ для строк
перегружена и означает конкатенацию.

Основные
операторы JavaScript перечислены в табл. 5.

Встроенные
функции JavaScript перечислены в табл. 6.

Здесь
и далее для объявления функций, свойств
и методов применен C-подобный стиль:
тип возвращаемого значения, идентификатор
(название), список параметров в круглых
скобках. Необязательные параметры
перечислены в квадратных скобках. В
качестве типа указывается имя класса
или одно из слов number или bool.

Объекты
JavaScript
описывают интерфейс доступа к документу
в навигаторе и инкапсулируют его
свойства и методы.

В
табл. 7 приведены свойства и методы
основных классов JavaScript.

В
объектно-ориентированном анализе при
проектировании и описании объектных
библиотек чаще всего рассматриваются
иерархии двух видов: иерархия классов
(иерархия «is-a»)
и иерархия объектов (иерархия «part-of»).
В иерархии классов отображаются
отношения наследования между классами.
Поскольку в JavaScript
не существует наследования, то нет и
иерархии данного типа. В иерархии
объектов отображаются отношения
агрегации (то есть отношения целого и
части) между классами и объектами. На
рис. 1 приведена иерархия объектов
JavaScript.

Для
доступа к свойствам и методам объекта
применяется операция «.»:

<объект>.<свойство>

<объект>.<метод>(<параметры>)

Некоторые
свойства и методы класса могут быть
статическими. Такие свойства относятся
не к конкретному объекту, а к классу в
целом. Можно получить доступ к этим
свойствам и методам, даже не имея доступа
ни к одному из объектов класса. В этом
случае операция «.» применяется
не к объекту, а к классу:

<класс>.<свойство>

<класс>.<метод>(<параметры>)

Класс,
в котором все свойства и методы являются
статическими, называется статическим.
Статические свойства, методы и классы
в табл. 7 приведены со словом «static»
перед идентификатором.

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

Массивы
в языке JavaScript
являются объектами некоторого
предопределенного класса Array.
В отличие от C
и C++
массивы в JavaScript
являются динамическими, то есть размер
массива автоматически увеличивается
при присваивании значения не существующему
элементу массива. Индексы массива
нумеруются с нуля. Для доступа к элементам
массива используются квадратные скобки.
Так же как и обычные переменные, элементы
массива не имеют типа. Тип имеют значения
элементов. В различных элементах массива
могут храниться значения различных
типов.

В
языке JavaScript
имеется возможность определять
собственные функции. Определение
функции в JavaScript
имеет следующий вид:

function
<идентификатор>(<параметры>) { …
}

Идентификатор
функции – это имя, по которому функция
будет вызываться в сценариях JavaScript.
Параметры указываются без типов и
разделяются символом «,».
Пользовательские функции в JavaScript
не могут возвращать значения, в отличие
от встроенных функций.

Для
размещения сценариев JavaScript
внутри документов HTML
используется элемент SCRIPT:

<SCRIPT
language=l src=s defer></SCRIPT>

Начальный
и конечный тэги обязательны. Атрибут
language
указывает язык, на котором написан
сценарий. Для сценариев на языке
JavaScript
этот атрибут должен принимать значение
«JavaScript».
В атрибуте src
указывается URI
файла со сценарием. Атрибут defer
указывается, если сценарий не осуществляет
вывод на экран при помощи методов write
и writeln
объекта document
для ускорения формирования содержимого
страницы.

Соседние файлы в предмете Программирование для Web

• #
• #
• #
• #