Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 93 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

<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.
Кнопка вводится в форму главным образом для того, чтобы можно было обработать событие 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">

Страницы