Como Criar uma Calculadora em JavaScript com Atalhos

Implementação de Calculadora em JavaScript

Abaixo está o código fonte completo e corrigido para o funcionamento de uma calculadora web utilizando JavaScript, incluindo suporte para eventos de teclado e operações matemáticas básicas.

Listener para Teclas do Teclado

Este trecho monitora as teclas pressionadas pelo usuário, mapeando números e operadores para as funções correspondentes da calculadora.

document.addEventListener('DOMContentLoaded', function(){
	document.addEventListener('keypress', function(e){
		if (e.which == 48){ inserirNumConsole('0'); }
		else if (e.which == 49){ inserirNumConsole('1'); }
		else if (e.which == 50){ inserirNumConsole('2'); }
		else if (e.which == 51){ inserirNumConsole('3'); }
		else if (e.which == 52){ inserirNumConsole('4'); }
		else if (e.which == 53){ inserirNumConsole('5'); }
		else if (e.which == 54){ inserirNumConsole('6'); }
		else if (e.which == 55){ inserirNumConsole('7'); }
		else if (e.which == 56){ inserirNumConsole('8'); }
		else if (e.which == 57){ inserirNumConsole('9'); }
		else if (e.which == 46 || e.which == 44){ inserirNumConsole('.'); }
		else if (e.which == 43){ operacao('somar'); }
		else if (e.which == 45){ operacao('subtrair'); }
		else if (e.which == 42){ operacao('multiplicar'); }
		else if (e.which == 47){ operacao('dividir'); }
		else if (e.which == 61 || e.which == 13){ operacao('resultado'); }
	});
});

Funções de Manipulação do Display

Responsáveis por adicionar números ao console, validar a inserção de pontos decimais e limpar os dados quando necessário.

// Adiciona os números no console.
function inserirNumConsole(parameter){
	if (parameter == "."){
		if (document.getElementById('console').value.indexOf(".") < 0){
			// Verifica se o "." tem em alguma posição do 'console'
			document.getElementById('console').value += '.';
		}
		parameter = 0;
	}
	else{
		document.getElementById('console').value += parameter;
		parameter = 0;
	}
}

// Função para limpar apenas o console.
function limparConsole(){
	document.getElementById('console').value = '';
}

// Função para limpar apenas as variáveis.
function limparVariaveis(){
	valor1 = null;
	valor2 = null;
	op = null;
	valor = null;
}

// Utilizado no botão C.
function limpar(){
	limparConsole();
	limparVariaveis();
}

Funções para as Operações Matemáticas

Controlam o fluxo das operações aritméticas e realizam o cálculo final com precisão.

// Função para as operações.
function operacao(parameter) {
	if (parameter == "somar" || parameter == "subtrair" || parameter == "multiplicar" || parameter == "dividir") {
		valor1 = parseFloat(document.getElementById('console').value);
		limparConsole();
	op = parameter;
	}
	else if (parameter == "resultado"){
		if (valor1 != null){
			valor2 = parseFloat(document.getElementById('console').value);
			limparConsole();
			calcoper(op, valor1, valor2);
		}
	}
}

// Função utilizada para calcular os valores.
function calcoper(operacao, valor1, valor2) {
	if (operacao == "somar"){
		var valor = ((parseFloat(valor1) * 10) + (parseFloat(valor2) * 10)) / 10; // Veja final do codigo
		document.getElementById('console').value = valor;
		limparVariaveis();
	}
	else if (operacao == "subtrair") {
		var valor = ((parseFloat(valor1) * 10) - (parseFloat(valor2) * 10)) / 10; // Veja final do codigo
		document.getElementById('console').value = valor;
		limparVariaveis();
	}
	else if(operacao == "multiplicar") {
		var valor = ((parseFloat(valor1) * 10) * (parseFloat(valor2) * 10)) / 100; // Veja final do codigo
		document.getElementById('console').value = valor;
		limparVariaveis();
	}
	else if(operacao == "dividir"){
		var valor = ((parseFloat(valor1) * 10) / (parseFloat(valor2) * 10)); // Veja final do codigo
		document.getElementById('console').value = valor;
		limparVariaveis();
	}
}