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

Во многих языках программирования код должен должен иметь возможность принимать решения на основе введеных пользователем данных. Например, в игре, если у пользователя осталось 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), которые мы изучим позже, aи возвратит нам 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.

You can combine as many logical statements together as you want, in whatever structure. The following example executes the code inside only if both OR statements return true, meaning that the overall AND statement will return true:

if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
  // run the code
}

A common mistake when using the logical OR operator in conditional statements is to try to state the variable whose value you are checking once, and then give a list of values it could be to return true, separated by || (OR) operators. For example:

if (x === 5 || 7 || 10 || 20) {
  // run my code
}

In this case the condition inside if(...)  will always evaluate to true since 7 (or any other non-zero value) always evaluates to true. This condition is actually saying "if x equals 5, or 7 is true — which it always is". This is logically not what we want! To make this work you've got to specify a complete test either side of each OR operator:

if (x === 5 || x === 7 || x === 10 ||x === 20) {
  // run my code
}

switch statements

if...else statements do the job of enabling conditional code well, but they are not without their downsides. They are mainly good for cases where you've got a couple of choices, and each one requires a reasonable amount of code to be run, and/or the conditions are complex (e.g. multiple logical operators). For cases where you just want to set a variable to a certain choice of value or print out a particular statement depending on a condition, the syntax can be a bit cumbersome, especially if you've got a large number of choices.

switch statements are your friend here — they take a single expression/value as an input, and then look through a number of choices until they find one that matches that value, executing the corresponding code that goes along with it. Here's some more pseudocode, to give you an idea:

switch (expression) {
  case choice1:
    run this code
    break;

  case choice2:
    run this code instead
    break;
    
  // include as many cases as you like

  default:
    actually, just run this code
}

Here we've got:

  1. The keyword switch, followed by a set of parentheses.
  2. An expression or value inside the parentheses.
  3. The keyword case, followed by a choice that the expression/value could be, followed by a colon.
  4. Some code to run if the choice matches the expression.
  5. A break statement, followed by a semi-colon. If the previous choice matches the expression/value, the browser stops executing the code block here, and moves on to any code that appears below the switch statement.
  6. As many other cases (bullets 3–5) as you like.
  7. The keyword default, followed by exactly the same code pattern as one of the cases (bullets 3–5), except that default does not have a choice after it, and you don't need to break statement as there is nothing to run after this in the block anyway. This is the default option that runs if none of the choices match.

Note: You don't have to include the default section — you can safely omit it if there is no chance that the expression could end up equaling an unknown value. If there is a chance of this however, you need to include it to handle unknown cases.

A switch example

Let's have a look at a real example — we'll rewrite our weather forecast application to use a switch statement instead:

<label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">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 = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
      break;
    case 'rainy':
      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
      break;
    case 'snowing':
      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
      break;
    case 'overcast':
      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
      break;
    default:
      para.textContent = '';
  }
}

Note: You can also find this example on GitHub (see it running live on there also.)

Ternary operator

There is one final bit of syntax we want to introduce you to, before we get you to play with some examples. The ternary or conditional operator is a small bit of syntax that tests a condition and returns one value/expression if it is true, and another if it is false — this can be useful in some situations, and can take up a lot less code than an if...else block if you simply have two choices that are chosen between via a true/false condition. The pseudocode looks like this:

( condition ) ? run this code : run this code instead

So let's look at a simple example:

var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';

Here we have a variable called isBirthday — if this is true, we give our guest a happy birthday message; if not, we give her the standard daily greeting.

Ternary operator example

You don't just have to set variable values with the ternary operator; you can also run functions, or lines of code — anything you like. The following live example shows a simple theme chooser where the styling for the site is applied using a ternary operator.

<label for="theme">Select theme: </label>
<select id="theme">
  <option value="white">White</option>
  <option value="black">Black</option>
</select>

<h1>This is my website</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');
}

Here we've got a <select> element to choose a theme (black or white), plus a simple <h1> to display a website title. We also have a function called update(), which takes two colors as parameters (inputs). The website's background color is set to the first provided color, and its text color is set to the second provided color.

Finally, we've also got an onchange event listener that serves to run a function containing a ternary operator. It starts with a test condition — select.value === 'black'. If this returns true, we run the update() function with parameters of black and white, meaning that we end up with background color of black and text color of white. If it returns false, we run the update() function with parameters of white and black, meaning that the site color are inverted.

Note: You can also find this example on GitHub (see it running live on there also.)

Active learning: A simple calendar

In this example you are going to help us finish a simple calendar application. In the code you've got:

  • A <select> element to allow the user to choose between different months.
  • An onchange event handler to detect when the value selected in the <select> menu is changed.
  • A function called createCalendar() that draws the calendar and displays the correct month in the <h1> element.

We need you to write a conditional statement inside the onchange handler function, just below the // ADD CONDITIONAL HERE comment. It should:

  1. Look at the selected month (stored in the choice variable. This will be the <select> element value after the value changes, so "January" for example.)
  2. Set a variable called days to be equal to the number of days in the selected month. To do this you'll have to look up the number of days in each month of the year. You can ignore leap years for the purposes of this example.

Hints:

  • You are advised to use logical OR to group multiple months together into a single condition; many of them share the same number of days.
  • Think about which number of days is the most common, and use that as a default value.

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

Active learning: More color choices!

In this example you are going to take the ternary operator example we saw earlier and convert the ternary operator into a switch statement that will allow us to apply more choices to the simple website. Look at the <select> — this time you'll see that it has not two theme options, but five. You need to add a switch statement just underneath the // ADD SWITCH STATEMENT comment:

  • It should accept the choice variable as its input expression.
  • For each case, the choice should equal one of the possible values that can be selected, i.e. white, black, purple, yellow, or psychedelic.
  • For each case, the update() function should be run, and be passed two color values, the first one for the background color, and the second one for the text color. Remember that color values are strings, so need to be wrapped in quotes.

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

Conclusion

And that's all you really need to know about conditional structures in JavaScript right now! I'm sure you'll have understood these concepts and worked through the examples with ease; if there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

See also

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

 Внесли вклад в эту страницу: mspunk, evgeniypotseluev
 Обновлялась последний раз: mspunk,