path: root/files/pt-br/aprender/javascript/elementos_construtivos/conditionals/index.html

---
title: Tomando decisões no seu código — condicionais
slug: Aprender/JavaScript/Elementos_construtivos/conditionals
tags:
  - Artigo
  - Condicionais
  - Iniciante
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">Em qualquer linguagem de programação, o código precisa tomar decisões e realizar ações de acordo, dependendo de diferentes entradas. Por exemplo, em um jogo, se o número de vidas do jogador é 0, então o jogo acaba. Em um aplicativo de clima, se estiver sendo observado pela manhã, ele mostra um gráfico do nascer do sol; Mostra estrelas e uma lua se for noite. Neste artigo, exploraremos como as chamadas declarações condicionais funcionam em JavaScript.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Pré-requisitos:</th>
   <td>Conhecimento básico de algoritmos, um entendimento básico de HTML e CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript </a>primeiros passos.</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Entender como usar estruturas condicionais em JavaScript.</td>
  </tr>
 </tbody>
</table>

<h2 id="Você_pode_tê-lo_em_uma_condição_...!">Você pode tê-lo em uma condição ...!</h2>

<p>Seres humanos (e outros animais) tomam decisões o tempo todo que afetam suas vidas, desde pequenas ("devo comer um biscoito ou dois?") até grandes ("devo ficar no meu país de origem e trabalhar na fazenda do meu pai ou devo mudar para a América e estudar astrofísica?").</p>

<p>As declarações condicionais nos permitem representar tomadas de decisão como estas em <em>JavaScript</em>, a partir da escolha que deve ser feita (por exemplo, "um biscoito ou dois"), ao resultado obtido dessas escolhas (talvez o resultado de "comer um biscoito" possa ser "ainda sentido fome ", e o resultado de "comer dois biscoitos" pode ser "ter se sentido cheio, mas mamãe me falou para comer todos os biscoitos".)</p>

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

<h2 id="Declarações_if_..._else">Declarações if ... else</h2>

<p>De longe o tipo mais comum de declaração condicional que você usará em JavaScript  — as modestas declarações <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code>.</p>

<h3 id="Sintaxe_básica_if_..._else">Sintaxe básica if ... else</h3>

<p>Veja a sintaxe básica do <code>if...else</code> no {{glossary("pseudocódigo")}}:</p>

<pre class="notranslate"><strong>if (</strong><em>condicao</em><strong>) {</strong>
  <em>codigo para executar caso a condição seja verdadeira</em>
<strong>} else {</strong>
  <em>senão, executar este código</em>
<strong>}</strong></pre>

<p>Aqui nós temos:</p>

<ol>
 <li>A palavra reservada <code>if</code> seguida de um par de parênteses.</li>
 <li>Um teste condicional, localizado dentro dos parênteses (normalmente "este valor é maior que esse", ou "este valor existe"). Esta condição pode fazer uso dos <a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">operadores de comparação</a> que discutimos no último módulo, e podem retornar  <code>true</code> ou <code>false</code>.</li>
 <li>Um par de chaves, e dentro dele temos código — pode ser qualquer código que queiramos, e só vai ser executado se o teste condicional retornar <code>true</code>.</li>
 <li>A palavra reservada <code>else</code>.</li>
 <li>Outro par de chaves, dentro dele temos mais um pouco de código — pode ser qualquer código que queiramos, e só vai executar se o teste condicional retornar um valor diferente de <code>true</code>, neste caso <code>not true, </code>ou <code>false</code>.  </li>
</ol>

<p>Este tipo de código é bem legível por seres humanos — ele diz: "<strong>if</strong> a condição for <code>true</code>, execute o bloco de código A, <strong>else</strong> execute o bloco de código B" (<strong>se</strong> a condição for <strong>verdadeira</strong>, execute o bloco de código A, <strong>senão</strong> execute o bloco de código B).</p>

<p>Você precisa saber que não é obrigado a colocar a palavra reservada <code>else</code> e e o segundo bloco de par de chaves. O código apresentado a seguir é perfeitamente válido e não produz erros:</p>

