Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

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>

5 comentários:

  1. function variaveis(i1, i2) {
    var i1 = document.getElementById("inteiro1").value;
    var i2 = document.getElementById("inteiro2").value;
    var alert1 = (i1) + " " + (i2);

    var inv1 = i2
    var inv2 = i1

    var alert2 = (inv1) + " " + (inv2);

    alert("Ordem inserida:" + " " + (alert1));
    alert("Ordem e variáveis invertidas:" + " " + (alert2));


    return

    ResponderExcluir
  2. function clic(){
    n1 = Number(document.getElementById('tn1').value)
    n2 = Number(document.getElementById('tn2').value)
    antes1 = n1
    antes2 = n2
    if (n1 !=n2){
    n1 = n2
    n2 = antes1
    window.alert(`n1 = ${antes1} n2 = ${antes2}.\nInvertendo fica n1 = ${n1} e n2 = ${n2} `)}

    else{
    alert('Os numeros são iguais')
    }

    ResponderExcluir
  3. function clic(){
    n1 = Number(document.getElementById('tn1').value)
    n2 = Number(document.getElementById('tn2').value)
    antes1 = n1
    antes2 = n2
    if (n1 !=n2){
    n1 = n2
    n2 = antes1
    window.alert(`n1 = ${antes1} n2 = ${antes2}.\nInvertendo fica n1 = ${n1} e n2 = ${n2} `)}

    else{
    alert('Os numeros são iguais')
    }

    ResponderExcluir
  4. fiz um negócio totalmente diferente por ter interpretado o texto errado kkkkk
    aqui o meu código que fiz:
    https://filipediass.github.io/Praticando/Java_Script/exer004/

    ResponderExcluir
  5. O meu ficou um pouco diferente

    function inverter(){
    var num1 = Number(document.getElementById('number01').value)
    var num2 = Number(document.getElementById('number02').value)
    var aux = num1
    var res = document.getElementById('res')
    num1=num2;
    num2=aux;

    if (num1 != num2){
    window.alert( 'ANTES: \n' + 'Número 1: '+document.getElementById('number01').value +
    '\nNúmero 2: '+document.getElementById('number02').value+ '\n\nNúmeros Invertidos: \n'
    +'Número 1: '+num1 + '\nNúmero 2: '+num2)

    }else if(num1.length = '0' || (num2.length = '0')){
    window.alert('[ERRO]: Confira os campos! \n'+ '\nEles não podem estar vazios e \nnão podem ser números iguais!')
    }
    }

    ResponderExcluir