Neste artigo, serão disponibilizados e explicados os códigos utilizados na parte cinco do nosso projeto de calculadora. Caso ainda não tenha visto as partes 1, 2, 3 e 4 do projeto da Calculadora, acesse e obtenha o HTML e CSS necessários para a criação do layout desta calculadora:
- JavaScript Básico 15 – Projeto Calculadora (Parte 1);
- JavaScript Básico 16 – Projeto Calculadora (Parte 2);
- JavaScript Básico 17 – Projeto Calculadora (Parte 3);
- JavaScript Básico 18 – Projeto Calculadora (Parte 4).
Dentro do nosso projeto, iremos criar uma função que será utilizada para atribuir uma função para o operador clicado.
- Se o operador clicado for o “+”, atribuiremos a função somarValores;
- Se o operador clicado for o “-“, atribuiremos a função subtrairValores;
- Se o operador clicado for o “*”, atribuiremos a função multiplicarValores;
- Se não for nenhum destes operadores, atribuiremos a função dividirValores.
// função que atribui a operação correta ao objeto calculo
function atribuirOperacao(operador){
if(operador == "+"){
calculo.funcaoParaCalcular = somarValores;
} else if(operador == "-"){
calculo.funcaoParaCalcular = subtrairValores;
} else if(operador == "*"){
calculo.funcaoParaCalcular = multiplcarValores;
} else {
calculo.funcaoParaCalcular = dividirValores;
}
}
Criada a função atribuirOperacao, criaremos uma função chamada clicarOperador. Nesta função, verificaremos se o operador clicado é um número. Se for um número, adicionaremos ele ao objeto cálculo, na propriedade primeiroValor. Se clicarmos primeiramente em um operador, ele não será adicionado à propriedade primeiroValor.
Criaremos também uma variável operador, que receberá como atribuição o valor do botão que será clicado. Esta variável será utilizada na nossa função atribuirOperacao, e também terá seu conteúdo mostrado no input.
// função que atualiza o objeto calculo ao clicar nos operadores
function clicarOperador() {
if(!isNaN(inputResultado.value)){
calculo.primeiroValor = Number(inputResultado.value);
}
let operador = event.target.textContent;
atribuirOperacao(operador);
inputResultado.value = operador;
}
if(!isNaN(inputResultado.value)):
Utilizando esta função, estamos buscando o valor do input. Queremos que este valor seja numérico. Utilizaremos a função isNaN, que nos diz “não é um número”. Mas como queremos um valor numérico, precisamos utilizar a Negação (!), que nos retorna o contrário da função. Ela nos retornaria algo como “NÃO não é um Número”, ou seja, “É um número”. (Um pouco confuso, leia somente como “É um valor numérico”).
event.target.textContent:
Esta propriedade nos retorna o conteúdo de texto (textContent) do local onde o clique foi pressionado (target).
Está gostando do projeto? Comente abaixo e compartilhe!