Техника Web-дизайна для студента
Подпрограммы-функции с параметрами
Эффективность применения механизма параметров рассмотрим на конкретном примере. В документе расположим таблицу, содержащую одну строку и три столбца. В каждую ячейку таблицы поместим определенный текст. При перемещении указателя мыши в ячейку таблицы должен изменяться цвет фона и текста
В ячейке, а при переходе в другую ячейку или за пределы таблицы цвет фона и текста должен восстанавливаться. Текст такого документа будет иметь следующий вид (листинг 8.7).
Листинг 8.7. Пример использования нескольких функций без параметров для изменения цвета фона и текста в ячейках таблицы
<html>
<head>
Ctitle-^функция без napaMeTpOB</title>
<SCRIPT>
Function PRl_Color ()
{
SI. style. color="red"
51. style. backgroundColor="cyan"
Function PR2_Color ()
52. style. color="red"
52. style. backgroundColor="cyan"
Function PR3_Color ()
{
53. style. color="red"
S3.style. backgroundColor="cyan"
Function PRl_Black ()
SI. style. color="black"
51. style. backgroundColor="white"
Function PR2_Black ()
{
52. style. color="black"
S2.style. backgroundColor="white"
Function PR3_Black ()
{
S3.style. color="black"
S3.style. backgroundColor="white"
}
</SCRIPT>
</head>
<body>
<table border="l" width="400">
<tr>
<td valign="top" id="Sl" onMouseMove=PRl_Color() onMouse - Out=PRl_Black()>
Завтрак
<ul>
<И>макароны с сыром</И>
<И>какао</И>
<И>пирожок с капустой</И>
</ul>
</td>
<td width=33% valign="top" id="S2" onMouse - Move=PR2_Color() onMouse0ut=PR2_Black()>
Обед
<ul>
<И>винегрет</И>
<И>борщ</И>
<И>бифштекс</И>
<li>KOMnOT</li>
</ul>
</td>
<td width=33% valign="top" id="S3" onMouse - Move=PR3_Color() onMouse0ut=PR3_Black()>
Ужин
<ul>
<И>овощное pary</li>
<И>кефир</И>
</ul>
</^с!>
</Ьг>
</ЬаЫе>
</body>
</11Ьп1>
Из текста документа видно, что для решения поставленной задачи нам пришлось использовать шесть функций. Функция РЕ1_Со1ог() изменяет цвет фона и текста в ячейке с индивидуальным именем 31, а функция РЕ1_в1аск() восстанавливает белый цвет фона и черный цвет текста в этой же ячейке. Соответственно первая из них вызывается на выполнение в случае события опМошеМоуе по отношению ячейке 31, а вторая — события опМошеОи!:. Очевидно, что остальные четыре функции имеют то же предназначение, но по отношению к ячейкам 32 и 33. Нетрудно также заметить, что содержимое всех шести функций в значительной степени совпадает, а отличие состоит либо в именах ячеек, либо в задаваемых цветах текста и фона. Используя механизм параметров можно все шесть функций заменить одной, а нужные имена ячеек и значения цветов передавать с помощью параметров. Вот как будет выглядеть текст такого документа (листинг 8.8).
<html>
<head>
Ctitle-^функция с napaMeTpaMn</title>
<SCRIPT>
Function PR1(PN, col, bgcol)
PN. style. color = col
PN. style. backgroundColor = bgcol
</SCRIPT>
</head>
<body> ctable border="l" width="400">
<tr>
<td valign="top" id="Sl" onMouseMove=PRl(SI,"red","cyan")
OnMouseOut=PRl(SI,"black","white")>
Завтрак
<ul>
<И>макароны с сыром</И>
<И>какао</И>
<И>пирожок с капустой</И>
</ul>
</td>
<td width=33% valign="top" id="S2" onMouse- Move=PRl(S2,"red","cyan") onMouseOut=PRl(S2,"black","white")>
Обед
<ul>
<1i>винегреt</1i>
<И>борщ</И>
<И>бифштекс</И>
<li>KOMnOT</li>
</ul>
</td>
<td width=33% valign="top" id="S3" onMouse- Move=PRl(S3,"red","cyan") onMouseOut=PRl(S3,"black","white")>
Ужин
<ul>
<И>овощное pary</li>
<И>кефир</И>
</ul>
</td>
</tr>
</table>
</body>
</html>
Единственная функция pri имеет три параметра: pn — имя объекта, col — цвет шрифта, bgcoi — цвет фона. Параметры в заголовке функции называются параметрами-переменными. Вызывая
Функцию на выполнение, в круглых скобках после ее имени необходимо перечислить параметры-значения, которые мы хотим присвоить параметрам-переменным в заголовке функции. Например, при вызове функции onMouseMove=PRl (32, "red", "cyan") , имя объекта PN внутри функции будет присвоено значение 32, а переменным col и bgcol будут присвоены значения "red" и "суап". Так как "red" и "суап" — строки символов, то они должны записываться в кавычках. Таким образом, использование механизма параметров позволило значительно сократить объем программы, сделать ее более наглядной и облегчить поиск и устранение возможных ошибок.
