В этом случае лучшим решением будет использование так называемой функции. Функция содержит код, который выполняет определенную задачу. Мы уже видели использование функций alert, prompt, parseInt и isNaN, которые встроены в язык JavaScript. Преимущество использования функций состоит в том, что можно выполнять один и тот же блок кода снова и снова, не копируя этот код, Для выполнения функции необходимо написать ее имя, за которым следуют скобки (), а все значения, передаваемые в функцию, записываются между скобками.
var apples = 5; function eatApples(){ alert('Имеется ' + apples + ' яблок!'); var eat = prompt('Сколько яблок вы хотите съесть?', '1'); var eaten = parseInt(eat); if(isNaN(eaten)){ alert('Вы должны ввести допустимое число яблок!'); eatApples(); } else if(eaten > apples){ alert('Простите, но имеется только ' + apples + ' яблок. Вы не можете съесть ' + eaten + ' яблок!'); eatApples(); } else if(eaten < 0){ alert('Простите, но вы не можете съесть отрицательное количество яблок!'); eatApples(); } else { apples -= eaten; alert('А теперь имеется только ' + apples + ' яблок!'); if(apples > 0){ if(confirm('Не хотите съесть еще яблочко?')){ eatApples(); } } else { alert('Яблок больше нет!'); } } }
Здесь весь наш код записан в виде функции с именем eatApples. Можно видеть, что каждый раз, когда пользователь вводит неверное значение, снова вызывается функция eatApples();, чтобы пользователь мог ввести новое значение. Когда пользователь вводит допустимое значение, то он либо может еще есть яблоки, либо, если все яблоки закончились, он получит соответствующее сообщение. Здесь используется также одна новая функция, confirm. Функция confirm просто выводит пользователю приглашение OK or Cancel ("Да или Отмена"). Если пользователь нажмет кнопку "OK", то функция возвращает значение true (да). Если пользователь нажмет кнопку Cancel или просто закроет окно, то функция confirm возвращает значение false (нет). Поэтому в нашем примере функция eatApples вызывается снова только в том случае, когда пользователь щелкнет на кнопке OK.
В конце этой лекции будет рассмотрена область действия переменной. Как можно видеть, в последнем примере переменная apples находится вне функции eatApples. Это делает переменную apples "глобальной переменной", т.е. она будет доступна из любой функции. Переменная eat, с другой стороны, является локальной переменной и существует только внутри функции eatApples. Кроме того, каждый раз при вызове функции eatApples переменная eat не будет существовать, пока не будет снова определена функцией prompt.
Чтобы увидеть эту концепцию в действии, напишем две простые функции счета:
function counting1(){ var count = 0; count++; alert(count); } var count = 0; function counting2(){ count++; alert(count); }
Если запустить этот пример в браузере и щелкнуть на каждой кнопке несколько раз, то можно заметить, что counting1 всегда выдает одно и то же значение, 1. counting2, с другой стороны, выдает увеличивающееся число. Почему это происходит? Посмотрим просто сначала на counting1. Можно видеть, что каждый раз при выполнении counting1 прежде всего создается переменная count и ее значение задается равным 0. В следующей строке переменная count увеличивается на 1.
Оператор ++ пока еще не встречался. count++ просто увеличивает count на 1. Другими словами, это в точности то же самое, что написать count += 1 или count = count + 1. Поскольку увеличение на 1 является в программировании очень распространенным действием, то для него существует специальный оператор. Аналогично оператор -- вычитает 1 из переменной: count--.
Каждый раз, когда функция counting1 выполняет alert(count), она сообщает значение новой переменной count , которое только что было определено как 0+1.
Теперь посмотрим на counting2. Можно видеть, что переменная count в этом случае находится вне функции. Даже до вызова этой функции значение count задано как 0. При вызове counting2 прежде всего происходит увеличение переменной count на 1. Так как мы не восстанавливаем значение count в 0, как в случае counting1, то переменная count продолжает сохранять свое значение, и все происходит, как и предполагалось.
Теперь читатель получил общее понимание некоторых фундаментальных понятий программирования и JavaScript, в частности. В следующей лекции будут рассмотрены циклы и формы.
Лекция 3. Формы и циклы
В предыдущей лекции были рассмотрены операторы if/else, основы проверки и функций. Если в ходе дальнейшего чтения возникнут какие-то вопросы, то имеет смысл еще раз прочитать предыдущую лекцию.
Мы знаем теперь, как проверять данные, но при создании кода JavaScript обычно требуется проверять не оставшееся количество воображаемых яблок. Одной из наиболее общих областей применения JavaScript являются поля формы. Предположим, например, что имеется простая контактная форма. Иногда требуется убедиться, что пользователь ввел в форму свое имя или что он выбрал как минимум одну радио-кнопку для вопроса. Вот пример такой формы:
Имя: Ваш любимый цвет: Синий Желтый Красный Черный Зеленый Другой Фамилия: Адрес Email: Отправить форму Очистить форму Зафиксировать форму на месте
Ниже представлен код этой формы. Он приведен только для иллюстрации.
<form name="tutform" onsubmit="return noform();" class="codesnip" style="background-color:#FFF;z-index:10;"> <table width="100%"> <tr> <td>Имя:</td> <td><input name="firstname"></td> <td>Ваш любимый цвет:</td> <td rowspan="3" valign="top"> <input type="radio" name="color" value="blue">Синий<br /> <input type="radio" name="color" value="red">Красный<br /> <input type="radio" name="color" value="green">Зеленый </td> <td rowspan="3" valign="top"> <input type="radio" name="color" value="yellow">Желтый<br /> <input type="radio" name="color" value="black">Черный<br /> <input type="radio" name="color" value="other">Другой </td> </tr> <tr> <td>Фамилия:</td> <td><input name="lastname"></td> </tr> <tr> <td>Адрес Email:</td> <td><input name="email"></td> </tr> <tr> <td colspan="2"><input type="submit" value="Отправить форму"> <input type="reset" value="Очистить форму"></td> <td colspan="3" align="right"><button id="lockbutton" onclick="swapLock();return false;">Зафиксировать форму на месте</button></td> </tr> </table> </form>
Прежде всего необходимо узнать, как создать объект JavaScript, который ссылается на форму. Любую форму на странице можно указать с помощью конструкции document.forms. Если имеется форма с именем tutform, то к ней можно обратиться следующим образом: document.forms.tutform.
На любые элементы внутри формы (поля ввода, поля выбора, флажки и т.д) можно ссылаться с помощью конструкции 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).