Июнь 2010

HTML & Web Design Tips & Techniques

Этот текст набран прямо в Web-странице —

Глава 8. JavaScript 383







document. write(«Эта строка текста вставлена » +

«оператором JavaScript.

«);

alert(«Мой первый оператор JavaScript говорит: \»Привет, МИР\»!»);

// —





внимание, что Web-браузер выводит на экран окно сообщения

JavaScript



и ждет, прежде чем отобразить текст, идущий после сценария,



внедренного в тело страницы.

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

страницей). Таким образом, браузер «записывает» заключенный в кавычки текст

38 4 Глава 8. JavaScript





в скобках на текущую Web-страницу (в предыдущем примере — «Эта строка

текста вставлена оператором JavaScript.»).

Текст, «написанный» оператором JavaScript, отображается на Web-странице между первым и вторым абзацами текста, поскольку в этой точке HTML-кода

Web-страницы браузер находит вызов функции document. writ;e(). Переходя к следующему оператору JavaScript, Web-браузер видит вызов функции вывода окна

предупреждения alert( ) и отвечает на него выводом на экран окна сообщения с

текстом «Мой первый оператор JavaScrip t говорит: «Привет, МИР!»".

Поскольку окно сообщения дает браузеру указание ждать, браузер не будет

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

тель не щелкнет на кнопке «ОК» в нижней части окна сообщения.

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

страницы сверху вниз, слева направо. Следовательно, если вы хотите, чтобы в данном примере Web-браузер выполнил еще один набор операторов после выво —

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



Сокрытие сценариев от браузеров, не поддерживающих JavaScript

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

HTML & Web Design Tips & Techniques



document. bgColor=»lightyellow»;

document. fgColor=»magenta»;







Чтобы браузеры, не поддерживающие JavaScript, не выводили на экран опера- торы сценария, заключите операторы сценария между начальным и конечным HTML-дескрипторами комментария () . Например, сценарий в вы —

шеприведенном примере нужно «закомментировать» следующим образом:

Глава 8. JavaScript 38 5









document. bgColor=»lightyellow»;

document. fgColor=»magenta»;

/ / —>

|



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

браузеры с поддержкой JavaScript игнорируют HTML-дескрипторы комментария,

когда эти дескрипторы находятся между начальным и конечным дескрипторами сценария. (Двойная косая черта (//) в строке над дескриптором —

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

щие JavaScript браузеры не принимали двойной дефис (—), с которого начинает —

ся конечный HTML-дескриптор комментария, за JavaScript-код.)



Понятие функций JavaScript

При написании кода программисты обычно группируют связанные между со —

бой инструкции (операторы) в функции. Каждая функция имеет уникальное имя

и должна выполнять одну задачу. Если бы вы, например, писали программу для

обработки текста, вы бы создали одну функцию с именем speiicheck (проверка ор — фографии), которая проверяет документ на наличие орфографических ошибок, вто —

рую функцию — PrintDocument — которая распечатывает одну или несколько копий

документа, и третью — FiieOperations — которая открывает или сохраняет файл.

Помещая операторы JavaScript в Web-документ, вы будете группировать свои операторы в функции. Например, вы можете создать одну функцию, с именем

vaiidateForm, которая проверяет, ввел ли посетитель данные правильного типа

(числовые или текст) во все обязательные для заполнения поля формы. Затем вы

можете создать вторую функцию, caicuiateSaiesTax, которая вычисляет общую стоимость всех товаров, отмеченных в форме, и умножает сумму на действующую

в регионе ставку налога с продаж. Приведенные ниже операторы, например, со —

здают функцию с именем greetvisitor, которая отображает сообщение наподо —

бие «Добро пожаловать на сайт!» в окне сообщения, как показано на рис. 8.2.



function greetvisitor()

{

aler t («Добро пожаловать на сайт!»);

return;

}

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

«Передача значений в функцию и из функции» далее в этой главе.) После имени функции и (необязательного) списка параметров вы заключаете между левой и пра — вой фигурными скобками ({}) операторы JavaScript, выполняющие задачу функции.

386 Глава 8. JavaScript





Рис. 8.2. Окно сообщения, отображенное поверх Web-страницы при помощи JavaScript-оператора из функции

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

в конце каждого оператора, вне зависимости от того, записываете ли вы операто — ры в сценарии по одному в строке или же записываете в одной и той же строке

