Читать онлайн «HTML, XHTML и CSS на 100%». Страница 50

Автор Игорь Квинт

Переменные могут быть глобальными и локальными. Понятие области действия переменных тесно связано с функциями, которые являются отдельными блоками кода. Переменная, объявленная внутри функции, является локальной, и только эта функция имеет доступ к ее значению. Локальные переменные создаются и уничтожаются вместе с соответствующей функцией. Глобальные переменные должны объявляться вне функций. Такие переменные позволяют функциям обмениваться данными.

Массивы

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

Рассмотрим пример объявления и задания значений элементов массива (листинг 11.6).

Листинг 11.6. Работа с массивом

<html>

<head>

<title>Работа с массивом</title>

//Объявляем массив с 5 элементами

var stars= new Array(5);

//Задание значений элементам массива

stars[0]='Сириус';

stars[1]=' Канопус';

stars[2]=' Арктур';

stars[3]=' Капелла';

stars[4]=' Вега';

//Вывод первого элемента массива

alert(stars[0]);

//Вывод всех элементов массива

alert(stars);

</script>

</head>

<body>

</body>

</html>

Обратите внимание, что при объявлении массива количество элементов указывается в круглых скобках, а при обращении к элементу его индекс указывается в квадратных скобках. Кроме того, в языке JavaScript нумерация элементов массива начинается с нуля, поэтому первый элемент массива – stars[0].

Язык JavaScript позволяет не перечислять все элементы по одному, а сразу вывести все элементы массива. Для этого необходимо обратиться к самому массиву, в результате чего получится строка, в которой все элементы массива перечислены через запятую (рис. 11.8).

Рис. 11.8. Вывод всех элементов массива

Значения элементов массива можно задать при его объявлении, тогда не нужно указывать количество элементов в массиве (листинг 11.7).

Листинг 11.7. Инициализация массива

<html>

<head>

<title>Инициализация массива</title>

//Объявляем массив и инициализируем значения элементов

var stars= new Array('Сириус',' Канопус',' Арктур',' Капелла',' Вега');

//Вывод первого элемента массива

alert(stars[0]);

//Вывод всех элементов массива

alert(stars);

</script>

</head>

<body>

</body>

</html>

Размерность массива можно не указывать, так как язык JavaScript этого не требует. Таким образом, можно постепенно расширять массив по мере добавления данных. Более того, можно объявить элемент с индексом n, что увеличит длину массива до n+1. Узнать длину массива можно с помощью свойства length (листинг 11.8).

Листинг 11.8. Размер массива

<html>

<head>

<title>Размер массива</title>

//Объявляем массив и инициализируем значения элементов

var stars= new Array('Сириус',' Канопус',' Арктур',' Капелла',' Вега');

stars[99]='Ригель';//Создаем 100-й элемент

//Вывод размера массива

alert(stars.length);

</script>

</head>

<body>

</body>

</html>

Несмотря на то что фактически элементов в массиве шесть, длина массива равна 100 (рис. 11.9).

Рис. 11.9. Размер массива

11.3. Выражения

Выражения являются комбинациями операндов с помощью операций. Обычно в качестве операндов выступают значения и переменные, но могут выступать и другие выражения. Например, выражение 4 + 6 складывает два значения, в результате чего получается значение 10. А выражение q=5 присваивает переменной q значение 5. Если манипуляции производятся с одной величиной, то операция называется унарной, а если с двумя, то бинарной. Рассмотрим операции в JavaScript.

Операции присвоения

Одной из часто используемых операций является операция присвоения. В простейшем случае эта операция присваивает значение переменной:

a=7

Она может одновременно использоваться для нескольких переменных:

msg1=msg2="Привет"

Остальные операции присваивания являются комбинацией операции присваивания и арифметической или поразрядной операции (табл. 11.6 и 11.7).

Таблица 11.6. Комбинация с арифметическими операциямиТаблица 11.7. Комбинация с поразрядными операциями

Арифметические операции

Для работы с числами используют арифметические операции.

• Сложение – знак плюс (+). Например, 5 + 7 = 12.

• Вычитание – знак минус (-). Например, 67 – 43 = 24.

• Умножение – звездочка (*). Например, 2 * 2 = 4.

• Деление – косая черта (/). Например, 45 / 5 = 9.

• Остаток от деления – процент (%). Например, 7 % 5 = 2.

