JavaScript - Условные и логические операторы. Условный оператор в Javascript Яваскрипт если два условия выполняются вывести сообщение


В этой статье рассмотрим условные и логические операторы языка JavaScript.

Условные операторы JavaScript

Условные операторы - это операторы языка JavaScript (ECMAScript), которые в зависимости от некоторого условия позволяют выполнить одно или несколько определённых инструкций.

Формы условных операторов в JavaScript:

  • условный оператор if (с одной ветвью);
  • условный оператор if...else (с двумя ветвями);
  • условный оператор else if... (с несколькими ветвями);
  • тернарный оператор (?: );
  • оператор выбора switch .
Условный оператор if

Синтаксис оператора if:

If (условие) инструкция

Условный оператор if состоит из:

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

Например:

If (true) count = 4;

В этом примере в качестве условия используется значение true . Это означает, что инструкция count = 4 будет выполняться всегда. Данный пример просто приведен для пояснения принципа работы оператора if , т.к. он лишён всякого смысла.

Например , увеличим значение переменной votes на 1, если она (её тип) является числом:

If (typeof votes === "number") votes++;

Если необходимо выполнить несколько инструкций, то их необходимо поместить в фигурные скобки :

If (typeof votes === "number") { votes++; console.log("Число голосов: " + votes); }

If (typeof votes === "number") { votes++; }

Оператор if...else

Оператор if...else используется, когда необходимо при истинности условия выполнить одни инструкции, а при ложности - другие.

Синтаксис:

If (условие) { одно или несколько инструкций (будут выполняться, когда условие равно true или приведено к true) } else { одно или несколько инструкций (будут выполняться, когда условие равно false или приведено к false) }

Например , выведем в консоль сообщение о том, является ли число четным или нет:

If (number % 2) { console.log("Число нечётное!"); } else { console.log("Число чётное!"); }

Правило приведения условия к true или false

Если выражение в условии оператора if не равно true или false , то JavaScript приведёт его к одному из этих значений. Данное действие он выполняет с помощью так называемого "правила лжи".

Смысл данного правила: любое выражение является true, кроме следующих значений :

  • false (ложь);
  • "" или "" (пустая строка);
  • NaN (специальный числовой тип данных «не число»);
  • 0 (число «ноль»);
  • null («пустое» значение);
  • undefined («неопределённое» значение).

Например , выведем в консоль браузера приветственное сообщение, в зависимости от того какое значение хранится в переменной nameUser :

If (nameUser) { console.log("Привет, " + name + "!"); } else { console.log("Привет, гость!"); }

Если переменная nameUser будет содержать пустую строку , то по правилу лжи, она будет приведена к значению false . Следовательно, в консоль будет выведено сообщение «Привет, гость!» .

А если, например, переменная nameUser будет содержать строку «Тимур» , то выражение в условии будет приведено к значению true . В результате, в консоли отобразится сообщение «Привет, Тимур!» .

Оператор else if... (несколько условий)

Синтаксис:

