Создание сценариев с помощью функций и событий

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

В данной главе рассматриваются следующие вопросы:

  • определение функции;
  • применение функций;
  • использование событий для вызова функций;
  • обмен информацией;
  • оператор return.

Что такое функция

Функция (function) — это группа операторов, предназначенных для определенной цели и объединенных под общим именем. Функция имеет следующий вид:

function имяФункции()
{
операторы;
}

В начале функции помещается слово function, за которым указывается ее имя (например, yourMessage). После имени ставятся круглые скобки ( your-Message () ). Их отсутствие приводит к ошибке.

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

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

У каждой функции должно быть имя, причем имена функций, используемых на одной странице, не должны повторяться. Функция запускается (активизируется или вызывается) с Web-страницы.

Ваша первая функция

Пример. Теория может казаться вам слишком сложной, пока вы не перейдете практике. Давайте сразу создадим первую функцию. Выполните следующие действия:

1. Откройте HTML-шаблон в текстовом редакторе.

2. Напечатайте в блоке SCRIPT слово function и дайте функции имя, например yourMessage (не забудьте о круглых скобках в конце строки):

<script language="JavaScript">
<!- - Маскируемся!
function yourMessage()
// Снимаем маскировку. - ->
</script>

3. Затем добавьте пару фигурных скобок:

<script language="JavaScript">
<!- - Маскируемся!
function yourMessage()
{
}
// Снимаем маскировку. - ->
</script>

Предупреждение Помните, что в начале ставится открывающая фигурная скобка ( { ), а в конце - закрывающая ( } ). Распространенная ошибка новичков заключается в том, что они путают скобки местами, в результате чего сценарий не работает.

4. Далее добавьте простой оператор:

<script language="JavaScript">
<!- - Маскируемся!
function yourMessage()
{
alert("Ваша первая функция!");
}
// Снимаем маскировку. - ->
</script>

5. Сохраните результат, откройте его в браузере и посмотрите, что получилось.

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

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

<script language="JavaScript">
<!-- Маскируемся!
yourMessage();
function yourMessage()
{
alert("Ваша первая функция!");
}
// Снимаем маскировку. -->
</script>

Сохраните страницу еще раз и откройте ее в браузере, чтобы увидеть результат. Появление окна подтверждающих сообщений доказывает, что ваша функция была вызвана и выполнена (см. рис. 8.1).


Рис. 8.1. Окно подтверждающих сообщений

Способ, с помощью которого вы вызвали функцию в этом примере, - не самый удачный. По сути, он ничем не отличается от простого перечисления операторов в блоке SCRIPT, освоенного ранее.

Предпочтительнее вызывать одну функцию из другой. Но, прежде чем вы научитесь это делать, вам предстоит узнать, каким образом выполняются функции и что такое события (events), поскольку именно они дают возможность управлять выполнением функций.

События

Необходимо сделать так, чтобы при вызове функций всю работу вместо вас выполняли события. JavaScript - язык, управляемый событиями (event-driven). To есть все происходящее в нем является результатом события или вызывает какое-либо событие. Открытие новой страницы в браузере, перемещение курсора, щелчок мыши - все это относится к событиям. В этой книге вам встретятся четыре их вида:

  • onLoad;
  • onClick;
  • onMouseover;
  • onMouseout.

Давайте коротко рассмотрим каждый из них.

Событие onLoad

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

Примечание Событие, происходящее при выгрузке страницы (переходе на другую страницу или закрытии окна браузера), называется onUnload.

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

Событие onClick

Это событие происходит после щелчка мышью в определенном месте страницы. Позднее вы узнаете, что множество элементов страницы (гиперссылки, изображения, кнопки и пр.) могут реагировать на событие onClick. Его рекомендуется применять, когда вы хотите создать сценарий, взаимодействующий с пользователем.

Событие onMouseover

Это событие похоже на событие onClick, но происходит не после щелчка мышью, а после наведения курсора на определенный элемент страницы. Событие onMouseover можно связать практически с любым объектом Web-страницы (текстом, изображением, кнопками, гиперссылками и т.д.). Его также можно использовать, чтобы повысить уровень интерактивности сценария.

Событие onMouseout

Это событие подобно событию onMouseover, но происходит в тех случаях, когда курсор мыши отводится от объекта.

Использование событий

Итак, вы узнали о четырех событиях. Как же пользоваться ими? Давайте начнем с события onLoad.

Использование события onLoad

Чтобы применять событие onLoad для вызова функции JavaScript, нужно поместить следующий обработчик события (event handler) в тэг <body> Web-страницы:

<body onLoad="имяФункции()">

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

