Основы программирования на JavaScript

Кан Марк

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

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

Если щелкнуть на этой кнопке, а затем отправить учебную форму, то появится уведомление с тем значением, которое было введено

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

<SCRIPT TYPE="text/javascript">

function validateForm{

// код проверки формы находится здесь

}

</SCRIPT>

<FORM ONSUBMIT="return validateForm;">

<!-- элементы формы находятся здесь -->

</FORM>

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

Как видно из предыдущего фрагмента кода, свойство ".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).

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

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

<input type="radio" name="color" value="blue">Синий

<input type="radio" name="color" value="red">Красный

<input type="radio" name="color" value="green">Зеленый

В связи с этим существует способ доступа ко всем радио-кнопкам с одним именем.

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

function validateForm{

var radios = document.forms.tutform.elements.color;

for(var i=0; i<radios.length; i++){

if(radios[i].checked) return true;

}

alert('Вы должны выбрать цвет!');

return false;

}

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

for(var i=0; i<radios.length; i++){

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

var i=0

i<radios.length

i++

Первое значение является просто заданием значения переменной. Это должно быть теперь понятно без проблем. Второе значение является условием проверки. Цикл for будет выполняться, пока это условие проверки возвращет true. Как только оно вернет false, цикл for остановится и выполнение кода продолжится со следующей строки. Поэтому условие i<radios.length говорит, что цикл 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;