Практические занятия

Занятие 7

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

Основные сведения об языках сценариев

Включение сценариев в гипертекст

Сценарий на JavaScript или VBScript является расширением HTML и встраивается в гипертекстовые страницы. Обычно определения процедур и функций сценария помещаются в контейнер заголовка HEAD, а код сценария - в тело документа BODY. При этом предложения должны быть внутри контейнера сценария SCRIPT. Кроме того, группа операторов сценария, заключенная в кавычки, может располагаться в определении обработчика событий элементов формы. Атрибут LANGUAGE задает язык сценария, а SRC определяет файл для включения.

В приведенном примере на JavaScript с помощью метода write() объекта document выводится приветствие на текущей странице.

<HTML>
 <BODY>
 <SCRIPTLANGUAGE="JavaScript">
 <!- Пример простого сценария
 document.write("HellofromJavaScript")
 // ->
 </SCRIPT>
 </BODY>
</HTML>

Обработка событий в сценариях

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

Язык является событийно-управляемым. Диалоговые элементы формы расширены и могут содержать указание на событие и код его обработки.

Основной синтаксис, используемый для указания обработчиков событий:

<TAGeventHandler="код_сценария">

Здесь TAG это некоторый тег HTML, а eventHandler - имя обработчика событий. Как правило, обработчик событий имеет имя, совпадающее с именем события, с приставкой "on" (см. табл. событий в учебном пособии). В языке VBScript вместо двойных кавычек код сценария обрамляется апострофами.

Заметим, что многие объекты имеют методы, эмулирующие события, но эти методы не запускают обработчик события.

Пример сценария

В данном примере на JavaScript вычисляется площадь фигуры (прямоугольника или треугольника) при заданной ширине и высоте.

Для контроля и расчета используется функция calc(). Реализован групповой и упрощенный контроль параметров по диапазону значений. Сообщение об ошибках выводится с помощью стандартной функции alert().

Форма frm содержит меню выбора вида фигуры, два поля ввода и поле результата. Экранная кнопка "Расчет" служит для запроса вычисления площади по событию onClick.

<HTML>
 <HEAD>
 <SCRIPT>
 functioncalc (k,L,h)
 {if (L<=0 h<=0)
 alert ("НЕДОПУСТИМЫЕ ПАРАМЕТРЫ")
 else
 if (k==0)
 return (L*h)
 elseif (k==1)
 return (L*h/2)
 }
 </SCRIPT>
 </HEAD>
 <BODY>
 <H3>Вычисление площади фигуры</H3><HR>
 <FORMNAME="frm">
 <P>фигура
 <SELECTNAME="k">
 <OPTIONVALUE=0>прямоугольник
 <OPTIONVALUE=1>треугольник
 </SELECT>
 <P>Ширина
 <INPUTTYPE=textNAME="L" VALUE=10>
 <P>Высота
 <INPUTTYPE=textNAME="h" VALUE=20>
 <P>Площадь
 <INPUTTYPE=textNAME="S" VALUE=0>
 <P>
 <INPUTTYPE=buttonNAME=b1 VALUE="Расчет"
 onClick=
 "document.frm.S.value=
 calc(frm.f.selectedIndex,frm.L.value,frm.h.value)">
 <INPUTTYPE=resetNAME=b2 VALUE="Сброс">
 </FORM>
</BODY>
</HTML>

Аналогичный пример на языке VBScript приведен ниже.

Доступ к свойствам и методам элементов формы

Своеобразие доступа к свойствам (полям) и методам элементов формы определяется объектным характером языков сценариев, в них существует четкая иерархия объектов:

DOCUMENT
  ФОРМА
    ЭЛЕМЕНТ
       СВОЙСТВО или МЕТОД

Например, обращение к значению текстового поля L в форме frm будет выглядеть: document.frm.L.value. А установить фокус на этот элемент формы можно так: document.frm.L.focus().

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

Применение языков сценариев

Языки сценариев рекомендуется применять для ввода, контроля и несложной обработки данных, а также динамического формирования гипертекста. Контроль может предшествовать передаче данных серверной программе. Контроль организуется по группе полей или по отдельным полям. Обработка может вызываться по кнопке расчета (события onClickилиonSubmit) или автоматически при изменении данных (onChange), имитируя электронные таблицы.

Для контроля числовых значений в JavaScript используются встроенные функции проверки на "не число" isNaN(), преобразования целого и вещественного чисел parseInt(), parseFloat().

Предлагается следующая последовательность проверки допустимости вещественного числа:

проверка неверной записи числа isNaN(parseFloat(x)),
преобразование значенияx1 = parseFloat(x) для расчетапри отсутствии ошибок,
проверка по диапазону (например: должно быть x1>0 ).

