JavaScript es un lenguaje de programación orientado a eventos, un concepto fundamental en el desarrollo web. Los eventos son aquellas acciones que ejecuta el usuario y que se le notificarán a nuestro código para que programemos reacciones coherentes. Existen dos maneras de ejecutar eventos en este lenguaje: de manera declarativa y de manera imperativa. En este post, te enseñaremos cómo manejar eventos in-line en frontend JavaScript, la manera declarativa de declarar este concepto.
¿Qué es manejar eventos in-line en frontend JavaScript?
Cuando hablamos de manejar eventos in-line en frontend JavaScript nos referimos a la manera declarativa que tenemos de manejar eventos en este lenguaje de programación. Es decir, declaramos directamente la reacción a un evento sin ningún intermediario. A continuación, te mostramos un par de ejemplos en los que hemos declarado eventos de esta manera.
Supongamos que tenemos el siguiente elemento HTML:
<p id=”demo”></p>
Ahora, declaramos una reacción a un evento en este elemento:
<button onclick= ‘getElementById(“demo”).innerHTML=Date ( )’> The time is?</button>
Como puedes ver en las líneas de código anteriores, tenemos un elemento HTML button con un atributo o evento onclick. Dentro de este atributo, tenemos escrita una pequeña porción de JavaScript en la que sobrescribimos el HTML del nodo “demo”, seleccionado con un getElementById, usando la propiedad innerHTML,
Recuerda que podemos escribir el método para seleccionar nodos en el DOM getElementById directamente, porque todos los métodos y propiedades que cuelgan del objeto window del BOM tienen un alcance global. Es decir, no necesitamos escribir document.getElementById para ejecutar el método, aunque escribir este comando también serviría. Esto mismo sucede con el comando console.log, que cuelga del segmento console de window y para el que tenemos acceso directo.
La sección de código anterior declara que, una vez se ejecute un clic sobre el botón “The time is?” se sobrescribe el HTML del nodo “demo” con el objeto Date. Es muy importante que escribas este tipo de objetos con mayúscula, pues sino se tomará como una función no declarada.
Nota que al manejar eventos in-line en frontend JavaScript la sintaxis va del siguiente modo: declarar un nodo HTML y luego un evento con una acción (onclick). Inmediatamente dentro de la misma línea, se declara la reacción (document.getElementById…). Por ello, estamos hablando de un método declarativo.
Este mismo manejo de evento se puede escribir declarando una función como valor del atributo onclick. Aquí seguimos decidiendo manejar eventos in-line en frontend JavaScript, pues no hay intermediario entre el evento y su consecuencia:
<button onclick=’drawTime ()’> The time is? </button>
En esta línea de código hemos definido que, cuando suceda el evento onclick, se ejecutará el método drawTime. Este método no existe, por lo que debemos declararlo. Además, como a partir de aquí habrá código JavaScript, abriremos la etiqueta script:
<script>
function drawTime ( ) {
‘getElementById(“demo”).innerHTML=Date ( ):
}
</script>
Nota que en esta segunda opción para manejar eventos in-line en frontend JavaScript, estamos separando un poco la lógica JavaScript del código HTML. Lo contrario sucede en la primera opción, en la que declaramos ambos códigos en una misma línea.
Te recomendamos huir de escribir eventos en una misma línea de código que une JavaScript con HTML (es decir, el primer ejemplo que utilizamos). Aunque unir estos dos códigos da para un proyecto muy poderoso, no se deben mezclar completamente de esta manera, pues será muy complicado de comprender tanto para el desarrollador como para el navegador. Incluso cuando ejecutamos el segundo ejemplo, lo mejor sería declarar la función en un index.js y llamar a este archivo desde un script:
<script src=”./index.js”></script>
De este modo, separarás aún más el código JavaScript del código HTML. Esto funcionará exactamente igual que cuando el script era la función, pues al estar cargando el index.js se procesará la función drawTime automáticamente.
La manera adecuada de declarar eventos es realmente de un modo imperativo. Por ello, te recomendamos leer nuestro post sobre manejar eventos imperativos en frontend JavaScript.
Ahora sabes cómo manejar eventos in-line en frontend JavaScript y en qué escenarios es mejor usarlo. Por ello, te invitamos a dar el siguiente paso en tu formación como desarrollador web con nuestro Desarrollo Web Full Stack Bootcamp, un espacio de aprendizaje intensivo donde te enseñaremos la teoría y la práctica de diversos programas, herramientas y lenguajes de programación como JavaScript, HTML y CSS. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web prfesional? ¡Te esperamos!