по несколько операторов.

В конце каждой функции, перед закрывающей правой фигурной скобкой (}), ставится ключевое слово return. Оператор return — оператор возврата. Как и следует из его названия, он возвращает управление Web-браузером оператору,

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

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



HTML & Web Design Tips & Techniques



greetVisitor();

// —>



Обратите внимание, что Web-браузер выводит на экран окно сообщения

JavaScript



и ждет, прежде чем отображать текст, идущий после сценария,



внедренного в тело страницы.

или не дойдет до закрывающей фигурной скобки (}) в конце функции. Как вы

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



Передача значений в функцию и из функции

Вызывая функцию JavaScript, вы можете передать в нее значения переменных, называемых параметрами {parameters). Список параметров функции находится между скобками, стоящими после имени функции в ее объявлении. Например,

следующий код объявляет функцию с двумя параметрами — Age (возраст) и

shoesize (размер обуви):



function сотриtelQ(Age, ShoeSize)

{

Age = Age * 2 ;

alert («Удвоенный возраст = » + Age + «; размер обуви = » + ShoeSize) ;

return (Age * ShowSize) / 2;

}

Чтобы передать значения функции computeiQO («вычислить коэффициент умственного развития»), включите в вызов функции параметры, как показано ниже:



IQ = computeIQ(Years01d, 10) ; *



Вызывая computeiQO, браузер передаст функции значение переменной

Yearsoid (сколько лет) в параметре Age и число 10 через параметр ShoeSize.

Короче говоря, браузер присваивает значения параметрам функции по позиции,

то есть первое значение в вызове функции присваивается первому параметру в объявлении, второе значение — второму параметру и т. д. Следовательно, если вы

присвоите Yearsoid значение 20 и затем вызовете computeiQO, функция выве —

дет На ЭКраН ОКНО сообщения СО Следующим текстом: «Удвоенный возраст =

40; размер обуви = Ю». В отличие от функций в предыдущих примерах, computeiQO возвращает значение вызывающему ее объекту. Чтобы возвратить значение из функции, вставьте значение, которое вы хотите отправить обратно, сразу же после ключевого слова retur n (см. последнюю перед закрывающей фи — гурной скобкой (}) строку в данном примере).

38 8 Глава 8. JavaScript



ЗарезервированныесловаJavaScript

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

ли с зарезервированными словами {reserved words) JavaScript, перечень которых можно найти в таблице 8.1. Слово function, например, идентифицирует начало объявления функции, равно как слово retur n дает браузеру указание вернуться в

ту точку, в которой он вызвал функцию. Если вы попытаетесь использовать в ка —

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



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

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