В VBScript проверка допустимости числа реализуется одной функцией isNumeric.

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

Контроль данных перед отправкой серверной процедуре производится по событиюonSubmit, при положительном исходе проверки данные нужно послать, используя метод формы submit().

Задание для работы

Программирование на языке JavaScript

На простом примере на JavaScript познакомьтесь с обработкой событий:

<HTML>
<HEAD>
<SCRIPTLANGUAGE="JavaScript">
functionsalut (str) {
 alert("Привет, "+ str+"!");
 }
</SCRIPT>
</HEAD>
<BODY>
Введите ваше имя, пожалуйста:
<FORM>
 <INPUTTYPE=textNAME="name" onBlur="salut (this.value)" VALUE="">
</FORM>
</BODY>
</HTML>

Подготовьте пример, заполните форму и изучите реакцию на потерю фокуса, т.е. переход и нажатие кнопки мыши вне поля ввода или нажатие клавиши TAB. Этот пример показывает "бескнопочную" форму.

Создайте приведенную выше форму со сценарием для вычисления площади фигур (прямоугольника и треугольника). Отладьте приложение.

Реализуйте на JavaScript одиночный контроль вещественных чисел с указанием ошибочного поля и диагностикой. Расчет выполнять по запросу при нажатии экранной кнопки (событие onClick).

Создайте расчетную форму по типу "электронных таблиц" с контролем и пересчетом по изменению значения каждого поля (событие onChange).

Реализуйте контроль данных на клиенте, а обработку на сервере с помощью готовой серверной программы, указанной преподавателем.

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

<HTML>
<BODY>
<TITLE>Динамическое формирование HTML </TITLE>
<SCRIPTLANGUAGE="JavaScript">
{ varm=200.0;
 document.writeln("<H3>Пример столбиковой диаграммы</H3><HR><P>")
 for (i=1; i<=6; i++)
 {X=i*(7-i)/12*m; H=X/m*50
 document.writeln("<IMGSRC=blue.jpgWIDTH=10 HEIGHT="+H+">")}
 document.writeln("<P> ЯНВ...ФЕВ...МАР...АПР...МАЙ...ИЮН")
}
</SCRIPT>
</BODY>
</HTML>

Программирование на языке VBScript

На языке VBScript предлагается разработать следующие варианты для примера расчета площади фигуры:

программа контроля данных и их обработки на клиенте;
программа контроля и обработки данных на сервере с использованием ASP;
комбинированная программа контроля и обработки.

В программе контроля и обработки данных на клиенте используйте для проверки числа функцию isNumeric(), диагностические сообщения следует выдавать с помощью MsgBox:

<HTML>
 <HEAD>
 <TITLE>Контроль и обработка формы на клиенте </TITLE>
 <SCRIPTLANGUAGE="VBS">
 Functioncalc()
 Dim f, L, h
 f = document.frm.f.selectedIndex
 L = document.frm.L.value
 h = document.frm.h.value
 IfisNumeric(L) ANDisNumeric(h) Then
 L = ABS(L)
 h = ABS(h)
 Iff = 0 Then
 calc = L*h
 Else
 Iff =1 thencalc = L*h/2
 EndIf
 Else
 MsgBox "НЕДОПУСТИМЫЕ ПАРАМЕТРЫ"
 EndIf
 EndFunction
 </SCRIPT>
 </HEAD>
 <BODYBGCOLOR=#FFFFFF>
 <H3>Вычисление площади фигуры</H3><HR>
 <FORMNAME=frm>
 <P>Фигура
 <SELECTNAME=f>
 <OPTIONVALUE=0>прямоугольник
 <OPTIONVALUE=1>треугольник
 </SELECT>
 <P>Ширина <INPUTTYPE=TEXTNAME="L" VALUE=10>
 <P>Высота <INPUTTYPE=TEXTNAME="h" VALUE=20>
 <P>Площадь <INPUTTYPE=TEXTNAME="S" VALUE=0>
 <P><INPUTTYPE=BUTTONNAME="b" VALUE="Расчет"
 OnClick='document.frm.S.value=calc()'>
 </FORM>
 </BODY>
 </HTML>

Программа контроля и обработки данных использует ASP-объекты Request для доступа к значениям элементов формы и Response для генерации выходного гипертекста.

Для реализации комбинированного варианта (контроль на клиенте или на сервере) в форме необходимо предусмотреть скрытое (hidden) поле для признака контроля, где первоначальное значение равно "NO". Если броузер поддерживает VBScript, то будет выполнена проверка на клиенте и признак контроля будет установлен в "YES". Серверная программа может по этому полю судить, нужен ли контроль на стороне сервера. Отладку примера осуществлять, выполняя сценарий под MicrosoftInternetExplorer и NetscapeNavigator.

Назад | Содержание