Calculadora: código javascript
Del diagrama al programa-I
Si tenemos claro los diagramas de fllujo pasar al programa no tiene que ser demasiado difícil. Basta con escribir lo que dice el diagrama usando el lenguaje Javascript.
Por ejemplo si vemos un rombo (condicional) sabemos que se trata de un bloque if, si vemos un bloque condicional que se realimenta tenemos un bucle (for, while, do).
Cuando veas un módulo (bloque con doble borde lateral) úsalo como una función. Verás que hay un diagrama para ese módulo.
Por ejemplo, ves un bloque que pone validar. Considéralo como una funcion validar(), si el módulo lee valores al inicio puede ser necesario que use argumentos.
En este proyecto comenzamos con el diagrama general, vamos a escribir el código javascript que haga lo que dice el diagrama.
Luego pasamos a crear una función por cada módulo.
Ve escribiendo los códigos javascript en el archivo que vas a usar para los scripts: formpag.js, y guárdalo en la misma carpeta junto al archivo de la página, (formapg.html) y al de estilos formpag.css.
El código principal
En el diagrama vemos que el proceso comienza con Esperar Evento, este evento será un click en algún botón de la barra de navegación del formulario.
Así que tenemos que preparar el gestor de eventos para la barra nav: un evento click al que asociamos la función cambiarPágina, el núcleo del programa.
window.addEventListener('load', ()=>{
let btnNav = document.querySelector(".form-pag nav");
btnNav.addEventListener('click', cambiarSeccion)
});
function cambiarSeccion(){
let indSeccionAct, indSeccionNue, secciones, nueva;
if (validar()){
switch (event.target.id){
case "anterior":
nueva = -1
break
case "siguiente":
nueva = +1
break
case "enviar":
nueva = 0;
this.parentElement.submit();
break
}
secciones = document.querySelectorAll(".form-pag section");
secciones = Array.from(secciones);
indSeccionAct = secciones.findIndex((v)=> v.classList.contains('active'));
indSeccionNue = indSeccionAct + nueva;
secciones[indSeccionAct].classList.remove("active");
secciones[indSeccionNue].classList.add('active');
actBotones(indSeccionNue);
actIndice(indSeccionNue);
}
}
Comentarios
Antes de escribir el código asegúrate de comprender bien el diagrama, haz anotaciones o aclaraciones para facilitar la lectura.
Procura tener a mano ese diagrama para no perderte.Te ayudará a escribir un programa más claro..
El primer paso previo a la ejecución de los scripts que vas a escribir será añadir los gestores de eventos que sean necesarios.
Esto es muy habitual en aplicaciones js para páginas web.
Ahora toca pasar a las funciones que usa el procedimeitnso general.