Использование операторов в языке JavaScript

Вы изучили переменные, массивы и операции, теперь можно перейти к операторам JavaScript.

Операторы (statements) представляют собой мощный инструмент языка JavaScript. После того как вы освоите операторы, ваши сценарии перейдут на качественно новый уровень, и вы с легкостью сможете решать более сложные задачи.

В этой главе излагается материал по следующим темам:

  • назначение операторов;
  • оператор variable;
  • оператор if;
  • операторы организации цикла;
  • оператор continue;
  • оператор break;
  • оператор switch.

Что такое операторы

Все сценарии JavaScript, независимо от их размеров и сложности, представляют собой последовательность операторов.

Пример. Вам уже встречались такие примеры. Выводимое на экран окно предупредительных сообщений является результатом выполнения оператора:

<script language="JavaScript">
<!-- Маскируемся!
alert("Это тоже оператор!");
// Снимаем маскировку. -->
</script>

Пример. Ниже приводится еще один пример оператора:

<script language="JavaScript">
<!-- Маскируемся!
var ournames = "Кэти и Эдриан";
// Снимаем маскировку. -->
</script>

Пример. И еще несколько операторов:

<script language="JavaScript">
<!-- Маскируемся!
var ournames = "Кэти и Эдриан", ans;
alert("Вас приветствуют " + ournames);
ans = prompt("Вам нравится изучать JavaScript?","Да или нет");
alert(ans);
// Снимаем маскировку. -->
</script>

Все написанные вами сценарии выполнялись от первой до последней строчки (если они не были организованы для выполнения в другом порядке). Обратите внимание на одну общую особенность. Это точка с запятой (;) в конце каждой строки. В языке JavaScript точки с запятой означают конец оператора (подобно точке, которая ставится в конце предложения). Расставлять их не обязательно, если вы это не сделаете, то JavaScript расставит их за вас. Однако их рекомендуется использовать по следующим причинам:

  • ваш сценарий будет легче читаться;
  • пропуски точек с запятой иногда могут приводить к ошибкам, поскольку JavaScript не всегда расставляет их правильно.

Давайте рассмотрим несколько различных операторов, используемых в языке JavaScript.

Оператор variable

Пример. Оператор variable уже знаком вам. По своему смыслу он подобен завершенному предложению в английском языке. То есть в случае

var this_year = 2001;

оператор variable означает, что создана переменная this_year и ей присвоено значение 2001. Это законченное предложение.

Оператор if

Оператор if управляет последовательностью выполнения команд и может использоваться для разных целей. В сценарии JavaScript он позволяет выбрать и запустить на выполнение одну из двух альтернативных групп операторов. Выбор осуществляется с помощью булевых выражений (true или false).

Рассмотрим, например, как функционирует с помощью оператора if окно подтверждения.

Пример. Сначала надо создать обычное окно подтверждения с помощью метода confirm():

<script language="JavaScript">
<!-- Маскируемся!
confirm("Bы будете и дальше читать эту книгу? Нажмите ОК. Если нет, то нажмите Cancel.");
// Снимаем маскировку. -->
</script>

Пользователю дается возможность выбрать одну из двух кнопок (см. рис. 7.1). Давайте напишем код для тех пользователей, которые предпочтут ОК (не думаете же вы, что кто-то выберет Cancel).


Рис. 7.1. Выведенное на экран окно подтверждения

Когда пользователь щелкает по кнопке ОК, создается булево выражение true, с помощью которого вы узнаете о сделанном выборе. Для этого нужно объявить переменную и соотнести ее с методом confirm ():

<script language="JavaScript">
<!-- Маскируемся!
var response = confirm("Bы будете и дальше читать эту Kirary? Нажмите ОК. Если нет, то нажмите Cancel.");
// Снимаем маскировку. -->
</script>

Переменная response запоминает ответ пользователя на вопрос. Это происходит так же, как переменная сохраняет введенную пользователем строку при помощи метода prompt (). Иными словами, если пользователь щелкает по кнопке ОК, то переменной response присваивается значение true (см. рис. 7.2). Чтобы убедиться в этом, воспользуемся оператором if.

Пример. Это выполняется в JavaScript следующим образом:

<script language="JavaScript">
<!-- Маскируемся!
var response = confirm("Вы будете и дальше читать эту книгу? Нажмите ОК. Если нет, то нажмите Cancel.");
if ( response == true )
{
alert("Отличный выбор!");
}
// Снимаем маскировку. -->
</script>


