Está en la página 1de 56

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV 1 - Que es el jQuery?

El jQuery es una librera de JavaScript para acceder a los objetos del DOM (Document Object Model - Modelo de Objetos del Documento: interfa de pro!ramaci"n de aplicaciones# de un modo simplificado$ El sitio oficial de la librera lo puedes acceder desde a%u donde puedes descar!ar el arc&ivo para tus proyectos' adem(s de poder enterarte de las mejoras constantes %ue se le &acen$ El autor de esta librera es Jo&n )esi! %ue adem(s trabaja para Mo illa *orporation$ +as aplicaciones en internet son cada ve m(s complejas' ya %ue incorporan efectos visuales' dra! and drop' auto-completar' animaciones etc$ el desarrollar todos estos conceptos desde cero puede resultar complicado sobretodo si tenemos %ue presentar la soluci"n con muy poco tiempo' en este tipo de situaciones el empleo de libreras como el jQuery nos facilitan el desarrollo de la aplicaci"n$ Otra ventaja paralela es despreocuparnos cuando codificamos en la compatibilidad de nave!adores' ya %ue la librera resolver( esto$ ,ara utili ar la librera como dijimos debemos descar!arla del sitio oficial y en cada p(!ina %ue lo re%uiera a!re!ar: <script type="text/javascript" src="jquery.js"></script> Del sitio oficial de jQuery descar!aremos la versi"n descomprimida %ue ocupa alrededor de -. /b (es el arc&ivo j%uery$js# y cuando subamos nuestro sitio es recomendable descar!ar la versi"n comprimida %ue tiene un peso de 0. /b$ +a librera jQuery en resumen nos aporta las si!uientes ventajas:

1os a&orra muc&as lneas de c"di!o$ 1os &ace transparente el soporte de nuestra aplicaci"n para los nave!adores principales$ 1os provee de un mecanismo para la captura de eventos$ ,rovee un conjunto de funciones para animar el contenido de la p(!ina en forma muy sencilla$ 2nte!ra funcionalidades para trabajar con 3J34$

2 - Nueva manera de programar JavaScript con jQuery. *uando uno utili a una librera debe adaptarse a sus mecanismos de uso' el tratar de llevar los conocimientos %ue tenemos sobre un tema y aplicarlos a la fuer a en dic&a librera puede ser frustrante$ +o m(s adecuado es ir viendo cual es la mec(nica de trabajar con dic&a librera con problemas muy sencillos e ir complic(ndolo a medida %ue entendemos su funcionamiento$ Dispon!amos el problema trivial de capturar el evento de un control 56M+ de tipo button' lo desarrollaremos utili ando la metodolo!a tradicional accediendo directamente a las funciones del DOM y lue!o empleando la librera jQuery: pa!ina7$&tml <html> <head> <title>Problema</title> </head> <body> <h2>Captura del evento click de un control HTML de tipo button.</h2> <a href="pagina2.html">Mtodo tradicional con las funciones del DOM </a><br> <a href="pagina3.html">Utilizando la librera jQuery</a><br> </body> </html> pa!ina0$&tml <html> <head> <title>Problema</title> 1

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV <script type="text/javascript" src="funciones1.js"></script> </head> <body> <input type="button" id="boton1" value="presioname"> </body> </html> funciones7$js addEvent(window,'load',inicializarEventos,false); function inicializarEventos() { var boton1=document.getElementById('boton1'); addEvent(boton1,'click',presionBoton,false); } function presionBoton(e) { alert('se presion el botn'); } function addEvent(elemento,nomevento,funcion,captura) { if (elemento.attachEvent) { elemento.attachEvent('on'+nomevento,funcion); return true; } else if (elemento.addEventListener) { elemento.addEventListener(nomevento,funcion,captura); return true; } else return false; } 6odo lo anterior no debera &aber problemas de entendimiento' en caso de estar olvidado del manejo del DOM sera conveniente refrescar los conceptos en el tutorial de D56M+8a$ pa!ina9$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones2.js"></script> </head> <body> <input type="button" id="boton1" value="presioname"> </body> </html> +o primero %ue tenemos en cuenta es %ue debemos importar la librera: :script type;<te=t>javascript< src;<$$>j%uery$js<?:>script? *omo se encuentra en la carpeta superior a donde se encuentra el arc&ivo pa!ina9$&tml ponemos src;<$$>j%uery$js<' si estuviera en la misma carpeta disponemos src;<j%uery$js<' es decir directamente el nombre de la librera$ Siempre debemos disponer esta inclusi"n de la librera antes de incluir los otros arc&ivos @$js %ue utili an esta librera' es por eso el orden: <script type="text/javascript" src="jquery.js"></script> 2

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV <script type="text/javascript" src="funciones2.js"></script> funciones0$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#boton1"); x.click(presionBoton) } function presionBoton() { alert("Se presion el botn"); } En este arc&ivo (funciones0$js# comien a nuestro estudio de la librera j%uery +a funci"n principal de esta librera se llama A$ 3 la funci"n A le podemos pasar distintos valores como veremos (en la primer llamada le pasamos la referencia del objeto document del DOM y en la se!unda el id del control button#: x=$(document); ... x=$(" !oton""); Esta funci"n nos devuelve un objeto de tipo jQuery$ El primer mBtodo %ue nos interesa de esta clase es el ready: var x; x=$(document); x.ready(inicia#i$ar%ventos); El mBtodo ready tiene como par(metro un nombre de funci"n$ Esta funci"n se ejecutar( cuando todos los elementos de la p(!ina estBn car!ados$ Es importante notar %ue solo pasamos el nombre de la funci"n y no disponemos los parBntesis abiertos y cerrados al final$ El c"di!o de esta funci"n: function inicia#i$ar%ventos() & var x; x=$(" !oton""); x.c#ic'(presion(oton) ) Ctili amos nuevamente la funci"n A para crear un objeto de la clase jQuery pero a&ora asoci(ndolo al bot"n (esto lo &acemos pasando el id del control button precediBndolo por el caracter D y encerrado entre parBntesis$ Einalmente llamamos al mBtodo clicF pas(ndo como par(metro el nombre de la funci"n %ue se ejecutar( al presionar dic&o bot"n$ Ejercicio 0 Disponer dos p(rrafos$ *apturar el evento clicF solo del primero utili ando la librera jQuery$ 3 - Seleccin de un elemento del documento mediante el id. +a sinta=is para seleccionar un elemento particular de la p(!ina mediante la propiedad id es: $(" nom!re de# id") 3

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV *onfeccionaremos un problema para ver como obtenemos la referencia a elementos 56M+ particulares mediante el id$ Problema:*onfeccionar una p(!ina %ue muestre dos ttulos de primer nivel' al ser presionados cambiar el color de la fuente' fondo y la fuente del te=to$ pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <h1 id="titulo1">Primer ttulo</h1> <h1 id="titulo2">Segundo ttulo</h1> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#titulo1"); x.click(presionTitulo1) x=$("#titulo2"); x.click(presionTitulo2) } function presionTitulo1() { var x; x=$("#titulo1"); x.css("color","#ff0000"); x.css("background-color","#ffff00"); x.css("font-family","Courier"); } function presionTitulo2() { var x; x=$("#titulo2"); x.css("color","#ffff00"); x.css("background-color","#ff0000"); x.css("font-family","Arial"); } *omo va ser costumbre siempre %ue trabajemos con esta librera primero creamos un objeto j%uery a partir de la referencia a GdocumentG y lue!o llamamos al mBtodo ready indic(ndole el nombre de la funci"n %ue debe ejecutarse lue!o de !enerarse el (rbol de elementos 56M+ para la p(!ina: var x; x=$(document); x.ready(inicia#i$ar%ventos); +a funci"n iniciali arEventos se ejecuta una ve %ue se car!" la p(!ina y est(n creados todos los elementos 56M+' en esta funci"n mediante A accedemos a travBs del id a los elementos &7 respectivos' a casa uno le asi!namos al evento clicF una funci"n distinta %ue se disparar( cuando presionemos con el mouse: function inicia#i$ar%ventos() & var x; x=$(" titu#o""); 4

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV x.c#ic'(presion*itu#o") x=$(" titu#o2"); x.c#ic'(presion*itu#o2)

Es importante notar %ue cuando obtenemos la referencia de un elemento por medio del id se le antecede el caracter D al nombre del id: x=$(" titu#o""); ... x=$(" titu#o2"); +ue!o las dos funciones %ue se ejecutan al presionar los ttulos: function presion*itu#o"() & var x; x=$(" titu#o""); x.css("co#or"+" ff,,,,"); x.css("!ac'-round.co#or"+" ffff,,"); x.css("font.fami#y"+"/ourier"); ) function presion*itu#o2() & var x; x=$(" titu#o2"); x.css("co#or"+" ffff,,"); x.css("!ac'-round.co#or"+" ff,,,,"); x.css("font.fami#y"+"0ria#"); ) 5asta a&ora &emos presentado los si!uientes mBtodos %ue tiene j%uery: ready c#ic' El tercer mBtodo nos permite modificar una propiedad de la &oja de estilo de un elemento 56M+: var x; x=$(" titu#o""); x.css("co#or"+" ff,,,,"); Cna ve %ue &emos obtenido la referencia a un elemento 56M+ llamamos al mBtodo css %ue tiene dos par(metros: el primero indica el nombre de la propiedad y el se!undo el valor a asi!narle$ ,odemos ver las otras dos asi!naciones: x.css("!ac'-round.co#or"+" ffff,,"); x.css("font.fami#y"+"/ourier"); *omo podemos ver es muy f(cil acceder al estilo de un elemento 56M+ para actuali arlo en forma din(mica lue!o %ue la p(!ina fue car!ada$ Ejercicio 9 *onfeccionar una p(!ina %ue muestre una tabla con dos filas cambiar el color de fondo cuando sea presionada con el mouse$ 4 - Seleccin de elementos por el tipo de elementos. +a sinta=is para tener la referencia de todos los elementos de cierto tipo (a' p' &7' etc$#: $("nom!re de# e#emento") Es decir es casi i!ual %ue obtener la referencia de un elemento particular mediante el id' solo difiere en %ue no le antecedemos el caracter A$

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV ,odemos con esto definir funciones comunes a un conjunto de elementos$ Problema*onfeccionar una tabla con H filas$ 5acer %ue cambie de color la fila %ue se presiona con el mouse$ Obtener la referencia a todos los elementos GtrG$ pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <table border="1"> <tr> <td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</td> </tr> <tr> <td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td> </tr> <tr> <td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td> </tr> <tr> <td>4444444444</td><td>4444444444</td><td>4444444444</td><td>4444444444</td> </tr> <tr> <td>5555555555</td><td>5555555555</td><td>5555555555</td><td>5555555555</td> </tr> </table> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("tr"); x.click(presionFila); } function presionFila() { var x; x=$(this); x.css("background-color","eeeeee"); } *on la si!uiente sinta=is obtenemos la referencia a todos los elementos 56M+ de tipo GtrG: var x; x=$("tr"); x.c#ic'(presion1i#a); y a todos ellos los enla amos con la funci"n presionEila *uando se presiona cual%uiera de las filas de la tabla se ejecuta la si!uiente funci"n: function presion1i#a() & var x; x=$(t2is); !

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV x.css("!ac'-round.co#or"+"eeeeee");

,ara obtener la referencia de %ue elemento en particular dispar" el evento podemos &acerlo de la si!uiente manera: x=$(t2is); y a partir de esta referencia llamar al mBtodo css$ Ejercicio I Mostrar una lista no ordenada con I elementos GliG$ Ocultar el %ue se presiona$ ,ara ocultar un elemento jQuery tiene un mBtodo llamado &ide(#$ - Seleccin de elementos utili!ando los selectores "SS. Cna de las caractersticas m(s interesantes de jQuery es poder obtener la referencia de elementos del DOM utili ando para ello selectores de *SS (Si!nifica %ue el manejo de 5ojas de estilo nos facilita las cosas# El primer problema %ue dispondremos ser( ocultar todos los list item de una lista desordenada' dispondremos dos listas en la p(!ina por lo %ue conocemos &asta a&ora no nos sirve indicar: x=$("#i"); ya %ue esto nos selecciona todos los elementos de tipo li de la p(!ina y nosotros %ueremos solo los de una de las listas$ pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <input type="button" value="ocultar item primer lista" id="boton1"> <h2>Lista 1</h2> <ul id="lista1"> <li>Opcin nmero 1</li> <li>Opcin nmero 2</li> <li>Opcin nmero 3</li> <li>Opcin nmero 4</li> </ul> <h2>Lista 2</h2> <ul #id="lista3"> <li>Opcin nmero 1</li> <li>Opcin nmero 2</li> <li>Opcin nmero 3</li> <li>Opcin nmero 4</li> </ul> </body> </html> *ada lista tiene definido su atributo id$ funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; "

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV x=$("#boton1"); x.click(ocultarItem); } function ocultarItem() { var x; x=$("#lista1 li"); x.hide(); } En la funci"n iniciali arEventos obtenemos la referencia del bot"n mediante su id y llamamos al mBtodo clicF: function inicia#i$ar%ventos() & var x; x=$(" !oton""); x.c#ic'(ocu#tar3tem); ) 3&ora lo nuevo es obtener la referencia de todos los elementos li %ue pertenecen a la primer lista: var x; x=$(" #ista" #i"); x.2ide(); ,asamos a la funci"n A el selector *SS %ue accede a todos los elementos de tipo li contenidos en Dlista7$ 6odas las re!las de *SS est(n disponibles para seleccionar los elementos del DOM$ Ejercicio H *onfeccionar una p(!ina %ue muestre dos tablas con tres filas cada una$ *ambiar el color de fondo de cada fila de la primer tabla cuando sea presionada con el mouse$ # - Seleccin de elementos utili!ando las clases "SS de$inidas. )ecordemos %ue definimos clases en *SS cuando una re!la de estilo puede ser i!ual para un conjunto de marcas 56M+$ Mediante este nombre de clase podemos podemos acceder a todos los elementos utili ando la funci"n A: x=$(".nom!re de c#ase"); problema:Mostrar una serie de len!uajes de pro!ramaci"n y aplicar un estilo resaltado para a%uellos len!uajes %ue son orientados a objetos$ *uando se presione un bot"n a!re!ar la propiedad bacF!round-color a todos los elementos de dic&a clase$ pa!ina7$&tml <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <p>Cuales de los siguientes lenguajes son orientados a objetos: <span class="resaltado">Java</span>, VB6, <span class="resaltado">C++</span>,C, <span class="resaltado">C#</span>, Cobol ?</p> <input type="button" id="boton1" value="ver resultado"> </body> </html> funciones$js #

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#boton1"); x.click(resaltar); } function resaltar() { var x; x=$(".resaltado"); x.css("background-color","ffff00"); } Archivo: estilos.css .resaltado{ color:#000000; } El c"di!o nuevo es: x=$(".resa#tado"); x.css("!ac'-round.co#or"+"ffff,,"); ,rimero !eneramos un objeto jQuery %ue !uarda la referencia a todos los elementos %ue tienen definida la clase $resalatado y lue!o fijamos como color de fondo el amarillo a dic&os elementos$ Ejercicio Disponer un ttulo de noticia y se!uidamente la descripci"n de la noticia (encerrarlo en un div con un nombre de clase#' repetir esto para tres noticias$ 3!re!ar tres botones %ue rescaten el nombre de la clase para la descripci"n de la noticia y cambien su tamaJo de fuente$ % - &'todos te(t)*+ te(t)valor* ,ara saber el contenido de un elemento el objeto jQuery cuenta con un mBtodo llamado te=t(#' por ejemplo: var x=$(" parrafo""); lue!o si &acemos =$te=t(# obtenemos el contenido del p(rrafo con id i!ual a parrafo7$ +ue!o si %ueremos cambiar el te=to del p(rrafo deberamos disponer: var x=$(" parrafo""); x.text("%ste es e# texto nuevo"); ,ero &ay %ue tener muc&o cuidado cuando utili amos jQuery ya %ue podemos cambiar el contenido de muc&os elementos con una sola llamada al mBtodo te=t' por ejemplo: var x=$("p"); x.text("%ste texto aparece en todos #os p4rrafos de# documento"); El c"di!o anterior crea un objeto jQuery con la referencia a todos los p(rrafos contenidos en el documento$ +ue!o si llamamos al mBtodo te=t envi(ndole una cadena' esta aparecer( en todo el documento rempla ando el contenido de los p(rrafos actuales$ El si!uiente problema muestra el acceso y modificaci"n unitaria y mKltiple de contenidos de elementos$ <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> $

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV <script language="javascript" src="funciones.js" type="text/javascript"></script> </head> <body> <input type="button" value="Obtener el texto contenido en un prrafo" id="boton1"><br> <input type="button" value="Modificar el texto de un prrafo" id="boton2"><br> <input type="button" value="Modificar el texto de los elementos td de una tabla" id="boton3"><br> <p id="parrafo1">Texto del primer prrafo</p> <table border="1"> <tr> <td>celda 1,1</td><td>celda 1,2</td> <td>celda 2,1</td><td>celda 2,2</td> </tr> </table> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x=$("#boton1"); x.click(extraerTexto); x=$("#boton2"); x.click(modificarTexto); x=$("#boton3"); x.click(modificarDatosTabla); } function extraerTexto() { var x=$("#parrafo1"); alert(x.text()); } function modificarTexto() { var x=$("#parrafo1"); x.text("Nuevo texto del prrafo"); } function modificarDatosTabla() { var x=$("td"); x.text("texto nuevo"); } *omo vemos esta p(!ina tiene tres botones' al presionarse el primero se dispara la funci"n: function extraer*exto() & var x=$(" parrafo""); a#ert(x.text()); ) Obtenemos la referencia al p(rrafo mediante su id (recordemos %ue en una p(!ina todos los valores de los id son distintos#' lue!o e=traemos el contenido mediante el mBtodo te=t(# y lo mostramos en un alert$ +a se!unda funci"n cambia el contenido del p(rrafo: function modificar*exto() & var x=$(" parrafo""); 1%

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV x.text("5uevo texto de# p4rrafo");

Obtenemos la referencia del p(rrafo mediante su id y llamamos al mBtodo te=t envi(ndole el nuevo strin! a mostrar$ ,or Kltimo la funci"n: function modificar6atos*a!#a() & var x=$("td"); x.text("texto nuevo"); ) *rea un objeto de la clase jQuery con la referencia a todos los elementos td del documento (es decir los td de todas las tablas# y posteriormente mediante el mBtodo te=t modifica el contenido de todos ellos (todos los td del documento se cambian por el strin! <nuevo te=to<# Ejercicio L *rear una p(!ina %ue conten!a dos tablas de 9 filas y 9 columnas cada una con un te=to en cada casillero$ +ue!o al presionar un bot"n cambiar por por la cadena <-< solo el contenido de la primer tabla' dejando intacto el de la se!unda$ , - &'todos attr)nom-re de propiedad*+ attr)nom-re de propiedad+valor* y remove.ttr)nom-re de propiedad* Estos mBtodos nos permiten a!re!ar propiedades a un elemento 56M+ y recuperar el valor de una propiedad$ ,ara recuperar el valor de una propiedad (si &ay muc&os elementos %ue recupera la funci"n A' solo retorna la propiedad del primero#: $(e#emento).attr(nom!re de propiedad) ,ara fijar el valor de una propiedad (si &ay muc&os elementos %ue recupera la funci"n A' se iniciali an para todos#: $(e#emento).attr(nom!re de propiedad+va#or) ,ara eliminar una propiedad de un elemento o conjunto de elementos tenemos: $(e#emento).remove0ttr(nom!re de #a propiedad) Problema:Definir una tabla sin el atributo border$ 3l presionar un bot"n aJadirle la propiedad border con el valor 7$ Si se presiona otro bot"n recuperar y mostrar el valor del atributo border y por Kltimo si se presiona otro bot"n eliminar la propiedad border$ pa!ina7$&tml <2tm#> <2ead> <tit#e>7ro!#ema</tit#e> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </2ead> <!ody> <input type="!utton" id="!oton"" va#ue="08adir propiedad !order"><!r> <input type="!utton" id="!oton2" va#ue="9ecuperar va#or de #a propiedad !order"><!r> <input type="!utton" id="!oton:" va#ue="%#iminar #a propiedad !order"> <ta!#e id="ta!#a""> <tr> <td>""""""""""</td><td>""""""""""</td><td>""""""""""</td><td>""""""""""</td> </tr> <tr> 11

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV <td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td> </tr> <tr> <td>::::::::::</td><td>::::::::::</td><td>::::::::::</td><td>::::::::::</td> </tr> </ta!#e> </!ody> </2tm#> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x=$("#boton1"); x.click(agregarPropiedadBorder); x=$("#boton2"); x.click(recuperarPropiedadBorder); x=$("#boton3"); x.click(eliminarPropiedadBorder); } function agregarPropiedadBorder() { var x=$("#tabla1"); x.attr("border","1"); } function recuperarPropiedadBorder() { var x=$("#tabla1"); if (x.attr("border")!=undefined) alert(x.attr("border")); else alert("No est definida la propiedad border en la tabla"); } function eliminarPropiedadBorder() { var x=$("#tabla1"); x.removeAttr("border"); } *uando se presiona el primer bot"n: function a-re-ar7ropiedad(order() & var x=$(" ta!#a""); x.attr("!order"+"""); ) Obtenemos la referencia de la tabla mediante su id y llamamos al mBtodo attr pasando como primer par(metro el nombre de la propiedad a a!re!ar y como se!undo par(metro el valor de la propiedad$ *uando se presiona el se!undo bot"n: function recuperar7ropiedad(order() & var x=$(" ta!#a""); if (x.attr("!order");=undefined) a#ert(x.attr("!order")); e#se a#ert("5o est4 definida #a propiedad !order en #a ta!#a"); )

12

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV +lamamos al mBtodo attr envi(ndole como par(metro el nombre de la propiedad %ue %ueremos rescatar$ Si retorna el valor undefined si!nifica %ue no tiene dic&a propiedad el elemento 56M+' en caso contrario retorna su valor y procedemos a mostrarlo mediante un alert$ *uando se presiona el tercer bot"n: function e#iminar7ropiedad(order() & var x=$(" ta!#a""); x.remove0ttr("!order"); ) Obtenemos la referencia a la tabla mediante su id y llamamos al mBtodo remove3ttr con el nombre de la propiedad a eliminar$ Ejercicio M Definir un &ipervnculo con la propiedad &ref con cadena vaca$ +ue!o disponer tres botones %ue permitar fijar distintos &ipervnculos para la propiedad &ref$ 3dem(s actuali ar el te=to del &ipervnculo$ / - &'todos add"lass y remove"lass. +os mBtodos add*lass y remove*lass nos permiten asociar y desasociar una clase a un elemento o conjunto de elementos 56M+$ Problema: Disponer un div con un conjunto de p(rrafos$ *uando se presione un bot"n asociarle una clase y cuando se presione otro desasociarlo de dic&a clase$ pa!ina7$&tml <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <input type="button" id="boton1" value="Asociar clase"> <input type="button" id="boton2" value="Desasociar clase"> <div id="descripcion"> <p>HTML es el lenguaje que se emplea para el desarrollo de pginas de internet.</p> <p>Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imgenes sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc.</b> <p>Para poder crear una pgina HTML se requiere un simple editor de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este preciso momento est utilizando (recuerde que usted est viendo en este preciso momento una pgina HTML con su navegador).</p> <p>Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.<p> <p>Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj con el mismo. No pretende mostrar todas los elementos HTML en forma alfabtica.</p> <p>Como veremos, de cada concepto se presenta una parte terica, en la que se da una explicacin completa, luego se pasa a la seccin del ejercicio resuelto donde podemos ver el contenido de la pgina HTML y cmo la visualiza el navegador. 13

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV Por ltimo y tal vez la seccin ms importante de este tutorial es donde se propone que usted haga pginas en forma autnoma (donde realmente podr darse cuenta si el concepto qued firme).</p> </div> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x=$("#boton1"); x.click(asociarClase); x=$("#boton2"); x.click(desasociarClase); } function asociarClase() { var x=$("#descripcion"); x.addClass("recuadro"); } function desasociarClase() { var x=$("#descripcion"); x.removeClass("recuadro"); } estilos$css .recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px; border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:1px; border-top-style:dotted; border-right-style:solid; border-bottom-style:solid; border-left-style:dotted; border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00; } 6en!amos bien en cuenta %ue en el arc&ivo 56M+ debemos indicar donde se encuentran los arc&ivos js y css: <#in' re#="<ty#e<2eet" 2ref="esti#os.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> *uando se presiona el bot"n asociar &oja de estilo se ejecuta la funci"n: function asociar/#ase() 14

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV & ) var x=$(" descripcion"); x.add/#ass("recuadro");

Donde llamamos al mBtodo add*lass con el nombre de la clase (dic&a clase debe estar definida en la &oja de estilo (css#$ De forma similar para desasociar una clase se ejecuta la funci"n: function desasociar/#ase() & var x=$(" descripcion"); x.remove/#ass("recuadro"); ) donde llamamos al mBtodo remove*lass a partir de un objeto jQuery$ Ejercicio N Definir una tabla con un conjunto de filas y columnas$ Definir dos estilos' uno para la secci"n t&ead y otro para la secci"n tbody$ Mediante dos botones permitir asociar y desasociar clases$ 10 - &'todos 1tml)* y 1tml)valor* El mBtodo: 2tm#(=!#oque 2tm#>) 1os permite a!re!ar un blo%ue de &tml a partir de un elemento de la p(!ina$ O(sicamente es la propiedad inner56M+ del DOM$ 8 el mBtodo: 2tm#() 1os retorna el blo%ue &tml contenido a partir del elemento &tml %ue &ace referencia el objeto jQuery$ Problema:Disponer dos botones' al ser presionado el primero crear un formulario en forma din(mica %ue solicite el nombre de usuario y su clave$ Si se presiona el se!undo bot"n mostrar todos los elementos 56M+ del formulario previamente creado$ pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <input type="button" id="boton1" value="Mostrar formulario"> <input type="button" id="boton2" value="Mostrar elementos html del formulario"><br> <div id="formulario"> </div> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { 1

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV var x; x=$("#boton1"); x.click(presionBoton1); x=$("#boton2"); x.click(presionBoton2); } function presionBoton1() { var x; x=$("#formulario"); x.html('<form>Ingrese nombre:<input type="text" id="nombre"><br>Ingrese clave:<input type="text" id="clave"><br><input type="submit" value="confirmar"></form>'); } function presionBoton2() { var x; x=$("#formulario"); alert(x.html()); } *omo podemos observar cuando se presiona el primer bot"n creamos un objeto jQuery %ue toma la referencia del div y mediante el mBtodo &tml crea un blo%ue en su interior: function presion(oton"() & var x; x=$(" formu#ario"); x.2tm#(?<form>3n-rese nom!re@<input type="text" id="nom!re"><!r>3n-rese c#ave@<input type="text" id="c#ave"><!r><input type="su!mit" va#ue="confirmar"></form>?); ) El se!undo bot"n muestra en un alert el contenido 56M+ actual del div: function presion(oton2() & var x; x=$(" formu#ario"); a#ert(x.2tm#()); ) 5ay %ue diferenciar bien los mBtodos &tml(valor# y te=t(valor#' el se!undo como &abamos visto a!re!a te=to a un elemento 56M+$ Acotaciones *uando desarrollamos un sitio &ay %ue tener muc&o cuidado con la creaci"n de blo%ues en forma din(mica ya %ue puede &aber usuarios %ue no ten!an activo JavaScript y les sera imposible acceder a dic&as caractersticas$ En nuestro ejemplo si el usuario tiene desactivo JavaScript no podr( acceder al formulario de car!a de datos$ Ejercicio 7. *onfeccionar una p(!ina %ue ten!a dos botones$ El primero debe mostrar en un alert el contenido 56M+ de la cabecera de la p(!ina y el se!undo el contenido 56M+ del cuerpo de la p(!ina$ 11 - .dministracin de eventos con jQuery. jQuery facilita la administraci"n de eventos de JavaScript y lo m(s importante nos &ace transparente la diferencia en la re!istraci"n de eventos entre distintos nave!adores (2E=plorer' EireEo=# En este tutorial ya &emos utili ado el manejador de eventos: 1!

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV $(documento).ready(nom!re de funciAn) Dijimos %ue este funci"n %ue re!istramos mediante el mBtodo ready se ejecuta cuando el DOM del documento est( en memoria$ Si no utili amos la librera jQuery &acemos esto a travBs del evento load$ Otro evento %ue vimos en conceptos anteriores es el clicF de un elemento' la sinta=is utili ada: var x; x=$("!utton"); x.c#ic'(presion(oton) *on este pe%ueJo c"di!o re!istramos la funci"n presionOoton para todos los elementos de tipo button del documento$ *on este otro c"di!o: var x; x=$(" !oton""); x.c#ic'(presion(oton) solo se re!istra para el elemento con id con valor <boton7<$ ,or Kltimo con este c"di!o se re!istra para todos los elementos <button< %ue dependen del div con valor de id i!ual a <formulario7<: var x; x=$(" formu#ario" !utton"); x.c#ic'(presion(oton) ,ara reafirmar estos conceptos confeccionaremos una p(!ina %ue muestre un p(rrafo' lue!o una tabla %ue conten!a dos p(rrafos y por Kltimo otra tabla %ue conten!a dos p(rrafos$ *apturaremos el evento clicF de todos los p(rrafos del documento y mostraremos un mensaje indicando:Gse presion" un p(rrafo del documentoG' tambiBn capturaremos el evento clicF del los dos p(rrafos de la se!unda tabla y mostraremos: Gse presion" un p(rrafo contenido en la se!unda tabla$G$ pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <p>Prrafo fuera de la tabla</p> <table border="1"> <tr> <td><p>Prrafo dentro de la primer tabla.</p></td><td><p>Prrafo dentro de la primer tabla.</p></td> </tr> </table> <br> <table border="1" id="tabla2"> <tr> <td><p>Prrafo dentro de la segunda tabla.</p></td><td><p>Prrafo dentro de la segunda tabla.</p></td> </tr> </table> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); 1"

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV function inicializarEventos() { var x; x=$("p"); x.click(presionParrafoDocumento); x=$("#tabla2 p"); x.click(presionpresionParrafoSegundaTabla); } function presionParrafoDocumento() { alert('se presion un prrafo del documento'); } function presionpresionParrafoSegundaTabla() { alert('se presion un prrafo contenido en la segunda tabla.'); } El si!uiente c"di!o asocia a cada elemento de tipo <p< (p(rrafo del documento# la funci"n Gpresion,arrafoDocumentoG: x=$("p"); x.c#ic'(presion7arrafo6ocumento); +ue!o cuando ejecutemos este documento cada ve %ue presionemos un p(rrafo de la p(!ina mostrar( el mensaje Gse presion" un p(rrafo del documentoG$ 6ambiBn asociamos otra funci"n para el evento clicF de los p(rrafos contenidos dentro de la se!unda tabla: x=$(" ta!#a2 p"); x.c#ic'(presionpresion7arrafo<e-unda*a!#a); Esto si!nifica %ue los p(rrafos contenidos en la se!unda tabla tienen asociados dos funciones para el evento clicF' lue!o cuando presionemos al!uno de los p(rrafos de la se!unda tabla aparecer(n los dos mensajes: Gse presion" un p(rrafo del documentoG y Gse presion" un p(rrafo contenido en la se!unda tabla$G Ejercicio 77 *onfeccionar una p(!ina %ue conten!a al!unas palabras con el elemento Gstron!G' lue!o cuando sean presionadas ocultarlas$ 12 - 2ventos mouseover y mouseout. +os eventos de JavaScript onmouseover y onmouseout son los e%uivalentes mouseover y mouseout de jQuery$ Estos eventos est(n !eneralmente unidos$ El primero se dispara cuando in!resamos la flec&a del mouse a un elemento 56M+ y el se!undo cuando sacamos la flec&a del control$ ,ara probar estos dos eventos implementaremos una p(!ina %ue conten!a tres botones y cuando in!rese la flec&a del mouse al bot"n cambiaremos el color de te=to del mismo' retornando el color ori!inal cuando retiramos la flec&a del control$ 2mplementaremos una p(!ina %ue conten!a tres &ipervnculos' cuando in!rese la flec&a del mouse al &ipervnculo cambiaremos el color de fondo' retornando el color ori!inal cuando retiramos la flec&a del elemento$ pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <a href="http://www.lavoz.com.ar">La Voz del Interior</a> <br> 1#

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV <a href="http://www.lanacion.com.ar">La nacin</a> <br> <a href="http://www.clarin.com.ar">El clarn</a> <br> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("a"); x.mouseover(entraMouse); x.mouseout(saleMouse); } function entraMouse() { $(this).css("background-color","#ff0"); } function saleMouse() { $(this).css("background-color","#fff"); } +o primero %ue &acemos es asi!nar las funciones a ejecutarse cuando ocurren los evento mouseover y mouseout: var x; x=$("a"); x.mouseover(entraBouse); x.mouseout(sa#eBouse); +a funci"n entraMouse accede al elemento %ue recibe en su interior el mouse (la obtenemos mediante la referencia %ue !uarda t&is# y cambia el color de la propiedad te=t-bacF!round del *SS: function entraBouse() & $(t2is).css("!ac'-round.co#or"+" ff,"); ) De forma similar la funci"n saleMouse retorna al color ori!inal: function sa#eBouse() & $(t2is).css("!ac'-round.co#or"+" fff"); ) Ejercicio 70 *rear una tabla con dos filas y dos columnas' cambiar el color del interior de la casilla cuando in!resamos con el mouse y dejarla con dic&o color cuando retiramos la flec&a$ 13 - 2vento 1over. jQuery no solo mapea los eventos del DOM sino %ue provee otros %ue combinan estos$ *omo decamos es comKn utili ar los eventos mouseover y mouseout en comKn' por eso en jQuery e=iste un evento llamado &over %ue tiene dos par(metros: $(e#emento).2over(=funciAn de in-reso de# mouse>+=funciAn de sa#ida de# mouse>) 1$

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV Es decir %ue al evento &over asociamos dos funciones' la primera se ejecuta cuando in!resamos la flec&a del mouse dentro del elemento y la se!unda cuando retiramos la flec&a del mouse$ *onfeccionaremos el mismo problema del concepto %ue vimos los eventos mouseover y mouseout$ 2mplementaremos una p(!ina %ue conten!a tres &ipervnculos' cuando in!rese la flec&a del mouse al &ipervnculo cambiaremos el color de fondo' retornando el color ori!inal cuando retiramos la flec&a del elemento$ pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <a href="http://www.lavoz.com.ar">La Voz del Interior</a> <br> <a href="http://www.lanacion.com.ar">La nacin</a> <br> <a href="http://www.clarin.com.ar">El clarn</a> <br> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("a"); x.hover(entraMouse,saleMouse); }

function entraMouse() { $(this).css("background-color","#ff0"); } function saleMouse() { $(this).css("background-color","#fff"); } Ctili amos solamente el evento &over para cambiar el color de fondo del ancla cuando se in!resa la flec&a del mouse y retornarla al color ori!inal cuando se sale: var x; x=$("a"); x.2over(entraBouse+sa#eBouse); Ejercicio 79 *rear una tabla con dos filas y dos columnas' cambiar el color del interior de la casilla cuando in!resamos con el mouse y re!resarla al ori!inal cuando salimos$ 14 - 2vento mousemove. Este evento se dispara cuando se mueve la flec&a del mouse dentro del elemento 56M+ respectivo$ Si %ueremos recuperar la coordenada donde se encuentra en ese momento el mouse' jQuery pasa el objeto event como par(metro (con la ventaja %ue &ace transparente las diferencias entre 2E y otros nave!adores# 2%

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV Problema:*apturar el evento mousemove a nivel del objeto document' este se dispara cada ve %ue despla amos el mouse dentro de la p(!ina$ Mostrar la coordenada donde se encuentra la flec&a del mouse$ pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script language="javascript" src="funciones.js" type="text/javascript"></script> </head> <body> <p id="corx">coordenada x=</p> <p id="cory">coordenada y=</p> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$(document); x.mousemove(moverMouse); } function moverMouse(event) { var x; x=$("#corx"); x.text("coordenada x="+event.clientX); x=$("#cory"); x.text("coordenada y="+event.clientY); } ,rimero obtenemos la referencia del objeto document y le re!istramos la funci"n a ejecutar cuando se desplace el mouse: var x; x=$(document); x.mousemove(moverBouse); +a funci"n %ue se ejecuta cada ve %ue se despla a la flec&a del mouse en el documento es: function moverBouse(event) & var x; x=$(" corx"); x.text("coordenada x="Cevent.c#ientD); x=$(" cory"); x.text("coordenada y="Cevent.c#ientE); ) En esta creamos un objeto jQuery a partir del id del primer p(rrafo y fijamos el te=to del mismo con el valor del atributo event$client4 %ue almacena la coordenada = de la flec&a del mouse: x=$(" corx"); x.text("coordenada x="Cevent.c#ientD); Ejercicio 7I *rear un div de 0.. pi=eles de anc&o y alto$ Mostrar lue!o la coordenada donde se encuentra la flec&a del mouse cuando est( dentro del div$ Mostrar un mensaje si no se encuentra dentro del div$ 21

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV 1 - 2ventos mousedo3n y mouseup. El evento mousedoPn se dispara cuando presionamos al!uno de los botones del mouse y el evento mouseup cuando dejamos de presionar el bot"n$ 2mplementemos una p(!ina %ue conten!a una tabla con una fila y dos columna' al presionar el bot"n del mouse dentro de una casilla de la tabla cambiar el color de fondo de la misma por amarillo y cuando levantamos el dedo del mouse re!resar a color blanco la casilla$ pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <table border="1"> <tr> <td>1111111111</td><td>1111111111</td> </tr> </table> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("td"); x.mousedown(presionaMouse); x.mouseup(sueltaMouse); }

function presionaMouse() { $(this).css("background-color","#ff0"); } function sueltaMouse() { $(this).css("background-color","#fff"); } ,rimero asociamos los eventos mousedoPn y mouseup a todos los elementos td del documento: var x; x=$("td"); x.mousedoFn(presionaBouse); x.mouseup(sue#taBouse); *uando se presiona al!Kn bot"n del mouse dentro de una celda de la tabla se dispara la funci"n: function presionaBouse() & $(t2is).css("!ac'-round.co#or"+" ff,"); ) De forma similar cuando se suelta el bot"n del mouse se dispara la funci"n: function sue#taBouse() 22

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV & $(t2is).css("!ac'-round.co#or"+" fff"); ) Ejercicio 7H *rear una p(!ina con dos botones$ 3l ser presionados cambiar su color de fondo$ )etornar al color ori!inal cuando se suelta el bot"n del mouse$ 1# - 2vento d-lclic4. El evento dblclicF se dispara cuando se presiona dos veces se!uidas el bot"n i %uierdo del mouse$ ,ara ver el funcionamiento de este evento crearemos un div en una coordenada absoluta y lo ocultaremos al &acer doble clic en su interior$ pa!ina7$&tml <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <div id="recuadro"> <h1>Doble clic para ocultar este recuadro</h1> </div> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#recuadro"); x.dblclick(dobleClic); } function dobleClic() { var x; x=$(this); x.hide() } estilos$css #recuadro { color:#aa0; background-color:#ff0; position:absolute; text-align:center; left:40px; top:30px; width:800px; height:70px; } En la funci"n iniciali arEventos re!istramos el evento dblclicF para el div: var x; 23

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV x=$(" recuadro"); x.d!#c#ic'(do!#e/#ic); *uando se presiona dos veces se!uidas dentro del div se dispara la funci"n: function do!#e/#ic() & var x; x=$(t2is); x.2ide() ) donde obtenemos la referencia del elemento %ue emiti" el evento y llamamos al mBtodo &ide para %ue lo oculte$ Ejercicio 7Disponer un div de M..=L. p=eles$ 3l &acer doble clic redimensionarlo a 0H.=0H. p=eles y si se &ace doble clic nuevamente retornar al tamaJo M..=L.$ 1% - 2vento $ocus. El evento focus se produce cuando se activa el control$ ,odemos capturar el evento focus de un control de tipo te=t' te=tarea' button' c&ecFbo=' fileupload' passPord' radio' reset y submit$ Es comKn a muc&os sitio donde se puede buscar informaci"n'disponer un control de tipo te=t con la leyenda GOuscar$$$G y sin nin!Kn bot"n a su lado$ *uando el control toma foco se borra autom(ticamente su contenido' el operador in!resa el te=to a buscar y presiona la tecla E16E)$,ara probar como capturar este evento implementaremos una p(!ina %ue resuelva el problema anteriormente planteado$ pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <form action="#" method="post"> <input type="text" name="buscar" id="buscar" value="Buscar..." size="20"> </form> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#buscar"); x.focus(tomaFoco); } function tomaFoco() { var x=$("#buscar"); x.attr("value",""); } En la funci"n iniciali arEventos creamos un objeto jQuery a partir del id del control de tipo te=t y asociamos el evento focus con el mBtodo tomaEoco: 24

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV x=$(" !uscar"); x.focus(toma1oco); El mBtodo tomaEoco obtiene la referencia del elemento tipo te=t y mediante el mBtodo attr modifica la propiedad value: function toma1oco() & var x=$(" !uscar"); x.attr("va#ue"+""); ) Ejercicio 7L Disponer dos controles de tipo te=t con al!Kn contenido$ Eijar de color a ul su fuente$ 3l tomar foco el control cambiar a color rojo$ 1, - 2vento -lur. El evento blur se dispara cuando pierde el foco el control$ ,odemos capturar el evento blur de un control de tipo te=t' te=tarea' button' c&ecFbo=' fileupload' passPord' radio' reset y submit$ ,ara probar su funcionamiento dispondremos dos controles de tipo te=t con al!Kn contenido$ Eijaremos de color a ul su fuente$ 3l tomar foco el control cambiar( a color rojo y al perder el foco volver( a color a ul$ pa!ina7$&tml <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <form action="#" method="post"> <input type="text" name="text1" id="text1" value="Hola" size="20"> <br> <input type="text" name="text2" id="text2" value="Hola" size="20"> </form> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x=$("#text1"); x.focus(tomaFoco); x.blur(pierdeFoco); x=$("#text2"); x.focus(tomaFoco); x.blur(pierdeFoco); } function tomaFoco() { var x=$(this); x.css("color","#f00"); } function pierdeFoco() 2

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV { var x=$(this); x.css("color","#00f"); } estilos$css #text1,#text2 { color:#00f; } En la funci"n iniciali ar eventos asociamos los eventos focus y blur a los dos controles: function inicia#i$ar%ventos() & var x=$(" text""); x.focus(toma1oco); x.!#ur(pierde1oco); x=$(" text2"); x.focus(toma1oco); x.!#ur(pierde1oco); ) El evento tomaEoco cambia de color a rojo al te=to del control seleccionado: function toma1oco() & var x=$(t2is); x.css("co#or"+" f,,"); ) De forma similar pierdeEoco cambia a a ul: function pierde1oco() & var x=$(t2is); x.css("co#or"+" ,,f"); ) Ejercicio 7M *onfeccionar un formulario %ue conten!a un te=t$ Si al perder el foco su contenido es una cadena vaca mostrar mediante un alert tal situaci"n$ 1/ - &anipulacin de los elementos del 56&. jQuery dispone de una serie de mBtodos %ue nos facilitan el tratamiento de los elementos del Dom$ *onfeccionaremos un problema %ue &a!a uso de estos mBtodos$ Problema:2mplementar una p(!ina %ue conten!a una lista con cuatro items$ ,robar distintos mBtodos para manipular la lista (borrar' insertar# pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <h1>Mtodos para manipular nodos del DOM con jQuery.</h1> <ul> <li>Primer item.</li> <li>Segundo item.</li> <li>Tercer item.</li> 2!

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV <li>Cuarto item.</li> </ul> <input type="button" id="boton1" <input type="button" id="boton2" <input type="button" id="boton3" lista"><br> <input type="button" id="boton4" lista"><br> <input type="button" id="boton5" <input type="button" id="boton6" <input type="button" id="boton7" elemento."><br> <input type="button" id="boton8" </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#boton1"); x.click(eliminarElementos) x=$("#boton2"); x.click(restaurarLista) x=$("#boton3"); x.click(anadirElementoFinal) x=$("#boton4"); x.click(anadirElementoPrincipio) x=$("#boton5"); x.click(eliminarElementoFinal) x=$("#boton6"); x.click(eliminarElementoPrincipio) x=$("#boton7"); x.click(eliminarPrimeroSegundo) x=$("#boton8"); x.click(eliminarDosUltimos) } function eliminarElementos() { var x; x=$("ul"); x.empty(); } function restaurarLista() { $("ul").html('<li>Primer item.</li><li> Segundo item.</li><li>Tercer item.</li><li>Cuarto item.</li>'); } function anadirElementoFinal() { var x; x=$("ul"); x.append("<li>otro item al final</li>"); } function anadirElementoPrincipio() { var x; x=$("ul"); x.prepend("<li>otro item al principio</li>"); } 2"

value="Eliminar la lista completa."><br> value="Restaurar Lista"><br> value="Aadir un elemento al final de la value="Aadir un elemento al principio de la value="Eliminar el ltimo elemento."><br> value="Eliminar el primer elemento."><br> value="Eliminar el primero y segundo value="Eliminar los dos ltimos."><br>

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV function eliminarElementoFinal() { var x; x=$("li"); var cantidad=x.length; x=x.eq(cantidad-1); x.remove(); } function eliminarElementoPrincipio() { var x; x=$("li"); x=x.eq(0); x.remove(); } function eliminarPrimeroSegundo() { var x; x=$("li"); x=x.lt(2); x.remove(); } function eliminarDosUltimos() { var x; x=$("li"); x=x.gt(x.length-3); x.remove(); } ,ara borrar todos los elementos contenidos en una lista obtenemos la referencia de la lista mediante la funci"n A y se!uidamente llamamos al mBtodo empty: function e#iminar%#ementos() & var x; x=$("u#"); x.empty(); ) ,ara restaurar la lista utili amos el mBtodo &tml insertando directamente los item a partir del elemento ul: function restaurarGista() & $("u#").2tm#(?<#i>7rimer item.</#i><#i> <e-undo item.</#i><#i>*ercer item.</#i><#i>/uarto item.</#i>?); ) ,ara aJadir un elemento al final de la colecci"n de elementos del objeto jQuery disponemos del mBtodo append: function anadir%#emento1ina#() & var x; x=$("u#"); x.append("<#i>otro item a# fina#</#i>"); ) ,ara aJadir un elemento al principio disponemos de un mBtodo llamado prepend: function anadir%#emento7rincipio() & var x; x=$("u#"); x.prepend("<#i>otro item a# principio</#i>"); ) 2#

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV ,ara eliminar un elemento del final de la lista' primero obtenemos la cantidad de elementos %ue almacena el objeto jQuery por medio de la propiedad len!t& y lue!o mediante el mBtodo e% (e%ual# indicamos la posici"n del elemento %ue necesitamos (el mBtodo e% retorna otro objeto de tipo jQuery# y por Kltimo llamamos al mBtodo remove: function e#iminar%#emento1ina#() & var x; x=$("#i"); var cantidad=x.#en-t2; x=x.eq(cantidad."); x.remove(); ) ,ara eliminar un elemento del principio es similar a borrar el Kltimo' pero a%u no necesitamos saber la cantidad de elementos %ue almacena el objeto jQuery ya %ue debemos acceder al primero (el primero se almacena en la posici"n cero#: function e#iminar%#emento7rincipio() & var x; x=$("#i"); x=x.eq(,); x.remove(); ) ,ara eliminar el primero y se!undo elemento %ue almacena el objeto jQuery disponemos de un mBtodo lt (loP t&an# %ue retorna todos los elementos menores a la posici"n %ue le pasamos como par(metro (en nuestro ejemplo nos retorna los elementos de la posici"n . y 7: function e#iminar7rimero<e-undo() & var x; x=$("#i"); x=x.#t(2); x.remove(); ) ,ara eliminar los dos elementos finales podemos rescatarlos mediante el mBtodo !t (!reat t&an# %ue retorna un objeto jQuery con todos los elementos %ue superan la posici"n %ue le indicamos en el par(metro: function e#iminar6osH#timos() & var x; x=$("#i"); x=x.-t(x.#en-t2.:); x.remove(); ) 20 - 2$ectos con los m'todos s1o3 y 1ide. Cna caracterstica muy interesante de jQuery %ue nos provee de un serie de efectos visuales$ 8a utili amos los mBtodos &ide(# y s&oP(#' %ue tienen por objetivo ocultar y mostrar elementos 56M+$ 3&ora veremos %ue podemos &acer %ue cuando se oculte o muestre un elemento lo &a!a con una pe%ueJa animaci"n (%ue se oculte o muestre lentamente# Estas caractersticas pueden ayudar al usuario a concentrarse en una parte de la p(!ina donde sucede la animaci"n Problema:*onfeccionar una p(!ina %ue muestre un recuadro con te=to$ Disponer dos botones' uno %ue oculte lentamente el cuadro y el otro %ue lo muestre r(pidamente$ pa!ina7$&tml <html> <head> <title>Problema</title> 2$

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <input type="button" id="boton1" value="Ocultar recuadro"> <input type="button" id="boton2" value="Mostrar recuadro"> <div id="descripcion" class="recuadro"> <p>HTML es el lenguaje que se emplea para el desarrollo de pginas de internet.</p> <p>Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imgenes sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc.</b> <p>Para poder crear una pgina HTML se requiere un simple editor de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este preciso momento est utilizando (recuerde que usted est viendo en este preciso momento una pgina HTML con su navegador).</p> <p>Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.<p> <p>Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj con el mismo. No pretende mostrar todas los elementos HTML en forma alfabtica.</p> <p>Como veremos, de cada concepto se presenta una parte terica, en la que se da una explicacin completa, luego se pasa a la seccin del ejercicio resuelto donde podemos ver el contenido de la pgina HTML y cmo la visualiza el navegador. Por ltimo y tal vez la seccin ms importante de este tutorial es donde se propone que usted haga pginas en forma autnoma (donde realmente podr darse cuenta si el concepto qued firme).</p> </div> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x=$("#boton1"); x.click(ocultarRecuadro); x=$("#boton2"); x.click(mostrarRecuadro); } function ocultarRecuadro() { var x=$("#descripcion"); x.hide("slow"); } function mostrarRecuadro() { var x=$("#descripcion"); x.show("fast"); } 3%

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV estilos$css .recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px; border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:1px; border-top-style:dotted; border-right-style:solid; border-bottom-style:solid; border-left-style:dotted; border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00; } +a funci"n ocultar)ecuadro se ejecuta cuando presionamos el bot"n de <Ocultar recuadro<: function ocu#tar9ecuadro() & var x=$(" descripcion"); x.2ide("s#oF"); ) donde obtenemos la referencia del div mediante su id y procedemos a llamar al mBtodo &ide pas(ndole el strin! <sloP<' con esto lo!ramos %ue se oculte el recuadro lentamente$ De forma similar la funci"n mostrar)ecuadro: function mostrar9ecuadro() & var x=$(" descripcion"); x.s2oF("fast"); ) llama a la funci"n s&oP pasando como par(metro el strin! <fast<$ 5ay varias formas para llamar a los mBtodos s&oP y &ide: +o muestra en forma instantanea: s2oF() +o muestra con una animaci"n r(pida: s2oF("fast") +o muestra con una animaci"n normal: s2oF("norma#") +o muestra con una animaci"n lenta: s2oF("s#oF") +o muestra con una animaci"n %ue tarda tantos milise!undos como le indicamos: s2oF(=cantidad de mi#ise-undos>)

31

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV +o muestra con una animaci"n %ue tarda tantos milise!undos como le indicamos y ejecuta al final la funci"n %ue le pasamos como se!undo par(metro: s2oF(=cantidad de mi#ise-undos>+=funciAn>) De forma similar funciona el mBtodo &ide$ Ejercicio 0. *onfeccionar una p(!ina %ue conten!a un div con un conjunto de p(rrafos$ *uando se presione con el mouse dentro del div ocultarlo lentamente y cuando estB completamente oculto &acer %ue apare ca lentamente otro blo%ue de te=to$ 21 - 2$ectos con los m'todos $ade7n y $ade6ut. Estos dos mBtodos son similares a s&oP y &ide pero con la diferencia %ue fade2n &ace aparecer los elementos 56M+ con opacidad$ El mBtodo fadeOut decolora &asta desaparecer' es decir reduce la opacidad del elemento en forma pro!resiva$ Problema:*onfeccionar una p(!ina %ue muestre un recuadro con te=to$ Disponer dos botones' uno %ue oculte (fadeOut# y el otro %ue lo muestre (fade2n#$ pa!ina7$&tml <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <input type="button" id="boton1" value="Ocultar recuadro"> <input type="button" id="boton2" value="Mostrar recuadro"> <div id="descripcion" class="recuadro"> <p>HTML es el lenguaje que se emplea para el desarrollo de pginas de internet.</p> <p>Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imgenes sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc.</b> <p>Para poder crear una pgina HTML se requiere un simple editor de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este preciso momento est utilizando (recuerde que usted est viendo en este preciso momento una pgina HTML con su navegador).</p> <p>Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.<p> <p>Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj con el mismo. No pretende mostrar todas los elementos HTML en forma alfabtica.</p> <p>Como veremos, de cada concepto se presenta una parte terica, en la que se da una explicacin completa, luego se pasa a la seccin del ejercicio resuelto donde podemos ver el contenido de la pgina HTML y cmo la visualiza el navegador. Por ltimo y tal vez la seccin ms importante de este tutorial es donde se propone que usted haga pginas en forma autnoma (donde realmente podr darse cuenta si el concepto qued firme).</p> </div> </body> </html> 32

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x=$("#boton1"); x.click(ocultarRecuadro); x=$("#boton2"); x.click(mostrarRecuadro); } function ocultarRecuadro() { var x=$("#descripcion"); x.fadeOut("slow"); } function mostrarRecuadro() { var x=$("#descripcion"); x.fadeIn("slow"); } estilos$css .recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px; border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:1px; border-top-style:dotted; border-right-style:solid; border-bottom-style:solid; border-left-style:dotted; border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00; } +a funci"n ocultar)ecuadro se ejecuta cuando presionamos el bot"n de <Ocultar recuadro<: function ocu#tar9ecuadro() & var x=$(" descripcion"); x.fadeIut("s#oF"); ) donde obtenemos la referencia del div mediante su id y procedemos a llamar al mBtodo fadeOut pas(ndole el strin! <sloP<' con esto lo!ramos %ue se oculte el recuadro se decolore lentamente &asta desaparecer$ De forma similar la funci"n mostrar)ecuadro: function mostrar9ecuadro() & var x=$(" descripcion"); x.fade3n("s#oF"); ) 33

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV llama a la funci"n fade2n pasando como par(metro el strin! <sloP<$ +as formas de llamar a los mBtodos fade2n y fadeOut: +o muestra con una animaci"n r(pida: fade3n("fast") +o muestra con una animaci"n normal: fade3n("norma#") +o muestra con una animaci"n lenta: fade3n("s#oF") +o muestra con una animaci"n %ue tarda tantos milise!undos como le indicamos: fade3n(=cantidad de mi#ise-undos>) +o muestra con una animaci"n %ue tarda tantos milise!undos como le indicamos y ejecuta al final la funci"n %ue le pasamos como se!undo par(metro: fade3n(=cantidad de mi#ise-undos>+=funciAn>) De forma similar funciona el mBtodo fadeOut$ Ejercicio 07 *onfeccionar una p(!ina %ue conten!a un div con un conjunto de p(rrafos$ *uando se presione con el mouse dentro del div ocultarlo por decoloraci"n y cuando estB completamente oculto &acer %ue apare ca lentamente otro blo%ue$ 22 - 2$ecto con el m'todo $ade8o. El mBtodo fade6o puede modificar la opacidad de un elemento' el efecto es llevar la opacidad actual &asta el valor %ue le pasamos al mBtodo fade6o ,odemos iniciali ar este mBtodo de las si!uientes formas: fade*o(=ve#ocidad>+=va#or de opacidad>) 2ndicamos la velocidad de transici"n del estado actual al nuevo estado (sloP>normal>fast# o un valor indicado en milise!Kndos$ El valor de la opacidad es un numero real entre . y 7$ 7 si!nifica sin opacidad y . es transparente$ 6ambiBn podemos llamar al mBtodo fade6o con tres par(metros: fade*o(=ve#ocidad>+=va#or de opacidad>+=funciAn>) Esta se!unda estructura de la funci"n permite ejecutar una funci"n cuando finali a la transici"n$ 5ay %ue tener en cuenta %ue fade6o por m(s %ue indi%uemos el valor . en opacidad el espacio %ue ocupa el elemento en la p(!ina se!uir( ocupado por un recuadro vaco$ Problema:*onfeccionar una p(!ina %ue muestre un recuadro con te=to$ Disponer dos botones' uno %ue cambie la opacidad lentamente &asta el valor .$H y el otro %ue lo muestre lentamente &asta el valor 7$ pa!ina7$&tml <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> 34

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <input type="button" id="boton1" value="Reducir opacidad"> <input type="button" id="boton2" value="Aumentar opacidad"> <div id="descripcion" class="recuadro"> <p>HTML es el lenguaje que se emplea para el desarrollo de pginas de internet.</p> <p>Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imgenes sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc.</b> <p>Para poder crear una pgina HTML se requiere un simple editor de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este preciso momento est utilizando (recuerde que usted est viendo en este preciso momento una pgina HTML con su navegador).</p> <p>Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.<p> <p>Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj con el mismo. No pretende mostrar todas los elementos HTML en forma alfabtica.</p> <p>Como veremos, de cada concepto se presenta una parte terica, en la que se da una explicacin completa, luego se pasa a la seccin del ejercicio resuelto donde podemos ver el contenido de la pgina HTML y cmo la visualiza el navegador. Por ltimo y tal vez la seccin ms importante de este tutorial es donde se propone que usted haga pginas en forma autnoma (donde realmente podr darse cuenta si el concepto qued firme).</p> </div> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x=$("#boton1"); x.click(reducirOpacidadRecuadro); x=$("#boton2"); x.click(aumentarOpacidadRecuadro); } function reducirOpacidadRecuadro() { var x=$("#descripcion"); x.fadeTo("slow",0.5); } function aumentarOpacidadRecuadro() { var x=$("#descripcion"); x.fadeTo("slow",1); } estilos$css .recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px; 3

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:1px; border-top-style:dotted; border-right-style:solid; border-bottom-style:solid; border-left-style:dotted; border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00; } *uando se presiona el bot"n de reducir la opacidad llamamos al mBtodo fade6o con el valor .$H: function reducirIpacidad9ecuadro() & var x=$(" descripcion"); x.fade*o("s#oF"+,.J); ) y cuando presionamos el bot"n de aumentar la opacidad llamamos al mBtodo fade6o con valor 7 en opacidad (si!nifica opacidad total#: function aumentarIpacidad9ecuadro() & var x=$(" descripcion"); x.fade*o("s#oF"+"); ) Ejercicio 00 *onfeccionar una p(!ina %ue conten!a un div con un conjunto de p(rrafos$ *uando se presione con el mouse dentro del div reducir su opacidad a .$0. y cuando estB completamente oculto &acer %ue apare ca lentamente otro blo%ue$ 23 - 2$ecto con el m'todo toggle. El mBtodo to!!le permite cada ve %ue se ejecute cambiar de estado la visibilidad del elemento 56M+' es decir si est( visible pasa a oculto y si se encuentra oculto pasa a visible$ Problema:5acer %ue un blo%ue de informaci"n pase de visible a oculto lentamente y viceversa al presionar un bot"n$ pa!ina7$&tml <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <input type="button" id="boton1" value="Mostrar/Ocultar"> <div id="descripcion" class="recuadro"> <p>HTML es el lenguaje que se emplea para el desarrollo de pginas de internet.</p> <p>Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imgenes sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc.</b><p>Para poder crear una pgina HTML se requiere un simple editor de texto (en nuestro caso emplearemos 3!

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este preciso momento est utilizando (recuerde que usted est viendo en este preciso momento una pgina HTML con su navegador).</p> <p>Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.<p> <p>Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj con el mismo. No pretende mostrar todas los elementos HTML en forma alfabtica.</p> <p>Como veremos, de cada concepto se presenta una parte terica, en la que se da una explicacin completa, luego se pasa a la seccin del ejercicio resuelto donde podemos ver el contenido de la pgina HTML y cmo la visualiza el navegador. Por ltimo y tal vez la seccin ms importante de este tutorial es donde se propone que usted haga pginas en forma autnoma (donde realmente podr darse cuenta si el concepto qued firme).</p> </div> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x=$("#boton1"); x.click(ocultarMostrarRecuadro); } function ocultarMostrarRecuadro() { var x=$("#descripcion"); x.toggle("slow"); } estilos$css .recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px; border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:1px; border-top-style:dotted; border-right-style:solid; border-bottom-style:solid; border-left-style:dotted; border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00; } +a funci"n ocultarMostrar)ecuadro: function ocu#tarBostrar9ecuadro() & var x=$(" descripcion"); x.to--#e("s#oF"); 3"

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV ) se encar!a de llamar al mBtodo to!!le del objeto jQuery' y este anali a si actualmente el elemento est( visible u oculto' la transici"n se &ace en forma lenta ya %ue le pasamos como par(metro el strin! <sloP<$ 24 - 7teracin por los elementos )eac1* jQuery dispone de un mBtodo %ue nos permite asociar una funci"n %ue se ejecutar( por cada elemento %ue conten!a la lista del objeto jQuery$ Dentro de esta funci"n podemos manipular el elemento actual$ +a sinta=is del iterador eac& es: var x; x=$(=e#ementos>); x.eac2(=nom!re de funcion>) Problema:)esaltar con fondo amarillo todos los p(rrafos %ue tienen menos de 7.. caracteres$ pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <div id="parrafos"> <p>prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1</p> <p>prrafo 2 - prrafo 2 - prrafo 2 - prrafo 2</p> <p>prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3</p> <p>prrafo 4 - prrafo 4 - prrafo 4 - prrafo 4 - prrafo 4</p> </div> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#parrafos p"); x.each(resaltarParrafos); } function resaltarParrafos() { 3#

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV var x=$(this); if (x.text().length<100) { x.css("background-color","#ff0"); } } En la funci"n iniciali arEventos obtenemos la lista de p(rrafos contenidas en el div y lue!o a este objeto jQuery mediante el mBtodo eac& indicamos el nombre de la funci"n %ue procesar( a cada elemento: x=$(" parrafos p"); x.eac2(resa#tar7arrafos); +a funci"n resaltar,arrafos se ejecuta por cada uno de los p(rrafos contenidos en el objeto jQuery (en nuestro caso I p(rrafos#: function resa#tar7arrafos() & var x=$(t2is); if (x.text().#en-t2<",,) & x.css("!ac'-round.co#or"+" ff,"); ) ) +o primero %ue &acemos mediante la funci"n A y pasando t&is como par(metro obtenemos la referencia del p(rrafo a procesar$ 3ccedemos al mBtodo te=t(# %ue nos retorna el te=to del p(rrafo propiamente dic&o$ El mBtodo te=t(# retorna un strin! por lo %ue podemos acceder al atributo len!t& y verificar la cantidad de caracteres %ue tiene' en caso de ser inferior a 7.. procedemos a cambiar el color de fondo de dic&o p(rrafo$ Ejercicio 0I Cna p(!ina tiene una lista de &ipervnculos$ )esaltar todos los subdominios $ar Ctili ar el mBtodo inde=Of de la clase Strin! para verificar si una cadena se encuentra en otra$ 2 - .ja(9 m'todo load. ,ara el entendimiento de los pr"=imos conceptos se recomienda &aber reali ado el tutorial de 3J34 8a Este mBtodo es el m(s sencillo para recuperar datos del servidor$ +a sinta=is de este mBtodo es el si!uiente: #oad(=nom!re de #a p4-ina>+=par4metros>+=funcion fina#>) Otra cosa muy importante es la llamada de este mBtodo a partir del elemento 56M+ donde %ueremos %ue se a!re!ue la informaci"n %ue retorna el servidor (es decir %ue utili amos este mBtodo cuando no tenemos %ue procesarlo en el nave!ador' sino directamente mostrarlo en forma completa#$ El se!undo y tercer par(metro son opcionales$ Problema:*onfeccionar una p(!ina %ue muestre una lista de &ipervnculos con los distintos si!nos del &or"scopo y lue!o al ser presionado no recar!ue la p(!ina completa sino %ue se enve una petici"n al servidor y el mismo retorne la informaci"n de dic&o si!no' lue!o se actualice solo el contenido de un div del arc&ivo 56M+$ pa!ina7$&tml <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <h1>Signos del horscopo.</h1> <div id="menu"> 3$

<p><a <p><a <p><a <p><a <p><a <p><a <p><a <p><a <p><a <p><a <p><a <p><a </div> <div id="detalles">Seleccione su signo.</div> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#menu a"); x.click(presionEnlace); } function presionEnlace() { var pagina=$(this).attr("href"); var x=$("#detalles"); x.load(pagina); return false; } pa!ina7$p&p

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV id="enlace1" href="pagina1.php?cod=1">Aries</a></p> id="enlace2" href="pagina1.php?cod=2">Tauro</a></p> id="enlace3" href="pagina1.php?cod=3">Geminis</a></p> id="enlace4" href="pagina1.php?cod=4">Cancer</a></p> id="enlace5" href="pagina1.php?cod=5">Leo</a></p> id="enlace6" href="pagina1.php?cod=6">Virgo</a></p> id="enlace7" href="pagina1.php?cod=7">Libra</a></p> id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p> id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p> id="enlace10" href="pagina1.php?cod=10">Capricornio</a></p> id="enlace11" href="pagina1.php?cod=11">Acuario</a></p> id="enlace12" href="pagina1.php?cod=12">Piscis</a></p>

<?php header('Content-Type: text/html; charset=ISO-8859-1'); if ($_REQUEST['cod']==1) echo "<strong>Aries:</strong> Hoy los cambios sern fsicos, personales, de carcter, Te sentirs impulsivo y tomars iniciativas. Perodo en donde considerars unirte a agrupaciones de beneficencia, o de ayuda a los dems."; if ($_REQUEST['cod']==2) echo "<strong>Tauro:</strong> Hoy los cambios sern privados, ntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de retiro. Tu cnyuge puede aportar buen status a tu vida o apoyo a tu profesin."; if ($_REQUEST['cod']==3) echo "<strong>Gminis:</strong> Los asuntos de hoy tienen que ver con las amistades, reuniones, actividades con ellos. Da esperanzado, ilusiones. Mucha energa sexual y fuerza emocional. Deseos difciles de controlar."; if ($_REQUEST['cod']==4) echo "<strong>Cancer:</strong> Este da la profesin y las relaciones con superiores y con tu madre sern de importancia. Actividad en relacin a estos temas. Momentos positivos con compaeros de trabajo. Actividad laboral agradable."; if ($_REQUEST['cod']==5) echo "<strong>Leo:</strong> Este da los estudios, los viajes, el extranjero y la espiritualidad sern lo importante. Pensamientos, religin y filosofa tambin. Vivencias krmicas de la poca te vuelven responsable tomando decisiones."; if ($_REQUEST['cod']==6) echo "<strong>Virgo:</strong> Para este da toma importancia 4%

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV tu vida sexual, tal vez miedos, temas legales, juicios o herencias. Experiencias extraas. Hay karma de prueba durante este perodo en tu parte psicolgica, generndose algunos replanteos."; if ($_REQUEST['cod']==7) echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con tu pareja, tambin con socios, con la gente o el pblico. Ellos sern lo ms importante del da. Ganancias a travs de especulaciones o del juego. Actividades vocacionales artsticas."; if ($_REQUEST['cod']==8) echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver con temas de trabajo y de salud. Presta atencin a ambos. Experiencias diversas con compaeros. Durante este perodo tendrs muchos recursos para ganar dinero."; if ($_REQUEST['cod']==9) echo "<strong>Sagitario:</strong> Durante este da se vivirn cambios en relacin a los noviazgos o a los hijos. Creatividad, actividad, diversiones y salidas. Perodo de encuentros con personas o situaciones que te impresionan."; if ($_REQUEST['cod']==10) echo "<strong>Capricornio:</strong> Los cambios del da tienen que ver con tu hogar, con la convivencia y con el padre. Asuntos relativos al carcter en la convivencia. El karma de responsabilidad de estos momentos te acercar al mundo de lo desconocido, mucha madurez y contacto con el ms all."; if ($_REQUEST['cod']==11) echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver con el entorno inmediato, hermanos y vecinos, con la comunicacin, los viajes cortos o traslados frecuentes. El hablar y trasladarse ser importante hoy. Mentalidad e ideas activas."; if ($_REQUEST['cod']==12) echo "<strong>Piscis:</strong> Durante este da se vivirn cambios en la economa, movimientos en los ingresos, negocios, valores. Momentos de gran fuerza y decisin profesionales, buscars el liderazgo."; ?> estilos$css #menu { font-family: Arial; margin:5px; } #menu p { margin:0px; padding:0px; } #menu a { display: block; padding: 3px; width: 160px; background-color: #f7f8e8; border-bottom: 1px solid #eee; text-align:center; } #menu a:link, #menu a:visited { color: #f00; text-decoration: none; } #menu a:hover { background-color: #369; color: #fff; } #detalles { background-color:#ffc; 41

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV text-align:left; font-family:verdana; border-width:0; padding:5px; border: 1px dotted #fa0; margin:5px; } *omo podemos observar el c"di!o JavaScript es muy pe%ueJo' veamos: function inicia#i$ar%ventos() & var x; x=$(" menu a"); x.c#ic'(presion%n#ace); ) En la funci"n iniciali arEventos cremos un objeto jQuery con la referencia de todas las anclas %ue est(n contenidas en el div Dmenu$ 3sociamos el evento clicF a todos los enlaces$ +a funci"n presionEnlace: function presion%n#ace() & var pa-ina=$(t2is).attr("2ref"); var x=$(" deta##es"); x.#oad(pa-ina); return fa#se; ) E=traemos el atributo &ref del &ipervnculo %ue dispar" el evento (ten!amos en cuenta %ue almacena el nombre de la p(!ina y el par(metro' por ejemplo:<pa!ina7$p&pQcod;-# var pa-ina=$(t2is).attr("2ref"); *reamos un objeto jQuery a partir del div Ddetalles: var x=$(" deta##es"); +lamamos al mBtodo load del objeto jQuery y le pasamos como par(metro el nombre de la p(!ina a recuperar: x.#oad(pa-ina); El mBtodo load se encar!a de &acer la comunicaci"n asincr"nica con el servidor' esperar y recibir los datos y finalmente aJadir la informaci"n al elemento 56M+ (en nuestro ejemplo el div Ddetalles# ,or Kltimo la funci"n retorna false para anular la propa!aci"n de eventos y desactivar tambiBn el evento por defecto %ue ocurre cuando se presiona un enlace$ 2# - .ja(9 m'todos aja(Start y aja(Stop Estos dos mBtodos se pueden asociar a un objeto de tipo jQuery' tienen como par(metro una funci"n: ajax<tart(=funciAn>) +a funci"n de aja=Start se dispara cuando se inicia la petici"n al servidor y nos puede servir para mostrar en pantalla al usuario %ue est(n lle!ando datos del servidor$ ajax<top(=funciAn>) Se dispara esta funci"n cuando finali ar la petici"n de datos al servidor$ Problema:*onfeccionar un problema %ue muestre una lista de &ipervnculos con los distintos si!nos del &or"scopo y lue!o al ser presionado no recar!ue la p(!ina completa sino %ue se enve una petici"n al servidor y el mismo retorne la informaci"n de dic&o si!no' lue!o se actualice solo el contenido de un div del arc&ivo 42

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV 56M+$ Mostrar un !if animado mientras los datos no lle!aron del servidor$ pa!ina7$&tml <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <h1>Signos del horscopo.</h1> <div id="menu"> <p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p> <p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p> <p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p> <p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p> <p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p> <p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p> <p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p> <p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p> <p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p> <p><a id="enlace10" href="pagina1.php?cod=10">Capricornio</a></p> <p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p> <p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p> </div> <div id="detalles">Seleccione su signo.</div> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#menu a"); x.click(presionEnlace); } function presionEnlace() { var pagina=$(this).attr("href"); var x=$("#detalles"); x.ajaxStart(inicioEnvio); x.load(pagina); return false; } function inicioEnvio() { var x=$("#detalles"); x.html('<img src="../cargando.gif">'); } pa!ina7$p&p <?php header('Content-Type: text/html; charset=ISO-8859-1'); if ($_REQUEST['cod']==1) echo "<strong>Aries:</strong> Hoy los cambios sern fsicos, personales, de carcter, Te sentirs impulsivo y tomars iniciativas. Perodo en donde considerars unirte a agrupaciones 43

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV de beneficencia, o de ayuda a los dems."; if ($_REQUEST['cod']==2) echo "<strong>Tauro:</strong> Hoy los cambios sern privados, ntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de retiro. Tu cnyuge puede aportar buen status a tu vida o apoyo a tu profesin."; if ($_REQUEST['cod']==3) echo "<strong>Gminis:</strong> Los asuntos de hoy tienen que ver con las amistades, reuniones, actividades con ellos. Da esperanzado, ilusiones. Mucha energa sexual y fuerza emocional. Deseos difciles de controlar."; if ($_REQUEST['cod']==4) echo "<strong>Cancer:</strong> Este da la profesin y las relaciones con superiores y con tu madre sern de importancia. Actividad en relacin a estos temas. Momentos positivos con compaeros de trabajo. Actividad laboral agradable."; if ($_REQUEST['cod']==5) echo "<strong>Leo:</strong> Este da los estudios, los viajes, el extranjero y la espiritualidad sern lo importante. Pensamientos, religin y filosofa tambin. Vivencias krmicas de la poca te vuelven responsable tomando decisiones."; if ($_REQUEST['cod']==6) echo "<strong>Virgo:</strong> Para este da toma importancia tu vida sexual, tal vez miedos, temas legales, juicios o herencias. Experiencias extraas. Hay karma de prueba durante este perodo en tu parte psicolgica, generndose algunos replanteos."; if ($_REQUEST['cod']==7) echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con tu pareja, tambin con socios, con la gente o el pblico. Ellos sern lo ms importante del da. Ganancias a travs de especulaciones o del juego. Actividades vocacionales artsticas."; if ($_REQUEST['cod']==8) echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver con temas de trabajo y de salud. Presta atencin a ambos. Experiencias diversas con compaeros. Durante este perodo tendrs muchos recursos para ganar dinero."; if ($_REQUEST['cod']==9) echo "<strong>Sagitario:</strong> Durante este da se vivirn cambios en relacin a los noviazgos o a los hijos. Creatividad, actividad, diversiones y salidas. Perodo de encuentros con personas o situaciones que te impresionan."; if ($_REQUEST['cod']==10) echo "<strong>Capricornio:</strong> Los cambios del da tienen que ver con tu hogar, con la convivencia y con el padre. Asuntos relativos al carcter en la convivencia. El karma de responsabilidad de estos momentos te acercar al mundo de lo desconocido, mucha madurez y contacto con el ms all."; if ($_REQUEST['cod']==11) echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver con el entorno inmediato, hermanos y vecinos, con la comunicacin, los viajes cortos o traslados frecuentes. El hablar y trasladarse ser importante hoy. Mentalidad e ideas activas."; if ($_REQUEST['cod']==12) echo "<strong>Piscis:</strong> Durante este da se vivirn cambios en la economa, movimientos en los ingresos, negocios, valores. Momentos de gran fuerza y decisin profesionales, buscars el liderazgo."; sleep(1); ?> estilos$css #menu { font-family: Arial; margin:5px; } #menu p { margin:0px; padding:0px; 44

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV } #menu a { display: block; padding: 3px; width: 160px; background-color: #f7f8e8; border-bottom: 1px solid #eee; text-align:center; } #menu a:link, #menu a:visited { color: #f00; text-decoration: none; } #menu a:hover { background-color: #369; color: #fff; } #detalles { background-color:#ffc; text-align:left; font-family:verdana; border-width:0; padding:5px; border: 1px dotted #fa0; margin:5px; } +o nuevo en este problema es %ue llamamos al mBtodo aja=Start con el mismo objeto jQuery %ue llama al mBtodo load: function presion%n#ace() & var pa-ina=$(t2is).attr("2ref"); var x=$(" deta##es"); x.ajax<tart(inicio%nvio); x.#oad(pa-ina); return fa#se; ) +ue!o cuando se activa la petici"n de la p(!ina al servidor el objeto jQuery llama a la funci"n inicioEvento' donde mostramos el !if animado: function inicio%nvio() & var x=$(" deta##es"); x.2tm#(?<im- src="../car-ando.-if">?); ) 1o ocultamos el !if animado ya %ue se est( mostrando en el div Ddetalles$ Dic&o div ser( iniciali ado por el objeto jQuery con los datos enviados por el servidor y borrar( el elemento im!$ Ejercicio 0*onfeccionar un problema %ue muestre una lista de &ipervnculos con los distintos si!nos del &or"scopo y lue!o al ser presionado no recar!ue la p(!ina completa sino %ue se enve una petici"n al servidor y el mismo retorne la informaci"n de dic&o si!no' lue!o se actualice solo el contenido de un div del arc&ivo 56M+$ Mostrar un !if animado mientras los datos no lle!aron del servidor$ Disponer el !if en otro div$ Ocultarlo cuando finalice la car!a (aja=Stop# 2% - :.get y :.post);asando datos al servidor por los m'todos <28 y ;6S8* Ctili amos estas funciones cuando no %ueremos inyectar directamente los datos a nuestra p(!ina' sino %ue %ueremos procesarlos y eventualmente a!re!arlos en distintas partes$ 4

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV +a sinta=is de la funci"n A$!et es distinta a la ya utili ada A' en este caso es una funci"n !lobal de la librera jQuery: $.-et(=nom!re de #a p4-ina>+=par4metros a enviarse por e# mKtodo -et>+ =funciAn que reci!e #os datos de# servidor>) *am!iKn podemos ##amar#a@ jLuery.-et(=nom!re de #a p4-ina>+=par4metros a enviarse por e# mKtodo -et>+ =funciAn que reci!e #os datos de# servidor>) +a funci"n A$post es idBntica a la funci"n A$!et' lo Knico %ue difiere es como el protocolo 566, empa%ueta los datos y los enva al servidor$ 1ormalmente se utili a la funci"n A$post' ya %ue no est( limitado la cantidad de datos %ue se pueden enviar al servidor$ Problema:2mplementar una aplicaci"n %ue calcule el cuadrado de un nKmero %ue in!resamos por teclado$ +a operaci"n se reali a en el servidor' le enviamos los datos mediante la funci"n de jQuery A$!et pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <form action="pagina1.php" method="post" id="formulario"> Ingrese nro:<input type="text" name="nro" id="nro" size="10"><br> <input type="submit" value="Calcular el cuadrado" id="enviar"> <div id="resultados"></div> </form> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#enviar"); x.click(presionSubmit); } function presionSubmit() { var v=$("#nro").attr("value"); $.get("pagina1.php",{numero:v},llegadaDatos); return false; } function llegadaDatos(datos) { alert(datos); } pa!ina7$p&p <?php $cuadrado=$_REQUEST['numero']*$_REQUEST['numero']; echo $cuadrado; ?> Reamos el c"di!o JavaScript para comunicarse con el servidor: 4!

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV ,rimero en la funci"n iniciali arEventos enla amos el evento clicF al bot"n submit del formulario: function inicia#i$ar%ventos() & var x; x=$(" enviar"); x.c#ic'(presion<u!mit); ) *uando presionamos el bot"n e=traemos el valor del control te=t y llamamos a la funci"n A$!et indicando el nombre de la p(!ina a llamar' un objeto literal con todos los par(metros y sus valores (en este caso solo tenemos un par(metro llamado numero# y finalmente el nombre de la funci"n %ue se ejecutar( cuando lle!uen los datos del servidor: function presion<u!mit() & var v=$(" nro").attr("va#ue"); $.-et("pa-ina".p2p"+&numero@v)+##e-ada6atos); return fa#se; ) +a funci"n %ue se ejecuta cuando lle!an los datos del servidor recibe un strin!: function ##e-ada6atos(datos) & a#ert(datos); ) 2, - :.getJS6N +a funci"n !etJSO1 &ace una petici"n de datos al servidor considerando %ue retorna la informaci"n con notaci"n JSO1$ +a sinta=is de esta funci"n es: $.-etM<I5(=nom!re de #a p4-ina>+ =par4metros>+ =funciAn que reci!e #os datos>) +a funci"n !etJSO1 procede a !enerar un objeto en JavaScript y nosotros en la funci"n lo procesamos$ Problema:*onfeccionar un sitio %ue permita in!resar el documento de una persona y nos retorne su apellido' nombre y lu!ar donde debe votar$ pa!ina7$&tml <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> Ingrese dni (solo existen los valores 1,2 y 3):<input type="text" name="dni" id="dni" size="10"><br> <input type="button" value="Enviar" id="boton1"> <div id="resultados"></div> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#boton1"); x.click(presionSubmit); 4"

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV } function presionSubmit() { var v=$("#dni").attr("value"); $.getJSON("pagina1.php",{dni:v},llegadaDatos); return false; } function llegadaDatos(datos) { $("#resultados").html("Nombre:"+datos.nombre+ "<br>"+"Apellido:"+ datos.apellido+"<br>"+ "Direccion:"+datos.direccion); } pa!ina7$p&p <?php header('Content-Type: text/txt; charset=ISO-8859-1'); $nombre=''; $apellido=''; $direccion=''; if ($_REQUEST['dni']=='1') { $nombre='Juan'; $apellido='Rodriguez'; $direccion='Colon 123'; } if ($_REQUEST['dni']=='2') { $nombre='Ana'; $apellido='Maldonado'; $direccion='Lima 245'; } if ($_REQUEST['dni']=='3') { $nombre='laura'; $apellido='Pueyrredon'; $direccion='Laprida 785'; } echo "{ 'nombre':'$nombre', 'apellido':'$apellido', 'direccion':'$direccion' }"; ?> *uando se presiona el bot"n submit procedemos a reali ar la petici"n asincr"nica utili ando la funci"n !etJSO1: function presion<u!mit() & var v=$(" dni").attr("va#ue"); $.-etM<I5("pa-ina".p2p"+&dni@v)+##e-ada6atos); return fa#se; ) *omo &emos llamado a la funci"n !etJSO1 la misma nos retorna un objeto JavaScript para procesarlo: function ##e-ada6atos(datos) & $(" resu#tados").2tm#("5om!re@"Cdatos.nom!reC "<!r>"C"0pe##ido@"C datos.ape##idoC"<!r>"C "6ireccion@"Cdatos.direccion); ) 4#

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV 6en!amos en cuenta %ue el pro!rama en el servidor debe retornar un arc&ivo con notaci"n JSO1: <Np2p 2eader(?/ontent.*ype@ text/txt; c2arset=3<I.OOJP."?); $nom!re=??; $ape##ido=??; $direccion=??; if ($Q9%LH%<*=?dni?>==?"?) & $nom!re=?Muan?; $ape##ido=?9odri-ue$?; $direccion=?/o#on "2:?; ) if ($Q9%LH%<*=?dni?>==?2?) & $nom!re=?0na?; $ape##ido=?Ba#donado?; $direccion=?Gima 2RJ?; ) if ($Q9%LH%<*=?dni?>==?:?) & $nom!re=?#aura?; $ape##ido=?7ueyrredon?; $direccion=?Gaprida SOJ?; ) ec2o "& ?nom!re?@?$nom!re?+ ?ape##ido?@?$ape##ido?+ ?direccion?@?$direccion? )"; N> 2/ - :.aja( 5asta a&ora &emos visto %ue jQuery nos provee varias formas de recuperar y enviar datos al servidor utili ando aja=: 7$ MBtodo load 0$ Eunciones A$!et y A$post 9$ A$!etJSO1 E=iste otra funci"n llamada A$aja= %ue es la m(s completa de todas' pero como desventaja es m(s compleja su empleo$ +a sinta=is de la funci"n A$aja= es: ajax(=o!jeto #itera#>) )etorna un objeto 4M+5ttp)e%uest %ue podemos eventualmente utili arlo$ *on un ejemplo veremos las propiedades principales %ue podemos confi!urar en el par(metro a enviar$ Problema:2mplementar una aplicaci"n %ue calcule el cuadrado de un nKmero %ue in!resamos por teclado$ +a operaci"n se reali a en el servidor' le enviamos los datos mediante la funci"n de jQuery A$aja= pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <form action="pagina1.php" method="post" id="formulario"> Ingrese nro:<input type="text" name="nro" id="nro" size="10"><br> <input type="submit" value="Calcular el cuadrado" id="enviar"> 4$

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV <div id="resultados"></div> </form> </body> </html> funciones$js var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=$("#enviar"); x.click(presionSubmit); } function presionSubmit() { var v=$("#nro").attr("value"); $.ajax({ async:true, type: "POST", dataType: "html", contentType: "application/x-www-form-urlencoded", url:"pagina1.php", data:"numero="+v, beforeSend:inicioEnvio, success:llegadaDatos, timeout:4000, error:problemas }); return false; } function inicioEnvio() { var x=$("#resultados"); x.html('<img src="../cargando.gif">'); } function llegadaDatos(datos) { $("#resultados").text(datos); } function problemas() { $("#resultados").text('Problemas en el servidor.'); } pa!ina7$p&p <?php $cuadrado=$_REQUEST['numero']*$_REQUEST['numero']; echo $cuadrado; ?> Reamos %ue datos podemos enviarle a la funci"n A$aja=: function presion<u!mit() & var v=$(" nro").attr("va#ue"); $.ajax(& async@true+ type@ "7I<*"+ data*ype@ "2tm#"+ %

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV content*ype@ "app#ication/x.FFF.form.ur#encoded"+ ur#@"pa-ina".p2p"+ data@"numero="Cv+ !efore<end@inicio%nvio+ success@##e-ada6atos+ timeout@R,,,+ error@pro!#emas )); return fa#se;

5emos iniciali ado las si!uientes propiedades:


async : 2ndica si la comunicaci"n ser( asincr"nica (true# o sincr"nica (false# type : 2ndica el mBtodo %ue se envan los datos (pudiendo ser SE6 o ,OS6# data6ype : 2ndica el tipo de datos %ue se va a recuperar (pudiendo ser <&tml<'<=ml<'<json<'<script<# content6ype : 2ndicamos como se empa%uetan los datos para enviarlos al servidor (normalmente <application>=-PPP-form-urlencoded<# url : 2ndicamos el nombre de la p(!ina %ue procesar( la petici"n de datos$ data : 2ndicamos los datos a enviar al servidor$ beforeSend : 2ndicamos el nombre de la funci"n %ue se ejecutar( previo al envo de datos (en nuestro ejemplo mostramos el !if animado %ue indica %ue se inici" el pedido de datos al servidor# success : 2ndicamos la funci"n %ue se ejecuta cuando finali " el envo de datos del servidor y adem(s ocurri" todo en forma correcta (en nuestro ejemplo recuperamos el dato devuelto y lo mostramos en la p(!ina# timeout : El tiempo m(=imo a esperar por la petici"n de datos$ error : El nombre de la funci"n %ue se ejecuta si los datos no lle!an del servidor$

30 - =unciones annimas en nuestro cdigo. Si visitamos sitios sobre jQuery podremos comprobar %ue la sinta=is empleada es muc&o m(s compacta %ue todos los ejemplos %ue venimos viendo$ El objetivo de este tutorial es aprender jQuery de una forma sencilla' pero estara inconcluso si no introducimos la forma m(s &abitual de pro!ramar con jQuery (funciones an"nimas y encadenamiento de llamadas con el objeto jQuery# Reamos como se or!ani a nuestro c"di!o utili ando funciones an"nimas$ Problema:*onfeccionar una p(!ina %ue muestre dos ttulos de primer nivel' al ser presionados cambiar el color de fuente' fondo y la fuente del te=to$ pa!ina7$&tml <html> <head> <title>Problema</title> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <h1 id="titulo1">Primer ttulo</h1> <h1 id="titulo2">Segundo ttulo</h1> </body> </html> funciones$js var x; x=$(document); x.ready(function(){ var x; 1

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV x=$("#titulo1"); x.click(function() { var x; x=$("#titulo1"); x.css("color","#ff0000"); x.css("background-color","#ffff00"); x.css("font-family","Courier"); }); x=$("#titulo2"); x.click(function () { var x; x=$("#titulo2"); x.css("color","#ffff00"); x.css("background-color","#ff0000"); x.css("font-family","Arial"); }); }) *omo podemos observar el c"di!o a %uedado muc&o m(s compacto$ 1ormalmente uno utili a funciones an"nimos cuando el al!oritmo contenido en la funci"n solo se re%uiere para dic&o evento$ +a sinta=is para definir una funci"n an"nima: x.ready(function()& ...... )) *omo vemos llamamos al mBtodo ready y entre parBntesis incluimos la funci"n tal como las venimos implementando en conceptos anteriores pero sin nombre$ 6ambiBn es interesante ver %ue podemos disponer otras funciones an"nimos dentro de una funci"n an"nima: x.c#ic'(function () & ...... )); Ejercicio 9. *onfeccionar una p(!ina %ue muestre una tabla con dos filas cambiar el color de fondo cuando sea presionada con el mouse$ 31 - >lamadas encadenadas de m'todos del o-jeto jQuery. Otra caracterstica muy utili ada en la librera jQuery es la llamada sucesiva de mBtodos' esto se puede &acer ya %ue casi todos los mBtodos de la clase jQuery retornan un objeto de tipo jQuery$ ,ara entender esta sinta=is implementaremos un problema$ Problema:*onfeccionar una p(!ina %ue muestre un recuadro con te=to$ Disponer dos botones' uno %ue cambie la opacidad lentamente &asta el valor .$H' se!uidamente oculte el recuadro tambiBn lentamente' y el otro bot"n %ue lo muestre en forma instant(nea y aumente su opacidad al 7..T$ pa!ina7$&tml <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <input type="button" id="boton1" value="Reducir opacidad y ocultar"> <input type="button" id="boton2" value="Mostrar en forma instantnea"> <div id="descripcion" class="recuadro"> <p>HTML es el lenguaje que se emplea para el desarrollo de pginas de internet.</p> 2

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV <p>Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imgenes sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc.</b><p>Para poder crear una pgina HTML se requiere un simple editor de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este preciso momento est utilizando (recuerde que usted est viendo en este preciso momento una pgina HTML con su navegador).</p> <p>Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.<p> <p>Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj con el mismo. No pretende mostrar todas los elementos HTML en forma alfabtica.</p> <p>Como veremos, de cada concepto se presenta una parte terica, en la que se da una explicacin completa, luego se pasa a la seccin del ejercicio resuelto donde podemos ver el contenido de la pgina HTML y cmo la visualiza el navegador. Por ltimo y tal vez la seccin ms importante de este tutorial es donde se propone que usted haga pginas en forma autnoma (donde realmente podr darse cuenta si el concepto qued firme).</p> </div> </body> </html> funciones$js $(document).ready(function () { $("#boton1").click(function () { $("#descripcion").fadeTo("slow",0.5).hide("slow"); }); $("#boton2").click(function () { $("#descripcion").show().fadeTo("slow",1); }) }) estilos$css .recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px; border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:1px; border-top-style:dotted; border-right-style:solid; border-bottom-style:solid; border-left-style:dotted; border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00; } *omo podemos observar en la si!uiente lnea tenemos llamadas encadenadas: $(" descripcion").fade*o("s#oF"+,.J).2ide("s#oF"); estilos$css

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV $recuadro U bacF!round-color:DffffccV font-family:verdanaV font-si e:7Ip=V border-top-Pidt&:7p=V border-ri!&tPidt&:9p=V border-bottom-Pidt&:9p=V border-left-Pidt&:7p=V border-top-style:dottedV border-ri!&t-style:solidV border-bottom-style:solidV border-left-style:dottedV border-top-color:Dffaa..V border-ri!&t-color:Dff....V borderbottom-color:Dff....V border-left-color:Dffaa..V W ,rimero obtenemos la referencia del id descripcion' la funci"n A nos retorna un objeto jQuery %ue utili amos directamente para llamar al mBtodo fade6o para aumentar su opacidad lentamente$ Se!uidamente el mBtodo fade6o nos retorna la referencia del objeto jQuery y la utili amos para llamar al mBtodo &ide indic(ndole %ue oculte el div lentamente$ Es importante notar %ue los mBtodos se ejecutan de i %uierda a derec&a$ )ecordemos como era nuestro c"di!o cuando comen amos a estudiar jQuery: var x; x=$(document); x.ready(inicia#i$ar%ventos); function inicia#i$ar%ventos() & var x=$(" !oton""); x.c#ic'(ocu#tar9ecuadro); x=$(" !oton2"); x.c#ic'(mostrar9ecuadro); ) function ocu#tar9ecuadro() & var x=$(" descripcion"); x.fade*o("s#oF"+,.J); x.2ide("s#oF"); ) function mostrar9ecuadro() & var x=$(" descripcion"); x.s2oF(); x.fade*o("s#oF"+"); ) *on funciones an"nimas y encadenamiento de llamadas a mBtodos: $(document).ready(function () & $(" !oton"").c#ic'(function () & $(" descripcion").fade*o("s#oF"+,.J).2ide("s#oF"); )); $(" !oton2").c#ic'(function () & $(" descripcion").s2oF().fade*o("s#oF"+"); )) )) +ue!o de &aber estudiado jQuery con la metodolo!a lar!a no debera ser muy difcil adaptarse a esta metodolo!a resumida$ Ejercicio 97 *onfeccionar un problema %ue muestre una lista de &ipervnculos con los distintos si!nos del &or"scopo y lue!o al ser presionado no recar!ue la p(!ina completa sino %ue se enve una petici"n al servidor y el mismo retorne la informaci"n de dic&o si!no' lue!o se actualice solo el contenido de un div del arc&ivo 56M+ 32 - &ostrar un tooltip con datos recuperados del servidor en $orma asincrnica 2mplementaremos un problema utili ando todos los conceptos aprendidos &asta a&ora$ Problema 2mplementar un 6ooltip con jQuery recuperando la informaci"n a mostrar del servidor en forma asincr"nica$ 3!re!ar una ima!en al tooltip$ En el servidor ya &ay cuatro im(!enes llamadas ima!en7$jp!' ima!en0$jp! etc$ 4

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV y se encuentran en el directorio inmediatamente superior a donde se almacenan las p(!inas$ ( :im! src;<$$>ima!en7$jp!<? # pa!ina7$&tml <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <p>Entre con el mouse al recuadro.</p> <div class="cuadradito" id="c1"></div> <div class="cuadradito" id="c2"></div> <div class="cuadradito" id="c3"></div> <div class="cuadradito" id="c4"></div> </body> </html> estilos$css .cuadradito{ background-color: #f00; height: 50px; width: 50px; margin:3px; z-index: -1; } #divmensaje { background-color: yellow; position: absolute; padding: 5px; width:250px; left:120px; top:100px; z-index: 100; } funciones$js $(document).ready(function () { $("body").append('<div id="divmensaje">hhhh</div>'); $("#divmensaje").hide(); $(".cuadradito").hover(function (e) { $("#divmensaje").show(); $("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5); $("#divmensaje").css("top",e.clientY+document.body.scrollTop+5); $("#divmensaje").load("pagina1.php?cod="+$(this).attr('id')); }, function () { $("#divmensaje").hide(); }) $(".cuadradito").mousemove(function (e){ $("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5); $("#divmensaje").css("top",e.clientY+document.body.scrollTop+5); }) }) pa!ina7$p&p <?php if ($_REQUEST['cod']=='c1') { echo "<img src=\"../imagen1.jpg\">";

echo echo echo echo echo echo

Universidad Nacional de Itapua Lic. en Inf. Empresarial - Programacion IV "<p>Primer tooltip.</p>"; "<p>aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa"; "aaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaa"; "aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa aaaaaaa"; "aaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa"; "aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaaaa</p>";

} if ($_REQUEST['cod']=='c2') { echo "<img src=\"../imagen2.jpg\">"; echo "<p>Segundo tooltip.</p>"; echo "<p>bbbbbbbb bbbbbbbbbbb bbbbbbbb bbbbbbbbbbbbbb bbbbbbbbbbb bb"; echo "bbbbbbbb bbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbb</p>"; } if ($_REQUEST['cod']=='c3') { echo "<img src=\"../imagen3.jpg\">"; echo "<p>Tercer tooltip.</p>"; } if ($_REQUEST['cod']=='c4') { echo "<img src=\"../imagen4.jpg\">"; echo "<p>Cuarto tooltip.</p>"; } ?> *omo podemos ver el c"di!o JavaScript utili ando la librera jQuery %ueda muy compacto y reducido: $(document).ready(function () & $("!ody").append(?<div id="divmensaje">2222</div>?); $(" divmensaje").2ide(); $(".cuadradito").2over(function (e) & $(" divmensaje").s2oF(); $(" divmensaje").css("#eft"+e.c#ientDCdocument.!ody.scro##GeftCJ); $(" divmensaje").css("top"+e.c#ientECdocument.!ody.scro##*opCJ); $(" divmensaje").#oad("pa-ina".p2pNcod="C$(t2is).attr(?id?)); )+ function () & $(" divmensaje").2ide(); )) $(".cuadradito").mousemove(function (e)& $(" divmensaje").css("#eft"+e.c#ientDCdocument.!ody.scro##GeftCJ); $(" divmensaje").css("top"+e.c#ientECdocument.!ody.scro##*opCJ); )) ))