Рубанчик В.Б. |
Лабораторная работа "Обработка форм на стороне клиента" |
|
ЛАБОРАТОРНАЯ РАБОТА
Тема: Обработка форм на стороне клиента
Цель работы: Ознакомиться с методами получения информации из различных элементов форм; изучить особенности выполнения операций сравнения
Формы являются механизмом передачи информации от пользователя серверным программам. Перед отсылкой на сервер информация, внесенная пользователем в форму, обычно предварительно обрабатывается. Например, проверяется, заполнены ли все обязательные поля формы. Форма и ее элементы рассматриваются браузером как объекты. Поэтому в скриптах можно получать доступ к значениям, введенным в элементы формы.
Основное назначение форм — передача информации от пользователя для обработки на стороне сервера. Однако, как правило, формы предварительно анализируются на стороне клиента. Эту возможность можно использовать при разработке веб-приложений — программ, в которых для организации пользовательского интерфейса используется браузер.
Аналогичные приемы можно использовать для создания простых веб-приложений, которые полностью выполняются браузером.
Символьные строки в JavaScript
Одними из самых распространенных элементов в формах являются текстовые поля, значения которых представляются символьными строками.
Строковый литерал (символьная строка) — последовательность нуля или более символов, заключенная в двойные (как в Си) или одинарные кавычки (апострофы). И в том, и в другом случае литерал воспринимается интерпретатором как значение одного типа:
"Это символьная строка" 'И это символьная строка'
Язык JavaScript имеет в основе синтаксис, во многом унаследованный от Си. Поэтому, помимо обычных знаков, литерал может включать escape-последовательности типа \n, \t, \\ и т.п.
В Си одинарные кавычки используются для записи отдельных символов. Так в JavaScript нет данных типа "символ", то апострофы применяются для ограничения символьных строк наравне с двойными кавычками. Поэтому в строке, взятой в двойные кавычки, могут встречаться одинарные и наоборот.
Учитывая, что язык создавался для написания сценариев, т.е. для высокоуровневого программирования, в JavaScript определен ряд удобных операций для работы с литералами. С помощью операторов сравнения можно выполнять сравнение чисел, строк, строк и чисел. Если операнды имеют разный тип, то интерпретатор пытается преобразовать их к типу, который допускает сравнение.
Примеры.
а) '3'==1+2 // true
Строка слева преобразуется к числу, а выражение справа — вычисляется.
б) '3'===1+2 // false
Новая операция. Проверяются не только значения, но сравниваются также типы операндов. Слева — строка, справа — число.
Есть симметричная операция !== , при выполнении которой проверяется неравенство значений и несоответствие типов. Для получения значения true достаточно несовпадения одной из характеристик:
'3'!==1+2 // true
3 !==1+2 // false
3 !==1+1 // true
в) '3'>=1+2 // true
Строка слева преобразуется к числу, а выражение справа — вычисляется.
г) '3'===1+2 // false
Логические операции || и && возвращают
значение первого операнда, если оно не false, иначе
значение второго операнда.
При выполнении логических операций с операндом "" (пустая строка), операнд (как и null, 0 или undefined) преобразуется в false.
Примеры.
'a'||'b' // 'a'
'a'|| 0 // 'a'
0 ||'a' // 'a'
Операция + для строковых операндов истолковывается интерпретатором как оператор конкатенации. Соответственно, определен комбинированный оператор += с той же семантикой.
Когда один из операндов — число, а второй — строка, JavaScript преобразует в выражении с оператором '+' число в строку и выполняет конкатенацию. Но в других случаях строка преобразуется в число. (лаб. раб. "Основы языка сценариев JavaScript").
Доступ к значениям элементов формы
Информация, которая извлекается из элементов формы, в зависимости от содержания возвращается только в двух видах: либо в виде символьных строк, либо в виде булевых значений.
Предположим, что на веб-странице создана форма с именем test:
<form name="test">
<input type="text" name="txt"/>
<input type="radio" name="radbut" value="1"/>
<input type="radio" name="radbut" value="2"/>
. . .
<select name="slct">
<option> . . .</option>
<option> . . . </option>
</select>
</form>
а) Получение объекта формы.
Для доступа к элементам формы пользуются тем, что формы преобразуются браузерами в объекты, которые запоминаются в объектной модели браузера в виде свойств объекта document.
Каждая форма сама является объектом, а элементы формы определяют свойства этого объекта. Поэтому для обработки формы на странице нужно сначала получить объект формы, а потом только анализировать ее.
Есть несколько возможностей получить объект-форму (будем использовать переменную с именем form.). Рассмотрим самые простые способы, которые поддерживаются всеми браузерами.
а) Доступ по имени
form=document.test // для получения объекта использовано имя формы
б) Все объекты-формы собираются браузером в массив.
form=document.forms[0] // формы в массиве индексируются числами
// от нуля (в порядке появления на странице)
form=document.forms["test"] // и именами форм
Замечание.
Начиная с пятой версии браузеров, можно применять новый способ доступа к элементам веб-страницы — выбирать их по идентификатору. Для этой цели в определении формы вместо атрибута NAME (или одновременно с ним) нужно определить атрибут id:
<form id="test" name="test"> ...
После этого для получения объекта можно использовать метод getElementById объекта document (в имени функции необходимо соблюдать регистры букв):
form=document.getElementById("test")
Полученный одним из этих способов объект формы можно применять для работы с элементами формы, которые рассматриваются как его свойства. Для разных типов элементов формы используются разные приемы доступа к информации.
Получение информации из простого текстового окна
Элементы input типа text разрешают введение текста и последующее его чтение для обработки в скрипте. Содержание текстового поля помещается в свойство value элемента.
Например, чтобы получить значение текстового элемента "txt" формы "test", нужно обратиться к нему следующим образом: form.txt.value (где form — объект формы).
Аналогичный прием применяется для получения значения из полей для паролей.
Задание 1
Содержание задания.
Создать форму с одним текстовым полем (элемент input типа text) и кнопкой Принять (элемент input типа submit). При нажатии кнопки Принять вызывается функция info(), которая выводит с помощью вызова функции alert текст, введенный в текстовое поле.
Для разметки формы использовать таблицу со следующей разметкой (в чистовом варианте границы таблицы убрать):
Указания.
а) В DHTML обработчики событий, происходящих с элементами документа, определяются в тегах элементов. Обработка события onSubmit относится ко всей форме, поэтому в теге формы нужно определить атрибут onSubmit:
<form name="task1" onSubmit="info()"> . . .</form>
б) Функции в JavaScript описываются в виде
function foo(x,y){
тело функции
}
Так как язык Javascript слабо типизирован, то тип возвращаемого значения и типы аргументов не указываются (и могут меняться от вызова к вызову).
Возвращаемое значение передается с помощью вызова в функции оператора return. В разных местах одной той же функции оператор return может быть применен и с выражением, значение которого возвращается, и без него (причем, сколько угодно раз).
в) Объект-форма может передаваться в функцию info через аргумент или определяться внутри этой функции.
ЗАДАНИЕ 2
Предварительные замечания.
Обратите внимание — при правильном функционировании программы после нажатия кнопки OK в окне сообщения форма автоматически очищается. Если мы хотим, чтобы некоторые результаты обработки формы выводились в эту же форму, то сброс содержания нужно отменить. Очистка формы является следствием того, что так по умолчанию обрабатывается событие Submit.
Один из способов, чтобы содержание формы сохранилось, состоит в использовании для подтверждения ввода элемента-кнопки другого типа — button. Однако, в отличие от Submit, события этой кнопки относятся не ко всей форме, а только к самому элементу-кнопке. При щелчке на кнопке типа button происходит событие Click. Поэтому, если мы хотим обработать нажатие кнопки, то в тег, определяющий кнопку, нужно добавить обработчик события onClick., в котором будет вызываться требуемая функция. Это заменит необходимость использования Submit. Чтобы далее из этой функции передать форму на обработку, нужно использовать метод форм submit().
Содержание задания.
Внести такие изменения в код страницы из задания 1, чтобы при нажатии кнопки Принять по-прежнему выводилось сообщение с текстом, взятым из формы, но сброс содержимого формы не происходил. Проверить работу программы.
Далее, добавить в форму второе текстовое окно "Результат", с атрибутом "readonly", в которое должен выводиться текст из первого окна (вместо окна сообщений alert).
Указания.
а) Чтобы приблизительно выровнять ширину кнопок "Принять" и "Очистить" (текст на кнопках разной длины), нужно в конец слова "Принять" добавить в нужном числе обязательные пробелы, которые задаются в HTML-тексте с помощью (non-break space —неразрывный пробел).
б) Чтобы "разрядить" элементы формы по вертикали, нужно подобрать для строк форматирующей таблицы подходящую высоту (задать атрибут height=…).
ЗАДАНИЕ 3
Содержание задания.
Используя файл Задания 2 как шаблон, создать форму, в которой в два текстовых окна вводятся два операнда — две последовательности символов, а при нажатии кнопки "Вычислить" в итоговое окно выводится результат сложения этих операндов. Обработка операндов производится в функции info().
Что происходит при выполнении этой операции и почему?