Calculadora Web
Uma aplicação front-end simples de calculadora construída para praticar manipulação do DOM e o padrão estrutural Factory Function em JavaScript.
Sobre o Projeto
A Calculadora Web é um projeto de nível iniciante criado com o objetivo de fixar o aprendizado prático de manipulação estrutural de elementos da página (DOM) e organização de escopos em JavaScript nativo. O sistema funciona diretamente no navegador do cliente, oferecendo uma interface padrão para a resolução de contas cotidianas.
Arquitetura e Decisões Técnicas
O desenvolvimento evitou o uso de bibliotecas pesadas ou frameworks complexos para focar estritamente na base do ecossistema web vanilla. A lógica interna está concentrada na arquitetura abaixo:
- Delegação de Eventos (Event Delegation): Um único ouvinte de evento
clickmapeia o documento inteiro, filtrando os alvos pelos nomes de suas classes para reduzir o consumo de memória. - Factory Function (
createCalculator): Estrutura orientada a objetos que encapsula as propriedades e agrupa as ações de inicialização, limpeza, exclusão de caracteres e exibição de resultados.
Utilizado para construir toda a lógica operacional da calculadora, capturar cliques na interface e processar as strings de equações matematicas.
Desafios e Soluções de Engenharia
Durante a escrita do script, o foco esteve em contornar pequenos comportamentos do interpretador e problemas de validação:
Desafios Resolvidos
Manutenção do contexto dinâmico do JavaScript
Evitar que o escopo do 'this' fosse perdido ao disparar funções de clique de dentro do ouvinte de eventos global do documento.
Foi utilizado o método '.bind(this)' dentro da função de delegação de eventos para amarrar o contexto correto da Factory Function.
Tratamento de entradas inválidas no display
Impedir que caracteres quebrados ou operações aritméticas impossíveis causassem erros fatais ou exibissem conteúdos estranhos ao usuário.
Criação de uma validação com bloco try/catch combinada com a função 'isFinite()' para identificar divisões por zero ou sintaxes corrompidas.
Impacto e Resultados
- Código Modular: Divisão clara de tarefas onde as tags HTML apenas demarcam o esqueleto, o arquivo CSS dita a aparência visual dos botões e o arquivo JavaScript controla as ações.
- Interface Direta: O display se comporta conforme o padrão físico de calculadoras de mesa, aplicando alinhamento à direita e foco persistente na caixa de texto.