Листинг 1.3. Обработка значений из формы

<HTML>

<HEAD>

<title>Обработка значений из формы</title>

<!--//

function care (a, h)

{ var s= (a* h) / 2;

document.write ("Площадь прямоугольного треугольника равна ",s);

return s

}

//-->

</script>

</HEAD>

<BODY>

<Р>Пример сценария со значениями из формы</Р>

Основание: <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>

<Р>Вычисление площади прямоугольного треугольника</Р>

Основание: <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. Приведем описание документа со сценарием полностью.