Листинг 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).
Площадь квадрата
Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна вычисляться в тот момент, когда изменилось значение его стороны.
Зададим форму, в которой определены два текстовых поля: одно для длины стороны квадрата, другое для вычисленной площади. Кнопка Обновить очищает поля формы. Площадь квадрата вычисляется при возникновении события change, которое происходит в тот момент, когда значение элемента формы с именем numl изменилось, и элемент потерял фокус. HTML-код представлен в листинге 1.8.
Листинг 1.8. Реакция на событие Change
<HTML>
<HEAD>
<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>
<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.6. При нажатии на кнопку Обменять изображения меняются местами. Функция chpict вызывается как реакция на событие "щелчок по кнопке" Обменять. Изображения задаются в документе с помощью тегов. Значение параметра src определяет имя файла, в котором хранится изображение. Переменная 1 служит для того, чтобы запомнить имя файла, который связан с первым изображением. Оператор присваивания d.pmi.src=d.pm2.src обеспечит загрузку второго изображения вместо первого. И, наконец, со вторым тегом изображения будет связан тот файл, который первоначально относился к первому изображению. В результате описанных действий изображения в документе будут переставлены. HTML-код документа, осуществляющего обмен изображений, имеет вид, приведенный в листинге 1.12.
|
|
|
Рис 1.6. Обмен двух изображений |
