Самоучитель по креативному веб-дизайну. Книга 3, стр.28



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 в приведенном ниже операторе представляет собой упрощен —

Самоучитель по креативному веб-дизайну. Книга 3, стр.29

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



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, который с помощью операции логического ИЛИ проверяет, есть ли у посетителя собака или кошка:

Самоучитель по креативному веб-дизайну. Книга 3, стр.30



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

Оператор



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

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



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

Оператор



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

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



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

ПРАКТИКУМ

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

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

Самоучитель по креативному веб-дизайну. Книга 3, стр.31



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:

Самоучитель по креативному веб-дизайну. Книга 3, стр.32



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, набрав имя функции в виде оператора в сценарии или в виде части выражения. Однако иногда необходимо, чтобы браузер вызывал функцию в ответ

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

Самоучитель по креативному веб-дизайну. Книга 3, стр.33

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

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

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

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

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

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

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

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

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

тий onMouseover И onMouseout.



ПРАКТИКУМ

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

Самоучитель по креативному веб-дизайну. Книга 3, стр.34



type=»button» уа1ие=»Щелкни на мне!»

onClick=»youClickedIt()»>



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).

Самоучитель по креативному веб-дизайну. Книга 3, стр.35

В объектно-ориентированных языках (таких как JavaScript) функции (методы) зачастую соответствуют определенному объекту (например, документу, то есть Web-странице, или чему-либо на Web-странице, например, форме, кнопке или гиперссылке). Как вы узнаете чуть позже, JavaScript определяет несколько объек- тов, которые вы можете использовать в создаваемых вами сценариях. Например, JavaScript связывает объект document с вашей Web-страницей. Используя объект document, вы можете манипулировать текстом и прочими элементами (объекта- ми), содержащимися на Web-странице, с помощью JavaScript-кода.



ПРАКТИКУМ

Каждый объект JavaScript будет иметь одну или несколько функций, которые можно вызывать для выполнения определенной задачи. Чтобы вызвать функцию объекта (то есть вызвать один из методов, связанных с объектом), указывается имя объекта, после которого ставится точка (.) и имя метода (функции). Напри — мер, чтобы поместить текст на текущую Web-страницу с помощью метода write объекта document, вам потребуется включить в свой сценарий оператор JavaScript, аналогичный следующему:



document. write(«Сообщение»);



JavaScript воспринимает текущую Web-страницу как объект document, и его метод write (как следует из имени функции) записывает переданный ему текст

на Web-страницу. Следовательно, чтобы Web-браузер выполнил функцию (то есть

40 4 Глава 8. JavaScript





метод), связанную с объектом, вам нужно записать в своем сценарии вызов фун —

кции в виде имя об»ьекта. метод(). Приведенный ниже HTML-код, например, дважды вызывает метод document. write() (то есть метод write объекта document), чтобы отобразить текст «Добро пожаловать на Web-страницу с моим

Самоучитель по креативному веб-дизайну. Книга 3, стр.36



HTML & Web Design Tips & Techniques

Нижееледующий сценарий вставит в Web-страницу текст.







// Записать на Web-страницу строку текста

document. write («Добро пожаловать на Web-страницу «) ;

document. write («с моим первым JavaScript-сценарием.») ;

// — >



Если ваш Web-браузер поддерживает JavaScript, прямо перед этим

текстом вы увидите приветственное сообщение.







Рис. 8.3. Web-страница с приветственным сообщением, сгенерированным JavaScript



Обратите внимание, что сценарий в этом примере дважды вызывает метод

document. write() в связи с накладываемым издательской компанией ограниче — ниями на длину печатной строки книги. Когда вы вызываете один и тот же ме —

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

абзац в этом примере с помощью одного вызова метода document. write().

Используя метод для вставки текста в Web-страницу document. write о, обя — зательно снабжайте текст, который вы хотите отобразить, какими-то HTML-деск — рипторами форматирования. Обратите внимание, что текст во втором вызове

Глава 8. JavaScript 40 5





функции document. write() в данном примере не начинается с дескриптора.

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

Для создания текстовой строки, передаваемой методу document, writ e о, можно также использовать операции манипулирования строками JavaScript. Если

вам нужно разбить длинную текстовую строку ради форматирования, причем

так, чтобы браузер в то же время отображал ее в виде одной строки текста, вы

МОЖете ИСПОЛЬЗОВаТЬ ДЛЯ ЭТОГО НеСКОЛЬКО ВЫЗОВОВ фуНКЦИИ document. writ e () , как показано в примере ранее. Или же вы можете сделать это с помощью конка — тенации строк (+) и одного вызова функции, как показано ниже:



