1 ВВЕДЕНИЕ В JAVASCRIPT

Сценарии JavaScript в активных страницах Web

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

Приведем три примера использования операторов цикла for и while.

Во всех этих примерах сценарий отображает в окне документа десять строк “Hello, world!”, как это показано на рис. 1.9.

Рис. 1.9. Сценарий отображает в документе HTML десять одинаковых строк

Исходный текст первого сценария представлен в листинге 1.10.

Листинг 1.10. Файл chapter1/Operators/for.html


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

    function printNString(szString, n)
    {
      var i;
      for(i = 0; i < n; i++)
      {
        document.write(szString.bold() + "<BR>");
      }
    }
    function printHello()
    {
      printNString(szHelloMsg, 10);
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <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. Файл chapter1/Operators/while.html


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

    function printNString(szString, n)
    {
      var i;
      i = 0;
      while(i < n)
      {
        document.write(szString.bold() + "<BR>");
        i++;
      }
    }
    function printHello()
    {
      printNString(szHelloMsg, 10);
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <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. Файл chapter1/Operators/break.html


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

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

        if(i > n)
          break;
      }
    }
    function printHello()
    {
      printNString(szHelloMsg, 10);
    }
    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <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.