Calculadora em Javascript

Uma atividade que todo mundo que está aprendendo Javascript já fez, é a criação de uma calculadora em Javascript. Então, mãos a obra!

Começaremos com o “desenho”. Utilizei uma table mesmo, inabilitando o campo do usuário digitar o valor, para evitar o tratamento de erros.

 

[code language=”html”]
[/form][/code]

Para dar um visual mais profissional, vamos trabalhar também o estilo. Utilizando a propriedade border-radius, do CSS3, consegui o efeito abaixo:

 calculadora javascript

[code language=”css”] table {
background-color:#FDCB00;
border:medium #0A2934 solid;
border-radius: 10px;

}

table tr td input{
border-radius: 5px;
}
[/code]

Vamos agora trabalhar o Javascript. Para o botão limpar, criei uma função simples, que substituirá todo o conteúdo do visor por um valor em branco.

[code language=”javascript”] // Limpa a tela
function limpar() {
document.getElementById(‘tela’).value= ” “;
}
[/code]

Tenho o costume de utilizar, sempre que possível, a função do DOM getElementById, para evitar conflitos.

Para a tecla do resultado, utilizaremos a função do DOM eval, que realiza a conta de uma operação – ela inclusive ‘transforma’ os sinais, então não precisaremos nos preocupar com eles. O resultado obtido é retornado na caixa de valores para o usuário.

[code language=”javascript”] // Realiza a conta
function calculo() {
document.getElementById(‘tela’).value = eval(document.getElementById(‘tela’).value);
}
[/code]

Para trabalhar com as teclas de entrada de dados, o procedimento é basicamente o mesmo – identificar qual o número ou sinal que o usuário digitou e apresenta-lo na tela. Contudo, para que o usuário não digite um sinal sem antes ter digitado algum número, trabalhei com uma condição do tipo if/else. Optei pela criação de duas funções, uma para trabalhar com os números, e outra para os operadores.

[code language=”javascript”] function putNum(num) {
document.getElementById(‘tela’).value = document.getElementById(‘tela’).value + num;
}

function operator(oprt){
if( document.getElementById(‘tela’).value != ” “)
{ document.getElementById(‘tela’).value = document.getElementById(‘tela’).value + oprt; }
else
{ alert(“Por favor, digite um número antes do operador!”);}
}
[/code]

Bom pessoal, é isso! A calculadora em Javascript está pronta. Se você quiser baixar o código, clique aqui. Lembre-se que esse é apenas um exemplo didático! Para ser colocado em prática o ideal seria aperfeiçoar, acrescentando alguns botões e funcionalidades.

// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

3 Comentários

  • Responder novembro 17, 2011

    Kailin

    Holy sihzint, this is so cool thank you.

  • Responder dezembro 26, 2012

    Valdiney França

    Olá galera, eu dei uma olhadinha deste exemplo de vocês bastante bacana, eu não sabia como fazer uma calculadora desta forma, com botões onde os usuários teriam que clicar para os valore serem colocados no visor.

    Esse post me ajudeou bastante, baixei o exemplo fiz umas modificações separando em camadas e fazendo as chamadas de valores via ID com funções que chamam as outras funções, ficou legal também.

    http://www.facebook.com/valdiney.franca.5

  • Responder outubro 26, 2013

    marcos

    muito bom!

// Siga as boas práticas: Comente!