Лекция № 4 Тема: JavaScript: организация ветвлений План:
advertisement
Лекция № 4
Тема: JavaScript: организация ветвлений
Цель: рассмотреть оператор ветвления, способы его записи
План:
1. Условный оператор if...else
2. Условный оператор switch...case
1. Очень часто возникает потребность выполнить какой-то блок кода только при
выполнении определённых условий. Для этого и существуют операторы ветвления кода.
Они называются так, поскольку разделяют код на ветви и при выполнении такого
оператора решается, какая ветвь будет выполняться, а какая нет, подобно тому, как мы
решаем, куда повернуть на развилке дорог.
Оператор if
Этот оператор реализует выполнение (не выполнение) блока кода, при условии, что
некоторое выражение равно true (false). Выражение, в зависимости от значения которого
код выполняется (не выполняется) пишется в круглых скобках после ключевого слова if.
Блок кода, который выполняется (не выполняется) пишется после условия в фигурных
скобках.
if (условие) {
// код
}
Например, напишем скрипт, который выводит сообщение только тогда, когда
переменная a содержит значение true.
var a = true;
if (a) {
console.log('Переменная а содержит значение true');
}
Но, если в переменной a будет записано значение false, то сообщение не выведется на
консоль.
В скобочках после if может стоять и логическое выражение сложнее.
var a = 6;
1
if (a > 0 && a < 10 && a % 2 == 0) {
console.log('Значение а чётное, больше нуля и меньше десяти'); // сработает
}
Операторы if можно вкладывать друг в друга.
if (условие1) {
// code1
if (условие2) {
// code2
}
}
Но нужно заметить, что конструкцию этого вида стоит избегать и заменять её на
if (условие1 && условие2) {
// code
}
Оператор if-else
На практике очень часто бывает нужно выполнить один блок кода из двух. Для этих
целей и существует оператор if-else. Он отличается от от оператора if тем, что после
блока кода, который выполняется, если условие верное, пишется ключевое слово else с
блоком кода в фигурных скобках после него. Этот блок выполняется, если условие в
круглых скобках после ключевого слова if неверное.
if (условие) {
// code1
} else {
//code2
}
Например
var a = 10;
if (a % 2 == 0) {
console.log('Значение а чётное'); // выведется это сообщение
} else {
console.log('Значение a нечётное'); // но не это
2
}
Операторы if-else можно объединять в длинные цепочки. Например:
if (a < 0) {
console.log('Значение а отрицательное');
} else if (a == 0){
console.log('Значение a равно нулю');
} else {
console.log('Значение а положительное');
}
Первый блок кода сработает, если a меньше нуля, второй – если a равно нулю, ну а
третий – если не сработали два предыдущих, то есть если а положительно.
Хочется сказать ещё пару слов об оформлении кода. Если блок кода, состоит из одной
строки, то его не обязательно заключать в фигурные скобки, то есть такой код:
if (a < 0)
console.log('Значениe а отрицательное');
else if (a == 0)
console.log('Значение a равно нулю');
else
console.log('Значение а положительное');
будет работать. Но я не рекомендую так делать, так как вдруг вам понадобится добавить
ещё одну строку в блок кода после if и, если вы не заключите его в фигурные скобки,
будет ошибка в случае оператора if-else и код будет работать, возможно, не так как вы
думали, если вы используете оператор if.
А такой код и вовсе вызовет ошибку.
Классическим примером, демонстрирующим работу операторов if-else, является скрипт,
приветствующий пользователя по-разному, в зависимости от времени суток.
1 <html>
2 <head>
3 <title>Hello!</title>
4 </head>
5
3
6 <body>
7 <script type="text/javascript">
8 var date = new Date(),
9
hours = date.getHours();
10
11 if (hours < 12 && hours > 5) {
12 document.write('C добрым утром!');
13 } else if (hours >= 12 && hours < 17) {
14 document.write('Добрый день!');
15 } else if (hours >= 17 && hours < 22) {
16 document.write('Добрый вечер!');
17 } else {
18 document.write('Доброй ночи!');
19 }
20
21 </script>
22 </body>
23
24 </html>
Условная тернарная операция
Существует также и условный оператор, позволяющий присваивать различные значения
переменной в зависимости от заданного булевого значения. Выглядит он так:
var variable = booleanValue ? value1 : value2;
если
значение booleanValue равно true,
то
переменной variable присвоится
значение value1, иначе значение value2. Этот оператор удобно использовать для
сокращения кода вида:
var variable;
if (booleanValue) {
variable = value1;
} else {
variable = value2;
4
};
2. Оператор switch-case
Этот оператор удобно использовать когда у нас много вариантов выбора. Синтаксис
оператора вот такой:
switch (какое-то значение) {
case значение1 :
// code1
break;
case значение2 :
// code2
break;
// ...
case значениеN :
// codeN
break;
default :
// codeM
}
Если какое-то значение равно значению 1, то выполнится первый блока кода, если
значению 2, то второй и так далее. Если какое-то значение не равно ни одному из
предложенных вариантов, стоящему после ключевого слова case, то выполнится блок
кода, после ключевого слова default. Оператор switch-case часто применяется, чтобы
избежать вот таких длинных цепочек if-else.
Пример:
1 <html>
2 <head>
3 <title>Colors</title>
4 </head>
5
6 <body>
5
7 <script type="text/javascript">
8 var color = 'red';
9
10 switch (color) {
11 case 'green' :
12
document.write('<font color="green">Зелёный</font>');
13
break;
14 case 'red' :
15
document.write('<font color="red">Красный</font>');
16
break;
17 case 'blue' :
18
document.write('<font color="blue">Cиний</font>');
19
break;
20 case 'yellow' :
21
document.write('<font color="yellow">Жёлтый</font>');
22
break;
23 default :
24
document.write('Неизвестный цвет');
25 }
26
27 </script>
28 </body>
29
30 </html>
Сейчас этот скрипт просто выведет красную надпись: «Красный».
Стоит ещё сказать пару слов о операторе break. Если он опущен в каком-то блоке кода,
после case, то выполнения кода продолжится и блок кода, после следующего ключевого
слова case так же выполнится и так далее, пока не будет встречено ключевое слово break.
6