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

Рассмотренные ранее сценарии были простыми наборами инструкций. Браузер выполнял их последовательно, одну за другой. Достигнув закрывающего дескриптора </SCRIPT>, сценарий прекращался.

Если для выполнения простых задач этот подход вполне оправдан, то при реализации сложных проектов прямолинейность программирования приводит только к разрастанию программного кода и понижению эффективности. Чтобы правильно организовать сценарии, в JavaScript внедрена поддержка функций, с которыми вы уже познакомились ранее. Теперь мы детально рассмотрим методы управления функциями в сценариях.

Определение функции

Функции - это группа операторов JavaScript, которые выполняются как одно целое. Перед тем как использовать функцию, вам необходимо ее определить. В листинге 7.1 приведен пример определения простой функции.

Листинг 7.1. Определение простой функции


1:   function Greet()    {
2:         alert("Внимание!");
3:   }
                   

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

Первая и последняя строка определения функции содержит скобки {}. Эти скобки используются для определения операторов функции. Браузер по этим скобкам определяет начало и конец функции. В скобках, в нашем примере, записана всего одна строка. В ней введена встроенная функция alert, позволяющая отображать на экране сообщение с предупреждением. Сообщение содержит текст Внимание!.

Используемая функция Greet выполняет одно простое действие: отображает на экране сообщение. Если не ввести текст сообщения, то функция становится бесполезной.

Чтобы сделать функцию более гибкой, используются параметры, или аргументы. Это переменные которые запрашиваются функцией при каждом ее вызове. Например, в нашу функцию можно вставить параметр who, который определяет пользователя, для которого отображается сообщение. Листинг 7.2 содержит программный код измененной функции.

Листинг 7.2. Функция с аргументом


1:   function Greet(who)    {
2:         alert("Внимание!" + who);
3:   }
                   

Традиционно функция в коде документа HTML определяется в области заголовка. Поскольку область заголовка выполняется самой первой в программе, функция определяется до ее использования. Листинг 5.3 содержит определение функции Greet в заголовке документа HTML.

Листинг 7.3. Определение функции Greet в коде HTML-документа


1:   <HTML>
2:   <HEAD>
3:   <TITLE>Функции</TITLE>
4:   <SCRIPT LANGUAGE="JavaScript">
5:   function Greet(who)    {
6:         alert("Внимание!" + who);
7:   }
8:   </SCRIPT>
9:   </HEAD>
10:  <BODY>
11:  Тело страницы
12:  </BODY>
13:  </HTML>
                   

Вызов функции

Теперь вы знаете, как определить функцию и вставить ее в код документа HTML. Тем не менее, если вы загрузите программу листинга 7.3 в браузер, то обнаружите, что ровным счетом ничего не происходит. И все потому, что функция определена и готова к использованию, но не используется.

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

Greet("Вася")

Эта строка дает указание браузеру выполнить функцию Greet c указанными параметрами. Таким образом в функцию подставляется параметр "Вася" вместо переменной who.

Функции могут иметь не только один параметр. Чтобы определить функцию с несколькими параметрами, нужно вводить их в скобках, после названия функции, отделяя запятыми.

Листинг 7.4 содержит программу полноценного документа HTML, содержащую как определение функции, так и ее вызов в теле страницы. чтобы продемонстрировать применяемость функции, она вызывается два раза, отображая сообщения двум разным пользователям (Васе и Клавдии).

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


1:   <HTML>
2:   <HEAD>
3:   <TITLE>Функции</TITLE>
4:   <SCRIPT LANGUAGE="JavaScript">
5:   function Greet(who)    {
6:         alert("Внимание!" + who);
7:   }
8:   </SCRIPT>
9:   </HEAD>
10:  <BODY>
11:  <H1>Пример функции</H1>
12:  <P>Сообщение выводится два раза</P>
13:  <SCRIPT LANGUAGE="JavaScript">
14:  Greet("Вася")
15:  Greet("Клавдия")
16:  </SCRIPT>
17:  </BODY>
18:  </HTML>
                   

Листинг содержит два одинаковых дескриптора <SCRIPT>. Первый раз при определении функции, второй - при ее вызове. Функция вызывается два раза для разных пользователей. Теперь, попробуйте загрузить этот сценарий в браузере. При этом вы должны получить на экране нечто подобное изображенному на рис. 7.1.

Заметьте, что второе сообщение не отображается на экране до тех пор, пока вы не нажмете кнопку OK. После вызова функции выполнение сценария прерывается до удаления сообщения с экрана. 

Возвращаемое значение

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

Функция начинается с ключевого влова function, названия функции и параметров. В качестве параметров будут использоваться четыре числа: a,b,c и d. Эти параметры принимают значения усредняемых чисел. Первая строка функции выглядит следующим образом:

function Average(a,b,c,d) {

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

Затем необходимо провести вычисление среднего значения указанных параметров. Среднее значение определяется как сумма всех значений, разделенная на их количество (в нашем случае 4). Вот как это выглядит в программе сценария:

result = (a+b+c+d) / 4;

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

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

return result;
}

Листинг 7.5 содержит всю функцию Average.

Листинг 7.5. Функция вычисления среднего арифметического


1:   <SCRIPT LANGUAGE="JavaScript">
2:   function Average(a,b,c,d)  {
3:   result = (a+b+c+d) / 4;
4:   return result;
5:   }
6:   </SCRIPT>
                   

Чтобы правильно использовать функцию, при ее вызове укажите значения всех переменных. Например, при усреднении чисел 3,4,5 и 6 вызываемая функция имеет следующий вид:

score = Average(3,4,5,6);

Функцию можно вызывать и как часть выражения. Например, вы можете использовать оператор alert для отображения результата вычислений:

alert(Average(3,4,5,6));


Далее о переменных.

nextn.bmp (246 bytes)

home.gif (161 bytes)

next.gif (900 bytes)

Сайт управляется системой uCoz