ли в сценарий в течение нескольких месяцев. Чтобы поместить в JavaScript-код комментарий, поставьте две левые косые черты (//) и наберите свое примечание, как показано ниже:



// Это комментарий



Обнаружив двойную косую черту, Web-браузер игнорирует весь остальной текст на данной строке. Помимо однострочных комментариев, которые начина —

ются с двойной косой черты (//), JavaScript поддерживает также блочные ком — ментарии, которые начинаются с косой черты и звездочки (/*) и заканчиваются звездочкой и косой чертой (*/), как показано ниже:



Таблица 8.1. Зарезервированные слова JavaScript



abstract Boolean break byte

case catch char class const continue default delete

do double



else extends false final

finally float for

function goto

if implements import

in instanceof



int interface long native

new null

package private protected public return short static super



switch synchronized this

throw throws transient true

try typeof var void while with

Глава 8. JavaScript 38 9





/*

Браузер будет игнорировать весь текст, обнаруженный им после косой

черты-звездочки, с которых начинается блок комментариев, до тех пор, пока не считает звездочку-косую черту, которые завершают

многострочный комментарий.

*/

Обнаружив блочный комментарий, браузер будет игнорировать весь текст, на — ходящийся между /* и */. Разработчики часто превращают в комментарий те или иные фрагменты кода, чтобы определить источник ошибок в обработке, вы —

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



function visitorSignln(Form)

{





if

(Form. fname. value == «»)

return false;

if

(Form. lname. value == «»)

return false;

if

(Form. email. value == «»)

return false;

f // Загрузить другую Web-страницу

self. location = «htdocs/Loggedln. htm»;

return;

}

Если функция visitorSignl n о по? акой-либо причине не может отобразить новую Web-страницу (Loggedln. htm), можно закомментировать три первых опе- ратора функции следующим образом:



function visitorSignln(Form)

{

/ *

if (Form. fname. value == «») return false;

if

в которой переменная используется. Приведенные ниже операторы определяют несколько различных переменных:



var BookTitle, ChapterNumber;

var Publisher;

var StringValue = «10″, IntValue *== 20;

var ConcatenatedValue = StringValue + IntValue; //результатом будет «1020″

var AdditionValue = StringValue + IntValue; // результатом будет 30



Следовательно, чтобы объявить переменные в сценарии, необходимо указать имя переменной (имена переменных) после ключевого слова var (как в первых двух строках). Если вы хотите присвоить переменной начальное значение, по- ставьте после имени переменной знак операции присваивания (=) и начальное значение (как в трех последних строках приведенного выше сценария). JavaScript накладывает следующие ограничения на объявления переменных:

• Имя переменной не может конфликтовать (то есть совпадать) с ключевым

словом JavaScript. В §

• Имена переменных должны начинаться с буквы либо символа подчеркива —

ния (_) и могут содержать цифры или буквы после первого символа.

• Имена переменных не могут включать в себя пробелы или знаки пунктуации.

Имена и ключевые слова JavaScript (как, например, var) чувствительны к ре — гистру, что значит, что var — ключевое слово, a var — нет. Аналогично,

stringvalu e И StringValue — Имена разных переменных.



Понятие операций JavaScript

Операции позволяют комбинировать переменные и/или литералы в выраже —

ния, дающие значения, которые затем можно выводить на экран, сохранять в пе —

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



Таблица 8.2. Бинарные арифметические операции JavaScript

Операция Назначение Пример

Сложение Вычитание Умножение Деление Остаток

(возвращает

остаток деления)



выражение + выражение — выражение * выражение / выражение %



выражение выражение выражение выражение выражение

Глава 8. JavaScript 391





Хотя первые три операции в таблице 8.3 вы могли бы классифицировать как арифметические, они являются унарными операциями, поскольку эти операции выполняются только над одним выражением.





Когда вы помещаете двойной знак плюс (++) или двойной знак минус (—)

перед переменной (префиксная операция), действие выполняется перед присвое —

нием значения. И наоборот, если вы поместите знак операции инкремента или декремента после переменной (постфиксная операция), действие будет выполне — но после присвоения значения. Например:



i = 10;

j = i++; // j=10, i=l l

j = —i; / / j=9, i=9



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

TestResult = true;

document. write(TestResult); // true

document. write(!TestResult); / / false



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

ких Как if И if-else ) И уПраВЛЯЮЩИХ ЦИКЛаХ (таКИХ Как while И for).





39 2 Глава 8. JavaScript





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

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

ной первое значение после вопросительного знака (?). И наоборот, -если выраже — ние равно False (ложно), оператор присваивает значение после двоеточия (:),

как показано ниже:* 11 1



PassingThisClass = (GPA>=2.0) ? «да» : «нет»;



Логические операторы позволяют сравнивать два логических (булевых) значе —

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





Условная и повторяющаяся обработка

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

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

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

позволяют сценариям определить, как одно значение «сравнивается» с другим. Иными словами, с помощью операций сравнения сценарии могут проверять, равно ли одно значение другому, больше ли одно значение другого или меньше его. При использовании операторов отношения результатом сравнения будет либо tru e (истина), либо fals e (ложь) — в том смысле, что два значения либо удовлетворяют условию (true), либо нет (false). Практикум, озаглавленный «Принятие сценарием решений и выполнение соответствующей обработки», по —

Глава 8. JavaScript 39 3





кажет, как использовать три различные формы операторов if-then-eise, кото —

рые позволяют Web-браузеру решить, какие из операторов сценария выполнить, основываясь на результатах сравнений.

С принятием решений в сценариях тесно связана возможность повторения одного или нескольких операторов определенное число раз или до выполнения известного условия. В двух практикумах ниже будет показано, как использовать циклы for и while для повторения действий в сценариях и функциях. Оператор while дает возможность создать цикл, в котором браузер будет повторно выпол — нять набор операторов JavaScript, пока заданное условие остается истинным. В

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



Вставка функций JavaScript в HTML-код Web-страницы

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

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