Desarrollo de un Cronómetro con JavaScript: Actividad Práctica, Esquemas y mapas conceptuales de Programación Javascript

¡Descarga Desarrollo de un Cronómetro con JavaScript: Actividad Práctica y más Esquemas y mapas conceptuales en PDF de Programación Javascript solo en Docsity!

Componente de Presentación

(JavaScript)

Actividad Práctica Para llevar a cabo el desarrollo del componente correspondiente a la capa de presentación es necesario conocer algunas tecnologías como HTML , CSS y JavaScript , las dos primeras fueron vistas en la guía anterior, en esta guía se realizará un ejercicio práctico cuyo objetivo es mostrar la manera en la que JavaScript dota de interactividad a HTML y CSS. El ejercicio consistirá en crear un cronometro totalmente funcional el cual tendrá tres botones ( play , pause y reset ), para lograr este objetivo será necesario el uso de funciones , condicionales , variables , objetos , manejo de eventos y lo más importante el acceso al DOM a través del objeto document. Desarrollo del Cronómetro Antes de iniciar el desarrollo del cronómetro se debe crear la siguiente estructura de archivos : Dado que ya se tiene un dominio básico de HTML y CSS, no se explicará en detalle el contenido de los archivos index.html y styles.css. HTML El contenido del archivo index.html es el siguiente:

Mi Cronometro

CSS

El contenido del archivo styles.css es el siguiente: *{ box-sizing: border-box; margin: 0 ; padding: 0 ; } .container{ width: 100vw; height: 100vh; background-color: darkcyan; display: flex; justify-content: center; align-items: center; } .cronometro { width: 40%; height: 60%; background-color: white; border: 3px solid rgba( 0 , 0 , 0 , 0.8); display: flex; align-items: center; justify-content: center; flex-direction: column; } .tablero{ width: 60%; height: 50%; background-color: rgba( 0 , 0 , 0 , 0.7); border: 3px solid rgba( 0 , 0 , 0 , 0.8); display: flex; align-items: center; justify-content: center; } .tablero p { color: white; font-size: 100px; display: flex; align-items: center; justify-content: center;

.botones{ width: 60%; height: 20%; background-color: crimson; border: 3px solid rgba( 0 , 0 , 0 , 0.8); border-top: none; display: flex; align-items: center; justify-content: space-around; } .botones button{ background-color: white; padding: 10px 20px; border: 3px solid rgba( 0 , 0 , 0 , 0.9); color: black; font-weight: bold; font-size: 16px; } .botones button:hover{ background-color: white; color: red; } Este archivo simplemente contiene una serie de instrucciones para dotar de estilo al cronómetro , con los estilos agregados el cronómetro lucirá así:

// Funcion Actualizar function formato(numero){ if(numero< 10 ){ return "0"+numero; } else{ return numero; } } function actualizar(){ time.decimas++; if(time.decimas == 10 ){ time.decimas = 0 ; time.segundos++; } if(time.segundos == 60 ){ time.segundos = 0 ; time.minutos++; } tablero.innerHTML = ${formato(time.minutos)}:${formato(time.segundos)}:${time.decimas} if(esta_activo == true){ setTimeout(actualizar, 100 ); } } En este fragmento de código se define la parte principal del cronómetro, primero se tiene una función auxiliar llamada formato , esta función tiene como objetivo transformar dígitos como “8” a “08”, esto resulta útil para darle el formato adecuado al tiempo. La función actualizar tiene 3 partes: ● Primero, dado que el cronómetro avanza en décimas (cada 100 milisegundos) lo que se hace es incrementar el valor de las décimas en uno, esto se realiza con ayuda del operador de incremento. Una vez se ha actualizado el valor de las décimas, se comprueba con condicionales que no se hayan pasado los límites. ● Luego de realizar las comprobaciones se procede a modificar el valor del tablero con el nuevo tiempo, esto se logra con la funcionalidad innerHTML y el elemento capturado. Puede parecer

un poco complicado construir el nuevo valor, pero realmente lo único que se está haciendo es concatenar los valores del tiempo en un solo string. ● Por último se realiza una comprobación para saber si la función actualizar debe ser nuevamente utilizada en caso de que el cronómetro este activo, esto se logra con ayuda de la función predeterminada setTimeout con la cual se programa una nueva ejecución dentro de una décima de segundo. Funciones Botones La cuarta parte del código del archivo index.js es la siguiente: // Funciones Botones function play(){ if(esta_activo == false){ esta_activo = true; actualizar(); } } function pause(){ esta_activo = false; } function reset(){ time.decimas = 0 ; time.segundos = 0 ; time.minutos = 0 ; tablero.innerHTML = ${formato(time.minutos)}:${formato(time.segundos)}:${time.decimas} } Ahora que se tiene la función principal implementada, se procede a implementar las funcionalidades para cada uno de los botones, estos códigos son bastantes simples: ● La función play únicamente cambia el estado del cronómetro y ejecuta la función actualizar para que el tiempo comience a avanzar. ● La función pause simplemente cambia el estado del cronómetro, para detener las actualizaciones del tiempo. ● La función reset actualiza los valores del objeto time a cero y luego actualiza el valor en el tablero.