Programação

17 de outubro de 2008

Como fazer calculadoras em JavaScript

1.753.034

Nunca me interessei de fato em aprender muito JavaScript, mas durante a faculdade, essa útil linguagem foi um dos temas do período. Nesta série de tutoriais, vou escrever o que vou aprendendo para compartilhar com os leitores do site.

Nesta parte, utilizarei o primeiro conceito que aprendi de JavaScript fazendo uma calculadora simples.

1. Especificações do Programa

Antes de mais nada, é importante ressaltar que antes de se fazer qualquer programa, é bom a gente sempre saber o que vai fazer. Por isso um planejamento é sempre bom.

Sabendo disto, vamos considerar os seguintes itens-objetivos:

A página terá que ser totalmente feita conforme padrão XHTML, utilizando as técnicas de apresentação de página separando Conteúdo e Forma (HTML / CSS).
A calculadora terá 4 operações básicas: somar, subtrair, multiplicar e dividir.
Iremos fazer duas versões da calculadora: um com campos de formulário, onde o usuário digita o valor manualmente e outra com botões para cada número e um “visor” com o resultado.

Pré-requisitos:

Conhecimentos de HTML e CSS para montar o visual da calculadora. Este tutorial explica todos os passos detalhadamente, mas é bom ter uma noção disso para entender melhor.
Um editor de texto ou editor HTML de sua preferência. Qualquer um serve, pois trabalharemos com o código puro. Eu gosto do vim.
Um navegador. Recomendo o Firefox. Não iremos precisar de servidor Web, pois criaremos a página localmente.

2. Calculadora Simples (Campos de Formulário)

Para começar, faremos a calculadora mais simples, que vai utilizar dois formulários onde o usuário vai preencher dois valores, selecionar uma operação e apertar em um botão resultado, aparecendo na tela.

2.1. O código HTML da página

Por partes, montando depois o código completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Devin - Calculadora Simples</title

<style type="text/css">
<!--
/* Conteúdo do CSS */
-->
</style>

<script type="text/javascript">
<!--
/* Conteúdo do JavaScript */
-->
</script>

</head>
<body>

A primera linha indica qual o tipo de documento que estamos apresentando ao navegador. No nosso caso, estamos usando o tipo XHTML 1.0 Transitional. A segunda linha abre a tag principal da página informando também o endereço da especificação oficial do XHTML. Em outras palavras, essas duas linhas servem para indicar que nosso código é do tipo XHTML e por isso deve (assim esperamos) seguir os padrões.

O local onde está o comentário “Conteúdo do CSS” será substituído mais a frente, assim como na parte do “Conteúdo do JavaScript”.

Seguindo em frente:

<!-- Código "emprestado" do site http://pt.wikipedia.org/wiki/XHTML -->

<form name="calcform" method="post" action="">
   <fieldset>
      <legend>Devin - Calculadora Simples</legend>

      <label for="valor1">Digite o valor <strong>1</strong>:</label>
      <input type="text" name="valor1" id="valor1" />

      <label for="valor2">Digite o valor <strong>2</strong>:</label>
      <input type="text" name="valor2" id="valor2" />

      <label for="oper">Selecione a operação:</label>
      <select name="oper" id="oper">
         <option value="somar">Somar</option>
         <option value="subtrair">Subtrair</option>
         <option value="multiplicar">Multiplifcar</option>
         <option value="dividir">Dividir</option>
      </select>

      <label for="res">Resultado:</label>
      <input type="text" name="res" id="res" />

      <input type="button" value="Calcular" class="botao" onClick="calcular(document.calcform.oper.value)"/>
   </fieldset>
</form>

Esta é uma declaração de formulário comum, mas precisamos anotar algumas coisas em mente para usarmos futuramente:

O nome do formulário é calcform como especificado no parâmetro name da tag <form>.
Os formulários onde o usuário preenche os valores se chamam valor1 e valor2.
O nome do campo de seleção da operação é oper e pode receber os valores: somar, subtrair, multiplifcar e dividir.

Estes dados serão importantes na hora da gente criar o JavaScript.

Por último no formulário, temos um botão do tipo button (não é submit, não é reset). Na tag deste botão, existe o parâmetro onClick que diz ao navegador o que fazer quando o usuário clicar no botão. No nosso caso, ao clicar ele vai executar essa instrução:

calcular(document.calcform.oper.value)

Isto já é a chamada ao JavaScript (que ainda não está pronto). Essa ação vai fazer exatamente o seguinte: executar a função JavaScript chamada calcular, passando como argumento o valor do campo de seleção oper. Em outras palavras, o usuário vai selecionar o tipo de operação na calculadora e quando clicar no botão, vai ser executado a função JavaScript já com a operação desejada.

E para terminar o código HTML:

</body>
</html>

Se abrirmos a página no navegador, ela estará mais ou menos assim:

Calculadora Simples sem CSS/JavaScript

Meio feínho né? Calma, vamos colocar agora o CSS que vai implementar toda a beleza da coisa!

2.2. CSS

Dentro do código HTML, basta adicionar o seguinte conteúdo embaixo da linha /* Conteúdo do CSS */:

/* Estilo "emprestado" do site http://pt.wikipedia.org/wiki/XHTML */

form fieldset {
   margin: 10px auto 10px auto;
   width: 40%;
   border: solid black 1px;
   padding: 3%;
}

form legend {
   padding: 6px;
   margin: 10px;
   border: solid black 1px;
   font-size: 90%;
   font-weight: bold;
   background-color: #e8e8e8;
}

form label {
   display: block;
   font-size: 11px;
}

form input {
   width: 100%;
   border: solid #ccc 1px;
   font-size: 11px;
   margin-bottom: 10px;
}

form input.botao {
   display: block;
   width: auto;
   float: right;
}

Salvamos e recarregamos a calculadora, olha como ficou agora:

Calculadora Simples com CSS

Muito melhor não? Agora vamos ao que interessa.

2.3. O JavaScript da calculadora

Agora é hora de criarmos a função calcular, feita em JavaScript, para fazer as operações básicas. Adicione o seguinte conteúdo na página HTML, depois do /* Conteúdo do JavaScript */:

function calcular(oper) {
   var valor1 = document.calcform.valor1.value;
   var valor2 = document.calcform.valor2.value;

   if (oper == "somar") {
      var res = parseInt(valor1) + parseInt(valor2);
   } else {
      if (oper == "subtrair") {
         var res = valor1-valor2;
      } else {
         if (oper == "multiplicar") {
            var res = valor1*valor2;
         } else {
            var res = valor1/valor2;
         }
      }
   }

   document.calcform.res.value = res;
}

Salvo isso, a calculadora simples está pronta e funcional! Mas como?

Como explicado anteriormente na parte de HTML, quando o usuário apertar o botão de Calcular, o navegador vai executar a função calcular com a operação selecionada.

A primeira linha do JavaScript define essa função:

