Контейнер FORM
Если рассматривать
программирование на JavaScript в исторической перспективе, то
первыми объектами, для которых были разработаны методы и свойства,
стали поля форм. Обычно контейнер FORM и поля форм именованы:
<FORM NAME=f_name METHOD=get
ACTION="javascript:void(0);">
<INPUT NAME=i_name
SIZE=30 MAXLENGTH=30>
</FORM>
Поэтому в программах на
JavaScript к ним обращаются по имени:
window.document.f_name.i_name.value="Текстовое поле";
Того
же эффекта можно достичь, используя массив форм загруженного
документа:
window.document.forms[0].elements[0].value="Текстовое
поле";
В данном примере не только к форме, но и к полю формы мы
обращаемся как к элементу массива.
Рассмотрим подробнее объект
Form, который соответствует контейнеру FORM.
Свойства |
Методы |
События |
|
|
|
Сами по себе методы, свойства и события объекта Form
используются нечасто. Их переопределение обычно связано с реакцией
на изменения значений полей формы.
action
Свойство action отвечает за вызов
скрипта (CGI-скрипта). В нем указывается его (скрипта) URL. Но там,
где можно указать URL, можно указать и его схему javascript:
<FORM METHOD=post
ACTION="javascript:window.alert('We use
JavaScript-code as an URL');
void(0);">
<INPUT
TYPE=submit VALUE="Продемонстрировать JavaScript в
action">
</FORM>
Обратите внимание на тот факт, что
в контейнере FORM указан атрибут METHOD. В данном случае это сделано
для того, чтобы к URL, заданному в action, не дописывался символ
"?". Дело в том, что методом доступа по умолчанию является
метод GET. В этом методе при обращении к ресурсу из формы создается
элемент URL под названием search. Этот элемент предваряется символом
"?", который дописывается к URL скрипта, а в нашем случае, к
JavaScript-коду.
Конструкция вида
window.alert("String");void(0);?
провоцирует ошибку
JavaScript.
Метод POST передает данные формы скрипту в теле
HTTP-сообщения, поэтому символ "?" не добавляется к URL, и ошибка не
генерируется. При этом применение void(0) отменяет перезагрузку
документа, и браузер не генерирует событие submit, т.е. не
обращается к серверу при нажатии на кнопку, как при стандартной
обработке форм.
method
Свойство method
определяет метод доступа к ресурсам HTTP-сервера из
программы-браузера. В зависимости от того, как автор HTML-страницы
собирается получать и обрабатывать данные из формы, он может выбрать
тот или иной метод доступа. На практике чаще всего
используются методы GET и POST.
JavaScript-программа может
изменить значение этого свойства. В предыдущем разделе (action)
метод доступа в форме был указан явно. Теперь мы его
переопределим в момент исполнения программы:
По умолчанию
установлен метод GET.
В данном примере стоит обратить внимание
на два момента:
Никаких других особенностей свойство method не имеет. В данном
свойстве можно указать и другие методы доступа, отличные от
GET и POST, но это требует дополнительной настройки сервера.
target
Свойство target определяет имя окна,
в которое следует загружать результат обращения к CGI-скрипту.
Применение значения этого свойства внутри JavaScript-программ не
оправдано, так как всегда можно получить идентификатор окна или
задействовать встроенный массив frames[0] и свойства окна opener,
top, parent и т.п. Для загрузки внешнего файла в некоторое окно
всегда можно применить метод window.open(). Но тем не менее
использовать это свойство можно:
В примере организован цикл
перебора имен фреймов. Если имя совпадает с указанным именем, то
фрейм считается выбранным. Здесь нужно сделать следующее замечание:
при работе с Internet Explorer обращения к фреймам по индексу
следует избегать.
elements[]
При генерации
встроенного в документ объекта Form браузер создает и
связанный с ним массив полей формы. Обычно к полям обращаются по
имени, но можно обращаться и по индексу массива полей формы:
<FORM NAME=fe>
<INPUT NAME=fe1 SIZE=30
MAXLENGTH=30>
<INPUT TYPE=button VALUE="Ввести текст по
имени"
onClick="document.fe.fe1.value='Ввести текст по
имени';">
<INPUT TYPE=button VALUE="Ввести текст по
индексу"
onClick="document.fe.elements[0].value='Ввести текст по
индексу';">
<INPUT TYPE=reset
VALUE="Очистить">
</FORM>
Как видно из этого примера,
индексирование полей в массиве начинается с цифры "0". Общее число
полей в форме доступно как результат обращения
document.forms[i].elements.length.
encoding
Такое свойство у объекта
Form есть, но не совсем понятно, как его использовать.
Изменение свойства encoding оправдано только в том случае, когда в
форме имеется поле типа file. В этом случае предполагается, что
пользователю разрешена передача файла со своего локального диска на
сервер. При этом если не указана кодировка multipart/form-data, то
передаваться будет только имя файла, а если она указана, то и сам
файл тоже.
Первое, что приходит в голову по этому поводу, —
отмена передачи файла при определенном стечении обстоятельств. Сам
скрипт нужно размещать во внешнем файле, чтобы пользователь не
изменил его код.
reset()
Метод reset(), не
путать с обработчиком события onReset, позволяет установить значения
полей формы по умолчанию. При этом использовать кнопку типа Reset не
требуется:
<FORM NAME=r>
<INPUT VALUE="Значение по
умолчанию" SIZE=30 MAXLENGTH=30>
<INPUT TYPE=button
VALUE="Изменим текст в поле ввода"
onClick="document.r.elements[0].value='Изменили
текст';">
</FORM>
<A
HREF="javascript:document.r.reset();void(0);">
Установили
значение по умолчанию</A>
В данном примере по
гипертекстовой ссылке происходит возврат в форме значения по
умолчанию.
submit()
Метод submit() позволяет
проинициировать передачу введенных в форму данных на сервер. При
этом методом submit() инициируется тот же процесс, что и нажатием на
кнопку типа Submit. Это позволяет отложить выполнение передачи
данных на сервер:
<FORM NAME=s METHOD=post
ACTION="javascript:window.alert('Данные
подтверждены');void(0);">
Введите цифру или букву:<INPUT
SIZE=1 MAXLENGTH=1>
</FORM>
<A
HREF="javascript:document.s.submit();">Отправить данные</A>
Вообще говоря, можно написать скрипт, который будет передавать
данные без ведома пользователя, с помощью метода submit(). Однако
браузер выдает предупреждение о таком поведении кода на странице.
onReset
Событие reset (восстановление
значений по умолчанию в полях формы) возникает при нажатии на кнопку
типа Reset или при выполнении метода reset(). В контейнере FORM
можно переопределить функцию обработки данного события. Для этой
цели в него введен атрибут onReset:
<FORM
onReset="javascript:window.alert(
'Event Reset');return
false;">
<INPUT VALUE="Значение по
умолчанию">
<INPUT TYPE=reset
VALUE="Восстановить">
</FORM>
В этом примере следует
обратить внимание на то, что обработчик события reset возвращает
логическое значение false. Это сделано для того, чтобы перехватить
обработку события reset полностью. Если обработчик события
возвращает значение false, то установка полей по умолчанию не
производится; если обработчик событий возвращает значение true, то
установка значений полей по умолчанию производится.
onSubmit
Событие submit возникает при
нажатии на кнопку типа Submit, графическую кнопку (тип image) или
при вызове метода submit(). Для переопределения метода обработки
события submit в контейнер FORM добавлен атрибут onSubmit.
Функция, определенная в этом атрибуте, будет выполняться перед тем,
как отправить данные на сервер. При этом в зависимости от того, что
функция вернет в качестве значения, данные либо будут отправлены,
либо нет.
В этом примере следует обратить внимание на
конструкцию return test();. Сама функция test() возвращает значения
true или false. Соответственно, данные либо отправляются на сервер,
либо нет.
Поля ввода (контейнер INPUT типа TEXT) являются одним из наиболее
популярных объектов программирования на JavaScript. Это объясняется тем,
что, помимо использования по прямому назначению, их применяют и в целях
отладки программ, вводя в эти поля промежуточные значения переменных и
свойств объектов.
В данном примере первое поле формы — это поле ввода.
Используя подстановку, мы присваиваем ему значение по умолчанию, а потом
при помощи кнопки изменяем это значение.
Объект Text (текстовое поле
ввода) характеризуется следующими свойствами, методами и событиями:
Свойства |
Методы |
События |
|
|
|
Свойства объекта Text — это стандартный набор свойств поля формы. В
полях ввода можно изменять только значение свойства value.
Обычно при
программировании полей ввода решают две типовых задачи: защита поля от
ввода данных пользователем и реакция на изменение значения поля ввода.
Для защиты поля от ввода в него символов применяют метод blur() в сочетании с обработчиком события onFocus:
<FORM>
<INPUT SIZE=10 VALUE="1-е значение"
onFocus="document.forms[0].elements[0].blur();">
<INPUT TYPE=button VALUE=Change
onClick="document.forms[0].elements[0].value=
'2-е значение';">
<INPUT TYPE=reset VALUE=Reset>
</FORM>
В этом примере значение поля ввода можно изменить, только нажав на кнопки Change и Reset. При попытке установить курсор в поле ввода он немедленно оттуда убирается, и таким образом, значение поля не может быть изменено пользователем.
Реакция на изменение значения поля ввода обрабатывается посредством программы, указанной в атрибуте onChange:
<FORM METHOD="post" onSubmit="return false;">
<INPUT SIZE="15" MAXLENGHT="15" VALUE="Тест"
onChange="window.alert(document.forms[0].elements[0].value);">
<INPUT TYPE="button" VALUE="Изменить"
onClick="document.forms[0].elements[0].value='Change';">
</FORM>
Если установить фокус на поле ввода и нажать Enter, ничего не
произойдет. Если ввести что-либо в расположенное выше поле ввода, а потом
нажать на Enter, то появится окно предупреждения с введенным текстом (для
Netscape Navigator) или ничего не произойдет (для Internet Explorer
последних версий). Если вы используете Internet Explorer последних версий,
то окно предупреждения появится только после установки фокуса вне поля
ввода. Это следует прокомментировать следующим образом: во-первых,
обработчик onChange вызывается только тогда, когда ввод в поле закончен.
Событие не вызывается при каждом нажатии на кнопки клавиатуры при вводе
текста в поле. Во-вторых, обработчик события не вызывается при изменении
значения атрибута VALUE из JavaScript-программы. В этом можно убедиться,
нажав на кнопку Change - окно предупреждения не открывается. Но если
ввести что-то в поле, а после этого нажать на Change, окно появится.
Отметим, что он работает по-разному для Internet Explorer и Netscape
Navigator, а именно по-разному обрабатывается событие onChange. Для
Internet Explorer при любом изменении поля событие обрабатывается
незамедлительно, для Netscape Navigator — после потери фокуса активным
полем.
В данном случае речь пойдет о выпадающих меню в контексте форм, а не в
контексте слоев и технологии CSS.
Одним из важных элементов интерфейса
пользователя является меню. В HTML-формах для реализации меню используются
поля типа select (контейнер SELECT, который, в свою очередь, вмещают в
себя контейнеры OPTION). Эти поля представляют собой списки вариантов
выбора. При этом список может "выпадать" или прокручиваться внутри окна.
Поля типа select позволяют выбрать из списка только один вариант, либо
отметить несколько вариантов. Для управления полями типа select в
JavaScript существуют объекты Select и Option.
Эти объекты
характеризуются следующими свойствами, методами и событиями:
Объект Select | |||||
Свойства |
Методы |
События | |||
|
|
| |||
Объект Option | |||||
Свойства |
Методы |
События | |||
|
нет |
нет |
Объект Option интересен тем, что в отличие от многих других объектов JavaScript, имеет конструктор. Это означает, что программист может сам создать объект Option:
opt = new Option([ text, [ value,
[ defaultSelected, [ selected ] ] ] ]);
где:
text — строка текста, которая размещается в контейнере <LI> (<LI>текст); |
value — значение, которое передается серверу при выборе альтернативы, связанной с объектом Option; |
defaultSelected — альтернатива выбрана по умолчанию(true/false); |
selected — альтернатива выбрана(true/false). |
На первый взгляд не очень понятно, для чего может понадобиться
программисту такой объект, ведь создать объект типа Select нельзя и,
следовательно, нельзя приписать ему новый объект OPTION. Все объясняется,
когда речь заходит об изменении списка альтернатив встроенных в документ
объектов Select. Делать это можно, так как изменение списка альтернатив
Select не приводит к переформатированию документа. Изменение списка
альтернатив позволяет решить проблему создания вложенных меню, которых нет
в HTML-формах, путем программирования обычных меню (options[]).
При
программировании альтернатив (объект Option) следует обратить внимание на
то, что среди свойств Option нет свойства name. Это означает, что к
объекту нельзя обратиться по имени. Отсутствие свойства объясняется тем,
что у контейнера OPTION нет атрибута NAME. К встроенным в документ
объектам Option можно обращаться только как к элементам массива options[]
объекта Select.
Массив options[] — это свойство объекта Select. Элементы этого массива обладают теми же свойствами, что и объекты Option. Собственно, это и есть объекты Option, встроенные в документ. Они создаются по мере загрузки страницы браузером. Программист имеет возможность не только создавать новые объекты Option, но и удалять уже созданные браузером объекты:
<FORM NAME=f0>
<SELECT NAME=s0>
<OPTION>Первый вариант
<OPTION>Второй вариант
<OPTION>Третий вариант
</SELECT>
<INPUT TYPE=button VALUE="Удалить последний вариант"
onClick="document.f0.s0.options[document.f0.s0.length-1]=null;">
<INPUT TYPE=reset VALUE=Reset>
</FORM>
В данном примере при загрузке страницы с сервера определено три
альтернативы. Они появляются, если выбрать поле select. После нажатия на
кнопку удаления последнего варианта ("Delete last option") остается только
две альтернативы. Если еще раз нажать на кнопку удаления альтернативы,
останется только одна альтернатива и т.д. В конечном счете, вариантов
может не остаться вообще, т.е. пользователь лишится возможности выбора.
Кнопка Reset показывает, что альтернативы утеряны бесследно, так как после
нажатия на эту кнопку содержание поля SELECT не восстанавливается.
Теперь, используя конструктор Option, сделаем процесс обратимым:
function def_f1()
{
document.f1.s1.options[0] = new Option("вариант Один","",true,true);
document.f1.s1.options[1] = new Option("вариант Два");
document.f1.s1.options[2] = new Option("вариант Три");
return false;
}
...
<FORM NAME=f1 onReset="def_f1();">
<SELECT NAME=s1>
<OPTION>вариант Один
<OPTION>вариант Два
<OPTION>вариант Три
</SELECT>
<INPUT TYPE=button VALUE="Удалить последний вариант"
onClick="document.f1.s1.options[document.f1.s1.length-1]=null;">
<INPUT TYPE=reset VALUE=Reset>
</FORM>
В данном случае мы обрабатываем событие reset (контейнер FORM). При
этом создаем новые объекты типа Option и подчиняем их объекту Select. При
этом первый элемент массива должен быть выбран по умолчанию, чтобы
смоделировать поведение при начальной загрузке страницы.
В HTML-формах
нельзя реализовать подменю. JavaScript позволяет обойти это ограничение и
выполнить замену путем программирования поля select.
В примерах перепрограммирования options[] активно используется свойство
объекта Select length. Оно определяет количество альтернатив, заданных для
поля выбора. При помощи этого свойства можно удалять и восстанавливать
списки.
Определим посредством этого свойства число вариантов в
предыдущем примере:
<FORM NAME=f3>
Число вариантов: <INPUT NAME=i0 SIZE=1 MAXLENGTH=1 onFocus="out();">
</FORM>
<SCRIPT>
document.f3.i0.value=document.f1.s1.length;
</SCRIPT>
Обратите внимание на контейнер SCRIPT. Он расположен вслед за формой. Если его ввести раньше, то поля формы будут не определены, и в результате мы получим сообщение об ошибке.
Свойство объекта Select, которое возвращает значение выбранного варианта, обозначается как selectedIndex.
<FORM>
Вариант:
<SELECT NAME=s0 onChange="form.elements[1].value=selectedIndex;">
<OPTION>Один
<OPTION>Два
</SELECT>
Выбрали индекс:
<INPUT SIZE=1 maxlength=1>
</FORM>
В этом примере обратите внимание на обработчики событий. Сам обработчик onChange мы опишем позже. Главное сейчас не это. Посмотрите, как мы обращаемся к элементам текущей формы. Во-первых, мы используем имя form. Оно указывает на объект Form, к которому принадлежит поле. Во-вторых, мы ссылаемся на второй элемент формы. На данный момент он не определен, но событие произойдет только тогда, когда мы будем выбирать вариант. К этому моменту поле уже будет определено. В-третьих, мы ссылаемся на selectedIndex, не указывая полного имени формы. В данном контексте он относится к текущей форме.
Событие change наступает в тот момент, когда изменяется значение выбранного индекса в объекте Select. С изменением этого индекса в полях выбора единственного варианта на данной странице мы сталкивались неоднократно (selectedIndex и options[]). Данное событие обрабатывается JavaScript-программой, которая указывается в атрибуте onChange контейнера SELECT. В этом контексте интересно посмотреть, что происходит, когда мы имеем дело с multiple контейнером SELECT:
<FORM>
Набор канцелярских товаров:
<SELECT onChange="form.elements[1].value='';
for(i=0;i<form.elements[0].length;i++)
if(form.elements[0].options[i].selected==true)
form.elements[1].value = form.elements[1].value+i;"multiple>
<OPTION>Вариант 1
<OPTION>Вариант 2
<OPTION>Вариант 3
<OPTION>Вариант 4
<OPTION>Вариант 5
<OPTION>Вариант 6
<OPTION>Вариант 7
</SELECT>
Выбраны позиции:
<INPUT NAME=s1 SIZE=7 MAXLENGTH=7
onFocus="form.elements[1].blur();">
</FORM>
Обратите внимание на то, что событие change имеет место тогда, когда происходит выбор или отмена альтернативы. Исключение составляет только тот случай, когда варианты при выборе последовательно отмечаются. В этом случае событие происходит в тот момент, когда пользователь отпускает кнопку мыши, и все отмеченные альтернативы становятся выбранными.
Свойство selected объекта Option, на котором был построен пример с канцелярскими принадлежностями, может принимать два значения: истина (true) или ложь (false). В примере мы распечатываем индекс выбранной альтернативы, если значение свойства selected у объекта Option — true:
if(form.elements[0].options[i].selected==true)
...
Вообще говоря, свойство selected интересно именно в случае поля множественного выбора. В случае выбора единственного варианта его можно получить, указав на свойство selectedIndex объекта Select.
Свойство text представляет собой отображаемый в меню текст, который соответствует альтернативе:
<SELECT onChange= "form.elements[2].value=
form.elements[0].options [form.elements[0
].selectedIndex].text;">
</SELECT>
В данном примере свойство text выводится в текстовое поле формы.
При передаче данных от браузера к серверу в запросе передается текст выбранной опции, если не было указано значение в атрибуте VALUE контейнера OPTION.
Кнопки Использование кнопок в 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. Это событие происходит при одном из следующих действий пользователя:
При описании отображения контейнера FORM на объекты JavaScript
было подробно рассказано об обработке события submit. В данном
разделе мы сосредоточимся на сочетании JavaScript-программ в
атрибутах полей и обработчиках событий. Особое внимание нужно
уделить возможности перехвата/генерации события submit.
Знаете ли Вы, что такое мысленный эксперимент, gedanken experiment?
Это несуществующая практика, потусторонний опыт, воображение того, чего нет на самом деле. Мысленные эксперименты подобны снам наяву. Они рождают чудовищ. В отличие от физического эксперимента, который является опытной проверкой гипотез, "мысленный эксперимент" фокуснически подменяет экспериментальную проверку желаемыми, не проверенными на практике выводами, манипулируя логикообразными построениями, реально нарушающими саму логику путем использования недоказанных посылок в качестве доказанных, то есть путем подмены. Таким образом, основной задачей заявителей "мысленных экспериментов" является обман слушателя или читателя путем замены настоящего физического эксперимента его "куклой" - фиктивными рассуждениями под честное слово без самой физической проверки. Заполнение физики воображаемыми, "мысленными экспериментами" привело к возникновению абсурдной сюрреалистической, спутанно-запутанной картины мира. Настоящий исследователь должен отличать такие "фантики" от настоящих ценностей. Релятивисты и позитивисты утверждают, что "мысленный эксперимент" весьма полезный интрумент для проверки теорий (также возникающих в нашем уме) на непротиворечивость. В этом они обманывают людей, так как любая проверка может осуществляться только независимым от объекта проверки источником. Сам заявитель гипотезы не может быть проверкой своего же заявления, так как причина самого этого заявления есть отсутствие видимых для заявителя противоречий в заявлении. Это мы видим на примере СТО и ОТО, превратившихся в своеобразный вид религии, управляющей наукой и общественным мнением. Никакое количество фактов, противоречащих им, не может преодолеть формулу Эйнштейна: "Если факт не соответствует теории - измените факт" (В другом варианте " - Факт не соответствует теории? - Тем хуже для факта"). Максимально, на что может претендовать "мысленный эксперимент" - это только на внутреннюю непротиворечивость гипотезы в рамках собственной, часто отнюдь не истинной логики заявителя. Соответсвие практике это не проверяет. Настоящая проверка может состояться только в действительном физическом эксперименте. Эксперимент на то и эксперимент, что он есть не изощрение мысли, а проверка мысли. Непротиворечивая внутри себя мысль не может сама себя проверить. Это доказано Куртом Гёделем. Понятие "мысленный эксперимент" придумано специально спекулянтами - релятивистами для шулерской подмены реальной проверки мысли на практике (эксперимента) своим "честным словом". Подробнее читайте в FAQ по эфирной физике. |