Главная | Обратная связь | Поможем написать вашу работу!

Введение в JavaScript

JavaScript

JavaScript является языком сценариев (скриптов), который применяют в основном для создания на Web-страницах интерактивных элементов. Его можно использовать для построения меню, проверки правильности заполнения форм, смены изображений или для чего-то еще, что можно сделать на Web-странице. Если взглянуть на Google Maps или службу GMail компании Google, то можно понять, на что способен сегодня язык JavaScript.

Так как JavaScript является в настоящее время единственным языком сценариев, который поддерживают все основные браузеры Web (Internet Explorer, Firefox, Netscape, Safari, Opera, Camino и т.д.), то он используется очень широко.

Код JavaScript обычно выполняется Web-браузером клиента, и в этом случае он называется сценарием на стороне клиента. Но код JavaScript можно выполнять также на Web-сервере для формирования документов HTML, воплощая тем самым сценарий на стороне сервера. Хотя использование JavaScript обычно ограничивается сценариями на стороне клиента, он является также очень мощным серверным языком.

При создании кода JavaScript требуется фактически только текстовый редактор и Web-браузер. Знание HTML и CSS будет играть определенно положительную роль, и если вы захотите использовать навыки JavaScript на Web-сайте, то понадобится также Web-сайт. Если у вас уже есть Web-сайт, то отлично! Если нет, то существует множество бесплатных серверов, которые можно использовать для размещения своих страниц.

Что касается текстового редактора, то в Windows имеется редактор NotePad. Хотя этого будет достаточно для редактирования JavaScript, HTML и CSS, более мощный редактор, такой, например, как EditPlus или другой, может оказаться более удобным.

Ну, а теперь можно перейти к созданию сценария JavaScript!

Прежде всего, необходимо узнать, как добавить сценарий JavaScript на страницу HTML. Это можно сделать одним из двух способов: поместить теги Script на Web-странице и расположить код JavaScript внутри этих тегов, или поместить весь код JavaScript в отдельный файл и связаться с ним с помощью тега Script.

Любой из этих методов вполне допустим, но они имеют разное назначение. Если имеется небольшой код, который будет использоваться только на одной странице, то размещение его между тегами Script будет хорошим решением. Если, однако, имеется большой фрагмент кода, который будет использоваться на нескольких страницах, то, наверно, лучше поместить этот код JavaScript в отдельный файл и соединиться с ним. Это делается для того, чтобы не нужно было загружать этот код всякий раз при посещении различных страниц. Код загружается один раз, и браузер сохраняет его для последующего использования. Это похоже на то, как используются каскадные таблицы стилей (CSS).

Ниже приведены примеры двух способов подключения кода JavaScript:

В первом примере, код JavaScript помещается между символами > и <, прямо перед "</script> ". Если вы совершенно не знаете, как работает Web-страница, то вот пример того, как устроена страница HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> Здесь располагается заголовок страницы </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT="Имя автора"><SCRIPT TYPE="text/javascript"></SCRIPT></HEAD> <BODY>Здесь располагается основная содержательная часть Web-страницы (тело).</BODY></HTML>

Сохраните этот файл где-нибудь на своем компьютере с расширением ".html", так, чтобы полное имя файла было, например, таким: "JavaScript_Lecture_1.html". После сохранения файла сделайте на нем двойной щелчок мышью, чтобы открыть в используемом по умолчанию браузере.

Почти любой язык программирования в мире имеет дело с объектами, называемыми "переменными", и JavaScript не является исключением. Переменная является просто элементом данных с присоединенным к нему именем. Она может содержать число, слово или предложение (называемые строками - String) или объект (Object), о которых будет рассказано позже. Если коду необходимо сообщить, что имеется 5 яблок, то можно создать переменную с именем "apples" и задать ей значение 5. Давайте сейчас это сделаем. В JavaScript для определения переменной используется ключевое слово "var". Отметим, что JavaScript различает регистр символов, поэтому "var" означает не то же самое, что "VAR" или "Var".

var apples = 5;

