11.5. Функции и события. До сих пор сценарии представляли собой простой код, сразу полностью выполняющийся. Однако часто требуется исполнение кода в какой-то момент или многократное исполнение одного и того же кода. В этом помогут функции и события. Функции. Функция – это набор команд, объединенных под общим именем для выполнения некоторой задачи. Синтаксис функции имеет следующий вид: Function ИмяФункции([аргумент1][,..аргументN]). { Операторы. } Ключевое слово function объявляет функцию с именем ИмяФункции. Функции могут передаваться (но могут и не передаваться) аргументы, которые перечисляются через запятую в скобках рядом с именем функции. В качестве аргументов могут выступать переменные, значения и выражения. Использование функций. Функции можно объявлять в любом месте внутри элемента SCRIPT. Можно даже объявить функцию внутри другой функции, однако в этом случае она будет локальной, то есть будет действовать только внутри родительской функции. Тем не менее рекомендуется объявлять функцию в блоке HEAD до начала выполнения основного кода, иначе она может быть недоступной в момент вызова. В листинге 11.19 представлен пример работы с функциями. Листинг 11.19. Пример использования функций. <html> <head> <titlе>Пример использования функций</titlе> <script> //Глобальный массив. 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> <script> 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> <titlе>Использование значения функции</titlе> <script> Function sum(a,b). { Return (a+b); } </script> </head> <body> <script> 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> <titlе>Пример переменного количества аргументов в функции</titlе> <script> Function sum(x1,x2) //Функция содержит не меньше двух аргументов. { Var s=0; //Начальное значение суммы. //Цикл по всем аргументам. For (var i=0;i<arguments.length;i++). { S+=arguments[i]; } Return (s); } </script> </head> <body> <script> //Вызываем функцию. Alert (sum(1,2,3,4)); Alert (sum(1,-3,40,2,5,7)); </script> </body> </html> Дополнительная информация о функциях. Аргументами функции могут выступать не только данные простого типа, но и объекты. Однако при передаче функции строки, числа или логической величины в функции создается копия переданного значения и оригинал не изменяется, то есть что бы ни делали с аргументом внутри функции, после завершения функции эта переменная уничтожается, а оригинальная переменная остается прежней. Иначе происходит при передаче объекта. В этом случае копия объекта не создается, а передается ссылка на данный объект. Если бы происходило иначе, то терялось бы много времени и памяти на создание дубликатов. Представьте, сколько потребовалось бы времени на передачу массива из 10 000 элементов, когда фактически можно обойтись передачей одного значения – ссылки на этот массив. Однако программист должен помнить, что работает в функции с оригинальным объектом. Функции могут быть рекурсивными, то есть прямо или косвенно вызывать сами себя. Если в теле функции явно используется вызов этой же функции, то имеет место прямая рекурсия. Если же функция содержит обращение к другой функции, содержащей прямой или косвенный вызов первой функции, то данная функция является косвенно рекурсивной. Классический пример – функция для вычисления факториала неотрицательного целого числа (листинг 11.22). Листинг 11.22. Пример рекурсивной функции. <html> <head> <titlе>Пример рекурсивной функции </title> <script> Function fact(n). { If (n<0) return(null); //Проверка на отрицательные числа. If (n==0) return (1); //Проверка на 0. Return (n*fact(–n));//Рекурсивный вызов. } </script> </head> <body> <script> Var x=prompt("Введите число","5"); X=+x; //Вызываем функцию. Alert (x+"!="+fact(x)); </script> </body> </html> Для отрицательного числа факториала не существует. В этом случае возвращается null. Для нулевого значения функция возвращает 1, так как 0!=1. В противном случае вызывается та же функция с декрементом параметра и результат умножается на текущее значение параметра. Вызов функции прерывается при вызове fact (0) (рис. 11.16). Рис. 11.16. Пример рекурсивной функции. Знакомство с событиями. Очень часто язык JavaScript применяется для реагирования на события, которые могут быть вызваны пользователем или браузером. К событиям относятся открытие новой страницы, перемещение указателя мыши, щелчок кнопкой мыши и т. д. Каждое событие имеет соответствующий обработчик, который автоматически реагирует на возникшее событие. Так, событие onLoad происходит после загрузки какого-либо элемента, например веб-страницы. Использование обработчика этого события позволяет выполнять JavaScript-код сразу после полной загрузки документа. Одним из часто используемых событий является щелчок кнопкой мыши на объекте. При его возникновении обработчик события onClick объекта выполняет код JavaScript (листинг 11.23). Листинг 11.23. Пример обработчиков событий. <html> <head> <titlе>Пример обработчиков событий</titlе> <script> Function mes(). { Alert ("Замечательная ссылка"); } </script> </head> <body> <h2>Пример обработчиков событий</h2> <a href=http://www.myserver.ru/page1.html onClick="mes()">Ссылка 1</a> <br> <a href=http://www.myserver.ru/page2.html. OnClick="alert('Еще одна ссылка')">Ссылка 1. </a> </body> </html> Из данного кода видно, что обработчик события может быть вызовом функции. Однако может и непосредственно указываться JavaScript-код. В данном случае оба обработчика вызывают метод alert() (рис. 11.17). Рис. 11.17. Пример обработчиков событий.