path: root/files/ru/learn/javascript/building_blocks/conditionals/index.html

---
title: Принятие решений в вашем коде — условные конструкции
slug: Learn/JavaScript/Building_blocks/conditionals
tags:
  - JavaScript
  - Switch
  - else
  - if
  - Для начинающих
  - Операторы
  - Статья
translation_of: Learn/JavaScript/Building_blocks/conditionals
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</div>

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

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимое условие:</th>
   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Понять принципы использования операторов условий в JavaScript.</td>
  </tr>
 </tbody>
</table>

<h2 id="Выбор_одного_условия!..">Выбор одного условия!..</h2>

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

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

<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0 auto;"></p>

<h2 id="Оператор_if_..._else">Оператор if ... else</h2>

<p>Давайте глянем на наиболее распространённый тип условного оператора, который вы будете использовать в JavaScript — <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else"> оператор</a>.</p>

<h3 id="Базовый_if_..._else_синтаксис">Базовый if ... else синтаксис</h3>

<p>Базовый <code>if...else</code> синтаксис выглядит как {{glossary("pseudocode")}}:</p>

<pre>if (condition) {
  code to run if condition is true
} else {
  run some other code instead
}</pre>

<p>Что мы имеем:</p>

<ol>
 <li>Ключевое слово <code>if</code> расположено перед круглыми скобками.</li>
 <li>Условие для проверки (condition), расположено внутри круглых скобок (например "это значение больше другого значения?", или "это значение существует?"). Это условие использует операторы сравнения (<a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">comparison operators</a>), которые мы изучим позже, и возвратит нам <code>true</code> или <code>false</code>.</li>
 <li>Внутри скобок { } расположен код, который будет выполняться только в том случае, если условие (condition) верно (<code>true)</code>.</li>
 <li>Ключевое слово <code>else (иначе)</code>.</li>
 <li>Ещё скобки { }, код внутри которых выполнится, только если условие не верно (не <code>true)</code>.</li>
</ol>

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

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

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

какой-то другой код</pre>

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

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

<pre>if (condition) code to run if condition is true
else run some other code instead</pre>

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

<h3 id="Реальный_пример">Реальный пример</h3>

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

<pre class="brush: js">var shoppingDone = false;

if (shoppingDone === true) {
  var childsAllowance = 10;
} else {
  var childsAllowance = 5;
}</pre>

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

<div class="note">
<p><strong>Примечание</strong>: вы можете увидеть больше в <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">полной версии этого примера на GitHub</a> (также посмотреть как он <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">работает вживую</a>.)</p>
</div>

<h3 id="else_if">else if</h3>

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

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

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

&lt;p&gt;&lt;/p&gt;</pre>

<pre class="brush: js">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 = '';
  }
}

</pre>

<p>{{ EmbedLiveSample('else_if', '100%', 100) }}</p>

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

<div class="note">
<p><strong>Примечание</strong>: вы можете <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">найти этот пример на GitHub</a> (также <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">увидеть как он работает</a>)</p>
</div>

<h3 id="Примечание_об_операторах_сравнения">Примечание об операторах сравнения</h3>

<p>Операторы сравнения используют для проверки условий внутри наших условных операторов. Сначала мы посмотрели на операторы сравнения в  нашей статье <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Math#Comparison_operators">Базовая математика в JavaScript — цифры и операторы</a> . Наш выбор это:</p>

<ul>
 <li><code>===</code> и <code>!==</code> — проверяет одно значение идентично или не идентично другому.</li>
 <li><code>&lt;</code> и <code>&gt;</code> — проверяет одно значение меньше или больше, чем другое.</li>
 <li><code>&lt;=</code> и <code>&gt;=</code> — проверяет одно значение меньше или равно, либо больше или равно другому.</li>
</ul>

<div class="note">
<p><strong>Примечание</strong>: Просмотрите материал по предыдущей ссылке, если вы хотите освежить свою память.</p>
</div>

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

<pre class="brush: js">var cheese = 'Cheddar';

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

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

