1 de enero de 2012

JavaScript
JQuery y Ajax

Eduardo Ortiz Alvarado

Contenido
1.-Introduccin a JavaScript. .................................................................................................. 1 1.1.- Declaracin de variables. ........................................................................................... 1 1.2 Operadores bsicos. ...................................................................................................... 1 1.2.1 Concatenacin. ...................................................................................................... 1 1.2.2 Multiplicacin y divisin. ...................................................................................... 2 1.2.3 Incrementacin y decrementacin ..................................................................... 2 1.3 Suma vs. concatenacin .......................................................................................... 2 1.4 Operadores lgicos. ...................................................................................................... 2 1.5 Elementos verdaderos y falsos. .................................................................................... 3 1.5.1 Valores que devuelven verdadero (true) ................................................. 3 1.5.2 Valores que devuelven falso (false)......................................................... 3 1.6 Sentencias de control .................................................................................................... 3 1.6.1 if/else ..................................................................................................................... 3 1.6.2 Operador ternario. .................................................................................................. 3 1.6.3 Switch .................................................................................................................... 3 1.6.3 Bucles .................................................................................................................... 4 1.7 Funciones. ..................................................................................................................... 5 17.1 Declaracin de una funcin. ................................................................................... 5 1.7.2 Llamada a una funcin .......................................................................................... 5 1.7.3 Funciones nombradas ............................................................................................ 5 1.7.2 Funciones como parmetros. ..................................................................................... 5 1.7.5 Funciones Annimas Autoejecutables. ................................................................. 5 1.7.6 Funcin autoejecutable. ......................................................................................... 6 1.8 Programacin orientada a objetos en JavaScript .......................................................... 6 1.8.1 Creacin de un objeto. ........................................................................................... 6 1.8.2 Mtodos y atributos privados. ............................................................................... 8 1.8.3 Mtodos y atributos estticos .................................................................................... 8 1.8.4 Herencia. ................................................................................................................ 9 1.8.5 Namespaces. .......................................................................................................... 9 1.9 Accediendo al DOM. .................................................................................................. 10 1.9.1 getElementById ................................................................................................... 10 1.10 Eventos ..................................................................................................................... 11 1.10.1 Manejadores de eventos..................................................................................... 12 I

1.10.2 La evolucin de los eventos............................................................................... 14 2.- Manejo de JQuery. .......................................................................................................... 17 2.1 Primeros pasos ............................................................................................................ 17 2.2 Selectores .................................................................................................................... 17 2.3 Eventos en JQuery. ..................................................................................................... 20 2.3.1 El objeto del evento ............................................................................................. 21 3.- Serializacin de formularios............................................................................................ 23 4.- Utilizacin de JSON. ....................................................................................................... 24 5.-Introduccin a Ajax. ......................................................................................................... 26 5.1 Funcin $.load. ........................................................................................................... 26 5.2 Mtodo $.ajaxStart. .................................................................................................... 26 5.3 Mtodos $.get y $.post................................................................................................ 27 5.4 Mtodo $.getJSON ..................................................................................................... 27 5.5 Mtodo $.ajax ............................................................................................................. 27

II

1.-Introduccin a JavaScript.
JavaScript es un lenguaje de programacin interpretado que se ejecuta por lo regular en un navegador y su ejecucin se realiza del lado del cliente. El cdigo JavaScript puede ser embebido dentro de un documento HTML o incrustado a travs de archivos externos para ambos casos se utiliza la etiqueta <script></script>. JavaScript a travs de un archivo externo (ejemplo1.html).
<html> <head> <title>Hola Mundo</title> <script src="hola.js"></script> </head> <body> </body> </html>

Modo embebido. (ejemplo2.html)

<html> <head> <title>Hola Mundo</title> <script> alert("Hola Mundo"); </script> </head> <body> </body> </html>

1.1.- Declaracin de variables.

JavaScript es un lenguaje de dbilmente tipado y dinmico, esto quiere decir que las variables pueden tomar distintos tipos de datos y que adems en su declaracin no se debe especificar si se trata de un valor numrico, cadena, booleano u objeto. Para declarar una variable se utiliza la palabra reservada var

1.2 Operadores bsicos.

1.2.1 Concatenacin.
var foo = 'hola'; var bar = 'mundo'; console.log(foo + ' ' + bar); // la consola de depuracin muestra 'hola mundo'.

1.2.2 Multiplicacin y divisin.

2 * 3; 2 / 3;

1.2.3 Incrementacin y decrementacin

var i = 1; var j = ++i; var k = i++; // incrementacin previa: j es igual a 2; i es igual a 2 // incrementacin posterior: k es igual a 2; i es igual a 3

1.3 Suma vs. concatenacin

Ejemplo 3 (ejemplo3.html) <html> <head> <title>Variables</title> <script> var v1 = 1; var v2 = 2; var v3 = '3'; var v4 = "4";

