Принятие решений в Вашем коде — условные конструкции

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Во многих языках программирования код должен иметь возможность принимать решения на основе введеных пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в  JavaScript работают так называемые "условия".

Необходимое условие: Базовая компьютерная грамотность, базовое понимание HTML и CSS, JavaScript first steps.
Цель: Понять принципы использования операторов условий в JavaScript.

Вы можете иметь это при одном условии ..!

Люди (и животные) принимают какие-либо решения всю жизнь, от малых ("стоит ли мне съесть одну печеньку или две?") до великих ("стоит ли мне остаться дома и работать на ферме отца или переехать в дргую страну и изучать астрофизику?")

Операторы условия в JavaScript позволяют нам указать разного рода действия в зависимости от выбранного пользователем или системой ответа (например одна печенька или две) и связать его с действием (результатом), например, результатом "съесть одну печеньку" будет "все еще буду чуствовать себя голодным", а результатом "съесть две печеньки" будет "буду чуствовать себя сытым, но мама меня наругает за то, что я съел все сладости". 

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

Давайте глянем на наиболее распространенный тип условного оператора, который вы будете использовать в JavaScript — if ... else оператор.

Базовый if ... else синтаксис

Базовый if...else синтаксис выглядит как pseudocode:

if (condition) {
  code to run if condition is true
} else {
  run some other code instead
}

Что мы имеем:

  1. Ключевое слово if расположено перед круглыми скобками.
  2. Условие для проверки (condition) , расположено внутри круглых скобок (например "это значение больше другого значения?", или "это значение существует?"). Это условие использует операторы сравнения (comparison operators), которые мы изучим позже, и возвратит нам true или false.
  3. Внутри скобок { } расположен код, который будет выполняться только в том случае, если условие (condition) верно (true).
  4. Ключевое слово else (иначе).
  5. Еще скобки { }, код внутри которых выполнится, только если условие не верно (не true).

Этот код довольно читабелен — он говорит "if (если)  condition (условие) возврящает true (истина), запусти код A, else (иначе) запусти B"

Стоит заметить, что  else и второй блок скобок { } не обязателен — следующий код так же будет работать:

if (condition) {
  код, который должен выполнить, если условие истина
}

какой-то другой код

Тем не менее, следует быть осторожным — в случае, если код внутри вторых скобок { } не контролируется условием, то этот код будет выполняться всегда. Это не плохо, просто вы должны помнить об этом, чаще вы хотите запустить один кусок кода или другой, но не оба.

И, наконец, иногда вы можете встретить код if...else без фигурных скобок в сокращенной форме:

if (condition) code to run if condition is true
else run some other code instead

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

Реальный пример

Чтобы понимать синтаксис лучше, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребенка.  Родитель может сказать: "Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь".  В JavaScript, мы можем представить это так: 

var shoppingDone = false;

if (shoppingDone === true) {
  var childsAllowance = 10;
} else {
  var childsAllowance = 5;
}

В этом коде, как показано, всегда будет shoppingDone равный false, что означает разочарование для нашего бедного ребенка. Мы должны предоставить механизм для родителя, чтобы установить для переменной shoppingDone значение  true , если ребенок помог с покупками.

Примечание: Вы можете увидеть больше в полной версии этого примера на GitHub (также посмотреть как он работает вживую.)

else if

В предыдущем примере предоставлено два выбора, или результата — но что, если мы хотим больше, чем два?

Существует способ привязать дополнительные варианты/результаты к вашему if...else — использоватьelse if. Для каждого дополнительного выбора требуется дополнительный блок, который нужно расположить между if() { ... } и else { ... } — проверьте следующий более сложный пример, который может быть частью простого приложения прогноза погоды:

<label for="weather">Выберите тип погоды сегодня: </label>
<select id="weather">
  <option value="">--Сделайте выбор--</option>
  <option value="sunny">Солнечно</option>
  <option value="rainy">Дождливо</option>
  <option value="snowing">Снежно</option>
  <option value="overcast">Облачно</option>
</select>

<p></p>
var select = document.querySelector('select');
var para = document.querySelector('p');

select.addEventListener('change', setWeather);

