2015-05-13
302
Определение функции:
<HEAD>
<title>Использование сценария с функцией</title>
<script language="JavaScript">
<!-— //
function triangle (m, n) { return m*n/2 }
//-->
</script>
</HEAD>
Вызов функции в теле документа
<BODY>
<script>
<!-—
var a=4; h=16 var s=triangle (a,h)
document.write("При вызове функции получено значение ", s,".");
//-—>
</script>
</BODY>
Тело функции состоит лишь из оператора return, который определяет возвращаемое функцией значение. Вызов функции осуществляется в теле документа при выполнении оператора присваивания: s=triangle (a,h). Формальным параметрам m и n присваивается значение фактических параметров a и h, и выполняется тело функции. Полученное значение помещается в документ с помощью метода write.
Обработчики событий
Чаще всего приходится работать с интерактивными программами – теми, которые получают значения непосредственно от пользователя, что делает их более гибкими.
Интерактивные документы можно создавать, используя формы. Для этого введем в Форму два текстовых поля для ввода значений и кнопку при нажатии на которую будет происходить обработка событий. Кроме того, в форме создадим кнопку Вычислить. При щелчке мышью по этой кнопке мы хотим получить значение площади треугольника.
|
|
|
Действие пользователя (например, щелчок кнопкой мыши) вызывает событие. События в основном связаны с действиями, производимыми пользователем с элементами форм HTML. Обычно перехват и обработка события задается в параметрах элементов форм. Имя параметра обработки события начинается с приставки on, за которой следует имя самого события. Например, параметр обработки события Click будет выглядеть как onClick.
Значением параметра обработки события могут быть операторы языка JavaScript. В качестве значения параметра обработки события можно задать вызов функции, которая должна выполняться при возникновении события, определяемого параметром обработки события. В этом случае может быть использована следующая форма:
<FORM name="form1">
Основание: <input type="text" size=5 name="stl"><hr>
Высота: <input type="text" size=5 name="st2"><hr>
<input type="button" value=Вычислить
onClick="triangle(document. forml. stl. value, document. forml. st2. value)">
</FORM>
Обработка значений из формы
Напишем функцию, вычисляющую площадь треугольника по заданному основанию и высоте.
Изменим скрипт так, что бы функция triangle выводила результат вычислений на документ
<script language="JavaScript">
function triangle (m, n)
{var s= (m*n)/2;
document.write ("Площадь прямоугольного треугольника равна ",s);
return (s) }
</script>
В теле документа создадим форму, которая введёт значения из текстовых полей в функцию
<FORM name="form1">
|
|
|
Основание: <input type="text" size=5 name="st1"><hr>
Высота: <input type="text" size=5 name="st2"><hr>
<input type="button" value=Вычислить
onClick="triangle(document. forml. stl. value, document. forml. st2. value)">
</FORM>
</BODY>
</HTML>
Рассмотрим подробнее значение параметра обработки события, представляющего собой вызов функции triangle.
При интерпретации 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. После этого выполняется тело функции.
Передача параметров по ссылке
Ситуация изменится, когда фактическим параметром функции станет объект. В этом случае говорят, что передача параметра осуществляется по ссылке или по наименованию. Пусть тело документа описано следующим образом:
<input type="button" value=Вычислить
onClick="trianglel(forml.stl,forml.st2)">
В качестве фактических параметров в вызове функции trianglel выступают имена текстовых полей формы. При вычислении площади используются значения, введенные пользователем. Поэтому описание функции trianglel должно быть таким:
function trianglel(a, h)
{var s=(a.value * h.value)/2;
document.write("Площадь равна ",s);
return s}
Значение основания треугольника получается с помощью конструкции m.value, а высоты n.value. При этом функция должна быть записана подобным образом.
<script language="JavaScript">
<!-— //
function trianglel (a, h)
{ var s= (a.value* h.value) / 2;
document.write ("Площадь равна ",s);
return s}
//-->
</script>
Использование имени формы в качестве параметра функции
Напишем сценарий, определяющий площадь треугольника по заданному основанию и высоте. В качестве фактических параметров функции следует использовать имя формы.
Функция triangle2 имеет один параметр obj, являющийся именем формы, в которой с помощью текстовых полей задаются пользователем значения. Для того чтобы использовать в вычислениях значения, заданные с помощью формы, требуется применить конструкцию obj.sti.value, т. е. указать имя поля формы, а затем выбрать значение. Например:
