Cómo separar JavaScript de HTML para un reloj analógico interactivo

Cómo Integrar JavaScript y HTML para Crear un Reloj Analógico sin ‘onload’

Cuando construimos una aplicación web, mantener un código limpio y bien organizado es fundamental. A menudo, en el proceso de desarrollo, podría ser tentador incrustar funciones de JavaScript directamente en el documento HTML mediante atributos como ‘onload’. Sin embargo, a medida que las aplicaciones crecen en complejidad, esta práctica puede llevar a un código confuso y difícil de mantener. En este artículo, profundizaremos en cómo separar correctamente tu JavaScript del HTML tomando como ejemplo un reloj analógico interactivo.

El Problema con ‘onload’ en HTML y la Solución con ‘addEventListener’

El atributo ‘onload’ en una etiqueta HTML ejecuta una función de JavaScript cuando un elemento, como el cuerpo del documento (‘body’), ha terminado de cargar. Mientras que esto puede parecer una forma rápida y fácil de ejecutar código, puede traer dilemas como la dificultad para realizar pruebas, el acoplamiento de nuestro HTML y JavaScript, y reducción de la escalabilidad del código en nuestro proyecto.

Una alternativa mucho más flexible y potente es el uso de ‘addEventListener’. Esta función de JavaScript nos permite escuchar eventos específicos y actuar en consecuencia en cualquier elemento del DOM (Modelo de Objetos del Documento), no solo cargar el documento. El código se mantiene separado, lo que facilita su mantenimiento y prueba.

Ejemplo Práctico: Separación de ‘onload’

Vamos a reformular el escenario dado, un reloj analógico que actualmente usa ‘onload’ en el HTML, utilizando ‘addEventListener’. El cambio principal consiste en suprimir la llamada directa a ‘funcionReloj’ desde el HTML y trasladar la lógica de inicialización al archivo JavaScript.

window.addEventListener("load", funcionReloj);

Este enfoque tiene múltiples beneficios. El más inmediato es la eliminación de cualquier referencia a funciones JavaScript desde el HTML, centralizando la lógica de carga de nuestro reloj analógico en el propio archivo JavaScript.

Pasos para Refactorizar el Código

Para implementar esta mejora, seguimos varios pasos:

1. Eliminar el atributo ‘onload’ del cuerpo del HTML.

2. Modificar el archivo JavaScript para escuchar el evento ‘load’ de la ventana (‘window’).

3. Ejecutar la función ‘funcionReloj’ cuando ocurra el evento ‘load’.

Reconstrucción del Código con ‘addEventListener’

Comencemos mirando la estructura original en el HTML y cómo modificarla. A continuación, se muestra el fragmento donde se llamaba originalmente a la función ‘funcionReloj’ mediante el evento ‘onload’.

<body onload="funcionReloj()">...</body>

Para mantener una clara separación de responsabilidades, eliminaremos completamente el manejador ‘onload’ del HTML. Nuestro archivo HTML debería lucir ahora solo con la estructura necesaria para desplegar el reloj:

<body>
    <div id="cajacontenido">
        <div id="aplicacion">
            <div id="CajaReloj">
                <img id="segundos" src="./IMG/Aguja3.png" alt="Manilla segundos reloj" />
                <img id="minutos" src="./IMG/Aguja2.png" alt="Manilla pequeña reloj" />
                <img id="hora" src="./IMG/Aguja1.png" alt="Manilla grande reloj" />
            </div>
        </div>
    </div>
</body>

El siguiente paso es modificar el archivo JavaScript. Aquí, dejaremos la estructura base de la función ‘funcionReloj’ tal cual está, pero añadiremos al final del archivo nuestro ‘event listener’:

window.addEventListener("load", funcionReloj);

Con este cambio, cuando se cargue la ventana del navegador, se llamará automáticamente a la función ‘funcionReloj’. Esta práctica no solo mejora la estructura de nuestro código, sino que también facilita la lectura y depuración del mismo. A continuación, se muestra cómo quedaría el código JavaScript completo:

function funcionReloj() {
    // Lógica para manejar las manecillas del reloj
    ...
}

// Listener para iniciar la función cuando todo el contenido ha cargado
twindow.addEventListener("load", funcionReloj);

Es importante destacar que ‘addEventListener’ es una herramienta poderosa que nos ofrece JavaScript, permitiéndonos asignar múltiples manejadores para un mismo tipo de evento, lo cual es un límite claro cuando se utilizan atributos de evento HTML como ‘onload’.

Consideraciones Finales

Separar el JavaScript del HTML no es solo una cuestión de preferencias, sino una práctica recomendada que conduce a un mejor código. Aunque el alcance de este tutorial se ha centrado en la carga de una aplicación, los principios de separación de preocupaciones, manejo de eventos y modularización son aplicables a una amplia gama de problemas de programación web. Al adoptar ‘addEventListener’ y otras técnicas de código limpio, los desarrolladores pueden construir aplicaciones más robustas, mantenibles y escalables.

Te puede interesar

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *