Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Советы программисту:
Отношения с заказчиком станут менее формальными, если программа начисления зарплаты вместо 'ИТОГО' будет печатать 'ИГОГО'

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

В этом сезоне среди программистов популярны красные рубашки под цвет глаз.

  Моя группа в контакте:



JavaScript, параметры функции

На прошлом уроке мы написали сценарий, который вычисляет площадь прямоугольника по введенным пользователем значениям длины и ширины. Также мы написали функцию, которая собственно и производит вычисление. Но что, если у нас будет несколько html-страниц, на которых нужно будет вычислять площадь прямоугольника. Нам придется написать для каждой свою функцию? Если оставить сценарий в том виде, в котором он находится сейчас, то - ДА. Но это, как вы понимаете, не очень удобно.

Разумнее написать один раз функцию и в дальнейшем использовать ее на всех html-страницах. Для этого html-страница должна каким-то образом указать функции, какие именно значения (с какой страницы) брать для вычисления. Вот здесь нам и пригодятся параметры (те, которые указываются в круглых скобках).

Сейчас код нашей формы такой:

<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="cascade.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>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="cascade.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>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="cascade.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body> 
<form name="forma2">
        <textarea name="desc" cols=45 rows=3></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>

Обратите внимание, текст в параметре заключается в одинарные кавычки, а при переносе строк используется операция конкатенации строк, т.е. каждая часть заключается в одинарные кавычки и эти части соединяются оператором +. У себя вы можете не использовать конкатенацию строк, просто напишите текст в одну строку.

Думаю, на сегодня хватит, проверьте работу ваших сценариев и убедитесь, что вы поняли, как все это работает. Для тренировки напишите парочку сценариев самостоятельно, например, пусть один считает площадь круга по заданному радиусу, а другой - среднюю годовую температуру воздуха по заданным месячным температурам.

Обратите внимание, текст в параметре заключается в одинарные кавычки, а при переносе строк используется операция конкатенации строк, т.е. каждая часть заключается в одинарные кавычки и эти части соединяются оператором +. У себя вы можете не использовать конкатенацию строк, просто напишите текст в одну строку.

Думаю, на сегодня хватит, проверьте работу ваших сценариев и убедитесь, что вы поняли, как все это работает. Для тренировки напишите парочку сценариев самостоятельно, например, пусть один считает площадь круга по заданному радиусу, а другой - среднюю годовую температуру воздуха по заданным месячным температурам.

1 2 3 4 5 6 7 8

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Наталья
с квадратами застряла. получилось после того, как в html написала не href="cascade.css", а style.css
2017-03-31 13:22

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь