Calculadora em Javascript

eufacoprogramas

13 anos atrás

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:

[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