function setWeather() {
  var choice = select.value;

  if (choice === 'sunny') {
    para.textContent = 'Сегодня хорошо и солнечно. Носите шорты! Идите на пляж, или в парк, и купите мороженое.';
  } else if (choice === 'rainy') {
    para.textContent = 'Дождь падает за окном; возьмите плащ и зонт, и не находитесь слишком долго на улице.';
  } else if (choice === 'snowing') {
    para.textContent = 'Снег падает - морозно! Лучше всего посидеть с чашкой горячего шоколада или слепить снеговика.';
  } else if (choice === 'overcast') {
    para.textContent = 'Дождя нет, но небо серое и мрачное; он все может измениться в любую минуту, поэтому на всякий случай возьмите дождевик.';
  } else {
    para.textContent = '';
  }
}

  1. Здесь у нас есть элемент HTML <select> который позволяет нам выбирать разные варианты погоды и простой абзац.
  2. В JavaScript, мы создаем ссылки на элементы <select> и <p>, и добавляем слушатель события для элемента <select> , чтобы при изменении его значения, запускалась функция setWeather().
  3. Когда функция будет запущена, первоначально мы определим значение переменной choice , которая равна выбранному значению в элементе  <select>. Затем мы используем условный оператор для отображения текста внутри абзаца в зависимости от того, какое значение у переменной  choice. Обратите внимание, как все условия проверяются в else if() {...} блоках, за исключением первого, который использует if() {...}блок.
  4. Последний выбор, внутри  else {...} блока, в основном является «последним средством» — код внутри него будет запущен, если ни одно из условий не будет true. В этом случае он служит для удаления текста из абзаца, если ничего не выбрано, например, если пользователь решает повторно выбрать опцию "--Сделайте выбор--" которая указана в начале.

Примечание об операторах сравнения

Операторы сравнения используют для проверки условий внутри наших условных операторов. Сначала мы посмотрели на операторы сравнения в  нашей статье Базовая математика в JavaScript — цифры и операторы . Наш выбор это:

  • === и !== — проверяет одно значение идентично или не идентично другому.
  • < и > — проверяет одно значение меньше или больше, чем другое.
  • <= и >= — проверяет одно значение меньше или равно, либо больше или равно другому.

Примечание: Просмотрите материал по предыдущей ссылке, если вы хотите освежить свою память.

Мы хотели бы особо обратить внимание на проверку булевых значений (true/false),  и общий шаблон, который вы будете встречать снова и снова. Любое значение, которое не есть  false, undefined, null, 0, NaN, или пустая строка ('') фактически возвращает true при тестировании как условного оператора. Поэтому вы можете просто использовать имя собственной переменной, чтобы проверить, равна ли она true, или существует (т. е. переменная не равна undefined). Например:

var cheese = 'Cheddar';

if (cheese) {
  console.log('Ура! Есть сыр для приготовления бутерброда.');
} else {
  console.log('Сегодня нет сыра для бутерброда.');
}

И, возвращаясь, к нашему предыдущему примеру о ребенке, выполняющем поручение своего родителя, вы можете это записать так:

var shoppingDone = false;

if (shoppingDone) { // не нужно явно указывать '=== true'
  var childsAllowance = 10;
} else {
  var childsAllowance = 5;
}

Вложенность if ... else

Вполне нормально использовать один условны оператор if...else внутри другога — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать еще один набор вариантов в зависимости от температуры:

if (choice === 'sunny') {
  if (temperature < 86) {
    para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — хорошо и солнечно. Идите на пляж, или в парк, и купите мороженое.';
  } else if (temperature >= 86) {
    para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — Жара! Если вы хотите выйти на улицу, обязательно используйте солнцезащитный крем.';
  }
}

Несмотря на то, что весь код работает вместе, каждый условный оператор if...else работает полностью отдельно от другога.

Логические операторы: И, ИЛИ и НЕ

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

  • && — И; позволяет объединить два или более выражения так, что каждое из них отдельно должно иметь значение true , чтобы в итоге общее выражение имело значение true.
  • || — ИЛИ; позволяет объединить два или более выражения так, что одно или несколько из них должно иметь значение true , чтобы в итоге общее выражение имело значениеtrue.

Чтобы дать вам пример оператора И, предыдущий фрагмент кода можно переписать так:

if (choice === 'sunny' && temperature < 86) {
  para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — хорошо и солнечно. Идите на пляж, или в парк, и купите мороженое.';
} else if (choice === 'sunny' && temperature >= 86) {
  para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — Жара! Если вы хотите выйти на улицу, обязательно используйте солнцезащитный крем.';
}

