Stela JS Curso

Tutoriais › Tutorial 1

Calculadora Simples

O que você vai praticar

Ler valores de campos, validar dados, usar switch e mostrar um resultado na tela.

1. Experimente

Digite dois números, escolha uma operação e clique em Calcular.

Calculadora

Resultado: -

2. Leia o código

O HTML (o que aparece na tela)

<input type="number" id="num1">

<select id="operacao">
  <option value="+">Soma (+)</option>
  <option value="-">Subtração (-)</option>
  <option value="*">Multiplicação (*)</option>
  <option value="/">Divisão (/)</option>
</select>

<input type="number" id="num2">

<button onclick="calcular()">Calcular</button>

<div id="resultado">Resultado: -</div>
Cada elemento tem um id. É pelo id que o JavaScript encontra o elemento na página. O botão chama a função calcular() quando é clicado.

O JavaScript (o que faz a conta)

Este é o código real desta página, exatamente como está rodando:

3. Passo a passo

1. Captura: document.getElementById('num1').value lê o que foi digitado (isso é o DOM, que vamos estudar mais à frente). Tudo que vem de um campo é texto, então o parseFloat converte para número.
2. Validação: se algum campo estiver vazio, isNaN é verdadeiro. Aí o if mostra um erro e o return encerra a função.
3. Cálculo: o switch compara a operação escolhida com cada case e executa só o que combina. O break impede de continuar para o próximo.
4. Resultado: textContent coloca o texto na tela e style.color muda a cor.

4. Agora é com você!

Como testar com o console: na página, aperte F12 (ou clique com o botão direito e escolha Inspecionar) e abra a aba Console. Tudo que você escrever com console.log(...) aparece ali.

Abra este arquivo no seu editor e faça as mudanças, uma de cada vez. Salve e atualize a página para testar.

  • Desafio 0 (fácil): logo depois de calcular n1 e n2, escreva console.log(n1, n2);. Digite números na calculadora, clique em Calcular e veja no console o que o código recebeu.
  • Desafio 1 (fácil): mude a cor da mensagem de erro de 'red' para outra cor.
  • Desafio 2 (fácil): mude o texto 'Resultado: ' para outra frase, como 'A resposta é: '.
  • Desafio 3 (médio): adicione a operação Resto da divisão (%). Você vai precisar de uma nova <option> no HTML e de um novo case no switch.
  • Desafio 4 (médio): adicione a operação Potência, usando n1 ** n2.