document. write («Добро пожаловать на Web-страницу » +

«с моим первым сценарием JavaScript.«) ;



Вызов определенной пользователем функции

JavaScript

Из предыдущего практикума вы узнали, что функции, которые пишете вы,

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

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

document. write()), записывая вызов функции в операторе JavaScript следую —

щим образом: имя объекта. метод(). Конструкция document, write (сообщение), например, дает Web-браузеру указание вызвать метод (функцию) write объекта

document И передать ему текстовую Строку сообщение.



ПРАКТИКУМ

Встроенные функции JavaScript связаны с тем или иным объектом (например,

объектом document, или Web-страницей); функции же, определенные пользовате-, лем, — нет. Поэтому вместо того, чтобы вызывать определенную пользователем

ФУНКЦИЮ Путем Обращени я К Объекту И фуНКЦИИ В ВИДе имя_рб«ьекта. имя_функ- ции(), вы вызываете созданную вами функцию, попросту помещая ее имя в опе — ратор или выражение. Например, приведенный ниже HTML-код дает Web-брау —

зеру указание вызвать определенную пользователем функцию heiioworid после

того, как он вызовет метод document. write о для вставки строки текста в теку — щую Web-страницу:





// Записать строку текста на Web-страницу

document. write(«Чтобы продолжить, щелкните на кнопке ОК.»);

// Вызвать определенную пользователем функцию JavaScript «helloWorld»

helloWorld();

// — >



Как вы, наверное, догадались, прежде чем вызывать функцию, определенную

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

40 6 Глава 8. JavaScript





мисты. называют оператор, которые определяет имя функции и перечисляет ее

операторы, объявлением (declaration) функции. В приведенных ниже HTML-ут —

верждениях показано сначала объявление функции heiioworid(), которое нахо- дится между первой парой дескрипторов сценария ( ) внутри

заголовка Web-страницы. Далее в HTML-коде показан оператор, который соб —

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









function helloWorld()

{

alert(«Привет. от моей первой JavaScript-функции!»)

return;

}

// —>







Web-страница с JavaScript-функцией

Нижеследующий сценарий выведет на экран окно сообщения.

- И!

// Записать строку текста на Web-страницу

document .write Чтобы продолжить, щелкните ОК»);

// Вызвать JavaScript-функцию helloWorld helloWorld();

// — >



Теперь, когда вы убрали окно сообщения, как отобразить его снова?

Ведь в HTML нет дескриптора цикла, с помощью которого можно было бы

дать браузеру указание прочитать HTML-код Web-страницы и выполнить

функцию снова.

Самоучитель по креативному веб-дизайну. Книга 3, стр.37

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



Вызов JavaScript-функции в обработчике события

В предыдущем практикуме вы научились вызывать (то есть выполнять опера — торы) JavaScript-функций путем записи оператора, содержащего имя функции. Можно также сделать так, что Web-браузер будет выполнять JavaScript-функцию автоматически в ответ на то или иное событие. События, на которые может реа- гировать Web-браузер, включают в себя загрузку и выгрузку Web-страницы брау- зером, щелчок или наведение курсора мыши на кнопку, гиперссылку или поле формы. Обработчик событий — это конструкция, которая добавляется в HTML — дескриптор и дает Web-браузеру указание выполнить оператор JavaScript или вызвать функцию в ответ на то или иное действие браузера или посетителя.



ПРАКТИКУМ

Например, если вы хотите, чтобы Web-браузер «что-нибудь сделал», прежде чем

выгрузить Web-страницу, добавьте в дескриптор Web-страницы обработчик

события onunioad. Обработчик события onUnioad в дескрипторе Web- страницы, определенный приведенными ниже HTML-утверждениями, будет вы — водить на экран окно сообщения, аналогичное показанному на рис. 8.4, всякий раз, когда Web-браузер покидает текущую Web-страницу:



Полезные ссылки
Случайные записи
  • 10.03.2011">Руководство по actionscript. часть 4, стр. 020
  • 07.03.2011">Руководство по actionscript. часть 4, стр. 126
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 080
  • 05.03.2011">Руководство по actionscript. часть 5, стр. 018
  • 12.01.2010">Удобная твиттер лента в блоге на jQuery
  • 03.10.2010">Как сделать матовую кожу?
  • 22.07.2011">Светодиоды
  • 09.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.137
  • 09.03.2011">Руководство по actionscript. часть 4, стр. 068
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.67
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.111
  • 13.03.2011">Руководство по actionscript. часть 3, стр. 114
  • 15.03.2011">Руководство по actionscript. часть 3, стр. 061
  • 14.03.2010">Логотипы. Где их искать?
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.39
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...