<pre class="brush: js">var shoppingDone = false;

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

<h3 id="Вложенность_if_..._else">Вложенность if ... else</h3>

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

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

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

<h3 id="Логические_операторы_И_ИЛИ_и_НЕ">Логические операторы: И, ИЛИ и НЕ</h3>

<p>Если вы хотите проверить несколько условий без записи вложенных <code>if...else</code> условий, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">логические операторы</a> помогут вам. При использовании в условиях, первые два оператора делают следующее:</p>

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

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

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

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

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

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

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

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

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

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

<pre class="brush: js">if ((x === 5 || y &gt; 3 || z &lt;= 10) &amp;&amp; (loggedIn || userName === 'Steve')) {
  // код выполняется
}</pre>

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

<pre class="example-bad brush: js">if (x === 5 || 7 || 10 || 20) {
  // выполнить код
}</pre>

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

<pre class="brush: js">if (x === 5 || x === 7 || x === 10 ||x === 20) {
  // выполнить код
}</pre>

<h2 id="Оператор_switch">Оператор switch</h2>

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

<p>В этом случае нам поможет <a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch">оператор <code>switch</code> </a>– он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:</p>

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

  case choice2:
    выполнить этот код, а не предыдущий
    break;

  // вариантов может быть любое количество

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

<p>Что мы имеем:</p>

<ol>
 <li>Ключевое слово <code>switch</code>, за которым следует пара круглых скобок.</li>
 <li>В скобках приводится выражение или значение.</li>
 <li>Ключевое слово <code>case</code>, за которым следует вариант выбора (именно он проверяется на соответствие выражению или значению) и двоеточие.</li>
 <li>Код, который будет выполняться, если вариант совпадает с выражением.</li>
 <li>Оператор <code>break</code>, за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора <code>break</code>, и перейдёт к выполнению кода, расположенного после оператора switch.</li>
 <li>Вариантов выбора (пункты 3–5) может быть любое количество.</li>
 <li>Ключевое слово <code>default</code> используется точно также, как любой другой вариант выбора (пункты 3–5) за тем исключением, что после <code>default</code> нет других вариантов выбора, поэтому инструкция <code>break</code> не требуется, никакого кода дальше нет. Это вариант выбора по умолчанию, выбираемый, если ни один из других вариантов не совпал с выражением.</li>
</ol>

<div class="note">
<p><strong>Примечание.</strong> Вариант выбора <code>default</code> может быть пропущен, если выражение гарантированно совпадёт с одним из вариантов выбора. В противном случае вариант <code>default</code> необходим.</p>
</div>

<h3 id="Пример_оператора_switch">Пример оператора switch</h3>

<p>Давайте рассмотрим реальный пример — перепишем наше приложение прогноза погоды с использованием оператора switch:</p>

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

&lt;p&gt;&lt;/p&gt;</pre>

<pre class="brush: js">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 = '';
  }
}</pre>

<p>{{ EmbedLiveSample('Пример_оператора_switch', '100%', 100) }}</p>

<div class="note">
<p><strong>Note</strong>: вы можете <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">найти этот пример на GitHub</a> (также увидеть <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">как он работает</a>.)</p>
</div>

<h2 id="Тернарный_оператор">Тернарный оператор</h2>

<p>Это последний теоретический раздел данной статьи и мы перейдём к практическим упражнениям. <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Тернарный или условный оператор</a> имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является <code>true</code>, и другое значение/выражение, если условие является <code>false</code>. Часто это очень удобная альтернатива блоку <code>if...else</code>, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия <code>true</code>/<code>false</code>. Общая схема оператора:</p>

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

<p>Приведём простой пример:</p>

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

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

<h3 id="Пример_тернарного_оператора">Пример тернарного оператора</h3>

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

<pre class="brush: html">&lt;label for="theme"&gt;Выберите тему: &lt;/label&gt;
&lt;select id="theme"&gt;
  &lt;option value="white"&gt;Белая&lt;/option&gt;
  &lt;option value="black"&gt;Чёрная&lt;/option&gt;