Пример. Все, что вам нужно сделать для вызова функции yourMessage () - это указать ее имя внутри двойных кавычек обработчика события:

<body onLoad="yourMessage()">

Сохраните страницу и откройте ее в окне браузера:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function yourMessage()
{
alert("Ваша первая функция!");
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="yourMessage()">
</body>
</html>

Использование события onClick

Пример. Если вы решили воспользоваться событием onclick, всего лишь замените onLoad на onClick:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function yourMessage()
{
alert("Ваша первая функция!");
}
// Снимаем маскировку. -->
</script>
</head>
<body onClick="yourMessage()">
</body>
</html>

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

Пример. Однако щелчок в любом месте страницы - не самое удачное решение. Гораздо удобнее управлять процессом более тонко - например щелкнув на гиперссылке. Вместо того чтобы использовать обработчик события onclick в тэге <body>, вы добавляете его непосредственно в гиперссылку:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function yourMessage()
{
alert("Вы щелкнули по ссылке!");
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<a href="http://www.dmk. ru" onClick= "yourMessage () ">Мой Web-сайт!</a>
</body>
</html>

Когда вы откроете этот пример в браузере и щелкните мышью по ссылке, перед переходом к указанному URL на экране появится окно сообщений (см. рис. 8.2).


Рис. 8.2. Окно подтверждающих сообщений, появляющееся после щелчка по гиперссылке

Использование события onMouseover

Пример. Гиперссылки очень удобны для использования событий onMouseover. Ниже представлен вызов функции overMessage (), выполняемый после наведения курсора мыши на гиперссылку:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function overMessage()
{
alert("Замечательная ссылка - щелкните по ней!");
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<a href="http://www.dmk.ru" onMouseover="overMessage()">MoйWeb-caйт!</a>
</body>
</html>

Упражнение Создайте страницу с функцией, которая будет выполняться после того, как пользователь уберет курсор с гиперссылки.

Упражнение Создайте страницу, при закрытии которой пользователь получит прощальное сообщение. Подсказка: вспомните событие onUnload.

Создание полезных функций

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

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

Пример. Вернемся к нашему интерактивному стихотворению и приведем его к более «гостеприимному» виду, поместив код внутри функции и создав кнопку для ее вызова с помощью события onclick (см. рис. 8.3):

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function story()
{
//Создаем массив запросов.
var promptmsg = new Array("Растение - существительное мужского рода","Цвет", "Прилагательное женского
рода - например, интерактивная","Животное -существительное мужского рода","Глагол - например, делает",
"Существительное в винительном падеже - например, программу","Явление природы","Сказочное существо",
"Глагол - например, делает");

//Создаем массив слов по умолчанию.
var defaulttxt = new
Array("дуб","зеленый","златая","кот",
"ходит","песнь","чудеса","леший","сидит");

//Переменные для ответов на запросы.
var entryl, entry2, entry3, entry4, entry5, entry6, entry7, entry8, entry9;

//Вызываем окна запросов.
entryl = prompt(promptmsg[0], defaulttxt[0])
entry2 = prompt(promptmsg[1], defaulttxt[1])
entryS = prompt(promptmsg[2], defaulttxt[2])
entry4 = prompt(promptmsg[3], defaulttxt[3])
entry5 = prompt(promptmsg[4], defaulttxt[4])
entry6 = prompt(promptmsg[5], defaulttxt[5])
entry7 = prompt(promptmsg[6], defaulttxt[6])
entry8 = prompt(promptmsg[7], defaulttxt[7])
entry9 = prompt(promptmsg[8], defaulttxt[8])

//Вызываем окна предупредительных сообщений.
alert("У Лукоморья " + entryl + " " + entry2 + ",");
alert(entry3 + " цепь на дубе том.");
alert("И днем, и ночью " + entry4 + " ученый");
alert("все " + entry5 + " по цепи кругом.");
alert("Идет направо - " + entry6 + " заводит,");
alert("Налево - сказку говорит.");
alert("Там " + entry7 + ", там " + entry8 + " бродит,");
alert("русалка на ветвях " + entry9);
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<h1>Интерактивное стихотворение! </h1>
<р>Щелкните <input type="button" value="ЗДЕСЬ" onClick="story()">
чтобы начать стихотворение!</р>
</body>
</html>


Рис. 8.3. Интерактивное стихотворение с дополнениями

Как запустить функцию на выполнение с помощью другой функции

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function firstMessage()
{
alert("Это первое сообщение!");
secondMessage();
}
function secondMessage()
{
alert("А это второе сообщение!");
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="firstMessage()">
</body>
</html>

Когда вы откроете эту страницу в браузере, событие onLoad вызовет функцию firstMessage (), которая выведет на экран первое окно предупредительных сообщений (см. рис. 8.4).


Рис. 8.4. Первое окно предупредительных сообщений

Второе окно предупредительных сообщений выводится на экран функцией secondMessage (), которая была вызвана с помощью функции firstMessage () (см. рис. 8.5). На рис. 8.6 показан схематический порядок выполнения функций.


Рис. 8.5. Второе окно предупредительных сообщений
Рис. 8.6. Порядок выполнения функций JavaScript

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function firstMessage()
{
alert("Это первое сообщение!");
secondMessage();
alert("А вот и третье!");
}
function secondMessage()
{
alert("А это второе сообщение!");
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="firstMessage()">
</body>
</html>

Здесь происходит следующее. Функция firstMessage (), вызываемая с помощью события onLoad, выводит на экран первое окно предупредительных сообщений. На рис. 8.7 и 8.8 соответственно приводится схема и результирующее окно сообщений в браузере.

Когда очередь доходит до строки, вызывающей функцию secondMessage (), совершается своего рода «скачок» от firstMessage () к secondMessage (), и в результате выполнения функции на экране появляется следующее окно предупредительных сообщений (см. рис. 8.9).

После выполнения функции secondMessage () сценарий возвращается к моменту, на котором прервалось выполнение функции firstMessage (), и продолжает выполнять оставшиеся операторы (см. рис. 8.10 и 8.11).

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

Упражнение Потренируйтесь пользоваться ветвлением на собственных сценариях JavaScript. Попытайтесь организовать внутри функции несколько «ветвей» и посмотрите, что получится.

Рис. 8.7. Событие onload вызывает функцию firstMessage()

Рис. 8.8. Первое окно предупредительных сообщений


Рис. 8.9. Второе окно предупредительных сообщений

Назначение круглых скобок

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

Пример. Рассмотрим пример функции, использующей параметры:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function yourMessage(quote)
{
alert(quote);
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<р>Щелкните <input type="button" value="ЗДЕСЬ"
onClick="yourMessage('Howcome dumb stuff seems so smart while you\'re doing it?')"> чтобы прочитать сообщение.</р>
<br>
<р>Щелкните <input type="button" value="ЗДЕСЬ"
onClick= "yourMessage('Ну почему простые вещи кажутся такими умными, когда их делаете вы!')"> чтобы прочитать перевод.</р>
</body>
</html>

Рис. 8.10. После окончания выполнения функции secondMessage() выполняются остальные операторы функции firstMessage ()

Рис. 8.11. Последнее окно предупредительных сообщений

Примечание Обратите внимание на сочетание (\ ') в первом сообщении, соответствующее одинарным кавычкам. Если использовать вместо него апостроф, то в программе возникнет ошибка.

На этой странице есть две кнопки. При нажатии кнопки появляется окно предупредительных сообщений. Выводимое на экран сообщение указано не в обработчике события onCl ick, а в параметре функции. Этот параметр носит название juote (цитата). Он действует подобно переменной, и его значение выводится на экран в окне предупредительных сообщений (см. рис. 8.12).

Примечание Как и в случае с переменными, присваивайте параметрам осмысленные имена, по которым при последующем чтении кода легко понять назначение параметров.

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function yourMessage(quote)
{
alert(quote);
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<р>Щелкните <input type="button" value="ЗДЕСЬ"
onClick= "yourMessage('Ну почему простые вещи кажутся такими умными,когда их делаете вы?'}"> чтобы прочитать сообщение.</р>
<br>
<р>Щелкните <input type="button" value="ЗДЕСЬ"
onClick= "yourMessage('Если в вашей ручке закончатся невидимые чернила,как вы об этом узнаете?')"> чтобы прочитать второе сообщение.</р>
<br>
<р>Щелкните <input type="button" value="ЗДЕСЬ"
onClick="yourMessage('Семь раз отмерь - один раз отрежь!')"> чтобы прочитать еще одно сообщение.</р>
<br>
<р>Щелкните<input type="button" value="ЗДЕСЬ"
onClick="yourMessage('Делай хорошо, плохо и как получится!')"> чтобы прочитать последнее сообщение.</р>
</body>
</html>

Рекомендация Назначайте параметры! Этот сценарий оказался бы намного сложнее, если бы в нем не использовались параметры и каждой кнопке соответствовала бы отдельная функция.

Упражнение Создайте несколько простых примеров, в которых используются функции и параметры. Обратите внимание, насколько упрощается код благодаря параметрам. Не забывайте вводить комментарии.

Возвращаемое значение функции

Параметры можно использовать, чтобы передавать данные от одной функции (передающей) к другой (принимающей).

Пример. Передачу информации от одной функции к другой можно представить таким образом:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function first()
{
var x = 3, у = 5;
doAdd{x, у);
}
function doAdd(x, у)
{
alert(x + y);
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="first()">
</body>
</html>

В этом примере функция first () передает значения х и у принимающей функции doAdd (), которая выполняет математическое действие и выдает ответ.

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

Оператор return

В предыдущей главе не был рассмотрен оператор return (возврат). Есть и еще эдин оператор, оставшийся вне поля нашего зрения, - with, но о нем пойдет речь в следующей главе.

Оператор return был пропущен, потому что он используется исключительно с функциями, а на тот момент вы еще не знали, что такое функция. Теперь пришло время познакомиться и с этим оператором.

Пример. Вы узнали, как можно передавать параметры от передающей функции к принимающей, которая и будет обрабатывать данные. Но есть способ вернуть результат обратно в сценарий. Это делается с помощью оператора return:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function calcAvg()
{
var inpNuml = prompt("Введите число","Число");
var inpNum2 = prompt("Введите число","Число");
var inpNum3 = prompt("Введите число","Число");
var inpNum4 = prompt("Введите число","Число");
numAvg = doCalcAvg(inpNuml, inpNum2, inpNum3, inpNum4);
alert("Среднее арифметическое введенных вами чисел: " + numAvg);
}
function doCalcAvg(inpNuml, inpNum2, inpNum3, inpNum4)
{
var ans;
ans = (Number(inpNuml) + Number(inpNum2) + Number(inpNum3) + Number(inpNum4)) / 4 ; return(ans);
}
// Снимаем маскировку. -->
</script>
</head>
<body onLoad="calcAvg()">
</body>
</html>

В данном примере пользователь вводит в окнах запроса четыре числа, а затем программа выдает среднее арифметическое этих чисел. Если вы внимательно прочитаете сценарий, то выделите в нем две функции. Первая носит имя CalсAvg () и вызывается с помощью события onLoad. Она обеспечивает ввод и вывод данных с помощью окон предупредительных сообщений и запросов и передает четыре значения переменных функции doCalcAvg (), которая принимает их в качестве параметров.

Предупреждение Если вы вызовете функцию, использующую оператор return, но не присвоите ее значение переменной, например:
doCalcAvg(inpNuml, inpNum2, inpNum3, inpNum4);
то сценарий будет работать некачественно, поскольку возвращаемые данные некуда будет передать.

Затем функция doCalcAvg () производит вычисления и использует оператор return для возвращения результата (сохраняемого в переменной с именем ans). На рис. 8.13 и 8.14 приводятся схема и результат выполнения функций.

Примечание Принимающая (numAvg) и передающая (ans) переменные имеют различные имена. Это лучший способ избежать неприятностей - вам только придется запомнить, какая переменная где используется.

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

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


Рис. 8.14. Результат вычислений в окне предупредительных сообщений

Перевод температуры из одних единиц в другие

Пример

1. Данный пример имеет много общего с предыдущим:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">
<!-- Маскируемся!
function inputCels()
{
var eels = prompt("Введите значение температуры в градусах по Цельсию","Введите температуру");
ansFah = doFahCalc(eels);
alert(eels + " градусов по Цельсию равно " + ansFah + " градусов по Фаренгейту");
}
function inputFaht()
{
var fah = prompt("Введите значение температуры в градусах по Фаренгейту","Введите температуру");
ansCel = doCelCalc(fah);
alert(fah + " градусов по Фаренгейту равно " + ansCel + " градусов по Цельсию");
}
function doCelcalc(fah)
{
var ans = ((Number(fah) - 32) / 1.8);
return(ans);
}
function doFahcalc(eels)
{
var ans = ((1.8 * Number(eels) + 32);
return(ans);
}
// Снимаем маскировку. -->
</script>
</head>
<body>
<input type="button" value= "Переход от градусов по Цельсию к градусам по Фаренгейту" onClick="inputCels();">
<br>
<br>
<input type="button" value="Переход от градусов по Фаренгейту к градусам по Цельсию"onClick="inputFah();">
</body>
</html>

2. Прочтите сценарий (напечатайте его или загрузите из сети и поставьте на выполнение). Попытайтесь разобраться, для чего нужен каждый из операторов и как они взаимодействуют друг с другом посредством параметров и оператора return.

3. Добавьте в сценарий комментарии, чтобы потом код можно было легко прочесть.

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

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

Упражнение Потренируйтесь создавать функции, передающие данные с помощью параметров и оператора return. Если поначалу вам будет трудно, используйте в качестве образца предыдущий пример и просто измените имена переменных.



[ Назад ] [ Вверх ] [ Далее ] 
Hosted by uCoz