function calcular(oper) {

O oper dentro dos parênteses é o nome da variável que vai ter o valor da operação. Por exemplo, se o usuário selecionou Somar, o valor da variável oper vai ser somar.

As duas linhas seguintes:

   var valor1 = document.calcform.valor1.value;
   var valor2 = document.calcform.valor2.value;

Criam duas variáveis: valor1 e valor2, cada um contendo o valor correspondente do campo de formulário. É por isso que eu disse que era importante saber os nomes dos campos. Lendo ao contrário, dá pra entender bem como isso funciona. Exemplo do valor1:

Pegar o valor do campo de nome valor1, dentro do formulário de nome calcform, dentro do documento atual (a página) e atribuir à variável valor1.

Não é tão difícil né?

A seguir temos várias estruturas de teste com as quatro operações básicas possíveis da nossa calculadora. Por ser um conceito de toda linguagem de programação, não vou aprofundar na sintaxe, mas olha o que o código faz:

Se a variável oper tiver o valor somar, então ele faz uma operação de soma e armazena o resultado na variável res.
Caso contrário, se a variável oper tiver o valor subtrair, então ele faz uma operação de subtração e armazena o resultado na variável res.
Caso não seja nem somar, nem subtrair, se a variável oper tiver o valor multiplicar, então ele faz uma operação de multiplicação e armazena o resultado na variável res.
Caso nenhum dos três passos anteriores acontecer, ele faz então uma operação de divisão e armazena o resultado na variável res.

As operações aqui foram bem simples:

Soma: parseInt(valor1) + parseInt(valor2). Usando o sinal de “+” com números, somamos eles. Aqui usamos a função parseInt para transformar o valor do campo explícitamente em número, senão ele ao invés de somar iria concatenar os valores (5 + 5 = 55).
Subtração: valor1 – valor2. Usamos o sinal de “-” para subtrair os números. Neste caso não foi preciso colocar o parseInt pois não existe outra função para o sinal de “-” nesse caso.
Multiplicação: valor1 * valor2. Usamos o caracter “*” para multiplicar os dois valores.
Divisão: valor1 / valor2. Usamos o caracter “/” para dividir os dois valores.

Depois da operação feita, o resultado fica disponível na variável res.

Agora, para mostrar o valor para o usuário, modificamos o valor do campo Resultado via JavaScript:

document.calcform.res.value = res;

Mais uma vez, se você ler ao contrário fica mais fácil de entender.

Pronto! Em pouco tempo, fizemos uma calculadora simples, bonita e funcional!

Calculadora Simples com CSS/JavaScript

3. Calculadora cheia de Firulas

Agora é hora de fazer algo mais robusto, ou seja, cheio de firulas. O nosso objetivo aqui é fazer algo como essa ótima calculadora do KDE:

kcalc

Beleza. Eu estava brincando, quem sabe outro dia! Vamos mesmo é fazer a mesma calculadora simples mas com um visual mais arrojado e com mais dinamismo.

A calculadora vai ter um visor, como todas as calculadoras têm.
Cada número vai ser um botão. Assim como cada operação vai ser um botão também.
As contas serão sempre contínuas, ou seja, à medida que o usuário for digitando os valores e as operações, o visor vai sendo atualizado de acordo com os cálculos!

3.1. O código HTML

Da mesma forma que na calculadora simples, aqui vai o código HTML da página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Devin - Calculadora Complexa</title>

<style type="text/css">
<!--
/* Conteúdo do CSS */
-->
</style>

<script type="text/javascript">
<!--
/* Conteúdo do JavaScript */
-->
</script>

</head>
<body>

<form name="calcform" method="post" action="">
   <fieldset>
      <legend>Devin - Calculadora Complexa</legend>

      <input type="text" name="visor" id="visor" />

      <table id="calc">
         <tr>
            <td><input type="button" name="num9" class="num" value="9" onclick="calcNum(9)" /></td>
            <td><input type="button" name="num8" class="num" value="8" onclick="calcNum(8)" /></td>
            <td><input type="button" name="num7" class="num" value="7" onclick="calcNum(7)" /></td>
            <td><input type="button" name="somar" class="oper" value="+" onclick="calcParse('somar')" /></td>
         </tr>
         <tr>
            <td><input type="button" name="num6" class="num" value="6" onclick="calcNum(6)" /></td>
            <td><input type="button" name="num5" class="num" value="5" onclick="calcNum(5)" /></td>
            <td><input type="button" name="num4" class="num" value="4" onclick="calcNum(4)" /></td>
            <td><input type="button" name="subtrair" class="oper" value="-" onclick="calcParse('subtrair')" /></td>
         </tr>
         <tr>
            <td><input type="button" name="num3" class="num" value="3" onclick="calcNum(3)" /></td>
            <td><input type="button" name="num2" class="num" value="2" onclick="calcNum(2)" /></td>
            <td><input type="button" name="num1" class="num" value="1" onclick="calcNum(1)" /></td>
            <td><input type="button" name="multiplicar" class="oper" value="*" onclick="calcParse('multiplicar')" /></td>
         </tr>
         <tr>
            <td><input type="button" name="num0" class="num" value="0" onclick="calcNum(0)" /></td>
            <td><input type="button" name="igual" class="num" value="=" onclick="calcParse('resultado')" /></td>
            <td><input type="button" name="limpar" class="num" value="AC" onclick="calcLimpar()" /></td>
            <td><input type="button" name="dividir" class="oper" value="/" onclick="calcParse('dividir')" /></td>
         </tr>
      </table>
   </fieldset>
</form>

</body>
</html>

Resultado até agora:

Calculadora 'Complexa' sem CSS/JavaScript

Feínho…

3.2. CSS

Agora o CSS, para ser incluído abaixo do /* Conteúdo do CSS */:

/* Estilo "emprestado" do site http://pt.wikipedia.org/wiki/XHTML */

#visor {
   background-color: #bdffb4;
   text-align: right;
}

table {
   margin: 0 auto 0 auto;
}

