Javascript no-intrusivo

En pocas palabras, javascript no-intrusivo se dice al hecho de que una página no dependa de javascript para su correcto funcionamiento. En otras palabras evitar la inclusión directa código dentro los tags, por ejemplo:

  <a href="#" click="alert('hola');">Click</a>    

jQuery

jQuery es una librería javascript/ajax que facilita de manera asombrosa el uso de javascript para desarrollo web, ¡incluso haciéndolo divertido!

Ejemplo

Directo al grano, queremos añadir un botón de cerrar a los mensajes de notificación que da nuestro sitio (mensajes de error, de alerta, etc).

¿cómo lo hacemos?

Podemos hacer uso de los selectores, y en base a estos añadir funcionalidades a ciertos elementos. Por ejemplo, supongamos que queremos hacer que todos los links externos se abran en nueva ventana sin usar el atributo target -que no valida.

Con jQuery podría ser de esta manera:

  jQuery('a[@href^="http://"]').addClass('external').attr('target', '_blank');    

Primero seleccionamos todos los tags "a" con el atributo "href" que empiezan con "http://", a todos estos elementos les añadimos la clase css "external" y el atributo "target=_blank". ¿fácil, no?

Un problema de los scripts js en las página web, es que estos se ejecuten antes de que se termina la carga completa. En jQuery se utiliza lo siguiente:

  jQuery("document").ready(function() {   // instrucciones que se ejecutaran cuando el documento cargue por completo   });    

Entonces, nuestro código mágico para hacer elementos "cerrables" es....

  jQuery(function($) {   //creamos el elemento "a"   //añadimos el atributo href   // añadimos la clase css close-button   // añadimos una acción al evento "click"   // y cuando el usuario haga "click" buscamos el nodo padre con la calse "can-close" y lo hacemos "desaparecer" xD       close = $("<a>")               .text("Close")               .attr("href", "#")               .attr("class", "close-button")               .click(function() {                   $(this).parents("can-close").fadeOut(1500);               });   // a todos los elementos con la clase "can-close"   // le añadimos el botón de cerrar   $(".can-close").prepend(close);   // end    });    

En resumen, creamos el enlace para cerrar el elemento, luego buscamos todos los elementos con la clase css "can-close" y el añadimos el botón.

Mediante esta técnica, para hacer otro elemento que se pueda cerrar, simplemente le añadimos la clase "can-close".

  <div id="algo" class="can-close">Mensaje ...</div>    

Muchos proyectos web utilizan esta técnica para hacer efectos "pluggables", añaden los selectores (id/class) correctos para poder añadir comportamientos (behaviors) arbitrarios a cualquiera de ellos.

Pueden ver el demo en: jquery1.html