document.writeln(v1 document.writeln(v1 document.writeln(v1 document.writeln(v1 </script> </head> <body> </body> </html>

+ + + +

v2); //se obtiene 3 v3); //se obtiene 13 Number(v3)); //se obtiene 4 +v3); //se obtiene 4

1.4 Operadores lgicos.

Los operadores lgicos permiten evaluar una serie de operandos utilizando operaciones AND y OR.
var foo = 1; var bar = 0; var baz = 2; foo || bar; bar || foo; foo && bar; foo && baz; baz && foo; // devuelve 1, el cual es verdadero (true) // devuelve 1, el cual es verdadero (true) // devuelve 0, el cual es falso (false) // devuelve 2, el cual es verdadero (true) // devuelve 1, el cual es verdadero (true)

1.5 Elementos verdaderos y falsos.

1.5.1 Valores que devuelven verdadero (true)
'0'; 'string'; [ ]; // { }; // 1; // // cualquier cadena un arreglo vaco un objeto vaco cualquier nmero distinto a cero

1.5.2 Valores que devuelven falso (false)

0; ''; // una cadena vaca NaN; // la variable JavaScript "not-a-number" (No es un nmero) null; // un valor nulo undefined; // No definido.

1.6 Sentencias de control

1.6.1 if/else La instruccin if selecciona una instruccin para su ejecucin en base a una expresin booleana.
var edad = 18; if (edad > 18) { alert("Eres mayor de 18 aos"); } else if (edad<18) { alert("Eres menor de edad"); } else { alert("Tienes 18 aos"); }

1.6.2 Operador ternario. El operador ternario evala una condicin; si la condicin es verdadera, devuelve cierto valor, caso contrario devuelve un valor diferente.
var aux = true; var valor = aux ? "hola" : "adis"; alert(valor);

1.6.3 Switch
var variable = "b"; switch (variable) { case "a": //codigo a; break; case "b": //codigo b; break; case "c": //codigo c; break; default: //codigo default; }

1.6.3 Bucles Ejemplo 4 (ejemplo4.html)

<html> <head> <title></title> <script> for (var i = 0; i < 5; i++) { console.log("Ciclo for "+i); } var i=0; while(i<5){ console.log("Ciclo while "+i); i++; } var i=0; do { console.log("Ciclo do while "+i); i++; } while (i<5); var arreglo = ["a", "b", "c", "d", "e"]; for (var i in arreglo) { console.log("indice: "+i + " valor: "+arreglo[i]); } </script> </head> <body> </body> </html>

Salida.

1.7 Funciones.
17.1 Declaracin de una funcin.
function factorial(num) { var fac = 1; for (num; num > 0; num--) { fac = fac * num; } return fac; }

1.7.2 Llamada a una funcin

var resultado = factorial(3); alert(resultado); alert(factorial(5));

1.7.3 Funciones nombradas

var factorial2 = function (num) { var fac = 1; for (num; num > 0; num--) { fac = fac * num; } return fac; }

1.7.2 Funciones como parmetros.

Las funciones en JavaScript pueden ser asignadas a variables y utilizadas como argumentos en otras funciones (ejemplo5.html).
var myFn = function (fn) { var result = fn(); console.log(result); }; function hola() { return 'Hola'; } function adios() { return "Adis"; } myFn(hola); myFn(adios);

1.7.5 Funciones Annimas Autoejecutables. Las funciones annimas son aquellas que carecen de un nombre que las identifique, en JQuery son bastante comunes. Se pueden pasar como parmetros inmediatos a una funcin o utilizarlas como funciones autoejecutables.

Ejemplo anterior ahora con funciones annimas. (ejemplo6.html)

var myFn = function (fn) { var result = fn(); console.log(result); }; myFn(function(){ return "Hola" }); myFn(function(){ return "Adis" });

1.7.6 Funcin autoejecutable. Es muy til para casos en que no se desea intervenir espacios de nombres globales, debido a que ninguna variable declarada dentro de la funcin es visible desde afuera.
(function () { var foo = 'Hello world'; alert(foo); })();

console.log(foo);

// indefinido (undefined)

1.8 Programacin orientada a objetos en JavaScript

JavaScript tambin es un lenguaje orientado a objetos, sin embargo su implementacin difiere bastante de lenguajes como Java o PHP, ya que JavaScript no utiliza Clases para definir la construccin en objetos, en su lugar utiliza prototipos. Un prototipo es un objeto abstracto capaz de contener otros objetos dentro los cuales pueden ser variables (nmeros, cadenas, valores lgicos, vectores, funciones u otros objetos). 1.8.1 Creacin de un objeto. Para definir mtodos, funciones u prototipos se utiliza la misma palabra, function, en el caso de los prototipos se utiliza como si se tratara de una funcin constructora y dentro de ella se colocan los atributos y mtodos. Al igual que las funciones existen varias formas de definir esta estructura. Forma 1 (prototipos)
var Gato = function (nombre, color, edad) { //Atributos this.nombre = nombre; this.color = color; this.edad = edad; //Mtodos this.maulla = function () { console.log("miau"); } }

Forma 2 (prototipos) function Gato(nombre, color, edad) { //Atributos this.nombre = nombre; this.color = color; this.edad = edad; //Mtodos this.maulla=function () { console.log("Miau"); } }

Forma 3

Si se est haciendo un intento de acceder a una propiedad que realmente no existe, se crea automticamente, de modo que tambin es posible definir un objeto de la siguiente forma.
var Gato = new Object(); //Atributos Gato.nombre = "nombre"; Gato.color = "color"; Gato.edad = "edad"; //Mtodos Gato.maulla=function(){ console.log("Miau"); Forma 4 (Arrays asociativos)var Gato = new Object(); //Atributos Gato["nombre] = "nombre"; Gato["color"] = "color"; Gato["edad"] = "edad"; //Mtodos Gato["maulla"]=function(){ console.log("Miau"); Forma 5 (literal) var Gato = { //atributos nombre: "nombre", color: "color", edad: "edad", //Mtodos maullar: function () { console.log("Miau"); } };

Si se desea aadir atributos o mtodos adiciones a objetos previamente creados con la forma 1 o la forma 2, se debe utilizar la palabra prototype.
var Gato = function (nombre, color, edad) { this.nombre = nombre; this.color = color; this.edad = edad; } Gato.prototype.comer = function () { alert("El gato " + this.nombre + " se comi un ratn"); } var g = new Gato("bola de pelos"); g.comer();

1.8.2 Mtodos y atributos privados. Es importante aclarar que al utilizar la forma 1 y forma 2 la palabra reservada this har que tanto las propiedades como los mtodos puedan ser accedidos desde fuera, en caso de omitirla estos valores se convertirn en valores privados de dicho objeto.
var Gato = function (nombre, color, _edad) { this.nombre = nombre; this.color = color; edad = _edad; //atributo privado function comer(nombre) { //Mtodo privado, no accesible desde fuera alert("El gato " + nombre + "esta comiendo"); } }

Adems en los mtodos privados no se puede utilizar la palabra this para referenciar a las propiedades internas, en su lugar se deben pasar como parmetro las variables o funciones que se requieran.

1.8.3 Mtodos y atributos estticos

Para crear atributos o mtodos estticos se utiliza el nombre de la clase seguida por un punto y la nueva propiedad. (ejemplo6.html)
var Gato = function (nombre, color, _edad) { this.nombre = nombre; this.color = color; Gato.count = Gato.count ? Gato.count : 0 Gato.count++; Gato.numeroDeGatos = function (mensaje) { alert(mensaje + " " + Gato.count); } } var g1 = new Gato(); var g2 = new Gato(); alert(Gato.count); Gato.numeroDeGatos("Numero de gatos:");

1.8.4 Herencia. La herencia es una de las caractersticas ms interesantes dentro de la programacin orientada a objetos, en JavaScript podemos lograrla mediante la propiedad prototype que contiene todas las definiciones de un objeto. (ejemplo7.html)
var Gato = function () { this.ojos = 2; this.piernas = 4; } var Siames = function () { this.color = "blanco"; this.color_ojos = "azul"; } //Como vemos, ambos tienen propiedades distintas. //Ahora, heredemos: Siames.prototype = new Gato(); //Eso hace que se copie el prototipo de Gato y se aada al de Siames. //Probamos nuestro nuevo objeto Siames var Catboy = new Siames(); alert(Catboy.ojos); //Retorna 2! alert(Catboy.color); //Retorna "blanco", asi que conserva sus propiedades

1.8.5 Namespaces. Los Namspaces no son paquetes como en otros leguanjes, se tratan de objetos anidados que encapsulan grupos de objetos y funciones. Por ejemplo podemos tener un grupo de funciones sueltas y una variable global
var dirty = false function clickCancel() { var save = true if (dirty) { save = confirm("salvar antes de salir?") } if (save) clickSave() } function clickSave() { document.getElementById("myForm").submit() }

Podemos agrupar dichas funciones de la siguiente forma.

var App = { dirty: false, clickCancel: function () { var save = true if (this.dirty) { save = confirm("salvar antes de salir?") } if (save) this.clickSave() }, clickSave: function () {

document.getElementById("myForm").submit() } }

Ahora usaremos App.dirty, App.clickCancel() y App.clickSave(), consumiendo solo una variable pblica en el mbito global llamada App, y no tres como hacamos antes. Si tenemos en cuenta que, generalmente, solemos crear decenas de funciones y variables pblicas, est claro que la posibilidad de que usemos el mismo nombre de funcin o variable que ya exista en otro sitio disminuye considerablemente.

1.9 Accediendo al DOM.

DOM (Document Object Model - Modelo Objeto Documento). Mediante el DOM podemos acceder al contenido y estilo de cada marca del documento y modificarlo de acuerdo a algn evento. Mediante el DOM podemos insertar, borrar, modificar marcas HTML. Podemos acceder a la hoja de estilo definida a la pgina y dinmicamente agregar, modificar o borrar propiedades. 1.9.1 getElementById
document.getElementById("Id de la etiqueta HTML");

Nos retorna una referencia a la etiqueta con dicho id. Con esta referencia podemos acceder a sus propiedades como puede ser su contenido, color, fuente, etc. (ejemplo8.html)
<html> <head> <title></title> <script> function cambiarColor() { var tit = document.getElementById('titulo'); tit.style.color = '#ff0000'; } function cambiarTamanoFuente() { var tit = document.getElementById('titulo'); tit.style.fontSize = 60; } function cambiarTexto() { document.getElementById("titulo").innerHTML = "El texto ha cambiado"; } function eliminarTexto() { document.getElementById("titulo").innerHTML = ""; } </script> </head> <body> <h1 id="titulo">Ttulo dinmico</h1> <input type="button" value="Cambiar Color" onClick="cambiarColor()"> <input type="button" value="Cambiar Tamao de Fuente" onClick="cambiarTamanoFuente()"> <input type="button" value="Cambiar Texto" onClick="cambiarTexto()"> <input type="button" value="Eliminar" onClick="eliminarTexto()"> </body> </html>

10

1.10 Eventos
Los eventos son la manera que tenemos en JavaScript de controlar las acciones de los visitantes y definir un comportamiento de la pgina cuando se produzcan. Cuando un usuario visita una pgina web e interacta con ella se producen los eventos y con JavaScript podemos definir qu queremos que ocurra cuando se produzcan. (ejemlo9.html)
<html> <head> <title>Eventos</title> <script type="text/javascript"> window.addEventListener("load", function () { alert("Evento Load"); inicia_eventos(); }); function inicia_eventos() { var boton = document.getElementById("boton"); boton.addEventListener("click", function () { alert("Evento click"); }); document.getElementById("txtKey").addEventListener("keydown", keydown); document.getElementById("sp").onmouseover = function () { this.style.color = "#fff"; }; document.getElementById("sp").onmouseout = function (event) { this.style.color = "#000"; } function keydown(event) { if (event.keyCode == 13) alert("Tecla enter"); else alert("Se presion\u00f3 la tecla " + event.keyCode); } } </script> </head> <body> <input type="button" id="boton" value="Evento click"/> <span id="sp" >Evento OnMouseOver</span> <input type="text" id="txtKey" value="Evento keydown" /> </body> </html>

11

1.10.1 Manejadores de eventos. onabort Este evento se produce cuando un usuario detiene la carga de una imagen, ya sea porque detiene la carga de la pgina o porque realiza una accin que la detiene, como por ejemplo irse de la pgina. Javascript 1.1 onblur Se desata un evento onblur cuando un elemento pierde el foco de la aplicacin. El foco de la aplicacin es el lugar donde est situado el cursor, por ejemplo puede estar situado sobre un campo de texto, una pgina, un botn o cualquier otro elemento. Javascript 1.0 onchange Se desata este evento cuando cambia el estado de un elemento de formulario, en ocasiones no se produce hasta que el usuario retira el foco de la aplicacin del elemento. Javascript 1.0 Javascript 1.0 onclick Se produce cuando se da una pulsacin o clic al botn del ratn sobre un elemento de la pgina, generalmente un botn o un enlace. Javascript 1.0 ondragdrop Se produce cuando un usuario suelta algo que haba arrastrado sobre la pgina web. Javascript 1.2 onerror Se produce cuando no se puede cargar un documento o una imagen y esta queda rota. Javascript 1.1 onfocus El evento onfocus es lo contrario de onblur. Se produce cuando un elemento de la pgina o la ventana ganan el foco de la aplicacin. Javascript 1.0 onkeydown Este evento se produce en el instante que un usuario presiona una tecla, independientemente que la suelte o no. Se produce en el momento de la pulsacin. Javascript 1.2

12

onkeypress Ocurre un evento onkeypress cuando el usuario deja pulsada una tecla un tiempo determinado. Antes de este evento se produce un onkeydown en el momento que se pulsa la tecla.. Javascript 1.2 onkeyup Se produce cuando el usuario deja de apretar una tecla. Se produce en el momento que se libera la tecla. Javascript 1.2 onload Este evento se desata cuando la pgina, o en Javascript 1.1 las imgenes, ha terminado de cargarse. Javascript 1.0 onmousedown Se produce el evento onmousedown cuando el usuario pulsa sobre un elemento de la pgina. onmousedown se produce en el momento de pulsar el botn, se suelte o no. Javascript 1.2 onmousemove Se produce cuando el ratn se mueve por la pgina. Javascript 1.2 onmouseout Se desata un evento onmuoseout cuando el puntero del ratn sale del rea ocupada por un elemento de la pgina. Javascript 1.1 onmouseover Este evento se desata cuando el puntero del ratn entra en el rea ocupada por un eolemento de la pgina. Javascript 1.0 onmouseup Este evento se produce en el momento que el usuario suelta el botn del ratn, que previamente haba pulsado. Javascript 1.2 onmove Evento que se ejecuta cuando se mueve la ventana del navegador, o un frame. Javascript 1.2

13

onresize Evento que se produce cuando se redimensiona la ventana del navegador, o el frame, en caso de que la pgina los tenga. Javascript 1.2 onreset Este evento est asociado a los formularios y se desata en el momento que un usuario hace clic en el botn de reset de un formulario. Javascript 1.1 onselect Se ejecuta cuando un usuario realiza una seleccin de un elemento de un formulario. Javascript 1.0 onsubmit Ocurre cuando el visitante presiona sobre el botn de enviar el formulario. Se ejecuta antes del envo propiamente dicho. Javascript 1.0 onunload Al abandonar una pgina, ya sea porque se pulse sobre un enlace que nos lleve a otra pgina o porque se cierre la ventana del navegador, se ejecuta el evento onunload. Javascript 1.0 1.10.2 La evolucin de los eventos En los primeros das de usar JavaScript, usamos gestores de eventos directamente en el elemento HTML, como estos:
<a href="http://www.opera.com/" onclick="alert('Hello')">Say hello</a>

El problema de este enfoque es que esto result en gestores de eventos repartidos por todo el cdigo, sin tener un control centralizado, y perdiendo la capacidad de los navegadores de almacenar en cach los ficheros externos de JavaScript. El siguiente paso en la evolucin de eventos fue manejar eventos desde dentro de un bloque JavaScript, por ejemplo:
<script type="text/javascript"> document.getElementById("my-link").onclick = waveToAudience; function waveToAudience() { alert("Waving like I've never waved before!"); } </script> <a id="my-link" href="http://www.opera.com/">My link</a>

14

Hay que hacer notar la limpieza del HTML del ltimo ejemplo. Esto se conoce generalmente como JavaScript discreto. El beneficio de esto, adems del cacheo de JavaScript y del control del cdigo, es la separacin del cdigo: se tienen todos los contenidos en un sitio, y el cdigo que permite la interaccin en otro sitio. Esto permite un enfoque ms accesible, cuando un enlace funciona perfectamente con JavaScript desactivado; esto es algo que piden por favor los motores de bsquedas. Eventos de Nivel 2 del rbol DOM Sobre noviembre del ao 2000, la especificacin Document Object Model (DOM) Level 2 Events fue lanzada desde W3C, ofreciendo una va ms detallada y granular de controlar eventos en una pgina web. La nueva va aplica eventos a elementos HTML ms o menos de la siguiente forma:
document.getElementById("my-link").addEventListener("click", myFunction, false);

El primer parmetro del mtodo addEventListener es el nombre del evento, y se debera notar que ya no se utiliza el prefijo on. El segundo parmetro hace referencia a la funcin que nosotros queremos que se llame cuando el evento ocurra. El tercer parmetro controla el tipo de invocacin del evento, por ejemplo, si el evento es en captura, o en propagacin. La contrapartida de addEventListener es removeEventListener, que elimina un evento asociado a un elemento HTML. El modelo de eventos de Internet Explorer, la excepcin Por desgracia, Internet Explorer est muy lejos de implementar eventos de nivel 2 del rbol DOM, y como contrapartida tiene su propio mtodo attachEvent. Que queda ms o menos como sigue:
document.getElementById("my-link").attachEvent("onclick", myFunction);

Hay que hacer notar que attachEvent todava utiliza el prefijo on antes del nombre del evento actual, y que no incluye soporte para decidir si el evento es en captura o en propagacin. El contrario de attachEvent es detachEvent, para eliminar un evento asociado a un elemento HTML.

15

Validacin de nmero de caracteres con eventos ejemplo10.html

<html> <head> <title>Eventos</title> <script type="text/javascript"> function addEvent(obj, evType, fn) { //Funcin para aadir eventos a cualquier objeto (objeto, evento, funcin) if (obj.addEventListener) { //Si obj.addEventListener est definido no es IE, se puede usar addEventListener obj.addEventListener(evType, fn, false); return true; } else if (obj.attachEvent) { //si obj.attachEvent est definido, se trata de IE y se utiliza attachEventvar r = obj.attachEvent("on" + evType, fn); return r; } else { return false; } } var MAX_CHAR = 10; //Mximo de caracteres permitidos var contenido = ""; addEvent(window, 'load', function () { //En el evento load de la pgina function valida(event) { if (event.target.value.length <= MAX_CHAR) contenido = event.target.value; else event.target.value = contenido; var lbl = document.getElementById("label_caracteres"); lbl.innerHTML = "Caracteres " + event.target.value.length; lbl.style.color=event.target.value.length >= MAX_CHAR? "#F00": "#000"; } var txt = document.getElementById("texto"); addEvent(txt, "keyup", valida); }); </script> </head> <body>

<form action="#" method="post"> <label for="texto">Texto:</label> <textarea id="texto" cols="40" rows="5" name="texto"></textarea> <label id="label_caracteres">Caracteres:</label> </form> </body> </html>

16

2.- Manejo de JQuery.

2.1 Primeros pasos
JQuery es una librera de JavaScript que ofrece una serie de funciones que ayudan a simplificar el cdigoPara insertar la librera JQuery en nuestro cdigo HTML se debe hacer en la etiqueta src de la siguiente forma.
<script src="jquery-1.8.0.js" type="text/javascript"></script>

No es posible interactuar de forma segura con el contenido de una pgina hasta que el documento no se encuentre preparado para su manipulacin. jQuery permite detectar dicho estado a travs de la declaracin $(document).on(ready) de forma tal que el bloque se ejecutar slo una vez que la pgina est disponible.
$(document).on("ready", function () { //Cdigo JQuery });

Ejemplo2_1.html
<html> <head> <title></title> <script src="jquery-1.8.0.js" ></script> <script> $(document).on("ready", function () { $("#prueba").text("<strong>Hola mundo desde id prueba</strong>"); $(".prueba").html("<strong>Hola mundo desde clase prueba</strong>"); }); </script> </head> <body> <div id="prueba"></div> <div class="prueba"></div> </body> </html>

Ntese que al utilizar la funcin text() se imprime el cdigo html literal, mientras que la funcin html() interpreta como tal las etiquetas <strong></strong>.

2.2 Selectores
El concepto ms bsico de jQuery es el de seleccionar algunos elementos y realizar acciones con ellos. La biblioteca soporta gran parte de los selectores CSS3 y varios ms no estandarizados. En http://api.jquery.com/category/selectors/ se puede encontrar una completa referencia sobre los selectores de la biblioteca. A continuacin se muestran algunas tcnicas comunes para la seleccin de elementos:

17

Seleccin de elementos en base a su ID

$('#myId'); // notar que los IDs deben ser nicos por pgina

Seleccin de elementos en base al nombre de clase

$('div.myClass'); // si se especifica el tipo de elemento, // se mejora el rendimiento de la seleccin

Seleccin de elementos por su atributo

$('input[name=first_name]'); // puede ser muy lento

Seleccin de elementos en forma de selector CSS

$('#contents ul.people li');

Pseudo-selectores
$('a.external:first'); $('tr:odd'); $('#myForm :input'); // selecciona el primer elemento <a> con clase external // selecciona todos los elementos <tr> // impares de una tabla // selecciona todos los elementos del tipo input // dentro del formulario #myForm

18

Modificando tablas (ejemplo2_2.html)

<html> <head> <title>Selectores JQuery</title> <script src="jquery-1.8.0.js" ></script> <script> $(document).on("ready", function () { var css_odd = { background: "#337", color: "#fff" } $("#tabla tr:odd").css(css_odd); //pasando un objeto literal $("#tabla tr:even").css({background: "#e33", color: "fff"});//valores directos }); </script> </head> <body> <table id="tabla" border="1"> <thead> <tr> <td>Uno</td> <td>Dos</td> <td>Tres</td> <td>Cuatro</td> <td>Cinco</td> <td>Seis</td> </tr> </thead> <tr> <td>aaaa</td> <td>bbbb</td> <td>cccc</td> <td>dddd</td> <td>eeee</td> <td>ffff</td> </tr> <tr> <td>gggg</td> <td>hhhh</td> <td>iiii</td> <td>jjjj</td> <td>kkkk</td> <td>llll</td> </tr> <tr> <td>mmmm</td> <td>nnnn</td> <td></td> <td>oooo</td> <td>pppp</td> <td>qqqq</td> </tr> <tr> <td>aaaa</td> <td>bbbb</td> <td>cccc</td>

19

<td>dddd</td> <td>eeee</td> <td>ffff</td> </tr> <tr> <td>gggg</td> <td>hhhh</td> <td>iiii</td> <td>jjjj</td> <td>kkkk</td> <td>llll</td> </tr> <tr> <td>mmmm</td> <td>nnnn</td> <td></td> <td>oooo</td> <td>pppp</td> <td>qqqq</td> </tr> </table> </body> </html>

2.3 Eventos en JQuery.

jQuery ofrece mtodos para la mayora de los eventos entre ellos $.fn.click, $.fn.focus, $.fn.blur, $.fn.change, etc. Estos ltimos son formas reducidas del mtodo $.fn.on a partir de la versin 1.7. El mtodo $.fn.on es til para vincular la misma funcin a mltiples eventos, cuando se desea proveer informacin al controlador de evento, cuando se est trabajando con eventos personalizados o cuando se desea pasar un objeto a mltiples eventos y controladores. Vincular un evento utilizando un mtodo reducido
$('p').click(function () { console.log('click'); });

Vincular un evento utilizando el mtodo $.fn.on

$('p').on('click', function () { console.log('click'); });

Cambiar controladores utilizando el mtodo $.fn.one

$('p').one('click', function () { console.log('Se clicke al elemento por primera vez'); $(this).click(function () { console.log('Se ha clickeado nuevamente'); }); });

Desvincular todos los controladores del evento click en una seleccin Para desvincular un controlador de evento, se puede utilizar el mtodo $.fn.off pasndole el tipo de evento a desconectar.
$('p').off('click');

20

Si se le pasa como segundo parmetro una funcin nombrada es posible especificar que dicha funcin ser desconectada nicamente.
var foo = function () { console.log('foo'); }; var bar = function () { console.log('bar'); }; $('p').on('click', foo).on('click', bar); //Se vinculan dos eventos en cadena $('p').off('click', bar); // foo est viculado an al evento click

2.3.1 El objeto del evento La funcin controladora de eventos recibe un objeto del evento, el cual contiene varios mtodos y propiedades. El objeto es comnmente utilizado para prevenir la accin predeterminada del evento a travs del mtodo preventDefault. Sin embargo, tambin contiene varias propiedades y mtodos tiles: pageX, pageY La posicin del puntero del ratn en el momento que el evento ocurri, relativo a las zonas superiores e izquierda de la pgina. type El tipo de evento (por ejemplo click). which El botn o tecla presionada. data Alguna informacin pasada cuando el evento es ejecutado. target El elemento DOM que inicializ el evento. preventDefault() Cancela la accin predeterminada del evento (por ejemplo: seguir un enlace). stopPropagation() Detiene la propagacin del evento sobre otros elementos.

21

(Ejemplo2_3.html)
<html> <head> <title>Eventos JQuery</title> <script src="jquery-1.8.0.js" ></script> <script> $(document).on("ready", function () { $("li a").click(function (event) { event.preventDefault(); alert("Enlace hacia: " + $(this).attr("href")); }); $("#caja").on("mouseover", function () { var incremento = true; if ($(this).position().left >= 500) incremento = false; else if ($(this).position().left <= 50) incremento = true; if (incremento) $(this).animate({ left: "+=200px" }, 500); else $(this).animate({ left: "-=200px" }, 500); }); $("#caja").click(function () { $(this).css({ background: "url('face2.png')" }); }); $("#ch").change(function () { if ($(this).attr("checked")) $("#etiqueta").text("Encendido"); else $("#etiqueta").text("Apagado"); }); }); </script> <style> #caja { width: 49px; height: 49px; background: url('face.png'); position: fixed; top: 100px; left: 0px; } </style> </head> <body> <ul> <li><a href="ejemplo2_1.html">Ir a ejemplo 1</a></li> <li><a href="ejemplo2_2.html">Ir a ejemplo 2</a></li> </ul> <div id="caja"></div> <input id="ch" type="checkbox" value="1"/> <span id="etiqueta">Apagado</span> </body> </html>

22

3.- Serializacin de formularios.

La serializacin de formularios nos permite recolectar todos los valores seleccionados de un formulario, en JQuery existe la funcin serialize() que se encarga de regresarnos una cadena con formato URL, de este modo podemos manipular o enviar informacin. Esta funcin es especialmente til en el uso de Ajax y formularios. (ejemplo3_1.html)
<html> <head> <title>Eventos JQuery</title> <script src="jquery-1.8.0.js" ></script> <script type="text/javascript"> $(document).ready(function () { $("#formulario").on("submit",function () { var cadena = $(this).serialize(); alert(cadena); return false; }); }); </script> </head> <body> <form action="#" id="formulario"> <label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre"/><br /> <label for="email">E-mail:</label> <input type="text" name="email" id="email"/><br /> <label for="asunto">Asunto:</label> <input type="text" name="asunto" id="asunto"/><br /> <label for="msg">Mensaje:</label> <textarea name="msg" id="msg" cols="50" rows="10" tabindex="4"></textarea><br /> <div><select name="select"> <option value="5" selected="selected">5</option> <option value="6">6</option> <option value="7">7</option> </select></div> <div> <input type="checkbox" name="check" value="8" id="f" /> </div> <input type="submit" value="Enviar" /> </form> </body> </html>

23

4.- Utilizacin de JSON.

JSON es el acrnimo de JavaScript Object Notation. JSON es un formato alternativo de envo y recepcin de datos, es decir remplaza a XML o el envo de texto plano. Este formato de datos es ms liviano que XML. El cdigo es ms sencillo ya que utiliza el cdigo JavaScript como modelo de datos.

Tenemos que repasar un poco como se definen los array literales y objetos literales en JavaScript, ya que sern las estructuras para la transmisin de datos:
var usuario=['juan',26];

Como vemos los elementos de un array literal se encierran entre corchetes y los valores contenidos van separados por coma. Cuando definimos un array literal no le indicamos a cada elemento de que tipo se trata, podemos almacenar cadenas (entre comillas), nmeros, valores lgicos (true,false) y el valor null. Para acceder a los elementos de un array literal lo hacemos por su nombre y entre corchetes indicamos que elementos queremos acceder:
alert(usuario[0]); //Imprimimos el primer elemento del array alert(usuario[1]); //Imprimimos el segundo elemento del array

Recordemos como definimos los objetos literales en JavaScript:

var persona={ 'nombre':'juan', 'clave':'xyz', 'edad':26 };

Los objetos literales se definen por medio de pares "nombre":"valor" Todo objeto literal tiene un nombre, en el ejemplo le llam persona. Un objeto literal contiene una serie de propiedades con sus respectivos valores. Todas las propiedades del objetos se encuentran encerradas entre llaves. Luego cada propiedad y valor se las separa por dos puntos. Y por ltimo cada propiedad se las separa de las otras propiedades por medio de la coma.

24

Para acceder a las propiedades del objeto literal lo podemos hacer de dos formas:
alert(persona.nombre); objeto persona. //Imprime el valor de la propiedad nombre del

La segunda forma es indicando la propiedad entre corchetes:

alert(persona['nombre']);

Luego se pueden combinar objetos literales y array literales:

var persona={ 'nombre':'juan', 'edad':22, 'estudios':['primario','secundario'] };

Como podemos ver podemos crear estructuras de datos complejas combinando objetos literales y array literales. Luego para acceder a los distintos elementos tenemos:
alert(persona.nombre); alert(persona.estudios[0]); alert(persona.estudios[1]);

La sintaxis de JSON difiere levemente de lo visto anteriormente:

{ 'nombre':'juan', 'edad':22, 'estudios':['primaria','secundaria'] }

Como podemos ver en la sintaxis JSON no aparecen variables, sino directamente indicamos entre llaves las propiedades y sus valores. Tambin hemos eliminado el punto y coma luego de la llave final. El resto es igual. Ahora veamos la diferencia entre JSON y XML utilizando este ejemplo: XML:
<persona> <nombre>juan</nombre> <edad>22</edad> <estudios> <estudio>primaria</estudio> <estudio>secundaria</estudio> </estudios> </persona>

25

Y como vimos en JSON:

{ 'nombre':'juan', 'edad':22, 'estudios':['primaria','secundaria'] }

Podemos ver que es mucho ms directa la definicin de esta estructura (de todos modos cuando la estructura a representar es muy compleja XML sigue siendo la opcin principal) Como podemos ver si tenemos que transmitir estas estructuras por internet la notacin JSON es ms liviana. Otra ventaja es como recuperamos los datos en el navegador, como vimos si se trata de un archivo XML llamamos al mtodo requestXML y luego accedemos por medio del DOM En cambio con JSON al llegar el archivo procedemos a generar una variable en JavaScript que recree el objeto literal, esto se puede hacer mediante la funcin eval, aunque posteriormente veremos la recuperacin de datos con JQuery y ajax:
var persona=eval('(' + conexion1.responseText + ')');

5.-Introduccin a Ajax.
5.1 Funcin $.load.
La funcin load se utiliza principalmente para cargar elementos html sobre el documento actual, de esta forma se puede hacer cambios dinmicos de contenido sin tener que recargar el documento. Ejemplo_1
$("#contenido").load("pagina.html");

5.2 Mtodo $.ajaxStart.

La funcin $.ajaxStart se encarga de realizar alguna funcin previamente a la peticin Ajax, de esta forma se puede indicar al usuario el inicio que debe esperar.
function presionEnlace() { var pagina = $(this).attr("href"); var x = $("#detalles"); x.ajaxStart(inicioEnvio); //Se define la funcin de inicio para Ajax x.load(pagina); return false; } function inicioEnvio() { var x = $("#detalles"); x.html('<img src="./cargando.gif">'); }

26

5.3 Mtodos $.get y $.post

$.get y $.post se utilizan para indicar peticiones POST o GET al servidor.
$("#enviar").click(function (event) { event.preventDefault(); var n = $("#numero").val(); $.get("pagina1.php", { numero: n }, llegadaDatos); }); function llegadaDatos(datos) { $("#resultados").text(datos); }

5.4 Mtodo $.getJSON

Cuando se sabe que los datos sern recuperados en formato JSON se puede utilizar est funcin y obtener los datos de una forma ms amigable.
$("#enviar").click(function (event) { event.preventDefault(); var n = $("#id").val(); $.getJSON("pagina1.php", { id: n }, llegadaDatos); }); function llegadaDatos(datos) { $("#resultados").html("Nombre: " + datos.nombre + "<br>" + "Apellido: " + datos.apellido + "<br>" + "Direccion: " + datos.direccion); }

5.5 Mtodo $.ajax

Toda las funciones de Ajax vistas anteriormente provienen de esta funcin, $.ajax permite indicar mltiples prametros de configuracin de una manera ms avanzada.
$("#enviar").click(function (event) { event.preventDefault(); var datos = $("#miformulario").serialize(); $.ajax({ async: true, type: "POST", dataType: "html", contentType: "application/x-www-form-urlencoded", url: "pagina1.php", data: datos, beforeSend: inicioEnvio, success: llegadaDatos, timeout: 4000, error: problemas }); });

27