Читать онлайн «HTML, XHTML и CSS на 100%». Страница 52

Автор Игорь Квинт

Оператор while сходен с оператором for, но он не производит инициализацию и инкремент счетчика в своем объявлении. Синтаксис этого оператора следующий:

while (выражение условия)

{

операторы

}

Если выражение условия в цикле while сразу ложно, то операторы не выполнятся ни разу.

В листинге 11.15 представлен код, позволяющий найти факториал с помощью цикла while.

Листинг 11.15. Факториал с помощью оператора while

<html>

<head>

<title>Факториал с помощью оператора while</title>

var f=1;

var x=prompt ("Введите число","5");

x=+x;

var i=1;

while(i<=x)

{

f=f*i;

i++;

}

alert(f);

</script>

</head>

<body>

</body>

</html>

Цикл do..while

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

{

операторы

} while (выражение условия)

В листинге 11.16 представлен код, позволяющий найти факториал с помощью цикла do..while.

Листинг 11.16. Факториал с помощью оператора do..while

<html>

<head>

<title>Факториал с помощью оператора do..while</title>

var f=1;

var x=prompt ("Введите число","5");

x=+x;

var i=1;

{

f=f*i;

i++;

} while(i<=x)

alert(f);

</script>

</head>

<body>

</body>

</html>

Цикл for..in

С помощью конструкции for..in можно выполнить операторы почти для каждого свойства объекта. Синтаксис этого оператора:

for (свойство in объект)

{

операторы

}

Например, с помощью данного оператора можно произвести инкремент всех элементов массива (листинг 11.17).

Листинг 11.17. Пример использования оператора for..in

<html>

<head>

<title>Пример использования оператора for..in </title>

var a= new Array (5,76,43,12,77,-5, 0);

for (var i in a)

{

a[i]++;

}

alert(a);

</script>

</head>

<body>

</body>

</html>

В ходе выполнения этого кода все элементы массива a увеличат свое значение на единицу (рис. 11.14).

Рис. 11.14. Инкремент элементов массива

Обратите внимание, что в цикле for..in не определяется свойство массива length.

Операторы break и continue

Иногда в ходе выполнения цикла возникает необходимость прервать весь цикл или одну его итерацию. Для этой цели служат операторы break и continue. Оператор break полностью прекращает выполнение цикла и передает управление операторам, следующим за циклом. Оператор continue прерывает текущее выполнение цикла и переходит к выполнению следующего шага цикла. Различие в работе этих операторов продемонстрировано в листинге 11.18.

Листинг 11.18. Пример использования операторов выхода из цикла

<html>

<head>

<title>Пример использования операторов выхода из цикла</title>

var a= new Array (5,0,2,0-3,0);

var b= new Array();

//Создаем бесконечный цикл

while(true)

{

var x=prompt ("Введите число","0");

//Преобразуем введенную строку в число

x=+x;

//Если введен ноль, то цикл прерывается

//Это единственный выход из бесконечного цикла

if (x==0) {break}

//Вложенный цикл, просматривающий все элементы массива

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

{

//Проверяем значение элемента массива a

if (a[i]==0)

{

b[i]="-";

//Прерываем текущую итерацию цикла for, чтобы избежать

//деления на ноль

continue;

}

//Находим частное

b[i]=x/a[i];

}//Конец цикла for

alert(a+"\n"x+"\n"+b);

}//Конец цикла while

</script>

</head>

<body>

</body>

</html>

Данный код позволяет определить частное от введенного пользователем числа и элементов массива a. При этом в числе элементов этого массива могут быть нули, тогда необходимо в элемент массива с результатом b ввести прочерк (—) (рис. 11.15).

Рис. 11.15. Пример использования операторов выхода из цикла

В вышеприведенном коде также демонстрируется возможность вложения одного цикла в другой. Из цикла while возможен выход, только если ввести нуль (значение по умолчанию). Цикл for во время исполнения иногда прерывается, если элемент массива a равен нулю, чтобы избежать деления на ноль.

11.5. Функции и события

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

Функции

Функция – это набор команд, объединенных под общим именем для выполнения некоторой задачи. Синтаксис функции имеет следующий вид:

function ИмяФункции([аргумент1][,..аргументN])

{

операторы

}

