JavaScript no intrusivo con JQuery

javascript.jpg
Solucionex
09
Oct 09

Desde hace mucho tiempo la utilización entandar de javascript, ha provocado que las paginas donde se utiliza no sean accesibles. La clave para solucionar esto se denomina JavaScript no intrusivo.

El concepto es muy sencillo, consiste en separar la funcionalidad cliente de una página del contenido HTML. Así pues, el Javascript no intrusivo, es aquel que está totalmente separado de la estructura. Para ello el código Javascript en vez de estar mezclado con el código HTML, debe estar en un fichero .js aparte. Para conseguir esta funcionalidad de una forma sencilla y eficiente podemos utilizar la librería JQuery. Para los que no la conozcáis, es un framework para javascript que nos permite enfocar de una manera diferente la manera de desarrollar el comportamiento de una web, además de simplificarnos el desarrollo de la parte de cliente de las aplicaciones web.

A continuación os muestro un típico ejemplo de un código Javascript estándar (javascript intrusivo) que muestra un mensaje de alerta con la frase “Hola mundo” al pulsar un botón:

Para realizar este mismo ejemplo con javascript no intrusivo utilizando la librería jquery, incorporamos el código javascript a un fichero independiente (ejemplo.js) y dejamos código del botón de la siguiente manera.

Como podéis ver, ya no utilizamos el evento onclick directamente en el botón, este evento lo inicializamos desde Jquery utilizando el DOM. En siguiente código es el que contendría el fichero ejemplo.js.

function helloWorld() { alert(“hola”); } $(document).ready(function(){ $("#btn").click( helloWorld ); });

Utilizar jquery es muy sencillo y nos permite crear código javascript no intrusivo. Las principales ventajas de jQuery son:

  • No es intrusivo. Esto significa que no se mezcla el código HTML con Javascript, con lo que se consigue un código más limpio y fácil de mantener.
  • Simplifica las tareas habituales de Javascript.
  • Es independiente del navegador.
  • Ocupa muy poco. La librería comprimida apenas llega las 19KB
  • Extensible. Dispone de montones de extensiones que puedes utilizar.