Условные операторы

Любой язык программирования был бы бесполезен, если бы в нем не были предусмотрены те или иные средства ветвления при выполнении программы. В языке JavaScript предусмотрен условный оператор if-else, который позволяет выполнять разные программные строки в зависимости от условия.

Общий вид оператора if-else представлен ниже:

if(условие)
  строка 1
[else
  строка 2]
Часть оператора, выделенная квадратными скобками, является необязательной.

При выполнении этого оператора оценивается условие, заданное в круглых скобках после ключевого слова if. Если в результате оценки условия получилось логическое значение true, выполняется строка 1. Если же получилось значение false, то выполняется строка 2 (в том случае, когда она присутствует).

Оператор if-else может быть вложенным. Учтите, что если в строке 1 или строке 2 необходимо расположить несколько операторов, их следует выделить фигурными скобками:

if(nYourAge < 18)
{
  bAccessDenied = true;
  szNextPage = "bye18.html";
}
else if(nYourAge > 99)
{
  bAccessDenied = true;
  szNextPage = "bye99.html";
}
else
{
  bAccessDenied = false;
  szNextPage = "welcome.html";
}
Здесь вначале оценивается условие (nYourAge < 18). Если содержимое переменной nYourAge меньше 18, переменной bAccessDenied присваивается значение true, а переменной szNextPage - текстовая строка "bye18.html".

В противном случае содержимое nYourAge сравнивается с числом 99. Если переменная nYourAge имеет значение, большее чем 99, в переменную bAccessDenied записывается значение true, а переменную szNextPage - текстовая строка "bye99.html".

И, наконец, если ни одно из двух условий не было выполнено, то есть значение переменной nYourAge находится в интервале от 18 до 99, в переменную bAccessDenied записывается значение false, а переменную szNextPage - текстовая строка "welcome.html".

Существует также специальный тип условного оператора, который называется оператором ?:. Этот оператор в общем виде записывается так:

выражение ? строка 1 : строка 2
При вычислении оператора ?: вначале оценивается логическое выражение, расположенное в левой части. Если оно равно true, выполняется строка 1, а если false - строка 2.

Ниже приведен пример использования условного оператора ?: для присвоения значения переменной bAccessDenied в зависимости от содержимого переменной nYourAge:

bAccessDenied = 
  (nYourAge < 18 || nYourAge > 99) ? true : false;
Если значение переменной nYourAge находится в интервале от 18 до 99, переменной bAccessDenied присваивается значение true, а если оно не попадает в этот интервал - false. Традиционное решение этой задачи с помощью оператора else-if заняло бы больше места: 
if(nYourAge < 18 || nYourAge > 99)
  bAccessDenied = true;
else
  bAccessDenied = false;
В приведенных выше примерах указывалось составное условие: 
(nYourAge < 18 || nYourAge > 99)
В соответствии таблицей старшинства, оператор || вычисляется после операторов < и >. Если вам не хочется разбираться с таблицей старшинства, для указания порядка вычисления можно использовать скобки: 
((nYourAge < 18) || (nYourAge > 99))


Задания для самостоятельного выполнения

  1. Напишите скрипт, который запрашивает два числа и выводит в окне браузера наибольшее из них.
  2. Напишите скрипт, который запрашивает номер месяца и выводит название времени года.
  3. Напишите скрипт, который отображает диалоговое окно с кнопками "Ок" и "Отмена" (функция confirm) и выводит в окно браузера сообщение о том, какая из кнопок была нажата (используйте конструкцию if(confirm("Сообщение")) ... )

 

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

В языке JavaScript есть несколько операторов, предназначенных для организации циклов.


Оператор for

Общий вид оператора for представлен ниже:

for([инициализация;] [условие;] [итерация])
{
  . . .
  строки тела цикла
  . . .
}
В области инициализации обычно выполняется присваивание начальных значений переменным цикла. Здесь допустимо объявление новых переменных при помощи ключевого слова var. Вторая область задает условие выхода из цикла. Это условие оценивается каждый раз при прохождении цикла. Если в результате оценки получается логическое значение true, выполняются строки тела цикла. Область итерации применяется для изменения значений переменных цикла, например, для увеличения счетчика цикла.


Оператор for-in

Оператор for-in предназначен для просмотра всех свойств объекта и записывается в следующем виде:

for(переменная in объект)
{
  . . .
  строки тела цикла
  . . .
}


Оператор while

Для организации итерационных циклов с предусловием используется оператор while:

while(условие)
{
  . . .
  строки тела цикла
  . . .
}
Если в результате оценки условия получается значение true, тогда итерация выполняется, если false - цикл прерывается.


Оператор break