Так, для примера, первый блок кода выполнится только в том случае, если  choice === 'sunny' иtemperature < 86 вернут значение true.

Давайте посмотрим на быстрый пример оператора ИЛИ:

if (iceCreamVanOutside || houseStatus === 'в огне') {
  //если подъехал фургон с мороженым или дом горит
  console.log('Вы должны быстро покинуть дом.');
} else {
  console.log('Вероятно, можно в нем оставаться.');
}

Последний тип логического оператора, НЕ, выраженный ! оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведенном выше примере:

if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
  console.log('Вероятно, можно в нем оставаться.');
} else {
  console.log('Вы должны быстро покинуть дом.');
}

В этом фрагменте, если условие ИЛИ возвращает true, оператор НЕ будет отрицать это и выражение вернет false.

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

if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
  // код выполняется
}

Распространенной ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить, со списком возможных значений этой переменной, разделенных операторами || (ИЛИ). Например.

if (x === 5 || 7 || 10 || 20) {
  // выполнить код
}

В данном примере условие в if(...)  всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придется выполнять полноценную проверку после каждого оператора ИЛИ:

if (x === 5 || x === 7 || x === 10 ||x === 20) {
  // выполнить код
}

Инструкция switch

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

В этом случае нам помогут инструкции switch – они принимают одно единственное выражение или значение, а затем просматривают ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняют код, назначенный этому варианту. Приведем общую схему такой инструкции:

switch (выражение) {
  case choice1:
    выполнить этот код
    break;

  case choice2:
    выполнить этот код, а не предыдущий
    break;
    
  // вариантов может быть любое количество

  default:
    а вообще-то, выполнить только этот код
}

Что мы имеем:

  1. Ключевое слово switch, за которым следует пара круглых скобок.
  2. В скобках приводится выражение или значение.
  3. Ключевое слово case, за которым следует вариант выбора (именно он проверяется на соответствие выражению или значению) и двоеточие.
  4. Код, который будет выполняться, если вариант совпадает с выражением.
  5. Инструкция break, за которой следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до инструкции break, и перейдет к выполнению кода, расположенного ниже инструкции switch.
  6. Вариантов выбора (пункты 3–5) может быть сколь угодно много.
  7. Ключевое слово default используется точно также, как любой другой вариант выбора (пункты 3–5) за тем исключением, что после default нет других вариантов выбора, поэтому инструкция break не требуется, никакого кода дальше нет. Это вариант выбора по умолчанию, выбираемый, если ни один из других вариантов не совпал с выражением.

Примечание. Вариант выбора default может быть пропущен, если выражение гарантированно совпадет с одним из вариантов выбора. В противном случае вариант default необходим.

Пример инструкции switch

Давайте рассмотрим реальный пример — перепишем наше приложение прогноза погоды с использованием инструкции switch:

<label for="weather">Выберите тип погоды сегодня: </label>
<select id="weather">
  <option value="">--Сделайте выбор--</option>
  <option value="sunny">Солнечно</option>
  <option value="rainy">Дождливо</option>
  <option value="snowing">Снежно</option>
  <option value="overcast">Облачно</option>
</select>

<p></p>
var select = document.querySelector('select');
var para = document.querySelector('p');

select.addEventListener('change', setWeather);


function setWeather() {
  var choice = select.value;

  switch (choice) {
    case 'sunny':
      para.textContent = 'Сегодня хорошо и солнечно. Наденьте шорты! Идите на пляж или в парк, и купите мороженое.';
      break;
    case 'rainy':
      para.textContent = 'На улице дождь. Возьмите плащ и зонт, и не гуляйте слишком долго';
      break;
    case 'snowing':
      para.textContent = 'Идет снег - морозно! Лучше всего посидеть с чашкой горячего шоколада или слепить снеговика.';
      break;
    case 'overcast':
      para.textContent = 'Дождя нет, но небо серое и мрачное; он все может измениться в любую минуту, поэтому на всякий случай возьмите дождевик.';
      break;
    default:
      para.textContent = '';
  }
}

Note: Вы можете найти этот пример на GitHub (также увидеть как он работает.)

Тернарный оператор