<pre class="notranslate"><strong>if (</strong>condicao<strong>) {</strong>
  codigo para executar se a condição for verdadeira
<strong>}</strong>

código a ser executado</pre>

<p>Entretanto, você precisa ser cauteloso aqui — neste caso, repare que o segundo bloco de código não é controlado pela declaração condicional, então ele vai executar <strong>sempre</strong>, independente do teste condicional retornar <code>true</code> ou <code>false</code>. É claro, isto não é necessariamente uma coisa ruim, mas isso pode não ser o que você quer — com muita frequência você vai querer executar ou um bloco de código ou outro, não os dois juntos.</p>

<p>Por fim, você verá muitas vezes declarações <code>if...else</code> escritas sem as chaves, no seguinte estilo de escrita:</p>

<pre class="notranslate">if (condicao) executar aqui se for verdadeira
else executar este outro codigo</pre>

<p>Este é um código perfeitamente válido, mas não é recomendado — ele facilita que você escreva código fora do escopo do <code>if</code> e do <code>else</code>, o que seria mais difícil se você estivesse usando as chaves para delimitar os blocos de código, e usando multiplas linhas de código e identação.</p>

<h3 id="Um_exemplo_real">Um exemplo real</h3>

<p>Para entender bem a sintaxe, vamos considerar um exemplo real. Imagine um filhote de humanos sendo chamdo a ajudar com as tarefas do Pai ou da Mãe. Os pais podem falar: "Ei querido, se você me ajudar a ir e fazer as compras, eu te dou uma grana extra para que você possa comprar aquele brinquedo que você quer." Em JavaScript, nós podemos representar isso como:</p>

<p>var comprasFeitas = false;</p>

<p>if (comprasFeitas === true) {<br>
   var granaFilhote = 10;<br>
 } else {<br>
   var granaFilhote = 5;<br>
 }</p>

<p>Esse código como mostrado irá sempre resultar na variável <code>comprasFeitas</code> retornando <code>false</code>, sendo um desapontamento para nossas pobres crianças. Cabe a nós fornecer um mecanismo para o pai definir a variável <code>comprasFeitas</code> como <code>true</code> se o filho fez as compras.</p>

<div class="note">
<p><strong>Nota</strong>: Você pode ver a versão completa desse exemplo no <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">GitHub</a> (também veja <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">live</a>.)</p>
</div>

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

<p dir="ltr" id="tw-target-text">O último exemplo nos forneceu duas opções ou resultados - mas e se quisermos mais do que dois?</p>

<p dir="ltr">Existe uma maneira de encadear escolhas/resultados extras ao seu <code>if...else</code> — usando <code>else if</code>. Cada escolha extra requer um bloco adicional para colocar entre <code>if() { ... }</code> e <code>else { ... }</code> — confira o seguinte exemplo mais envolvido, que pode fazer parte de um aplicativo simples de previsão do tempo:</p>

<pre class="brush: html notranslate">&lt;label for="weather"&gt;Select the weather type today: &lt;/label&gt;
&lt;select id="weather"&gt;
  &lt;option value=""&gt;--Make a choice--&lt;/option&gt;
  &lt;option value="sunny"&gt;Sunny&lt;/option&gt;
  &lt;option value="rainy"&gt;Rainy&lt;/option&gt;
  &lt;option value="snowing"&gt;Snowing&lt;/option&gt;
  &lt;option value="overcast"&gt;Overcast&lt;/option&gt;
&lt;/select&gt;

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

<pre class="brush: js notranslate">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 = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
  } else if (choice === 'rainy') {
    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
  } else if (choice === '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.';
  } else if (choice === '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.';
  } else {
    para.textContent = '';
  }
}

</pre>

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

