Variáveis Trocando de Valor - Variável auxiliar

Neste tutorial de nosso Curso de JavaScript online e grátis, vamos aprender como inverter os valores armazenados entre duas variáveis. Ou seja, trocar entre si o valor, de uma com outra.

Este simples exercício é de suma importância no restante de nossa apostila de JavaScript. Aliás, se lógica é bem usada na computação, de um modo geral, em qualquer linguagem.

Exercício de JavaScript

O enunciado abaixo é de nossa lista de Exercícios de IF e ELSE.
Tente resolver, muito, sem pressa, antes de ver a solução comentada logo abaixo e o código do script:

"4. Faça um script que pede dois inteiros e armazene eles em duas variáveis. Em seguida, troque o valor das variáveis e exiba num alert."

Código comentado

Bem, vamos lá.

Primeiro, definimos dois formulário de input, via HTML, para o usuário digitar os números.
Depois, um botão chamado Inverter. Ao ser clicado (onclick), ele vai acionar a função inverte(), do JS.

Vamos armazenar os valores digitados nos campos de input em duas variáveis chamadas de num1 e num2. Como vem no formato de string, passamos para float usando a função parseFloat.

Agora vamos lá, inverter os valores.
Queremos que o que está dentro de num1 vá para num2, e vice-versa.

Vamos lá, fazer num1 receber o valor de num2:
  • num1 = num2;

Prontinho, bem simples. Agora o contrário:
  • num2 = num1;

Ok? Não!
Quando num1 recebeu num2, o valor antigo que tava em num1 sumiu!


E agora, quem poderá nos defender?
A solução é usando uma outra variável, chamada de auxiliar.
Vamos declarar ela como aux.

Essa variável armazena o valor de num1 antes dele mudar:
  • var aux = num1;

Aí sim fazemos:
  • num1 = num2;

E agora, para colocar o valor antigo de num1 em num2? Usamos a variável auxiliar!
  • num2 = aux;

Prontinho. Os valores foram invertidos dentro da variável!

Script em funcionamento


Primeira numero:
Segundo numero:



Código HTML + JavaScript

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Primeira numero:<input id="numero1" type="number"> <br />
   Segundo  numero:<input id="numero2" type="number"> <br />
   <button onclick="inverte()">Inverter</button>

   <script type="text/javascript">

    function inverte(){
     var num1 = parseFloat(document.getElementById("numero1").value);
     var num2 = parseFloat(document.getElementById("numero2").value);

     var aux = num1;

     num1=num2;
     num2=aux;

     alert("Antes:\n"+
        "numero1="+document.getElementById("numero1").value+"\n"+
        "numero2="+document.getElementById("numero2").value+"\n\n"+
        "Invertido:\n"+
        "numero1="+num1+"\n"+
        "numero2="+num2+"\n\n");
    }
 </script>

 </head>
</html>

Nenhum comentário:

Postar um comentário