2. Составить сценарий, в котором вычисляется площадь круга по заданному радиусу.
3. Составить сценарий, вычисляющий гипотенузу по заданным катетам.
Лабораторная работа №2
Функция и обработка события
Основным элементом языка JavaScript является функция. Описание функции имеет вид
function F (V) {S},
где F - идентификатор функции, задающий имя, по которому можно обращаться к функции; V - список параметров функции, разделяемых запятыми; S - тело функции, в нем задаются действия, которые нужно выполнить, чтобы получить результат. Необязательный оператор return определяет возвращаемое функцией значение. Обычно все определения и функции задаются в разделе <head> документа. Это обеспечивает интерпретацию и сохранение в памяти всех функций при загрузке документа в браузер.
Пример 1. Нахождение площади треугольника.
В предыдущих примерах пользователю не предоставлялась возможность вводить значения, и в зависимости от них получать результат. Интерактивные документы можно создавать, используя формы. Предположим, что мы хотим создать форму, в которой поля Основание и Высота служат для ввода соответствующих значений. Кроме того, в форме создадим кнопку Вычислить. При щелчке мышью по этой кнопке мы хотим получить значение площади треугольника. Действие пользователя (например, щелчок кнопкой мыши) вызывает событие. События в основном связаны с действиями, производимыми пользователем с элементами форм HTML. Обычно перехват и обработка события задается в параметрах элементов форм. Имя параметра обработки события начинается с приставки on, за которой следует имя самого события. Например, параметр обработки события click будет выглядеть как onclick.
Листинг 1. Реакция на событие Click.
<HTML>
<HEAD>
<title>Обработка значений из формы</title>
<script language="JavaScript">
<!--//
function care (a, h)
{
var s=(a*h)/2;
document.write ("Площадь прямоугольного треугольника равна ",s);
return s
}
//-->
</script>
</HEAD>
<BODY>
<P>Пример сценария со значениями из формы</P>
<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.form1.st1.value, document.form1.st2.value)"> /*По клику мыши на кнопке в функцию care передаются два параметра - содержимое полей ввода*/
</FORM>
</BODY>
</HTML>
При интерпретации HTML-страницы браузером создаются объекты JavaScript. Взаимосвязь объектов между собой представляет иерархическую структуру. На самом верхнем уровне иерархии находится объект windows, представляющий окно браузера. Объект windows является предком или родителем" всех остальных объектов. Каждая страница кроме объекта windows имеет объект document. Свойства объекта document определяются содержимым самого документа: цвет фона, цвет шрифта и т. д. Для получения значения основания треугольника, введенного в первом поле формы, должна быть выполнена конструкция
document.forml.stl.value
т.е., говоря русским языком (при этом читаем с конца), используем данные value из поля ввода с именем st1 находящегося на форме form1 объекта document.
Пример 2. Вычисление площади квадрата.
Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна вычисляться в тот момент, когда изменилось значение его стороны. Пусть форма содержит два текстовых поля: одно для длины стороны квадрата, другое для вычисленной площади. Кнопка Обновить очищает поля формы. Площадь квадрата вычисляется при возникновении события change, которое происходит в тот момент, когда значение элемента формы с именем num1 изменилось, и элемент потерял фокус. HTML-код представлен в примере 2.
Листинг 2. Реакция на событие Change
<HTML>
<HEAD>
<title>Обработка события Change - изменение значения элемента</title>
<script>
function srec(obj)
{obj.res.value=obj.num1.value* obj.num1.value}
</script>
</HEAD>
<BODY>
<P>Вычисление площади квадрата</P>
<FORM name="form1">
Сторона: <input type="text" size=7 name="num1"
onChange="srec(form1)">
<hr>
Площадь: <input type="text" size=7 name="res"><hr>
<input type="reset" value=Обновить>
</FORM>
</BODY>
</HTML>
Событие Focus возникает в момент, когда пользователь переходит к элементу формы с помощью клавиши <Таb> или щелчка мыши. Событие "потеря фокуса" (Blur) происходит в тот момент, когда элемент формы теряет фокус. Событие select вызывается выбором части или всего текста в текстовом поле. Например, щелкнув дважды мышью по полю, мы выделим поле, наступит событие select, обработка которого приведет к вычислению требуемого значения. В табл.3 представлены события и элементы документов HTML, в которых эти события могут происходить.
Обработчик события
Поддерживающие HTML-элементы
Описание
Метод имитации
onAbort
IMG
Прерывание загрузки изображения
onBlur
A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA
Потеря текущим элементом фокуса, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции
blur()
onChange
INPUT, SELECT, TEXTAREA
Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur
change()
onClick
* Практически все HTML-элементы
Одинарный щелчок (нажата и отпущена кнопка мыши)
click()
onDblClick
* Практически все HTML-элементы
Двойной щелчок
onError
IMG, WINDOW
Возникновение ошибки выполнения сценария
onFocus
A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA
Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции)
focus()
onKeyDown
* Практически все HTML-элементы
Нажата клавиша на клавиатуре
onKeyPress
* Практически все HTML-элементы
Нажата и отпущена клавиша на клавиатуре
onKeyUp
* Практически все HTML-элементы
Отпущена клавиша на клавиатуре
onLoad
BODY, FRAMESET
Закончена загрузка документа
onMouseDown
* Практически все HTML-элементы
Нажата кнопка мыши в пределах текущего элемента
onMouseMove
* Практически все HTML-элементы
Перемещение курсора мыши в пределах текущего элемента
onMouseOut
* Практически все HTML-элементы
Курсор мыши выведен за пределы текущего элемента
onMouseOver
* Практически все HTML-элементы
Курсор мыши наведен на текущий элемент
onMouseUp
* Практически все HTML-элементы
Отпущена кнопка мыши в пределах текущего элемента
onMove
WINDOW
Перемещение окна
onReset
FORM
Сброс данных формы ( щелчок по кнопке <input type="reset"> )
reset()
onResize
WINDOW
Изменение размеров окна
onSelect
INPUT, TEXTAREA
Выделение текста в текущем элементе
onSubmit
FORM
Отправка данных формы ( щелчок по кнопке <input type="submit"> )
submit()
onUnload
BODY, FRAMESET
Попытка закрытия окна браузера и выгрузки документа
* Практически все HTML-элементы: все, за исключением APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE
В языке JavaScript определены некоторые стандартные объекты и функции, пользоваться которыми можно без предварительного описания. Одним из стандартных объектов является объект Math. В свойствах упомянутого объекта хранятся основные математические константы, а его методы можно использовать для вызова основных математических функций. В табл.2 приведены некоторые методы объекта Math. Выражение y=log x запишется y=Math.log(x).
