Июнь 2010

IIpMMep JavaScript







document. write(«Это пример JavaScript-кода!»);

// —



IIoflflep3KKa JavaScript отсутствует… Извините!

браузер с поддержкой JavaScript (например, Netscape Navigator или Internet Explorer).

Интересно, что начальный и конечный дескрипторы альтернативного воспро — изведения документа со сценарием ( ) — это нефункцио —

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



Хранение множественных значений в одной переменной с помощью массивов JavaScript

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



var ItemCountl, ItemCount2, ItemCount3, ItemCount4, ItemCount5;

var ItemPricel, ItemPrice2, Item]?rice3, ItemPrice4, ItemPrice5;

Глава 8. JavaScript 39 5





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

ПРАКТИКУМ

К счастью, JavaScript предусматривает возможность создания одной переменной, могущей содержать в себе любое число значений — массива {array). Например, чтобы создать массивы, которые смогут содержать в себе количества и цену каж —

дого наименования товара из ассортимента в 100 наименований, вам понадобят-’

ся следующие операторы:



var ItemCount = new Array(100);

var ItemPrice • new Array (100) ;

Каждый из двух этих массивов, ItemCount и ItemPrice, содержит 100 участ —

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

{index), используя следующий синтаксис: имя_массива [Индекс]. Поскольку от — счет элементов в массивах JavaScript начинается с нуля, первый элемент массива

имеет индекс 0. Следовательно, чтобы сохранить цену и количество товара 1, вам нужно будет написать что-то вроде



ItemCount[0] = 5;

ItemPrice[0] = 125.50;



Аналогично, количество и цену товара 100 вы бы сохранили в элементе мас — сива с индексом 99 с помощью следующих операторов:

ItemCount[99] = 10;

ItemPrice[99] = 89.95;



Принятие сценарием решений и выполнение соответствующей обработки

Оператор if позволяет сценариям произвести проверку и затем выполнять операторы, основываясь на результате проверки. Проверку оператор if обычно

выполняет с помощью операции сравнения JavaScript. Если результатом провер — ки является true, сценарий выполняет операторы, идущие после if. Если же ре —

зультат проверки — false, сценарий игнорирует (пропускает) следующий опера — тор. Формат оператора if выглядит следующим образом:



if (условие)

оператор;



ПРАКТИКУМ

Обратите внимание, что после if (условие), с которых начинается оператор

if, точка с запятой не ставится, поскольку оператор if продолжается на следую —

щей строке. В приведенном ниже сценарии определена функция checkieo, в которой оператор if используется для сравнения значения, хранящегося в пере —

39 6 Глава 8. JavaScript





менной Age (возраст), со значением 18. Если возраст больше или равен 18, сцена —

рий выдаст посетителю сообщение. В противном же случае, если значение меньше

18, сценарий просто возвращает управление оператору, вызвавшему функцию:



function checkl8()

{

var Age = 25;

i f (Age >= 18)

alert(«Пожалуйста, зарегистрируйтесь в списках избирателей на сайте

www. VoterRegistration. com»);

return;

}

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

i f (Age >= 18)

alert(«Пожалуйста, зарегистрируйтесь в списках избирателей на сайте

www. VoterRegistration. com»);



Чтобы сценарий выполнял несколько операторов, когда условие истинно, операторы потребуется сгруппировать между левой и правой фигурными скобка —

ми ({ }). Операторы внутри фигурных скобок формируют составной оператор,

как показано ниже: —



if (Password!= «Secret»)

{

alert(«Неверный пароль»);

window. location = «htdocs/InvalidPassword. htm»

}



ПРИМЕЧАНИЕ Важно не столько помнить термины «простой оператор» и «составной опе —

ратор», сколько знать, что связанные между собой операторы следует группировать внутри пары фигурных скобок ({ }) .



В начале данного практикума вы с помощью оператора if определяли, был

ли возраст посетителя больше или равным 18. Если условие было истинным,

сценарий выводил на экран сообщение для пользователя. Если условие было

ложным, то есть возраст посетителя был меньше 18, сценарий не выводил на эк — ран никакого сообщения, а просто завершался. В большинстве случаев вам нуж —

