На прошлом уроке мы написали сценарий, который вычисляет площадь прямоугольника по введенным пользователем значениям длины и ширины. Также мы написали функцию, которая собственно и производит вычисление. Но что, если у нас будет несколько html-страниц, на которых нужно будет вычислять площадь прямоугольника. Нам придется написать для каждой свою функцию? Если оставить сценарий в том виде, в котором он находится сейчас, то - ДА. Но это, как вы понимаете, не очень удобно.
Разумнее написать один раз функцию и в дальнейшем использовать ее на всех html-страницах. Для этого 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>
<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();"><br><br>
Площадь прямоугольника равна <input type="text" name="res" size="10">
</form>
</body>
</html>
А код нашей функции следующий:
function areaRectangle(){
var a=document.forma1.t1.value;
var b=document.forma1.t2.value;
var s=a*b;
document.forma1.res.value=s;
}
Обратите внимание, в функции мы используем имя формы - forma1, его мы и сделаем параметром. Т.е. перепишем нашу функцию следующим образом:
function areaRectangle(obj){
var a=obj.t1.value;
var b=obj.t2.value;
var s=a*b;
obj.res.value=s;
}
Т.е мы указали, что функция должна принять в качестве параметра какой-то объект (obj) и производить все действия с ним. Нам осталось на нашей html-странице указать имя объекта:
.......
<input type="button" name="button" value="Вычислить"
onClick="areaRectangle(forma1);"><br><br>
.......
Теперь, когда нам понадобится вычислить площадь на какой-либо другой странице, нам достаточно будет вызвать функцию 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><div id="red" onClick="message('Вы щелкнули по красному квадратику');"></div></td>
<td><div id="green" onClick="message('Вы щелкнули по зеленому квадратику');"></div></td>
<td><div id="blue" onClick="message('Вы щелкнули по синему квадратику');"></div></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>
Обратите внимание, текст в параметре заключается в одинарные кавычки, а при переносе строк используется операция конкатенации строк, т.е. каждая часть заключается в одинарные кавычки и эти части соединяются оператором +. У себя вы можете не использовать конкатенацию строк, просто напишите текст в одну строку.
Думаю, на сегодня хватит, проверьте работу ваших сценариев и убедитесь, что вы поняли, как все это работает. Для тренировки напишите парочку сценариев самостоятельно, например, пусть один считает площадь круга по заданному радиусу, а другой - среднюю годовую температуру воздуха по заданным месячным температурам.
Друзья сайта
Учебник по HTML и CSS
Учебник HTML
Учебник HTML
Учебник HTML
Заработай в интернете
учебники по CSS
учебники по HTML
Заработай на сайте
учебники по PHP
Разумнее написать один раз функцию и в дальнейшем использовать ее на всех html-страницах. Для этого html-страница должна каким-то образом указать функции, какие именно значения (с какой страницы) брать для вычисления. Вот здесь нам и пригодятся параметры (те, которые указываются в круглых скобках).
Сейчас код нашей формы такой:
В качестве параметров функции можно передавать любые значения, причем их может быть несколько. Рассмотрим, например, такую задачу. У нас есть три квадратика, при щелчке по каждому должно появляться окно сообщений с указанием цвета квадратика, по которому щелкнули (пощелкайте по квадратикам ниже).
Итак, сначала на странице script.js напишем код функции, которая будет открывать окно сообщений, назовем ее "message". Как вы помните, вызов окна сообщений осуществляет стандартная функция javascript - alert, а текст сообщений мы будем передавать, как параметр, обозначим его как "m":
Осталось только оформить наши квадратики. Для этого на странице style.css напишем стили для них:
Рассмотрим еще один пример, объединяющий предыдущие. Пусть у нас есть список ягод, а при наведении мышкой на название ягоды, ее описание будет появляться в текстовом поле.
- Малина
- Черника
- Ежевика
Такая конструкция может пригодиться не на одной странице, поэтому нам потребуется два параметра: один с именем объекта (формы), второй - с описанием ягод. Параметры в таком случае записываются через запятую. Итак, наша функция будет выглядеть так:
Теперь напишем код самой страницы. Напоминаю, обработчик события, когда указатель мыши помещается над элементом, называется onMouseOver, а обработчика события, когда указатель мыши выходит за пределы элемента -onMouseOut.
Думаю, на сегодня хватит, проверьте работу ваших сценариев и убедитесь, что вы поняли, как все это работает. Для тренировки напишите парочку сценариев самостоятельно, например, пусть один считает площадь круга по заданному радиусу, а другой - среднюю годовую температуру воздуха по заданным месячным температурам.
Друзья сайта
Учебник по HTML и CSS
Учебник HTML
Учебник HTML
Учебник HTML
Заработай в интернете
учебники по CSS
учебники по HTML
Заработай на сайте
учебники по PHP
Комментариев нет:
Отправить комментарий