El desarrollo web actual esta evolucionando gracias a la tecnología que cambia dia a dia, perfeccionándose, pero esto puede ser inútil si no va ligada a una metodología o guias de estilo proporcionadas por personas con experiencia, recientemente apareció el termino de javascript no obtrusivo, que la propia wikipedia define como:

• Separación de la funcionalidad JavaScript (la “capa del comportamiento”) de las capas de estructura/contenido y de presentación de un página.
• Uso de buenas prácticas a fin de evitar los problemas de incompatibilidad de la programación tradicional en JavaScript (tales como inconsistencias entre navegadores y falta de escalabilidad)

Esto es que se crea dentro de cada pagina Html normal, tres capas distinguibles que son:

• La capa de información (Html)
• La capa de presentación y diseño (CSS)
• La capa de interacción y eventos (Javascript)

Esto nos recuerda al patrón MVC utilizada en Ruby on Rails y otros frameworks actuales (Django, Cake, Code Igniter, etc.), esto facilita enormemente el desarrollo ya que focaliza y ordena las funciones de cada capa. Ahora con esta pequeña introducción veamos como podemos ver en la practica la teoría, para ello utilizaremos a la biblioteca javascript: Jquery, que dentro de ella ya tiene las funciones comunes para desarrollo como: Ajax, manipulación de Dom, effectos, etc. Bien empezamos desarrollando lo que sera el esqueleto de la aplicación el html en si:``` index.html

Chat con jquery unobtrusivo.

-

```Como vemos el código html esta liberado de todo enlace a funciones javascript dentro de los eventos, solamente se hace referencia a dos archivos javascript que son: el propio jquery y un archivo chat.js que tiene las funciones y el manejo de eventos a acciones del HTML. Ahora el código de la presentación::``` **style.css** *{ margin:0; padding:0; } html,body{ height:100%; } body{ padding:30px; font:13px/15px 'helvetica neue',arial,helvetica,sans-serif; color:#343434; } h1{ padding:10px; } #chat{ padding:25px; font-family:Monaco,Courier,monospace; font-size:12px;margin-bottom:15px; -webkit-border-radius:9px; -moz-border-radius:9px; background-color:#1F1100; border:0; color:#E7ECF1; overflow:auto; width:400px; height:380px; } .footer{ margin-top:50px; font-style:italic; } ```Y finalmente el código javascript:``` **chat.js** $(document).ready( function(){ $("form").submit( function () { $.ajax({ data:$.param($(this).serializeArray()), dataType:'script', type:'get', url:'chat.php', complete : function(){ $("#chat").animate({ scrollTop: 2000 }, 15 ); $('input#message').val(""); } }); return false; } ); })

setInterval(function() { $.ajax({ success:function(request){ $(’#chat’).html(request); }, url:‘chat.html’, cache: false }) }, 2000)