но будет задавать в сценариях один набор операторов, который будет выполнять- ся, когда условие истинно, и второй набор, выполняющийся тогда, когда условие ложно. Для того, чтобы задать операторы, которые будут выполняться в случае, если условие ложно, нужно включить в сценарий оператор else. Формат опера — тора els e следующий:



if (условие)

оператор; else оператор;

Глава 8. JavaScript 39 7





В приведенном ниже сценарии функция checkie o изменена так, что в ней

для проверки того, больше или равно ли значение переменной Age восемнадца —

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

телю «прилежно учиться и получать хорошие оценки»:



function checkl8()

{

var Age = 15;

if (Age >= 18)

alert(«He забудьте проголосовать!»);

else

alert («Учись прилежно и получай хорошие оценки!11) ;

return;

}

Выше в этом практикуме вы использовали оператор if-eis e для выполнения одного набора операторов, когда условие истинно, и другого набора операторов, если условие ложно. Однако существуют случаи, когда вашему сценарию нужно будет проверить несколько связанных между собой условий. Например, предполо — жим, вашему сценарию нужно определить телефонный код посетителя. Чтобы это сделать, сценарий должен сделать проверку на несколько различных городов. Серия операторов if-eis e в приведенном ниже операторе представляет собой упрощен —

ный пример обработки, которую в этом случае может выполнять ваш сценарий:



if (City == «Нью-Йорк»)

AreaCode =212;

else if (City == «Хьюстон»)

AreaCode = 281;

else if (City == «Феникс»)

AreaCode = 602;

else if (City == «Сиэттл»)

AreaCode = 206;

else. *

AreaCode =0 ; // Программе не известен телефонный код города

Когда сценарий выполняет первый оператор if, он проверяет, является ли го — род Нью-Йорком. Если это так, сценарий присваивает переменной AreaCode значение 212. Если город — не Нью-Йорк, сценарий выполняет els e if, чтобы проверить, является ли город Хьюстоном. Такую обработку сценарий будет вы- полнять для каждого города до тех пор, пока не найдет соответствующего города или не дойдет до последнего оператора else. Если сценарий не найдет соответ —

ствующего города, он присвоит переменной AreaCode значение 0.



Принятие решений на основании двух или более условий

По мере усложнения ваших сценариев, вам иногда будет приходиться прове — рять более одного условия за раз. Например, ваш сценарий может проверять, со- ставляет ли возраст посетителя больше 20 и меньше 50 лет. Или же вы можете

39 8 Глава 8. JavaScript





проверять, есть ли у посетителя собака или кошка. Для выполнения подобных

действий вы будете пользоваться операцией логического И (&&) и операцией ло —

гического ИЛИ (| |) . Если в своем сценарии вы используете операцию логичес —

кого И или логического ИЛИ для проверки более чем одного условия, каждое условие необходимо заключить в скобки, как в приведенном ниже операторе if, который с помощью операции логического ИЛИ проверяет, есть ли у посетителя собака или кошка:

if ((у_посетителя__есть__собака) | | (у_посетителя есть кошка))

Оператор



Аналогично, в следующем операторе операция логического И используется для

определения того, находится ли возраст посетителя в промежутке от 20 до 50:



if ((возрас т >= 20) && (возрас т

Оператор



При использовании операции логического И (&&), для того, чтобы все усло — вие считалось истинным, все условия внутри оператора должны быть истинны — ми. Если какое-либо из условий ложно, все условие становится ложным. Напри- мер, если возраст посетителя не больше или не равен 20, приведенное выше условие ложно. Подобным образом, если возраст посетителя больше 50, условие ложно. Чтобы условие было истинным, посетителю должно быть 20 лет (или старше) и 50 лет (или моложе).

Чтобы условие с операцией логического ИЛИ считалось истинным, только одно условие должно быть истинным. Например, если у посетителя есть собака, приведенное выше условие истинно. Если у посетителя есть кошка, условие ис — тинно. Точно так же, если у посетителя есть и собака, и кошка, условие истинно. Единственный случай, когда условие будет ложно, — если у посетителя нет ни соба — ки, ни кошки; тогда оба условия ложны и условие в целом считается ложным.



Выполнение кода, когда условие не истинно

ПРАКТИКУМ

Когда в ваших сценариях используется проверка на определенные условия, иног —

да нужно, чтобы сценарий выполнил определенные операторы, когда условие ис — тинно. Подобным образом может понадобиться, чтобы сценарий выполнил на — бор операторов, когда условие не истинно. Знак JavaScript-операции НЕ — восклицательный знак (!) — позволяет сценарию проверить, является ли условие неистиным. Например, приведенный ниже оператор проверяет отсутствие авто — мобиля у посетителя:

i f (!Есть__автомобиль)

Оператор



Операция НЕ преобразует ложное условие в истинное и истинное условие в ложное. Например, предположим, что у посетителя нет автомобиля. Переменная

Есть_автомобиль будет содержать значение false. Выполняя условце с операци —

ей НЕ, JavaScript берет текущее значение переменной (false) и применяет опе — рацию НЕ. Операция НЕ делает ложное значение истинным. Тогда условие в

Глава 8. JavaScript 39 9





целом считается истинным, и сценарий выполняет соответствующий оператор. В

приведенном ниже операторе с помощью операции НЕ проверяется, не равен ли

парОЛЬ посетителя «Secret»!



if (Password!= «Secret»)

Оператор

Повторение операторов определенное число раз

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

для чего используется оператор for. При работе с оператором for необходимо

задать переменную, называемую управляющей переменной (control variable), кото- рая подсчитывает, сколько раз сценарий выполнил цикл. Например, в приведенном

ниже цикле for переменная count используется для подсчета того, сколько раз сце — нарий выполнил цикл, так, чтобы обработка остановилась на пятой итерации:



for (Count = 1; Count

Оператор



РАКТИКУМ

Оператор for состоит из четырех частей: инициализации, проверяемого условия, операторов, которые будут повторяться, и инкремента. Сначала оператор

Count = 1; присваивает управляющей переменной начальное значение. Эту ини —

циализацию оператор for выполняет только один раз, когда цикл начинается в

первый раз. Затем цикл проверяет условие count условие истинно, цикл for выполняет следующие далее операторы. Если условие ложно, цикл за- вершается, и сценарий продолжает выполнение с первого оператора, идущего

после цикла. Если условие истинно и цикл for выполняет оператор, цикл инк —

рементирует переменную Count с помощью оператора count++. И, наконец, сце —

нарий проверяет условие count условие по-прежнему истинно, сце — нарий выполняет операторы, и процесс инкрементирования и проверки

переменной count повторяется. Приведенный ниже сценарий создает функцию

oneToFive(), в которой цикл for служит для вывода на экран значений от 1 до 5:



function oneToFive()

{

var Count;

for (Count = 1; Count

alert(«Count = » + Count);

}

В цикле for ваши возможности не ограничиваются инкрементированием зна- чения на 1. Следующий цикл for, например, выводит на экран каждое пятое число в интервале от 0 до 25:

for (Count = 1; Count

alert(«Count = » + Count);

Обратите внимание на оператор, с помощью которого цикл for инкрёменти —

рует переменную Count:



Count += 5 ;

40 0 Глава 8. JavaScript





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

ной count значение 5, можно сделать так:



Count = Count + 5 ;



Во-вторых, JavaScript позволяет добавить значение 5 к переменной count с помощью следующей сокращенной записи:



Count += 5;



Поскольку так писать проще, программисты обычно используют в циклах та — кую сокращенную запись. При использовании цикла for JavaScript не ограничи —

вает возможности вашего сценария ведением счета в прямом направлении. При- веденный ниже цикл for, например, отсчитывает в обратном порядке от 10 до 1:



for (Count = 10; Count >= 1; Count—)

Оператор

Наконец, JavaScript также не требует использования в качестве управляющих переменных цикла for исключительно целых чисел. В приведенном ниже опера- торе, например, использовано значение с плавающей точкой, которое цикл ини — циализирует значением 0.0 и затем инкрементирует на 0.10:

for (Value = 0.0; Value

Оператор



Повторение операторов, пока условие истинно

В предыдущем практикуме вы узнали, что JavaScript-цикл for дает возмож — ность сценариям повторять один или несколько операторов определенное число раз. В ситуациях, когда вашим сценариям нужно выполнять оператор (или опе — раторы), пока выполняется определенное условие, но не обязательно определен — ное число раз, можно использовать JavaScript-цикл while. В общем случае фор- мат цикла while выглядит следующим образом:

while (Условие);

оператор; /





Когда сценарий обнаруживает цикл while, он сперва проверяет заданное усло — вие. Если условие истинно, сценарий выполняет операторы цикла while. После того, как последний оператор цикла выполнен, цикл while снова проверяет ус — ловие. Если условие по-прежнему истинно, операторы цикла будут повторены и процесс продолжится. Когда условие, наконец, станет ложным, цикл завершит — ся, и сценарий продолжит выполнение с первого оператора, идущего после цик — ла. В приведенном ниже сценарии цикл while используется для того, чтобы предлагать посетителю вводить пароль повторно, пока не будет введен пароль «Secret»:

Глава 8. JavaScript 401





function getPassword()

{

var Password = «»; // Присвоить начальное значение, не равное «Secret»

while (Password!= «Secret»)

Password = prompt («Пароль», «») ;

alert(«Bbi вошли!»);

}

Реагирование на события JavaScript

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

на событие, которое происходит через некоторое время после загрузки страницы браузером. Например, у вас может быть функция «выхода», которую браузер дол — жен будет выполнить, когда посетитель щелкнет на гиперссылке, чтобы перейти

на другую страницу. Подобным образом, вы можете пожелать, чтобы, когда посе — титель щелкает на кнопке «Отправить» формы, браузер вызывал функцию про- верки формы.

К счастью, JavaScript предусматривает ряд обработчиков событий {event

handlers), которые вы можете вставлять в HTML-дескрипторы, чтобы отслеживать

те или иные события. Когда происходит событие, отслеживающий его обработ — чик даст Web-браузеру указание выполнить оператор или функцию, которую вы

привязали к событию. В таблице 8.6 приводится общий обзор событий

JavaScript и действий, их инициирующих.

Если вы хотите, чтобы обработчик события JavaScript дал Web-браузеру указа — ние выполнить функцию, объявленную на странице, вы должны привязать функ- цию к определенному обработчику, отслеживающему возникновение события.

Например, если вы хотите поприветствовать посетителя сообщением в диалого —

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

тий onMouseover И onMouseout.



ПРАКТИКУМ

Чтобы присвоить событию некоторую JavaScript-функцию, выберите обработчик для этого события и примите решение, какой из объектов Web-страницы будет от — слеживать ваш обработчик. Затем добавьте обработчик события в HTML-дескрип — тор, с помощью которого объект был вставлен в Web-страницу. Предположим, на- пример, вы поместили на Web-страницу кнопку с меткой «Щелкни на мне!» с помощью следующего кода:

40 2 Глава 8. JavaScript





Глава 8. JavaScript 40 3







NVBizNet. com



Поместив обработчик события onMouseover в дескриптор гиперссылки, вы поручаете обработчику события onMouseover давать Web-браузеру указание

выполнить функцию youAreOnito всякий раз, когда посетитель наводит курсор мыши на текст гиперссылки. Говоря короче, вы связываете событие с тем или иным объектом на Web-странице, помещая обработчик события в дескриптор

объекта следующим образом: обработчик события= «функция о» . Или же, если вы хотите вместо вызова функции выполнить один или несколько операторов, вставьте в HTML-дескриптор объекта обращение к обработчику события в виде

обработчик_события=»операторы».



Выполнение операторов JavaScript в теле

Web-страницы



Как вы уже знаете, функция JavaScript — это набор операторов, которые вы — полняют определенную задачу. Существует два типа функций: функции, создава — емые вами, и функции, предоставляемые JavaScript. Тогда как функции, создавае —

мые вами, носят название функций, определенных пользователем (user-defined

functions), стандартные функции JavaScript называются встроенными функциями

(built-in functions). Читая материалы по JavaScript, вы заметите, что программис — ты (в особенности те из них, которые имеют дело с объектно-ориентированными языками программирования) также называют функции методами (methods).