- •Листинг 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.3. Обработка значений из формы
<HTML>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Обработка значений из формы</title>
<script language="JavaScript">
<!--//
function care (a,h)
{var s=(a*h)/2;
document.write("Площадь прямоугольного треугольника равна ",s);
return s
}
//-->
</script>
<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.form1.st1.value,document.form1.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.