Ключевое слово function объявляет функцию с именем ИмяФункции. Функции могут передаваться (но могут и не передаваться) аргументы, которые перечисляются через запятую в скобках рядом с именем функции. В качестве аргументов могут выступать переменные, значения и выражения.

Использование функций

Функции можно объявлять в любом месте внутри элемента SCRIPT. Можно даже объявить функцию внутри другой функции, однако в этом случае она будет локальной, то есть будет действовать только внутри родительской функции. Тем не менее рекомендуется объявлять функцию в блоке HEAD до начала выполнения основного кода, иначе она может быть недоступной в момент вызова. В листинге 11.19 представлен пример работы с функциями.

Листинг 11.19. Пример использования функций

<html>

<head>

<title>Пример использования функций</title>

//Глобальный массив

var a= new Array (1,2,4,8);

function sum()

{

var s=0; //локальная переменная для хранения суммы

//Цикл по всем элементам массива a

for (var i in a)

{

s=s+a[i];

}

alert("Сумма элементов массива="+s);

}

function product()

{

var p=1; //локальная переменная для хранения произведения

for (var i in a)

{

p=p*a[i];

}

alert("Произведение элементов массива="+p);

}

</script>

</head>

<body>

var x=prompt("Найти сумму или произведение (0 или 1)?","0");

if (x=="0")

{

sum();

}

if (x=="1")

{

product();

}

</script>

</body>

</html>

При запуске этого кода отображается запрос, на который необходимо ввести 0 или 1. В зависимости от ответа запускается одна из функций: sum() или product(), которые находят сумму или произведение элементов глобального массива a соответственно.

Функции могут возвращать значение. Для этого необходимо использовать оператор возврата return. Вообще этот оператор может встречаться несколько раз в теле функции. Таким образом, функции можно использовать в выражениях (листинг 11.20).

Листинг 11.20. Использование значения функции

<html>

<head>

<title>Использование значения функции</title>

function sum(a,b)

{

return (a+b);

}

</script>

</head>

<body>

var x1=5, x2=6, x3=3, x4=3;

//Отображаем (x1+x2)*(x3+x4)

alert (sum(x1,x2)*sum(x3,x4));

</script>

</body>

</html>

Функция может объявляться в выражении. Обычно в этом случае функция присваивается переменной, которая затем может использоваться в выражении:

var cube=function(x){return x*x*x}

alert(cube(2)+cube(3));

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

Переменное количество аргументов

Иногда в процессе создания функции неизвестно, сколько ей передадут аргументов. В этом случае необходимо воспользоваться объектом arguments. Все аргументы, переданные функции, сохраняются в этом объекте и могут быть извлечены. Например, для доступа к первому аргументу можно использовать следующий код:

var arg1=arguments[0];

Таким образом, аргументы индексируются, начиная с нуля. Для определения общего количества аргументов, переданных функции, можно использовать свойство length объекта arguments.

Листинг 11.21 демонстрирует возможность обработки переменного количества аргументов.

Листинг 11.21. Пример переменного количества аргументов в функции

<html>

<head>

<title>Пример переменного количества аргументов в функции</title>

function sum(x1,x2) //Функция содержит не меньше двух аргументов

{

var s=0; //Начальное значение суммы

//Цикл по всем аргументам

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

{

s+=arguments[i];

}

return (s);

}

</script>

</head>

<body>

//Вызываем функцию

alert (sum(1,2,3,4));

alert (sum(1,-3,40,2,5,7));

</script>

</body>

</html>

Дополнительная информация о функциях

Аргументами функции могут выступать не только данные простого типа, но и объекты. Однако при передаче функции строки, числа или логической величины в функции создается копия переданного значения и оригинал не изменяется, то есть что бы ни делали с аргументом внутри функции, после завершения функции эта переменная уничтожается, а оригинальная переменная остается прежней. Иначе происходит при передаче объекта. В этом случае копия объекта не создается, а передается ссылка на данный объект. Если бы происходило иначе, то терялось бы много времени и памяти на создание дубликатов. Представьте, сколько потребовалось бы времени на передачу массива из 10 000 элементов, когда фактически можно обойтись передачей одного значения – ссылки на этот массив. Однако программист должен помнить, что работает в функции с оригинальным объектом.