Обработчики событий
Интерактивные доументы можно создавать,
используя формы, в которые можно вводить
значения и в зависимости от них получать
результат.
Предположим, что мы хотим создать форму,
в которой поля ОСНОВАНИЕ и ВЫСОТА служат
для ввода соответствующих значений. В форме
создадим кнопку ВЫЧИСЛИТЬ. При щелчке по этой
кнопке мы хотим получить значение площади
треугольника.
Действие пользователя(например, щелчок
кнопкой мышы) вызывает событие.События в основном
связаны с действиями, производимые пользователем
с элементами форм HTML. Обычно перехват и обработка
события задаётся в параметрах элементов форм. Имя
параметра обработки события начинается с приставки on,
за которой следует имя самого события.
Например, параметр обработки события Click будет
выглядеть как onClick.
Значением параметра могут быть операторы языка Java Script
В качестве параметра обработки события можно задать
вызов функции, которая должна выполняться при возникновении
события, определяемого параметром обработки события.
В этом случае может быть использована следующая форма
<form name="form1">
Основание: <input type="text" size=5 name="st1">
Высота: <input type="text" size=5 name="st2">
<input type="button" value=Вычислить
onClick="care(document.form1.st1.value,document.form1.st2.value)">
</form>
(dmi3)
<html>
<head>
<title>dmi3</title>
<script language="JavaScript">
<!-- //
function care (a, h)
{ var s= (a*h) / 2;
document.write ("PPPPP", s);
return s
}
//-->
</script>
</head>
<body>
<p>ssss</p>
<form name="form1">
OOOO: <input type="text" size=5 name="st1"><hr>
VVVV: <input type="text" size=5 name="st2"><hr>
<input type="button" value=Вычислить onClick="care(document.form1.st1.value,document.form1.st2.value)">
</form>
</body>
</html>
</body>
</html>
Пример.
html>
head>
script language="JavaScript">
!-- //
function care (a, h)
{ var s= (a*h) / 2;
document.form1.st3.value=s;
return s
}
//-->
/script>
/head>
body bgcolor=aqua>
p>Площадь прямоугольного треугольника
form name="form1">
Основание: input type="text" size=5 name="st1">
Высота: input type="text" size=5 name="st2">
Площадь input type="button" value=Вычислить
onClick="care(document.form1.st1.value,document.form1.st2.value)">
/form>
/body>
/html>
В этом примере мы помещаем вычисленное значение
в форму с именем name="st3" и в функции указываем
это так document.form1.st3.value=s, т.е. указываем
путь вывода вычисленного значения.
ИЛИ
Для того чтобы использовать в вычислениях значения,
заданные с помощью формы, требуется применить конструкцию
obj.st3.value=s.
Рассмотрим подробнее значение параметра обработки события,
представляющего собой вызов функции care.
При интерпритации HTML-страницы браузером создаются объекты
Java Script. Взаимосвязь объектов между собой представляет
иерархическую структуру. На самом верхнем уровне иерархии
находится объект windows, представляющий окно броузера. Объект
windows является предком или родителем всех остальных объектов
Каждая страница, кроме объекта windows имеет объект document.
Свойства объекта document определяются содержимым самого
документа: цвет фона, цвет шрифта итд.
В нашем примере на странице расположена форма. Форма (form)
является потомком объекта document , а все элементы формы
выступают потомками объекта form. Ссылка на объект
может осуществляться по имени, заданному параметром name тега
HTML. Для получения значения основания треугольника, введённого
в первом пеле формы, должна быть выполнена конструкция
document.form1.st1.value
При ссылке на формы и их элементы можно не указывать объект
document, т.е. можно сделать так
form1.st1.value
Итак, когда в функцию передаются данные простых типов,
например, чисел, как в рассмотренном примере, передача
осуществляется по значению. Формальному параметру a присваивается
значение фактического параметра form1.st1.value, а формальному
параметру b -значение form1.st2.value. После этого выполняется
тело функции.