&lt;/select&gt;

&lt;h1&gt;Это мой веб-сайт&lt;/h1&gt;</pre>

<pre class="brush: js">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');
}
</pre>

<p>{{ EmbedLiveSample('Пример_тернарного_оператора', '100%', 300) }}</p>

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

<p>Наконец, у нас есть обработчик событий <a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — <code>select.value === 'black'</code>. Если возвращается <code>true</code>, мы запускаем функцию <code>update()</code> с параметрами чёрного и белого, в результате чего получаем чёрный цвет фона и белый цвет текста. Если возвращается <code>false</code>, мы запускаем функцию <code>update()</code> с параметрами белого и чёрного, в результате чего цвета веб-сайта меняются на противоположные.</p>

<div class="note">
<p><strong>Note</strong>: вы можете <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">найти этот пример на GitHub</a> (также увидеть <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">как он работает</a>.)</p>
</div>

<h2 id="Практическое_упражнение_простой_календарь">Практическое упражнение: простой календарь</h2>

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

<ul>
 <li>Элемент {{htmlelement("select")}}, позволяющий пользователю выбирать разные месяцы.</li>
 <li>Обработчик событий <code>onchange</code> для обнаружения изменения значения, выбранного в меню <code>&lt;select&gt;</code>.</li>
 <li>Функция <code>createCalendar()</code> , рисующая календарь и отображающая правильный месяц в элементе {{htmlelement("h1")}}.</li>
</ul>

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

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

<p>Советы:</p>

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

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

<div class="blockIndicator note">
<p>В HTML коде внутри <code>&lt;select&gt;</code> названия месяцев <code>value=""</code> введены на русском языке. Соответственно ссылки на них из вашего скрипта так же на русском. Не забываем про синтаксис. (прим. - <a href="/ru/profiles/ConstantineZz">ConstantineZz</a>)</p>
</div>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
&lt;div class="output" style="height: 500px;overflow: auto;"&gt;
&lt;label for="month"&gt;Выберите месяц: &lt;/label&gt;
&lt;select id="month"&gt;
&lt;option value="Январь"&gt;Январь&lt;/option&gt;
&lt;option value="Февраль"&gt;Февраль&lt;/option&gt;
&lt;option value="Март"&gt;Март&lt;/option&gt;
&lt;option value="Апрель"&gt;Апрель&lt;/option&gt;
&lt;option value="Май"&gt;Май&lt;/option&gt;
&lt;option value="Июнь"&gt;Июнь&lt;/option&gt;
&lt;option value="Июль"&gt;Июль&lt;/option&gt;
&lt;option value="Август"&gt;Август&lt;/option&gt;
&lt;option value="Сентябрь"&gt;Сентябрь&lt;/option&gt;
&lt;option value="Октябрь"&gt;Октябрь&lt;/option&gt;
&lt;option value="Ноябрь"&gt;Ноябрь&lt;/option&gt;
&lt;option value="Декабрь"&gt;Декабрь&lt;/option&gt;
&lt;/select&gt;
&lt;h1&gt;&lt;/h1&gt;
&lt;ul&gt;&lt;/ul&gt; &lt;/div&gt;

&lt;h2&gt;Editable code&lt;/h2&gt;

&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;

&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
var select = document.querySelector('select');
var list = document.querySelector('ul');
var h1 = document.querySelector('h1');

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

  // <code>ДОБАВЬТЕ СЮДА УСЛОВНОЕ ВЫРАЖЕНИЕ</code>

  createCalendar(days, choice);
}

function createCalendar(days, choice) {
  list.innerHTML = '';
  h1.textContent = choice;
  for (var i = 1; i &lt;= days; i++) {
    var listItem = document.createElement('li');
    listItem.textContent = i;
    list.appendChild(listItem);
   }
}

createCalendar(31,'Январь');
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
 &lt;input id="reset" type="button" value="Сброс"&gt;
 &lt;input id="solution" type="button" value="Показать решение"&gt;
&lt;/div&gt;</pre>

<pre class="brush: css">.output * {
  box-sizing: border-box;
}

