Calculadora: código javascript
Del diagrama al programa
Ahora con el diagrma de flujo del proceso global a mano, para no perderte, psaas a escribir este código y luego lo añades al archivo de scripts (calculadora.js)
let calculadora = document.querySelector(".marco");
let visor = document.querySelector(".visor");
visor.innerHTML ="0";
visor.status= 'N'; //N: nuevo (borrar), U: usado (para agregarle datos)
visor.buffer=''; //va a servir como una global para implementar el buffer
calculadora.addEventListener('click', leerTecla);
function leerTecla(event){
let tecla = event.target;
let visor = document.querySelector(".visor");
let resdo, oper;
switch (tecla.dataset.tipo){
case "num":
if (visor.status == "N"){
visor.status = "";
visor.innerHTML = "";
}
visor.innerHTML += tecla.innerHTML;
break;
case 'signo':
visor.innerHTML = cambiarSigno(visor.innerHTML);
break;
case 'oper':
visor.buffer += visor.innerHTML;
oper = tecla.innerHTML == "Enter"?"":tecla.innerHTML;
if(esEjecutable(visor.buffer)){
resdo = ejecutar(visor.buffer);
if(resdo !="ERROR" && oper !=""){
visor.buffer = resdo+oper;
}
else{
visor.buffer = "";
}
visor.innerHTML = resdo;
}
else{
visor.buffer += oper;
}
visor.status = "N";
break;
case 'borrar':
visor.buffer = "";
visor.innerHTML=0;
visor.status="N";
}
}
Comentarios
Pare entender mejor el programa es conveniente tener a mano el diagrama de flujo
Leyendo ese gráfico el programa sale prácticametne solo.
Observa que el inicio del programa, lo que sería leer la tecla responde a una pulsación con el ratón y eso se detecta con un evento click en la calculadora.
El evento ocurre en una tecla, y si observas es necesrio diferenciar las teclas por su tipo, eso lo hacemos agragando un atributo data-tipo al código HTML.