He empezado un nuevo proyecto para Microsoft Colombia y la Secretaria de Salud que es a la vez una prueba de concepto de una migración de una aplicación de VS2003 a VS2008 como la reconstrucción de la aplicación (refactoring) hacia un modelo orientado a Software + Servicios.
Uno de los entregables del proyecto es un Web Site, así que pareció una buena oportunidad para comenzar a explorar JQuery, que lo había visto por ahí con los anuncios de soporte en VS2008 y demás pero nunca lo había tocado.
Lo primero es hacerlo funcionar, eso lo explico mejor Scott Guttrie en un post, entonces yo cree un Web Application, luego una carpeta scripts, y en ella copie el archivo jquery-1.2.6.js y el archivo jquery-1.2.6-vsdoc.js, estos dos me permiten tener JQuery e IntelliSense en Visual Studio, se pueden descargar de Aquí.
Luego incluí el archivo de JQuery y el archivo de la documentación en el default.aspx así:
<script src=”scripts/jquery-1.2.6.js” type=”text/javascript”></script>
<script src=”scripts/jquery-1.2.6-vsdoc.js” type=”text/javascript”></script>
Si no se incluye el archivo de la documentacion JQuery funciona, pero no tengo intellisense.
Ahora, cómo funciona esto:
Recorriendo el DOM
var help = $(“#help”); //obtiene el elemento que se llama help, es como usar document.getElementById solo que funciona en cualquier browser.
var p = $(“p”); //obtiene todos los elementos de tipo <p>
var username = $(“input[name=’username’]”); //obtiene un elemento de tipo input llamado username
Todas las funciones anteriores retornan un arreglo (array), de hecho, la función $(), conocida como función JQuery siempre retorna un array de 0 elementos, 1 elemento o el número de elementos que encuentre (y es en realidad una abreviación de JQuery(“p”) ).
Es una práctica recomendada nombrar las variables con el signo pesos, así que el último ejemplo debería ser algo como esto:
var $username = $(“input[name=’username’]”);
Al ser $username un array tiene un conjunto de métodos que se pueden usar para obtener su longitud, elementos, etc (var form = $form.get(0); var form = $form. length)
Manipulando el DOM
Una vez que tengo identificados los objetos puedo empezar a hacer algo con ellos, algunos consejos:
No es necesario crear todas las clases que se van a usar en la hoja de estilo, solamente se necesitan para que JQuery las identifique
Un elemento puede tener varias clases aplicadas asi: <table class=”VisualTable PopulationTable”>…</table>, de esta forma puedo separar las clases que modifican los diseñadores de las que yo utilizo en JQuery para manipular los objetos.
Eventos
Uno de los elementos importantes de JQuery son los eventos, estos responden generalmente a acciones de los usuarios, pero uno que siempre es útil es el evento ready del document. Algo como esto:
$(document).ready(function{ myCodigo});
Que quiere decir que se debe ejecutar el código {MyCodigo} cuando la pagina este lista. Algo interesante es la forma como se declarara la función a ejecutar, muy similar a un método anónimo y también con una notación de JSON. Sin embargo si por alguna razón a uno no le gusta esta forma de funciones en línea puede usar esta notación: %(document).ready(onLoaded); donde onLoaded es un método definido previamente en el script. (esto también puede ser útil cuando se combinan diversos scripts y se quiere invocar desde un evento una parte de otro script).
Muchos eventos reciben funciones como parámetros, incluso una función en cada parámetro, por ejemplo:
$(“#partList .row”).hover
(
function()
{
$(this).addClass(“rowOver”);
},
function()
{
$(this).removeClass(“rowOver”);
}
)
Recibe dos funciones, una para cuando se entra al hover y otra para cuando se sale. Aquí puede ser interesante notar el $(this) que significa un “apuntador” al elemento que está ejecutando el evento, algo parecido al $(document).
Juan Pelaez.
Arquitecto de Software.
Keywords: JQuery, Web Applications,
Publicado en www.juanpelaez.com/blog