Esto del desarrollo web ha ido evolucionando conforme los navegadors han sido capaces de ejecutar codigo cada vez mas complejo, al principio ese punto de mejora nos obligo a pensar en alternativas como Flash para ser usadas como un Engine para ejecucion de codigo hasta que el AJAX, JSON y demas tecnologias se formalizaron y tomaron fuerza en el desarrollo web.
Una de las tecnologías que han hecho esto posibla ha sido el AJAX pero junto con esta tecnología tambien vino el problema de compatibilidad entre navegadores que es bien sabido que no se utilizan los mismos metodos en Internet Explorer y el resto del mundo.
Para atacar este problema llegaron diferentes Frameworks de Javascript como Prototype o jQuery abstrayendo la complejidad de desarrollar para X o Y navegador determinado ademas de agregar un poderoso “Selector” para el manejo de los elementos de la página web.
Requisitos:
Para entender mejor este tema es recomendable tener experiencia con el HTML, las hojas de estilo (CSS) y el Javascript.
Objetivo:
Conocer como implementar y comenzar a usar jQuery en un documento HTML.
Para comenzar generaremos un documento HTML básico llamado “inicio.htm” con un bloque que sera el objetivo de nuestros ejercicios.
<html>
<head>
</head>
<body>
</body>
</html>
Ahora lo importante es conseguir el Framework de jQuery descargandolo de su sitio y de preferencia guardandolo junto al archivo html, existen varios tipos de descargas para este ejercicio solo se necesita un archivo .js que es el framework, los UI que son interfaces y efectos los veremos después.
En mi caso descargue el archivo jquery-1.4.2.min.js que es la version actual cuando realize este tutorial y es el archivo que voy a agregar a nuestro documento html con la linea:
Nota: la palabra “min” del nombre del archivo de javascript significa que el archivo a sido comprimido para que pese lo menos posible optimizando de esa forma el ancho de banda de nuestro sitio.
con lo que nuestro archivo inicio.htm debera de verse de esta forma:
<html>
<head>
<script type=”text/javascript” src=”jquery-1.4.2.min.js” ></script>
</head>
<body>
</body>
</html>
Lo que haremos ahora es mandar una alerta que nos avise que la página esta lista para comenzar para realizar las acciones con el Javascript. Normalmente lo haríamos asignando una funcion al evento onLoad del tag body pero jQuery tiene su particular forma de realizar ese aviso que es:
$(function() { alert("Hola Mundo! ó Listo para trabajar"); });
Con esto nuestro ejemplo queda asi:
<html>
<head>
<script type=”text/javascript” src=”jquery-1.4.2.min.js” ></script>
<script type=”text/javascript”>
$(function() {
alert(“Hola Mundo! ó Listo para trabajar”);
});
</script>
<body>
</body>
</html>
De esta forma ya sabemos como preparar una página con jQuery y estamos listos para la siguiente lección que nos dira por que nos mostrara las ventajas de usar jQuery en nuestros proyectos web.
Como comentario final me gustaria mencionar que la funcion $(function(){}); puede ser llamada mas de una vez en la página lo que provocara que al terminar de cargar la página ejecute primero lo del bloque en head y despues lo del siguiente bloque que se encuentre en alguna otra parte del codigo, para muestra el siguiente ejemplo:
<html>
<head>
<script type=”text/javascript” src=”jquery-1.4.2.min.js” ></script>
<script type=”text/javascript”>
$(function() {
alert(“Mensaje del bloque en HEAD”);
});
</script>
<body>
<script type=”text/javascript”>
$(function() {
alert(“Mensaje del bloque en BODY”);
});
</script>
</body>
</html>
En la siguiente leccion comenzaremos a conocer el selector de jQuery, tu mejor amigo dentro de este Framework.