<ol>
 <li>Aqui, temos um elemento HTML {{htmlelement("select")}} que nos permite fazer escolhas de clima diferentes e um simples parágrafo.</li>
 <li>No JavaScript, estamos armazenando uma referência para ambos os elementos {{htmlelement("select")}} e {{htmlelement("p")}}, e adicionando um listener de evento ao elemento  <code>&lt;select&gt;</code> para que, quando o valor for alterado, a função <code>setWeather()</code> é executada.</li>
 <li>Quando esta função é executada, primeiro definimos uma variável chamada <code>choice</code> para o valor atual selecionado no elemento <code>&lt;select&gt;</code>. Em seguida, usamos uma instrução condicional para mostrar um texto diferente dentro do parágrafo, dependendo de qual é o valor de <code>choice</code> . Observe como todas as condições são testadas nos blocos <code>else if() {...}</code>, com exceção do primeiro, que é testado em um bloco <code>if() {...}</code>.</li>
 <li>A última escolha, dentro do bloco <code>else {...}</code>, é basicamente uma opção de "último recurso" — o código dentro dele será executado se nenhuma das condições for <code>true</code>. Nesse caso, ele serve para esvaziar o texto do parágrafo, se nada for selecionado, por exemplo, se um usuário decidir selecionar novamente a opção de espaço reservado "- Make a choice--" mostrada no início.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: Você pode também <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">encontrar este exemplo no GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">veja ele sendo executado</a> lá também.)</p>
</div>

<h3 id="Uma_nota_sobre_os_operadores_de_comparação">Uma nota sobre os operadores de comparação</h3>

<p>Operadores de comparação são usados para testar as condições dentro de nossas declarações condicionais. Nós primeiro olhamos para operadores de comparação de volta em nosso artigo <a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">Matemática básica em JavaScript - números e operadores</a>. Nossas escolhas são:</p>

<ul>
 <li><code>===</code> e <code>!==</code> — testar se um valor é idêntico ou não idêntico a outro.</li>
 <li><code>&lt;</code> e <code>&gt;</code> — teste se um valor é menor ou maior que outro.</li>
 <li><code>&lt;=</code> e <code>&gt;=</code> — testar se um valor é menor ou igual a, ou maior que ou igual a outro.</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: Revise o material no link anterior se quiser atualizar suas memórias sobre eles.</p>
</div>

<p>Queríamos fazer uma menção especial do teste de valores boolean (<code>true</code>/<code>false</code>) , e um padrão comum que você vai encontrar de novo e de novo. Qualquer valor que não seja  <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, ou uma string vazia (<code>''</code>) retorna <code>true</code> quando testado como uma instrução condicional, portanto, você pode simplesmente usar um nome de variável para testar se é verdadeiro , ou mesmo que existe (ou seja, não é indefinido). Por exemplo:</p>

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

if (cheese) {
  console.log('Yay! Cheese available for making cheese on toast.');
} else {
  console.log('No cheese on toast for you today.');
}</pre>

<p>E, voltando ao nosso exemplo anterior sobre a criança fazendo uma tarefa para seu pai, você poderia escrevê-lo assim:</p>

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

if (shoppingDone) { // don't need to explicitly specify '=== true'
  var childsAllowance = 10;
} else {
  var childsAllowance = 5;
}</pre>

<h3 id="Aninhando_if_..._else">Aninhando if ... else</h3>

<p>É perfeitamente correto colocar uma declaração <code>if...else</code> dentro de outra — para aninhá-las. Por exemplo, poderíamos atualizar nosso aplicativo de previsão do tempo para mostrar mais opções dependendo de qual é a temperatura:</p>

<pre class="brush: js notranslate">if (choice === 'sunny') {
  if (temperature &lt; 86) {
    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
  } else if (temperature &gt;= 86) {
    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
  }
}</pre>

<p>Mesmo que o código trabalhe em conjunto, cada uma das instruções <code>if...else</code> funcionam completamente independente uma da outra.</p>

<h3 id="Operadores_lógicos_AND_OR_e_NOT">Operadores lógicos: AND, OR e NOT</h3>

<p>Se você quiser testar várias condições sem escrever instruções aninhadas <code>if...else</code>, os <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">operadores lógicos</a> poderão ajudá-lo. Quando usado em condições, os dois primeiros fazem o seguinte:</p>

