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.

Apostila de JavaScript para download

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:

Anônimo13 de dezembro de 2022 às 06:18
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
Respostas
maninhooroki10 de fevereiro de 2023 às 09:09
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
Respostas
Anônimo10 de fevereiro de 2023 às 09:10
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
Respostas
Anônimo8 de junho de 2023 às 07:59
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
Respostas
Jarede Ferreira15 de março de 2024 às 11:29
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
Respostas

Adicionar comentário