Техника Web-дизайна для студента
Локальные и глобальные переменные
Локальной называется переменная, которая доступна только в той функции, в которой она объявлена. Изменение значений локальной переменной не повлечет за собой изменение значений переменных с такими же именами в других частях программы. Объявить локальную переменную можно, используя оператор var.
Например:
Function F1()
{
Var xl=0, у1=5, shag, Z }
Внутри функции F1 () объявлены четыре локальные переменные, причем двум из них одновременно присвоены начальные значения.
Глобальной называется переменная, значение которой доступно в любом месте программы, включая функции. Если внутри функции изменено значение глобальной переменной и после этого вызвана на выполнение другая функция, в которой используется та же переменная, то в ней она будет иметь измененное значение. Глобальная переменная будет объявлена после того, как оператором присваивания ей будет присвоено определенное значение, причем это может быть сделано в любом месте программы, включая функции. Кроме того, объявить глобальную переменную можно также, используя оператор var, но только вне функций. Например:
<SCRIPT> var xl, у1=5
R=10
Function F2()
{FL=0 }
</SCRIPT>
В примере объявлены четыре глобальные переменные: две — оператором var, а две другие (r и fl) — после присваивания им значений оператором присваивания, причем одна из них (fl) объявлена внутри функции.
Практическое использование локальных и глобальных переменных покажем на следующем примере (листинг 8.4).
Листинг 8.4, Использование локальных и глобальных переменных
<html>
<head>
<title>JIc>KanbHbie и глобальные nepeMeHHbie</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script>
Var X=0
Function fctl()
{X++
F1.textfield. value=X
Function fct2()
{var X=50
F1.textfield2.value=X
Function fct3()
{X=X+Y
F1.textfield3.value=X
</script>
</head>
<body>
<form name="fl" method="post" action="">
<table width="300" border="0">
<tr>
<td height="40" align="center">
<input name="textfield" type="text" size="6">
</td>
<td align="center">
<input name="textfield2" type="text" size="6">
</td>
<td align="center">
<input name="textfield3" type="text" size="6">
</td> </tr>
<tr>
<td height="50" align="center">
<input type="button" name="Buttonl" value="Кнопка 1" onClick=fctl()>
</td>
<td align="center">
<input type="button" name="Button2" value="Кнопка 2" onClick=fct2()>
</td>
<td align="center">
<input type="button" name="Button3" value="Кнопка 3" onClick=fct3() onMouse0ver=fct4()>
</td>
</tr>
</table>
<script> function fct4()
{Y=300}
</script>
</form>
</body>
</html>
В программе две глобальные переменные: х (объявлена оператором var вне функций) и Y (объявлена внутри функции f Ct4 ( ) оператором присваивания). Следует обратить внимание на то, что функция fct4 () оторвана от остальной части программы. Внутри функции fct2 () имеется локальная переменная х (объявлена оператором var), т. е. переменная с тем же именем, что и одна из глобальных переменных.
Для демонстрации результатов работы программы в документе созданы три текстовых поля и три кнопки, которые упорядочены с помощью таблицы.
Откроем документ в окне браузера. Щелкнем несколько раз по Кнопке 1. В текстовое поле над кнопкой будут выводиться числа 1, 2, 3, ... . Это выполняется функцией fctl(), в которой глобальная переменная х, обнуленная в начале программы, увеличивается на 1 при каждом вызове функции. Щелкнем по Кнопке 2. В текстовом поле над кнопкой появится число 50, т. е. значение локальной переменной х функции £сЬ2 о.
Повторные щелчки не изменят результата. Вновь щелкнем несколько раз по Кнопке 1. В поле над кнопкой продолжится вывод следующих по порядку чисел. Как видим, изменение значения локальной переменной х никак не повлияло на значение глобальной переменной х.
Теперь подведем курсор к Кнопке 3. Мы пока не видим результата действия, но в тексте документа предусмотрен вызов функции £сЫ (), в которой глобальной переменной ¥ присваивается значение 300. Чтобы убедиться в этом, щелкнем по Кнопке 3, и в текстовом поле над кнопкой появится сумма значений глобальных переменных х и ¥. Повторные щечки по Кнопке 1 будут приводить к изменению значений переменной X на 1, а по Кнопке 3 — на 300. Один из промежуточных результатов можно увидеть на рис. 8.3.
Рис. 8.3. Промежуточный результат изменения значений глобальной переменной X (поля над кнопками 1 и 3) и локальной переменной X (поле над кнопкой 2) |