<ul>
 <li><code>&amp;&amp;</code> — AND; permite encadear duas ou mais expressões para que todas elas tenham que ser avaliadas individualmente como <code>true</code> assim toda a expressão retorna <code>true</code>.</li>
 <li><code>||</code> — OR; permite encadear duas ou mais expressões para que uma ou mais delas tenham que ser avaliadas individualmente como <code>true</code> assim toda a expressão retorna <code>true</code>.</li>
</ul>

<p>Para fornecer um exemplo AND, o fragmento de exemplo anterior pode ser reescrito assim:</p>

<pre class="brush: js notranslate">if (choice === 'sunny' &amp;&amp; temperature &lt; 86) {
  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
} else if (choice === 'sunny' &amp;&amp; temperature &gt;= 86) {
  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
}</pre>

<p>Então, por exemplo, o primeiro bloco de código só será executado se ambas as condições <code>choice === 'sunny'</code> <em>e </em><code>temperature &lt; 86</code> retornarem <code>true</code>.</p>

<p>Vamos ver um exemplo rápido de OR:</p>

<pre class="brush: js notranslate">if (iceCreamVanOutside || houseStatus === 'on fire') {
  console.log('You should leave the house quickly.');
} else {
  console.log('Probably should just stay in then.');
}</pre>

<p>O último tipo de operador lógico, NOT, expressado pelo operador <code>!</code>, pode ser usado para negar uma expressão. Vamos combiná-lo com OR no exemplo acima:</p>

<pre class="brush: js notranslate">if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
  console.log('Probably should just stay in then.');
} else {
  console.log('You should leave the house quickly.');
}</pre>

<p>Nesse trecho, se a instrução OR retornar <code>true</code>, o operador NOT negará isso para que a expressão geral retorne <code>false</code>.</p>

<p>Você pode combinar tantas instruções lógicas quanto quiser, em qualquer estrutura. O exemplo a seguir executa o código interno apenas se ambos os conjuntos de instruções OR retornarem true, significando que a instrução AND global também retornará true:</p>

<pre class="brush: js notranslate">if ((x === 5 || y &gt; 3 || z &lt;= 10) &amp;&amp; (loggedIn || userName === 'Steve')) {
  // run the code
}</pre>

<p>Um erro comum ao usar o operador OR lógico em instruções condicionais é tentar indicar a variável cujo valor você está verificando uma vez e, em seguida, fornecer uma lista de valores que poderia ser para retornar true, separados pelos operadores <code>||</code> (OR) . Por exemplo:</p>

<pre class="example-bad brush: js notranslate">if (x === 5 || 7 || 10 || 20) {
  // run my code
}</pre>

<p>Nesse caso, a condição dentro de <code>if(...)</code>  sempre será avaliada como verdadeira, já que 7 (ou qualquer outro valor diferente de zero) sempre é avaliado como verdadeiro. Esta condição está realmente dizendo "se x é igual a 5, ou 7 é verdade — o que sempre é". Isso logicamente não é o que queremos! Para fazer isso funcionar, você precisa especificar um teste completo ao lado de cada operador OR:</p>

<pre class="brush: js notranslate">if (x === 5 || x === 7 || x === 10 ||x === 20) {
  // run my code
}</pre>

<h2 id="Instruções_switch">Instruções switch</h2>

<p>As instruções <code>if...else</code> fazem o trabalho de habilitar o código condicional bem, mas elas também possuem suas desvantagens. Elas são boas principalmente para casos em que você tem algumas opções, e cada uma requer uma quantidade razoável de código para ser executado, e / ou as condições são complexas (por exemplo, vários operadores lógicos). Nos casos em que você deseja definir uma variável para uma determinada opção de valor ou imprimir uma determinada instrução dependendo de uma condição, a sintaxe pode ser um pouco incômoda, especialmente se você tiver um grande número de opções.</p>

<p>As <a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch">instruções<code>switch</code></a> são suas amigas aqui — elas tomam uma única expressão / valor como uma entrada e, em seguida, examinam várias opções até encontrarem um que corresponda a esse valor, executando o código correspondente que o acompanha. Aqui está mais um pseudocódigo, para você ter uma ideia:</p>

