Принципы событийной архитектуры диалоговых программ

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

Чтобы обеспечить такие возможности, диалоговые программы реализуют событийную архитектуру, в которой нужно выделить два ключевых момента. Во-первых, действия пользователя рассматриваются как события. Например, установлен флажок, нажата кнопка типа "submit", пользователь щелкнул мышкой на картинке и т.п.

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

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

Например, при нажатии кнопки типа "submit" происходит событие Submit. Операторы функции-обработчика для этого события (только тело функции) описываются в атрибуте onsubmit (в именах атрибутов регистры букв не учитываются). Приставка on к имени события — это общая для всех событий схема образования имен атрибутов для обработчиков.

Контроль правильности заполнения формы (обработка события Submit)

Когда пользователь подтверждает, что форма им заполнена, происходит событие Submit. Браузер, вместо отправки данных на сервер, может перехватить их и передать с функции, определенной на веб-странице и выполняющей контроль правильности заполнения формы. Технически это выполняется следующим образом.

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

Один атрибут — это action, который задает URL прикладной программы, для которой информация из формы является входной информацией (может быть серверной программой или веб-страницей).

Второй атрибут — onsubmit, в котором задается функция, выполняемая до отправки, например, осуществляющая контроль правильности заполнения формы. Для браузера атрибут onsubmit имеет более высокий приоритет, чем action, поэтому действия, заданные в onsubmit, выполняются до использования атрибута action.

Это дает возможность управлять работой браузера. Если в данных формы обнаружены ошибки, то код в атрибуте onsubmit должен возвращать false и тем самым запрещать браузеру отсылать данные на обработку. Одновременно можно предложить пользователю исправить ошибки.

Если в результате проверки выяснено, что форма заполнена правильно, то программный код в атрибуте onsubmit должен возвращать (оператор return) значение true. Это разрешает браузеру продолжать отправку формы и использовать атрибут action. Это может выглядеть так:

onsubmit="info();return true;"

Однако по результатам проверки "правильно/неправильно" необходимо организовать ветвление, и возвращать, соответственно, true или false.

Поэтому, если проверка заполнения формы осуществляется функцией info(), удобно сделать так, чтобы эта функция в зависимости от результата проверки возвращала true или false. Тег формы в этом случае должен выглядеть так:

<form name="task1" onsubmit="return info();"> . . .</form>

Замечание

"Лишний" оператор возврата в атрибуте onsubmit необходим, чтобы работал механизм разрешения/запрета отправки данных. В лабораторной работе используется упрощенный синтаксис задания функций-обработчиков. Интерпретируя его, браузер помещает код, находящийся в кавычках, в анонимную функцию, и управление дальнейшими действиями браузера зависит от возвращаемого значения именно этой анонимной функции. Без "лишнего" оператора возврата анонимная функция не будет ничего возвращать — function(){info();}, т.е. только выполнит info. По умолчанию это будет трактоваться, как возврат true, т.е. независимо от результатов проверки, данные всегда будут отсылаться по адресу, указанному в action.

Таким образом, чтобы обеспечить проверку заполнения формы на стороне клиента (браузером), необходимо выполнить два действия.

а) Подготовить функцию-обработчик события Submit (например, с именем info), которая, в зависимости от результатов проверки, возвращает true или false.

б) Добавить в элемент формы атрибут onsubmit, в который поместить оператор, возвращающий результат выполнения функции-обработчика.

<form name="task1" onsubmit="return info();"> . . .</form>