Usando Javascript - JQuery
Bases de JavaScript
- Que es Javascript? - Es un lenguaje de programación “unico” para el control de la información en los navegadores Web. El mismo permite el control del código HTML, las CSS, asi como la validación u control de datos.
- Javascript funciona en todos los Navegadores Web? La mayoría soporta Javascript, pero no se encuentra estandarizada su utilización. Algunos solo admiten un conjunto de Instrucciones, o las admiten, pero el resultado final del funcionamiento difiere de un Navegador a otro.
- Que es DOM? Es un estandar de como deben ser estructuralmente los Documentos que se publiquen en laWEB con formato HTML y XML. Este estandar define como los Navegadores deben interpretar esta información. La W3C es la encargada de regular esto (http://es.wikipedia.org/wiki/DOM)
- Que es AJAX?Ajax no es una tecnología, sino un conjunto de siglas que definen un conjunto de tecnologías con las cuales se implementa una funcionalidad. Previamente a la aparición de Ajax (Asynchronous JavaScript And XML), los contenidos Web poseían la particularidad que para poder mostrar un contenido nuevo al que se estaba visualizando, se tenía que recargar toda la información, lo cual involucraba navegabilidades lentas.Con Ajax, se aprovecho una funcionalidad incorporada en Javascript de poder invocar otros recursos y cargarlos en la estructura del documento sin tener que recargar la misma.
- Que son los Frameworks Javascript? Los mismos son un conjunto de librerías que tienen incorporadas las principales funciones para la administracion de documentos HTML.Estos nos facilitan el tener que trabajar a bajo nivel con javascript, dadonos una abstracción al desarrollo. Algunos ejemplos son: Prototype, Google Web Toolkit, Mojo, JQuery, MooTools. Otro punto muy fuerte de estos frameworks, es que estan pensados para funcionar en cualquier navegador Web, quitandonos el problema de ver de que manera aplicar nuestra solución a diferentes navegadores.
Usando JQuery (Basado en El Tutorial de JQuery)
- Paso 1: Visitar la página de JQuery (http://jquery.com/)
- Paso 2: descargar la librería JQuery (JQuery 1.2.6)
- Paso 3: Crear un archivo HTML Base llamado paso1.html, en la misma ruta donde se puso el archivo de la librerÃa JQuery, con la siguiente estructura:
<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> // Aca irá el código Javascript</script></head><body> <--- Aca irá el código HTML --></body> </html>
- Paso 4: Como primer ejercicio, vamos a realizar un ejemplo que nos permita agregar un Evento a una etiqueta Html “a”, en el cual al hacer click, aparezca un mensjae de Alerta:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("a").click(function() { alert("Primer Ejemplo!"); }); }); </script></head> <body> <a href="">Link</a> </body> </html>
- Paso 5:Creamos un archivo paso2.html, y agregamos el codigo puesto a continuación. En este ejemplo veremos como aplicarle un estilo a una lista HTML.
<html> <head> <script type=”text/javascript” src=”jquery.js”></script> <style type=”text/css”> .red{background:#FF0000;} </style> <script type=”text/javascript”> $(document).ready(function() { $(”#orderedlist”).addClass(”red”); }); </script> </head> <body> <ul id=”orderedlist” ><li > <a href=”">Link 1</a> </li> <li > <a href=”">Link 2</a> </li> </ul> </body> </html>
- Paso 6: Ahora aplicaremos el mismo ejemplo, pero en lugar de ejecutar el cambio del estilo cuando se carga la pá¡gina, lo haremos en el momento de hacer click. Creamos un HTML llamado paso3.html con el mismo código del archivo paso2.html, pero cambiamos el código javascript por el siguente:
$(document).ready(function() {$("#orderedlist").click(function() {$("#orderedlist").addClass("red");});});
- Paso 7: Ahora crearemos la particularidad que tambien le agruegue un estilo a los elementos de la lista, y agregar una variable con la cual podremos controlarque al hacer click, se apliquen o no los estilos.Para eso creamos el archivo paso4.html y copiamos el código que se encuentra a continuación:
<html><head><script type="text/javascript" src="jquery.js"></script><style type="text/css">.red{background:#FF0000;}.blue{background:#0000FF;}</style><script type="text/javascript">var cantClick = true;$(document).ready(function() {$(”#orderedlist”).click(function() {if(cantClick){$(”#orderedlist”).addClass(”red”);$(”#orderedlist > li”).addClass(”blue”);}else{$(”#orderedlist”).removeClass(”red”);$(”#orderedlist > li”).removeClass(”blue”);}cantClick = !cantClick;});});</script></head><body><ul id=”orderedlist” ><li ><a href=”">Link 1</a></li><li ><a href=”">Link 2</a></li><li ><a href=”">Link 3</a></li><li ><a href=”">Link 4</a></li></ul></body></html>