form fieldset {
   margin: 10px auto 10px auto;
   width: 40%;
   border: solid black 1px;
   padding: 3%;
   margin-bottom: 10px;
}

form input {
   width: 100%;
   border: solid #ccc 1px;
   font-size: 11px;
   margin-bottom: 10px;
}

form input.num {
   display: block;
   width: 24px;
   height: 24px;
}

form input.oper {
   display: block;
   width: 24px;
   height: 24px;
   background-color: #b2b2b2;
}

O resultado:

Calculadora 'Complexa' com CSS

Bonitinho!

3.3. O código JavaScript

Até aqui tudo normal, nada de muito novo. Com a adição do JavaScript, as coisas começam a ficar mais complicadas e interessantes… Basicamente o que fiz dessa vez foi criar várias funções, cada uma fazendo uma tarefa, e um parser (talvez essa não seja a definição ideal) das ações do usuário.

Antes de começar a postar o código, é legal saber de um conceito novo que não foi citado na calculadora simples. É o conceito de variáveis locais e variáveis globais.

Uma variável local, como o nome diz, está disponível apenas em um local. Esse local é a função que a variável foi criada. Exemplo:

function teste(argh) {
var local = 'teste';
}

Neste exemplo, tanto a variável argh quanto a variável local só estarão disponíveis dentro da função teste. Se tiver qualquer referência à variável fora das chaves {}, não vai servir pra nada.

Por outro lado, uma variável global transita em todo o código e durante toda a execução da página. Exemplo:

function teste() {
globalizacao = 'uhu';
}

teste();
document.write(globalizacao);

Apesar de eu ter usado a variável globalizacao fora da função, ela vai ser reconhecida e por isso seu valor vai ser escrito no documento atual (document.write).

Note agora a diferença entre a definição das duas variáveis. Uma variável local é definida utilizando o var antes:

var local = 'teste';

Enquanto que uma variável global não recebe o var antes:

globalizacao = 'uhu';

Por que eu expliquei isso primeiro? Como eu disse, utilizei várias funções no código, e para manter o fluxo das ações do usuário, é necessário variáveis globais para durarem através das funções e durante toda a execução da página…

Agora o código JavaScript (aceito sugestões de melhoria) para colocar depois do /* Conteúdo do JavaScript */:

// Função que adiciona os números no Visor quando pressionado os botões
function calcNum(num) {
   if (typeof gvisor == 'undefined') {
      document.calcform.visor.value = '';
   }
   document.calcform.visor.value = document.calcform.visor.value + num;
   gvisor = 1;
}

// Função que limpa a calculadora e todas as variáveis existentes.
function calcLimpar() {
   document.calcform.visor.value = '';
   delete gvalor;
   delete goper;
   delete gvisor;
}

// Função que executa as operações básicas da calculadora
function calcOper(oper, valor1, valor2) {
   if (oper == "somar") {
      var valor = parseFloat(valor1) + parseFloat(valor2);
   } else {
      if (oper == "subtrair") {
         var valor = valor1 - valor2;
      } else {
         if (oper == "multiplicar") {
            var valor = valor1 * valor2;
         } else {
            var valor = valor1 / valor2;
         }
      }
   }

   return(valor);
}

// Função do algoritmo de "passagem" das ações do usuário
function calcParse(oper) {
   var valor = document.calcform.visor.value;
   delete gvisor;

   if (typeof goper != 'undefined' && oper == 'resultado') {
      gvalor = calcOper(goper, gvalor, valor);
      document.calcform.visor.value = gvalor;
      delete oper;
      delete gvalor;
      return(0);
   }

   if (typeof gvalor != 'undefined') {
      gvalor = calcOper(goper, gvalor, valor);
      goper = oper;
      document.calcform.visor.value = gvalor;
   } else {
      gvalor = valor;
      goper = oper;
   }

}

Ficou bem maior do que antes né? Vamos por partes… Talvez o algoritmo não fique muito claro, mas vou tentar explicar da melhor maneira possível.

Quando o usuário clicar em um botão numérico (0-9), ele acionará a função calcNum(), que por sua vez vai colocando (concatenando) os números no visor da calculadora. A variável global gvisor entenderemos mais à frente.
Quando o usuário clicar em um botão de operação (+, -, *, / ou =), ele acionará a função calcParse(), que é a função com o algoritmo principal: é ela que vai decidir o que fazer na calculadora. Isso vai ser explicado melhor depois.
Quando o usuário clicar no botão AC, ele acionará a função calcLimpar(), apagando o visor da calculadora e todas as variáveis globais são removidas. É literalmente um reset na calculadora.
A função calcOper(), apesar de não ser chamada diretamente pelo usuário, é a mesma função utilizada na calculadora simples, só que agora vai ser chamada pela calcParse().