.output ul {
  padding-left: 0;
}

.output li {
  display: block;
  float: left;
  width: 25%;
  border: 2px solid white;
  padding: 5px;
  height: 40px;
  background-color: #4A2DB6;
  color: white;
}

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}</pre>

<pre class="brush: js">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Скрыть решение';
  } else {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode();
});

var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'Февраль\') {\n days = 28;\n } else if(choice === \'Апрель\' || choice === \'Июнь\' || choice === \'Сентябрь\'|| choice === \'Ноябрь\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i &lt;= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'Январь\');';
var solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', '100%', 1110) }}</p>

<h2 id="Практическое_упражнение_расширяем_выбор_цветов">Практическое упражнение: расширяем выбор цветов</h2>

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

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

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

<div class="hidden">
<h6 id="Playable_code_2">Playable code 2</h6>

<pre class="brush: html">&lt;div class="output" style="height: 300px;"&gt;
  &lt;label for="theme"&gt;Выберите тему: &lt;/label&gt;
  &lt;select id="theme"&gt;
    &lt;option value="white"&gt;Белая&lt;/option&gt;
    &lt;option value="black"&gt;Чёрная&lt;/option&gt;
    &lt;option value="purple"&gt;Лиловая&lt;/option&gt;
    &lt;option value="yellow"&gt;Жёлтая&lt;/option&gt;
    &lt;option value="psychedelic"&gt;Психоделическая&lt;/option&gt;
  &lt;/select&gt;

  &lt;h1&gt;Это мой веб-сайт&lt;/h1&gt;
&lt;/div&gt;

&lt;hr&gt;

&lt;textarea id="code" class="playable-code" style="height: 450px;"&gt;
var select = document.querySelector('select');
var html = document.querySelector('.output');

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

  // ДОБАВЬТЕ ИНСТРУКЦИЮ SWITCH
}

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Сброс"&gt;
  &lt;input id="solution" type="button" value="Показать решение"&gt;
&lt;/div&gt;
</pre>

<pre class="brush: js">var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var code = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = 'Показать решение';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Показать решение') {
     textarea.value = solutionEntry;
     solution.value = 'Скрыть решение';
   } else {
     textarea.value = userEntry;
     solution.value = 'Показать решение';
   }
  updateCode();
});

var jsSolution = 'var select = document.querySelector(\'select\');\nvar html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n  var choice = select.value;\n\n  switch(choice) {\n    case \'black\':\n      update(\'black\',\'white\');\n      break;\n    case \'white\':\n      update(\'white\',\'black\');\n      break;\n    case \'purple\':\n      update(\'purple\',\'white\');\n      break;\n    case \'yellow\':\n      update(\'yellow\',\'darkgray\');\n      break;\n    case \'psychedelic\':\n      update(\'lime\',\'purple\');\n      break;\n  }\n}\n\nfunction update(bgColor, textColor) {\n  html.style.backgroundColor = bgColor;\n  html.style.color = textColor;\n}';
var solutionEntry = jsSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
   if (e.keyCode === 9) {
      e.preventDefault();
      insertAtCaret('\t');
   }

   if (e.keyCode === 27) {
      textarea.blur();
      }
  };

function insertAtCaret(text) {
   var scrollPos = textarea.scrollTop;
   var caretPos = textarea.selectionStart;

   var front = (textarea.value).substring(0, caretPos);
   var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
   textarea.value = front + text + back;
   caretPos = caretPos + text.length;
   textarea.selectionStart = caretPos;
   textarea.selectionEnd = caretPos;
   textarea.focus();
   textarea.scrollTop = scrollPos;
 }

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }


updateCode();

};

</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code_2', '100%', 650) }}</p>

<h2 id="Заключение">Заключение</h2>

<p>Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с лёгкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью ещё раз или <a href="/en-US/Learn#Contact_us">свяжитесь с нами</a>.</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">Comparison operators</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">Conditional statements in detail</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else reference</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Conditional (ternary) operator reference</a></li>
</ul>

<p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p>