С помощью оператора break можно прервать выполнение цикла, созданного операторами for или while, в любом месте. Например:

var i = 0;
while(true)
{
  . . .
  i++;
  if(i > 10)
    break;
  . . .
}

Оператор continue

Выполнение оператора continue внутри цикла for или while приводит к тому, что итерация прерывается, а затем возобновляется заново. Этот оператор не прерывает цикл. Ниже приведен пример использования оператора continue:

var i = 0;
while(i < 100)
{
  i++;
  if(i < 10)
    continue;
  . . .
}
Здесь фрагмент тела цикла, отмеченный многоточием, будет выполняться только после того, как значение переменной i станет равным 10. Когда же это значение достигнет 100, цикл будет завершен.

 

Примеры использования операторов цикла

Ниже приведено три примера использования операторов цикла for и while. Во всех этих примерах сценарий отображает в окне документа десять строк "Hello, world!". Исходный текст первого сценария представлен в листинге 1.10.

Листинг 1.10.

<HTML>
  <HEAD>
    <TITLE>Hello, world!</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var szHelloMsg = "Hello, world!";

    function printNString(szString, n)
    {
      var i;
      for(i = 0; i < n; i++)
      {
        document.write(szString + "<BR>");
      }
    }

    function printHello()
    {
      printNString(szHelloMsg, 10);
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY>
    <H1>JavaScript Test</H1>
    <P>Message:<BR> 
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    printHello();
    // -->
    </SCRIPT>  
  </BODY>
</HTML>
Здесь сразу после загрузки документа вызывается функция printHello. В теле этой функции, в свою очередь, вызывается функция printNString, которой передаются два параметра: 
printNString(szHelloMsg, 10);
Через первый параметр этой функции передается текстовую строка szHelloMsg, а через второй - количество повторов этой строки при выводе. Вывод строки выполняется функцией printNString в цикле: 
for(i = 0; i < n; i++)
{
  document.write(szString.bold() + "<BR>");
}
Здесь значение переменной цикла i изменяется от нуля до n, где n - количество повторов. Когда значение переменной цикла достигнет значения n, цикл будет завершен.

В листинге 1.11 показан сценарий, решающий ту же самую задачу другим методом - с использованием оператора while.

Листинг 1.11.

<HTML>
  <HEAD>
    <TITLE>Hello, world!</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var szHelloMsg = "Hello, world!";

    function printNString(szString, n)
    {
      var i;
      i = 0;
      while(i < n)
      {
        document.write(szString + "<BR>");
        i++;
      }
    }

    function printHello()
    {
      printNString(szHelloMsg, 10);
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY>
    <H1>JavaScript Test</H1>
    <P>Message:<BR> 
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    printHello();
    // -->
    </SCRIPT>
  </BODY>
</HTML>
Здесь i также используется как переменная цикла: 
i = 0;
while(i < n)
{
  document.write(szString.bold() + "<BR>");
  i++;
}
Как работает этот цикл? После вывода строки методом write значение переменной цикла увеличивается на единицу. Затем перед началом следующей итерации проверяется, достигла ли переменная цикла значения n. Если достигла, цикл завершает свою работу.

Совместное применение операторов while и break демонстрируется в сценарии, показанном в листинге 1.12.

Листинг 1.12.

<HTML>
  <HEAD>
    <TITLE>Hello, world!</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var szHelloMsg = "Hello, world!";

    function printNString(szString, n)
    {
      var i;
      i = 0;
      while(true)
      {
        document.write(szString + "<BR>");
        i++;
        if(i > n)
          break;
      }
    }

    function printHello()
    {
      printNString(szHelloMsg, 10);
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY>
    <H1>JavaScript Test</H1>
    <P>Message:<BR> 
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    printHello();
    // -->
    </SCRIPT>
  </BODY>
</HTML>
Так же как и в предыдущем случае, i используется как переменная цикла, однако в операторе while на месте условия завершения цикла стоит значение true: 
i = 0;
while(true)
{
  document.write(szString.bold() + "<BR>");
  i++;
  if(i > n)
    break;
}
Для того чтобы прервать цикл, применен оператор break. Этот оператор вызывается в том случае, если значение переменной цикла i превысило значение n.


Задания для самостоятельного выполнения

  1. Напишите скрипт, запрашивающий количество учащихся студенческой группы и в соответствии с этим количесвом - их фамилии и имена. Фамилии и имена необходимо отобразить в окне браузера.
  2. Напишите скрипт, который запрашивает фамилии и имена до тех пор, пока пользователь в окне ввода не нажмет кнопку "Отмена". Фамилии и имена необходимо отобразить в окне браузера.
  3. Напишите скрипт, выводящий в окно браузера таблицу умножения