Рис. 7.2. Окно подтверждения, выведенное на экран после щелчка по кнопке ОК

Давайте рассмотрим это пример построчно:

if ( response == true )

Это начало оператора if (заметьте, что в конце строки нет точки с запятой), здесь определяется, присвоено ли переменой response значение true. Если это условие выполняется, осуществляется переход к следующей строке.

В следующей строке находится открывающая фигурная скобка ({), значение которой бывает трудно понять новичкам. Однако смысл фигурных скобок очевиден. Фигурные скобки ({ и }) используются для объединения заключенных в них операторов.

Рекомендация Рассматривайте содержимое фигурных скобок как отдельные пункты списка. Другими словами, если условие верно, выполняется

{
то;
это;
и еще кое-что;
}

Примечание Фигурные скобки можно располагать по-разному. В данной книге они ставятся в отдельной строке, чтобы сразу привлекать внимание.

Следующая строка используется для вызова окна предупредительных сообщений, содержащего текст «Отличный выбор». Затем идет закрывающая фигурная скобка (}).

Сохраните файл и откройте его в браузере, чтобы увидеть результат ваших действий.

Сначала появится окно подтверждения (см. рис. 7.3).

Рис. 7.3. Выведенное на экран окно подтверждения

После щелчка по кнопке ОК появится окно предупредительных сообщений (см. рис. 7.4).


Рис. 7.4. Окно предупредительных сообщений

Таким образом, оператор if используется по следующей схеме:

if (условие)
{
оператор1
}

Условие требуется всегда и его результатом является булево выражение. Далее оператор1 не обязателен. Вы можете ничего здесь не указывать, но тогда ваш сценарий окажется бессмысленным, поскольку выполнение оператора if ни к чему не приведет. Если же в фигурных скобках содержатся какие-либо операторы, они будут выполнены в том случае, если условие истинно (true).

Примечание Если результатом условия является null или undefined, то это равноценно значению false (ложь).

Пример. Теперь ваш сценарий выполняет определенные действия после щелчка по кнопке ОК. При щелчке по кнопке Cancel в дело вступает вторая часть оператора if - else. Она позволяет отреагировать на невыполнение условия (в данном случае на нажатие кнопки Cancel, что равноценно присвоению переменной response значения false):

<script language="JavaScript">
<!-- Маскируемся!
var response = confirm("Bы будете и дальше читать эту книгу? Нажмите ОК. Если нет, то нажмите Cancel.");
if ( response == true )
{
alert("Отличный выбор!");
}
else
{
alert("Вы уверены? Изучать JavaScript очень интересно!");
}
// Снимаем маскировку. -->
</script>

Часть else вставляется после закрывающей фигурной скобки. Входящие в нее операторы также помещаются в фигурные скобки. Внесите эти изменения и сохраните файл, затем попробуйте щелкнуть по кнопке Cancel еще раз (см. рис. 7.5).


Рис. 7.5. Окно предупредительных сообщений, возникающее после щелчка по кнопке Cancel

Таким образом, оператор if ... else используется по следующей схеме:

if (условие)
{
оператор1
}
else
{
оператор2
}

Упражнение Измените предыдущий сценарий так, чтобы использование оператора if отрабатывалось на условии response = = false.

Операторы организации цикла

Цикл (iteration) — это повторение последовательности операторов некоторое количество раз или пока условие не будет выполнено.

Существует четыре оператора организации цикла:

  • оператор do ... while;
  • оператор while;
  • ноператор for;
  • оператор for ... in.

Цели, которым служат эти операторы, мало отличаются друг от друга. Но каждый из операторов по-своему полезен.

Оператор do... while

Пример. Оператор do ... while запускает на выполнение оператор или группу операторов и повторяет эту процедуру до тех пор, пока условие не перестанет выполняться. Это определение поясняется следующим примером:

<script language="JavaScript">
<!-- Маскируемся!
var x = 1
do
{
++x;
alert(x);
}
while (x < 10);
// Снимаем маскировку. -->
</script>

В данном сценарии имеется переменная х, первоначальное значение которой равно единице. Затем в части do сценария указывается, что значение х должно быть увеличено на 1 и результат должен быть выведен на экран в окне предупредительных сообщений. В части while сценария указывается, что данная операция должна повторяться до тех пор, пока значение х меньше десяти.

