Кнопки
Использование кнопок в Web вообще немыслимо без применения JavaScript. Создайте форму с кнопкой и посмотрите, что будет, если на эту кнопку нажать — кнопка продавливается, но ничего не происходит. Ни одно из стандартных событий формы (reset или submit) не вызывается. Конечно, данное замечание не касается кнопок Submit и Reset.
Кнопка вводится в форму главным образом для того, чтобы можно было обработать событие click:
<FORM>
<INPUT TYPE=button VALUE="Окно предупреждения" onClick="window.alert('Открыли окно');">
</FORM>
Текст, отображаемый на кнопке, определяется атрибутом VALUE контейнера INPUT. С этим атрибутом связано свойство value объекта Button. Любопытно, что, согласно спецификации, изменять значение данного атрибута нельзя. Однако в версии 4 Netscape Navigator и Internet Explorer это допустимо.
Следует отметить, что в Netscape Navigator размер кнопки фиксирован (первое значение должно быть самым длинным, иначе будет не очень красиво), а в Internet Explorer размер изменяется в зависимости от длины текста.
Картинки
Кнопки-картинки — это те же кнопки, но только с возможностью отправки данных на сервер. Собственно, такие кнопки в JavaScript составляют две разновидности контейнера INPUT: image и submit. В JavaScript объект, связанный с данными кнопками, называется Submit.
<FORM>
Активная кнопка:
<INPUT TYPE=image SRC=images.gif onClick="return false;">
</FORM>
Как мы уже отмечали, данный объект обладает теми же свойствами, методами и событиями, что и объект Button. Но вот реакция в разных браузерах при обработке событий может быть различной. Так, в событии onClick в Internet Explorer можно отменить передачу данных на сервер, выдав в качестве значения возврата false. Netscape Navigator на такое поведение обработчика события вообще не реагирует, и отменять передачу можно только в атрибуте onSubmit контейнера FORM:
<FORM onSubmit="return false">
Активная кнопка:
<INPUT TYPE=image SRC=images.gif border=0>
</FORM>
Наиболее интересной особенностью графических кнопок является их способность передавать в запросе на сервер координаты точки, которую указал пользователь, нажимая на кнопку мышью. К сожалению, обработать такое поведение кнопки в JavaScript-программе не удается.
Обмен данными
Передача данных на сервер из формы осуществляется по событию submit. Это событие происходит при одном из следующих действий пользователя:
- нажата кнопка Submit;
- нажата графическая кнопка;
- нажата клавиша Enter в форме из одного поля;
- вызван метод submit().
При описании отображения контейнера FORM на объекты JavaScript было подробно рассказано об обработке события submit. В данном разделе мы сосредоточимся на сочетании JavaScript-программ в атрибутах полей и обработчиках событий. Особое внимание нужно уделить возможности перехвата/генерации события submit.
Кнопка Submit
Кнопка Submit представляет собой разновидность поля ввода. Она ведет себя так же, как и обычная кнопка, но только еще генерирует событие submit (передачу данных на сервер). В этом, с точки зрения JavaScript-программирования, она абсолютно идентична графическим кнопкам:
<FORM>
<INPUT TYPE=submit VALUE=submit>
</FORM>
В данном примере мы просто перезагружаем страницу.
С точки зрения программирования наибольший интерес представляет возможность перехвата события submit и выполнение при этом действий, отличных от стандартных. Для этой цели у кнопки есть атрибут обработки события click (onClick):
<FORM>
<INPUT TYPE=submit VALUE=Submit onClick="return false;">
</FORM>
Из этого примера видно, что кнопка Submit ведет себя несколько иначе, чем графическая кнопка в Netscape Navigator, но так же, как графическая кнопка в Internet Explorer (со временем различия наверняка исчезнут). При нажатии на кнопку перезагрузки страницы не происходит — передача данных на сервер отменена. Обработчик действует так же, как обработчик события submit в контейнере FORM.
Теперь можно написать собственную программу обработки события submit:
function my_submit()
{
if(window.confirm("Хотите перегрузить страницу?")) return true;
else return false;
}
...
<FORM>
<INPUT TYPE=submit VALUE=Submit onClick="return my_submit();">
</FORM>
Если подтвердить необходимость перезагрузки страницы, она действительно будет перезагружена, а при отказе (cancel) вы вернетесь в текущую страницу без перезагрузки. Действия могут быть и более сложными. В любом случае, если функция обработки возвращает значение true, то передача данных на сервер (в нашем примере — перезагрузка страницы) происходит, иначе (значение false) — данные не передаются.
Единственное поле в форме
Если в форме присутствует одно-единственное поле, и мы в него осуществили ввод и после этого нажали Enter, то браузер сгенерирует событие submit:
<FORM onSubmit="window.alert('Сделано');return false;">
<INPUT SIZE=10 MAXLENGTH=10>
</FORM>
Перехватить такое событие и обработать можно только за счет программы обработки события submit в контейнере FORM, что и сделано в примере.
В этом примере, кроме поля ввода, в форме присутствует меню. Если менять значения выбранных альтернатив, то перезагрузки не происходит, но стоит изменить значение в поле ввода и нажать Enter, происходит submit, и система выдает окно предупреждения.
Метод submit()
Метод submit() — это метод формы. Если в программе вызывается метод submit, то данные из формы, к которой применяется данный метод, передаются на сервер. Усовершенствуем пример с полем ввода и меню выбора (прежде чем выбирать альтернативы, прочтите комментарий под примером):
<FORM onSubmit="window.alert('Сделано');return false;">
<INPUT SIZE=10 MAXLENGTH=10>
<SELECT onChange="form.submit();">
<OPTION>Вариант 1<OPTION>Вариант 2</SELECT>
</FORM>
При выборе альтернативы пользователь сразу инициирует обмен данными с сервером. Событие submit в данном случае обработчиком событий не перехватывается, в отличие от нажатия Enter. Такое поведение браузера довольно логично. Если программист вызвал метод submit(), то, наверное, он предварительно проверил данные, которые отправляет на сервер.
Cookies
Волшебные ключики, или cookies, не являются полями формы, но, тем не менее, отойдя от строгого рассмотрения иерархии объектов JavaScript, мы уделим им немного внимания, как одному из механизмов управления обменом данных. Основная функция cookie — поддержка сеанса работы между клиентом (браузером) и сервером.
cookie — это небольшой фрагмент текста, который передается от сервера браузеру и потом может быть возвращен обратно. Подробно о cookie рассказано в "Спецификации Cookie", которую можно найти в в главе "Дополнения". Программа на JavaScript способна прочитать выставленное значение cookie и даже изменить его. Для этой цели используют свойство объекта DOCUMENT — cookie:
<FORM>
<INPUT TYPE=button VALUE="Показать Cookies" onClick="window.alert(window.document.cookie);">
</FORM>
В данном случае cookies отображаются в виде одной большой строки со множеством значений. Свойство cookies документа можно переопределить:
function asign()
{
document.cookie="n1=3";
window.alert(document.cookie);
}
...
<FORM>
<INPUT TYPE=button VALUE="Изменить n1" onClick="asign()">
</FORM>
Как видно из примера, программисту не нужно выделять cookie из строки. Браузер рассматривает cookies как ассоциированный массив (хеш) и изменяет значение cookie по имени "ключика".
Наконец, cookie можно удалить. Если быть более точным — деактивировать, указав время его действия:
function change_cookies()
{
a = new Array();
c = new Date();
a = document.cookie.split(';');
document.cookie=a[0]+"; expires="+c.toGMTString()+";"
window.alert(document.cookie);
}
...
<FORM>
<INPUT TYPE=button VALUE="delete cookies" onClick="change_cookies()">
</FORM>
В данном случае мы "удаляем" cookie за счет параметра expire (времени, до которого cookie живет). Так как мы берем текущее время, то cookie исчезает из списка "ключиков". Многократно нажимая на кнопку, можно удалить все cookies для данной страницы.
|