<pre class="notranslate">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
}</pre>

<p>Aqui nós temos:</p>

<ol>
 <li>A palavra-chave <code>switch</code>, seguido por um par de parênteses.</li>
 <li>Uma expressão ou valor dentro dos parênteses.</li>
 <li>A palavra-chave <code>case</code>, seguido por uma escolha que a expressão / valor poderia ser, seguido por dois pontos.</li>
 <li>Algum código para ser executado se a escolha corresponder à expressão.</li>
 <li>Uma instrução <code>break</code>, seguido de um ponto e vírgula. Se a opção anterior corresponder à expressão / valor, o navegador interromperá a execução do bloco de código aqui e passará para qualquer código que aparecer abaixo da instrução switch.</li>
 <li>Como muitos outros casos (marcadores 3 a 5) que você quiser.</li>
 <li>A palavra-chave <code>default</code>, seguido por exatamente o mesmo padrão de código de um dos casos (marcadores 3 a 5), exceto que o <code>default</code> não tem escolha após ele, e você não precisa da instrução <code>break</code>, pois não há nada para executar depois disso o bloco de qualquer maneira. Esta é a opção padrão que é executada se nenhuma das opções corresponder.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: Você não precisa incluir a seção <code>default</code> — você pode omiti-la com segurança se não houver chance de que a expressão possa se igualar a um valor desconhecido. Se houver uma chance disso, você precisará incluí-lo para lidar com casos desconhecidos.</p>
</div>

<h3 id="Um_exemplo_de_switch">Um exemplo de switch</h3>

<p>Vamos dar uma olhada em um exemplo real — vamos reescrever nosso aplicativo de previsão do tempo para usar uma instrução switch:</p>

<pre class="brush: html notranslate">&lt;label for="weather"&gt;Select the weather type today: &lt;/label&gt;
&lt;select id="weather"&gt;
  &lt;option value=""&gt;--Make a choice--&lt;/option&gt;
  &lt;option value="sunny"&gt;Sunny&lt;/option&gt;
  &lt;option value="rainy"&gt;Rainy&lt;/option&gt;
  &lt;option value="snowing"&gt;Snowing&lt;/option&gt;
  &lt;option value="overcast"&gt;Overcast&lt;/option&gt;
&lt;/select&gt;

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

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

<p>{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>

<div class="note">
<p><strong>Nota</strong>: Você pode <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">encontrar este exemplo no GitHub</a> (veja-o em <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">execução </a>lá também.)</p>
</div>

<h2 id="Operador_ternário">Operador ternário</h2>

<p>Há um bit final de sintaxe que queremos apresentar a você antes de começar a brincar com alguns exemplos. O <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">operador ternário ou condicional</a> é um pequeno bit de sintaxe que testa uma condição e retorna um valor / expressão se for  <code>true</code>, e outro caso seja <code>false</code> — isso pode ser útil em algumas situações e pode ocupar muito menos código que um bloco <code>if...else</code> se você simplesmente tiver duas opções escolhidas entre uma condição <code>true</code>/<code>false</code> condition. O pseudocódigo é assim:</p>

<pre class="notranslate">( condition ) ? run this code : run this code instead</pre>

<p>Então, vamos dar uma olhada em um exemplo simples:</p>

<pre class="brush: js notranslate">var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';</pre>

<p>Aqui temos uma variável chamada <code>isBirthday</code> — se ela for <code>true</code>, nós damos ao nosso convidado uma mensagem de feliz aniversário; se não, damos a ela a saudação diária padrão.</p>

<h3 id="Exemplo_de_operador_ternário">Exemplo de operador ternário</h3>

<p>Você não precisa apenas definir valores de variáveis com o operador ternário; Você também pode executar funções ou linhas de código - qualquer coisa que você gosta. O exemplo ao vivo a seguir mostra um seletor de temas simples em que o estilo do site é aplicado usando um operador ternário.</p>

<pre class="brush: html notranslate">&lt;label for="theme"&gt;Select theme: &lt;/label&gt;
&lt;select id="theme"&gt;
  &lt;option value="white"&gt;White&lt;/option&gt;
  &lt;option value="black"&gt;Black&lt;/option&gt;
