Projeto Calculadora – Parte 4: Implementando a Lógica com JavaScript

Introdução

Neste tutorial, terceira parte de como criar uma calculador com HTML, CSS e Javascript, vamos aprender a criar a codificação Javascript da calculadora. Vamos implementar funcionalidades como adicionar números e operadores ao display, limpar o display, e calcular o resultado de uma expressão. Vamos entender passo a passo como cada função contribui para o funcionamento da calculadora.

Passo 1: Adicionando Números ao Display

Vamos começar com a função appendNumber que adiciona números ao display da calculadora:

/** Adiciona um número ao valor atual no elemento de exibição. */
function appendNumber(number) {
    document.getElementById('display').value += number;
}

Esta função recebe um número como argumento e o adiciona ao valor atual exibido no elemento com o id display.

Passo 2: Adicionando Operadores ao Display

A função appendOperator faz algo semelhante, mas para operadores (+, -, *, /):

function appendOperator(operator) {
    document.getElementById('display').value += ' ' + operator + ' ';
}

Ela adiciona um operador ao display, com espaços ao redor para facilitar a leitura da expressão.

Passo 3: Limpando o Display

Para limpar o display, utilizamos a função clearDisplay:

function clearDisplay() {
    document.getElementById('display').value = '';
}

Esta função simplesmente define o valor do elemento de exibição como uma string vazia.

Passo 4: Calculando o Resultado

A função calculateResult é responsável por calcular e exibir o resultado da expressão no display:

function calculateResult() {
    let display = document.getElementById('display').value;
    
    try {
        // Calcula o resultado da expressão
        let result = parseExpression(display);
        document.getElementById('display').value = result;
    } catch (error) {
        document.getElementById('display').value = 'Erro';
    }
}

Ela obtém a expressão do display e tenta calcular o resultado utilizando a função parseExpression. Se ocorrer um erro, exibe a mensagem Erro.

Passo 5: Analisando a Expressão

A função parseExpression processa a expressão matemática e calcula o resultado:

function parseExpression(expression) {
    // Remove espaços em branco
    expression = expression.replace(/\s+/g, '');
    // Substituir "--" por "+" (Exemplo: "10 - -5" se torna "10 + 5")
    expression = expression.replace(/--/g, '+');

    // Verifica se a expressão contém apenas números e operadores válidos
    if (!/^[0-9+\-*/().]+$/.test(expression)) {
        throw new Error('Expressão inválida');
    }
    // Dividir a expressão em operadores e operandos
    let tokens = expression.split(/([+\-*/])/);

    // Multiplicação e divisão
    for (let i = 0; i < tokens.length; i++) {
        if (tokens[i] === '*' || tokens[i] === '/') {
            let operand1 = parseFloat(tokens[i - 1]);
            let operand2 = parseFloat(tokens[i + 1]);
            let result;

            if (tokens[i] === '*') {
                result = operand1 * operand2;
            } else if (tokens[i] === '/') {
                result = operand1 / operand2;
            }

            tokens.splice(i - 1, 3, result); // Substitui a operação pelo resultado 
            i--; // Reajusta o índice após modificar o array
        }
    }

    // Adição e subtração
    let result = parseFloat(tokens[0]);
    for (let i = 1; i < tokens.length; i += 2) {
        let operator = tokens[i];
        let nextOperand = parseFloat(tokens[i + 1]);

        if (operator === '+') {
            result += nextOperand;
        } else if (operator === '-') {
            result -= nextOperand;
        }
    }

    return result;
}

Essa função remove espaços em branco, substitui sequências de “–” por “+”, verifica a validade da expressão e então divide a expressão em operadores e operandos. Realiza as operações de multiplicação e divisão primeiro, seguida por adição e subtração para calcular o resultado final.

Conclusão

Com este tutorial, construímos uma calculadora funcional em JavaScript. Agora você entende como adicionar números e operadores ao display, limpar o display e calcular o resultado de uma expressão. Esperamos que este tutorial tenha sido útil e ajudado a aprimorar suas habilidades em JavaScript!

>>>> 😊 Veja aqui o código completo do projeto no meu github