path: root/files/pt-br/learn/javascript/first_steps/a_first_splash/index.html

---
title: Um primeiro mergulho no JavaScript
slug: Learn/JavaScript/First_steps/A_first_splash
translation_of: Learn/JavaScript/First_steps/A_first_splash
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div>

<p class="summary">Agora você poderá aprender um pouco sobre a Teoria do Javascript e o que você poderá fazer com ele. Nós vamos lhe fornecer aqui um Curso rápido sobre as características básicas do JavaScript através de um tutorial completamente prático. Você irá construir um simples jogo de "Adivinhe o número", passo a passo. </p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Pré-requisitos:</th>
   <td>Conhecimentos básicos de informática, uma compreensão básica de HTML e CSS, uma compreensão do que é JavaScript.</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>
    <p>Ter um primeiro bit de experiência em escrever um pouco de  JavaScript, e adquirir  pelo menos uma compreensão básica do que envolve escrever um programa em JavaScript.</p>
   </td>
  </tr>
 </tbody>
</table>

<p>Nós não esperamos que você entenda todo o código imediatamente - Apenas queremos ensinar-lhe os melhores conceitos por enquanto e dar a você uma idéia de como o JavaScript (e outras linguagens de programação) funcionam. Em artigos posteriores você vai rever todos esses recursos com muito mais detalhes!</p>

<div class="note">
<p><strong>Nota</strong>: Muitos dos recursos de código que você verá no JavaScript são iguais aos de outra linguagem de programação - funções, loops, etc. A sintaxe do código parece diferente, mas os conceitos ainda são praticamente os mesmos.</p>
</div>

<h2 id="Pensando_como_um_Programador">Pensando como um Programador</h2>

<p>Uma das coisas mais difíceis de aprender na programação não é a sintaxe que você precisa aprender, mas como aplicá-la para resolver problemas do mundo real. Você precisa começar a pensar como um programador - isso geralmente envolve olhar para as descrições do que seu programa precisa fazer e analisar como eles podem ser aplicados na solução real (prática), quais recursos de código são necessários para alcançar esse objetivo, e como fazê-los trabalhar em conjunto.</p>

<p>Isso requer um mistura de trabalho duro, experiência com a sintaxe de programação utilizada e prática, além de um pouco de criatividade, é claro. Quanto mais você programa, melhor programador se torna. Nós não prometemos transformar seu cérebro em um "cérebro de programador" em 5 minutos, mas vamos te dar todas as oportunidades para pensar na prática como um programador ao longo deste curso. </p>

<p>Com isso em mente, vejamos o exemplo que estaremos construindo neste artigo e analisaremos o processo geral de dissecá-lo em tarefas tangíveis.</p>

<p> </p>

<h2 id="Exemplo_—_Jogo_adivinhe_um_número">Exemplo — Jogo adivinhe um número</h2>

<p>Neste artigo vamos mostrar a você como construir este simples jogo, que pode ser visto abaixo:</p>

<div class="hidden">
<h6 id="Top_hidden_code">Top hidden code</h6>

