- •Листинг 1.3. Обработка значений из формы
- •Листинг 1.4. Передача параметров по ссылке
- •Листинг 1.5. Параметр функции — имя формы
- •Листинг 1.6. Использование оператора присваивания для вычисления значения параметра обработки события
- •Листинг 1.8. Реакция на событие Change
- •Листинг 1.9. Обработка события Focus — объект формы получает фокус
- •Листинг 1.10. Обработка события: — потеря объектом фокуса
- •Листинг 1.10 Обработка события Select — выбор поля ввода элемента формы
- •Листинг 1.12. Обмен двух изображений
- •Листинг 1.13, а. Вертикальное графическое меню (вариант 1)
- •Листинг 1.13, б. Вертикальное графическое меню (вариант 2)
- •Листинг 1.15. Вычисление площади и периметра треугольника с помощью объекта Math
- •Листинг 1.16. Описание и использование гиперболических функций
Листинг 1.6. Использование оператора присваивания для вычисления значения параметра обработки события
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Оператор присваивания в качестве значения параметра обработки события</title>
</head>
<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="form1.res.value=(form1.stl.value*form1.st2.value)/2">
Площадь <input type="text" size=7 name="res"><hr>
</FORM>
</BODY>
Площадь квадрата
Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна вычисляться в тот момент, когда изменилось значение его стороны.
Зададим форму, в которой определены два текстовых поля: одно для длины стороны квадрата, другое для вычисленной площади. Кнопка Обновить очищает поля формы. Площадь квадрата вычисляется при возникновении события change, которое происходит в тот момент, когда значение элемента формы с именем numl изменилось, и элемент потерял фокус. HTML-код представлен в листинге 1.8.
Листинг 1.8. Реакция на событие Change
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Обработка события Change - изменение значения элемента</title>
<script>
function srec(obj)
{ obj.res.value=obj.numl.value* obj.numl.value}
</script>
</HEAD>
<BODY>
<Р>Вычисление площади квадрата</Р>
<FORM name="forml">
Сторона: <input type="text" size=7 name="numl"
onChange="srec(forml)">
<hr>
Площадь: <input type="text" size=7 name="res"><hr>
<input type="reset" value=Обновить>
</FORM>
>
</BODY>
</HTML>
Обработка события Focus
Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна вычисляться в тот момент, когда пользователь переходит к элементу формы с помощью клавиши <Таb> или щелчка мыши.
При решении этой задачи вызов функции произойдет как реакция на событие FOCUS, параметр обработки события onFocus. HTML-код представлен в листинге 1.9.
Листинг 1.9. Обработка события Focus — объект формы получает фокус
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Обработка события Focus - объект формы получает фокус</title>
<script>
function srec()
{forml.res.value=forml.num1.value* forml.num1.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>
При щелчке мышью по текстовому полю с именем numl, в поле с именем res помещается значение 36. Можно задать другое значение стороны квадрата и в тот момент, когда элемент формы numl получит фокус, значение площади будет помещено в соответствующее поле.
Обработка события Blur
Событие "потеря фокуса" (Blur) происходит в тот момент, когда элемент формы теряет фокус. В следующем варианте решения задачи вычисления происходят в тот момент, когда поле формы, содержащее данные, потеряло фокус.
Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна вычисляться в тот момент, когда элемент формы теряет фокус. HTML-код представлен в листинге 1.10.