Português do Brasil English
Devin no Facebook  Devin no Twitter  RSS do Site 
Programação    

Como fazer calculadoras em JavaScript


Comentários  51
Visualizações  
1.753.056

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

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

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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

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

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

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

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 =

  1. 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.
  2. 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.
  3. 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).
  4. 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.
  5. 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.
  6. 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 =

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Ao clicar no botão 5, a função calcNum(‘5’) é chamada, concatenando o número 5 no visor.
  6. 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.
  7. Ao clicar no botão 3, a função calcNum(‘3’) é chamada, apagando tudo do visor e colocando o número 3.
  8. 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

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.056

Comentários  51
Visualizações  
1.753.056


TagsLeia também

Apaixonado por Linux e administração de sistemas. Viciado em Internet, servidores, e em passar conhecimento. Idealizador do Devin, tem como meta aprender e ensinar muito Linux, o que ele vem fazendo desde 1997 :-)


Leia também



Comentários

51 respostas para “Como fazer calculadoras em JavaScript”

  1. Felipe disse:

    Mano que bagulho enorme so pra faze uma bostinha de claculadora fala sério em num tem algo mais simples não???

  2. lol @ Felipe

    que preguiçoso, você queria o que? aposto que aprender a programar não :)

  3. E o mais engraçado de tudo é que não teve mais nada na faculdade, mais nada mesmo. Aliás, esse tutorial aqui teve muito mais coisas que lá… É a vida :) O problema agora é fazer o resto da série de tutoriais: se não há necessidade, por que fazer? :P

  4. juliano disse:

    Muito bom esse formulario nao sabia como fazer agora posso tentar encrementar esse estilo de formula para o meu site abraços

  5. Heitor disse:

    Foi moleza eu fui na pagina final que mostrou como a calculadora ficou e copiei o codigo.

  6. Glauber disse:

    Só aqui nesse site, vc explicou mais que meu professo no semestre inteiro…

  7. daniel disse:

    Muito bom. Com base neste exemplo estou conseguindo fazer outras aplicacoes. obrigado

  8. leticia disse:

    quero saber se é possivel colocar uma calculadora dessas numa secçao de um forum phpBB.. e se sim, saber onde coloco.. obrigada.

  9. Mauricio disse:

    Up, muito bom mais uma vez um tutorial simples e de excelente explicação.

  10. Alex220v disse:

    Muito bom esse tutorial…

    Parabéns ao autor, Hugo né?

    Com esse tutorial acabei de fazer o meu exercício pra hoje.

    kkkkkkkkkk!!!

    Como o google é prático!!!

    Enfim, um abraço cara.

  11. francinaldo disse:

    bem eu gostaria de saber como fazer uma calculadora utilizando em seu algoritimo apenas sinal de + e de –

  12. Humberto disse:

    Cara voce mandou muito bem. Acabei de conhecer esse site e vou ler e aplicar bastante coisa…

    Quando o Felipe disse sobre esse codigo todo pra uma calc ele não foi muito feliz… Mais isso é só questão de opinião vc é fera. Ótima explicação.

  13. jose disse:

    caraca tua calculadora é uma merda, não soma mais que 9?

    exemplo se eu quero somar 9 + 23 não soma kkkkkkkkkk

    vá pra escola!!!!!

  14. Fábio disse:

    Cara preciso de um cálculo para um formulário no meu site. Você pode me ajudar?

  15. Ítalo disse:

    Cara, não é querendo gabar-me, mas eu fiz uma que dá duzentas na sua. Não é querendo gabar-me.

    Tem fatorial, adição, subtração, multiplicação, módulo, divisão, exponenciação, parênteses, troca de sinais, negação, Clear Empity (CE), Clear (C), seono, cosseno, tangente, e outras cambadas de coisas.

    Se quiser a gente pode melhorar o meu código. Ok?

    Aguardo resposta, abraço!

    • @Ítalo:

      Opa, legal que tu fez muito mais coisas! Na verdade eu fiz esse um pouco mais simples justamente para servir como um tutorial pra quem tá iniciando em JavaScript, mas sinta-se a vontade para disponibilizar o seu código para os outros estudarem que terei o prazer de colocar um link aqui! :)

  16. Levi disse:

    Ajudo muito valew

  17. dayane disse:

    os cara ta tudo com inveja de vc, so porque eles não sabe fazer uma calculadora, fica ai xingando as pessoas de burra mais quem é burro aki são esse babaca que tem inveja ate de uma calculadora :@ !!!

  18. @rogirn2 disse:

    Putz véio, vc me salvou!!!
    Sou iniante em Java Script, e logo o professor me mandou fazer uma calculadora com 4 operações…
    Que sorte!!! Você explicou bem direitinho, agora já posso até fazer a minha sozinho, sem precisar de ajuda…
    quanto a quem xingou o cara, não percam seu tempo, gaste seu tempo com coisas úteis, como criar uma melhor e postar aki pra dizer a galera o que vc aprendeu…
    Parabéns Hugo, muito show!!!

  19. Juninho disse:

    Opa!

    Parabéns pelo texto.

    Muito explicativo e serviu bastante até para mim que já tenho alguma experiência em PHP.

    Agora uma dúvida: se eu retiro as tags de <code> </code>, o script não funciona mais. É essa tag que define no script a o nome dos objetos que sairão o valor? Se for vou jogar meu macbook na parede, porque perdi um dia inteiro tentando descobrir o motivo do meu código (adaptado do teu) não funcionar e o teu funcionar perfeitamente na mesma página minha,

    Valeuuu

    Abraços

  20. Marcelo disse:

    Gostaria de saber se existe uma forma de adaptar esta calculadora da segun=inte forma:

    quero coloca-la no formulario de reservas do meu site, mas não como ela está e sim, quando o hospede chamar o formulario, ela carregue com o valor da diaria do hotel, e quando ele identificar a quantidade de dias que ficará hospedado, calcule o valor total que ele vai pagar, é possivel?

    Grato

    Marcelo

  21. Roger disse:

    Não é mais fácil colocar no navegador:

    Javascript: window.alert (Ou document.write) (valor1 operador valor2))?

    rs brincandeira =D

    Ótimo tutorial. =)

  22. Luana Barros disse:

    Legal

    isso me ajudou muito :D

    obrigada!*************

    *************

    ************

    ***********

    **********

  23. M1nh0c4 disse:

    Cara adorei sua calculadora, tá de parabens.

  24. M disse:

    Parabéns pelo belo trabalho, objetivo e extremamente didático. Imagino que seja difícil ter tanto trabalho, disponibilizá-lo de forma gratuita e ainda receber tantos comentários depreciativos de pessoas que sequer possuem domínio da própria língua, mas console-se com o fato de que nem todos pensam assim. Sucesso!

  25. luis disse:

    meus parabens, super post; vou estudar…

  26. Rafael disse:

    Puxa vida, quando eu abro no navegador, nenhuma operação é feita, aparece o visor, os botões, mas a operação não dá. Lá no rodapé do navegador aparece "erro na págin", o que eu faço?

  27. alline disse:

    ótimo tutorial,

    uma boa ideia para colocar, seria a calculadora nao aceitar letras, caracteres inválidos, ou operadores repetidos.

  28. Wudeyzhd disse:

    Pleased to meet you http://kaokasiquki.de.tl loli foros Now that is what is known as a thick, busty, sexy as hell woman with the curves to fucking rock your world!!!!!!

  29. Ziri disse:

    To com dificuldades no estilo CSS, eu coloco exatamente aonde manda mas nao muda a aparencia

  30. Pessoal, fiz algumas melhorias. Assim o calculo é executado conforme digitamos, e corrigi um "bug" em "," decimal.

    http://www.devin.com.br/calculadoras-javascript/ */

    /*Crédito de Adaptação: Elielder > http://www.taganet.com.br */

    /* Conteúdo do CSS */

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

    #calc fieldset {

    float: center;

    margin: 10px auto 10px auto;

    width: 300px;

    border: solid black 1px;

    padding: 3%;

    margin-bottom: 10px;

    }

    #calc legend {

    padding: 6px;

    margin: 10px;

    border: solid black 1px;

    font-size: 90%;

    font-weight: bold;

    background-color: #e8e8e8;

    }

    #calc label {

    display: block;

    font-size: 11px;

    }

    #calc input {

    width: 100%;

    border: solid #ccc 1px;

    font-size: 11px;

    margin-bottom: 10px;

    }

    #calc input.botao {

    display: block;

    width: auto;

    float: right;

    }

    #calc input.botao {

    display: block;

    width: auto;

    float: right;

    }

    –>

    http://www.devin.com.br/calculadoras-javascript/ */

    /*Crédito de Adaptação: Elielder > http://www.taganet.com.br */

    /* Conteúdo do JavaScript */

    function calcular() {

    var oper = document.calcform.oper.value;

    var valor1 = parseFloat(document.calcform.valor1.value.replace('.',',').replace(',','.'));

    var valor2 = parseFloat(document.calcform.valor2.value.replace('.','').replace(',','.'));

    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;

    }

    function init() {

    document.calcform.oper.focus();

    }

    window.onload = init;

    –>

    Calculadora

    Selecione a operação:

    Dividir

    Multiplicar

    Somar

    Subtrair

    Digite o valor 1:

    Digite o valor 2:

    Resultado:

  31. christian disse:

    Ia irmao, gostei do tutorial, to entrando na area da programaçao, e foi muito util sua aula abraço…

  32. Pedro disse:

    "…transformar uma aula simples de JavaScript na faculdade em uma verdadeira diversão!" Nossa me diverti pacas '-'.

  33. ... disse:

    amigo eu fiz uma de DOS e e completa depois coloco o codigo aqui

  34. renan disse:

    Gostaria de saber como faz uma calculadora que seja Altura * Largura * o preço = o valor que pagará…a pessoa só coloca altura largura e ja vem com preço direto pra calcula…vlw

    eu comecei essa mas não da certo

    <form action="produtos.asp?produto=&lt;%= idprod %&gt;" method="post" name="form12">
    <span class="style1">Coloque as Medidas</span> <input type="text" size="8" id="n1" name="n1" /> x <input type="text" size="8" id="n2" name="n2" />
    <input type="submit" value="Calcular" name="Submit" />
    &nbsp;
    </form>

  35. rafael disse:

    Gostaria de fazer uma calculadora que realizasse o seguinte cálculo: 66,47+(13,75xPeso)+(5xAltura)-(6,76xIdade)
    ALTURA (cm)digitar valor
    IDADE (anos)digitar valor
    PESO (Kg)digitar valor

    Calcular
    Alguém pode me ajudar a fazer isso em html?

  36. Jéssica Souza disse:

    Olá Hugo, parabéns pelo tutorial.

    Eu preciso fazer uma calculadora parecida com a do windows, porém o professor pediu pra fazer a calculadora utilizando Servlet.
    Vc poderia me ajudar??
    Será minha prova isso.

  37. maycon disse:

    boa tarde , como faço para gerar um calculo de 8 linhas ai vem o total depois multiplicar 5% da soma e depois a mesma soma das linha multiplicar 15% tudo com resultado.

    obrigadoooo

  38. Graciele disse:

    Amei! Me ajudou demais!

  39. André Mendes disse:

    Estou utilizar o código desta calculadora para um projeto de escola. Qual é a variável que fica com o resultado final? Precisava dela para a converter para php e assim guardá-la na base de dados

  40. Adroilson disse:

    preciso fazer uma calculadora que converte base binarias, mas não estou a conseguir, alguem pd me ajudar??☺☺

  41. kiezz0 disse:

    Eu sei que esse post é antigo mas… eu estou tendo um pequeno problema com os botões de soma e subtração.

    Por mais que eles estejam com a mesma ideia de multiplicação e divisão. Eles retornam undefined quando faço qualquer operação com eles. Porém… as de multiplicação funcionam normalmente. Pode ajudar?

    • sallu disse:

      verifique se as variaveis não estão como string, eu tive esse problema também, ae só dava problema quando ia somar, eu acho que tentava concatenar e não somar… ae dava esse problema… parseFloat deve ajudar!

  42. Samuel Johnson disse:

    Mano, fiz uma calculadora também, mas escrevi mil linhas de código depois de resolver muitos bugs, a sua ficou bem mais "limpa" e simples, gostei da lógica, vou tentar replicar ela sem ver pra assimilar essa lógica aí. Parabéns!

  43. Andrea disse:

    Ola, tudo bem?

    meu professor pediu uma calculadora com uma regra que quando o botão do ponto fosse clicado, código não deixasse o proximo numero ser botão. Por exemplo, um bloqueio para 2 pontos na sequencia. Alguem poderia me ajudar com isso?

    • alexandre disse:

      Você pode selecionar o innerText do display e usar uma função indexOf para conferir se existe ponto no innerText
      se existir vc apenas retorna

      if(elemento.indexOf(".") > -1) return;

      por que -1? o indexOf por padrão retorna -1 se nada for encontrado

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *