www.popularsite.ru

RESTOR- От HTML до С++

Объявление

HTML

JavaScript

CSS

Flash MX

   

Содержание Курса(Введение в HTML)

     

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » RESTOR- От HTML до С++ » Введение в JavaScript » 3. Лекция: Программируем формы


3. Лекция: Программируем формы

Сообщений 21 страница 30 из 33

21

length

В примерах перепрограммирования 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. Он расположен вслед за формой. Если его ввести раньше, то поля формы будут не определены, и в результате мы получим сообщение об ошибке.

0

22

selectedIndex

Свойство объекта 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, не указывая полного имени формы. В данном контексте он относится к текущей форме.

0

23

onChange

Событие 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 имеет место тогда, когда происходит выбор или отмена альтернативы. Исключение составляет только тот случай, когда варианты при выборе последовательно отмечаются. В этом случае событие происходит в тот момент, когда пользователь отпускает кнопку мыши, и все отмеченные альтернативы становятся выбранными.

0

24

selected

Свойство selected объекта Option, на котором был построен пример с канцелярскими принадлежностями, может принимать два значения: истина (true) или ложь (false). В примере мы распечатываем индекс выбранной альтернативы, если значение свойства selected у объекта Option — true:
if(form.elements[0].options[i].selected==true)
...

Вообще говоря, свойство selected интересно именно в случае поля множественного выбора. В случае выбора единственного варианта его можно получить, указав на свойство selectedIndex объекта Select.

0

25

text

Свойство text представляет собой отображаемый в меню текст, который соответствует альтернативе:

<SELECT onChange= "form.elements[2].value=
form.elements[0].options [form.elements[0
].selectedIndex].text;">
</SELECT>

В данном примере свойство text выводится в текстовое поле формы.

0

26

value

При передаче данных от браузера к серверу в запросе передается текст выбранной опции, если не было указано значение в атрибуте VALUE контейнера OPTION.

0

27

Кнопки

Использование кнопок в 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 размер изменяется в зависимости от длины текста.

0

28

Картинки

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

0

29

Обмен данными

Передача данных на сервер из формы осуществляется по событию submit. Это событие происходит при одном из следующих действий пользователя:
нажата кнопка Submit;
нажата графическая кнопка;
нажата клавиша Enter в форме из одного поля;
вызван метод submit().

При описании отображения контейнера FORM на объекты JavaScript было подробно рассказано об обработке события submit. В данном разделе мы сосредоточимся на сочетании JavaScript-программ в атрибутах полей и обработчиках событий. Особое внимание нужно уделить возможности перехвата/генерации события submit.

0

30

Кнопка 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) — данные не передаются.

0


Вы здесь » RESTOR- От HTML до С++ » Введение в JavaScript » 3. Лекция: Программируем формы


Рейтинг форумов | Создать форум бесплатно