Обработчики событий
В предыдущих примерах пользователю не предоставлялась возможность вводить значения, и в зависимости от них получать результат, например, при выполнении функции.
Интерактивные документы можно создавать, используя формы. Предположим, что мы хотим создать форму, в которой поля Основание и Высота служат для ввода соответствующих значений. Кроме того, в форме создадим кнопку Вычислить. При щелчке мышью по этой кнопке мы хотим получить значение площади треугольника.
Действие пользователя (например, щелчок кнопкой мыши) вызывает событие. События в основном связаны с действиями, производимыми пользователем с элементами форм HTML. Обычно перехват и обработка события задается в параметрах элементов форм. Имя параметра обработки события начинается с приставки on, за которой следует имя самого события. Например, параметр обработки события click будет выглядеть как onclick.
Значением параметра обработки события могут быть операторы языка JavaScript. В качестве значения параметра обработки события можно задать вызов функции, которая должна выполняться при возникновении события, определяемого параметром обработки события. В этом случае может быть использована следующая форма:
<FORM name="form1">
Основание: <input type="text" size=5 name="stl"><hr>
Высота: <input type="text" size=5 name="st2"><hr>
<input type="button" value=Вычислить
onClick="care(document. forml. stl. value, document. forml. st2. value)">
</FORM>
Обработка значений из формы
Напишем функцию, вычисляющую площадь треугольника по заданному основанию и высоте. Создадим форму для ввода исходных данных.
HTML-код представлен в листинге 1.3.
Листинг 1.3. Обработка значений из формы
<HTML>
<HEAD>
<title>Обработка значений из формы</title>
<script language="JavaScript">
<!--//
function care (a, h)
{ var s= (a* h) / 2;
document.write ("Площадь прямоугольного треугольника равна ",s);
return s
}
//-->
</script>
</HEAD>
<BODY>
<Р>Пример сценария со значениями из формы</Р>
<FORM name="form1">
Основание: <input type="text" size=5 name="st1"><hr>
Высота: <input type="text" size=5 name="st2"><hr>
<input type="button" value=Вычислить
onClick="care(document. forml. stl. value, document. forml. st2. value)">
</FORM>
</BODY>
</HTML>
Рассмотрим подробнее значение параметра обработки события, представляющего собой вызов функции саге.
При интерпретации HTML-страницы браузером создаются объекты JavaScript. Взаимосвязь объектов между собой представляет иерархическую структуру. На самом верхнем уровне иерархии находится объект windows, представляющий окно браузера. Объект windows является предком или родителем" всех остальных объектов. Каждая страница кроме объекта windows имеет объект document. Свойства объекта document определяются содержимым самого документа: цвет фона, цвет шрифта и т. д. В последнем примере на странице расположена форма. Форма (form) является потомком объекта document, а все элементы формы выступают потомками объекта form. Ссылка на объект может быть осуществлена по имени, заданному параметром name тега <HTML>. Для получения значения основания треугольника, введенного в первом поле формы, должна быть выполнена конструкция
document.forml.stl.value
При ссылке на формы и их элементы можно не указывать объект document. В рассмотренном примере получить значение первого поля ввода можно и следующим образом
forml.stl.value
Итак, когда в функцию передаются данные простых типов, например, чисел, как в рассмотренном случае, передача параметров осуществляется по значению. Формальному параметру а присваивается значение фактического параметра forml.stl.value, а формальному параметру b значение formi.st2.value. После этого выполняется тело функции.
Ситуация изменится, когда фактическим параметром функции станет объект. В этом случае говорят, что передача параметра осуществляется по ссылке или по наименованию. Пусть тело документа описано следующим образом:
<BODY>
<Р>Вычисление площади прямоугольного треугольника</Р>
<FORM name="forml">
Основание: <input type="text" size=7 name="stl"><hr>
Высота: <input type="text" size=7 name="st2"><hr>
<input type="button" value=Вычислить
onClick="carel(forml.stl,forml.st2)">
</FORM>
</BODY>
В качестве фактических параметров в вызове функции carel выступают имена текстовых полей формы. При вычислении площади используются значения, введенные пользователем. Поэтому описание функции carel должно быть таким:
function carel(a, h)
{var s=(a.value * h.value)/2;
document.write("Площадь равна ",s);
return s}
Значение основания треугольника получается с помощью конструкции a.value, а высоты h.value. Приведем описание документа со сценарием полностью.
Передача параметров по ссылке
Напишем сценарий, определяющий площадь треугольника по заданному основанию и высоте. В качестве фактических параметров функции будем использовать имена текстовых полей формы.
HTML-код представлен в листинге 1.4.
Листинг 1.4. Передача параметров по ссылке
<HTML>
<HEAD>
<title>Имена полей формы в качестве параметров</title>
<script language="JavaScript">
<!-- //
function carel (a, h )
{ var s= (a.value* h.value) / 2;
document.write ("Площадь равна ",s);
return s}
//-->
</script>
</HEAD>
<BODY>
<Р>Вычисление площади треугольника</Р>
<FORM name="forml">
Основание: <input type="text" size=7 name="stl"><hr>
Высота: <input type="text" size=7 name="st2"><hr>
<input type="button" value=Bычиcлить
onClick="carel(forml.stl, forml.st2)">
</FORM>
</BODY>
</HTML>
В следующем примере функции саге2 передается лишь один параметр - имя формы, а внутри функции определяются конкретные переданные значения.
Использование имени формы в качестве параметра функции
Напишем сценарий, определяющий площадь треугольника по заданному основанию и высоте. В качестве фактических параметров функции следует использовать имя формы.
Функция саге2 имеет один параметр obj, являющийся именем формы, в которой с помощью текстовых полей задаются пользователем значения. Для того чтобы использовать в вычислениях значения, заданные с помощью формы, требуется применить конструкцию obj. sti. value, т. е. указать имя поля формы, а затем выбрать значение (листинг 1.5).
Листинг 1.5. Параметр функции - имя формы
<HTML>
<HEAD>
<title>Параметр функции - имя формы</title>
<script language="JavaScript">
<!-- //
function care2 (obj )
{var a=obj.stl.value
var h=obj.st2.value
var s= (a* h) /2;
document.write ("Площадь равна ", s);
return s }
//-->
</script>
</HEAD>
<BODY>
<Р>Вычисление площади треугольника</Р>
<FORM name="forml">
Основание: <input type="text" size=7 name="stl"><hr>
Высота: <input type="text" size=7 name="st2"><hr>
<input type="button" value=вычиcлить
onClick="care2(forml)">
</FORM>
</BODY>
</HTML>
В предыдущих примерах вычислялось значение, и для его вывода применялся метод write объекта document. Определим в форме поле Площадь, в которое будем помещать вычисленное значение. Пусть в теле документа описана форма со следующими полями:
<FORM name="forml">
Основание: <input type="text" size=7 name="stl"><hr>
Высота: <input type="text" size=7 name="st2"><hr>
<input type="button" value=Bычиcлить
onClick="care3(forml)">
Площадь <input type="text" size=7 name="res"><hr>
</FORM>
Опишем функцию саrе3 следующим образом:
function саrе3 (obj)
{var a=obj.stl.value
var h=obj.st2.value
var s= (a* h) / 2;
obj.res.valuers}
В результате щелчка по кнопке Вычислить в поле с именем res будет помешено требуемое значение. В приведенных примерах значением параметра обработки события было имя функции, которая вызывалась, когда происходило событие. В общем случае значением параметра обработки события могут быть и другие операторы языка JavaScript.
В следующем примере мы не будем описывать функцию для вычисления площади треугольника. В результате щелчка мышью по кнопке Вычислить в поле res будет помещено вычисленное значение. Значением параметра обработки события в этом случае выступает оператор присваивания.
Оператор присваивания
Создадим программу, позволяющую получать площадь треугольника по заданному основанию и высоте (листинг 1.6).
Листинг 1.6. Использование оператора присваивания для вычисления значения параметра обработки события
<HTML>
<HEAD>
<title>Оператор присваивания в качестве значения параметра обработки события</title>
<BODY>
<Р>Вычисление площади треугольника по основанию и высоте</Р>
<FORM name="form1">
Основание: <input type="text" size=7 name="stl"><hr>
Высота: <input type="text" size=7 name="st2"><hr>
<input type="button" value=Вычислить
onClick="forml.res.value=(forml.stl.value* forml.st2.value)/2">
Площадь <input type="text" size-7 name="res"><hr>
</FORM>
</BODY>
</HTML>
Вычисление среднего дохода
Вводится информация о доходах за каждый месяц первого полугодия. Требуется написать сценарий определения среднего дохода в месяц за рассматриваемый период.
|
|
|
Рис 1.5. Вычисление среднего дохода |
На рис. 1.5 изображен документ после заполнения полей формы и вычисления результата.
Приведем документ со сценарием вычисления среднего дохода за рассматриваемый период (листинг 1.7).