initial commit

8 files changed, 3133 insertions, 0 deletions

diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/build_your_own_function/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/build_your_own_function/index.html
new file mode 100644
index 0000000000..d701a63823
--- /dev/null
+++ b/files/pt-br/aprender/javascript/elementos_construtivos/build_your_own_function/index.html
@@ -0,0 +1,242 @@
+---
+title: Construa sua própria função
+slug: Aprender/JavaScript/Elementos_construtivos/Build_your_own_function
+translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Com a maior parte da teoria essencial tratada no artigo anterior, este artigo fornece experiência prática. Aqui você terá algumas práticas construindo sua própria função personalizada. Ao longo do caminho, também explicaremos alguns detalhes úteis sobre como lidar com funções.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Alfabetização básica em informática, um entendimento básico de HTML e CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos do JavaScript</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funções — blocos reutilizáveis de código</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetiva:</th>
+   <td>Para fornecer alguma prática na criação de uma função personalizada e explicar alguns detalhes associados mais úteis.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aprendizagem_ativa_vamos_construir_uma_função">Aprendizagem ativa: vamos construir uma função</h2>
+
+<p>A função personalizada que vamos construir será chamada  <code>displayMessage().</code> Ele exibirá uma caixa de mensagem personalizada em uma página da Web e atuará como um substituto personalizado para a função de <a href="/en-US/docs/Web/API/Window/alert">alert()</a> interna do navegador. Já vimos isso antes, mas vamos apenas refrescar nossas memórias. Digite o seguinte no console JavaScript do seu navegador, em qualquer página de sua preferência:</p>
+
+<pre class="brush: js notranslate">alert('This is a message');</pre>
+
+<p>A função <code>alert</code> leva um único argumento — a string exibida na caixa de alerta. Tente variar a string para mudar a mensagem.</p>
+
+<p>A função <code>alert</code> é limitada: você pode alterar a mensagem, mas não pode variar com facilidade nada, como cor, ícone ou qualquer outra coisa. Nós vamos construir um que se mostrará mais divertido.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este exemplo deve funcionar bem em todos os navegadores modernos, mas o estilo pode parecer um pouco engraçado em navegadores um pouco mais antigos. Recomendamos que você faça esse exercício em um navegador moderno como o Firefox, o Opera ou o Chrome.</p>
+</div>
+
+<h2 id="A_função_básica">A função básica</h2>
+
+<p>Para começar, vamos montar uma função básica.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Para convenções de nomenclatura de função, você deve seguir as mesmas regras das <a href="/en-US/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">convenções de nomenclatura de variáveis</a>. Algo bom é como você pode diferenciá-los — os nomes das funções aparecem com parênteses depois deles e as variáveis não.</p>
+</div>
+
+<ol>
+ <li>Comece acessando o arquivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a> e fazendo uma cópia local. Você verá que o HTML é simples — o corpo contém apenas um único botão. Também fornecemos algumas CSS básicas para estilizar a caixa de mensagem personalizada e um elemento {{htmlelement("script")}} vazio para colocar nosso JavaScript.</li>
+ <li>Em seguida, adicione o seguinte dentro do elemento <code>&lt;script&gt;</code> :
+  <pre class="brush: js notranslate">function displayMessage() {
+
+}</pre>
+  Começamos com a palavra-chave <code>function</code>, o que significa que estamos definindo uma função. Isto é seguido pelo nome que queremos dar à nossa função, um par de parênteses e um conjunto de chaves. Quaisquer parâmetros que queremos dar à nossa função vão dentro dos parênteses, e o código que é executado quando chamamos a função vai dentro das chaves.</li>
+ <li>Por fim, adicione o seguinte código dentro das chaves:
+  <pre class="brush: js notranslate">var html = document.querySelector('html');
+
+var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+ </li>
+</ol>
+
+<p>Isso é um monte de código para passar, então vamos guiá-lo pouco a pouco.</p>
+
+<p>A primeira linha usa uma função da API do DOM chamada {{domxref("document.querySelector()")}} para selecionar o elemento {{htmlelement("html")}} e armazenar uma referência a ele em uma variável chamada <code>html</code>, para que possamos fazer coisas com ela mais tarde:</p>
+
+<pre class="brush: js notranslate">var html = document.querySelector('html');</pre>
+
+<p>A próxima seção usa outra função da API do DOM chamada {{domxref("Document.createElement()")}} para criar um elemento {{htmlelement("div")}} elemento e armazenar uma referência a ele em uma variável chamada <code>panel</code>. Este elemento será o recipiente externo da nossa caixa de mensagens.</p>
+
+<p>Em seguida, usamos outra função da API do DOM chamada {{domxref("Element.setAttribute()")}} para setar o atributo <code>class</code> atributo no nosso painel com um valor de <code>msgBox</code>. Isso é para facilitar o estilo do elemento — se você olhar para o CSS na página, verá que estamos usando um seletor de classe <code>.msgBox</code> para estilizar a caixa de mensagem e seu conteúdo.</p>
+
+<p>Finalmente, chamamos uma função DOM chamada {{domxref("Node.appendChild()")}} na variável <code>html</code> vque armazenamos anteriormente, que nidifica um elemento dentro do outro como um filho dele. Nós especificamos o painel <code>&lt;div&gt;</code> como o filho que queremos acrescentar dentro do elemento <code>&lt;html&gt;</code> Precisamos fazer isso porque o elemento que criamos não aparecerá na página sozinho — precisamos especificar onde colocá-lo.</p>
+
+<pre class="brush: js notranslate">var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);</pre>
+
+<p>As próximas duas seções fazem uso das mesmas funções <code>createElement()</code> e <code>appendChild()</code> que já vimos para criar dois novos elementos — um {{htmlelement("p")}} e um {{htmlelement("button")}} — e inseri-los na página como filhos do painel <code>&lt;div&gt;</code>. Nós usamos a sua propriedade {{domxref("Node.textContent")}} — que representa o conteúdo de texto de um elemento — para inserir uma mensagem dentro do parágrafo e um 'x' dentro do botão. Este botão será o que precisa ser clicado / ativado quando o usuário quiser fechar a caixa de mensagem.</p>
+
+<pre class="brush: js notranslate">var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);</pre>
+
+<p>Finalmente, usamos um manipulador eventos {{domxref("GlobalEventHandlers.onclick")}} para fazer com que, quando o botão é clicado, algum código seja executado para excluir todo o painel da página — para fechar a caixa de mensagem.</p>
+
+<p>Resumidamente, o manipulador <code>onclick</code> é uma propriedade disponível no botão (ou, na verdade, qualquer elemento na página) que pode ser definida para uma função para especificar qual código será executado quando o botão for clicado. Você aprenderá muito mais sobre isso em nosso artigo de eventos posteriores. Estamos tornando o manipulador <code>onclick</code> igual a uma função anônima, que contém o código a ser executado quando o botão é clicado. A linha dentro da função usa a função da API do DOM {{domxref("Node.removeChild()")}} para especificar que queremos remover um elemento filho específico do elemento HTML — nesse caso, o painel <code>&lt;div&gt;</code>.</p>
+
+<pre class="brush: js notranslate">closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+
+<p>Basicamente, todo esse bloco de código está gerando um bloco de HTML semelhante a isso e inserindo-o na página:</p>
+
+<pre class="brush: html notranslate">&lt;div class="msgBox"&gt;
+  &lt;p&gt;This is a message box&lt;/p&gt;
+  &lt;button&gt;x&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>Isso foi um monte de código para trabalhar — não se preocupe muito se você não se lembra exatamente como tudo funciona agora! A parte principal que queremos focar aqui é a estrutura e uso da função, mas queremos mostrar algo interessante para este exemplo.</p>
+
+<h2 id="Chamando_a_função">Chamando a função</h2>
+
+<p>Você tem sua própria definição de função escrita em seu elemento  <code>&lt;script&gt;</code>, mas não fará nada do jeito que está.</p>
+
+<ol>
+ <li>Tente incluir a seguinte linha abaixo da sua função para chamá-lo:
+  <pre class="brush: js notranslate">displayMessage();</pre>
+  Esta linha chama a função, fazendo com que ela seja executada imediatamente. Quando você salvar seu código e recarregá-lo no navegador, verá a pequena caixa de mensagem aparecer imediatamente, apenas uma vez. Nós só estamos chamando uma vez, afinal.</li>
+ <li>
+  <p>Agora abra suas ferramentas de desenvolvedor do navegador na página de exemplo, vá para o console JavaScript e digite a linha novamente, você verá que ela aparece novamente! Então isso é divertido — agora temos uma função reutilizável que podemos chamar a qualquer momento que quisermos.</p>
+
+  <p>Mas provavelmente queremos que apareça em resposta a ações do usuário e do sistema. Em um aplicativo real, essa caixa de mensagem provavelmente seria chamada em resposta a novos dados sendo disponibilizados, ou um erro ocorreria, ou o usuário tentando excluir seu perfil ("você tem certeza disso?") Ou o usuário adicionando um novo contato e a operação completando com sucesso ... etc.</p>
+
+  <p>Nesta demonstração, faremos com que a caixa de mensagem apareça quando o usuário clicar no botão.</p>
+ </li>
+ <li>Exclua a linha anterior que você adicionou.</li>
+ <li>Em seguida, vamos selecionar o botão e armazenar uma referência a ele em uma variável. Adicione a seguinte linha ao seu código, acima da definição da função:
+  <pre class="brush: js notranslate">var btn = document.querySelector('button');</pre>
+ </li>
+ <li>Por fim, adicione a seguinte linha abaixo da anterior:
+  <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre>
+  De maneira semelhante à nossa linha  <code>closeBtn.onclick...</code> dentro da função, aqui estamos chamando algum código em resposta a um botão sendo clicado. Mas, neste caso, em vez de chamar uma função anônima contendo algum código, estamos chamando nosso nome de função diretamente.</li>
+ <li>Tente salvar e atualizar a página — agora você verá a caixa de mensagem quando clicar no botão.</li>
+</ol>
+
+<p>Você pode estar se perguntando por que não incluímos os parênteses após o nome da função. Isso ocorre porque não queremos chamar a função imediatamente — somente depois que o botão foi clicado. Se você tentar mudar a linha para</p>
+
+<pre class="brush: js notranslate">btn.onclick = displayMessage();</pre>
+
+<p>e salvar e recarregar, você verá que a caixa de mensagem aparece sem que o botão seja clicado! Os parênteses neste contexto são às vezes chamados de "operador de invocação de função". Você só os usa quando deseja executar a função imediatamente no escopo atual. No mesmo sentido, o código dentro da função anônima não é executado imediatamente, pois está dentro do escopo da função.</p>
+
+<p>Se você tentou o último experimento, certifique-se de desfazer a última alteração antes de continuar.</p>
+
+<h2 id="Melhorando_a_função_com_parâmetros">Melhorando a função com parâmetros</h2>
+
+<p>Tal como está, a função ainda não é muito útil — nós não queremos apenas mostrar a mesma mensagem padrão todas as vezes. Vamos melhorar nossa função adicionando alguns parâmetros, permitindo-nos chamá-lo com algumas opções diferentes.</p>
+
+<ol>
+ <li>Primeiro de tudo, atualize a primeira linha da função:
+  <pre class="brush: js notranslate">function displayMessage() {</pre>
+  para isso:</li>
+ <li>
+  <pre class="brush: js notranslate">function displayMessage(msgText, msgType) {</pre>
+  Agora, quando chamamos a função, podemos fornecer dois valores de variáveis dentro dos parênteses para especificar a mensagem a ser exibida na caixa de mensagem e o tipo de mensagem que ela é.</li>
+ <li>Para utilizar o primeiro parâmetro, atualize a seguinte linha dentro da sua função:
+  <pre class="brush: js notranslate">msg.textContent = 'This is a message box';</pre>
+  to
+
+  <pre class="brush: js notranslate">msg.textContent = msgText;</pre>
+ </li>
+ <li>Por último, mas não menos importante, você precisa atualizar sua chamada de função para incluir um texto de mensagem atualizado. Altere a seguinte linha:
+  <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre>
+  para este bloco:
+
+  <pre class="brush: js notranslate">btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};</pre>
+  Se quisermos especificar parâmetros dentro de parênteses para a função que estamos chamando, então não podemos chamá-la diretamente — precisamos colocá-lo dentro de uma função anônima para que não fique no escopo imediato e, portanto, não seja chamado imediatamente. Agora ele não será chamado até que o botão seja clicado.</li>
+ <li>Recarregue e tente o código novamente e você verá que ele ainda funciona muito bem, exceto que agora você também pode variar a mensagem dentro do parâmetro para obter mensagens diferentes exibidas na caixa!</li>
+</ol>
+
+<h3 id="Um_parâmetro_mais_complexo">Um parâmetro mais complexo</h3>
+
+<p>Para o próximo parâmetro. Este vai envolver um pouco mais de trabalho — vamos configurá-lo para que, dependendo do parâmetro <code>msgType</code>, a função mostre um ícone diferente e uma cor de fundo diferente.</p>
+
+<ol>
+ <li>Primeiro de tudo, baixe os ícones necessários para este exercício (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">aviso</a> e <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">batepapo</a>) do GitHub. Salve-os em uma nova pasta chamada  <code>icons</code> no mesmo local que seu arquivo HTML.
+
+  <div class="note"><strong>Nota</strong>: Os icones <a href="https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon">aviso</a> e <a href="https://www.iconfinder.com/icons/1031441/chat_message_text_icon">batepapo</a> são encontrado em iconfinder.com, e desenhados por <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>. Obrigado!</div>
+ </li>
+ <li>Em seguida, encontre o CSS dentro do seu arquivo HTML. Faremos algumas alterações para abrir caminho para os ícones. Primeiro, atualize a largura do <code>.msgBox</code> de:
+  <pre class="brush: css notranslate">width: 200px;</pre>
+  para:</li>
+ <li>
+  <pre class="brush: css notranslate">width: 242px;</pre>
+ </li>
+ <li>Em seguida, adicione as seguintes linhas dentro da regra <code>.msgBox p { ... }</code>:
+  <pre class="brush: css notranslate">padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;</pre>
+ </li>
+ <li>Agora precisamos adicionar código à nossa função <code>displayMessage()</code> para manipular a exibição dos ícones. Adicione o seguinte bloco logo acima da chave de fechamento (<code>}</code>) da sua função:
+  <pre class="brush: js notranslate">if (msgType === 'warning') {
+  msg.style.backgroundImage = 'url(icons/warning.png)';
+  panel.style.backgroundColor = 'red';
+} else if (msgType === 'chat') {
+  msg.style.backgroundImage = 'url(icons/chat.png)';
+  panel.style.backgroundColor = 'aqua';
+} else {
+  msg.style.paddingLeft = '20px';
+}</pre>
+  Aqui, se o parâmetro <code>msgType</code> estiver definido como <code>'warning'</code>, o ícone de aviso será exibido e a cor de fundo do painel será definida como vermelha. Se estiver definido para <code>'chat'</code>, o ícone de bate-papo é exibido e a cor de fundo do painel é definida como azul aqua. Se o parâmetro <code>msgType</code> não estiver definido (ou para algo diferente), então a parte <code>else { ... }</code> do código entra em jogo, e o parágrafo é simplesmente fornecido padding padrão e nenhum ícone, sem conjunto de cores do painel de fundo também. Isso fornece um estado padrão se nenhum parâmetro <code>msgType</code> for fornecido, significando que é um parâmetro opcional!</li>
+ <li>Vamos testar nossa função atualizada, tente atualizar a chamada <code>displayMessage()</code> a partir disso:
+  <pre class="brush: js notranslate">displayMessage('Woo, this is a different message!');</pre>
+  para um destes:</li>
+ <li>
+  <pre class="brush: js notranslate">displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');</pre>
+  Você pode ver como a nossa pequena função (agora nem tanto) está se tornando útil.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você tiver problemas para fazer o exemplo funcionar, sinta-se à vontade para verificar seu código na <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">versão finalizada no GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">veja-a também em execução</a>), ou peça nos ajuda.</p>
+</div>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Parabéns por chegar ao final! Este artigo levou você ao longo de todo o processo de criação de uma função prática personalizada, que com um pouco mais de trabalho poderia ser transplantada em um projeto real. No próximo artigo, vamos encerrar as funções explicando outro conceito relacionado essencial — valores de retorno.</p>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/conditionals/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/conditionals/index.html
new file mode 100644
index 0000000000..0fec6d40e7
--- /dev/null
+++ b/files/pt-br/aprender/javascript/elementos_construtivos/conditionals/index.html
@@ -0,0 +1,616 @@
+---
+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>
diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/código_em_loop/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/código_em_loop/index.html
new file mode 100644
index 0000000000..058ce0385c
--- /dev/null
+++ b/files/pt-br/aprender/javascript/elementos_construtivos/código_em_loop/index.html
@@ -0,0 +1,940 @@
+---
+title: Código em loop
+slug: Aprender/JavaScript/Elementos_construtivos/Código_em_loop
+tags:
+  - Artigo
+  - CodingScripting
+  - DO
+  - Guide
+  - Iniciante
+  - JavaScript
+  - Loop
+  - break
+  - continue
+  - for
+  - while
+translation_of: Learn/JavaScript/Building_blocks/Looping_code
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">As linguagens de programação são muito úteis para concluir rapidamente tarefas repetitivas, desde vários cálculos básicos até praticamente qualquer outra situação em que você tenha muitos itens semelhantes para manipular. Aqui, veremos as estruturas de loop disponíveis no JavaScript que ajudam com essas necessidades..</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Conhecimento básico em informática, um básico entendimento  de HTML e CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo:</th>
+   <td>Entender como usar loops em JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mantenha-me_no_looplaço">Mantenha-me no loop(laço)</h2>
+
+<p>Loops, loops, loops. Além de estarem associados a <a href="https://en.wikipedia.org/wiki/Froot_Loops">populares cereais matinais</a>, <a href="https://pt.wikipedia.org/wiki/Montanha-russa">montanhas-russas</a> e <a href="https://pt.wikipedia.org/wiki/Loop_(m%C3%BAsica)">produção musical</a>, eles também são um conceito importante na programação. O loop de programação é como fazer a mesma coisa repetidas vezes - o que é chamado de <strong>iteração</strong> na linguagem de programação.</p>
+
+<p>Vamos considerar o caso de um agricultor que quer se certificar de que ele terá comida suficiente para alimentar sua família durante a semana. Ele pode usar o seguinte loop para conseguir isso:</p>
+
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Um loop geralmente possui um ou mais dos seguintes itens:</p>
+
+<ul>
+ <li> O <strong>contador</strong>, que é inicializado com um certo valor - este é o ponto inicial do loop ("Iniciar: não tenho comida", figura acima).</li>
+ <li>A <strong>condição de saída</strong>, que é o critério no qual o loop pára - geralmente o contador atinge um certo valor. Isso é ilustrado por "Tenho comida suficiente?",  na figura acima. Vamos dizer que ele precisa de 10 porções de comida para alimentar sua família.</li>
+ <li>Um <strong>iterador</strong>, que geralmente incrementa o contador em uma pequena quantidade a cada loop, sucessivamente, até atingir a condição de saída. Nós não ilustramos explicitamente isso acima, mas poderíamos pensar sobre o agricultor ser capaz de coletar 2 porções de comida por hora. Depois de cada hora, a quantidade de comida que ele coletou é incrementada em dois, e ele verifica se ele tem comida suficiente. Se ele atingiu 10 porções (a condição de saída), ele pode parar de coletar e ir para casa.</li>
+</ul>
+
+<p>No seu {{glossary("pseudocode")}}, isso seria algo como o seguinte:</p>
+
+<pre>loop(food = 0; foodNeeded = 10) {
+  if (food = foodNeeded) {
+    exit loop;
+    // Nós temos comida o suficiente, Vamos para casa
+  } else {
+    food += 2; // Passe uma hora coletando mais 2 alimentos(food)
+    // loop será executado novamente
+  }
+}</pre>
+
+<p>Assim, a quantidade de comida necessária é fixada em 10, e o montante que o agricultor tem atualmente é fixado em 0. Em cada iteração do ciclo, verificamos se a quantidade de alimento que o agricultor tem é igual à quantidade que ele precisa. Se assim for, podemos sair do loop. Se não, o agricultor gasta mais uma hora coletando duas porções de comida, e o laço é executado novamente.</p>
+
+<h3 id="Porque_se_importar">Porque se importar?</h3>
+
+<p>Neste ponto, você provavelmente já entendeu o conceito de alto nível por trás dos loops, mas provavelmente está pensando "OK, ótimo, mas como isso me ajuda a escrever um código JavaScript melhor?" Como dissemos anteriormente, <strong>os loops têm tudo a ver com fazer a mesma coisa repetidas vezes, o que é ótimo para concluir rapidamente tarefas repetitivas</strong>.</p>
+
+<p>Muitas vezes, o código será um pouco diferente em cada iteração sucessiva do loop, o que significa que você pode completar toda uma carga de tarefas que são semelhantes, mas não são totalmente iguais — se você tem muitos cálculos diferentes para fazer, e você quer fazer um diferente do outro, e não o mesmo repetidamente!</p>
+
+<p>Vejamos um exemplo para ilustrar perfeitamente por que os loops são uma coisa tão boa. Digamos que quiséssemos desenhar 100 círculos aleatórios em um elemento  {{htmlelement("canvas")}}  (pressione o botão Atualizar para executar o exemplo várias vezes para ver os conjuntos aleatórios diferentes):</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Random canvas circles&lt;/title&gt;
+    &lt;style&gt;
+      html {
+        width: 100%;
+        height: inherit;
+        background: #ddd;
+      }
+
+      canvas {
+        display: block;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      button {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;button&gt;Update&lt;/button&gt;
+
+  &lt;canvas&gt;&lt;/canvas&gt;
+
+
+    &lt;script&gt;
+    var btn = document.querySelector('button');
+    var canvas = document.querySelector('canvas');
+    var ctx = canvas.getContext('2d');
+
+    var WIDTH = document.documentElement.clientWidth;
+    var HEIGHT = document.documentElement.clientHeight;
+
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+
+    function random(number) {
+      return Math.floor(Math.random()*number);
+    }
+
+    function draw() {
+      ctx.clearRect(0,0,WIDTH,HEIGHT);
+      for (var i = 0; i &lt; 100; i++) {
+        ctx.beginPath();
+        ctx.fillStyle = 'rgba(255,0,0,0.5)';
+        ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+        ctx.fill();
+      }
+    }
+
+    btn.addEventListener('click',draw);
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Você não precisa entender todo esse código por enquanto, mas vamos ver a parte do código que realmente desenha os 100 círculos:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; 100; i++) {
+  ctx.beginPath();
+  ctx.fillStyle = 'rgba(255,0,0,0.5)';
+  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+  ctx.fill();
+}</pre>
+
+<ul>
+ <li><code>random()</code>, definido anteriormente no código, retorna um número inteiro entre <code>0</code> e <code>x-1</code>.</li>
+ <li><code>WIDTH</code> e <code>HEIGHT</code> são a largura e a altura da janela interna do navegador. </li>
+</ul>
+
+<p>Você deve ter notado - estamos usando um loop para executar 100 iterações desse código, cada uma delas desenhando um círculo em uma posição aleatória na página. A quantidade de código necessária seria a mesma se estivéssemos desenhando 100 círculos, 1.000 ou 10.000. Apenas um número tem que mudar.</p>
+
+<p>Se não estivéssemos usando um loop aqui, teríamos que repetir o seguinte código para cada círculo que queríamos desenhar:</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();</pre>
+
+<p>Isso ficaria muito chato, difícil e lento de manter. Loops são realmente os melhores.</p>
+
+<h2 id="O_for_loop_padrão">O for loop padrão</h2>
+
+<p>Vamos começar a explorar alguns exemplos específicos de construções de loop. O primeiro e que você usará na maior parte do tempo, é o loop <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> - ele tem a seguinte sintaxe:</p>
+
+<pre>for (inicializador; condição-saída; expressão-final) {
+  // código para executar
+}</pre>
+
+<p>Aqui nós temos:</p>
+
+<ol>
+ <li>A palavra-chave <code>for</code>, seguido por parênteses.</li>
+ <li>Dentro do parênteses temos três itens, sepados por ponto e vírgula:
+  <ol>
+   <li>O<strong> inicializador</strong>— geralmente é uma variável configurada para um número, que é incrementado para contar o número de vezes que o loop foi executado. É também por vezes referido como uma <strong>variável de contador</strong>.</li>
+   <li>A <strong>condição-saída</strong> — como mencionado anteriormente, aqui é definido qundo o loop deve parar de executar. Geralmente, essa é uma expressão que apresenta um operador de comparação, um teste para verificar se a condição de saída foi atendida.</li>
+   <li>A <strong>expressão-final </strong>— isso sempre é avaliado (ou executado) cada vez que o loop passou por uma iteração completa. Geralmente serve para incrementar (ou, em alguns casos, decrementar) a variável do contador, aproximando-a do valor da condição de saída.</li>
+  </ol>
+ </li>
+ <li>Algumas chaves contêm um bloco de código - esse código será executado toda vez que o loop for iterado.</li>
+</ol>
+
+<p>Vejamos um exemplo real para podermos visualizar o que isso faz com mais clareza.</p>
+
+<pre class="brush: js">var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+var info = 'My cats are called ';
+var para = document.querySelector('p');
+
+for (var i = 0; i &lt; cats.length; i++) {
+  info += cats[i] + ', ';
+}
+
+para.textContent = info;</pre>
+
+<p>Isso nos dá a seguinte saída:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Basic for loop example&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+
+    &lt;script&gt;
+    var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+    var info = 'My cats are called ';
+    var para = document.querySelector('p');
+
+    for (var i = 0; i &lt; cats.length; i++) {
+      info += cats[i] + ', ';
+    }
+
+    para.textContent = info;
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Você pode encontrar este <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">código de exemplo no GitHub</a> (também <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">veja em execução </a>).</p>
+</div>
+
+<p>Aqui mostra um loop sendo usado para iterar os itens em uma matriz e fazer algo com cada um deles - um padrão muito comum em JavaScript. Aqui:</p>
+
+<ol>
+ <li>O iterador, <code>i</code>, começa em <code>0</code> (<code>var i = 0</code>).</li>
+ <li>Foi dito para executar até que não seja menor que o comprimento do array dos gatos. Isso é importante - a condição de saída mostra a condição sob a qual o loop ainda será executado. No caso, enquanto <code>i &lt; cats.length</code>  for verdadeiro, o loop continuará executando.</li>
+ <li>Dentro do loop, nós concatenamos o item de loop atual (<code>cats[i]</code> é <code>cats[o nome do item que está iterado no momento]</code>) junto com uma vírgula e um espaço, no final da variável <code>info</code> . Assim:
+  <ol>
+   <li>Durante a primeira execução, <code>i = 0</code>, então <code>cats[0] + ', '</code> será concatenado na variável info ("Bill").</li>
+   <li>Durante a segunda execução, <code>i = 1</code>, so <code>cats[1] + ', '</code> será concatenado na variável info ("Jeff, ")</li>
+   <li>E assim por diante. Após cada execução do loop, 1 será adicionado à <code>i</code> (<code>i++</code>), então o processo será iniciado novamente.</li>
+  </ol>
+ </li>
+ <li>Quando <code>i</code> torna-se igual a <code>cats.length</code>, o loop é interrompido e o navegador passará para o próximo trecho de código abaixo do loop.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>:Nós fizemos a condição de saída <code>i &lt; cats.length</code>, e não <code>i &lt;= cats.length</code>, porque os computadores contam a partir de 0, não 1 - estamos começando <code>i</code> em <code>0</code>, e indo até <code>i = 4</code> (o index do último item do array). <code>cats.length</code> retorna 5, pois há 5 itens no array, mas não queremos chegar até  <code>i = 5</code>, pois isso retornaria  <code>undefined</code> para o último item (não há nenhum item  no índice 5 do array). Então, portanto, queremos ir até 1 a menos de  <code>cats.length</code> (<code>i &lt;</code>), não é o mesmo que <code>cats.length</code> (<code>i &lt;=</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Um erro comum nas condições de saída é usá-las "igual a" (<code>===</code>) em vez de dizer "menor ou igual a" (<code>&lt;=</code>). Se quiséssemos executar nosso loop até  <code>i = 5</code>, a condição de saída precisaria ser  <code>i &lt;= cats.length</code>. Se nós setarmos para  <code>i === cats.length</code>, o loop não seria executado em todos, porque  <code>i</code> não é igual a <code>5</code> na primeira iteração do loop, a execução pararia imediatamente.</p>
+</div>
+
+<p>Um pequeno problema que nos resta é que a sentença de saída final não é muito bem formada:</p>
+
+<blockquote>
+<p>Meus gatos se chamam: Bill, Jeff, Pete, Biggles, Jasmin,</p>
+</blockquote>
+
+<p>Neste caso, queremos alterar a concatenação na iteração final do loop, para que não tenhamos uma vírgula no final da frase. Bem, não há problema - podemos muito bem inserir uma condicional dentro do nosso loop for para lidar com este caso especial:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Nota: </strong>Você pode encontrar este <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">código de exemplo no GitHub</a> (também <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">veja em execução </a>).</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante</strong>: Com <strong>for</strong> - como acontece com todos os loops - você deve certificar-se de que o inicializador está iterado(configurado) para que ele atinja a condição de saída. Caso contrário, o loop continuará indefinidamente executando e o navegador irá forçá-lo a parar ou falhará. Isso é chamado de<strong> loop infinito</strong>.</p>
+</div>
+
+<h2 id="Saindo_do_loop_com_o_break">Saindo do loop com o break</h2>
+
+<p>Se você quiser sair de um loop antes que todas as iterações sejam concluídas, você poderá usar a instrução <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a>. Nós já encontramos isso em um artigo anterior, quando observamos as instruções switch - quando um determinado caso é atendido em uma <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">condição do switch</a> e que corresponde à expressão de entrada informada, a instrução break sai imediatamente da instrução switch e passa para o trecho de código seguinte.</p>
+
+<p>É o mesmo com loops  — um comando  <code>break</code>  irá imediatamente sair do loop e fazer o navegador passar para o código seguinte.</p>
+
+<p>Digamos que quiséssemos pesquisar por uma variedade de contatos e números de telefone e retornar apenas o número que queríamos encontrar? Primeiro, algum HTML simples  — um texto {{htmlelement("input")}} permitindo-nos iserir um nome para pesquisar, {{htmlelement("button")}} elemento para submeter a pesquisa e um {{htmlelement("p")}} elemento para mostrar o resultado em:</p>
+
+<pre class="brush: html">&lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
+&lt;input id="search" type="text"&gt;
+&lt;button&gt;Search&lt;/button&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<p>Agora para no JavaScript:</p>
+
+<pre class="brush: js">var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+var para = document.querySelector('p');
+var input = document.querySelector('input');
+var btn = document.querySelector('button');
+
+btn.addEventListener('click', function() {
+  var searchName = input.value;
+  input.value = '';
+  input.focus();
+  for (var i = 0; i &lt; contacts.length; i++) {
+    var splitContact = contacts[i].split(':');
+    if (splitContact[0] === searchName) {
+      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      break;
+    } else {
+      para.textContent = 'Contact not found.';
+    }
+  }
+});</pre>
+
+<div class="hidden">
+<h6 id="Hidden_code_3">Hidden code 3</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Simple contact search example&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
+  &lt;input id="search" type="text"&gt;
+  &lt;button&gt;Search&lt;/button&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+
+    &lt;script&gt;
+    var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+    var para = document.querySelector('p');
+    var input = document.querySelector('input');
+    var btn = document.querySelector('button');
+
+    btn.addEventListener('click', function() {
+      var searchName = input.value;
+      input.value = '';
+      input.focus();
+      for (var i = 0; i &lt; contacts.length; i++) {
+        var splitContact = contacts[i].split(':');
+        if (splitContact[0] === searchName) {
+          para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+          break;
+        } else if (i === contacts.length-1)
+              para.textContent = 'Contact not found.';
+        }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>Primeiramente, temos algumas definições de variáveis —  temos um array com as informações dos contatos, cada item é uma string e contém um nome e um número de telefone separados por dois pontos.</li>
+ <li>Em seguida, anexamos um ouvinte de evento ao botão (<code>btn</code>),  de modo que quando ele é pressionado, algum código é invocado para executar a pesquisa e retornar os resultados.</li>
+ <li>Armazenamos o valor que foi inserido no input de texto em uma variável chamada  <code>searchName</code>, antes de limpar a entrada de texto e focar novamente, deixando o campo pronto para a próxima pesquisa.</li>
+ <li>Agora, na parte interessante, o loop for:
+  <ol>
+   <li>Iniciamos o contador em <code>0</code>, executamos o loop até que o contador não seja menor que  <code>contacts.length</code>, e incrementamos <code>i</code> com 1 depois e cada iteração do loop.</li>
+   <li>Dentro do loop, primeiro dividimos o contato atual (<code>contacts[i]</code>) no caractere " : " e armazenamos os dois valores resultantes em uma matriz chamada  <code>splitContact</code>.</li>
+   <li>Em seguida, usamos uma instrução condicional para testar se o  <code>splitContact[0]</code> (nome do contato) é igual ao  <code>searchName</code>. Se for igual, inserimos uma string no parágrafo para mostrar em tela qual é o número do contato e usamos o <code>break</code> para encerrar o loop.</li>
+  </ol>
+ </li>
+ <li>
+  <p>Após <code>(contacts.length-1)</code> iterações, se o nome do contato não corresponder à pesquisa inserida, o texto do parágrafo será definido como "Contato não encontrado" e o loop continuará a iterar.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar este <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">código de exemplo no GitHub</a> (também <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">veja em execução</a> ).</p>
+</div>
+
+<h2 id="Ignorando_iterações_com_continue">Ignorando iterações com continue</h2>
+
+<p>A instrução <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> funciona de maneira semelhante ao  <code>break</code>, mas ao invés de sair inteiramente do loop, ele pula para a próxima iteração do loop. Vejamos outro exemplo que usa um número como entrada e retorna apenas os números que são quadrados de inteiros (números inteiros).</p>
+
+<p>O HTML é basicamente o mesmo do último exemplo - uma entrada de texto simples e um parágrafo para saída. O JavaScript é basicamente o mesmo, embora o próprio loop seja um pouco diferente:</p>
+
+<pre class="brush: js">var num = input.value;
+
+for (var i = 1; i &lt;= num; i++) {
+  var sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  para.textContent += i + ' ';
+}</pre>
+
+<p>Aqui está a saída:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_4">Hidden code 4</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Integer squares generator&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="number"&gt;Enter number: &lt;/label&gt;
+  &lt;input id="number" type="text"&gt;
+  &lt;button&gt;Generate integer squares&lt;/button&gt;
+
+  &lt;p&gt;Output: &lt;/p&gt;
+
+
+    &lt;script&gt;
+    var para = document.querySelector('p');
+    var input = document.querySelector('input');
+    var btn = document.querySelector('button');
+
+    btn.addEventListener('click', function() {
+      para.textContent = 'Output: ';
+      var num = input.value;
+      input.value = '';
+      input.focus();
+      for (var i = 1; i &lt;= num; i++) {
+        var sqRoot = Math.sqrt(i);
+        if (Math.floor(sqRoot) !== sqRoot) {
+          continue;
+        }
+
+        para.textContent += i + ' ';
+      }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>Nesse caso, a entrada deve ser um número (<code>num</code>). O loop <code>for</code> recebe um contador começando em 1 (como não estamos interessados em 0 neste caso), uma condição de saída que diz que o loop irá parar quando o contador se tornar maior que o input <code>num</code>, e um iterador que adiciona 1 ao contador a cada vez.</li>
+ <li>Dentro do loop, encontramos a raiz quadrada de cada número usando <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a>, e, em seguida, verificamos se a raiz quadrada é um inteiro, testando se é igual a ela mesma quando foi arredondada para o inteiro mais próximo é o que <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a> faz com o número que é passado).</li>
+ <li>Se a raiz quadrada e a raiz quadrada arredondada não forem iguais (<code>! ==</code>), isso significa que a raiz quadrada não é um número inteiro, portanto, não estamos interessados nela. Nesse caso, usamos a instrução <code>continue</code> para pular para a próxima iteração de loop sem registrar o número em nenhum lugar.</li>
+ <li>Se a raiz quadrada é um inteiro, nós pulamos o bloco if inteiramente para que a instrução <code>continue</code> não seja executada; em vez disso, concatenamos o valor <code>i</code> atual mais um espaço até o final do conteúdo do parágrafo.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Você pode encontrar este <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">código de exemplo no GitHub</a> (também <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">veja em execução</a> ).</p>
+</div>
+
+<h2 id="while_e_o_do_..._while">while e o do ... while</h2>
+
+<p><code>for</code> não é o único tipo de loop disponível em JavaScript. Na verdade, existem muitos outros, embora você não precise entender tudo isso agora, vale a pena dar uma olhada na estrutura dos outros tipos de loops para que você possa reconhecer a mesma lógica na funcionalidade porém empregada de uma forma diferente.</p>
+
+<p>Primeiro, vamos dar uma olhada no <a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> loop. A sintaxe deste loop é assim:</p>
+
+<pre>inicializador
+while (condição-saída) {
+  // code to run
+
+  expressão-final
+}</pre>
+
+<p>While funciona de maneira muito semelhante ao loop for, exceto que a variável inicializadora é definida antes do loop, e a expressão final é incluída dentro do loop após o código a ser executado - em vez de esses dois itens serem incluídos dentro dos parênteses. A condição de saída está incluída dentro dos parênteses, que são precedidos pela palavra-chave <code>while</code> e não por <code>for</code>.</p>
+
+<p>Os mesmos três itens ainda estão presentes, e eles ainda são definidos na mesma ordem do loop for - isso faz sentido, já que você ainda precisa ter um inicializador definido antes de poder verificar se ele atingiu a condição de saída ; a condição final é então executada após o código dentro do loop ser executado (uma iteração foi concluída), o que só acontecerá se a condição de saída ainda não tiver sido atingida.</p>
+
+<p>Vamos dar uma olhada novamente no nosso exemplo de lista de gatos, que reescrevemos para usar um loop while:</p>
+
+<pre class="brush: js">var i = 0;
+
+while (i &lt; cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}</pre>
+
+<div class="note">
+<p><strong>Nota: </strong>Isso ainda funciona da mesma forma esperada — dê uma olhada no <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">código em execução</a>  (também veja o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">código fonte completo</a>).</p>
+</div>
+
+<p>O <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> loop é muito semelhante, mas fornece uma variação na estrutura while:</p>
+
+<pre>initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)</pre>
+
+<p>Nesse caso, o inicializador novamente vem em primeiro lugar, antes que o loop seja iniciado. A palavra-chave precede diretamente as chaves que contêm o código a ser executado e a expressão final.</p>
+
+<p>O diferenciador aqui é que a condição de saída vem depois de todo o resto, envolvida em parênteses e precedida por uma palavra-chave while. Em um loop do ... while, o código dentro das chaves é sempre executado uma vez antes da verificação ser feita para ver se deve ser executada novamente (no while e para, a verificação vem primeiro, então o código pode nunca ser executado ).</p>
+
+<p>Vamos reescrever nosso exemplo de listagem de gato novamente para usar um loop do ... while:</p>
+
+<pre class="brush: js">var i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i &lt; cats.length);</pre>
+
+<div class="note">
+<p><strong>Nota: </strong>Novamente, isso funciona exatamente como esperado - dê uma olhada nele <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">executando no GitHub</a> (veja também o<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html"> código fonte completo</a>).</p>
+</div>
+
+<div class="warning">
+<p><strong>Importante:</strong> Com while e do ... while - como em todos os loops - você deve certificar-se de que o inicializador esteja iterado para que ele atinja a condição de saída. Caso contrário, o loop continuará indefinidamente e o navegador irá forçá-lo a parar ou falhará. Isso é chamado de loop infinito.</p>
+</div>
+
+<h2 id="Aprendizado_ativo_contagem_regressiva!">Aprendizado ativo: contagem regressiva!</h2>
+
+<p>Nesse exercício, nós queremos que você imprima uma simples contagem regressiva na caixa de saída, de 10 até terminar. Especificamente, queremos que você:</p>
+
+<ul>
+ <li>Faça um loop de 10 até 0. Fornecemos à você um inicializador  — <code>var i = 10;</code>.</li>
+ <li>Para cada iteração, crie um novo parágrafo e o anexe à saída  <code>&lt;div&gt;</code>, que selecionamos usando <code>var output = document.querySelector('.output');</code>. Nos comentários, nós providenciamos a você três linhas de código que precisam ser usadas em algum lugar dentro do loop:
+  <ul>
+   <li><code>var para = document.createElement('p');</code> — cria um novo parágrafo.</li>
+   <li><code>output.appendChild(para);</code> — anexa o parágrafo à saída <code>&lt;div&gt;</code>.</li>
+   <li><code>para.textContent =</code> — faz o texto dentro do parágrafo ser igual ao que você coloca do lado direito, depois do sinal de igual.</li>
+  </ul>
+ </li>
+ <li>Números de iteração diferentes exigem que texto diferente seja inserido no parágrafo para essa iteração (você precisará de uma declaração condicional e várias linhas <code>para.textContent =</code> ):
+  <ul>
+   <li>Se o número é 10, imprima "Contagem regressiva 10" no parágrafo.</li>
+   <li>Se o número é 0, imprima "Lançar!" no parágrafo.</li>
+   <li>Para qualquer outro número, apenas o imprima no parágrafo.</li>
+  </ul>
+ </li>
+ <li>Lembre-se de incluir um iterador! No entanto, neste exemplo, estamos em contagem regressiva após cada iteração, e não progressiva, então você não vai querer usar <code>i++</code> — como você itera para baixo?</li>
+</ul>
+
+<p>Se você cometer um erro, sempre poderá redefinir o exemplo com o botão "Reset". Se você realmente ficar preso, pressione "Show solution" para ver uma solução.</p>
+
+<div class="hidden">
+<h6 id="Active_learning">Active learning</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 410px;overflow: auto;"&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: 300px;width: 95%"&gt;
+var output = document.querySelector('.output');
+output.innerHTML = '';
+
+// var i = 10;
+
+// var para = document.createElement('p');
+// para.textContent = ;
+// output.appendChild(para);
+&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>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<pre class="brush: css">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>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<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 = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nvar i = 10;\n\nwhile(i &gt;= 0) {\n var para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Contagem regressiva \' + i;\n } else if(i === 0) {\n  para.textContent = \'Lançar!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\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 === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<p class="brush: js"></p>
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Aprendizado_ativo_preenchendo_uma_lista_de_convidados">Aprendizado ativo: preenchendo uma lista de convidados</h2>
+
+<p>Nesse exercício, nós queremos que você pegue uma lista de nomes armazenados em um array, e os coloque em uma lista de convidados. Mas não tão fácil — nós não queremos que Phil e Lola estejam nela porque eles são gananciosos e rudes, e sempre comem a comida toda! Nós temos duas listas, uma para convidados aceitos, e uma para convidados recusados.</p>
+
+<p>Especificamente, nós queremos que você:</p>
+
+<ul>
+ <li>Escreva um loop que iterará de 0 até o comprimento do array <code>people</code>. Você precisará começar com um inicializador de  <code>var i = 0;</code>, Mas qual condição de saída você precisa?</li>
+ <li>Durante cada iteração de loop, verifique se o item atual do array é igual a "Phil" ou "Lola" usando uma declaração condicional:
+  <ul>
+   <li>Se for, concatene o item do array no final do <code>textContent</code> do paragrafo <code>refused</code>, seguido por uma vírgula e um espaço.</li>
+   <li>Se não for, concatene o item do array no final do <code>textContent</code> do paragrafo <code>admitted</code>, seguido por uma vírgula e um espaço.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Nós já fornecemos a você:</p>
+
+<ul>
+ <li><code>var i = 0;</code> — Seu inicializador.</li>
+ <li><code>refused.textContent +=</code> — o início de uma linha que concatenará algo no final de <code>refused.textContent</code>.</li>
+ <li><code>admitted.textContent +=</code> — o início de uma linha que concatenará algo no final de <code>admitted.textContent</code>.</li>
+</ul>
+
+<p>Questão bônus extra  — depois de completar as tarefas acima com sucesso, você terá duas listas de nomes, separados por vírgulas, mas eles estarão desarrumados — haverá uma vírgula no final decada um. Você pode descobrir como escrever linhas que que cortam a última vírgula em cada caso, e adicionar um ponto final? Dê uma olhada no artigo <a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos úteis de string</a> para ajuda.</p>
+
+<p>Se você cometer um erro, sempre poderá redefinir o exemplo com o botão "Reset". Se você realmente ficar preso, pressione "Show solution" para ver uma solução.</p>
+
+<div class="hidden">
+<h6 id="Active_learning_2">Active learning 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 100px;overflow: auto;"&gt;
+  &lt;p class="admitted"&gt;Admit: &lt;/p&gt;
+  &lt;p class="refused"&gt;Refuse: &lt;/p&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 people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];
+
+var admitted = document.querySelector('.admitted');
+var refused = document.querySelector('.refused');
+admitted.textContent = 'Admit: ';
+refused.textContent = 'Refuse: '
+
+// var i = 0;
+
+// refused.textContent += ;
+// admitted.textContent += ;
+
+&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">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 = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i &lt; people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
+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 === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Which_loop_type_should_you_use">Which loop type should you use?</h2>
+
+<p>For basic uses, <code>for</code>, <code>while</code>, and <code>do...while</code> loops are largely interchangeable. They can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive. Let's have a look at them again.</p>
+
+<p>First <code>for</code>:</p>
+
+<pre>for (initializer; exit-condition; final-expression) {
+  // code to run
+}</pre>
+
+<p><code>while</code>:</p>
+
+<pre>initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}</pre>
+
+<p>and finally <code>do...while</code>:</p>
+
+<pre>initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)</pre>
+
+<p>Nós recomendamos o uso do <code>for</code>, pelo menos no começo, já que ele é provavelmente a forma mais fácil de lembrar de tudo  — o inicializador, a condição de saída, e a expressão final final tudo fica ordenadamente dentro dos parênteses, então é fácil de ver onde eles estão e para verifcar se você não os esqueceu.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration guide</a>.</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>This article has revealed to you the basic concepts behind, and different options available when, looping code in JavaScript. You should now be clear on why loops are a good mechanism for dealing with repetitive code, and be raring to use them in your own examples!</p>
+
+<p>If there is anything you didn't understand, feel free to read through the article again, or <a href="/en-US/Learn#Contact_us">contact us</a> to ask for help.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration in detail</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for statement reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> references</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> references</li>
+ <li>
+  <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — some advanced loop best practices</p>
+ </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/events/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/events/index.html
new file mode 100644
index 0000000000..dd6e41f674
--- /dev/null
+++ b/files/pt-br/aprender/javascript/elementos_construtivos/events/index.html
@@ -0,0 +1,582 @@
+---
+title: Introdução a eventos
+slug: Aprender/JavaScript/Elementos_construtivos/Events
+tags:
+  - Aprender
+  - Artigo
+  - Guía
+  - Iniciante
+  - JavaScript
+  - Programando
+  - eventos
+translation_of: Learn/JavaScript/Building_blocks/Events
+---
+<div>
+<div>{{LearnSidebar}}</div>
+</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Eventos são ações ou ocorrências que acontecem no sistema que estamos desenvolvendo, no qual este te alerta sobre essas ações para que você possa responder de alguma forma, se desejado. Por exemplo, se o usuário clica em um botão numa pagina web, você pode querer responder a esta ação mostrando na tela uma caixa de informações. Nesse artigo, nós iremos discutir sobre alguns conceitos importantes envolvendo eventos, e veremos como eles funcionam nos browsers. Isto não será algo cansativo para estudar; somente o que você precisar saber até agora.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Conhecimentos básicos em informática, conhecimento básico em HTML e CSS,  <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript, primeiros passos</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender a teoria fundamentos dos eventos, como eles funcionam nos browsers, e como eventos podem ser diferentes dependendo do ambiente de desenvolvimento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aventuras_em_Série">Aventuras em Série</h2>
+
+<p>Como mencionado acima, <strong>eventos </strong>são ações ou ocorrências que acontecem no sistema que estamos desenvolvendo — o sistema irá disparar algum tipo de sinal quando o evento acontecer, além de prover um mecanismo pelo qual alguma ação automática possa ser executada (ou seja, rodar algum código) quando o evento ocorrer. Por exemplo, em um aeroporto, quando a pista está livre para um avião decolar, um sinal é repassado ao piloto, e como resultado, ele inicia a decolagem.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p>
+
+<p>No caso da web, eventos são disparados dentro da janela do navegador, e tende a estarem anexados a algum item especifico nele — pode ser um único elemento, um conjunto de elementos, o HTML carregado na guia atual, ou toda a janela do navegador. Existem vários tipos diferentes de eventos que podem vir a acontecer, por exemplo:</p>
+
+<ul>
+ <li>O usuário clicando com o mouse sobre um certo elemento ou passando o cursor do mouse sobre um certo elemento.</li>
+ <li>O usuário pressionando uma tecla do teclado.</li>
+ <li>O usuário redimensionando ou fechando a janela do navegador.</li>
+ <li>Uma pagina da web terminando de carregar.</li>
+ <li>Um formulário sendo enviado.</li>
+ <li>Um video sendo reproduzido, interrompido, ou terminando sua reprodução.</li>
+ <li>Um erro ocorrendo.</li>
+</ul>
+
+<p>Você vai perceber com isso (e dando uma olhada no <a href="/en-US/docs/Web/Events">Event reference</a> MDN) que<strong> </strong>há uma <strong>série</strong> de eventos que podem  ser utilizados.</p>
+
+<p>Cada evento disponivel possui um <strong>manipulador de eventos </strong>(event handler), que é um bloco de código (geralmente uma função JavaScript definida pelo usuário) que será executado quando o evento for disparado. Quando esse bloco de código é definido para rodar em resposta a um evento que foi disparado, nós dizemos que estamos <strong>registrando um manipulador de eventos</strong>. Note que manipuladores de eventos são, em alguns casos, chamados de <strong>ouvinte de eventos </strong>(event listeners) — <span id="result_box" lang="pt"><span>eles são praticamente intercambiáveis para nossos propósitos, embora estritamente falando, eles trabalhem juntos. Os ouvintes escutam o evento acontecendo, e o manipulador é o codigo que roda em resposta a este acontecimento.</span></span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: É importante notar que eventos web não são parte do core da linguagem JavaScript — elas são definidas como parte das APIs JavaScript incorporadas ao navegador.</p>
+</div>
+
+<h3 id="Um_exemplo_simples">Um exemplo simples</h3>
+
+<p>Vamos dar uma olhada em um simples exemplo para explicar o que nós queremos dizer aqui. Você já viu eventos e manipuladores de eventos sendo utilizados na maioria dos exemplos deste curso até agora, mas vamos recapitular somente para cimentar nosso conhecimento. No exemplo a seguir, nós temos um simples {{htmlelement("button")}} que quando pressionado, irá fazer com que o fundo mude para uma cor aleatória:</p>
+
+<pre class="brush: html">&lt;button&gt;Change color&lt;/button&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">button { margin: 10px };</pre>
+</div>
+
+<p>O JavaScript seria algo como:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random()*(number+1));
+}
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>Nesse código, nós guardamos uma referência ao botão dentro de uma variável chamada <code>btn</code>, usando a função {{domxref("Document.querySelector()")}}. Também definimos uma função que retorna um número aleatório. A terceira parte do código é o manipulador de eventos. A variável <code>btn</code> aponta para um elemento <code>&lt;button&gt;</code>, e esse tipo de objeto tem um número de eventos que podem ser disparados nele, assim sendo, manipuladores de eventos estão disponíveis.</p>
+
+<p>Esse código rodará sempre que o evento de clique for disparado pelo elemento <code>&lt;button&gt;</code>, isto é, sempre que um usuário clicar nele.</p>
+
+<p>Um exemplo de saída seria:</p>
+
+<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="Não_são_apenas_paginas_da_web">Não são apenas paginas da web</h3>
+
+<p>Outra coisa que vale mencionar a esse ponto é que eventos não são exclusivos ao JavaScript — muitas linguagens de programação possuem algum tipo de modelo de evento, e a maneira que elas funcionam irão, frequentemente, diferenciar-se da maneira que funciona em JavaScript. De fato, o modelo de evento no JavaScript para web pages difere dos outros modelos de evento do próprio JavaScript quando usados em outros ambientes.</p>
+
+<p>Por exemplo, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> é um interpretador de código JavaScript muito popular que permite desenvolvedores a usarem JavaScript para construir aplicações de rede e do lado do servidor. O <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">Node.js event model</a> depende dos ouvintes para escutar eventos e emissores para emitir eventos periodicamente. — não parece tão diferente, mas o código é bem diferente, fazendo uso de funções como <code>on()</code> para registrar um ouvinte de evento e  <code>once()</code> para registrar um ouvinte de evento que cancela o registro depois de ter sido executado uma vez. Os <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">Documentos do evento de conexão HTTP</a> fornecem um bom exemplo de uso.</p>
+
+<p>Como outro exemplo, agora você também pode usar o JavaScript para criar complementos entre navegadores — aprimoramentos da funcionalidade do navegador — usando uma tecnologia chamada <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. O modelo de eventos é semelhante ao modelo de eventos da Web, mas um pouco diferente — as propriedades dos event listeners são camel-cased, onde cada palavra é iniciada com maiúsculas e unidas sem espaços (por exemplo, <code>onMessage</code> em vez de <code>onmessage</code>), e precisam ser combinadas com a função <code>addListener</code>. Veja a página <a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples">runtime.onMessage</a> para um exemplo.</p>
+
+<p>Você não precisa entender nada sobre outros ambientes nesse estágio do aprendizado; nós só queríamos deixar claro que os eventos podem diferir em diferentes ambientes de programação.</p>
+
+<h2 id="Formas_de_usar_eventos_da_web">Formas de usar eventos da web</h2>
+
+<p>Há várias maneiras diferentes de adicionar código de ouvinte de evento a páginas da Web para que ele seja executado quando o evento associado for disparado. Nesta seção, revisaremos os diferentes mecanismos e discutiremos quais devem ser usados.</p>
+
+<h3 id="Propriedades_do_manipulador_de_eventos">Propriedades do manipulador de eventos</h3>
+
+<p>Essas são as propriedades que existem para conter o código do manipulador de eventos que vimos com mais frequência durante o curso. Voltando ao exemplo acima:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<p>A propriedade <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> é a propriedade do manipulador de eventos que está sendo usada nesta situação. É essencialmente uma propriedade como qualquer outra disponível no botão (por exemplo, <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, ou <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), mas é um tipo especial — quando você configura para ser igual a algum código, esse código será executado quando o evento é acionado no botão.</p>
+
+<p>Você também pode definir a propriedade handler para ser igual a um nome de função nomeado (como vimos em <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Construa sua própria função</a>). O seguinte funcionaria da mesma forma:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;</pre>
+
+<p>Há muitas propriedades diferentes de manipulador de eventos disponíveis. Vamos fazer um experimento.</p>
+
+<p>Primeiro de tudo, faça uma cópia local do <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, e abra-o no seu navegador. É apenas uma cópia do exemplo de cor aleatória simples com o qual já estamos jogando neste artigo. Agora tente alterar <code>btn.onclick</code> para os seguintes valores diferentes, por sua vez, e observando os resultados no exemplo:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> e <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — A cor mudará quando o botão estiver focado e fora de foco (tente pressionar a guia para aba no botão e desligar novamente). Eles geralmente são usados para exibir informações sobre como preencher campos de formulário quando eles estão focalizados ou exibir uma mensagem de erro se um campo de formulário tiver acabado de ser preenchido com um valor incorreto.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — A cor só será alterada quando for clicada duas vezes.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — A cor mudará quando uma tecla for pressionada no teclado. <code>keypress</code> refere-se a um pressionamento geral (botão para baixo e depois para cima), enquanto <code>keydown</code> e <code>keyup</code> refere-se apenas a parte do pressionamento da tecla para baixo e de soltar a tecla para cima, respectivamente. Note que não funciona se você tentar registrar este manipulador de eventos no próprio botão — nós tivemos que registrá-lo no objeto <a href="/en-US/docs/Web/API/Window">window</a>, que representa toda a janela do navegador.</li>
+ <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> e <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — A cor mudará quando o ponteiro do mouse for movido, de modo que comece a passar o mouse sobre o botão, ou quando parar de passar o mouse sobre o botão e sair dele, respectivamente.</li>
+</ul>
+
+<p>Alguns eventos são muito gerais e estão disponíveis praticamente em qualquer lugar (por exemplo, um manipulador  <code>onclick</code> pode ser registrado em quase qualquer elemento), enquanto alguns são mais específicos e úteis apenas em certas situações (por exemplo, faz sentido usar <a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> apenas em elementos específicos, como {{htmlelement("video")}}).</p>
+
+<h3 id="Manipuladores_de_eventos_in-line_-_não_use_esses">Manipuladores de eventos in-line - não use esses</h3>
+
+<p>Você também pode ver um padrão como este em seu código:</p>
+
+<pre class="brush: html">&lt;button onclick="bgChange()"&gt;Press me&lt;/button&gt;
+</pre>
+
+<pre class="brush: js">function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>:  Você pode encontrar o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">código fonte completo</a> para este exemplo no GitHub (também <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">veja isso executando em tempo real</a>).</p>
+</div>
+
+<p>O método mais antigo de registrar manipuladores de eventos encontrados na Web envolveu <strong>atributos HTML de manipulador de eventos</strong> (também conhecidos como <strong>manipuladores de eventos inline</strong>) como o mostrado acima — o valor do atributo é literalmente o código JavaScript que você deseja executar quando o evento ocorre. O exemplo acima chama uma função definida dentro de um elemento {{htmlelement("script")}} na mesma página, mas você também pode inserir JavaScript diretamente dentro do atributo, por exemplo:</p>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello, this is my old-fashioned event handler!');"&gt;Press me&lt;/button&gt;</pre>
+
+<p>Você encontrará equivalentes de atributo HTML para muitas das propriedades do manipulador de eventos; no entanto, você não deve usá-los — eles são considerados uma prática ruim. Pode parecer fácil usar um atributo manipulador de eventos se você estiver apenas fazendo algo realmente rápido, mas eles se tornam rapidamente incontroláveis e ineficientes.</p>
+
+<p>Para começar, não é uma boa ideia misturar o seu HTML e o seu JavaScript, pois é difícil analisar — manter seu JavaScript em um só lugar é melhor; se estiver em um arquivo separado, você poderá aplicá-lo a vários documentos HTML.</p>
+
+<p>Mesmo em um único arquivo, os manipuladores de eventos in-line não são uma boa ideia. Um botão está OK, mas e se você tivesse 100 botões? Você teria que adicionar 100 atributos ao arquivo; isso rapidamente se tornaria um pesadelo de manutenção. Com JavaScript, você poderia facilmente adicionar uma função de manipulador de eventos a todos os botões da página, não importando quantos fossem, usando algo assim:</p>
+
+<pre class="brush: js">var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i &lt; buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Separar sua lógica de programação do seu conteúdo também torna seu site mais amigável aos mecanismos de pesquisa.</p>
+</div>
+
+<h3 id="addEventListener_e_removeEventListener">addEventListener() e removeEventListener()</h3>
+
+<p>O mais novo tipo de mecanismo de evento é definido na Especificação de Eventos Nível 2 do <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM)</a>, que fornece aos navegadores uma nova função — <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. Isso funciona de maneira semelhante às propriedades do manipulador de eventos, mas a sintaxe é obviamente diferente. Poderíamos reescrever nosso exemplo de cor aleatória para ficar assim:</p>
+
+<pre class="brush: js">var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">código fonte completo</a> para este exemplo no GitHub (também <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">veja isso executando em tempo real</a>).</p>
+</div>
+
+<p>Dentro da função <code>addEventListener()</code>, especificamos dois parâmetros — o nome do evento para o qual queremos registrar esse manipulador, e o código que compreende a função do manipulador que queremos executar em resposta a ele. Note que é perfeitamente apropriado colocar todo o código dentro da função <code>addEventListener()</code>, em uma função anônima, assim:</p>
+
+<pre class="brush: js">btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});</pre>
+
+<p>Esse mecanismo tem algumas vantagens sobre os mecanismos mais antigos discutidos anteriormente. Para começar, há uma função de contraparte, <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, que remove um listener adicionado anteriormente. Por exemplo, isso removeria o listener definido no primeiro bloco de código nesta seção:</p>
+
+<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre>
+
+<p>Isso não é significativo para programas pequenos e simples, mas para programas maiores e mais complexos, pode melhorar a eficiência para limpar antigos manipuladores de eventos não utilizados. Além disso, por exemplo, isso permite que você tenha o mesmo botão executando ações diferentes em circunstâncias diferentes — tudo o que você precisa fazer é adicionar / remover manipuladores de eventos conforme apropriado.</p>
+
+<p>Em segundo lugar, você também pode registrar vários manipuladores para o mesmo ouvinte. Os dois manipuladores a seguir não seriam aplicados:</p>
+
+<pre class="brush: js">myElement.onclick = functionA;
+myElement.onclick = functionB;</pre>
+
+<p>Como a segunda linha sobrescreveria o valor de  <code>onclick</code> definido pelo primeiro. Isso funcionaria, no entanto:</p>
+
+<pre class="brush: js">myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);</pre>
+
+<p>Ambas as funções serão executadas quando o elemento for clicado.</p>
+
+<p>Além disso, há vários outros recursos e opções poderosos disponíveis com esse mecanismo de eventos. Estes são um pouco fora do escopo deste artigo, mas se você quiser ler sobre eles, dê uma olhada nas páginas de referência <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> e <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>.</p>
+
+<h3 id="Qual_mecanismo_devo_usar">Qual mecanismo devo usar?</h3>
+
+<p>Dos três mecanismos, você definitivamente não deve usar os atributos do manipulador de eventos HTML — estas são desatualizadas e más práticas, como mencionado acima.</p>
+
+<p>Os outros dois são relativamente intercambiáveis, pelo menos para usos simples:</p>
+
+<ul>
+ <li>As propriedades do manipulador de eventos têm menos poder e opções, mas melhor compatibilidade entre navegadores (sendo suportado desde o Internet Explorer 8). Você provavelmente deve começar com estes como você está aprendendo.</li>
+ <li>Eventos DOM Nível 2 (<code>addEventListener()</code>, etc.) são mais poderosos, mas também podem se tornar mais complexos e menos bem suportados (suportados desde o Internet Explorer 9). Você também deve experimentá-los e tentar usá-los sempre que possível.</li>
+</ul>
+
+<p>As principais vantagens do terceiro mecanismo são que você pode remover o código do manipulador de eventos, se necessário, usando <code>removeEventListener()</code>, e você pode adicionar vários listeners do mesmo tipo aos elementos, se necessário. Por exemplo, você pode chamar <code>addEventListener('click', function() { ... })</code> em um elemento várias vezes, com diferentes funções especificadas no segundo argumento. Isso é impossível com as propriedades do manipulador de eventos porque qualquer tentativa subseqüente de definir uma propriedade sobrescreverá as anteriores, por exemplo:</p>
+
+<pre class="brush: js">element.onclick = function1;
+element.onclick = function2;
+etc.</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você for chamado para oferecer suporte a navegadores anteriores ao Internet Explorer 8 em seu trabalho, poderá encontrar dificuldades, pois esses navegadores antigos usam modelos de eventos diferentes dos navegadores mais recentes. Mas não tenha medo, a maioria das bibliotecas JavaScript (por exemplo, <code>jQuery</code>) tem funções internas que abstraem as diferenças entre navegadores. Não se preocupe muito com isso neste estágio de sua jornada de aprendizado.</p>
+</div>
+
+<h2 id="Outros_conceitos_de_evento">Outros conceitos de evento</h2>
+
+<p>Nesta seção, abordaremos brevemente alguns conceitos avançados que são relevantes para os eventos. Não é importante entendê-las totalmente neste momento, mas pode servir para explicar alguns padrões de código que você provavelmente encontrará ao longo do tempo.</p>
+
+<h3 id="Objetos_de_evento">Objetos de evento</h3>
+
+<p>Às vezes, dentro de uma função de manipulador de eventos, você pode ver um parâmetro especificado com um nome como <code>event</code>, <code>evt</code>, ou simplesmente <code>e</code>. Isso é chamado de <strong>event object</strong>, e é passado automaticamente para os manipuladores de eventos para fornecer recursos e informações extras. Por exemplo, vamos reescrever nosso exemplo de cor aleatória novamente:</p>
+
+<pre class="brush: js">function bgChange(e) {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">código fonte completo</a> para este exemplo no GitHub (também <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">veja isso executando em tempo real</a>).</p>
+</div>
+
+<p>Aqui você pode ver que estamos incluindo um objeto de evento, <strong>e</strong>, na função, e na função definindo um estilo de cor de fundo em <code>e.target</code> — que é o próprio botão. A propriedade <code>target</code> do objeto de evento é sempre uma referência ao elemento em que o evento acabou de ocorrer. Portanto, neste exemplo, estamos definindo uma cor de fundo aleatória no botão, não na página.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Você pode usar qualquer nome que desejar para o objeto de evento — você só precisa escolher um nome que possa ser usado para referenciá-lo dentro da função de manipulador de eventos. <code>e</code>/<code>evt</code>/<code>event</code> são mais comumente usados pelos desenvolvedores porque são curtos e fáceis de lembrar. É sempre bom manter um padrão.</p>
+</div>
+
+<p><code>e.target</code> é incrivelmente útil quando você deseja definir o mesmo manipulador de eventos em vários elementos e fazer algo com todos eles quando ocorre um evento neles. Você pode, por exemplo, ter um conjunto de 16 blocos que desaparecem quando são clicados. É útil poder sempre apenas definir a coisa para desaparecer como <code>e.target</code>, ao invés de ter que selecioná-lo de alguma forma mais difícil. No exemplo a seguir (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> para o código-fonte completo; veja também a <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">execução ao vivo</a> aqui), criamos 16 elementos {{htmlelement("div")}} usando JavaScript. Em seguida, selecionamos todos eles usando {{domxref("document.querySelectorAll()")}}  e, em seguida, percorremos cada um deles, adicionando um manipulador onclick a cada um, de modo que uma cor aleatória seja aplicada a cada um deles quando clicados:</p>
+
+<pre class="brush: js">var divs = document.querySelectorAll('div');
+
+for (var i = 0; i &lt; divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}</pre>
+
+<p>A saída é a seguinte (tente clicar em cima — divirta-se):</p>
+
+<div class="hidden">
+<h6 id="Hidden_example">Hidden example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Useful event target example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        background-color: red;
+        height: 100px;
+        width: 25%;
+        float: left;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;script&gt;
+      for (var i = 1; i &lt;= 16; i++) {
+        var myDiv = document.createElement('div');
+        document.body.appendChild(myDiv);
+      }
+
+      function random(number) {
+        return Math.floor(Math.random()*number);
+      }
+
+      function bgChange() {
+        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+        return rndCol;
+      }
+
+      var divs = document.querySelectorAll('div');
+
+      for (var i = 0; i &lt; divs.length; i++) {
+        divs[i].onclick = function(e) {
+          e.target.style.backgroundColor = bgChange();
+        }
+      }
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>A maioria dos manipuladores de eventos que você encontrará apenas tem um conjunto padrão de propriedades e funções (métodos) disponíveis no objeto de evento (consulte a referência de objeto {{domxref("Event")}} para obter uma lista completa). Alguns manipuladores mais avançados, no entanto, adicionam propriedades especializadas contendo dados extras que precisam para funcionar. A <a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, por exemplo, tem um evento <code>dataavailable</code> que é acionado quando algum áudio ou vídeo é gravado e está disponível para fazer algo com (por exemplo, salvá-lo ou reproduzi-lo). O objeto de evento do manipulador correspondente <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> tem uma propriedade de dados disponível contendo os dados de áudio ou vídeo gravados para permitir que você acesse e faça algo com ele.</p>
+
+<h3 id="Evitando_o_comportamento_padrão">Evitando o comportamento padrão</h3>
+
+<p>Às vezes, você se deparará com uma situação em que deseja interromper um evento fazendo o que ele faz por padrão. O exemplo mais comum é o de um formulário da Web, por exemplo, um formulário de registro personalizado. Quando você preenche os detalhes e pressiona o botão Enviar, o comportamento natural é que os dados sejam enviados para uma página específica no servidor para processamento, e o navegador seja redirecionado para uma página de "mensagem de sucesso" de algum tipo (ou a mesma página, se outra não for especificada.)</p>
+
+<p>O problema surge quando o usuário não submete os dados corretamente - como desenvolvedor, você deve interromper o envio para o servidor e fornecer uma mensagem de erro informando o que está errado e o que precisa ser feito para corrigir as coisas. Alguns navegadores suportam recursos automáticos de validação de dados de formulário, mas como muitos não oferecem isso, é recomendável não depender deles e implementar suas próprias verificações de validação. Vamos dar uma olhada em um exemplo simples.</p>
+
+<p>Primeiro, um formulário HTML simples que requer que você digite seu primeiro e último nome:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name: &lt;/label&gt;
+    &lt;input id="fname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name: &lt;/label&gt;
+    &lt;input id="lname" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+     &lt;input id="submit" type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}
+</pre>
+</div>
+
+<p>Agora algum JavaScript — aqui nós implementamos uma verificação muito simples dentro de um manipulador de evento onsubmit (o evento submit é disparado em um formulário quando é enviado) que testa se os campos de texto estão vazios. Se estiverem, chamamos a função <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> no objeto de evento — que interrompe o envio do formulário — e, em seguida, exibir uma mensagem de erro no parágrafo abaixo do nosso formulário para informar ao usuário o que está errado:</p>
+
+<pre class="brush: js">var form = document.querySelector('form');
+var fname = document.getElementById('fname');
+var lname = document.getElementById('lname');
+var submit = document.getElementById('submit');
+var para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}</pre>
+
+<p>Obviamente, isso é uma validação de forma bastante fraca — ela não impediria o usuário de validar o formulário com espaços ou números inseridos nos campos, por exemplo — mas está tudo bem, por exemplo. A saída é a seguinte:</p>
+
+<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Nota</strong>: para o código fonte completo, veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (também veja isso <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">executando em tempo real</a> aqui.)</p>
+</div>
+
+<h3 id="Borbulhamento_e_captura_de_eventos">Borbulhamento e captura de eventos</h3>
+
+<p>O assunto final a ser abordado aqui é algo que você não encontrará com frequência, mas pode ser uma dor real se você não entender. Borbulhamento e captura de eventos são dois mecanismos que descrevem o que acontece quando dois manipuladores do mesmo tipo de evento são ativados em um elemento. Vamos dar uma olhada em um exemplo para facilitar isso — abra o exemplo show-video-box.html em uma nova guia (e o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">código-fonte</a> em outra guia). Ele também está disponível ao vivo abaixo:</p>
+
+<div class="hidden">
+<h6 id="Hidden_video_example">Hidden video example</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Show video box example&lt;/title&gt;
+    &lt;style&gt;
+      div {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        width: 480px;
+        height: 380px;
+        border-radius: 10px;
+        background-color: #eee;
+        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
+      }
+
+      .hidden {
+        left: -50%;
+      }
+
+      .showing {
+        left: 50%;
+      }
+
+      div video {
+        display: block;
+        width: 400px;
+        margin: 40px auto;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;button&gt;Display video&lt;/button&gt;
+
+    &lt;div class="hidden"&gt;
+      &lt;video&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"&gt;
+        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"&gt;
+        &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+      &lt;/video&gt;
+    &lt;/div&gt;
+
+    &lt;script&gt;
+
+      var btn = document.querySelector('button');
+      var videoBox = document.querySelector('div');
+      var video = document.querySelector('video');
+
+      btn.onclick = function() {
+        displayVideo();
+      }
+
+      function displayVideo() {
+        if(videoBox.getAttribute('class') === 'hidden') {
+          videoBox.setAttribute('class','showing');
+        }
+      }
+
+      videoBox.addEventListener('click',function() {
+        videoBox.setAttribute('class','hidden');
+      });
+
+      video.addEventListener('click',function() {
+        video.play();
+      });
+
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Este é um exemplo bastante simples que mostra e oculta um {{htmlelement("div")}} com um elemento {{htmlelement("video")}} dentro dele:</p>
+
+<pre class="brush: html">&lt;button&gt;Display video&lt;/button&gt;
+
+&lt;div class="hidden"&gt;
+  &lt;video&gt;
+    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+    &lt;source src="rabbit320.webm" type="video/webm"&gt;
+    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+  &lt;/video&gt;
+&lt;/div&gt;</pre>
+
+<p>Quando o {{htmlelement("button")}} é clicado, o vídeo é exibido, alterando o atributo de classe em <code>&lt;div&gt;</code> de <code>hidden</code> para <code>showing</code> (o CSS do exemplo contém essas duas classes, que posicione a caixa fora da tela e na tela, respectivamente):</p>
+
+<pre class="brush: js">btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}</pre>
+
+<p>Em seguida, adicionamos mais alguns manipuladores de eventos <code>onclick</code> — o primeiro ao <code>&lt;div&gt;</code> e o segundo ao <code>&lt;video&gt;</code>. A ideia é que, quando a área do <code>&lt;div&gt;</code> fora do vídeo for clicada, a caixa deve ser ocultada novamente; quando o vídeo em si é clicado, o vídeo deve começar a tocar.</p>
+
+<pre>videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};</pre>
+
+<p>Mas há um problema — atualmente, quando você clica no vídeo, ele começa a ser reproduzido, mas faz com que o <code>&lt;div&gt;</code> também fique oculto ao mesmo tempo. Isso ocorre porque o vídeo está dentro do <code>&lt;div&gt;</code> — é parte dele — portanto, clicar no vídeo realmente executa os dois manipuladores de eventos acima.</p>
+
+<h4 id="Borbulhando_e_capturando_explicados">Borbulhando e capturando explicados</h4>
+
+<p>Quando um evento é acionado em um elemento que possui elementos pai (por exemplo, o {{htmlelement("video")}} no nosso caso), os navegadores modernos executam duas fases diferentes — a fase de  <strong>captura </strong>e a fase de <strong>bubbling</strong>.</p>
+
+<p>Na fase de <strong>captura</strong>:</p>
+
+<ul>
+ <li>O navegador verifica se o ancestral mais externo do elemento ({{htmlelement("html")}}) tem um manipulador de eventos <code>onclick</code> registrado nele na fase de captura e o executa em caso afirmativo.</li>
+ <li>Em seguida, ele passa para o próximo elemento dentro de <code>&lt;html&gt;</code>  e faz a mesma coisa, depois o próximo, e assim por diante até alcançar o elemento que foi realmente clicado.</li>
+</ul>
+
+<p>Na fase de <strong>bubbling</strong>, ocorre exatamente o oposto:</p>
+
+<ul>
+ <li>O navegador verifica se o elemento que realmente foi clicado tem um manipulador de eventos <code>onclick</code> registrado nele na fase de bubbling e o executa em caso afirmativo.</li>
+ <li>Em seguida, ele passa para o próximo elemento ancestral imediato e faz a mesma coisa, depois o próximo, e assim por diante, até alcançar o elemento <code>&lt;html&gt;</code>.</li>
+</ul>
+
+<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p>
+
+<p>(Clique na imagem para um diagrama maior)</p>
+
+<p>Nos navegadores modernos, por padrão, todos os manipuladores de eventos são registrados na fase de bubbling. Portanto, em nosso exemplo atual, quando você clica no vídeo, o evento de clique passa do elemento <code>&lt;video&gt;</code> para o elemento <code>&lt;html&gt;</code> Pelo caminho:</p>
+
+<ul>
+ <li>Ele encontra o manipulador <code>video.onclick...</code> e o executa, então o vídeo começa a ser reproduzido pela primeira vez.</li>
+ <li>Em seguida, ele encontra o manipulador <code>videoBox.onclick...</code> e o executa, então o vídeo também está oculto.</li>
+</ul>
+
+<h4 id="Corrigindo_o_problema_com_stopPropagation">Corrigindo o problema com stopPropagation()</h4>
+
+<p>Este é um comportamento irritante, mas existe uma maneira de corrigir isso! O objeto de evento padrão tem uma função disponível chamada <code><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>, que quando invocada no objeto de evento de um manipulador, faz com que o manipulador seja executado, mas o evento não borbulha mais acima na cadeia, portanto, mais nenhum manipulador rodará.</p>
+
+<p>Podemos, portanto, consertar nosso problema atual alterando a segunda função do manipulador no bloco de códigos anterior para isto:</p>
+
+<pre class="brush: js">video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};</pre>
+
+<p>Você pode tentar fazer uma cópia local do código-fonte <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html source code</a> e tentar corrigi-lo sozinho, ou observar o resultado corrigido em <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">código-fonte</a> aqui).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Por que se preocupar em capturar e borbulhar? Bem, nos velhos tempos em que os navegadores eram muito menos compatíveis entre si do que são agora, o Netscape usava apenas captura de eventos, e o Internet Explorer usava apenas borbulhamento de eventos. Quando o W3C decidiu tentar padronizar o comportamento e chegar a um consenso, eles acabaram com esse sistema que incluía ambos, que é o único navegador moderno implementado.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Como mencionado acima, por padrão, todos os manipuladores de eventos são registrados na fase de bubbling, e isso faz mais sentido na maioria das vezes. Se você realmente quiser registrar um evento na fase de captura, registre seu manipulador usando <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, e defina a propriedade terceira opcional como <code>true</code>.</p>
+</div>
+
+<h4 id="Delegação_de_eventos">Delegação de eventos</h4>
+
+<p>O borbulhar também nos permite aproveitar a <strong>delegação de eventos</strong> — esse conceito depende do fato de que, se você quiser que algum código seja executado quando clicar em qualquer um de um grande número de elementos filho, você pode definir o ouvinte de evento em seu pai e ter os eventos que acontecem neles confluem com o pai, em vez de precisar definir o ouvinte de evento em cada filho individualmente.</p>
+
+<p>Um bom exemplo é uma série de itens de lista — Se você quiser que cada um deles apareça uma mensagem quando clicado, você pode definir o ouvinte de evento <code>click</code> no pai <code>&lt;ul&gt;</code>,  e ele irá aparecer nos itens da lista.</p>
+
+<p>Este conceito é explicado mais adiante no blog de David Walsh, com vários exemplos — veja <a href="https://davidwalsh.name/event-delegate">Como funciona a delegação de eventos em JavaScript.</a></p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Agora você deve saber tudo o que precisa saber sobre os eventos da Web nesse estágio inicial. Como mencionado acima, os eventos não são realmente parte do núcleo do JavaScript — eles são definidos nas APIs da Web do navegador.</p>
+
+<p>Além disso, é importante entender que os diferentes contextos nos quais o JavaScript é usado tendem a ter diferentes modelos de evento — de APIs da Web a outras áreas, como WebExtensions de navegador e Node.js (JavaScript do lado do servidor). Não esperamos que você entenda todas essas áreas agora, mas certamente ajuda a entender os fundamentos dos eventos à medida que você avança no aprendizado do desenvolvimento da web.</p>
+
+<p>Se houver algo que você não entendeu, fique à vontade para ler o artigo novamente, ou <a href="/en-US/Learn#Contact_us">entre em contato conosco</a> para pedir ajuda.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion of capturing and bubbling) — an excellently detailed piece by Peter-Paul Koch.</li>
+ <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion of the event object) — another excellently detailed piece by Peter-Paul Koch.</li>
+ <li><a href="/en-US/docs/Web/Events">Event reference</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/functions/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/functions/index.html
new file mode 100644
index 0000000000..05e9ffcfea
--- /dev/null
+++ b/files/pt-br/aprender/javascript/elementos_construtivos/functions/index.html
@@ -0,0 +1,394 @@
+---
+title: Funções — blocos reutilizáveis de código
+slug: Aprender/JavaScript/Elementos_construtivos/Functions
+translation_of: Learn/JavaScript/Building_blocks/Functions
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p>Outro conceito essencial em código é função, que permitem que você armazene um pedaço de código que realiza uma simples tarefa dentro de um bloco, e então chama aquele código sempre que você precisar usá-lo com um curto comando — em vez de ter que escrever o mesmo código multiplas vezes. Neste artigo nós vamos explorar conceitos fundamentais por trás  das funções como sintaxe básica, como invocá-las e defini-las, escopo, e parâmetros.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisitos:</th>
+   <td>Infrmática básica, um entendimento básico de HTML e CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos em JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender conceitos fundamentais por trás das funções em JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Onde_eu_encontro_funções">Onde eu encontro funções?</h2>
+
+<p>Em JavaScript, você encontrará funções em todos os lugares, de fato, nós vamos usar funções ao longo de todo o curso; nós só não falaremos sobre elas em damasia. Agora está na hora, contudo, para falarmos sobre funções explicitamente, e realmente explorar sua sintaxe.</p>
+
+<div id="gt-res-content">
+<div class="trans-verified-button-large" dir="ltr" id="gt-res-dir-ctr"><span class="short_text" id="result_box" lang="pt"><span>Praticamente sempre que você faz uso de um</span></span> uma estrutura JavaScript em que tem um par de parenteses — <code>()</code> — e você <strong>não</strong> está usando uma estrutura  embutida da linguagem como um <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for loop</a>, <a href="/en-US/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while or do...while loop</a>, ou <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else statement</a>, você está fazendo uso de uma função.</div>
+</div>
+
+<h2 id="Funções_embutidas_do_navegador">Funções embutidas do navegador</h2>
+
+<p>Nós fizemos bastante uso de funções embutidas do navegador neste curso. Toda vez que manipulamos uma string de texto, por exemplo:</p>
+
+<pre class="brush: js">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a string,
+// replaces one substring with another, and returns
+// a new string with the replacement made</pre>
+
+<p>Ou toda vez que manipulamos uma lista:</p>
+
+<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+console.log(madeAString);
+// the join() function takes an array, joins
+// all the array items together into a single
+// string, and returns this new string</pre>
+
+<p>Ou toda vez que nós geramos um número aleatório:</p>
+
+<pre class="brush: js">var myNumber = Math.random();
+// the random() function generates a random
+// number between 0 and 1, and returns that
+// number</pre>
+
+<p>...nós usamos uma função!</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Fique a vontade para inserir essas linhas no console JavaScript do navegador para refamiliarizar-se com suas funcionalidades, se necessário.</p>
+</div>
+
+<p>A linguagem JavaScript tem muitas funções embutidas que o permitem fazer coisas úteis sem que você mesmo tenha que escrever aquele código. De fato, alguns dos códigos que você está chamando quando você <strong>invoca</strong> (uma palavra rebuscada para rodar, ou executar) uma função embutida de navegador não poderia ser escrita em JavaScript — muitas dessa funções são chamadas a partes de código base do navegador, que é escrita grandemente em linguages de<span class="short_text" id="result_box" lang="pt"><span> sistema de baixo nível</span></span> como C++, não linguagem Web como JavaScript.</p>
+
+<p>Tenha em mente que algumas funções embutidas de navegador não são parte do core da linguagem JavaScript — algumas são definidas como partes de APIs do navegador, que são construídas no topo da linguagem padão para prover ainda mais funcionalidades (recorra a <a href="/en-US/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">esta seção inicial de nosso curso</a> para mais descrições). Nós olharemos o uso de APIs de navegador em mais detalhes em um módulo posterior.</p>
+
+<h2 id="Funções_versus_métodos">Funções versus métodos</h2>
+
+<p>Uma coisas que devemos esclarecer antes de seguir em frente — tecnicamente falando, funções embutidas de navegador não são funções — elas são <strong>métodos</strong>. Isso pode soar um pouco assustador e confuso, mas não se preocupe — as palavras funções e métodos são largamente intercambeáveis, ao menos para nossos propósitos, neste estágio de nosso aprendizado.</p>
+
+<p>A distinção é que métodos são funções definidas dentro de objetos. Funções embutidas de navegador (métodos) e variáveis (que são chamadas <strong>propriedades</strong>) são armazenadas dentro de objetos estruturados, para tornar o código mais estruturado e fácil de manipular.</p>
+
+<p>Você não precisa aprender sobre o<span class="short_text" id="result_box" lang="pt"><span> funcionamento interno</span></span> de objetos estruturados em JavaScript ainda — você pode esperar nosso módulo posterior que ensinará tudo sobre <span class="short_text" id="result_box" lang="pt"><span>funcionamento interno</span></span> de objetos, e como criar o seu próprio. Por hora, nós só queremos esclarecer qualquer confusão possível de método versus função — é pr<span class="short_text" id="result_box" lang="pt"><span>ovável que você encontre ambos</span></span> termos enquanto você olhar os recursos disponível pela  Web.</p>
+
+<h2 id="Funções_personalizadas">Funções personalizadas</h2>
+
+<p>Nós vimos também várias funções personalizadas no curso até agora — funções definidas em seu código, não dentro do navegador. Sempre que você viu um nome personalizado com parênteses logo após ele, você estava usando funções personalizadas. em nosso exemplo <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">código fonte</a> completo) de nosso <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">loops article</a>, nós incluimos a função personalizada <code>draw()</code> que era semelhante a essa:</p>
+
+<pre class="brush: js">function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}</pre>
+
+<p>Esta função desenha 100 círculos aleatórios dentro de um elemento {{htmlelement("canvas")}}. Toda vez que queremos fazer isso, nós podemos simplesmente invocar a função com isto</p>
+
+<pre class="brush: js">draw();</pre>
+
+<p>ao invés de ter que escrever todo o código novamente todas as vezes que queremos repetí-lo. <span class="short_text" id="result_box" lang="pt"><span>E funções podem conter qualquer código que você gosta</span></span> — você pode até chamar outra função dentro das funções. A função acima por exemplo chama a função <code>random()</code> três vezes, o qual é definido pelo seguinte código:</p>
+
+<pre class="brush: js">function random(number) {
+  return Math.floor(Math.random()*number);
+}</pre>
+
+<p>Nós precisamos desta função porque a função embutida do navegador<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> só gera números decimais aleatórios entre 0 e 1. Nós queriamos um número aleatório inteiro entre 0 e um número especificado.</p>
+
+<h2 id="Invocando_funções">Invocando funções</h2>
+
+<p>Provavelmente você já tem conhecimento sobre iso agora, mas... para realmente usar uma função depois dela ter sido definida, você tem que rodá-la — ou invocá-la. Isso é feito ao se incluir o nome da função em algum lugar do código, seguido por parênteses.</p>
+
+<pre class="brush: js">function myFunction() {
+  alert('hello');
+}
+
+myFunction()
+// Chama a função um vez</pre>
+
+<h2 id="Funções_anônimas">Funções anônimas</h2>
+
+<p>Você viu funções definidas e invocadas de maneiras ligeiramente diferentes. Até agora nós só criamos funções como esta:</p>
+
+<pre class="brush: js">function myFunction() {
+  alert('hello');
+}</pre>
+
+<p>Mas você também pode criar funções que não tem nome:</p>
+
+<pre class="brush: js">function() {
+  alert('hello');
+}</pre>
+
+<p>Isto é chamado<strong> Função anônima</strong> — não tem nome! E também não fará nada em si mesma. Você geralmente cria funções anônimas junto com um<span class="short_text" id="result_box" lang="pt"><span>  manipulador de eventos</span></span>, o exemplo a seguir poderia rodar o código dentro da função sempre que o botão associado é clicado:</p>
+
+<pre class="brush: js">var myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}</pre>
+
+<p>O exemplo acima requer que exista um elemento {{htmlelement("button")}} diponível na página para selecionar e clicar. Você já viu essa estrutura algumas vezes ao longo do curso, e aprenderá mais a respeito disso e o verá no próximo artigo.</p>
+
+<p>Voce também pode atribuir uma função anônima para ser o valor de uma variável, por exemplo:</p>
+
+<pre class="brush: js">var myGreeting = function() {
+  alert('hello');
+}</pre>
+
+<p>Esta função agora poder ser invocada usando:</p>
+
+<pre class="brush: js">myGreeting();</pre>
+
+<p>Isso dá efetivamente um nome a função; você também pode atribuir uma função para ser o valor de múltiplas variáveis , por exemplo:</p>
+
+<pre class="brush: js">var anotherGreeting = function() {
+  alert('hello');
+}</pre>
+
+<p>Esta função agora pode ser invocada usando qualquer das funções abaixo</p>
+
+<pre class="brush: js">myGreeting();
+anotherGreeting();</pre>
+
+<p>Mas isso pode simplesmente ser confuso, então não faça! Quando criar funções, é melhor ficar com apenas uma forma:</p>
+
+<pre class="brush: js">function myGreeting() {
+  alert('hello');
+}</pre>
+
+<p>De modo geral você irá usar funções anônimas só para rodar um código em resposta a um disparo de evento — como um botão ao ser clicado — usando um gerenciador de eventos. Novamente, Isso é algo parecido com:</p>
+
+<pre class="brush: js">myButton.onclick = function() {
+  alert('hello');
+  // Eu posso colocar código aqui
+  // dentro o quanto eu quiser
+}</pre>
+
+<h2 id="Parâmetro_de_funções">Parâmetro de funções</h2>
+
+<p>Algumas funções requerem <strong>parâmetros</strong> <span class="short_text" id="result_box" lang="pt"><span>a ser especificado quando você está invocando-os</span></span> — esses são valores que precisam ser inclusos dentro dos parênteses da função, o que é necessário para fazer seu trabalho apropriado.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Parâmetros algumas vezes são chamados de argumentos, propriedades, ou até atributos.</p>
+</div>
+
+<p>Como um exemplo, a função embutida de navegador <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> não requer nenhum parâmetro. Quando chamada, ela sempre retorna um número aleatório entre 0 e 1:</p>
+
+<pre class="brush: js">var myNumber = Math.random();</pre>
+
+<p>A função embutida de navegador <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a>  entretanto precisa de dois parâmetros — a substring para encotrar a string principal, e a substring para ser substituida com ela:</p>
+
+<pre class="brush: js">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Quando você precisa especificar multiplos parâmetros, eles são separados por vígulas.</p>
+</div>
+
+<p>Nota-se também que algumas vezes os parâmetros são opcionais — você não tem que especificá-los. Se você não o faz, a função geralmente adota algum tipo de comportamento padrão. Como exemplo, a função <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> tem parâmetro opcional:</p>
+
+<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+// returns 'I love chocolate frogs'
+var madeAString = myArray.join();
+// returns 'I,love,chocolate,frogs'</pre>
+
+<p>Se nenhum parâmetro é incluído para especificar a combinação/delimitação de caractere, uma vírgula é usada por padrão.</p>
+
+<h2 id="Função_escopo_e_conflitos">Função escopo e conflitos</h2>
+
+<p>vamos falar um pouco sobre {{glossary("scope")}} — um conceito muito importante quando lidamos com funções. Quando você cria uma função, as variáveis e outras coisas definidas dentro da função ficam dentro de seu próprio e separado <strong>escopo</strong>, significando que eles estão trancados a parte em seu próprio compartimento, inacesível de dentro de outras funções ou de código fora das funções.</p>
+
+<p>O mais alto nível fora de todas suas funções é chamado de <strong>escopo global</strong>. Valores definidos no escopo global são acessíveis em todo lugar do código.</p>
+
+<p>JavaScript é configurado assim por várias razões — mas principalmente por segurança e organização. Algumas vezes você não quer que variáveis sejam acessadas de todo lugar no código — scripts externos que você chama de algum outro lugar podem iniciar uma bagunça no seu código e causar problemas porque eles estão usando os mesmos nomes de variáveis que em outras partes do código, provocando conflitos. Isso pode ser feito maliciosamente, ou só por acidente.</p>
+
+<p>Por exemplo, digamos que você tem um arquivo HTML que está chamando dois arquivos JavaScript externos, e ambos tem uma variável e uma função definidos que usam o mesmo nome:</p>
+
+<pre class="brush: html">&lt;!-- Excerpt from my HTML --&gt;
+&lt;script src="first.js"&gt;&lt;/script&gt;
+&lt;script src="second.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  greeting();
+&lt;/script&gt;</pre>
+
+<pre class="brush: js">// first.js
+var name = 'Chris';
+function greeting() {
+  alert('Olá ' + name + ': bem-vindo a nossa compania.');
+}</pre>
+
+<pre class="brush: js">// second.js
+var name = 'Zaptec';
+function greeting() {
+  alert('Nossa compania é chamada ' + name + '.');
+}</pre>
+
+<p>Ambas as funções que você quer chamar são chamadas <code>greeting()</code>, mas você só pode acessar o arquivo <code>second.js</code> da função <code>greeting()</code>  — Ele é aplicado no HTML depois no código fonte, então suas variáveis e funções sobrescrevem as de <code>first.js</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode ver este exemplo <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">rodando no GitHub</a> (veja também <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">o código fonte</a>).</p>
+</div>
+
+<p>Manter parte de seus código trancada em funções evita tais problemas, e é considerado boa prática.</p>
+
+<p>Parece um pouco com um zoológico. Os leões, zebras, tigres, e pinguins são mantidos em seus próprios cercados, e só tem acesso as coisas dentro de seu cercado — da mesma maneira que escopos de função. Se eles forem capazes de entrar em outros cercados, problemas podem acontecer. No melhor caso, diferentes animais poderiam sentir-se ralmente desconfortáveis dentro de habitats não familiares — um leão e um tigre poderiam sentir-se muito mal dentro de um úmido e gelado terreno. No pior caso, os leões e tigres poderiam tentar comer os pinguins!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p>
+
+<p>O zelador do zoológico é como o escopo global — ele ou ela tem as chaves para acessar cada cercado, reabastecer comida, tratar animais doentes, etc.</p>
+
+<h3 id="Aprendizado_ativo_Brincando_com_o_escopo">Aprendizado ativo: Brincando com o escopo</h3>
+
+<p>Vamos observar um exemplo real para mostrar escopo.</p>
+
+<ol>
+ <li>Primeiro, faça uma cópia local de nosso exmplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. Isto contém duas funções chamadas <code>a()</code> e <code>b()</code>, e três variáveis — <code>x</code>, <code>y</code>, e <code>z</code> — duas das quais estão definidas dentro de funções, e uma no escopo global. Ele também contém uma terceira função chamada <code>output()</code>, que leva um simples parâmetro e mostra-o em um parágrafo na página.</li>
+ <li>Abra o exemplo em um navegador e em um editor de textos.</li>
+ <li>Abra o console JavaScript no developer tools de seu navegador. No console  JavaScript, digite o seguinte comando:
+  <pre class="brush: js">output(x);</pre>
+  Você deve ver o valor da variável <code>x</code> exibida na página.</li>
+ <li>Agora tente digitar o seguinte no seu console:
+  <pre class="brush: js">output(y);
+output(z);</pre>
+  Ambos dever retornar um erro com as seguintes linhas "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Por que isso? Porque o escopo da função — <code>y</code> e <code>z</code> estão trancadas dentro das funções <code>a()</code> e  <code>b()</code>, então <code>output()</code> não pode acessá-las quando chamadas do escopo global.</li>
+ <li>Contudo, que tal chamá-las de dentro de outra função? Tente editar <code>a()</code> e <code>b()</code> para que fiquem desta forma:
+  <pre class="brush: js">function a() {
+  var y = 2;
+  output(y);
+}
+
+function b() {
+  var z = 3;
+  output(z);
+}</pre>
+  Salve o código e atualize o navegador, então tente chamar as funções <code>a()</code> e <code>b()</code> do console JavaScript:
+
+  <pre class="brush: js">a();
+b();</pre>
+  Você verá os valores de <code>y</code> e <code>z</code> mostrados na página. <span class="short_text" id="result_box" lang="pt"><span>Isso funciona bem</span></span>, desde que a função <code>output()</code> está sendo chamada dentro de outra função — <span id="result_box" lang="pt"><span>no mesmo escopo que as variáveis que estam imprimindo são definidas</span></span>, em cada caso. <code>output()</code> em si é acessível de qualquer lugar, <span class="short_text" id="result_box" lang="pt"><span>como é definido no escopo global.</span></span></li>
+ <li>Agora tente atualizar seu código como este:
+  <pre class="brush: js">function a() {
+  var y = 2;
+  output(x);
+}
+
+function b() {
+  var z = 3;
+  output(x);
+}</pre>
+  Salve e atualize novamente, e tente isso novamente em seu console JavaScript:         </li>
+ <li>
+  <pre class="brush: js">a();
+b();</pre>
+  Ambas chamadas de <code>a()</code> e <code>b()</code> devem mostrar o valor de x — 1. Isso dá certo porque até mesmo a chamada de  <code>output()</code> não está no mesmo escopo em que <code>x</code> é definido, <code>x</code> é uma variável global então é disponível dentro de todo código, em toda parte.</li>
+ <li>Finalmente, tente atualizar o código o seguinte:
+  <pre class="brush: js">function a() {
+  var y = 2;
+  output(z);
+}
+
+function b() {
+  var z = 3;
+  output(y);
+}</pre>
+  Salve e atualize novamente, e tente isso novamente em seu console JavaScript: </li>
+ <li>
+  <pre class="brush: js">a();
+b();</pre>
+  Desta vez as chamadas de <code>a()</code> e <code>b()</code> retornaram o irritante erro "<a href="/pt-BR/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" — isto porque a chamada de <code>output()</code> e as variáveis que eles estão tentando imprimir não estão definidas dentro do mesmo escopo das funções — as variáveis são efetivamente invisíveis aquelas chamadas de função.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: As mesmas regras de escopo não se aplicam a laços (ex.: <code>for() { ... }</code>) e blocos condicionais (ex.: <code>if() { ... }</code>) — eles parecem muito semelhantes, mas eles não são a mesma coisa! Tome cuidado para não confudir-se.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: O erro <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> é um dos mais comuns que você encontrará. Se você receber este erro e tem certeza que definiu a variável em questão, cheque em que escopo ela está.</p>
+</div>
+
+<ul>
+</ul>
+
+<h3 id="Funções_dentro_de_funções">Funções dentro de funções</h3>
+
+<p>Tenha em mente que você pode chamar uma função de qualquer lugar, até mesmo dentro de outra função.  Isso é frenquentemente usado para manter o código organizado — se você tem uma função grande e complexa, é mais fácil de entendê-la se você quebrá-la em várias subfunções:</p>
+
+<pre class="brush: js">function myBigFunction() {
+  var myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+</pre>
+
+<p>Apenas certifique-se que os valores usados dentro da função estão apropriadamente no escopo. O exemplo acima deve lançar um erro <code>ReferenceError: myValue is not defined</code>, porque apesar da variável <code>myValue</code> estar definida no mesmo escopo da chamda da função, ela não está definida dentro da definição da função — o código real que está rodando quando as funções são chamadas. Para fazer isso funcionar, você deveria passar o valor dentro da função como um parâmetro, desta forma:</p>
+
+<pre class="brush: js">function myBigFunction() {
+  var myValue = 1;
+
+  subFunction1(myValue);
+  subFunction2(myValue);
+  subFunction3(myValue);
+}
+
+function subFunction1(value) {
+  console.log(value);
+}
+
+function subFunction2(value) {
+  console.log(value);
+}
+
+function subFunction3(value) {
+  console.log(value);
+}</pre>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Este arquivo explorou os conceitos fundamentais por trás das funções, pavimentando o caminho para o próximo no qual nos tornamos práticos e o levamos através de passos para construir suas próprias funções personalizadas.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Guia detalhado de funções</a> — cobre algumas características avançadas não includas aqui.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Referências de funções</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Parâmetros padrão</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Funções de flexa</a> — referências de conceito avançado</li>
+</ul>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="Neste_módulo">Neste módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/image_gallery/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/image_gallery/index.html
new file mode 100644
index 0000000000..2e4fc27c4d
--- /dev/null
+++ b/files/pt-br/aprender/javascript/elementos_construtivos/image_gallery/index.html
@@ -0,0 +1,140 @@
+---
+title: Galeria de Imagens
+slug: Aprender/JavaScript/Elementos_construtivos/Image_gallery
+translation_of: Learn/JavaScript/Building_blocks/Image_gallery
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Agora que analisamos os blocos de construção fundamentais do JavaScript, testaremos seu conhecimento de loops, funções, condicionais e eventos, fazendo com que você crie um item bastante comum que você verá em muitos sites — uma galeria de imagens ativadas em JavaScript.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Antes de tentar esta avaliação, você já deve ter trabalhado em todos os artigos deste módulo.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Para testar a compreensão de loops, funções, condicionais e eventos de JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ponto_de_partida">Ponto de partida</h2>
+
+<p>Para começar esta avaliação, você deve <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true">pegar o arquivo ZIP</a> para o exemplo e descompactá-lo em algum lugar no seu computador.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Como alternativa, você pode usar um site como o <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para fazer sua avaliação. Você pode colar o HTML, CSS e JavaScript em um desses editores on-line. Se o editor on-line que você está usando não tiver painéis JavaScript / CSS separados, sinta-se à vontade para colocar os elementos in-line <code>&lt;script&gt;<font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4;"> e </span></font></code><code>&lt;style&gt;</code> dentro da página HTML.</p>
+</div>
+
+<h2 id="Resumo_do_projeto">Resumo do projeto</h2>
+
+<p>Você recebeu alguns recursos de HTML, CSS e imagem e algumas linhas de código JavaScript; você precisa escrever o JavaScript necessário para transformar isso em um programa de trabalho. O corpo do HTML se parece com isto:</p>
+
+<pre class="brush: html">&lt;h1&gt;Image gallery example&lt;/h1&gt;
+
+&lt;div class="full-img"&gt;
+  &lt;img class="displayed-img" src="images/pic1.jpg"&gt;
+  &lt;div class="overlay"&gt;&lt;/div&gt;
+  &lt;button class="dark"&gt;Darken&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class="thumb-bar"&gt;
+
+&lt;/div&gt;</pre>
+
+<p>O exemplo é assim:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+</ul>
+
+<p>As partes mais interessantes do arquivo CSS do exemplo:</p>
+
+<ul>
+ <li>Absolutamente posicione os três elementos dentro do <code>full-img &lt;div&gt;</code> — o <code>&lt;img&gt;</code> no qual a imagem em tamanho normal é exibida, um <code>&lt;div&gt;</code> vazio que é dimensionado para ser do mesmo tamanho que o <code>&lt;img&gt;</code> e colocado sobre a parte superior (isso é usado para aplicar um efeito de escurecimento à imagem através de uma cor de fundo semitransparente) e um <code>&lt;button&gt;</code> que é usado para controlar o efeito de escurecimento.</li>
+ <li>Defina a largura de qualquer imagem dentro da thumb-bar  <code>thumb-bar &lt;div&gt;</code> (as chamadas imagens "thumbnail") para 20%, e flutue-as para a esquerda para que elas fiquem lado a lado em uma linha.</li>
+</ul>
+
+<p>Seu JavaScript precisa:</p>
+
+<ul>
+ <li>Faça um loop em todas as imagens e, para cada uma, insira um elemento <code>&lt;img&gt;</code> dentro do <code>thumb-bar &lt;div&gt;</code> que incorporará a imagem na página.</li>
+ <li>Anexe um manipulador <code>onclick</code> para cada <code>&lt;img&gt;</code> dentro do <code>thumb-bar &lt;div&gt;</code> para que, quando clicados, a imagem correspondente seja exibida no elemento <code>displayed-img &lt;img&gt;</code>.</li>
+ <li>Anexe um manipulador <code>onclick</code> ao <code>&lt;button&gt;</code> para que, ao ser clicado, um efeito de escurecimento seja aplicado à imagem em tamanho normal. Quando é clicado novamente, o efeito de escurecimento é removido novamente.</li>
+</ul>
+
+<p>Para lhe dar mais uma ideia, dê uma olhada no <a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">exemplo finalizado</a> (não espreite o código-fonte!)</p>
+
+<h2 id="Passos_para_concluir">Passos para concluir</h2>
+
+<p>As seções a seguir descrevem o que você precisa fazer.</p>
+
+<h3 id="Looping_através_das_imagens">Looping através das imagens</h3>
+
+<p>Já fornecemos a você linhas que armazenam uma referência à <code>thumb-bar &lt;div&gt;</code> dentro de uma variável chamada <code>thumbBar</code>, cria um novo elemento <code>&lt;img&gt;</code> define seu atributo <code>src</code> como um valor de espaço reservado <code>xxx</code>, e acrescenta essa nova  <code>&lt;img&gt;</code> elemento dentro do <code>thumbBar</code>.</p>
+
+<p>Você precisa:</p>
+
+<ol>
+ <li>Coloque a seção de código abaixo do comentário "Looping through images" dentro de um loop que percorre todas as 5 imagens — você só precisa percorrer cinco números, um representando cada imagem.</li>
+ <li>Em cada iteração de loop, substitua o valor de espaço reservado <code>xxx</code> por uma string que seja igual ao caminho para a imagem em cada caso. Estamos definindo o valor do atributo <code>src</code> para esse valor em cada caso. Tenha em mente que, em cada caso, a imagem está dentro do diretório de imagens e seu nome é <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li>
+</ol>
+
+<h3 id="Adicionando_um_manipulador_onclick_a_cada_imagem_em_miniatura">Adicionando um manipulador onclick a cada imagem em miniatura</h3>
+
+<p>Em cada iteração de loop, você precisa adicionar um manipulador <code>onclick</code> ao atual <code>newImage</code> — isso deve:</p>
+
+<ol>
+ <li>Encontre o valor do atributo <code>src</code> da imagem atual. Isto pode ser feito executando a função <code><a href="/en-US/docs/Web/API/Element/getAttribute">getAttribute()</a></code> no <code>&lt;img&gt;</code> em cada caso e passando um parâmetro de <code>"src"</code> em cada caso. Mas como conseguir a imagem? O uso do <code>newImage.getAttribute()</code> não funcionará, pois o loop é concluído antes de os manipuladores de eventos serem aplicados; fazer desta forma resultaria no retorno do valor <code>src</code> do último <code>&lt;img&gt;</code> para todos os casos. Para resolver isso, tenha em mente que, no caso de cada manipulador de eventos, o <code>&lt;img&gt;</code> é o destino do manipulador. Que tal obter as informações do objeto de evento?</li>
+ <li>Rode uma função, passando o valor <code>src</code> retornado como um parâmetro. Você pode chamar essa função como quiser.</li>
+ <li>Esta função do manipulador de eventos deve definir o valor do atributo <code>src</code> do <code>displayed-img &lt;img&gt;</code> para o valor <code>src</code> passado como um parâmetro. Já fornecemos uma linha que armazena uma referência ao <code>&lt;img&gt;</code> relevante em uma variável chamada <code>displayedImg</code>. Note que queremos uma função nomeada definida aqui.</li>
+</ol>
+
+<h3 id="Escrevendo_um_manipulador_que_executa_o_botão_escurecer_clarear">Escrevendo um manipulador que executa o botão escurecer / clarear</h3>
+
+<p>Isso só deixa o nosso escurecer / clarear <code>&lt;button&gt;</code> — nós já fornecemos uma linha que armazena uma referência ao <code>&lt;button&gt;</code> em uma variável chamada <code>btn</code>. Você precisa adicionar um manipulador <code>onclick</code> que:</p>
+
+<ol>
+ <li>Verifica o nome da classe atual definido no <code>&lt;button&gt;</code> — você pode novamente fazer isso usando <code>getAttribute()</code>.</li>
+ <li>Se o nome da classe for <code>"dark"</code>, altera a classe <code>&lt;button&gt;</code> para <code>"light"</code> (usando <code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), seu conteúdo de texto para "Lighten", e o {{cssxref("background-color")}} da sobreposição <code>&lt;div&gt;</code> para <code>"rgba(0,0,0,0.5)"</code>.</li>
+ <li>Se o nome da classe não for <code>"dark"</code>, a classe <code>&lt;button&gt;</code> será alterada para <code>"dark"</code>, o conteúdo de texto de volta para "Darken", e o {{cssxref("background-color")}} da sobreposição <code>&lt;div&gt;</code> para <code>"rgba(0,0,0,0)"</code>.</li>
+</ol>
+
+<p>As linhas seguintes fornecem uma base para alcançar as mudanças estipuladas nos pontos 2 e 3 acima.</p>
+
+<pre class="brush: js">btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;</pre>
+
+<h2 id="Dicas_e_sugestões">Dicas e sugestões</h2>
+
+<ul>
+ <li>Você não precisa editar o HTML ou CSS de forma alguma.</li>
+</ul>
+
+<h2 id="Avaliação">Avaliação</h2>
+
+<p>Se você está seguindo esta avaliação como parte de um curso organizado, você deve poder dar seu trabalho ao seu professor / mentor para marcação. Se você é auto-didata, então pode obter o guia de marcação com bastante facilidade, perguntando no tópico de <a href="https://discourse.mozilla.org/t/image-gallery-assessment/24687">discussão sobre este exercício</a>, ou no canal <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC da <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Tente o exercício primeiro — não há nada a ganhar com a trapaça!</p>
+
+<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/index.html
new file mode 100644
index 0000000000..cb8deab502
--- /dev/null
+++ b/files/pt-br/aprender/javascript/elementos_construtivos/index.html
@@ -0,0 +1,51 @@
+---
+title: Elementos construtivos do Javascript
+slug: Aprender/JavaScript/Elementos_construtivos
+tags:
+  - Artigo
+  - Condicionais
+  - Exercício
+  - Funções
+  - Iniciante
+  - JavaScript
+  - Loops
+  - eventos
+translation_of: Learn/JavaScript/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Neste módulo, continuaremos nossa abordagem por todos os recursos-chave fundamentais de Javascript, voltando nossa atenção para os tipos de bloco de código comumente encontrados, tais como declarações condicionais, laços, funções e eventos. Você já viu isso no curso, mas apenas de passagem - aqui nós vamos discutir tudo isso explicitamente.</p>
+
+<h2 id="Pré-requisitos">Pré-requisitos</h2>
+
+<p>Antes  de iniciar este módulo, você deve ter familiaridade com os conceitos básicos de <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">HTML</a> e <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/CSS/Introduction_to_CSS">CSS</a>, além de ter estudado nosso módulo anterior, <a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps">primeiros passos no Javacript</a>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você está trabalhando em um computador, tablet ou outro dispositivo onde você não tem a habilidade para criar seus próprios arquivos, você pode testar os exemplos de código (a maioria deles) em um programa de codificação online, tal como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guias">Guias</h2>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/conditionals">Tomando decisões em seu código — condicionais</a></dt>
+ <dd>Em qualquer linguagem de programação, o código precisa tomar decisões e realizar ações de acordo com diferentes valores de entrada. Por exemplo, em um jogo, se o número de vidas de um jogador é 0, então é "fim de jogo". Em um aplicativo de previsão do tempo, se ele está sendo olhado de manhã, é exibido um gráfico de nascer do sol; se for noite, mostra estrelas e a lua. Neste artigo, vamos explorar como as estruturas condicionais funcionam em Javascript.</dd>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/Looping_code">Re-executando código</a></dt>
+ <dd>Às vezes você precisa que uma tarefa seja feita mais de uma vez em uma linha. Por exemplo, percorrendo uma lista de nomes. Em programação, laços realizam esse trabalho muito bem. Aqui nós vamos ver estruturas de laço em Javascript.</dd>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/Functions">Funções — blocos reutilizáveis de código</a></dt>
+ <dd>Outro conceito essencial em codificação são <strong>funções</strong>. <strong>Funções </strong>permitem que você armazene um trecho de código que executa uma única tarefa dentro de um bloco definido, e então chame aquele código em qualquer lugar que você precise dele usando um comando curto - em vez de ter que digitar o mesmo código múltiplas vezes. Neste artigo, vamos explorar conceitos fundamentais por trás das funções, tais como sintaxe básica, como invocar e definir funções, escopo e parâmetros.</dd>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Construa sua própria função</a></dt>
+ <dd>Com a maior parte da teoria essencial tratada no artigo anterior, este artigo fornece uma experiência prática. Aqui você vai adquirir um pouco de prática construindo sua própria função personalizada. Junto com isso, vamos explicar mais alguns detalhes úteis sobre lidar com funções.</dd>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/Return_values">Funções retornam valores</a></dt>
+ <dd>Há um último conceito essencial para discutirmos nesse curso, antes de encerrarmos nossa abordagem sobre funções — valores de retorno. Algumas funções não retornam nenhum valor significativo após executar, outras retornam. É importantes entender o que esses valores são, como utilizá-los em seu código, e como fazer suas próprias funções customizadas retornarem valores utilizáveis. </dd>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/Events">Introdução a eventos</a></dt>
+ <dd>Eventos são ações ou ocorrências que acontecem no sistema que você está programando, sobre os quais o sistema te informa para que você possa reagir a eles de alguma forma se desejar. Por exemplo se o usuário clica em um botão numa página, você deve querer responder a essa ação exibindo uma caixa de informação. Neste artigo final nós discutiremos alguns conceitos importantes sobre eventos, e ver como eles funcionam em navegadores.</dd>
+</dl>
+
+<h2 id="Exercícios">Exercícios</h2>
+
+<p>O exercício a seguir irá testar seu entendimento do básico de JavaScript abordado nos guias acima.</p>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galeria de imagens</a></dt>
+ <dd>Agora que demos uma olhada os elementos construtivos do JavaScript, vamos testar seu conhecimento sobre loops, funções, condicionais e eventos construindo um item bastante comum que você verá em muitos websites — uma galeria de imagens movida a JavaScript.</dd>
+</dl>
diff --git a/files/pt-br/aprender/javascript/elementos_construtivos/return_values/index.html b/files/pt-br/aprender/javascript/elementos_construtivos/return_values/index.html
new file mode 100644
index 0000000000..39d72a1660
--- /dev/null
+++ b/files/pt-br/aprender/javascript/elementos_construtivos/return_values/index.html
@@ -0,0 +1,168 @@
+---
+title: Valores de retorno de função
+slug: Aprender/JavaScript/Elementos_construtivos/Return_values
+translation_of: Learn/JavaScript/Building_blocks/Return_values
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">Há um último conceito essencial para discutirmos neste curso, para fechar nossa visão das funções — valores de retorno. Algumas funções não retornam um valor significativo após a conclusão, mas outras o fazem, e é importante entender quais são seus valores, como utilizá-los em seu código e como fazer com que suas próprias funções personalizadas retornem valores úteis. Nós vamos cobrir tudo isso abaixo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>
+    <p>Conhecimento básico de internet, compreenção básica de HTML e CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript primeiros passos</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funções — reutilizando blocos de código</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender os valores de retorno de uma função, e como utilizá-los</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quais_são_os_valores_de_retorno">Quais são os valores de retorno?</h2>
+
+<p><strong>Valores de retorno</strong> são exatamente como soam — valores retornados pela função quando são concluídos. Você já conheceu os valores de retorno várias vezes, embora possa não ter pensado neles explicitamente. Vamos voltar para algum código familiar:</p>
+
+<pre class="brush: js">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a string,
+// replaces one substring with another, and returns
+// a new string with the replacement made</pre>
+
+<p>Nós vimos exatamente este bloco de código em nosso primeiro artigo de função. Estamos invocando a função <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> na string <code>myText</code> e passando a ela dois parâmetros — a substring para localizar e a substring para substituí-la. Quando essa função é concluída (termina a execução), ela retorna um valor, que é uma nova string com a substituição feita. No código acima, estamos salvando esse valor de retorno como o valor da variável  <code>newString</code>.</p>
+
+<p>Se você observar a página de referência MDN da função de substituição, verá uma seção chamada <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">Valor de retorno</a>. É muito útil conhecer e entender quais valores são retornados por funções, portanto, tentamos incluir essas informações sempre que possível.</p>
+
+<p>Algumas funções não retornam um valor de retorno como tal (em nossas páginas de referência, o valor de retorno é listado como <code>void</code> ou <code>undefined</code> em tais casos). Por exemplo, na <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">função displayMessage()</a> que criamos no artigo anterior, nenhum valor específico é retornado como resultado da função que está sendo chamada. Apenas faz uma caixa aparecer em algum lugar na tela — é isso!</p>
+
+<p>Geralmente, um valor de retorno é usado onde a função é uma etapa intermediária em um cálculo de algum tipo. Você quer chegar a um resultado final, que envolve alguns valores. Esses valores precisam ser calculados por uma função, que retorna os resultados para que possam ser usados no próximo estágio do cálculo.</p>
+
+<h3 id="Usando_valores_de_retorno_em_suas_próprias_funções">Usando valores de retorno em suas próprias funções</h3>
+
+<p>Para retornar um valor de uma função personalizada, você precisa usar ... aguarde por isso ... a palavra-chave <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a>. Vimos isso em ação recentemente em nosso exemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a>. Nossa função <code>draw()</code> desenha 100 círculos aleatórios em algum lugar em um HTML {{htmlelement("canvas")}}:</p>
+
+<pre class="brush: js">function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}</pre>
+
+<p>Dentro de cada iteração de loop, três chamadas são feitas para a função <code>random()</code> , para gerar um valor aleatório para a coordenada x do círculo atual, coordenada y e raio, respectivamente. A função <code>random()</code> recebe um parâmetro — um número inteiro — e retorna um número aleatório inteiro entre 0 e esse número. Se parece com isso:</p>
+
+<pre class="brush: js">function randomNumber(number) {
+  return Math.floor(Math.random()*number);
+}</pre>
+
+<p>Isso pode ser escrito da seguinte maneira:</p>
+
+<pre class="brush: js">function randomNumber(number) {
+  var result = Math.floor(Math.random()*number);
+  return result;
+}</pre>
+
+<p>Mas a primeira versão é mais rápida de escrever e mais compacta.</p>
+
+<p>Estamos retornando o resultado do cálculo <code>Math.floor(Math.random()*number)</code> cada vez que a função é chamada. Esse valor de retorno aparece no ponto em que a função foi chamada e o código continua. Então, por exemplo, se nós rodássemos a seguinte linha:</p>
+
+<pre class="brush: js">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);</pre>
+
+<p>e as três chamadas <code>random()</code> retornaram os valores 500, 200 e 35, respectivamente, a linha seria executada como se fosse isso:</p>
+
+<pre class="brush: js">ctx.arc(500, 200, 35, 0, 2 * Math.PI);</pre>
+
+<p>As chamadas de função na linha são executadas primeiro e seus valores de retorno substituem as chamadas de função, antes que a própria linha seja executada.</p>
+
+<h2 id="Aprendizagem_ativa_nossa_própria_função_de_valor_de_retorno">Aprendizagem ativa: nossa própria função de valor de retorno</h2>
+
+<p>Vamos escrever nossas próprias funções com valores de retorno.</p>
+
+<ol>
+ <li>Primeiro de tudo, faça uma cópia local do arquivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> do GitHub. Esta é uma página HTML simples contendo um campo de texto {{htmlelement("input")}} e um parágrafo. Há também um elemento {{htmlelement("script")}} no qual armazenamos uma referência a ambos os elementos HTML em duas variáveis. Esta pequena página permitirá que você insira um número na caixa de texto e exiba diferentes números relacionados a ele no parágrafo abaixo.</li>
+ <li>Vamos adicionar algumas funções úteis para este elemento <code>&lt;script&gt;</code>. Abaixo das duas linhas existentes de JavaScript, adicione as seguintes definições de função:
+  <pre class="brush: js">function squared(num) {
+  return num * num;
+}
+
+function cubed(num) {
+  return num * num * num;
+}
+
+function factorial(num) {
+  var x = num;
+  while (x &gt; 1) {
+    num *= x-1;
+    x--;
+  }
+  return num;
+}</pre>
+  As funções <code>squared()</code> e <code>cubed()</code> são bastante óbvias — elas retornam o quadrado ou cubo do número dado como um parâmetro. A função <code>factorial()</code> retorna o  <a href="https://pt.wikipedia.org/wiki/Fatorial">fatorial</a> do número fornecido.</li>
+ <li>Em seguida, vamos incluir uma maneira de imprimir informações sobre o número digitado na entrada de texto. Digite o seguinte manipulador de eventos abaixo das funções existentes:
+  <pre class="brush: js">input.onchange = function() {
+  var num = input.value;
+  if (isNaN(num)) {
+    para.textContent = 'You need to enter a number!';
+  } else {
+    para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                       num + ' cubed is ' + cubed(num) + '. ' +
+                       num + ' factorial is ' + factorial(num) + '.';
+  }
+}</pre>
+
+  <p>Aqui estamos criando um manipulador de eventos <code>onchange</code> que é executado sempre que o evento de mudança é acionado na entrada de texto — ou seja, quando um novo valor é inserido na entrada de texto e enviado (insira um valor e pressione tab por exemplo). Quando essa função anônima é executada, o valor existente inserido na entrada é armazenado na variável <code>num</code>.</p>
+
+  <p>Em seguida, fazemos um teste condicional — se o valor inserido não for um número, imprimiremos uma mensagem de erro no parágrafo. O teste analisa se a expressão <code>isNaN(num)</code> retorna true. Usamos a função <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a> para testar se o valor num não é um número — se for, retorna <code>true</code>, e, se não, <code>false</code>.</p>
+
+  <p>Se o teste retorna <code>false</code>, o valor  <code>num</code> é um número, então imprimimos uma frase dentro do elemento de parágrafo informando o que é o quadrado, o cubo e o fatorial do número. A sentença chama as funções <code>squared()</code>, <code>cubed()</code>, e <code>factorial()</code> para obter os valores necessários.</p>
+ </li>
+ <li>Salve seu código, carregue-o em um navegador e experimente.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você tiver problemas para fazer o exemplo funcionar, sinta-se à vontade para verificar seu código na <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">versão finalizada no GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">consulte também sua execução</a>), ou peça ajuda.</p>
+</div>
+
+<p>Neste ponto, gostaríamos que você escrevesse algumas funções e as adicionasse à biblioteca. Como sobre o quadrado ou raiz cúbica do número, ou a circunferência de um círculo com um raio de comprimento <code>num</code>?</p>
+
+<p>Este exercício trouxe alguns pontos importantes além de ser um estudo sobre como usar a declaração de <code>return</code>. Além disso, temos:</p>
+
+<ul>
+ <li>Analisamos outro exemplo de como escrever erros em nossas funções. Geralmente, é uma boa ideia verificar se os parâmetros necessários foram fornecidos e, no tipo de dados correto, e se eles são opcionais, que algum tipo de valor padrão é fornecido para permitir isso. Desta forma, o seu programa terá menos probabilidade de lançar erros.</li>
+ <li>Pense na ideia de criar uma biblioteca de funções. À medida que você avança na sua carreira de programação, você começará a fazer o mesmo tipo de coisas uma e outra vez. É uma boa idéia começar a manter sua própria biblioteca de funções utilitárias que você usa com muita frequência — você pode então copiá-las para o seu novo código, ou até mesmo aplicá-las a qualquer página HTML onde você precisar.</li>
+</ul>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Então, temos isso — funções são divertidas, muito úteis e, embora haja muito o que falar em relação à sua sintaxe e funcionalidade, bastante compreensíveis, dados os artigos certos para se estudar.</p>
+
+<p>Se houver algo que você não entendeu, fique à vontade para ler o artigo novamente ou entre em <a href="/en-US/Learn#Contact_us">contato conosco</a> para pedir ajuda.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Funções detalhadas</a> — um guia detalhado cobrindo informações relacionadas a funções mais avançadas.</li>
+ <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Funções de retorno de chamada em JavaScript</a> — um padrão JavaScript comum é passar uma função para outra função como um argumento, que é então chamado dentro da primeira função. Isso está um pouco além do escopo deste curso, mas vale a pena ser estudado em pouco tempo.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>