&lt;/select&gt;

&lt;h1&gt;This is my website&lt;/h1&gt;</pre>

<pre class="brush: js notranslate">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('Ternary_operator_example', '100%', 300) }}</p>

<p>Aqui nós temos um elemento {{htmlelement('select')}} para escolher um tema (preto ou branco), além de um simples {{htmlelement('h1')}} para exibir um título do site. Nós também temos uma função chamada <code>update()</code>, que leva duas cores como parâmetros (entradas). A cor do plano de fundo do site é definida para a primeira cor fornecida e sua cor de texto é definida para a segunda cor fornecida.</p>

<p>Finalmente, nós também temos um evento listener <a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> que serve para executar uma função que contém um operador ternário. Começa com uma condição de teste — <code>select.value === 'black'</code>. Se este retornar <code>true</code>, nós executamos a função <code>update()</code> com parâmetros de preto e branco, o que significa que acabamos com a cor de fundo do preto e cor do texto de branco. Se retornar <code>false</code>, nós executamos a função <code>update()</code> com parâmetros de branco e preto, o que significa que a cor do site está invertida.</p>

<div class="note">
<p><strong>Nota</strong>: Você pode também <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">encontrar este exemplo no GitHub</a> (veja-o <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">executando</a> lá também.)</p>
</div>

<h2 id="Aprendizado_ativo_um_calendário_simples">Aprendizado ativo: um calendário simples</h2>

<p>Neste exemplo, você nos ajudará a concluir um aplicativo de calendário simples. No código que você tem:</p>

<ul>
 <li>Um elemento {{htmlelement("select")}} para permitir que o usuário escolha entre diferentes meses.</li>
 <li>Um evento manipulador <code>onchange</code> para detectar quando o valor selecionado no menu <code>&lt;select&gt;</code> é mudado.</li>
 <li>Uma função chamada <code>createCalendar()</code> que desenha o calendário e exibe o mês correto no elemento {{htmlelement("h1")}} .</li>
</ul>

<p>Precisamos que você escreva uma instrução condicional dentro da função do manipulador onchange, logo abaixo do comentário <code>// ADD CONDITIONAL HERE</code>. Ele deve:</p>

<ol>
 <li>Olhar para o mês selecionado (armazenado na variavel <code>choice</code>. Este será o valor do elemento <code>&lt;select&gt;</code> após o valor ser alterado, portanto, "Janeiro", por exemplo.</li>
 <li>Definir uma variável chamada  <code>days</code> para ser igual ao número de dias no mês selecionado. Para fazer isso, você terá que procurar o número de dias em cada mês do ano. Você pode ignorar anos bissextos para os propósitos deste exemplo.</li>
</ol>

<p>Dicas:</p>

<ul>
 <li>É aconselhável usar o OR lógico para agrupar vários meses em uma única condição; muitos deles compartilham o mesmo número de dias.</li>
 <li>Pense em qual número de dias é o mais comum e use isso como um valor padrão.</li>
</ul>

<p>Se você cometer um erro, você sempre pode redefinir o exemplo com o botão "Reset". Se você ficar realmente preso, pressione "Mostrar solução" para ver uma solução.</p>

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

<pre class="brush: html notranslate">&lt;div class="output" style="height: 500px;overflow: auto;"&gt;
  &lt;label for="month"&gt;Select month: &lt;/label&gt;
  &lt;select id="month"&gt;
    &lt;option value="January"&gt;January&lt;/option&gt;
    &lt;option value="February"&gt;February&lt;/option&gt;
    &lt;option value="March"&gt;March&lt;/option&gt;
    &lt;option value="April"&gt;April&lt;/option&gt;
    &lt;option value="May"&gt;May&lt;/option&gt;
    &lt;option value="June"&gt;June&lt;/option&gt;
    &lt;option value="July"&gt;July&lt;/option&gt;
    &lt;option value="August"&gt;August&lt;/option&gt;
    &lt;option value="September"&gt;September&lt;/option&gt;
    &lt;option value="October"&gt;October&lt;/option&gt;
    &lt;option value="November"&gt;November&lt;/option&gt;
    &lt;option value="December"&gt;December&lt;/option&gt;
  &lt;/select&gt;

  &lt;h1&gt;&lt;/h1&gt;

  &lt;ul&gt;&lt;/ul&gt;
&lt;/div&gt;

&lt;hr&gt;

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

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

  // ADD CONDITIONAL HERE

  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,'January');
