В JavaScript часто возникают ситуации, при которых нужно проверить некое условие. Для этого необходимо использовать операторы сравнения и условную конструкцию if...else.
В этой статье мы рассмотрим:
- Условная конструкция if...else в JavaScript
- Операторы сравнения в JavaScript
- Логические операторы
- Проверка нескольких условия. Лестница if...else
Условная конструкция if...else в JavaScript
Условная конструкция if...else в JavaScript имеет такой синтаксис:
|
1 2 3 4 5 |
if (условие) { блок операций 1; } else { блок операций 2; } |
В качестве условия необходимо использовать некое выражение, которое является либо истинным, либо ложным. Иными словами результатом проверки условия в круглых скобках будет либо true, либо false.
Под блоком операций 1 подразумевается одно или несколько действий, которые выполняются в случае, если "условиe" истинно (или true). Здесь могут быть использованы любые операторы, в том числе и вложенный if. Для группировки нескольких действий используется блок с фигурными скобками{...}. Если действие всего одно, фигурные скобки можно не ставить. Если условие возвращает true, но при этом не требуется выполнять никакого действия, можно поставить ;, т.е. использовать пустую инструкцию.
В блоке операций 2 помещают ряд действий, которые выполняются в том случае, если условиe ложно ( то есть возвращает false). Можно использовать любые операторы, в том числе и вложенный if. Для группировки нескольких действий используется блок с фигурными скобками{...}. Если действие всего одно, фигурные скобки можно не ставить. Если нет действий, которые нужно сделать, если условие возвращает false, else просто не записывают.
Например, нужно узнать, является ли ли число, введенное пользователем, четным. Для реализации воспользуемся не формой, а диалоговым окном prompt() для ввода числа и alert() для вывода результата:
|
1 2 3 4 5 6 |
let x = +prompt("Введите число", "123"); if(x%2==0) { alert("Число четное"); } else { alert("Число нечетное"); } |
Попробуйте сами:
В этой ситуации, если результатом проверки условия является true или false, в блоке операций 1 и 2 находится 1 строка кода. Поэтому фигурные скобки можно опустить. Код сократиться, но при этом будет вполне работоспособным:
|
1 2 3 |
let x = +prompt("Введите число", "123"); if(x%2==0) alert("Число четное"); else alert("Число нечетное"); |
+ перед вызовом метода prompt() нужен для преобразования строки, которую возвращает этот метод, в число.Операторы сравнения в JavaScript
Для сравнения различных данных в JavaScript в конструкции if...else нужно использовать операторы сравнения, которые, скорей всего, хорошо знакомы вам из курса школьной математики. Они предполагают сравнение типа "равно", "больше"/"меньше", "равно", "больше либо равно", "меньше либо равно". Но в математике, сравнивая 2 числа или 2 выражения, вы как бы отвечали на вопрос 67>25 "да", 25<14 "нет", а в JavaScript результатом сравнения будут логические типы данных true или false, которые как раз используются в условии if..else. Плюс в JavaScript есть строгое равенство, которое предполагает сравнение типов данных.
| Оператор | Описание | Примеры, возвращающие true |
|---|---|---|
Больше (>) |
Возвращает true, если операнд слева больше операнда справа. |
x > y |
Больше или равно (>=) |
Возвращает true, если операнд слева больше или равен операнду справа. |
x >= y |
Меньше (<) |
Возвращает true, если операнд слева меньше операнда справа. |
x < y |
Меньше или равно (<=) |
Возвращает true, если операнд слева меньше или равен операнду справа. |
x <= y |
Равно (==) |
Возвращает true, если операнды равны. |
x == y40 == 4012 == '12' |
Не равно (!=) |
Возвращает true, если операнды не равны. |
x!= y |
Строго равно (===) |
Возвращает true, если операнды равны и имеют одинаковый тип. |
x === y |
Строго не равно(!==) |
Возвращает true, если операнды не равны и/или имеют разный тип. |
x !== "3" |
Рассмотрим примеры использования операторов сравнения >, <, ==:
Код этого примера таков:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form name="compareForm"> <p><label>Число 1 <input type="text" name="num1" size="5"></label> <label>Число 2 <input type="text" name="num2" size="5"></label></p> <p><input type="button" name="compareBtn" value="Сравнить числа"></p> <p id="compareResult"></p> </form> <script> let num1 = document.compareForm.num1, num2 = document.compareForm.num2; document.compareForm.compareBtn.onclick = function(){ if(num1.value == num2.value) compareResult.innerHTML = 'Числа равны'; else if(+num1.value < +num2.value) compareResult.innerHTML = 'Число 1 <strong>меньше</strong>, чем число 2'; else if(+num1.value > +num2.value) compareResult.innerHTML = 'Число 1 <strong>больше</strong>, чем число 2'; } </script> |
В этом примере использовано несколько условных конструкций if...else, т.к. нужно выполнить несколько проверок. Вывод результата происходит в абзац с id="compareResult" с помощью свойства innerHTML.
Логические операторы
Кроме операторов сравнения, в условных конструкциях JavaScript можно использовать три логических оператора: || (ИЛИ), && (И) и ! (НЕ). Эти операторы позволяют создавать сложные условия, в которых можно использовать комбинацию сравнительных операторов.
Логическое И
Обычно логическое И применяется для проверки на то, что оба условия возвращают true, то есть являются истинными. Например, вам нужно получить от пользователя число в диапазоне от 0 до 10 включительно, да к тому же оно должно быть четным. Получается, что нам нужно, чтобы совпали сразу 3 условия:
|
1 2 3 |
let x = prompt("Введите четное число от 0 до 10"); if(x>=0 && x <= 10 && x%2 == 0) console.log("Верно"); else console.log("Неверно"); |
Попробуйте сами, нажав на кнопку ниже:
Логическое НЕ
Логическое НЕ используется для изменения значения логических переменных на противоположное. Например, у нас есть некая переменная
|
1 2 3 4 5 6 |
let isAdult = true; if(+prompt("Введите ваш возраст") < 18 ) isAdult = !isAdult; if(isAdult) alert('Пора работать! ◕‿◕'); else alert('Еще учиться и учиться... ◉_◉'); |
В коде во втором условии с if() нет сравнения переменной isAdult с true, то есть isAdult==true в скобках отсутствует, так как сама переменная isAdult может быть либо true, либо false. Такое написание условий встречается довольно часто, причем следует также знать, что в JavaScript в качестве false в условии могут выступать еще несколько вариантов значений переменных или выражений.
К false в JavaScript относятся:
- false
- undefined
- null
- NaN (Not a Number - не число)
- 0 (нуль)
- '' или "" - любая пустая строка, в том числе и в обратных кавычках.
Все остальные значения воспринимаются в JavaScript как true.
Протестируем пример с логическим НЕ:
Логическое НЕ для изменения свойств элементов формы
Отлично логическое НЕ используется при работе с флажками (чекбоксами), когда в зависимости от того, отметил ли пользователь флажок, нужно сделать доступным или недоступным какое-либо текстовое поле или кнопку
В этом примере следует обратить внимание на то, что свойство checked, которое одновременно является и атрибутом для элемента типа checkbox, возвращает true, если элемент отмечен, или выделен (появляется галочка в стандартном его виде), и false, если галочка снята. Со свойством disabled, которое добавляет соответствующий атрибут для любого элемента формы, ситуация аналогична: элемент недоступен - disabled = true, элемент доступен - disabled=false.
Вывод: если нам нужно, чтобы элемент стал доступен (disabled=false) при выделении флажка (checked=true) нужно добавить перед свойством checked логическое НЕ (восклицательный знак), чтобы поменять его значение на противоположное. Очень компактное, хоть и не всегда сразу понятное решение задачи:
|
1 2 3 4 5 6 7 8 |
<label><input type="checkbox" id="agree"> Я согласен с условиями договора</label> <button id="nextStep" disabled>Продолжить</button> <script> document.getElementById("agree").addEventListener("click", function () { nextStep.disabled = !this.checked; }); </script> |
В примере ниже добавлен <div> с неким договором и ниже него расположены флажок и недоступная на данный момент кнопка. Клик по флажку делает кнопку доступной, одновременно изменяя ее внешния вид благодаря прописанным стилям, в том числе для фона и для курсора.
Некий договор для проверки условия
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus corrupti cumque mollitia aperiam, doloremque possimus impedit, expedita cupiditate, iure amet earum provident quam! Optio consequatur eum, obcaecati, quaerat architecto error.
Eaque iusto nisi tempore quidem maxime, aperiam! Obcaecati doloribus saepe illum enim consequatur iure distinctio expedita sunt quo. Quae excepturi error voluptates dolor vero, blanditiis, laborum unde laboriosam animi sequi.
Asperiores eligendi fugit, veniam doloribus quidem saepe, quis, pariatur soluta vero totam dicta quibusdam placeat. Rerum vitae harum, eveniet deleniti officia architecto, earum repellat reiciendis, ullam sint in reprehenderit. Facilis.
Doloremque repudiandae dolores, odit, velit aspernatur ipsum laborum. Numquam natus sequi eos esse rem quibusdam sit aliquam illo optio sed laudantium quam iure aperiam tempora facilis facere, porro pariatur doloribus!
Eum possimus necessitatibus numquam molestias tenetur voluptas natus debitis, earum sint, quas, esse laborum enim commodi distinctio tempore suscipit aut! Rerum perspiciatis laboriosam nesciunt est magnam, quaerat voluptatibus, sit officia.
Necessitatibus laboriosam minus voluptatum, autem quam fugit doloremque tempora, soluta blanditiis reprehenderit sequi tenetur, provident nulla architecto ullam aut a voluptatem placeat! Excepturi minima, ratione distinctio fugit neque unde impedit.
Sapiente quisquam possimus veritatis tempore in nostrum nesciunt provident cumque optio ullam, ex eos repudiandae, quis est odit magni ad autem? Commodi hic perferendis quod dolores delectus, libero enim ut!
Логическое ИЛИ
Логическое ИЛИ - это, пожалуй, самый интересный логический оператор в JavaScript. Во-первых, он позволяет сформировать условие из нескольких операторов сравнения, причём вернет true (истина), если хоть какое-либо из условий сработает. Во-вторых, логическое ИЛИ позволит выбрать одно из переданных значений, которое будет равно true, и записать его в переменную.
Рассмотрим множественные условия с использованием логического ИЛИ. В примере ниже при клике на кнопку мы выводим пользователю трижды запрос на ввод числа в диапазоне от 0 до 255. Однако в любом из диалоговых окон, выводимых методом prompt() пользователь может ввести неверное число. Поэтому нам понадобится несколько условий с логическими ИЛИ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<p><input type="button" onclick="colorWithOR()" value="Проверка с помощью логического ИЛИ"></p> <p id="colorOutput"></p> <script> function colorWithOR(){ let r = +prompt('Красный канал. Введите число от 0 до 255'), g = +prompt('Зеленый канал. Введите число от 0 до 255'), b = +prompt('Синий канал. Введите число от 0 до 255'), colorOutput = document.getElementById('colorOutput'); if(r<0 || r> 255 || g<0 || g>255 || b<0 || b > 255) alert("Вы ввели неверные данные"); else { colorOutput.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; colorOutput.textContent = `Цвет фона rgb(${r}, ${g}, ${b})`; } } </script> |
Чтобы скрипт не был просто проверкой, мы выведем в конце в абзац текст с данными, которые ввел пользователь на фоновом цвете, который сформирован из его данных. Если же пользователь "не попал" в нужный диапазон, будет выдано сообщение о вводе неверных данных.
Попробуйте сами работоспособность скрипта с логическими ИЛИ.
Проверка множественных условий с помощью массивов
В том случае, когда вам нужно проверить несколько условий, касающихся вполне конкретных величин, а не диапазонов, можно использовать метод массивов includes(). Вы убираете из кода длинные цепочки из логических || и сокращаете код. В этом случае изначально вам нужно сформировать некий начальный массив для проверки, в который будет входить несколько чисел, строк или объектов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const group = ["Иванов", "Любимов", "Морозова", "Петров", "Сидорова", "Ященко"]; let studentCheck = prompt("Введите фамилию студента", "Ященко"); //Длинный способ с проверкой нескольких условий if(studentCheck=="Иванов" || studentCheck=="Любимов" || studentCheck=="Петров" || studentCheck=="Сидорова" || studentCheck=="Ященко") { alert(`Студент ${studentCheck} ЕСТЬ в группе`); } else { alert(`Студента ${studentCheck} НЕТ в группе`); } //Короткий способ с использованием метода array.includes() if(group.includes(studentCheck)) { alert(`Студент ${studentCheck} учится в этой группе`); } else { alert(`Студент ${studentCheck} НЕ НАЙДЕН в группе`); } |
Попробуйте способ с проверкой методом includes() самостоятельно, нажав на кнопку. В диалоговом окне alert() будут выведены 2 сообщения с немного отличающимся текстом. В методе prompt() в качестве второго аргумента добавлена фамилия существующего студента. Вы можете ввести любую другую.
Проверка нескольких условия. Лестница if...else
В том случае, когда вы не можете обойтись одним условием, обычно применяется так называемая лестница if...else, которая подразумевает, что после else появляется еще одно условие с проверкой в if(...) , причем так можно повторять проверки несколько раз.
|
1 2 3 4 5 6 7 |
if (условие1){ блок операций 1 } else if (условие2){ блок операций 2 } else if (условие3) { блок операций 3 } else { конечный блок операций } |
Если вы используете автоматическое форматирование в своем редакторе кода, то увидите, как каждое следующее условие смещается вправо на несколько отступов, образуя специфичные ступеньки.
Работают условия внутри лестницы if..else следующим образом. Условия, заданные внутри операторов if вычисляются сверху вниз. Когда некое условие из перечисленных в операторах if() возвращает ИСТИНУ (true), выполняется блок кода, следующий за этим if(), а оставшаяся часть лестницы пропускается. Если все условия ложны, то выполняется блок кода, связанный с последним else. В том случае, если последний оператор else отсутствует, не выполняется ни один оператор. Нужно призадуматься, стоит ли оставлять код без последнего else.
Давайте рассмотрим практический пример с выбором фотографий. Мы предложим пользователю ввести ширину изображения и в зависимости от того, какое значение он введет, выведем один из вариантов фото с внешнего ресурса:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<button onclick="showPhoto()" id="btnForImg">Вывод изображения</button> <script> const imgBtn = document.getElementById('btnForImg'); function showPhoto() { let imgURL = 'https://source.unsplash.com/gift-boxes-PxM8aeJbzvk/'; let num = prompt("Введите число от 150 до 1000"); if(num<=150) imgURL += '150x150'; else if(num<=400) imgURL += '400x300'; else if(num<=800) imgURL += '800x500'; else imgURL += '1000x1000'; const img = new Image(); img.src = imgURL; img.alt = "Лебедь"; imgBtn.insertAdjacentElement('beforeBegin', img); } </script> |
В коде мы используем встраивание изображений разной ширины и высоты по id с сайта https://unsplash.com. С помощью нескольких условий if...else мы проверяем, в какой диапазон значений попадает введенное пользователем число. Если число меньше или равно определенному значению, то к постоянному адресу изображения мы добавляем данные о ширине и высоте загружаемого фото. Тег img мы создаем динамически с помощью конструктора new Image() , формируем для него с помощью условий строку для атрибута src, а затем также динамически, только средствами JS, добавляем тег <img> перед кнопкой с помощью метода insertAdjacentElement().
Смотрим на результат работы скрипта:
