Часть 4. Создание JavaScript-функций

Функция – это именованная последовательность операторов (инструкций). Любая функция имеет следующий синтаксис:

function имя (){

оператор;

.......

оператор;

}

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

Рассмотрим на примере. Поместим в html-страницу следующий код:

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

<div onClick="showMessage();">Щелкни меня</div>

</body>

</html>

Мы указали, что при щелчке пользователя по div-у (т.е. по словам "Щелкни меня") должна быть вызвана функция с именем "showMessage". Теперь на странице script.js надо написать саму функцию "showMessage". Открываем страницу script.js и пишем:

function showMessage(){

alert ("Вы щелкнули по div-у");

}

Таким образом, мы рассмотрели механизм работы обработки событий:

1) В html-странице мы привязываем к нужному элементу обработчик события (onClick, onMouseUp и т.д.), в качестве значения которого указываем имя функции, которая и должна сработать, когда настанет событие.

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

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

<html>

<head>

<title>Расчет площади прямоугольника</title>

</head>

<body>

Введите длину прямоугольника <input type="text" name="t1" size="10"><br><br>

Введите ширину прямоугольника <input type="text" name="t2" size="10"><br><br>

Площадь прямоугольника равна <input type="text" name="res" size="10">

</form>

</body>

</html>

В браузере наша страница будет выглядеть так:

Итак, пользователь вводит значения ширины и длины и нажимает на кнопку "Вычислить". После чего, в поле площадь должен появиться результат. Таким образом, событие наступает при нажатии на кнопку "Вычислить", значит именно к ней мы и привяжем обработчик события. Функцию вычисления площади назовем "areaRectangle":

.......

<input type="button" name="button" value="Вычислить"

onClick="areaRectangle();"><br><br>

.......

Теперь пришло время написать саму функцию "areaRectangle". Для этого откроем страницу script.js и напишем заготовку для функции:

function areaRectangle(){

}

Теперь надо написать тело функции. Для начала объявим три переменные: a - значение длины прямоугольника, b - значение ширины прямоугольника, s - площадь прямоугольника:

function areaRectangle(){

var a;

var b;

var s;

}

Значение (value) a должно браться из текущей страницы (document), из формы с именем "forma1", из текстового поля с именем "t1". Так это и записывается document.forma1.t1.value, т.е. перечисляются через точку имена объектов от родительского до нужного. Последним указывается необходимое свойство объекта (value).

Аналогично и для значения b - document.forma1.t2.value.

А наша переменная s - есть произведение a на b. Запишем это в тело функции:

function areaRectangle(){

var a=document.forma1.t1.value;

var b=document.forma1.t2.value;

var s=a*b;

}

Осталось только написать инструкцию записи вычисленной площади в текстовое поле с именем "res" нашей формы. Т.е нам надо, чтобы в текщую страницу, в форму с именем "forma1", в текстовое поле с именем "res", в качестве значения (value) было присвоено значение s. Так и запишем:

function areaRectangle(){

var a=document.forma1.t1.value;

var b=document.forma1.t2.value;

var s=a*b;

document.forma1.res.value=s;

}