<p> </p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Jogo adivinhe o número&lt;/title&gt;
    &lt;style&gt;
        html {
            font-family: sans-serif;
        }

        body {
            width: 50%;
            max-width: 800px;
            min-width: 480px;
            margin: 0 auto;
        }

        .lastResult {
            color: white;
            padding: 3px;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;Jogo Adivinhe um número&lt;/h1&gt;
    &lt;p&gt;Selecionamos um número aleatório entre 1 e 100. Veja se consegue adivinhar em 10 chances ou menos. Lhe diremos se seu palpite está com valor alto ou baixo.&lt;/p&gt;
    &lt;div class="form"&gt; &lt;label for="guessField"&gt;Digite seu palpite: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt; &lt;input type="submit" value="Enviar palpite" class="guessSubmit"&gt; &lt;/div&gt;
    &lt;div class="resultParas"&gt;
        &lt;p class="guesses"&gt;&lt;/p&gt;
        &lt;p class="lastResult"&gt;&lt;/p&gt;
        &lt;p class="lowOrHi"&gt;&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;script&gt;
    // Seu JavaScipt vem aqui
    var randomNumber = Math.floor(Math.random() * 100) + 1;
    var guesses = document.querySelector('.guesses');
    var lastResult = document.querySelector('.lastResult');
    var lowOrHi = document.querySelector('.lowOrHi');
    var guessSubmit = document.querySelector('.guessSubmit');
    var guessField = document.querySelector('.guessField');
    var guessCount = 1;
    var resetButton;

    function checkGuess() {
      var userGuess = Number(guessField.value);
      if (guessCount === 1) {
        guesses.textContent = 'Palpites anteriores: ';
      }

      guesses.textContent += userGuess + ' ';

      if (userGuess === randomNumber) {
        lastResult.textContent = 'Parabéns! Seu número está certo!';
        lastResult.style.backgroundColor = 'green';
        lowOrHi.textContent = '';
        setGameOver();
      } else if (guessCount === 10) {
        lastResult.textContent = '!!!FIM DE JOGO!!!';
        lowOrHi.textContent = '';
        setGameOver();
      } else {
        lastResult.textContent = 'Errado!';
        lastResult.style.backgroundColor = 'red';
        if(userGuess &lt; randomNumber) {
          lowOrHi.textContent='Seu palpite está muito baixo!' ;
        } else if(userGuess &gt; randomNumber) {
          lowOrHi.textContent = 'Seu palpite está muito alto!';
        }
      }

      guessCount++;
      guessField.value = '';
    }

    guessSubmit.addEventListener('click', checkGuess);

    function setGameOver() {
      guessField.disabled = true;
      guessSubmit.disabled = true;
      resetButton = document.createElement('button');
      resetButton.textContent = 'Iniciar novo jogo';
      document.body.appendChild(resetButton);
      resetButton.addEventListener('click', resetGame);
    }

    function resetGame() {
      guessCount = 1;
      var resetParas = document.querySelectorAll('.resultParas p');
      for(var i = 0 ; i &lt; resetParas.length ; i++) {
        resetParas[i].textContent='';
      }

      resetButton.parentNode.removeChild(resetButton);
      guessField.disabled = false;
      guessSubmit.disabled = false;
      guessField.value='';
      guessField.focus();
      lastResult.style.backgroundColor='white';
      randomNumber=Math.floor(Math.random() * 100) + 1;
    }
&lt;/script&gt;

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

<p> </p>
</div>

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

<p>Vá em frente e jogue por um tempo para se familiarizar com o jogo antes de continuar.</p>

<p>Vamos imaginar que o seu chefe te deu as seguintes diretrizes para criar este jogo:</p>

<blockquote>
<p>Quero que você crie um jogo simples do tipo adivinhe um número. Ele deve gerar um número aleatório de 1 a 100, depois desafiar o jogador a adivinhar o número em 10 rodadas. A cada rodada deve ser dito ao jogador se ele está certo ou errado, se estiver errado, deve ser dito se o palpite é muito baixo ou muito alto. Também deve ser mostrado ao jogador os números que ele tentou adivinhar anteriormente. O jogo termina se o jogador acertar o número ou acabarem o número de tentativas. Quando o jogo acabar, deve ser dado ao jogador a opção de jogar novamente.</p>
</blockquote>

<p>Olhando para o enunciado, a primeira coisa que devemos fazer é quebrá-lo em pequenas tarefas, da forma mais parecida com o pensamento de um programador quanto possível:</p>

<ol>
 <li>Gerar um número aleatório entre 1 e 100.</li>
 <li>Gravar o número do turno que o jogador está. Iniciar em 1.</li>
 <li>Dar ao jogador uma forma de adivinhar o número.</li>
 <li>Após a tentativa ter sido submetida, primeiro gravar em algum lugar para que o usuário possa ver as tentativas anteriores.</li>
 <li>Depois, verificar se o palpite está correto.</li>
 <li>Se estiver correto:
  <ol>
   <li>Escrever mensagem de parabéns.</li>
   <li>Impedir que o jogador insira mais respostas (isso pode bugar o jogo).</li>
   <li>Mostrar controle que permita ao jogador reiniciar o jogo.</li>
  </ol>
 </li>
 <li>Se o palpite estiver errado e o jogador ainda tem turnos sobrando:
  <ol>
   <li>Dizer ao jogador que ele está errado.</li>
   <li>Permitir que ele insira outra resposta.</li>
   <li>Incrementar o número do turno em 1.</li>
  </ol>
 </li>
 <li>Se o jogador está errado mas não tem turnos sobrando:
  <ol>
   <li>Dizer ao jogador que o jogo acabou.</li>
   <li>Impedir que o jogador insira mais respostas (isso pode bugar o jogo).</li>
   <li>Mostrar controle que permita ao jogador reiniciar o jogo.</li>
  </ol>
 </li>
 <li>Quando reiniciar, tenha certeza de resetar todas as variáveis e a interface do jogo, então volte para o passo 1.</li>
</ol>

<p>Então vamos em frente, olhando como podemos transformar esses passos em código, construindo esse exemplo e explorando as ferramentas do JavaScript ao longo do caminho.</p>

<h3 id="Configuração_Inicial">Configuração Inicial</h3>

<p>Para iniciar este tutorial, gostaríamos que você fizesse uma cópia do arquivo <a href="https://github.com/mdn/learning-area-pt-br/blob/master/javascript/introduction-to-js-1/first-splash/jogo-advinhe-o-numero-inicio.html">jogo-adivinhe-o-numero-inicio.html</a> (<a href="https://mdn.github.io/learning-area-pt-br/javascript/introduction-to-js-1/first-splash/jogo-advinhe-o-numero-inicio.html">ver demonstração</a>). Abra-o em um editor de texto e também no seu browser. No momento você vai apenas ver um simples cabeçalho, parágrafo de instruções e um formulário para entrada de informações, mas o formulário não fará nada por enquanto.</p>

<p>O lugar em que começaremos a escrever nosso código será dentro da tag {{htmlelement("script")}} na parte inferior do HTML:</p>

<pre class="brush: html">&lt;script&gt;

  // Seu JavaScript vai aqui

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

<h3 id="Adicionando_variáveis_para_armazenar_nossos_dados">Adicionando variáveis para armazenar nossos dados</h3>

<p>Vamos começar. Primeiramente, adicione as seguintes linhas na sua tag {{htmlelement("script")}} :</p>

<pre class="brush: js">var numeroAleatorio= Math.floor(Math.random() * 100) + 1;

var palpites = document.querySelector('.palpites');
var ultimoResultado = document.querySelector('.ultimoResultado');
var baixoOuAlto = document.querySelector('.baixoOuAlto');

var envioPalpite = document.querySelector('.envioPalpite');
var campoPalpite = document.querySelector('.campoPalpite');

var contagemPalpites = 1;
var botaoReinicio;</pre>

<p>Aqui estamos setando as variáveis que precisamos para guardar os dados que nosso programa irá utilizar. Variáveis são basicamente recipientes para valores (como números, ou strings ou textos). Variáveis são criadas com a palavra-chave <code>var</code> seguida de um nome para sua variável. Você pode atribuir um valor para sua variável com um sinal de igual (<code>=</code>) seguido do valor que você quer dar a ela.</p>

<p>No nosso exemplo:</p>

<ul>
 <li>À primeira variável — <code>numeroAleatorio</code> — é atribuído um número aleatório entre 1 e 100, calculado usando um algoritmo matemático.</li>
 <li>As próximas três variáveis são criadas para guardar uma referência para os parágrafos resultantes em nosso HTML, e são usadas para inserir valores nos parágrafos no código:
  <pre class="brush: html">&lt;p class="palpites"&gt;&lt;/p&gt;
&lt;p class="ultimoResultado"&gt;&lt;/p&gt;
&lt;p class="baixoOuAlto"&gt;&lt;/p&gt;</pre>
 </li>
 <li>As próximas duas variáveis armazenam referências para o campo de texto e o botão de envio e são usados para controlar o envio do palpite.
  <pre class="brush: html">&lt;label for="campoPalpite"&gt;Digite seu palpite: &lt;/label&gt;&lt;input type="text" id="campoPalpite" class="campoPalpite"&gt;
&lt;input type="submit" value="Enviar palpite" class="envioPalpite"&gt;</pre>
 </li>
 <li>As últimas duas variáveis (contagemPalpites e botaoReinicio) são usadas para armazenar a contagem dos palpites do usuário, e o outro é uma referência para o botão de reset, que não existe ainda (mas irá existir).</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: Você irá aprender muito mais sobre variáveis a partir do <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">próximo artigo</a>.</p>
</div>

<h3 id="Funções">Funções</h3>

<p>Em seguida, adicione o seguinte código abaixo do JavaScript anterior:</p>

<pre class="brush: js">function conferirPalpite() {
  alert('Eu sou um placeholder');
}</pre>

<p>Funções são blocos reutilizáveis de código que você pode escrever uma vez e executá-lo de novo e de novo, eliminando a necessidade de repetir o código todas as vezes. Isso é realmente útil. Há várias formas de se definir funções, mas, por agora, vamos nos concentrar em um tipo simples. Aqui nós definimos uma função usando a palavra chave <code>function</code>, seguida de um nome, com parênteses colocados na sequência. Depois disso nós colocamos duas chaves (<code>{ }</code>). Dentro das chaves vai todo o código que queremos executar sempre que chamarmos a função.</p>

<p>O código é executado digitando o nome da função seguido pelos parênteses.</p>

<p>Tente salvar o seu código agora e atualizá-lo no navegador.</p>

<p>Vá até o <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console JavaScript</a>, e insirá a seguinte linha:</p>

<pre class="brush: js">conferirPalpite();</pre>

<p>Você deverá ver um alerta aparecer dizendo "Eu sou um placeholder"; nós definimos uma função em nosso código que cria um alerta a qualquer hora em que a chamarmos.</p>

<div class="note">
<p><strong>Nota</strong>: Você irá aprender muito mais sobre funções mais tarde no curso.</p>
</div>

<h3 id="Operadores">Operadores</h3>

<p>Os operadores JavaScript nos permite realizar testes, fazer cálculos matemáticos, unir sequências de texto, e outras coisas do tipo.</p>

<p>Vamos salvar nosso código e atualizar a página exibida em nosso navegador. Abra o <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console JavaScript</a> se você ainda não o tiver aberto, para que possamos digitar os exemplos mostrados abaixo — digite cada um exatamente como mostrado na coluna "Exemplo", pressionando Return/Enter na sequência, e veja quais resultados são retornados. Se você não tiver fácil acesso às ferramentas de desenvolvimento do navegador você pode sempre utilizar o console embutido simples, como no exemplo abaixo:</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;Console JavaScript&lt;/title&gt;
    &lt;style&gt;
      * {
        box-sizing: border-box;
      }

      html {
        background-color: #0C323D;
        color: #809089;
        font-family: monospace;
      }

      body {
        max-width: 700px;
      }

      p {
        margin: 0;
        width: 1%;
        padding: 0 1%;
        font-size: 16px;
        line-height: 1.5;
        float: left;
      }

      .input p {
        margin-right: 1%;
      }

      .output p {
        width: 100%;
      }

      .input input {
        width: 96%;
        float: left;
        border: none;
        font-size: 16px;
        line-height: 1.5;
        font-family: monospace;
        padding: 0;
        background: #0C323D;
        color: #809089;
      }

      div {
        clear: both;
      }

    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;


  &lt;/body&gt;

  &lt;script&gt;
    var geval = eval;

    function createInput() {
      var inputDiv = document.createElement('div');
      var inputPara = document.createElement('p');
      var inputForm = document.createElement('input');

      inputDiv.setAttribute('class','input');
      inputPara.textContent = '&gt;';
      inputDiv.appendChild(inputPara);
      inputDiv.appendChild(inputForm);
      document.body.appendChild(inputDiv);
      inputDiv.focus();

      inputForm.addEventListener('change', executeCode);
    }

    function executeCode(e) {
      try {
        var result = geval(e.target.value);
      } catch(e) {
        var result = 'error — ' + e.message;
      }

      var outputDiv = document.createElement('div');
      var outputPara = document.createElement('p');

      outputDiv.setAttribute('class','output');
      outputPara.textContent = 'Result: ' + result;
      outputDiv.appendChild(outputPara);
      document.body.appendChild(outputDiv);

      e.target.disabled = true;
      e.target.parentNode.style.opacity = '0.5';

      createInput()
    }

    createInput();

  &lt;/script&gt;
&lt;/html&gt;</pre>
</div>

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

<p>Primeiro vamos ver os operadores matemáticos, como por exemplo:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Operador</th>
   <th scope="col">Nome</th>
   <th scope="col">Exemplo</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>+</code></td>
   <td>Adição</td>
   <td><code>6 + 9</code></td>
  </tr>
  <tr>
   <td><code>-</code></td>
   <td>Subtração</td>
   <td><code>20 - 15</code></td>
  </tr>
  <tr>
   <td><code>*</code></td>
   <td>Multiplicação</td>
   <td><code>3 * 7</code></td>
  </tr>
  <tr>
   <td><code>/</code></td>
   <td>Divisão</td>
   <td><code>10 / 5</code></td>
  </tr>
 </tbody>
</table>

<p>Você também pode usar o operador <code>+</code> para unir sequências de texto (isso é chamado de concatenação em programação). Tente inserir as seguintes linhas:</p>

<pre class="brush: js">var nome = 'Bingo';
nome;
var ola = ' diz olá!';
ola;
var cumprimento = nome + ola;
cumprimento;</pre>

<p>Há também alguns atalhos para operadores disponíveis, chamados de operadores de atribuição ampliada (ou atribuição composta). Por exemplo, se você quer adicionar uma nova sequência de texto à uma existente e retornar o resultado, você pode fazer o seguinte:</p>

<pre class="brush: js">nome += ' diz olá!';</pre>

<p>Isso é equivalente a:</p>

<pre class="brush: js">nome = nome + ' diz olá!';</pre>

<p>Quando estamos rodando testes de verdadeiro/falso (por exemplo, condicinais internas — veja {{anch("Conditionals", "abaixo")}}, usamos operadores de comparação, por exemplo:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Operador</th>
   <th scope="col">Nome</th>
   <th scope="col">Exemplo</th>
  </tr>
  <tr>
   <td><code>===</code></td>
   <td>Igualdade estrita (é estritamente o mesmo?)</td>
   <td><code>5 === 2 + 4</code></td>
  </tr>
  <tr>
   <td><code>!==</code></td>
   <td>Não-igualdade (não é o mesmo?)</td>
   <td><code>'Chris' !== 'Ch' + 'ris'</code></td>
  </tr>
  <tr>
   <td><code>&lt;</code></td>
   <td>Menor que</td>
   <td><code>10 &lt; 6</code></td>
  </tr>
  <tr>
   <td><code>&gt;</code></td>
   <td>Maior que</td>
   <td><code>10 &gt; 20</code></td>
  </tr>
 </thead>
</table>

<h3 id="Condicionais">Condicionais</h3>

<p>Voltando à nossa função <code>conferirPalpite()</code>, imagino que seja seguro dizer que não queremos que ela apenas exiba uma mensagem de teste (placeholder). Nós queremos verificar se o palpite do jogador está correto ou não, e responder apropriadamente.</p>

<p>Neste ponto, substitua sua função <code>conferirPalpite()</code> atual por esta versão:</p>

<pre class="brush: js">function conferirPalpite() {
  var palpiteUsuario = Number(campoPalpite.value);
  if (contagemPalpites === 1) {
    palpites.textContent = 'Palpites anteriores: ';
  }
  palpites.textContent += palpiteUsuario + ' ';

  if (palpiteUsuario === numeroAleatorio) {
    ultimoResultado.textContent = 'Parabéns! Você acertou!';
    ultimoResultado.style.backgroundColor = 'green';
    baixoOuAlto.textContent = '';
    configFimDeJogo();
  } else if (contagemPalpites === 10) {
    ultimoResultado.textContent = '!!!FIM DE JOGO!!!';
    baixoOuAlto.textContent = '';
    configFimDeJogo();
  } else {
    ultimoResultado.textContent = 'Errado!';
    ultimoResultado.style.backgroundColor = 'red';
    if(palpiteUsuario &lt; numeroAleatorio) {
      baixoOuAlto.textContent = 'Seu palpite está muito baixo!';
    } else if(palpiteUsuario &gt; numeroAleatorio) {
      baixoOuAlto.textContent = 'Seu palpite está muito alto!';
    }
  }

  contagemPalpites++;
  campoPalpite.value = '';
  campoPalpite.focus();
}</pre>

<p>Isso é bastante código — ufa! Vamos abordar cada seção e explicar o que faz.</p>

<ul>
 <li>A primeira linha (linha 2 no código acima) declara uma variável chamada <code>palpiteUsuario</code> e define seu valor igual ao valor inserido pelo jogador no campo de texto. Nós também rodamos esse valor através do método embutido <code>Number()</code>, apenas para ter certeza de que o valor inserido é um número.</li>
 <li>Em seguida, encontramos nosso primero bloco de código condicional (linhas 3–5 no código acima). Um bloco de código condicional lhe permite executar código seletivamente, dependendo se uma condição é verdadeira ou não. Se parece um pouco com uma função, mas não é. A forma mais simples de um bloco condicional começa com a palavra chave <code>if</code>, depois os parênteses, depois as chaves. Dentro dos parênteses nós incluímos um teste. Se o teste retornar <code>true</code>(verdadeiro), o código dentro das chaves é executado. Caso contrário, não é executado, e seguimos para a próxima parte do código. Neste caso, o teste está verificando se a variável <code>contagemPalpites</code> é igual a <code>1</code> (isto é, se essa é ou não a primeira tentativa do jogador):
  <pre class="brush: js">contagemPalpites === 1</pre>
  Se a condição for verdadeira, nós tornamos o conteúdo do parágrafo de palpites, <code>&lt;p class="palpites"&gt;&lt;/p&gt;</code> igual a "Palpites anteriores: ". Caso contrário, o texto não é exibido.</li>
 <li>A linha 6 acrescenta o valor atual de <code>palpiteUsuario</code> ao final do parágrafo <code>palpites</code>, mais um espaço em branco para que haja espaçamento entre cada palpite mostrado.</li>
 <li>O próximo bloco (linhas 8–24 acima) fazem as seguintes conferências:
  <ul>
   <li>O primeiro <code>if(){ }</code> confere se o palpite do jogador é igual ao número aleatório (<code>numeroAleatorio</code>) definido no topo do nosso JavaScript. Se for, o jogador adivinhou corretamente o número e venceu o jogo. Então mostramos ao jogador uma mensagem de parabenização com uma agradável cor verde, limpamos o conteúdo do parágrado que informa sobre o palpite ser alto ou baixo <code>&lt;p class="baixoOuAlto"&gt;&lt;/p&gt;</code>, e executamos uma função chamada <code>configFimDeJogo()</code>, que iremos discutir mais tarde.</li>
   <li>Agora nós encadeamos outro teste ao final deste anterior usando uma estrutura <code>else if(){ }</code>. Este confere se o palpite do jogador é sua última tentativa. Se for, o programa faz o mesmo que no bloco anterior, porém com uma mensagem de fim de jogo ao invés do texto de parabeninzação.</li>
   <li>O bloco final encadeado ao final do código (<code>else { }</code>) contém código que só é executado se nenhum dos outros dois testes retornar verdadeiro (ou seja, o jogador não acertou o número, porém ainda tem mais tentativas restantes). Neste caso nós dizemos a ele que está errado, e então rodamos outro teste condicional para checar se o palpite foi maior ou menor do que a resposta certa, exibindo então uma mensagem apropriada para informá-lo se foi maior ou menor.</li>
  </ul>
 </li>
 <li>As próximas três linhas da função (linhas 26–28) nos deixa preparados para o próximo palpite ser submetido. Nós somamos 1 à variável <code>contagemPalpites</code> para que o jogador use sua tentativa (<code>++</code> é uma operação de incremento — incrementa em 1), e o campo de texto do formulário de inserção seja esvaziado e focado novamente, pronto para que o próximo palpite seja inserido.</li>
</ul>

<h3 id="Eventos">Eventos</h3>

<p>Neste ponto temos uma função <code>conferirPalpite()</code> bem implementada, mas ela não irá fazer nada pois nós não a chamamos ainda. Idealmente nós queremos que ela seja acionada quando o botão "Enviar palpite" for pressionado, e para fazer isso precisamos usar um evento. Eventos são ações que acontencem no navegador, como um botão sendo clicado, ou uma página carregada, ou um vídeo tocando; ações as quais podemos responder executando blocos de código. Os construtores que monitoram os acontecimentos de eventos são chamados de <strong>event listeners</strong>, e os blocos de código executados em resposta ao acontecimento do evento são chamados de <strong>event handlers</strong>.</p>

<p>Adicione a seguinte linha abaixo da chave de fechamento da sua função <code>conferirPalpite()</code>:</p>

<pre class="brush: js">envioPalpite.addEventListener('click', conferirPalpite);</pre>

<p>Aqui nós estamos adicionando um <em>event listener</em> ao botão <code>envioPalpite</code>. Esse é um método que aceita a inserção de dois valores (chamados de argumentos) — o tipo de envento que estamos monitorando (neste caso o evento <code>click</code>) como um <em>string</em> (sequência de texto), e o código que queremos executar quando o evento ocorrer (neste caso a função <code>conferirPalpite()</code> — note que não temos que especificar os parênteses quando estivermos escrevendo dentro de {{domxref("EventTarget.addEventListener", "addEventListener()")}}).</p>

<p>Tente agora salvar e atualizar seu código, e seu exemplo deve funcionar agora, até um ponto. O único problema agora é que se você acertar o palpite ou ficar sem mais tentativas o jogo irá falhar, porque ainda não definimos a função <code>configFimDeJogo()</code> que deve ser executada uma vez que o jogo terminar. Vamos adicionar agora o código restante e completar a funcionalidade do nosso exemplo.</p>

<h3 id="Finalizando_a_funcionalidade_do_jogo">Finalizando a funcionalidade do jogo</h3>

<p>Vamos adicionar a função <code>configFimDeJogo()</code> ao final do nosso código e então explorá-lo. Adicione agora isso, abaixo do restante do seu JavaScript:</p>

<pre class="brush: js">function configFimDeJogo() {
  campoPalpite.disabled = true;
  envioPalpite.disabled = true;
  botaoReinicio = document.createElement('button');
  botaoReinicio.textContent = 'Iniciar novo jogo';
  document.body.appendChild(botaoReinicio);
  botaoReinicio.addEventListener('click', reiniciarJogo);
}</pre>

<ul>
 <li>As primeiras duas linhas desabilitam a entrada de texto do formulário e o clique do botão, definindo a propriedade <em>disabled</em> (desabilitado) de cada um como <code>true</code> (verdadeiro). Isso é necessário, pois se não o fizermos, o usuário poderia submeter mais palpites depois do jogo ter terminado, o que iria bagunçar as coisas.</li>
 <li>As próximas três linhas geram um novo elemento {{htmlelement("button")}}, define o texto de seu rótulo como "Iniciar novo jogo", e o adiciona ao final do nosso HTML existente.</li>
 <li>A linha final define um monitor de evento (<em>event listener</em>) em nosso botão, para que quando seja clicado, uma função chamada <code>reiniciarJogo()</code> seja executada.</li>
</ul>

<p>Agora precisamos definir essa função também! Adicione o seguinte código, novamente ao final do nosso JavaScript:</p>

<pre class="brush: js">function reiniciarJogo() {
  contagemPalpites = 1;

  var reiniciarParas = document.querySelectorAll('.resultadoParas p');
  for (var i = 0 ; i &lt; reiniciarParas.length ; i++) {
    reiniciarParas[i].textContent = '';
  }

  botaoReinicio.parentNode.removeChild(botaoReinicio);

  campoPalpite.disabled = false;
  envioPalpite.disabled = false;
  campoPalpite.value = '';
  campoPalpite.focus();

  ultimoResultado.style.backgroundColor = 'white';

  numeroAleatorio = Math.floor(Math.random() * 100) + 1;
}</pre>

<p>Esse longo bloco de código redefine completamente tudo do modo como era no início do jogo, para que o jogador possa jogá-lo novamente. Ele:</p>

<ul>
 <li>Coloca o valor da variável <code>contagemPalpites</code> novamente igual a 1.</li>
 <li>Limpa todos os parágrafos de informativos.</li>
 <li>Remove o botão resete do nosso código.</li>
 <li>Habilita os elementos do formulários, esvazia e direciona o foco ao campo de texto, pronto para que um novo palpite seja inserido.</li>
 <li>Remove a cor de fundo do parágrafo <code>ultimoResultado</code>.</li>
 <li>Gera um novo número aleatório para que o jogador não esteja tentando adivinhar o mesmo número novamente!</li>
</ul>

<p><strong>Neste ponto você deve ter um jogo (simples) completamente funcional — parabéns!</strong></p>

<p>Tudo o que temos que fazer agora neste artigo é falar sobre alguns outros recursos importantes que você já viu, mesmo que não os tenha notado ainda.</p>

<h3 id="Loops">Loops</h3>

<p>Uma parte do código acima que precisamos olhar mais detalhadamente é o loop <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a>. Loop é um conceito muito importante em programação, que permite a você continuar executando um pedaço do código repetidamente, até que determinada condição seja satisfeita.</p>

<p>Para começar, vá novamente até o <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console JavaScript</a> do seu navegador, e insira o seguinte:</p>

<pre class="brush: js">for (var i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>

<p>O que aconteceu? Os números de 1 a 20 foram exibidos no seu console. Isso acontece por causa do loop. Um loop <code>for</code> utiliza a inserção de três valores (argumentos):</p>

<ol>
 <li><strong>Um valor inicial</strong>: Nesse caso estamos iniciando a contagem em 1, mas poderia ser qualquer outro número que quisesse utilizar. Você pode substituir <code>i</code> por qualquer número que quiser também, mas <code>i</code> é utilizado por convenção porque é curto e fácil de lembrar.</li>
 <li><strong>Uma condição de saída</strong>: Aqui nós especificamos <code>i &lt; 21</code> — o loop irá continuar rodando até que <code>i</code> não seja mais menor que 21. Quando <code>i</code> alcançar 21, o loop não será mais executado.</li>
 <li><strong>Incremento</strong>: Nós especificamos <code>i++</code>, que siginifica "adicione 1 à i". O loop irá rodar uma vez para cada valor de <code>i</code>, até que <code>i</code> alcance o valor de 21 (como abordado acima). Nesse caso, nós estamos simplesmente imprimindo o valor de <code>i</code> no console em cada iteração usando {{domxref("Console.log", "console.log()")}}.</li>
</ol>

<p>Agora vamos olhar o loop em nosso jogo de adivinhar o número — o código seguinte pode ser encontrado dentro da função <code>reiniciarJogo()</code>:</p>

<pre class="brush: js">var reiniciarParas = document.querySelectorAll('.resultadoParas p');
for (var i = 0 ; i &lt; reiniciarParas.length ; i++) {
  reiniciarParas[i].textContent = '';
}</pre>

<p>Esse código cria uma variável contendo uma lista de todos os parágrafos dentro de <code>&lt;div class="resultadoParas"&gt;</code> usando o método {{domxref("Document.querySelectorAll", "querySelectorAll()")}}, e então faz o loop em cada um, removendo o conteúdo de texto dos mesmos.</p>

<h3 id="Uma_pequena_discussão_sobre_objetos">Uma pequena discussão sobre objetos</h3>

<p>Vamos adicionar uma melhoria final antes de chegarmos a essa discussão. Adicione a linha seguinte logo abaixo da linha <code>var botaoReinicio;</code> próximo ao topo do seu JavaScript, em seguida salve nosso arquivo:</p>

<pre class="brush: js">campoPalpite.focus();</pre>

<p>Essa linha usa o método {{domxref("HTMLElement.focus", "focus()")}} para automaticamente colocar o cursor dentro campo de texto do {{htmlelement("input")}} assim que a página carrega, significando que o usuário já pode começar a digitar o primeiro palpite, e não precisa clicar no campo do formulário primeiro. É apenas uma pequena adição, mas melhora a usabilidade — dando ao usuário uma boa dica visual do que ele deve fazer para jogar o jogo.</p>

<p>Vamos analisar o que está acontencedo aqui com um pouco mais de detalhes. Em JavaScript, tudo é um objeto. Um objeto é uma coleção de funcionalidades relacionadas armazenadas em um único agrupamento. Você pode criar seus próprios objetos, mas isso é bastante avançado e nós não iremos abordar até mais tarde no curso. Por agora, vamos apenas discutir brevemente os objetos pré-construídos presentes em seu navegador, que lhe permite fazer várias coisas úteis.</p>

<p>Neste caso particular, nós primeiro criamos a variável <code>campoPalpite</code> que armazena uma referência ao campo de inserção de texto do formulário em nosso HTML — a linha seguinte pode ser achada entre nossas declarações de variáveis próximas ao topo:</p>

<pre class="brush: js">var campoPalpite = document.querySelector('.campoPalpite');</pre>

<p>Para pegar essa referência, usamos o método {{domxref("document.querySelector", "querySelector()")}} do objeto {{domxref("document")}}. <code>querySelector()</code> pega um pedaço de informação — um <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">seletor CSS</a> que seleciona o elemento ao qual você quer referenciar.</p>

<p>Como agora <code>campoPalpite</code> contém referência ao elemento {{htmlelement("input")}}, ele terá agora acesso a um número de propriedades (basicamente variáveis armazenadas dentro de objetos, sendo que alguns não podem ter seus valores alterados) e métodos (basicamente, funções armazenadas dentro de objetos). Um método disponível para elementos de inserção <code>&lt;input&gt;</code>, é o <code>focus()</code>, então agora podemos usar essa linha para focar o campo de inserção de texto:</p>

<pre class="brush: js">campoPalpite.focus();</pre>

<p>Variáveis que não contém referências a elementos de formulário não terão <code>focus()</code> disponível para elas. Por exemplo, a variável <code>palpites</code> contém referência de um elemento {{htmlelement("p")}}, e <code>contagemPalpites</code> contém um número.</p>

<h3 id="Brincando_com_objetos_do_navegador">Brincando com objetos do navegador</h3>

<p>Vamos brincar um pouco com alguns objetos do navegador.</p>

<ol>
 <li>Primeiro abra seu programa em um navegador.</li>
 <li>Em seguida, abra as <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">ferramentas de desenvolvimento do navegador</a>, e certifique-se de que a aba do console JavaScript esteja aberta.</li>
 <li>Digite <code>campoPalpite</code> e o console irá lhe mostrar que a variável contém um elemento {{htmlelement("input")}}. Você também irá notar que o console completa automaticamente os nomes de objetos existentes dentro do ambiente de execução, incluindo suas variáveis!
  <ol>
   <li>Agora digite o seguinte:
    <pre class="brush: js">campoPalpite.value = 'Olá';</pre>
    A propriedade <code>value</code> representa o valor atual inserido no campo de texto. Você verá que inserindo esse comando, nós mudamos o valor desse objeto!</li>
  </ol>
 </li>
 <li>Agora tente digitar <code>palpites</code> e pressione <em>return</em>. O console irá mostrar que a variável contém um elemento {{htmlelement("p")}}.</li>
 <li>Agora tente inserir a linha seguinte:
  <pre class="brush: js">palpites.value</pre>
  O navegador irá retornar <code>undefined</code>, porque <code>value</code> não existe em parágrafos.</li>
 <li>Para mudar o texto dentro de um parágrafo, você precisa da propriedade {{domxref("Node.textContent", "textContent")}}. Tente isso:
  <pre class="brush: js">palpites.textContent = 'Onde está meu parágrafo?';</pre>
 </li>
 <li>Agora algo divertido. Tente inserir as linhas abaixo, uma por uma:
  <pre class="brush: js">palpites.style.backgroundColor = 'yellow';
palpites.style.fontSize = '200%';
palpites.style.padding = '10px';
palpites.style.boxShadow = '3px 3px 6px black';</pre>
  Cada elemento em uma página tem uma propriedade <code>style</code>, que contém um objeto no qual estão inseridos em suas propriedades todos os estilos incorporados de CSS aplicados ao respectivo elemento. Isso nos permite configurar dinamicamente novos estilos CSS nos elementos usando JavaScript.</li>
</ol>

<h2 id="Finalizado_por_enquanto...">Finalizado por enquanto...</h2>

<p>Então é isso, para construir o exemplo — você chegou ao final, muito bem! Teste o resultado do seu código, ou <a href="https://mdn.github.io/learning-area-pt-br/javascript/introduction-to-js-1/first-splash/jogo-advinhe-o-numero.html">jogue com nossa versão finalizada aqui</a>. Se você não conseguir fazer o exemplo funcionar, compare com o <a href="https://github.com/mdn/learning-area-pt-br/blob/master/javascript/introduction-to-js-1/first-splash/jogo-advinhe-o-numero.html">código fonte</a>.</p>

<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p>