Это последний теоретический раздел данной статьи и мы перейдем к практическим упражнениям. Тернарный или условный оператор имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является true, и другое значение/выражение, если условие является false. Часто это очень удобная альтернатива блоку if...else, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия true/false. Общая схема оператора:

( условие) ? выполнить этот код : выполнить этот код вместо первого

Приведем простой пример:

var greeting = ( isBirthday ) ? 'С днем рождения, г-н Кузнецов! Хорошо Вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';

У нас есть переменная isBirthday , если она true, мы отправляем посетителю поздравление с днем рождения; если нет – выдаем стандартное приветствие.

Пример тернарного оператора

При использовании тернарного оператора не обязательно ограничиваться лишь значениями переменной, можно выполнять функции или строки кода; все, что угодно. В следующем примере показано простое средство выбора темы, задающее внешний вид веб-сайта с помощью тернарного оператора.

<label for="theme">Выберите тему: </label>
<select id="theme">
  <option value="white">Белая</option>
  <option value="black">Черная</option>
</select>

<h1>Это мой веб-сайт</h1>
var select = document.querySelector('select');
var html = document.querySelector('html');
document.body.style.padding = '10px';

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

select.onchange = function() {
  ( select.value === 'black' ) ? update('black','white') : update('white','black');
}

Мы используем элемент <select> для выбора темы (черная или белая), а также простой <h1> для отображения заголовка веб-сайта. Кроме того, у нас есть функция update(), принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.

Наконец, у нас есть слушатель событий onchange , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — select.value === 'black'. Если возвращается true, мы запускаем функцию update() с параметрами черного и белого, в результате чего получаем черный цвет фона и белый цвет текста. Если возвращается false, мы запускаем функцию update() с параметрами белого и черного, в результате чего цвета веб-сайта меняются на противоположные.

Note: Вы можете найти этот пример на GitHub (также увидеть как он работает.)

Практическое упражнение: простой календарь

В данном примере вы поможете нам закончить простое приложение календаря. Код включает:

  • Элемент <select>, позволяющий пользователю выбирать разные месяцы.
  • Обработчик событий onchange для обнаружения изменения значения, выбранного в меню <select>.
  • Функция createCalendar() , рисующая календарь и отображающая правильный месяц в элементе <h1>.

Вы должны написать условную конструкцию в функции обработчика onchange , сразу после комментария // ДОБАВЬТЕ СЮДА УСЛОВНОЕ ВЫРАЖЕНИЕ. Конструкция должна:

  1. Проверить выбранный месяц (хранящийся в переменной choice. Это будет значение элемента <select> после изменения значения, например, "Январь".)
  2. Задать переменную, скажем, days, равную количеству дней в выбранном месяце. Для этого нужно будет проверить количество дней в каждом месяце. Високосный год можно не учитывать.

Советы:

  • Советуем использовать логический оператор OR для группировки нескольких месяцев в рамках одного условия; многие месяцы имеют одинаковое количество дней.
  • Подумайте, какое количество дней в месяце встречается чаще всего и используйте его в качестве варианта по умолчанию.

Если допустили ошибку, используйте кнопку «Сброс», чтобы вернуться к исходному виду примера. Если у вас совсем ничего не получается, нажмите «Показать решение».

Практическое упражнение: расширяем выбор цветов

В данном примере вы будете использовать пример тернарного оператора, который мы рассматривали ранее, и превратите тернарный оператор в инструкцию switch, что позволит увеличить количество вариантов выбора для простого веб-сайта. Посмотрите на <select> — на этот раз он включает не два, а целых пять вариантов тем. Нужно добавить инструкцию switch сразу под комментарием // ДОБАВЬТЕ ИНСТРУКЦИЮ SWITCH:

  • Она должна принимать переменную choice в качестве входного выражения.
  • Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, черная, лиловая, желтая или психоделическая тема.
  • В блоке каждого элемента case необходимо вызывать функцию update(), которой передается два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.

Если допустили ошибку, используйте кнопку «Сброс», чтобы вернуться к исходному виду примера. Если у вас совсем ничего не получается, нажмите «Показать решение».

Заключение

Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с легкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью еще раз или свяжитесь с нами.

См. также

Метки документа и участники

Внесли вклад в эту страницу: Dmitrytbp, hasiev-elchin, fuckingRedBastard, evgor80, easydeads, mspunk, evgeniypotseluev
Обновлялась последний раз: Dmitrytbp,