Sabendo agora das funções das funções (recursivo não? ;), vamos tentar entender o algoritmo seguindo exemplos de uso. Supondo que o usuário clique nos botões nesta ordem:

5 + 5 5 =

Ao clicar no botão 5, a função calcNum(‘5’) adiciona o número 5 no visor e também ativa a variável global gvisor.
Ao clicar no botão +, a função calcParse(‘somar’) é acionada. Isso quer dizer que a calculadora se prepara para fazer uma operação de soma. A primeira coisa que a função faz é apagar a variável global gvisor, assim o próximo número que o usuário clicar não vai ser concatenado.
Em seguida a função calcParse(‘somar’) faz uma série de testes e verifica que nem a variável global goper, nem a variável global gvalor existem. Isso quer dizer que essa é a primeira operação da calculadora e por isso ela atribui os valores iniciais para essas duas variáveis globais (gvalor = 5) e (goper = somar).
Ao clicar em mais um número (5), a função calcNum(‘5’) é chamada novamente. Desta vez ela sente falta da variável global gvisor, por isso apaga o visor e ativa a variável novamente.
Ao clicar novamente no número 5, a função calcNum(‘5’) é chamada novamente (que teimosa), só que desta vez existe a variável gvisor e por isso ela não apaga o visor antes.
Por último, quando o usuário apertar o botão =, a função calcParse(‘resultado’) vai ser chamada. O algoritmo detecta que havia uma operação gravada anteriormente (goper = somar) e executa a função calcOper(somar, 5, 55). A função soma e retorna o número 60, que é colocado no visor da calculadora. Como é um sinal de =, um operador de finalização, então a função remove as variáveis de operação atual e de valor global, restando apenas o valor do visor. Resposta: 60!

Se ficar difícil de entender, pode ser que isso ajude: Tente pensar que as variáveis globais (goper e gvalor) sempre se referem ao valor anterior ao operador (X +) e as variáveis locais (oper e valor) se referem aos valores que ficam depois do operador (+ X).

1 0 + 1 5 – 3 =

Ao clicar no botão 1, a função calcNum(‘1’) é chamada, colocando o número 1 no visor e ativando a variável gvisor.
Ao clicar no botão 0, a função calcNum(‘0’) é chamada, concatenando o número 0 no visor porque a variável gvisor existe.
Ao clicar no botão +, a função calcParse(‘somar’) é chamada, configurando as variáveis globais (gvalor = 10) e (goper = somar). Ele também remove a variável global gvisor.
Ao clicar no botão 1, a função calcNum(‘1’) é chamada, apagando tudo do visor (pois não existe a variável gvisor) e colocando o número 1.
Ao clicar no botão 5, a função calcNum(‘5’) é chamada, concatenando o número 5 no visor.
Ao clicar no botão –, a função calcParse(‘subtrair’) é chamada. Como um valor anterior (10) e uma operação anterior (goper) já existiam, ele chama a função calcOper(‘soma’,10,15) e armazena na variável gvalor que agora é 25. Ele também mostra no visor o resultado e armazena a próxima operação (subtrair) na variável global goper.
Ao clicar no botão 3, a função calcNum(‘3’) é chamada, apagando tudo do visor e colocando o número 3.
Ao clicar no botão =, Ele chama a última operação que estava armazenada com a função calcOper(‘subtrair’,25,3). Mostra no visor o resultado final: 22.

Bem, acredito que assim ficou mais fácil de entender, não? :D

Calculadora 'Complexa' com CSS/JavaScript

4. Conclusão

Eu consegui transformar uma aula simples de JavaScript na faculdade em uma verdadeira diversão! Ao mesmo tempo que tenho certeza que este tutorial será útil para muita gente.

Aqui estão os dois arquivos completos:

Sendo estes os arquivos fixos deste tutorial. Entretanto, coloquei também os seguintes links, pois quem sabe no futuro eu mexa mais e adicione mais coisas para aprender!

Bom proveito!

1.753.034