Пример. Оператор do ... while работает не только с числами. В следующем примере окно запроса будет появляться на экране до тех пор, пока в него не введут строку текста. После этого условие в части while примет значение false и начнет выполняться следующая часть сценария - вывод окна предупредительных сообщений:

<script language="JavaScript">
<!-- Маскируемся!
do
{
sometext = prompt("Введите текст" ,"") ;
}
while (sometext = = " ") ;
alert(sometext);
// Снимаем маскировку. -->
</script>

Пример. Чтобы предыдущий пример заработал, в окне ввода не должно быть текста по умолчанию. Но небольшое дополнение позволяет это обойти:

<script language="JavaScript">
<!-- Маскируемся!
do
{
sometext = prompt("Введите текст","Впечатайте текст");
}
while (sometext = "Впечатайте текст" | | sometext = "" | | sometext = null);
alert(sometext);
// Снимаем маскировку. -->
</script>

В данном примере предусмотрено три варианта развития событий:

  • пользователь оставляет в поле ввода текст по умолчанию;
  • пользователь оставляет поле ввода чистым;
  • пользователь щелкает по кнопке Cancel.

Это достигается с помощью операции логического ИЛИ ( | | ). Часть do выполняется до тех пор, пока значение переменной sometext соответствует строке "Впечатайте текст" или пустой строке либо значению nul1 (в случае нажатия кнопки Cancel).

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

Пример. Нужно быть очень внимательным при использовании операторов организации цикла, так как здесь легко ошибиться и код будет выполняться бесконечно. Вот пример такой ошибки (но не пытайтесь запустить его на выполнение):

<script language="JavaScript">
<!-- Маскируемся!
var x = 1
do
{
+ +x;
alert(x);
}
while (x > 0) ;
// Снимаем маскировку. -->
</script>

Теперь вам придется вечно щелкать по кнопке ОК в окне предупредительных сообщений, поскольку значение х, постоянно увеличивающееся на единицу, никогда не станет меньше или равным нулю.

Примечание Эта ошибка может привести к «зависанию» браузера.

Упражнение Откорректируйте предыдущий пример, чтобы он выполнялся правильно.

Оператор while

Пример. Оператор while подобен оператору do ... while и действует похожим образом:

<script language="JavaScript">
<!-- Маскируемся!
var x = 1
while (x < 10)
{
+ +x;
alert(x);
}
// Снимаем маскировку. -->
</script>

Примечание Новички легче усваивают оператор do... while. Это связано с функционированием этих операторов. Оператор do ... while исполняется в сценарии хотя бы один раз, тогда как while может вовсе не запускаться на выполнение (в зависимости от обстоятельств). Это часто сбивает с толку начинающих.

Упражнение Создайте окно запроса (как в примере использования оператора do ... while) с помощью оператора while.

Оператор for

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

<script language="JavaScript">
<!-- Маскируемся!
for (x = 1; x < 10; ++x)
{
alert(x);
}
// Снимаем маскировку. -->
</script>

Предупреждение При неправильном задании условий процесс действительно может продолжаться до бесконечности. Например: for (х = 1 x > 0; х++)

Рассмотрим самую важную строчку:

for (x = 1; x < 10; ++x)

Смысл этой строки заключается в том, что значение х возрастает от единицы с шагом 1 до тех пор, пока оно меньше десяти. Если это условие удовлетворяется, будет выполняться следующий оператор.

Можно кратко изложить назначение оператора for:

for (начальное значение; условие; шаг возрастания)

Начальное значение - это значение переменной в исходный момент времени; условие - это булево выражение, а шаг - это шаг возрастания (или убывания) начального значения переменной до тех пор, пока условие не примет значение false.

Пример. В данном примере значение переменной на каждом этапе уменьшается на 2:

<script language="JavaScript">
<!-- Маскируемся!
for (х = 10; х >= 0; х = х - 2)
{
alert(x);
}
// Снимаем маскировку. -->
</script>

Пример. Здесь оператор for используется для инициализации десяти элементов массива, причем каждому элементу массива присваивается значение, равное его номеру. Затем содержимое массива выводится на экран в окне предупредительных сообщений (см. рис. 7.6).

<script language="JavaScript">
<!-- Маскируемся!
var myarray = new Array();
for (i = 0; i < 10; i++)
{
myarray[i] = i;
}
alert(myarray);
// Снимаем маскировку. -->
</script>


Рис. 7.6. Содержимое массива myarray

Упражнение Внесите в предыдущий пример такие изменения, чтобы создавался массив, состоящий из ста элементов.

