JavaScript поддерживает компактный набор операторов, которые могут использоваться для создания интерактивных Web-страниц. В данной главе дан обзор этих операторов.
В этой главе имеются следующие разделы, предоставляющие краткий обзор каждого оператора:
- Блок Операторов: { }
- Условные Операторы: if...else и switch
- Операторы Циклов: for, while, do...while, label, break и continue (label сам по себе не является оператором цикла, но часто используется с указанными операторами)
- Операторы Манипуляции Объектами: for...in и with
- Комментарии
- Операторы Обработки Исключений: try...catch и throw
Используйте символ «точка с запятой» (;) для разделения операторов в коде JavaScript.
См. в книге Ядро JavaScript. Справочник. детали об операторах из этой главы.
1. Блок операторов Блок операторов используется для группирования операторов. Блок ограничен фигурными скобками:{ statement1 statement2 . . . statementn }
2. Условные операторы Условный оператор является набором команд, которые выполняются, если специфицированное условие - true . JavaScript поддерживает два условных оператора: if...else и switch .2.1. Оператор if...else Этот оператор используется для выполнения определённых операторов, если логическое условие true ; используйте необязательный блок else для выполнения других операторов, если условие false . Оператор if выглядит так:if (condition ) { statements1 } [ else { statements2 } ]
Условие может быть любым выражением JavaScript, вычисляемым в true или false . Выполняемые операторы могут быть любыми операторами JavaScript, включая вложенные операторы if . Если Вам нужно выполнить более одного оператора после операторов if или else , вы обязаны заключить эти выполняемые операторы в фигурные скобки {}.
Вы не должны использовать простые присвоения в условном операторе. Например, НЕ используйте такой код:
Если Вам нужно использовать присвоение в условном операторе, введите дополнительные скобки вокруг операции присвоения. Например, if((x = y)) .
Не путайте примитивные Boolean -значения true и false со значениями true и false объекта Boolean . Любой объект, чьё значение не undefined , null , zero , **NaN** или пустая строка, включая объект Boolean со значением false , вычисляется в true , когда передаётся условному оператору. Например:
var b = new Boolean (false ) ; if (b ) // это условие вычисляется в true
Пример .
В этом примере функция checkData возвращает true , если количество символов в Text -объекте равно трём; иначе, выводит предупреждение и возвращает false .
function checkData () { if (document . form1 . threeChar . value . length == 3 ) { return true } else { alert (" Enter exactly three characters. " + document . form1 . threeChar . value + " is not valid. " ) return false } }
2.2. Оператор switch Оператор switch позволяет программе вычислять выражение и пытается сопоставить значение выражения значению в метке case. Если совпадение найдено, программа выполняет ассоциированный оператор. Оператор switch выглядит так:switch (expression ){ case label : statement ; break ; case label : statement ; break ; ... default : statement ; }
Программа сначала ищет label , совпадающий со значением expression , а затем выполняет ассоциированный statement/оператор. Если совпадающий label не найден, программа ищет необязательный default statement /оператор по умолчанию и, если он найден, выполняет ассоциированный оператор. Если default statement не найден, программа продолжает выполнять оператор, следующий после конца оператора switch .
Необязательный оператор break , ассоциированный с меткой case label , гарантирует, что программа прервёт выполнение оператора switch , как только будет выполнен оператор найденного совпадения, и продолжит выполнение с оператора, идущего после оператора switch . Если break отсутствует, программа продолжает выполнение следующего оператора внутри оператора switch .
Пример .
Здесь, если expr вычисляется в Bananas , программа находит совпадение с case Bananas и выполняет ассоциированный оператор. Если обнаружен break , программа прерывает switch и выполняет оператор после блока оператора switch . Если break отсутствует, оператор в case Cherries также будет выполнен.
switch
(expr
) {
case
"
Oranges
"
:
document
.
write
("
Oranges are $0.59 a pound.
"
)
;
break
;
case
"
Apples
"
:
document
.
write
("
Apples are $0.32 a pound.
"
)
;
break
;
case
"
Bananas
"
:
document
.
write
("
Bananas are $0.48 a pound.
"
)
;
break
;
case
"
Cherries
"
:
document
.
write
("
Cherries are $3.00 a pound.
"
)
;
break
;
default
:
document
.
write
("
Sorry, we are out of
"
+
i
+
"
.
"
)
;
}
document
.
write
("
Is there anything else you"d like?
"
)
;
Ещё один оператор цикла, for...in , также выполняет свои операторы циклически, но используется для работы с объектами. См. Операторы Манипуляции Объектами.
3.1. Оператор for Цикл for повторяется до тех пор, пока специфицированное значение false . Цикл JavaScript for похож на циклы for Java и C. Оператор for выглядит так:for ([ initialExpression ] ; [ condition ] ; [ incrementExpression ]) { statements }
Когда цикл for выполняется, происходит следующее:
1. Инициализирующее выражение initialЕxpression , если имеется, выполняется. Это выражение обычно инициализирует один или более счётчиков цикла, и синтаксис разрешает выражения любой сложности. Это выражение также может объявлять переменные.
2. Вычисляется выражение condition/условное. Если значение condition - true , выполняются statements/операторы цикла. Если значение condition - false , цикл for прекращает работу. Если выражение condition полностью отсутствует, принимается, что condition - true.
3. Выполняются statements.
4. Обновляющее выражение incrementExpression , если имеется, выполняется, и управление возвращается к Шагу 2.
Пример .
Эта функция содержит оператор for , который подсчитывает количество выбранных опций в прокручиваемом списке (объект Select , позволяющий выбрать несколько позиций). Оператор for объявляет переменную i и инициализирует её в нуль. Он проверяет, меньше ли i количества опций объекта Select , выполняет оператор if и инкремент переменной i на единицу после каждого прохода цикла.
function howMany(selectObject) { var numberSelected=0; for (var i=0; i < selectObject.options.length; i++) { if (selectObject.options[i].selected==true) numberSelected++; } return numberSelected; }
Choose some music types, then click the button below:
R&B
Jazz
Blues
New Age
Classical
Opera
3.2. Оператор do...while Оператор do...while повторяется, пока специфицированное выражение - false. Оператор do...while выглядит так:
do { statement } while (condition )
statement выполняется один раз перед проверкой условия/condition. Если condition - true , оператор выполняется снова. В конце каждого выполнения condition проверяется. Если condition - false , выполнение останавливается и управление передаётся оператору после do...while .
Пример.
В этом примере цикл do итерируется минимум один раз и повторяет итерации, пока i меньше 5 .
do { i += 1 ; document . write (i ) ; } while (i < 5 ) ;
3.3. Оператор while Оператор while выполняет свои операторы, пока специфицированное condition/условие - true . Оператор while выглядит так:while (condition ) { statements }
Если condition становится false , операторы внутри цикла прекращают выполняться и управление передаётся оператору, следующему после цикла.
Проверка условия/condition происходит до выполнения операторов внутри цикла. Если condition возвращает true , операторы выполняются и condition проверяется снова. Если condition возвращает false , выполнение цикла прекращается и управление передаётся оператору, идущему после оператора while .
Пример 1.
Этот цикл while итерирует, пока n меньше 3 :
n = 0 ; x = 0 ; while (n < 3 ) { n ++; x += n ; }
При каждой итерации цикл увеличивает n и прибавляет это значение к переменной x . Следовательно, x и n принимают следующие значения:
- После первого прохода: n = 1 и x = 1
- После второго прохода: n = 2 и x = 3
- После третьего прохода: n = 3 и x = 6
Пример 2: Бесконечный цикл.
Убедитесь, что условие цикла когда-нибудь станет false ; иначе цикл никогда не прервётся. Операторы следующего цикла while выполняются бесконечно, поскольку условие никогда не станет false :
while (true ) { alert (" Hello, world " ) }
3.4. Оператор label Оператор label является идентификатором, на который можно ссылаться из любого места программы. Например, вы можете использовать label для идентификации цикла, а затем использовать операторы break или continue для прерывания цикла или продолжения выполнения.Синтаксис оператора label выглядит так:
label : statement
Значением label может быть любой верный идентификатор JavaScript, не являющийся зарезервированным словом. Оператор/statement, идентифицируемый при помощи label , может быть любым оператором.
Пример.
В этом примере label markLoop идентифицирует цикл while .
markLoop : while (theMark == true ) doSomething () ; }
3.5. Оператор break Используйте оператор break для прерывания цикла switch или оператора с меткой label .- Если вы используете break без label , он немедленно прерывает ближайший содержащий while , do-while , for или switch и передаёт управление следующему оператору.
- Если вы используете break с label , он прерывает специфицированный помеченный оператор.
1 . break 2 . break label
Первый вариант прерывает ближайший содержащий цикл или switch ; второй вариант прерывает специфицированный оператор, имеющий метку.
Пример .
Здесь выполняется итерация по элементам массива, пока не будет найден индекс элемента со значением theValue :
for (i = 0 ; i < a . length ; i ++ ) { if (a [ i ] = theValue ) break ; }
3.6. Оператор continue Оператор continue используется для рестарта операторов while , do-while , for и label .- Если вы используете continue без label , он прерывает текущую итерацию ближайшего цикла while, do-while или for и продолжает выполнение этого цикла со следующей итерации. В отличие от оператора break, continue не прерывает выполнение цикла полностью. В цикле while он переходит на condition . В цикле for на increment-expression .
- Если вы используете continue с label , он применяется к оператору цикла, идентифицированному этим label .
1 . continue 2 . continue label
Пример 1.
Это пример цикла while с оператором continue , который выполняется, если значение i равно 3 . Таким образом, n получает значения 1, 3, 7 и 12 .
i = 0 ; n = 0 ; while (i < 5 ) { i ++; if (i == 3 ) continue ; n += i ; }
Пример 2.
Оператор, помеченный как checkiandj , содержит оператор, помеченный как checkj . Если обнаружен continue , программа прерывает текущую итерацию checkj и начинает следующую итерацию. Каждый раз при обнаружении continue, checkj начинает итерацию вновь, пока его условие не возвратит false . Если возвращено false , выполняется оставшаяся часть оператора checkiandj и checkiandj реитерирует, пока его условие не возвратит false. Если возвращается false , программа продолжает выполняться с оператора, следующего после checkiandj .
Если continue имеет label для checkiandj , программа продолжит выполнение от начала оператора checkiandj .
checkiandj
:
while
(i
<
4
) {
document
.
write
(i
+
"
"
)
;
i
+=
1
;
checkj
:
while
(j
>
4
) {
document
.
write
(j
+
"
"
)
;
j
-=
1
;
if
((j
%
2
)
==
0
)
continue
checkj
;
document
.
write
(j
+
"
is odd.
"
)
;
}
document
.
write
("
i =
"
+
i
+
"
"
)
;
document
.
write
("
j =
"
+
j
+
"
"
)
;
}
For (variable in object) {
Пример
.
Эта функция принимает в качестве аргумента объект и имя объекта. Затем она итерирует по всем свойствам этого объекта и возвращает строку - список имён свойств и их значений.
function
dump_props
(obj
,
obj_name
) {
var
result
=
""
;
for
(var
i
in
obj
) {
result
+=
obj_name
+
"
.
"
+
i
+
"
=
"
+
obj
[
i
]
+
"
"
}
result
+=
"
"
;
return
result
;
}
Для объекта car со свойствами make и model результат будет таким:
car . make = Ford car . model = Mustang
4.2. Оператор with Оператор with устанавливает объект по умолчанию для набора блока операторов. JavaScript просматривает неквалифицированные имена внутри блока операторов и определяет, являются ли имена свойствами объекта по умолчанию. Если неквалифицированное имя является свойством, то это свойство используется в операторе; иначе, используется локальная или глобальная переменная.Оператор with выглядит так:
with (object ){ statements }
Пример .
Здесь оператор with специфицирует, что объект Math является объектом по умолчанию. Операторы после оператора with обращаются к свойству PI и к методам cos и sin без специфицирования объекта. JavaScript принимает объект Math как объект для этих обращений.
var a , x , y ;; var r = 10 with (Math ) { a = PI * r * r ; x = r * cos (PI ) ; y = r * sin (PI / 2); }
Примечание :
Использование оператора with может значительно замедлить выполнение программы.
5. Комментарии Комментарии обычно разъясняют действия, выполняемые кодом. Комментарии игнорируются интерпретатором. JavaScript поддерживает комментарии в стиле Java и C++:- Однострочный комментарий с двойным слэшем в начале строки (//).
- Многострочный комментарий с символами /* в начале и с символами */ в конце.
Вот пример двух комментариев:
// Это однострочный комментарий. /* А это - многострочный. Он может быть любой длины, и вы можете поместить сюда всё, что угодно. */
6. Операторы обработки исключений Вы можете вызывать исключение оператором throw и обрабатывать его операторами try...catch .Оператор try...catch используется также для обработки исключений Java. См. разделы «Обработка Исключений Java в JavaScript" и «Обработка Исключений JavaScript в Java».
6.1. Оператор throw Оператор throw используется для вызова исключения. Если вы вызываете исключение, вы специфицируете выражение, содержащее значение исключения:throw expression
Следующий код вызывает несколько исключений.
throw " Error2 " ; // генерирует исключение со строковым значением throw 42 ; // генерирует исключение со значением 42 throw true ; // генерирует исключение со значением true
При вызове исключения вы можете специфицировать объект. Затем можно обратиться к свойствам объекта в блоке catch . Следующий пример создаёт объект myUserException типа UserException и использует его в операторе throw .
// Создаётся объект типа UserException function UserException (message ) { this . message = message ; this . name = " UserException " ; } // Создаётся и вызывается экземпляр объекта myUserException = new UserException (" Value too high " ) ; throw myUserException ;
6.2. Оператор try...catch Оператор try...catch помечает блок операторов, пытается их выполнить и специфицирует один или более вариантов ответа при возникновении исключения. Если исключение возникло, оператор try...catch отлавливает его.Оператор try...catch состоит из блока try , который содержит один или более операторов, и нуль или более блоков catch , содержащих операторы, которые специфицируют действия при вызове исключения в блоке try . То есть, если вы хотите выполнить блок try и он не выполняется, вы передаёте управление в блок catch . Если любой оператор блока try (или оператор функции, вызываемой из блока try ) вызывает исключение, управление немедленно передаётся в блок catch . Если исключение не было вызвано, блок catch пропускается. Блок finally выполняется после выполнения блоков try и catch , но до выполнения оператора, идущего после блока оператора try...catch .
В следующем примере используется оператор try...catch . Вызывается функция, которая запрашивает название месяца из массива, базируясь на значении, передаваемом функции. Если значение не соответствует номеру месяца (1-12 ), вызывается исключение со значением «InvalidMonthNo" и операторы блока catch устанавливают переменную в monthName значение unknown.
function getMonthName (mo ) { mo = mo - 1 ; // Уточняется номер месяца по индексу массива (1=Jan, 12=Dec) var months = new Array (" Jan " , " Feb " , " Mar " , " Apr " , " May " , " Jun " , " Jul " , " Aug " , " Sep " , " Oct " , " Nov " , " Dec " ) ; if (months [ mo ] != null ) { return months [ mo ] } else { throw " InvalidMonthNo " } } try { // попытка выполнить эти операторы: monthName = getMonthName (myMonth ) // функция может вызвать исключение } catch (e ) { monthName = " unknown " logMyErrors (e ) // объект, вызвавший исключение, передаётся обработчику исключений }
throw ; вы можете использовать этот идентификатор для получения информации о вызванном исключении. JavaScript создаёт этот идентификатор при входе в блок catch ; идентификатор существует только в период выполнения блока catch ; после завершения выполнения блока catch идентификатор больше не доступен.
Например, следующий код вызывает исключение. Если возникает исключение, управление передаётся в блок catch .
try { throw " myException " // генерируется исключение } catch (e ) { // операторы для обработки любого исключения logMyErrors (e ) // исключение передаётся обработчику ошибок }
Несколько блоков catch
Единственный оператор try может содержать несколько условных блоков catch , каждый из которых обрабатывает специфический тип исключения. В этом случае вход в подходящий условный блок catch выполняется только при вызове исключения, специфицированного для данного блока. Вы можете также по выбору включить отдельный блок catch для всех неспецифицированных исключений как финальный блок catch в операторе.
Например, следующая функция вызывает три другие функции (объявленные в другом месте), которые проверяют её аргументы. Если проверяющая функция определяет, что проверяемый компонент неверен, она возвращает 0, заставляя вызывающую функцию вызывать определённое исключение.
function getCustInfo (name , id , email ) { var n , i , e ; if (! validate_name (name )) throw " InvalidNameException " else n = name ; if (! validate_id (id )) throw " InvalidIdException " else i = id ; if (! validate_email (email )) throw " InvalidEmailException " else e = email ; cust = (n + " " + i + " " + e ) ; return (cust ) ; }
Условные блоки catch
управляют вызовом соответствующего обработчика исключений.
"
) {
// вызывает обработчик неправильных ids/идентификаторов
bad_id_handler
(e
)
}
catch
(e
if
e
==
"
InvalidEmailException
"
) {
// вызывает обработчик неправильных email-адресов
bad_email_handler
(e
)
}
catch
(e
){
// незвестное исключение записывается в log-файл
logError
(e
)
}
Блок finally
Блок finally содержит операторы, выполняемые после выполнения блоков try и catch , но до выполнения операторов, идущих после оператора try...catch . Блок finally выполняется независимо от того, было ли вызвано исключение. Если исключение вызывается, операторы блока finally выполняются даже в том случае, если ни один блок catch не обработал исключение.
Вы можете использовать блок finally для корректного завершения скрипта при возникновении исключения; например, Вам может понадобиться освободить ресурс, связанный скриптом. В следующем примере файл открывается и операторы работают с ним (серверный JavaScript даёт возможность доступа к файлам). Если вызывается исключение при открытом файле, блок finally закрывает файл до того, как скрипт потерпит неудачу.
openMyFile () ; try { writeMyFile (theData ) } finally { closeMyFile () // ресурс всегда закрывается }
Вложение операторов try...catch
Вы можете вкладывать один или более операторов try...catch друг в друга. Если внутренний оператор try...catch не имеет блока catch , на совпадение проверяется блок catch содержащего его оператора try...catch.
var a = 10; var b = (a>1) ? 100: 200; alert(b);
Если условие a>1 истинно, то переменной b присвоить значение 100 , иначе переменной b присвоить значение 200 .
Задание Js 3_4.
Дополнить код: объявлено 3 локальные переменные с использованием ключевого слова var . Необходимо в переменную max присвоить значение следующего тернарного оператора: если a больше b , то возвращаем a , иначе возвращаем b .
Фрагмент кода:
if (a * b < 6) { result = "Мало"; } else { result = "Много"; }
Вопросы для самоконтроля:
Оператор switch javascript служит для проверки переменной на множество значений:
Синтаксис:
switch (переменная или выражение) { case вариант1: //..блок операторов.. break case вариант2: //..блок операторов.. break default: //..блок операторов.. }
Проверяется значение переменной или выражения: в каждом case проверяется одно из значений, в случае подходящего значения выполняется тот или иной блок операторов, соответствующий данному case .
Блок, начинающийся со служебного слова default можно опустить. Операторы блока будут выполнены в случае, если ни одно из перечисленных значений во всех case не подходит.
Важно: Оператор break обязателен после каждого рассмотренного значения переменной (после каждого case ); если его не использовать, то будут выведены все, расположенные ниже операторы
Сравним с оператором IF :
var a = 2; switch(a) { case 0: // if (a === 0) case 1: // if (a === 0) alert("Ноль или один"); // тогда выводим... break; case 2: // if (a === 2) alert("Два"); // тогда выводим... break; default: // else alert("Много"); // иначе выводим... }
Как сгруппировать несколько вариантов?
Для выполнения одних и тех же операторов возможно группировка нескольких case . Как в примере выше:
Case 0: case 1: alert("Ноль или один"); break; ...
При a = 0 и a = 1 выполняется один и тот же оператор: alert("Ноль или один");
Пример 4: Запрашивать у пользователя ввести цвет. Выводить перевод на английский язык введенного цвета. Для цвета "синий" и "голубой" выдавать одно и то же значение.
✍ Решение:
- Создайте веб-страницу с html-скелетом и тегом script .
- Инициализируйте переменную color
- Проверьте значение переменной с помощью конструкции switсh , выводя на каждое значение - соответствующий перевод:
- Для цветов "синий" и "голубой" выполните группировку:
- Организуйте вывод для тех цветов, которые не предусмотрены программой:
- Протестируйте сценарий в браузере.
| var color = prompt("Какой цвет?" ) ; |
var color = prompt("Какой цвет?");
switch (color) { case "красный" : alert("red"); break; case "зеленый": alert("green"); break; // ...
Если переменная color имеет значение "красный", то вывести в модальное окно перевод - "red" и выйти из конструкции (break;). Если переменная color имеет значение "зеленый", то вывести в модальное окно перевод - "green" и выйти из конструкции (break;).
// ... case "синий": case "голубой": alert("blue"); break; // ...
Если переменная color имеет значение "синий" или переменная color имеет значение "голубой", то вывести в модальное окно перевод - "blue" и выйти из конструкции (break;).
| // ... default : alert("y нас нет сведений по данному цвету" ) } // конец switch |
// ... default: alert("y нас нет сведений по данному цвету") } // конец switch
Задание Js 3_6. Найдите и исправьте ошибки в следующем фрагменте кода:
| 14 15 16 17 | var number = prompt("Введите число 1 или 2:" ) ; switch (number) { case "1" { document.write ("Один" ) ; } ; break ; case "2" { document.write ("Два" ) ; } ; break ; default { document.write ("Вы ввели значение, отличное от 1 и 2" ) ; } ; } |
var number = prompt("Введите число 1 или 2:"); switch (number) { case "1" { document.write("Один"); }; break; case "2" { document.write("Два"); }; break; default { document.write("Вы ввели значение, отличное от 1 и 2"); }; }
Задание Js 3_7. Что выведется на экране при выполнении следующего кода?:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | var value = "2" ; switch (value) { case "1" : case "2" : case "3" : document.write ("Hello" ) ; break ; case "4" : case "5" : document.write ("World" ) ; default : document.write ("Error" ) ; } |
var value = "2"; switch (value) { case "1": case "2": case "3": document.write("Hello"); break; case "4": case "5": document.write("World"); default: document.write("Error"); }
Задание Js 3_8. У пользователя запрашивать число – количество ворон на ветке. В зависимости от введенного числа (не более 10), выводить сообщение: - На ветке сидит 1 ворона - На ветке сидит 4 вороны - На ветке сидит 10 ворон
Вопросы для самоконтроля:
Синтаксис:
for(начальное значение счетчика; условие; приращение счетчика) { //..блок операторов.. }
Важно: Цикл в javascript for используется, когда заранее известно, сколько раз должны повториться циклические действия (сколько итераций у цикла)
- В качестве начального значения счетчика итераций используется выражение присваивания: например, i=0 - счетчик цикла начинается с нуля:
- В качестве приращения счетчика указывается шаг, с которым должен увеличиваться счетчик: например, указывает на то, что каждая итерация цикла будет сопровождаться его увеличением на 1 :
- Условие цикла - это и есть конечное значение счетчика: например, i10, останавливает цикл:
for(var i = 0; условие; приращение счетчика) { //..блок операторов.. }
for(var i = 0; условие; i++) { //..блок операторов.. }
for(var i = 0; i