If (условие1) { инструкции 1 } else if (условие2) { инструкции 2 } else if (условие3) { инструкции 3 //... } else if (условиеN) { инструкции N } else { инструкции, которые будут выполнены, если ни одно из условий не равно true или не приведёно к этом значению }

Условный (тернарный) оператор (?:)

Тернарный оператор – оператор JavaScript, который можно использовать, когда необходимо в зависимости от условия выполнить одно из двух заданных выражений.

Синтаксис:

Условие? выражение1: выражение2

Тернарный оператор состоит из трех операндов, которые разделяются с помощью символов? и: . Условие тернарного оператора задаётся в первом операнде. Его также можно заключить в скобки. Если условие равно true или будет приведено к этому значению будет выполнено выражение1 , иначе - выражение 2 .

Например:

(number > 10) ? console.log("Число больше 10!") : console.log("Число меньше или равно 10");

В JavaScript допустимы множественные тернарные операторы (?:):

Var dayNumber = new Date().getDay(); day = (dayNumber === 0) ? "Воскресенье" : (dayNumber === 1) ? "Понедельник" : (dayNumber === 2) ? "Вторник" : (dayNumber === 3) ? "Среда" : (dayNumber === 4) ? "Четверг" : (dayNumber === 5) ? "Пятница" : (dayNumber === 6) ? "Суббота" : "Неизвестный день недели"; console.log("Сегодня " + day.toLowerCase() + ".");

Вышеприведённый пример, но с использованием множественной записи оператора if...else:

Var dayNumber = new Date().getDay(); if (dayNumber === 0) { day = "Воскресенье"; } else if (dayNumber === 1) { day = "Понедельник"; } else if (dayNumber === 2) { day = "Вторник"; } else if (dayNumber === 3) { day = "Среда"; } else if (dayNumber === 4) { day = "Четверг"; } else if (dayNumber === 5) { day = "Пятница"; } else if (dayNumber === 6) { day = "Суббота"; } else { day = "Неизвестный день недели"; } console.log("Сегодня " + day.toLowerCase() + ".");

Оператор switch

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

Синтаксис оператора switch :

Switch (выражение) { case значение1: // ... инструкции, которые будут выполнены, если результат вычисления выражения равен «значение1» break; // необязательная инструкция (если её не использовать, то будет выполнена следующая команда оператора switch) case значение2: // ... инструкции, которые будут выполнены, если результат вычисления выражения равен «значение2» break; // необязательная инструкция (если её не использовать, то будет выполнена следующая команда оператора switch) // ... case значениеN: // ... инструкции, которые будут выполнены, если результат вычисления выражения равен «значениеN» break; // необязательная инструкция (если её не использовать, то будет выполнена следующая команда оператора switch) default: // инструкции, которые будут выполнены, если результат выражения не равен не одному из значений }

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

Инструкция break является необязательной. Она предназначена для прерывания выполнения оператора switch и передачи управлению инструкции, идущей после него.

Например , выведем сообщение в консоль браузера о количестве конфет:

Var countCandyBoys = 1, countCandyGirls = 2, message; switch (countCandyBoys + countCandyGirls) { case 1: message = "Одна конфета"; break; case 2: case 3: message = "Две или три конфеты"; break; case 4: message = "Четыре конфеты"; break; default: message = "Не одна, не две, не три и не четыре конфеты"; } // выведем сообщение в консоль console.log(message);

В вышеприведенном примере вычисленное выражение равно 3. Следовательно, будет выполнены инструкции message = "Две или три конфеты" и break . Инструкция break прервёт дальнейшее выполнение оператора switch и передаст управление инструкции, идущей после него, т.е. console.log(message) . Она выведет в консоль сообщение «Две или три конфеты» .

Например , выведем выведем в консоль текущий день недели:

Var day = ""; switch(new Date().getDay()) { case 0: day = "Воскресенье"; break; case 1: day = "Понедельник"; break; case 2: day = "Вторник"; break; case 3: day = "Среда"; break; case 4: day = "Четверг"; break; case 5: day = "Пятница"; break; case 6: day = "Суббота"; break; default: day = "Неизвестный день недели"; } console.log("Сегодня " + day.toLowerCase() + ".");

Пример, в котором не используется инструкция break :

Var result = "success"; switch (result) { case "success": console.log("Успех!"); case "invalidCaptcha": console.log("Неверная капча!"); default: console.log("Ошибка!"); }

В этом примере выражение оператора switch равно success . Следовательно, будет выполнена инструкция console.log("Успех!") , которая выведет сообщение «Успех!» в консоль. Но так как после неё нет инструкции break , то выполнение скрипта будет продолжено в следующем варианте. Таким образом, инструкции будут выполняться до тех пока пока на пути не встретиться break или не будет достигнут конец оператора switch . В результате выполнения этого примера в консоль будут выведены 3 сообщения: «Успех!» , «Неверная капча!» и «Ошибка!» .

В некоторых случаях может требоваться именно такое поведение, но не в этом. Здесь просто допущена ошибка.

Исправленный вариант примера:

Var result = "success"; switch (result) { case "success": console.log("Успех!"); break; case "invalidCaptcha": console.log("Неверная капча!"); break; default: console.log("Ошибка!"); }

Логические операторы

В JavaScript различают следующие логические операторы:

  • && - логическое "И";
  • || - логическое "ИЛИ";
  • ! -логическое "НЕ".

Если в логическом выражении operand1 && operand2 используются булевы значения, то результатом этого выражения будет значение true , если каждый из них равен true ; иначе значением этого выражения будет значение false .

False && false // false true && false // false false && true // false true && true // true

Если в логическом выражении operand1 && operand2 используются не булевы значения, то результатом этого выражения будет operand1 , если его можно привести к false ; иначе результатом этого выражения будет operand2 .

5 && 0 // 0 1 && 5 // 5 "строка" && undefined // undefined "строка1" && "строка2" // "строка2"

Если в логическом выражении operand1 || operand2 используются булевы значения, то результатом этого выражения будет значение true , если хотя бы один из них равен true ; иначе значением этого выражения будет значение false .

False || false // false true || false // true false || true // true true || true // true

Если в логическом выражении operand1 || operand2 используются не булевы значения, то результатом этого выражения будет operand1 , если его можно привести к true ; иначе результатом этого выражения будет operand2 .

5 || 0 // 5 1 || 5 // 1 "строка" || undefined // "строка" "строка1" || "строка2" // "строка1"

Результатом логического выражения!operand1 будет значение true , если operand1 равно false или его можно привести к этому значению; иначе результатом этого выражения будет значение false .

False // true !true // false !"строка" // false !5 // false"

Если бы программирование было бы всегда линейным, то, наверное, его бы и не было. Ведь практически в любой программе присутствуют различные разветвления, которые зависят от определённых внешних или внутренних факторов. Вот такие разветвления создаются с помощью условных операторов , о которых в этой статье я Вам и расскажу.

Общий вид условного оператора в JavaScript такой:

If (условие) {
//Блок операторов
}
else {
//Блок операторов
}

Сначала идёт ключевое слово if , которое сообщает браузеру, что дальше идёт условный оператор. Внутри скобок указывается условие, которое, соответственно, возвращает true или false . Если выражение в скобках было true (истинно ), то выполняется первый блок операторов, если условие false (ложно ), то выполняется блок операторов в else . Также блок else не является обязательным, и дальше я приведу такой пример.

Давайте теперь потренируемся уже на практике. Решим такую задачу: пользователь вводит число, а мы выводим сообщание - больше оно или меньше 5 .


if (x < 5) alert ("Введённое число меньше пяти");

Разберём этот пример. Первой строкой мы вызываем функцию prompt , которая выводит окно с просьбой ввести число. Дальше пользователь вводит число, которое записывается в переменную x . А дальше идёт условие, которое я перевожу так: Если x меньше 5, то вывести сообщение: "Введённое число меньше пяти", иначе вывести сообщение "Введённое число больше пяти" . Выражение x < 5 возвращает либо true ( < 5 ) или false (x >= 5 ). Также обратите внимание, что мы не используем фигурные скобки. Почему? Потому, что мы используем всего один оператор (функцию alert() ). В принципе, мы можем их поставить, и ничего не поменяется, однако, здесь они будут лишними.

Однако, наша задача содержит существенную ошибку. Если пользователь введёт "5 ", то у нас выводится сообщение "Введённое число больше пяти ", однако, это не совсем правильно. Поэтому давайте преобразуем условие таким образом:

If (x < 5) alert ("Введённое число меньше пяти");
else
if (x == 5) alert ("Вы ввели пять");
else alert("Введённое число больше пяти");

Как видите, блок else в первом условии преобразился. В блоке else проверяется на равенство x и 5-ти. И если это так, то выводится соответствующее сообщение, в противном случае, выводится, что число больше пяти. То есть условие внутри условия - это совершенно нормально. Также обратите внимание, что я по-прежнему не поставил фигурные скобки, так как if-else это один оператор. А когда только один оператор наличие скобок необязательно.

Давайте разберём ещё один пример. Создадим переменную, которая будет true , если введённое число положительное, и false , если число отрицательное.

Var x = prompt("Введите число");
var positive = true;
if (x < 0) positive = false;
alert (positive);

В данном примере используется классический пример, когда мы берём какую-то переменную и присваиваем ей значение по умолчанию. И если это требуется, то меняем. В данном случае, мы меняем значение по умолчанию, если число отрицательное. Однако, данный пример можно было бы написать ещё красивее:

Var x = prompt("Введите число");
var positive = x < 0;

Другими словами, мы переменной positive сразу присваиваем результат сравнения x и нуля.

Теперь поговорим о так называемых сложных условиях . В примерах выше мы рассматривали лишь простые условия, однако, существуют также и другие условия, которые состоят из нескольких условий. И здесь используются две операции: && - логическое И и || - логическое ИЛИ . Давайте напишем такое условие:

If ((x = 0)) {//блок операторов}

Данное условие (сложное условие) даст true , тогда и только тогда, когда x = 0 . В противном случае, вернётся false .

Рассмотрим сложное условие с логическим ИЛИ .

If ((x =).

Замечание! Логическая операция равно пишется двумя знаками равенства (==) . Также присутствует и логическая операция меньше или равно (

использование фигурных скобок

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

Пример приведенный выше, будет прекрасно работать и без фигурных скобок, так как в обоих блоках находятся только по одному оператору.

Внутри if можно написать любые логические операции , будь то они простые или сложные. Можно использовать и операторы AND (&&) и OR (||).

Замечание! Присутствие блока else, не является обязательным .

Например, если a равен b, и c равен d, то выводим соответствующее сообщение, иначе если отсутствует блок else, то просто идем дальше, к следующей строчке.

Var a = 4, b = 4, c = 8, d = 8; if((a == b) && (c == d)) document.write("a равен b И c равен d"); document.write("Следующая строчка кода");

Оператор if - else if - else

После блока if, может последовать один и больше блоков else if, и в конце уже блок else. Это удобно в случае, когда нужно использовать больше чем одно условие.


Для лучшего понимания возьмем какой-то пример из повседневной жизни. Например, у нас есть определенное кол-во розеток. Если у нас в комнате только одна розетка, то мы можем подключить только одно устройство, если две розетки то мы можем подключить две устройства и если больше, то мы можем подключить к электрической сети, все устройства из дома.

Теперь перейдем к программированию.

Var socket = 2; // Кол-во розеток в доме if(socket == 1)  document.write("

Мы можем подключить только одно устройство

"); else if(socket == 2){ document.write("

Мы можем подключить только две устройства

"); document.write("

Например телевизор и ноутбук

"); }else{ document.write("

Мы можем подключить к электрической сети все устройства из дома

"); }

В зависимости от значения переменной socket, сработает тот или иной блок кода. Как Вы уже наверняка поняли, что если socket равен 1, то сработает первый блок кода. Если socket равен 2, то сработает второй блок кода и если socket имеет любое другое значение (даже отрицательное число) то сработает третий блок кода.

Сокращенная запись if else

Сокращенную запись можно использовать в случае, когда в зависимости от некого условия, переменная может получить то или иное значение.


Например, если значение переменной a больше значения переменной b, то в переменную x запишем такое сообщение, "Переменная a больше переменной b" , иначе запишем что "Переменная a меньше переменной b".

Var a = 50, b = 100, x; x = (a > b) ? "

Переменная a больше переменной b

" : "

Переменная a меньше переменной b

"; //Выводим полученный результат document.write(x);

Вот и все о чем я хотел Вам сказать в этой статье. Условный оператор if-else используется, нежели в каждом скрипте, поэтому очень важно его знать и понимать. В следующей статье я Вам расскажу об еще одном условном операторе switch-case.

Вернёмся к нашим зайцам

Вспомним задание про зайцев и Мазая из прошлой главы.
Без использования условий и действий, выполняемых (или не выполняемых)
в зависимости от условий, подсчитать количество зайцев в последней
лодке будет непросто.

Добавим в фунцию lastBoatRabbits ветвление:

var lastBoatRabbits = function (totalRabbits ) { if (totalRabbits === 0 ) { // return 0 ; } else { var restRabbits = totalRabbits % 6 ; if (restRabbits === 0 ) { // return 6 ; } else { return restRabbits; } } };

Итак, если зайцев на речке нет , последняя лодка никого не привезёт (на самом деле, она вернётся почти сразу же, т.к. дедушка точно будет знать, что зайцев на речке нет).

А если количество зайцев на реке кратно 6 , то последней будет лодка, полностью загруженная зайцами.

Что ещё можно было бы улучшить в этой программе? Я бы использовал отдельную переменную,
хранящую количество зайцев, помещающихся в лодке, на тот случай, если благодарные
зайцы подарят Мазаю лодку побольше. Мало ли что вдруг.

function (totalRabbits ) { if (totalRabbits === 0 ) { return 0 ; } else { var restRabbits = totalRabbits % boatCapacity; if (restRabbits === 0 ) { return boatCapacity; } else { return restRabbits; } } }; Синтаксис ветвления

Ветвление может иметь часть, которая выполняется, если условие неверно,
а может его не иметь:

// Вариант с двумя ветками: if (rainIsFalling) { stayHome(); // Если rainIsFalling == true, выполняется эта часть } else { walkInAPark(); // Иначе выполняется эта часть } // Вариант с одной веткой: if (musicIsPlaying) { dance(); } // Если musicIsPlaying == false, выполнение программы просто идёт дальше Условия

В качестве условия в if может выступать выражение сравнения двух чисел или строк,
с использованием операций == , > , < , >= , 5 // => true 11 < 6 // => false 5 >= 5 // => true 3 != 3 // => false "abc" == "abc" // => true "abc" === "abc" // => true Переменные в качестве условия: var condition = 10 > 5 ; if (condition) { console .log("10 > 5" ); // Будет выполнено } Логические операции над условиями

Несколько выражений, возвращающих логическое (или приводимое к логическому) значений
можно объединить с помощью логических операций. Такими операциями называют:
логическое И && , логическое ИЛИ || и логическое отрицание! .

true && true ; // => true false || false ; // => false !false ; // => true

Логическое И возвращает true только в том случае, если с обоих сторон от него true ,
логическое ИЛИ возвращает false только в том случае, если с обоих сторон от него — false .
Отрицание возвращает false для true и, наоборот, true для false .

По правилам Javascript значения 0 , null и undefined приводятся к false .
Однако, получая результат && мы получим первое неприведённое значение, которое
приводится к false , а получая результат || — первое неприведённое значение,
которое приводится к true:

0 && true ; // => 0 6 || 7 || false ; // => 6 !0 ; // => true

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

var boatCapacity = 6 ; var lastBoatRabbits = function (totalRabbits ) { return totalRabbits && (totalRabbits % boatCapacity || boatCapacity); }; Задания
  • Напишите функцию fizzbuzz , которая принимает параметр number и:
    • Для чисел, кратных трём, возвращает "Fizz"
    • Для чисел, кратных пяти, возвращает "Buzz"
    • Для чисел, кратных пятнадцати (одновременно трём и пяти), возвращает "FizzBuzz"
    • В остальных случаях возвращает исходное число
  • Напишите фунцию iGoToNorth , которая принимает параметр number и определяет, подходит ли нам переданное число. Число подходит если оно больше 10, меньше 30 и кратно 7.

    • Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали создание циклов в javascript . В данной статье я бы хотел рассказать об условном операторе в JavaScript . Вообще всё программирование состоит из условий, и во всех языках программирования (JavaScript не стал исключением) существует понятие условного оператора. Смысл условного оператора состоит в том, что, если условие выполняется, то делать вот эти действия, если не выполняется — то делать другие действия. Общая схема условного оператора выглядит следующим образом:

    If (условие) { //Блок операторов }; else { //Блок операторов }

    Давайте сразу напишем какой-нибудь пример: будем запрашивать число у пользователя и, если оно четное, выводить сообщение "Это число четное" , если нет — "это число нечетное" :

    Условный оператор JavaScript var a = prompt("Введите число","Ваше число..."); if (a%2 == 0) alert("Это число четное"); else alert("Это число нечетное");

    Если вы наберете данный код, то увидите, что всё работает. Сейчас я вам покажу, как важен синтаксис в JavaScript . Уберите знак ";" перед else и код сразу перестанет работать. Поэтому всегда будьте внимательны. В одной из следующих статей, я расскажу, как отлавливать ошибки в JavaScript .
    Один условный оператор может вставляться в другой. Давайте добавим проверку на то, что пользователь внёс число "0".

    Условный оператор JavaScript var a = prompt("Введите число","Ваше число..."); if (a%2 == 0) { if (a == 0) alert("Вы ввели 0"); else alert("Это число четное"); } else alert("Это число нечетное");

    Сейчас я вам покажу, как проверять несколько условий. Есть такое понятие, как логическое "И" (обозначается с помощью символов &&). Также есть понятие логического "ИЛИ" (обозначается с помощью символов ||). Приоритет у логического "И" выше, т.е. сначала выполнится проверка этого условия, а потом проверка логического "ИЛИ".
    Давайте разберем такой пример: пусть у нас создаётся случайное число от 1 до 10. Необходимо вывести фразу "Нужное число = " и само число, если это число не равно 6 и больше 5 или больше 1, но меньше 4:

    Условный оператор JavaScript var a = 10 * Math.random(); //Math.random возвращает значение от 0 до 1, поэтому мы умножаем на 10 a = Math.round(a); //Округляем a до целого if ((a != 6 && a > 5) || (a > 1 && a < 4)) alert("Нужное число = "+a); else alert("Не соответствует условию = "+a);

    В данном случае нужными числами являются: 2,3,7,8,9,10. Другие числа не соответствуют условию.
    Также хочу обратить ваше внимание на оператор "!=", который означает "не равно". Напоследок, при составлении условий всегда обращайте внимание на расстановку скобок. Большинство ошибок связано с их неправильной расстановкой.
    

    2024 © gtavrl.ru.