Оператор for... in

Последний рассматриваемый здесь оператор организации цикла - оператор for ... in. Он используется для выполнения одного или более операторов с элементами массива.

Это позволяет использовать один оператор для всех элементов массива, вместо того чтобы записывать отдельные операторы для каждого элемента.

Пример. В данном примере оператор for ... in используется для увеличения на единицу каждого из пяти элементов массива myarray.

<script language="JavaScript">
<!-- Маскируемся!
var myarray = new Array(5) ;
myarray[0] =5
myarray[1] = 8
myarray[2] = 10
myarray[3] = 18
myarray[4] = 180
for (x in myarray)
{
myarray[x] = ++myarray[x];
}
alert(myarray);
// Снимаем маскировку. -->
</script>

Благодаря строке

for (x in myarray)

переменная х последовательно принимает значения, соответствующие элементам массива, а затем значение каждого элемента увеличивается на единицу (см. рис. 7.7).


Рис. 7.7. Окончательные значения элементов массива myarray

Пример. Еще одним примером использования оператора for ... in является заполнение массива строковыми величинами, например именами графических файлов (позже вы убедитесь, насколько это может быть полезно). Предположим, вам нужно создать массив, содержащий десять имен графических файлов (img0.gif, imgl .gif, img2.gif, ..., img9.gif). С помощью оператора for ... in это делается очень просто:

<script language="JavaScript">
<!-- Маскируемся!
var myarray = new Array("","","","","","","","","","");
for (x in myarray)
{
myarray[x] = "img" + x + ".gif";
}
alert(myarray);
// Снимаем маскировку. -->
</script>

В окне предупредительных сообщений (см. рис. 7.8) выводятся на экран значения десяти элементов массива.


Рис. 7.8. Окончательные значения десяти элементов массива myarray

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

Упражнение Измените предыдущий пример так, чтобы массив содержал пять гиперссылок.

Оператор continue

Оператор continue (продолжить) используется в сочетании с операторами while, do... while, for и for... in. Этот оператор заставляет компьютер перейти к выполнению следующего цикла.

Пример. Иначе говоря, если оператор continue поместить непосредственно в тело оператора, все следующие за ним операторы будут пропущены:

<script language="JavaScript">
<!-- Маскируемся!
var x = 0;
while (x < 10)
{
Х++;
alert(x);
continue;
alert("Этот текст вы никогда не увидите!");
}
// Снимаем маскировку. -->
</script>

Пример. Естественно, такой эффект нежелателен, и поэтому оператор continue обычно используется внутри оператора if. В данном примере окно предупредительных сообщений не будет выводиться на экран при х = 5.

<script language="JavaScript">
<!-- Маскируемся!
var x = 0;
while (x < 10)
{
x++;
if (x == 5)
{
continue;
}
alert(x);
}
// Снимаем маскировку. -->
</script>

Пример. Предыдущий пример можно изменить таким образом, чтобы на экран выводились только нечетные числа. Это делается с помощью условия if (x % 2 = = 0), которое является истинным, если х четно (результат приводится на рис. 7.9):

<script language="JavaScript">
<!-- Маскируемся!
var x = 0;
while (x < 10)
{
x++;
if (x % 2 == 0)
{
continue;
}
alert(x) ;
}
// Снимаем маскировку. -->
</script>


Рис. 7.9. На экран выводятся только нечетные числа

Пример. Изменяя условия, можно вывести на экран и одни четные числа (результат приводится на рис. 7.10):

<script languago="JavaScript">
<!-- Маскируемся!
var x = 0 ;
while (x < 10)
{
x++;
if (x % 2 != 0)
{
continue;
}
alert(x);
}
// Снимаем маскировку. -->
</script>


Рис. 7.10. После изменения условия на экран выводятся только четные числа

Упражнение Поэкспериментируйте с оператором continue на нескольких простых примерах с различными условиями, чтобы лучше понять принцип его действия.

Оператор break

В паре с оператором continue работает оператор break (прервать). В то время как оператор continue приводит к выполнению следующего за ним цикла, оператор break этот цикл прерывает.

Оператор break используется в операторах while, for, for ... in и do ... while, а также в сочетании с оператором switch, который вы еще не изучали.

Пример. Здесь на экран выводится окно предупредительных сообщений (со значением 1), после чего в дело вступает оператор break, и цикл прерывается:

<script language="JavaScript">
<!-- Маскируемся!
var x = 0;
while (x < 10)
{
x++;
alert(x);
break;
alert("Это вы уже не увидите!");
}
// Снимаем маскировку. -->
</script>

Пример. Так же, как и оператор continue, оператор break применяется в сочетании с оператором if. В данном примере вы можете ввести число, при котором следует прервать выполнение оператора while:

<script language="JavaScript">
<!-- Маскируемся!
var x = 0, breakat;
breakat = prompt("Введите число прерывания цикла от 1 до 10", "");
while (x < 10)
{
if (x == breakat)
{
break;
}
alert(x);
x++;
}
// Снимаем маскировку. -->
</script>

Цикл оператора while будет выполняться до тех пор, пока значение х не станет равным значению переменной breakat, и тогда цикл прервется. Если вы введете в окне запроса значение 5, на экран будут выведены окна предупредительных сообщений со значениями от 1 до 4.

Упражнение Поэкспериментируйте с оператором break на нескольких простых примерах и с различными условиями, чтобы лучше понять принцип его действия.

Оператор switch

Оператор switch (перейти к...) позволяет выполнить один или несколько операторов, если значение указанного выражения совпадает с меткой.

Сценарий имеет следующий вид:

switch (выражение)
{
case метка!;
список операторов
case метка2;
список операторов
}

Пример. В данном примере числом, введенным в окне запроса, определяется, какие именно операторы должны выполняться (информация на экране до и после ввода числа показана на рис. 7.11 и 7.12):

<script language="JavaScript">
<!-- Маскируемся!
var yourchoice;
yourchoice = prompt("Загадайте число от 1 до 4", "1, 2, 3 или 4");
switch (yourchoice)
{
case "1":
alert("Вы ввели число 1");
break;
case "2" :
alert("Вы ввели число 2");
break;
case "3":
alert("Вы ввели число 3");
break;
case "4":
alert("Вы ввели число 4");
break;
}
// Снимаем маскировку. -->
</script>


Рис. 7.11. Значение, введенное в окне запроса


Рис. 7.12. Окно предупредительных сообщений, показывающее, какой именно оператор был выполнен

Каждый набор операторов должен заканчиваться оператором break, в противном случае будут выполняться все последующие за ним операторы.

Пример. Иногда бывает необходимо предусмотреть группу операторов, используемую по умолчанию в тех ситуациях, когда выражению не соответствует ни одна из меток. В предыдущем примере рассматривался случай, когда введенное число не попадает в промежуток от 1 до 4.

<script language="JavaScript">
<!-- Маскируемся!
var yourchoice;
yourchoice = prompt("Загадайте число от 1 до 4", "1, 2, 3 или 4");
switch (yourchoice)
{
case "1" :
alert("Вы ввели число 1");
break;
case "2 " :
alert("Вы ввели число 2");
break;
case "3 " :
alert("Вы ввели число 3") ;
break;
case "4":
alert("Вы ввели число 4");
break;
default:
alert("Вы не ввели число, попадающее в промежуток от 1 до 4");
break;
}
// Снимаем маскировку. -->
</script>

Пример. Оператор switch можно использовать также с окнами подтверждения. В данном примере интерес представляют булевы выражения true и false. Поскольку других вариантов быть не может (у нас только две кнопки - ОК и Cancel), нет необходимости вводить операторы, используемые по умолчанию:

<script language="JavaScript">
<!-- Маскируемся!
var yourchoice;
yourchoice = confirm("Bы сейчас сидите за компьютером?");
switch (yourchoice)
{
case true:
alert("Видите, я угадал!");
break;
case false:
alert("Да? А как же вы тогда это делаете?");
break;
}
// Снимаем маскировку. -->
</script>

Когда вы откроете эту страничку в браузере, перед вами появится окно подтверждений, показанное на рис. 7.13.

Щелкните по кнопке Cancel, и вы увидите окно предупредительных сообщений (см. рис. 7.14).


Рис. 7.13. Начальное окно подтверждений


Рис. 7.14. Окно предупредительных сообщений, показывающее, какой именно оператор был выполнен

Упражнение Воспользуйтесь оператором switch для написания сценария, в котором будут выполняться различные операторы в зависимости от того, какая буква введена в окне запроса: а, Ь, с, d или е. Не забудьте указать оператор, используемый по умолчанию, для непредвиденных значений.

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



[ Назад ] [ Вверх ] [ Далее ] 
Hosted by uCoz