Introducción A JavaScript
Introducción A JavaScript
JavaScript
JQuery y Ajax
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>
+ + + +
v2); //se obtiene 3 v3); //se obtiene 13 Number(v3)); //se obtiene 4 +v3); //se obtiene 4
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; }
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.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.
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)
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.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() }
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.
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
<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
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
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
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>
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
23
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
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
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]);
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
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");
26
27