В программировании очень часто встречаются операции увеличения или уменьшения переменной на единицу, которые называются операциями инкремента и декремента. Для обозначения инкремента используется последовательность ++, а для обозначения декремента – последовательность —. Например, i++ является альтернативой выражению i=i + 1. Различают префиксную и постфиксную форму этих операций. В случае префиксной операции сначала выполняется инкремент или декремент, а затем вычисляется выражение:

i = 4

++i * 2 = 10

Если же используется постфиксная операция, то сначала вычисляется выражение, а затем производится увеличение или уменьшение переменной:

i = 4

i++ * 2 = 8

Помимо инкремента и декремента, есть еще две унарные арифметические операции: унарный плюс и унарный минус. Унарный минус изменяет знак числа, а унарный плюс преобразует операнд в число.

В листинге 11.9 демонстрируется работа с арифметическими операциями.

Листинг 11.9. Арифметические операции

<html>

<head>

<title>Арифметические операции</title>

</head>

<body>

<h2>Арифметические операции </h2>

<pre>

var i=5, z

document.write("\nПеременная i="+i+"\n");

z=i+56*2;

document.write("z=i+56*2="+z+"\n");

z=6.7*2-i;

document.write("z=6.7*2-i="+z+"\n");

z=i++ +10;

document.write("z=i++ +10="+z+"\n");

document.write("Переменная i="+i+"\n");

z=–i *4;

document.write("z=–i *4="+z+"\n");

document.write("Переменная i="+i+"\n");

z=(5+11)%8;

document.write("z=(5+11)%8="+z+"\n");

</script>

</pre>

</body>

</html>

В этом примере можно заметить, что арифметические операции подчиняются математическим правилам. Например, умножение совершается до сложения (рис. 11.10). Это выполняется за счет приоритета операций, который можно изменить, используя скобки.

Рис. 11.10. Арифметические операции

Операции сравнения

Операции сравнения используются для сопоставления операндов. В этих операциях операндами могут быть не только числа, но и строки, логические величины и объекты. В табл. 11.8 приведены все операции сравнения.

Таблица 11.8. Операции сравнения

В листинге 11.10 показана работа с операциями сравнения.

Листинг 11.10. Операции сравнения

<html>

<head>

<title>Операции сравнения</title>

</head>

<body>

<h2>Операции сравнения</h2>

<pre>

var i=5, m1="строка1";

var m2;

document.write("\nПеременная i="+i+"\n");

document.write("i>7 – ");

//Результат сравнения

document.write(i>7);

document.write("\n(3+i)>=8 – ");

//Результат сравнения

document.write((3+i)>=8);

m2="строка1"

document.write("\nПеременная m1="+m1);

document.write(", переменная m2="+m2+"\n");

document.write("m1!=m2 – ");

document.write( m1!=m2);

m2="строка2"

document.write("\nПеременная m1="+m1+", переменная m2="+m2+"\n");

document.write("m1<=m2 – ");

document.write(m1<=m2);

m2="5"

document.write("\nПеременная i="+i+", переменная m2="+m2+"\n");

document.write("i==m2 – ");

document.write(i==m2);

document.write("\ni===m2 – ");

document.write( i===m2);

document.write("\ni===5 – ");

document.write(i===5);

</script>

</pre>

</body>

</html>

В приведенном коде сравниваются переменные i = 5 и m2 = "5". Они считаются равными, но не идентичными (рис. 11.11).

Рис. 11.11. Операции сравнения

Операции над строками

Как уже говорилось, строки можно сравнивать. Кроме того, строки можно объединять с помощью операции конкатенации (+), что мы уже не раз делали. Например:

S1="Здравствуй";

S2=",";

S3="Мир!";

S=S1+S2+" "+S3;

В итоге переменная S будет содержать строку «Здравствуй, Мир!».

Благодаря автоматическому приведению типов можно объединять числа и строки:

«год „+1984=“год 1984»

Логические операции

Логические операции позволяют комбинировать выражения, возвращающие логические величины. Язык JavaScript поддерживает три логические операции.

Операция логического И (&&) возвращает true, если только оба операнда истинны. Например, (1<7)&&(3>2). При этом сначала вычисляется левый операнд. Если он ложен, то второй операнд не вычисляется, что надо учитывать. Так, в строке (3<1)&&(i++<7) операция инкремента переменной i не произойдет.