2015-05-30
457
Мы написали сценарий, который вычисляет площадь прямоугольника по введенным пользователем значениям длины и ширины. Также мы написали функцию, которая собственно и производит вычисление. Но что, если у нас будет несколько html-страниц, на которых нужно будет вычислять площадь прямоугольника. Нам придется написать для каждой свою функцию? Если оставить сценарий в том виде, в котором он находится сейчас, то - ДА. Но это, как вы понимаете, не очень удобно.
Разумнее написать один раз функцию и в дальнейшем использовать ее на всех html-страницах. Для этого html-страница должна каким-то образом указать функции, какие именно значения (с какой страницы) брать для вычисления. Вот здесь нам и пригодятся параметры (те, которые указываются в круглых скобках).
Сейчас код нашей формы такой:
<html>
<head>
<title>javascript параметры</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="forma1">
Введите длину прямоугольника <input type="text" name="t1" size="10"><br><br>
|
|
|
Введите ширину прямоугольника <input type="text" name="t2" size="10"><br><br>
<input type="button" name="button" value="Вычислить" onClick="areaRectangle(forma1);"><br><br>
Площадь прямоугольника равна <input type="text" name="res" size="10">
</form>
</body>
</html>
А код нашей функции следующий:
function areaRectangle(obj){
var a=obj.t1.value;
var b=obj.t2.value;
var s=a*b;
obj.res.value=s;
}
Теперь, когда нам понадобится вычислить площадь на какой-либо другой странице, нам достаточно будет вызвать функцию areaRectangle(), а в скобках указать имя формы.
В качестве параметров функции можно передавать любые значения, причем их может быть несколько. Рассмотрим, например, такую задачу. У нас есть три квадратика, при щелчке по каждому должно появляться окно сообщений с указанием цвета квадратика, по которому щелкнули.
Итак, сначала на странице script.js напишем код функции, которая будет открывать окно сообщений, назовем ее "message". Вызов окна сообщений осуществляет стандартная функция javascript - alert, а текст сообщений мы будем передавать, как параметр, обозначим его как "m":
function message(m){
alert (m);
}
Теперь в html-странице напишем код самих квадратиков:
<html>
<head>
<title>javascript параметры</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<table><tr>
<td id="red" onClick="message('Вы щелкнули по красному квадратику');"></td>
<td id="green" onClick="message('Вы щелкнули по зеленому квадратику');"></td>
<td id="blue" onClick="message('Вы щелкнули по синему квадратику');"></td>
|
|
|
</tr></table>
</body>
</html>
Мы указали, что при щелчке по нашим квадратикам должна срабатывать функция "message", а в качестве параметров указали текст нужных сообщений (они будут подставляться вместо параметра "m" при обращении к функции).
Осталось только оформить наши квадратики. Для этого на странице style.css напишем стили для них:
#red, #green, #blue{
width:100px;
height:100px;
margin:10px;
}
#red{
background:red;
}
#green{
background:green;
}
#blue{
background:blue;
}
Рассмотрим еще один пример. Пусть у нас есть список ягод, а при наведении мышкой на название ягоды, ее описание будет появляться в текстовом поле.
Такая конструкция может пригодиться не на одной странице, поэтому нам потребуется два параметра: один с именем объекта (формы), второй - с описанием ягод. Параметры в таком случае записываются через запятую. Итак, наша функция будет выглядеть так:
function showDesc(obj, n){
obj.desc.value=n;
}
где desc - имя текстового поля для вывода описаний. Эта функция будет срабатывать, когда на название ягоды наведен курсор, но нам понадобится еще одна функция, которая будет очищать текстовое поле, когда курсор выйдет за пределы названия. Назовем ее "delete":
function delet(obj){
obj.desc.value= "";
}
Теперь напишем код самой страницы. Напоминаю, обработчик события, когда указатель мыши помещается над элементом, называется onMouseOver, а обработчика события, когда указатель мыши выходит за пределы элемента - onMouseOut.
<html>
<head>
<title>javascript параметры</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form name="forma2">
<textarea name="desc" cols=45 rows=4></textarea>
</form>
<ul>
<li onMouseOver="showDesc(forma2,'Малина обыкновенная — кустарник с многолетним корневищем,'+
' из которого развиваются двухгодичные надземные стебли высотой до полутора метров.');" onMouseOut="delet(forma2);">
Малина
</li>
<li onMouseOver="showDesc(forma2,'Черника — кустарничек высотой 15—30 см. Ветви отходят'+
' от главного стволика под острыми углами.');" onMouseOut="delet(forma2);">
Черника
</li>
<li onMouseOver="showDesc(forma2,'Ежевика — название нескольких видов растений из рода Rubus'+
' семейства Розовые.');"onMouseOut="delet(forma2);">
Ежевика
</li>
</ul>
</body>
</html>
Обратите внимание, текст в параметре заключается в одинарные кавычки, а при переносе строк используется операция конкатенации строк, т.е. каждая часть заключается в одинарные кавычки и эти части соединяются оператором +. У себя вы можете не использовать конкатенацию строк, просто напишите текст в одну строку.
