Марк Кан - Основы программирования на JavaScript

Имя: Ваш любимый цвет: Синий Желтый Красный Черный Зеленый Другой Фамилия: Адрес Email: Отправить форму Очистить форму Зафиксировать форму на месте

Ниже представлен код этой формы. Он приведен только для иллюстрации.

Прежде всего необходимо узнать, как создать объект JavaScript , который ссылается на форму. Любую форму на странице можно указать с помощью конструкции document.forms . Если имеется форма с именем tutform , то к ней можно обратиться следующим образом: document.forms.tutform .

На любые элементы внутри формы (поля ввода, поля выбора, флажки и т.д) можно ссылаться с помощью конструкции elements : document.forms.ИмяФормы.elements . Если на форме имеется поле ввода с именем firstname , то значение этого поля можно вывести следующим образом:

alert('Имя: ' + document.forms.tutform.elements.firstname.value);

Если щелкнуть на этой кнопке, а затем отправить учебную форму, то появится уведомление с тем значением, которое было введено в поле Имя . Как это происходит? Когда форма посылается на сервер, Web-браузер ищет код onsubmit . Если этот код существует, то форма выполняет его перед отправкой:

function validateForm(){ // код проверки формы находится здесь }

Теперь, зная, как получить доступ к форме и элементам на этой форме, выполним некоторые основные проверки. Распространенной задачей является проверка, что именно пользователь ввел в поле ввода. Например, надо проверить, что пользователь ввел свое имя.

Как видно из предыдущего фрагмента кода, свойство " .value " объекта формы можно использовать для получения его значения. Это работает для объектов формы любого типа. Попробуем теперь проверить, что пользователь ввел на форме свои имя и фамилию:

function validateForm(){ var form_object = document.forms.tutform; if(form_object.elements.firstname.value == ''){ alert('Вы должны ввести свое имя!'); return false; } else if(form_object.elements.lastname.value == ''){ alert('Вы должны ввести свою фамилию!'); return false; } return true; }

Важными моментами, которые необходимо отметить в этой функции, являются строки return false ; и return true ;. Если функция проверки возвращает значение true , то форма будет отправлена как обычно. Если, однако, функция вернет значение false , то форма отправлена не будет. Необходимо сообщить пользователю, почему форма не была отправлена, поэтому в функцию вставлены уведомления ( alert ).

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

Радио-кнопки и флажки на форме представляют специальную ситуацию. Часто имеется несколько радио-кнопок с одним и тем же именем, что почти всегда исключено для полей ввода, полей выбора и т.д.:

Синий Красный Зеленый

В связи с этим существует способ доступа ко всем радио-кнопкам с одним именем. Значение document.forms.имяФормы.elements.имяРадиокнопок будет содержать список со всеми радио-кнопками. Так как необходимо проверить, что хотя бы одна радио-кнопка отмечена, то потребуется просмотреть все эти радио-кнопки. Если хотя бы одна из них отмечена, функция проверки должна вернуть true . Поэтому функция выглядит теперь следующим образом:

function validateForm(){ var radios = document.forms.tutform.elements.color; for(var i=0; i

Новым элементом в этом коде является так называемый цикл for . Он выглядит немного более сложно, чем есть в действительности, поэтому разберем его составные элементы:

for(var i=0; i

Внутри скобок имеется три значения, разделенные точкой с запятой. Этими значениями, по отдельности, являются:

var i=0 i

Первое значение является просто заданием значения переменной. Это должно быть теперь понятно без проблем. Второе значение является условием проверки. Цикл for будет выполняться, пока это условие проверки возвращет true . Как только оно вернет false , цикл for остановится и выполнение кода продолжится со следующей строки. Поэтому условие i говорит, что цикл for должен выполняться, пока переменная i меньше числа имеющихся радио-кнопок.

" length " в данном случае является свойством массива. Мы пока еще не встречались с массивами, но, упрощая, можно сказать, что radios.length возвращает просто число элементов в radios , которое в данном случае равно 6 , так как имеется только 6 радио-кнопок. Последнее выражение цикла for , i++ , является кодом, который должен выполняться после каждого шага цикла.

Говоря более простым языком, цикл for делает следующее:

1задает i равным 0 ;

2проверяет, что i меньше radios.length , которое равно 6 ;

3если это справедливо ( true ), выполняет код в цикле for ;

4после выполнения кода в цикле for добавляет 1 к переменной i ;

5переходит к шагу 2, пока выполняется условие i . Это условие не выполнится после шестого выполнения цикла, когда i=6 .

Существует другой тип цикла, который сейчас будет рассмотрен, - так называемый цикл while . Следующий код делает то же самое, что и предыдущий цикл:

var i=0; while(i

Можно видеть, что здесь в цикле while присутствуют точно те же 3 фрагмента кода, которые имелись в цикле for : " var i=0 ", " i " и " i++ ". Единственное отличие состоит в их размещении. В цикле while только проверка

i

чем-то отличается от того, что было написано раньше. Эта проверка происходит в скобках сразу после while . Переменные инициализируются перед циклом while , а увеличение i , i++ , происходит внутри цикла.

В этих циклах осталось объяснить еще одну вещь: if(radios[i].checked) . Переменная radios содержит массив радио-кнопок с именем color . Массивы будут рассмотрены в следующей лекции, а здесь дадим упрощенное объяснение: radios[0] возвращает первую радио-кнопку, radios[1] возвращает вторую, radios[2] - третью, и т.д. до radios[5] , который возвращает шестую кнопку. Если кнопок будет больше, например, 100 , то radios[99] будет обращаться к 100 -ой радио-кнопке.

Все эти числа могут показаться странными. Почему radios[5] обращается к шестой радио-кнопке? В JavaScript , как и во многих других языках программирования, многие вещи начинаются с числа 0 , а не с 1 . Это просто один из таких случаев, но это встретится еще не раз. Поэтому 0 является в действительности первым элементом, 1 - вторым, и т.д.