&lt;/textarea&gt;

&lt;div class="playable-buttons"&gt;
  &lt;input id="reset" type="button" value="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">.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;
}
</pre>

<pre class="brush: js notranslate">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;
  updateCode();
});

solution.addEventListener('click', function() {
  textarea.value = jsSolution;
  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 === \'February\') {\n    days = 28;\n  } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\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,\'January\');';

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);
</pre>
</div>

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

<h2 id="Aprendizado_ativo_mais_opções_de_cores!">Aprendizado ativo: mais opções de cores!</h2>

<p>Neste exemplo, você terá o exemplo de operador ternário que vimos anteriormente e converterá o operador ternário em uma instrução switch que nos permitirá aplicar mais opções ao site simples. Olhe para a {{htmlelement("select")}} — desta vez você verá que não tem duas opções de tema, mas cinco. Você precisa adicionar uma instrução switch abaixo do comentário <code>// ADD SWITCH STATEMENT</code>:</p>

<ul>
 <li>Ele deve aceitar a variável <code>choice</code> como sua expressão de entrada.</li>
 <li>Para cada caso, a escolha deve ser igual a um dos valores possíveis que podem ser selecionados, ou seja, branco, preto, roxo, amarelo ou psicodélico.</li>
 <li>Para cada caso, a função <code>update()</code> deve ser executada e receber dois valores de cor, o primeiro para a cor de segundo plano e o segundo para a cor do texto. Lembre-se de que valores de cores são strings, portanto, precisam ser agrupados entre aspas.</li>
</ul>

<p>Se você cometer um erro, você sempre pode redefinir o exemplo com o botão "Reset". Se você ficar realmente travado, pressione "Show solution" para ver uma solução.</p>

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

<pre class="brush: html notranslate">&lt;div class="output" style="height: 300px;"&gt;
  &lt;label for="theme"&gt;Select theme: &lt;/label&gt;
  &lt;select id="theme"&gt;
    &lt;option value="white"&gt;White&lt;/option&gt;
    &lt;option value="black"&gt;Black&lt;/option&gt;
    &lt;option value="purple"&gt;Purple&lt;/option&gt;
    &lt;option value="yellow"&gt;Yellow&lt;/option&gt;
    &lt;option value="psychedelic"&gt;Psychedelic&lt;/option&gt;
  &lt;/select&gt;

  &lt;h1&gt;This is my website&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;

  // ADD SWITCH STATEMENT
}

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="Reset"&gt;
  &lt;input id="solution" type="button" value="Show solution"&gt;
&lt;/div&gt;
</pre>

<pre class="brush: js notranslate">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;
  updateCode();
});

solution.addEventListener('click', function() {
  textarea.value = jsSolution;
  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}';

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);
</pre>
</div>

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

<h2 id="Conclusão">Conclusão</h2>

<p>E isso é tudo que você realmente precisa saber sobre estruturas condicionais no JavaScript por agora! Tenho certeza que você terá entendido esses conceitos e trabalhou com os exemplos com facilidade; se houver algo que você não tenha entendido, sinta-se à vontade para ler o artigo novamente ou <a href="/en-US/Learn#Contact_us">contate-nos</a> para pedir ajuda.</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">Operadores de comparação</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">Declarações condicionais em detalhes</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">Referência if...else</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Referência do operador condicional (ternário)</a></li>
</ul>

<h2 id="Teste_suas_habilidades!">Teste suas habilidades!</h2>

<p>Você chegou ao final deste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir — Veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Teste suas habilidades: Condicionais</a>.</p>

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