ПАРАМЕТРЫ ФУНКЦИИ

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

А код нашей функции следующий:

Обратите внимание, в функции мы используем имя формы - forma1, его мы и сделаем параметром. Т.е. перепишем нашу функцию следующим образом:

Т.е мы указали, что функция должна принять в качестве параметра какой-то объект (obj) и производить все действия с ним. Нам осталось на нашей html-странице указать имя объекта:

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

ПРИМЕР 3. У нас есть три квадратика, при щелчке по каждому должно появляться окно сообщений с указанием цвета квадратика, по которому щелкнули.

Итак, сначала на странице script.js напишем код функции, которая будет открывать окно сообщений, назовем ее "message". Как вы помните, вызов окна сообщений осуществляет стандартная функция javascript - alert, а текст сообщений мы будем передавать, как параметр, обозначим его как "m":

Теперь в html-странице напишем код самих квадратиков:

Мы указали, что при щелчке по нашим квадратикам должна срабатывать функция "message", а в качестве параметров указали текст нужных сообщений (они будут подставляться вместо параметра "m" при обращении к функции). Осталось только оформить наши квадратики. Для этого на странице style.css напишем стили для них:

Все, осталось только проверить работу сценария в браузере.

ПРИМЕР 4. Пусть у нас есть список ягод, а при наведении мышкой на название ягоды, ее описание будет появляться в текстовом поле.

Такая конструкция может пригодиться не на одной странице, поэтому нам потребуется два параметра: один с именем объекта (формы), второй - с описанием ягод. Параметры в таком случае записываются через запятую. Итак, наша функция будет выглядеть так:

где desc - имя текстового поля для вывода описаний. Эта функция будет срабатывать, когда на название ягоды наведен курсор, но нам понадобится еще одна функция, которая будет очищать текстовое поле, когда курсор выйдет за пределы названия. Назовем ее "delete":

где пробел в одинарных кавычках означает пустую строку.

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

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