Обработчики событий
В предыдущих примерах пользователю не предоставлялась возможность вводить значения, и в зависимости от них получать результат, например, при выполнении функции.
Интерактивные документы можно создавать, используя формы. Предположим, что мы хотим создать форму, в которой поля Основание и Высота служат для ввода соответствующих значений. Кроме того, в форме создадим кнопку Вычислить. При щелчке мышью по этой кнопке мы хотим получить значение площади треугольника.
Действие пользователя (например, щелчок кнопкой мыши) вызывает событие. События в основном связаны с действиями, производимыми пользователем с элементами форм HTML. Обычно перехват и обработка события задается в параметрах элементов форм. Имя параметра обработки события начинается с приставки on, за которой следует имя самого события. Например, параметр обработки события click будет выглядеть как ondick.
Значением параметра обработки события могут быть операторы языка 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 выступают имена текстовых полей формы. При вычислении площади используются значения, введенные пользователем.
Листинг 1.7. Вычисление среднего дохода
<HTML>
<HEAD>
<title>Вычисление среднего дохода</title>
<script language= "JavaScript">
<!-- //
function val(obj)
{var a1= 1*obj.num1.value;
var a2=1* obj.num2.value;
var a3=1* obj.num3.value;
var a4=l*obj.num4.value;
var a5=1* obj.num5.value;
var a6=1* obj.num6.value;
var s =(a1+a2+a3+a4+a5+a6)/6
obj.res.value = s
}
//-->
</script>
</HEAD>
<BODY>
Введите начисленную сумму гонорара за следующие месяцы
<pre>
<form name="form1">
Январь: <input type="text" size=8 name="numl">
Февраль: <input type="text" size=8 name="num2">
Март: <input type="text" size=8 name="num3">
Апрель: <input type="text" size=8 name="num4">
Май: <input type="text" size=8 name="num5">
Июнь: <input type="text" size=8 name="num6">
Средняя зарплата за полгода: <input type="text" size=18 name="res"<br>
<input type="button" value=Bычиcлить onClick="val(forml)">
<input type="reset" value="Обновить">
</form>
</pre>
</BODY>
</HTML>
В рассмотренных примерах параметр обработки события (onciick), задающий действия, выполняемые при обработке события, был связан с элементом типа "кнопка" (button). Событие, вызывающее обработку элементов форм - это щелчок мышью по кнопке Вычислить. В операторе задания переменной
var al= l*obj.numl.value
умножение на 1 выполняется для того, чтобы значением ai стало число, а не строка, т. к. в дальнейшем требуется осуществлять сложение чисел, а не строк.
Рассмотрим дополнительно некоторые другие события, применяемые к объекту "текстовое поле" (text).
Обработка события Focus
Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна вычисляться в тот момент, когда пользователь переходит к элементу формы с помощью клавиши <Таb> или щелчка мыши.
При решении этой задачи вызов функции произойдет как реакция на событие FOCUS, параметр обработки события onFocus. HTML-код представлен в листинге 1.9.
Листинг 1.9. Обработка события Focus - объект формы получает фокус
<HTML>
<HEAD>
<title>Обработка события Focus - объект формы получает фокус</title>
<script>
function srec()
{forml.res.value=forml.numl.value* forml.numl.value}
</script>
</HEAD>
<BODY>
<Р>Вычисление площади квадрата</Р>
<FORM name="forml">
Сторона: <input type="text" size=7 name="num1"
value=6 onFocus="srec()"><hr>
Площадь: <input type="text" size=7 name="res"><hr>
<input type="reset" value=Обновить>
</FORM>
</BODY>
</HTML>
При щелчке мышью по текстовому полю с именем numl, в поле с именем res помещается значение 36. Можно задать другое значение стороны квадрата и в тот момент, когда элемент формы numl получит фокус, значение площади будет помещено в соответствующее поле.
Обработка события Blur
Событие "потеря фокуса" (Blur) происходит в тот момент, когда элемент формы теряет фокус. В следующем варианте решения задачи вычисления происходят в тот момент, когда поле формы, содержащее данные, потеряло фокус.
Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна вычисляться в тот момент, когда элемент формы теряет фокус. HTML-код представлен в листинге 1.10.
Листинг 1.10. Обработка события: - потеря объектом фокуса
<HTML>
<HEAD>
<title>Обработка события Blur - потеря объектом фокуса</title>
<script>
function srec()
{forml.res.value=forml.numl.value* form1.numl.value}
</script>
</HEAD>
<BODY>
<Р>Вычисление площади квадрата</Р>
<FORM name="form1">
Сторона: <input type="text" size=7 name="num1" value=8
onBlur="srec()"><hr>
Площадь: <input type="text" size=7 name="res"><hr>
<input type="reset" value = Обновить>
</FORM>
</BODY>
</HTML>
В результате потери фокуса полем numl происходит вычисление значения площади и помещение вычисленного значения в поле res. Первоначально будет вычислен результат, равный 64. Можно ввести нужное значение и при переходе к любому другому элементу, в поле res отобразится вычисленное значение.
Обработка события Select
Событие select вызывается выбором части или всего текста в текстовом поле. Например, щелкнув дважды мышью по полю numl, мы выделим поле, наступит событие select, обработка которого приведет к вычислению требуемого значения.
Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна вычисляться в тот момент, когда выбирается часть или весь текст в текстовом поле. HTML-код представлен в листинге 1.11.
Листинг 1.10 Обработка события Select - выбор поля ввода элемента формы
<HTML>
<HEAD>
<title>Обработка события Select.- выбор поля ввода элемента формы</title>
<script>
function srec ()
{forml.res.value=forml.numl.value* form1.num1.value}
</script>
</HEAD>
<BODY>
<Р>Вычисление площади квадрата</Р>
<FORM name="forml">
Сторона: <input type="text" size=7 name="numl" value=9
onSelect="srec()"><hr>
Площадь: <input type="text" size=7 name="res"><hr>
<input type="reset" value=Oбновить>
</FORM>
</BODY>
</HTML>
Листинг 1.12. Обмен двух изображений
<HTML>
<HEAD>
<title>Обмен двух изображений</title>
<script language="JavaScript">
<!-- //
function chpict ()
{ var d=document
var l=d.pm1.src
d.pm1.src=d.pm2.src
d.pm2.src=1
}
//-->
</script>
</HEAD>
<BODY bgcolor=F8F8FF>
<h3>Обмен двух изображений</h3>
<IMG src="m1.gif" name=pm1 width=100>
<IMG src="m2.gif" name=pm2 width=100>
<FORM name="form1">
<input type="button" value="Обменять" onClick="chpict()">
</FORM>
</BODY>
</HTML>
Итак, для любого события важно знать, когда оно наступает, и к каким объектам применяется. В предыдущих примерах мы привели варианты обработки событий, применяемых к текстовому полю (text).
Листинг 1.13, а. Вертикальное графическое меню (вариант 1)
<HTML>
<HEAD>
<title>Вертикальное графическое меню</title>
</HEAD>
<BODY background="fonl.jpg">
<h2><font color="#OOOOFF">Содержание</font></h2>
<A href="tchl.htm" target="Main"
onmouseover="document.pml.src='wpchl.gif'"
onmouseout="document.pml.src='pchl.gif'" >
<IMG src="pchl.gif" name="pm1" alt="форматирование текста"
border="0" width="103" height="35"></A><br>
<A href="tch2.htm" target="Main"
onmouseover="document.pm2.src='wpch2.gif'"
onmouseout="document.pm2.src='pch2.gif'" >
<IMG src="pch2.gif" name="pm2" аlt="создание списков"
order="0" width="103" height="35"></A><br>
<A href="tch3.htm" target="Main"
onmouseover="document.pm3.src='wpch3.gif'"
onmouseout="document.pm3.src='pch3.gif'" >
<IMG src="pch3.gif" name="pm3" alt="построение таблиц"
border="0" width="103" height="35"></A><br>
<A href="tch4.htm" target="Main"
onmouseover="document.pm4.src='wpch4.gif'"
onmouseout= "document.pm4.src='pch4 .gif'" >
<IMG src="pch4.gif" name="pm4" alt="использование графики"
border="0" width="103" height="35"></A><br>
<A href="tch5.htm"
onmouseover="document.pm5.src='wpch5.gif'"
onmouseout="document.pm5.src='pch5.gif'" >
<IMG src="pch5.gif" name="pm5" alt="создание фреймовой структуры"
border="0" width="103" height="35"></A>
<br>
</BODY>
</HTML>
Событие onmouseover возникает и при перемещении курсора мыши над изображением. Событие onmouseout наступает при выходе курсора за пределы области изображения. Поэтому обработку события можно помешать не в тег <А>, как было сделано в предыдущем примере, а в тег <IMG>, как это сделано в листинге 1.13, б.
Листинг 1.13, б. Вертикальное графическое меню (вариант 2)
<HTML>
<HEAD>
<TITLE>Вертикальное графическое меню</TITLE>
</HEAD>
<BODY background="fonl.jpg">
<H2><FONT соlоr="#0000FF">Содержание</font></Н2>
<A href="tchl.htm" target="Main">
<img src="pchl.gif" name="pml" аlt="форматирование текста"
border="0" width="103" height="35"
onmouseover="document.pml.src='wpchl.gif"
onmouseout="document.pml. src='pchl .gif "></A><br>
<A href="tch2.htm" target="Main">
<img src="pch2.gif" name="pm2" alt-''создание списков" border="0"
width="103" height="35"
onmouseover="document.pm2.src='wpch2.gif"
onmouseout="document.pm2.src='pch2.gif'"></A><br>
<A href="tch3.htm" target="Main">
<img src="pch3.gif" name="pm3" аlt="построение таблиц" border="0"
width="103" height="35"
onmouseover="document.pm3.src='wpch3.gif"
onmouseout="document.pm3.src='pch3.gif'"></A><br>
<A href="tch4.htm" target="Main" >
<IMG src="pch4.gif" name="pm4" alt="иcпoльзoвaниe графики"
border="0" width="103" height="35"
onmouseover="document.pm4.src='wpch4.gif"
onmouseout="document.pm4 . src='pch4 .gif "></A><br>
<A href="tch5.htm" target="Main">
<img src="pch5.gif" name="pm5" alt="создание фреймовой структуры"
border="0" width="103" height="35"
onmouseover="document.pm5.src='wpch5.gif'"
onmouseout="document.pm5.src='pch5.gif"></A><br>
</BODY>
</HTML>
Вид документа в обоих случаях будет одинаков.
Таблица 1.5. События и объекты
Событие Объекты Когда происходит событие Abort image Отказ от загрузки изображения Blur Windows, элементы формы Потеря объектом фокуса Change text, textarea, select Изменение значения элемента Click button, radio, checkbox, submit, reset, link Щелчок на элементе или связи DragDrop windows Перетаскивается мышью объект в окно браузера Error image, windows Ошибка при загрузке документа или изображения Focus windows, элементы формы Окно или элемент формы получает фокус KeyDown document, image, link, textarea Нажатие клавиши клавиатуры KeyPress document, image, link, textarea Удержание нажатой клавиши клавиатуры KeyUp document, image, link, textarea Отпускаются клавиши клавиатуры Load Тело документа Загружается документ в браузер MouseDown document, button, link Нажатие кнопки мыши MouseOut area, link Перемещение курсора из области изображения или связи MouseOver link Перемещение курсора над связью MouseUp document, button, link Отпускается кнопка мыши Move windows Пользователь или сценарий перемещает окно Reset form Нажатие кнопки Reset формы Resize windows Пользователь или сценарий изменяет размеры окна Select text, textarea Выбирается поле ввода элемента формы Submit form Нажатие кнопки Submit формы Unload Тело документа Пользователь закрывает документ
Во многих рассмотренных примерах значением параметра обработки события был вызов функции, осуществляющей требуемые действия.
Объект Math и его методы
В языке JavaScript определены некоторые стандартные объекты и функции, пользоваться которыми можно без предварительного описания. Одним из стандартных объектов является объект Math. В свойствах упомянутого объекта хранятся основные математические константы, а его методы можно использовать для вызова основных математических функций. В табл. 1.6 приведены некоторые методы объекта Math.
Таблица 1.6. Методы объекта Math
Метод объекта Описание объекта abs Абсолютное значение sin, cos, tan Тригонометрические функции log Натуральный логарифм exp Экспонента min Наименьшее значение 2-х аргументов max Наибольшее значение 2-х аргументов pow Показательная фйнкция sqrt Квадратный корень
Вычисление площади и периметра треугольника
Напишем сценарий вычисления площади и периметра треугольника, заданного длинами сторон.
Для того чтобы вычислить площадь треугольника по длинам сторон, можно воспользоваться формулой Герона, в соответствии с которой требуется применить функцию извлечения квадратного корня. Поэтому применим метод
sqrt объекта Math: Math. sqrt.
HTML-код представлен в листинге 1.15.
Листинг 1.15. Вычисление площади и периметра треугольника с помощью объекта Math
<HTML>
<HEAD>
<ТITLE>Объект Math</TITLE>
<script language="JavaScript">
<!-- //
function care (obj)
{
var a=obj.stl.value
var b=obj.st2.value
var c=obj.st3.value
var s;
p=a*l+b*l+c*l;
document.writeln ("Периметр треугольника равен ",р,"<br>");
p=p/2;
s=Math.sqrt(p*(p-a)*(p-b)*(p-c));
ocument.write ("Площадь треугольника равна ",s); }
//-->
</script>
</HEAD>
<BODY>
<Р>Пример сценария с математической функцией</Р>
<Р>Вычисление площади и периметра треугольника</Р>
<FORM name="forml">
Сторона 1: <input type="text" size=7 name="stl"><hr>
Сторона 2: <input type="text" size=7 name="st2"><hr>
Сторона 3: <input type="text" size=7 name="st3"><hr>
<input type="button" value=Вычислить
onClick="care(forml)"><hr>
<input type="reset" value=Oтменить>
</FORM>
</BODY>
</HTML>
Обратите внимание на кнопку Отменить, при нажатии на которую очищаются все поля формы.
Листинг 1.16. Описание и использование гиперболических функций
<HTML>
<HEAD>
<TITLE>Определение и использование нескольких функций</TITLE>
<script language="JavaScript">
<!-- //
function sh(x)
(var y=(Math.exp(x) - Math.exp(-x))/2;
return у}
function ch(x)
{var y=(Math.exp(x) + Math.exp(-x))/2;
return y)
function th(x)
{var y=sh(x)/ch(x);
return y}
//-->
</script>
</HEAD>
<BODY>
Определение и использование гиперболических функций
<HR> <PRE>
<FORM name="forml">
Введите значение x: <input type="text" size=5 name="arg"><br>
гиперболический синус: <input type="text" size=20 name="resl">
<input type="button" value= " синус "
onClick="forml.resl.value=sh(forml.arg.value)"><br>
гиперболический косинус: <input type="text" size=20 name="res2">
<input type="button" value= "косинус"
onClick="forml.res2.value=ch(forml.arg.value)"><br>
гиперболический тангенс: <input type="text" size=20 name="res3">
<input type="button" value= "тангенс"
ondick="forml. res3 . value=th (forml. arg. value) ">
</FORM> </PRE>
</BODY>
</HTML>
При работе с объектами можно использовать оператор with, который имеет следующий синтаксис:
with (t) {S}
где t - объект; s - последовательность операторов. Оператор with задает объект, используемый по умолчанию в последовательности операторов s. Все свойства и методы в s являются свойствами и методами объекта t. Применение этого оператора сокращает текст программы, т. к. избавляет от необходимости указывать иерархию объектов. Этот оператор часто используется для объекта Math, тогда обращение к его свойствам и методам можно производить без самого объекта Math, например, как в следующем варианте описания функции sh (х):
function sh(x)
{
var y
with (Math){y= (exp(x) -exp(-x))/2) return y}.