Необходимо сделать два важных замечания в отношении этого небольшого фрагмента кода. Первое: требуется помнить о том, что JavaScript является "слабо типизированным" языком. Это означает, что при определении переменных не требуется указывать, какого они типа: будут ли они числами, строками, объектами, и т.д. Во многих других языках необходимо делать это различие.

Второе: обратите внимание на точку с запятой (;) в конце строки. Это говорит интерпретатору JavaScript, что вы закончили делать то, что делали в данный момент, - в нашем случае это задание значения 5 переменной "apples". Хотя точка с запятой не является обязательной в JavaScript, лучше привыкнуть ее использовать.

Итак, мы определили в коде, что имеется 5 яблок. Что дальше? Информация о яблоках имеется в коде, но никто об этом не знает. Надо сообщить о яблоках! Одним из наиболее распространенных методов вывода простого сообщения пользователю является отправка уведомления (alert):

var apples = 5;alert('Имеется ' + apples + ' яблок!');

Если протестировать этот сценарий, то на экране появится окно с сообщением " Имеется 5 яблок! " Сейчас подходящее время, чтобы ввести строки (String) и так называемую конкатенацию или соединение строк. Строка является просто небольшим фрагментом текста и может содержать любой текст. В JavaScript мы сообщаем коду, что имеется строка, заключая ее в одиночные или двойные кавычки (" или '). Можно использовать любой тип кавычек. Знаки плюс (+) в примере выше сообщают коду, что мы соединяем строку с предыдущей строкой.

Итак мы имеем строку " Имеется " за которой следует переменная apples (равная 5), за которой следует еще одна строка " яблок! ". Соединим их вместе и получим " Имеется 5 яблок! ". Команда "alert" получает то, что ей передается (то, что находится между скобок) и открывает окно с текстом.

Что если мы хотим предложить пользователю съесть яблоко? Можно, например, спросить, сколько яблок он хотел бы съесть:

var apples = 5;alert('Имеется ' + apples + ' яблок!'); var eat = prompt('Сколько яблок вы хотите съесть?', '1');

"prompt" является другой встроенной функцией, аналогичной "alert". Однако вместо простого вывода информации она также получает ввод от пользователя. В данном случае мы спрашиваем у пользователя, сколько яблок он хотел бы съесть. '1' в коде сообщает функции "prompt", что значением по умолчанию для количества яблок будет 1, так как люди обычно едят только одно яблоко за раз. Однако пользователь может изменить это значение на любое другое. Когда пользователь щелкнет на кнопке " OK ", переменной "eat" будет задано значение этого ввода. Поэтому если пользователь введет 2, то eat будет равно " 2 ".

Поэтому, если пользователь съел 2 яблока, то останется 3, так? Поэтому выполним несколько простых математических операций и покажем результат.

var apples = 5;alert('Имеется ' + apples + ' яблок!'); var eat = prompt('Сколько яблок вы хотите съесть?', '1'); apples -= parseInt(eat);alert('А теперь имеется только' + apples + ' яблок!');

Здесь мы видим два новых элемента. Прежде всего, обращение к функции "parseInt", которая получает строку и возвращает число. Так как для выполнения математических операций требуются числа, то это гарантирует, что мы имеем число. Если пользователь введет в поле "2", то parseInt превратит это в число 2.

Затем, оператор "-=", который означает вычитание из левой части оператора значения правой части. Поэтому значение переменной "eat" вычитается из переменной "apples". Можно также записать эту строку следующим образом:

apples = apples - parseInt(eat);

Это означает в точности то же самое и может быть немного легче для понимания. Теперь, когда известно, сколько осталось яблок, мы еще раз сообщаем пользователю эту информацию.

Существуют другие операторы, подобные -=, которые делают похожие вещи. Всего имеется 8 обычных арифметических операторов:

+-/*+=-=/=*=

Вот и все для начала. В следующей лекции мы добавим в код проверку, введем операторы if и else и вкратце познакомимся с функциями.

Операторы и функции

При тестировании сценария, написанного в предыдущей лекции, можно заметить, что результат, получаемый из prompt, требует некоторой проверки. Когда сценарий спрашивает, сколько яблок желает съесть пользователь, то пользователь может ввести число больше 5, меньше 0 или что-то, что вообще не является числом. В каждом из таких случаев желательно информировать пользователей, что введено недопустимое значение. Так как в этом сценарии имеется только 5 яблок, то это максимальное количество яблок, которое может получить пользователь. Поэтому начнем с проверки, что введенное число не больше 5. var apples = 5; alert('Имеется ' + apples + ' яблок!'); var eat = prompt('Сколько яблок вы хотите съесть?', '1'); var eaten = parseInt(eat); if(eaten > 5){ alert('Простите, но имеется только 5 яблок. Вы не можете съесть ' + eaten + ' яблок!'); } else { apples -= eaten; alert('А теперь имеется только ' + apples + ' яблок!'); } Основными новыми понятиями здесь являются операторы "if" и "else". Операторы if и else достаточно легко понять. Приведенный выше код дает возможность сказать: "Если пользователь выбрал для еды более 5 яблок, то сообщите ему, что такого количества яблок нет. Иначе позвольте ему съесть столько яблок, сколько он попросит.". Основной синтаксис оператора if / else следующий: if(условие){ // код, который выполняется, когда справедливо условие if } else { // код, который выполняется, когда условие if ложно } Необходимо отметить открывающую и закрывающую скобки, { и }, в приведенном выше коде. Открывающая скобка сообщает коду, где начинается блок кода, а закрывающая скобка указывает коду, где блок заканчивается. Поэтому все между { и } выполняется как часть оператора if. Необходимо отметить, что закрывающая скобка оператора if размещается непосредственно перед ключевым словом "else". Оператор else имеет свой собственный набор скобок и свой собственный блок для выполнения. Две косые черты // в приведенном примере говорят коду, что здесь находится комментарий. Комментарий является частью кода, которая не выполняется. Они обычно используются для описания функций реального кода, чтобы не требовалось изучать код для выяснения, что он делает. Если, например, имеется очень длинный фрагмент кода, который проверяет входящие данные формы, то будет вполне разумно вставить комментарий, говорящий что-нибудь вроде "Следующий код проверяет ввод пользователя в форму ". В этом случае любой, кто будет просматривать код, или сам автор кода несколько месяцев спустя после написания, сразу поймет, что этот код делает. В JavaScript существует два способа записи комментариев. Первый, который мы уже видели, состоит в использовании //. Все следующее за // до конца строки считается комментарием и поэтому игнорируется при выполнении кода. Другой способ состоит в использовании комбинаций символов /* и */, в этом случае все, что находится между ними, игнорируется. // это однострочный комментарий /* если требуется более длинный комментарий, то лучше использовать "блочный комментарий". Этот комментарий является блочным комментарием, и полностью игнорируется при выполнении кода */ Для короткого сценария комментарии не всегда нужны. Но когда код длинный, они становятся необходимостью. Программистам очень часто приходится просматривать тысячи строк кода в попытке найти место для исправления ошибки. Если код имеет хорошие комментарии, то достаточно легко почти точно определить, где находится нужный код. Вернемся к нашему оператору if, if(eaten > 5){ alert('Простите, но имеется только 5 яблок. Вы не можете съесть ' + eaten + ' яблок!'); } else { apples -= eaten; alert('А теперь имеется только ' + apples + ' яблок!'); } Можно видеть, что условием является "eaten > 5 ". Знак > означает "больше чем ", так что это условие означает "если eaten больше 5 ". Аналогично, < означает "меньше чем ". Существует два других аналогичных знака >= и <=, которые означают "больше чем или равно " и " меньше чем или равно " соответственно. В приведенном выше коде мы сообщаем пользователю о том, что он ввел значение больше 5 яблок. Только если он выбрал меньше 5 яблок, это число вычитается из текущего количества яблок и затем пользователю сообщается, сколько яблок осталось. Однако существует еще два возможных случая. Что, если пользователь введет число меньше 0? Что, если он введет значение, которое не является числом? Первый случай читатель может теперь обработать самостоятельно. Второй случай требует использования другой встроенной функции, isNaN. При попытке преобразовать что-нибудь в число с помощью функции parseInt, возвращается значение "NaN", если функция не может выполнить операцию. NaN означает "Not a Number " (Не число). Если вызвать функцию parseInt, например, со значением "apple ", то будет получено значение NaN, так как слово "apple " не является числом. var apples = 5; alert('Имеется ' + apples + ' яблок!'); var eat = prompt('Сколько яблок вы хотите съесть?', '1'); var eaten = parseInt(eat); if(isNaN(eaten)){ alert('Вы должны ввести допустимое число яблок!'); } else if(eaten > apples){ alert('Простите, но имеется только ' + apples + ' яблок. Вы не можете съесть ' + eaten + ' яблок!'); } else if(eaten < 0){ alert('Простите, но вы не можете съесть отрицательное количество яблок!'); } else { apples -= eaten; alert('А теперь имеется только ' + apples + ' яблок!'); } Теперь все это должно быть понятно читателю. Прежде всего проверяется, что введено допустимое значение. Если значение недопустимо, выводится соответствующее сообщение. Затем проверяется, что введенное число не превышает количество существующих яблок, а затем - что это число не является отрицательным. Если все эти проверки проходят успешно, пользователь сможет съесть столько яблок, сколько захочет. В коде сделано еще одно изменение, вместо " if(eaten > 5) " используется " if(eaten > apples) ". Если в последующем количество имеющихся яблок "var apples = 5; " изменится, то это изменение пришлось бы делать только в одном месте. Старайтесь всегда использовать в коде переменные. Если значения "жестко закодированы", как было сделано ранее в коде "if(eaten > 5) ", то очень часто при внесении изменений придется подолгу искать эти жестко закодированные значения, чтобы убедиться, что внесены все необходимые изменения. Если пользователь ввел каким-либо образом недопустимое значение, то можно попросить его повторно ввести количество яблок, которое он хочет съесть. Одним из способов сделать это было бы копирование всего кода несколько раз. Однако обычно это не самое лучшее решение. Что, если пользователь вводит недопустимое значение снова и снова? Можно продолжить копирование кода, но легко видеть, что это крайне неэффективно и очень трудно поддерживать код в рабочем состоянии. В этом случае лучшим решением будет использование так называемой функции. Функция содержит код, который выполняет определенную задачу. Мы уже видели использование функций "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, "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, в частности. В следующей лекции будут рассмотрены циклы и формы.

Формы и циклы

В предыдущей лекции были рассмотрены операторы if/else, основы проверки и функций. Если в ходе дальнейшего чтения возникнут какие-то вопросы, то имеет смысл еще раз прочитать предыдущую лекцию.

Мы знаем теперь, как проверять данные, но при создании кода JavaScript обычно требуется проверять не оставшееся количество воображаемых яблок. Одной из наиболее общих областей применения JavaScript являются поля формы. Предположим, например, что имеется простая контактная форма. Иногда требуется убедиться, что пользователь ввел в форму свое имя или что он выбрал как минимум одну радио-кнопку для вопроса. Вот пример такой формы:

Имя: Ваш любимый цвет: Синий Желтый

Красный Черный

Зеленый Другой

Фамилия:

Адрес Email:

Отправить форму Очистить форму Зафиксировать форму на месте

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

<form name="tutform" onsubmit="return noform();" class="codesnip"

style="background-color:#FFF;z-index:10;">

<tr>

<td>Ваш любимый цвет:</td>

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

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

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

</td>

<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>

</tr>

<tr>

<td>Адрес Email:</td>

</tr>

<tr>

<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 ". Если этот код существует, то форма выполняет его перед отправкой:

function validateForm(){

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

}

</SCRIPT>

</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 делает следующее:

задает i равным 0;
проверяет, что i меньше radios.length, которое равно 6;
если это справедливо (true), выполняет код в цикле for;
после выполнения кода в цикле for добавляет 1 к переменной i;
переходит к шагу 2, пока выполняется условие "i<radios.length". Это условие не выполнится после шестого выполнения цикла, когда i=6.

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

var i=0;

while(i<radios.length){

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

i++;

}

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

return false;

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

"i<radios.length"

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

В форме осталось проверить еще ввод адреса e-mail. Это в действительности достаточно сложное для проверки поле, и правильная ее реализация выходит за рамки того, что изучается в этой лекции, но можно выполнить некоторую базовую проверку. Что нужно сделать? Мы знаем, что любой адрес e-mail должен содержать один и только один символ @. Он должен также содержать по крайней мере одну точку после символа @ (точка отделяет имя домена от домена верхнего уровня, например, "intuit.ru ").

function validateForm(){

var email = document.forms.tutform.elements.email.value;

if(email.indexOf('@')<0){

alert('В адресе e-mail должен присутствовать символ @');

return false;

} else if(email.indexOf('@')!= email.lastIndexOf('@')){

alert('В адресе e-mail не может быть больше одного символа @');

return false;

} else if(email.indexOf('.')<0){

alert('В адресе e-mail должна присутствовать хотя бы одна точка.');

return false;

} else if(email.lastIndexOf('.')<email.indexOf('@')){

alert('В адресе e-mail должна присутствовать хотя бы одна точка после символа @');

return false;

}

return true;

}

Здесь имеются две новые сходные функции, которые требуют пояснения. Функция "indexOf " возвращает число, определяющее позицию одной строки в другой строке. 'abcdef'.indexOf('a') вернет 0 (здесь 0 снова означает первую позицию). 'abcdef'.indexOf('cdef') вернет 2, а 'abcdef'.indexOf('aaa') вернет -1. -1 означает, что строка не найдена. Во многих случаях возвращается -1, когда функция не может получить результат.

Аналогично, функция "lastIndexOf " возвращает позицию последнего вхождения одной строки в другую. 'abcba'.lastIndexOf('a') вернет 4, в то время как 'abcba'.indexOf('a') вернет 0.

Поэтому в нашем коде первый оператор if проверяет, что в адресе e-mail имеется хотя бы один символ '@'. Если такого символа нет, то email.indexOf('@') вернет -1 и оператор if вернет false.

Следующий оператор соединяет indexOf и lastIndexOf. Если в адресе e-mail имеется более одного символа @, то две эти функции вернут различные значения, как в приведенном выше примере с 'abcba'. Если имеется только один символ @, то эти функции вернут одно и то же значение. Поэтому мы проверяем эти значения на неравенство.

Третий оператор по сути идентичен первому, только он проверяет '.', а не '@'.

Наконец, четвертый оператор if проверяет, что в адресе e-mail имеется как минимум одна точка после символа @.

Недостаток этого метода состоит в том, что простая строка "@." пройдет проверку. Должно быть очевидно, что она не является допустимым адресом e-mail. Существует другой метод для проверки адреса e-mail и для проверки множества других вещей. Это делается с помощью так называемых "регулярных выражений". Хотя регулярные выражения здесь рассматриваться не будут, ниже приведен пример проверки адреса e-mail, который остается читателю для анализа в качестве упражнения.

function validateForm(){

var email = document.forms.tutform.elements.email.value;

if(!(/^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.

[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/.test(email))){

alert('Пожалуйста, введите допустимый адрес e-mail');

return false;

}

return true;

}

Как можно видеть, использование регулярного выражения приводит к более короткому (и более надежному) коду проверки, но он является и существенно более сложным!

С помощью примеров этой лекции теперь можно создать одну функцию для проверки всей формы:

function tut7(){

var form_object = document.forms.tutform;

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

var email = document.forms.tutform.elements.email.value;

if(form_object.elements.firstname.value == "){

alert('Вы должны ввести свое имя!');

return false();

} else if(form_object.elements.lastname.value == "){

alert('Вы должны ввести свою фамилию!');

return false();

} else if(email.indexOf('@')<0){

alert('В адресе e-mail должен быть символ @');

return false();

} else if(email.indexOf('@')!= email.lastIndexOf('@')){

alert('В адресе e-mail не может быть более одного символа @');

return false();

} else if(email.indexOf('.')<0){

alert('В адресе e-mail должна быть как минимум одна точка');

return false();

} else if(email.lastIndexOf('.')<email.indexOf('@')){

alert('В адресе e-mail должна быть как минимум одна точка после символа @');

return false();

}

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

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

}

alert('Необходимо выбрать цвет!');

return false;

}

12 3 Следующая ⇒