§11. Логический тип данных, логические выражения. Операторы логическое И, логическое ИЛИ. Конструкции switch, ?:.
Логический тип данных.
В 6 параграфе был приведён пример алгоритма сортировки массива. В качестве переменной содержащей информацию о том, отсортирован массив или ещё нет, использовалась переменная b типа число. Если массив не отсортирован, то она была равна 0. После того, как массив становился отсортированным, переменная b становилась равной 1. Очевидно, что эта переменная в течение всей программы принимает только два значения и служит для того, что бы хранить в себе ответ на вопрос «Отсортирован массив или ещё нет».
Для подобного рода переменных существует логический тип данных. Переменные логического типа могут принимать только два значения true (правда) или false (лож).
Логический тип ещё называют булевым (от английского boolean) в честь английского математика Джорджа Буля, который создал алгебру логики. Поэтому в именах логических переменных в качестве префикса (первого символа) может быть использована маленькая буква b. О том, что такое префикс будет написано в разделе об идентификаторах.
В коде программы для присвоения значения логической переменной необходимо написать без всяких кавычек true или false. Пример:
<script>
var b = true;
document.write(b);
</script>
Здесь так же стоит отметить, что если логическая переменная будет использована в выражении с другими типами, то она будет автоматически преобразована по следующему принципу: если переменная равна true, то она станет равной 1; если переменная была равна false, то она станет равна 0. Пример:
<script>
var b = true;
document.write('b = ',b,'<br>');
document.write('1 + b = ',1+b,'<br>');
b = false;
document.write('b = ',b,'<br>');
document.write('1 + b = ',1+b,'<br>');
</script>
Логические операции.
В третьем параграфе мы использовали термин условие. Теперь вместо него введём понятие логическая операция, под которым будем понимать операцию, результатом которой является логическое значение. Соответственно результат логической операции можно присвоить логической переменной. Пример:
var b = 3>4;
document.write('b = ',b,'<br>');
Логические операторы.
Вспомним: оператором в программировании называется простейшая элементарная операция, составляющая основу языка. Мы уже знаем и умеем пользоваться следующими логическими операторами: <; <=; >; >=; ==. К этому списку добавим оператор != (не равно). Результатом работы этого оператора будет true в том случае если два значения не равны друг другу и наоборот. Пример:
document.write(3!=4);//Результат true
document.write(4!=4);//Результат false
Существует ещё два оператора && (логическое И) и || (логическое или). Справа и слева от них должны находиться логические значения.
Логическое И даёт true в том случае, если оба условия являются верными. Для примера можно привести следующую ситуацию: я пойду в магазин только в том случае, если закончился хлеб, И закончилось молоко. Получается, что если закончилось только молоко, то я в магазин не пойду, буду ждать, когда закончится ещё и хлеб.
Логическое ИЛИ даёт true в случае, если хотя бы одно условие верно. Для примера: я пойду в магазин в случае, если закончится хлеб ИЛИ если закончится молоко. Т.е. если хоть что-то закончится, то я пойду в магазин.
Далее пример, в котором продемонстрирован принципы использования операторов && и ||:
document.write('true && true = ',true && true,'<br>');//Результат true
document.write('false && false = ',false && false,'<br>');//Результат true
document.write('true && false = ',true && false,'<br>');//Результат false
document.write('true || true = ',true || true,'<br>');//Результат true
document.write('false || false = ',false || false,'<br>');//Результат true
document.write('true || false = ',true || false,'<br>');//Результат false
Определение находится ли точка в заданной области.
Для того, что бы потренироваться в использовании операторов && и ||, научимся определять, находится ли точка в заданной области. Рассмотрим простейший случай, где область является квадратом, как на рисунке:
Очевидно, что точка находится внутри закрашенной области в том случае, если её координата X больше либо равна нулю и меньше либо равна 5; координата Y так же больше либо равна нулю и меньше либо равна 5. В коде программы такое логическое выражение будет выглядеть следующим образом:
x>=0 && x<=5 && y>=0 && y<=5
Обратите внимание, что операторы && и || имеют меньший приоритет перед остальными логическими операторами, поэтому скобок для явного выделения приоритетов в данном выражении не требуется.
Теперь усложним задачу и определим, находится ли точка в следующей области:
Очевидно, что данную область можно разделить на две элементарные части: квадрат, как в предыдущем примере; и треугольник. Соответственно точка может находиться в одной области или в другой. Для квадрата логическое выражение мы уже определили, осталось определить для треугольника.
Т.к. треугольник ограничен двумя прямыми параллельными осям координат и одной прямой , то очевидно, что координата X должна быть больше либо равна 5 и меньше либо равна 10, а координата Y – больше либо равна нулю и меньше либо равна
. В коде программы такое логическое выражение будет выглядеть следующим образом:
x>=5 && x<=10 && y>=0 && y<=-x+10
Обратите внимание на то, что арифметические операции имеют более высокий приоритет перед логическими, поэтому скобки здесь так же не нужны.
Теперь, когда для обоих областей определены логические выражения, можем их соединить с помощью оператора ||:
(x>=0 && x<=5 && y>=0 && y<=5) || (x>=5 && x<=10 && y>=0 && y<=-x+10)
Обратите внимание, для того, что бы избежать ошибок, выражения для каждой области помещены в круглые скобки.
Оператор ! (логическое НЕ).
В JavaScript, как и в других языках, есть оператор, который меняет (инвертирует) логическое значение на противоположное. Он называется логическое НЕ и в коде программы является символом восклицательный знак !.
Для примера использования данного оператора можно привести фрагмент программы сортировки массива:
var b = false;//Отсортирован массив или нет
while (!b)
{
b = true;
//Просматриваем массив
for (var c = 0;c<m_size;m = m+1)
{
.......................
//Если есть не отсортированные элементы, то
b = true;
.......................
}
...................
}
Конструкция if ... else if ... .
Если вы не только выполняли все предложенные в учебнике задачи, но ещё пытались реализовать какие-либо свои идеи, то, наверняка, вы сталкивались с ситуацией, в которой в зависимости от значения переменной нужно было выполнить более двух различных действий. Если вы не читали дополнительной литературы, то, скорее всего, такую ситуацию вы решали следующим образом:
var a = 3;
if (a == 1)
document.write('a = 1')
else
{
if (a == 2)
document.write('a = 2')
else
{
if (a == 3)
document.write('a = 3')
else
{
//И так далее
}
}
}
В данном примере в зависимости от числа, которое содержится в переменной a выводится соответствующая строка. Принцип построения получившейся конструкции заключается в том, что если а не равна 1, то мы создаём новый блок кода в котором а уже проверяется на равенство 2, и т.д.
В JavaScript данную ситуацию можно переписать более компактно и стройно, используя конструкцию if () else if () else if … else. Выглядеть это будет следующим образом:
var a = '4tg';
if (a == 1)
document.write('a = 1')
else if (a == 2)
document.write('a = 2')
else if (a == 3)
document.write('a = 3')
//...
else document.write('a - не цифра');
Конструкция switch.
В JavaScript так же есть конструкция switch, которая может более эффективно реализовать предыдущий пример. Выглядит она следующим образом:
var a = 2;
switch(a) {
case 1: document.write('a = 1');
break;
case 2: document.write('a = ');
document.write('2');
break;
case 3: document.write('a = 3');
break;
//..............................
default: document.write('a - не цифра');
}
Принцип работы данной конструкции заключается в том, что программа выбирает метку case со значением соответствующим переменной a, и выполняет соответствующий код до слова break. Слово break – инструкция, которая заставляет программу вовсе выйти из данной конструкции. Если меток case с нужным значением нет, то программа выполняет код под меткой default, и выходит из конструкции.
Эффективность конструкции switch заключается в том, что выбор нужной метки происходит один раз, в отличие от предыдущего примера, где программа каждый раз выполняет проверку, встретив if. Плюсом ко всему данная конструкция более наглядна, что уменьшает вероятность появления ошибки.
Обратите внимание на метку case со значением 2 в данном примере. Код, который будет выполнен по этой метке, состоит из двух операций. При этом фигурные скобки для выделения блока кода в данной конструкции не требуются.
Так же стоит отметить, что метка default не является обязательной.
Использование инструкции return в конструкции switch.
Если конструкция switch применяется в функции, которая в зависимости от какого-либо значения должна что-то возвратить, то вместо инструкции break можно использовать инструкцию return. Вспомним, эта инструкция возвращает какое-либо значение и производит немедленный выход из функции. В качестве примера может служить функция, которая возвращает название месяца по его номеру:
<script>
function month(n)
{
switch(n) {
case 1: return('январь');
case 2: return('февраль');
case 3: return('март');
//..............................
default: return('не месяц');
}
}
document.write('Сейчас ',month(3),' месяц.');
</script>
Условный оператор ?:.
В JavaScript есть конструкция, которая возвращает значение в зависимости от условия. Реализуется она с помощью условного оператора ?:. Для того, что бы было понятнее, вначале создадим пример функции, которая делает то же самое, а затем перепишем её с помощью данного оператора:
function f(x)
{
if (x<0)
return 'отрицательное'
else
return 'положительное'
}
С помощью оператора ?: это же самое реализуется следующим образом:
x<0?'отрицательное':'положительное';
Задачи.
1. В данном параграфе мы научились определять, находится ли точка в заданной области. В данной задаче необходимо создать документ с подобным рисунком. Нарисовать случайную точку и вывести сообщение о том находится ли точка в заданной области.
Примечание: закрашивать мы ещё не умеем, поэтому область закрашивать не надо. Так же не забудьте, что в окне браузера счёт по оси Y идёт не снизу вверх, а сверху вниз.
С помощью подобной программ можно будет проверить правильность составления логического выражения. Для этого достаточно будет обновлять документ и смотреть – где находится точка и достоверно ли сообщение.
Точку можно нарисовать линией толщиной в 5 пикселей и длиной в полпикселя.
2. Определить находится ли точка, полученная случайным образом, в следующей закрашенной области.
Создать документ с рисунком. Нарисовать случайную точку и вывести сообщение о том находится ли точка в заданной области.
3. Переписать программу сортировки массива из 6 параграфа, используя знания, полученные в данном параграфе.
4. Создать функцию, которая возвращает название дня недели по его номеру.
5. Вывести сообщение о том, является ли случайное число положительным или отрицательным. Использовать условный оператор ?:.
Примеры решений.
1.
<body>
<div id = "message"></div>
<canvas id = "image_1" width = "400px" height = "200px" style = "border:solid 2px black"></canvas>
<script>
var m = 30;//Масштаб
var x0 = 10.5, y0 = 100.5;//Координаты начальной точки
var g = image_1.getContext('2d');
//Рисуем оси
g.lineWidth = 1;
g.strokeStyle = 'black';
//Ось Y
g.moveTo(10.5,194.5);
g.lineTo(10.5,5.5);
g.lineTo(7.5,13.5);
g.moveTo(10.5,5.5);
g.lineTo(13.5,13.5);
//Ось X
g.moveTo(5.5,190.5);
g.lineTo(394.5,190.5);
g.lineTo(386.5,187.5);
g.moveTo(394.5,190.5);
g.lineTo(386.5,193.5);
g.stroke();
//Рисуем квадрат
g.moveTo(10.5,190.5-5*m);
g.lineTo(10.5+5*m,190.5-5*m);
g.lineTo(10.5+5*m,190.5);
g.stroke();
//Рисуем дополнительную область
g.moveTo(10.5+5*m,190.5-5*m);
g.lineTo(10.5+2*5*m,190.5);
g.stroke();
//Возвращает случайное число от A до B
function random_range(A,B)
{
return Math.random()*5.5*(B-A)/5.5+A;
}
//Получаем случайную точку
var x = random_range(0,11);
var y = random_range(0,5.5);
//Рисуем точку
g.beginPath();
g.lineWidth = 5;
g.strokeStyle = 'red';
g.moveTo(x*m+10.5,190.5-y*m);
g.lineTo(x*m+10.5+1,190.5-y*m+1);
g.stroke();
//Определяем её принадлежность
if ((x>=0 && x<=5 && y>=0 && y<=5) || (x>=5 && x<=10 && y>=0 && y<=-x+10))
message.innerHTML = 'Точка принадлежит заданной области.'
else
message.innerHTML = 'Точка не принадлежит заданной области.';
</script>
</body>