Guia 5

Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 1 de 29
INFORMACIÓN GENERAL
IDENTIFICACIÓN DE LA GUÍA: JQUERY
FECHA DE APLICACIÓN: 16/05/11
PROGRAMA DE FORMACIÓN: Análisis y Desarrollo de SI
ID: 35613
CENTRO: Automatización Industrial
• Realizar la codificación de los módulos del sistema y el programa principal, a partir
de la utilización del lenguaje de programación seleccionado, de acuerdo con las
especificaciones del diseño.
CRITERIOS DE EVALUACIÓN:
• Utiliza las herramientas de desarrollo para la codificación de los módulos del
sistema, aplicando funciones propias del lenguaje de programación seleccionado,
de acuerdo con las necesidades del sistema de información.
NOMBRE DEL INSTRUCTOR- TUTOR: MAURICIO CASTAÑO BERNAL
DESARROLLO DE LA GUIA
INTRODUCCIÓN
La historia de AJAX está íntimamente relacionada con un objeto de

programación llamado
XMLHttpRequest. El origen de este objeto se remonta al año 2000, con productos
como Exchange 2000, Internet Explorer 5 y Outlook Web Access.
Que es el jQuery?
El jQuery es una librería de JavaScript para acceder a los objetos del DOM de un
modo simplificado.
El sitio oficial de la librería es http://jquery.com/, donde puedes descargar la librería y además

encontrar diferentes componentes para aplicar a los proyectos
Las aplicaciones en internet son cada vez más complejas, ya que incorporan
efectos visuales, drag and drop, auto-completar, animaciones etc. el desarrollar
todos estos conceptos desde cero puede resultar complicado sobretodo si
tenemos que presentar la solución con muy poco tiempo, en este tipo de
situaciones el empleo de librerías como el jQuery nos facilitan el desarrollo de la
aplicación. Otra ventaja paralela es despreocuparnos cuando codificamos en la
compatibilidad de navegadores, ya que la librería resolverá esto.
Mejora Continua
Página 2 de 29
Para utilizar la librería como dijimos debemos descargarla del sitio oficial y en cada
página que lo requiera agregar:
<script type="text/javascript" src="jquery.js"></script>
Del sitio oficial de jQuery descargaremos la versión descomprimida que ocupa

alrededor de 60 Kb (es el archivo jquery.js) y cuando subamos nuestro sitio es
recomendable descargar la versión comprimida que tiene un peso de 20 Kb.
La librería jQuery en resumen nos aporta las siguientes ventajas:
• Nos ahorra muchas líneas de código.
• Nos hace transparente el soporte de nuestra aplicación para los

navegadores principales.
• Nos provee de un mecanismo para la captura de eventos.
• Provee un conjunto de funciones para animar el contenido de la página en

forma muy sencilla.
• Integra funcionalidades para trabajar con AJAX.

Nueva manera de programar JavaScript con jQuery
Dispongamos el problema trivial de capturar el evento de un control HTML de tipo

button, lo desarrollaremos utilizando la metodología tradicional accediendo
directamente a las funciones del DOM y luego empleando la librería jQuery:
pagina1.html
<html>
<head>
<title>Problema</title>
</head>
<body>
<h2>Captura del evento click de un control HTML de tipo button.</h2>
<a href="pagina2.html">Método tradicional con las funciones
del DOM </a><br>
<a href="pagina3.html">Utilizando la librería jQuery</a><br>
</body>
</html>
Mejora Continua
Página 3 de 29
pagina2.html
<html>
<head>
<script type="text/javascript" src="funciones1.js"></script>
</head>
<body>
<input type="button" id="boton1" value="presioname">
</body>
</html>
funciones1.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 botón');
}
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;
}
Ahora el mismo ejemplo Utilizando JQuery
pagina3.html
<html>
<head>
Mejora Continua
Página 4 de 29
<script type="text/javascript" src="../jquery.js"></script>
</head>
<body>
<input type="button" id="boton1" value="presioname">
</body>
</html>
Lo primero que tenemos en cuenta es que debemos importar la librería:

Siempre debemos disponer esta inclusión de la librería antes de incluir los otros
archivos *.js que utilizan esta librería, es por eso el orden:
funciones2.js
var x;
x=$(document);
x.ready(inicializarEventos);
{
var x;
x=$("#boton1");
x.click(presionBoton)
}
function presionBoton()
{
alert("Se presionó el botón");
}
La función principal de esta librería se llama $.
A la función $ le podemos pasar distintos valores como veremos (en la primer

llamada le pasamos la referencia del objeto document del DOM y en la segunda el
id del control button):
x=$(document);
...
x=$("#boton1");
Esta función nos devuelve un objeto de tipo jQuery.

Mejora Continua
Página 5 de 29
El primer método que nos interesa de esta clase es el ready:

var x;
x=$(document);
El método ready tiene como parámetro un nombre de función. Esta función se

ejecutará cuando todos los elementos de la página estén cargados. Es importante
notar que solo pasamos el nombre de la función y no disponemos los paréntesis
abiertos y cerrados al final.
El código de esta función:
{
var x;
x=$("#boton1");
x.click(presionBoton)
}
Utilizamos nuevamente la función $ para crear un objeto de la clase jQuery pero

ahora asociándolo al botón (esto lo hacemos pasando el id del control button
precediéndolo por el caracter # y encerrado entre paréntesis. Finalmente llamamos
al método click pasándo como parámetro el nombre de la función que se ejecutará
al presionar dicho botón.
Selección de un elemento del documento mediante el id.
La sintaxis para seleccionar un elemento particular de la página mediante la

propiedad id es:
$("#nombre del id")
Confeccionaremos un problema para ver como obtenemos la referencia a

elementos HTML particulares mediante el id.
Problema:Confeccionar una página que muestre dos títulos de primer nivel, al ser
presionados cambiar el color de la fuente, fondo y la fuente del texto.
pagina1.html
<html>
<head>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<h1 id="titulo1">Primer título</h1>
Mejora Continua
Página 6 de 29
<h1 id="titulo2">Segundo título</h1>

</body>
</html>
funciones.js
var x;
x=$(document);
{
var x;
x=$("#titulo1");
x.click(presionTitulo1)
x=$("#titulo2");
}
function presionTitulo1()
{
var x;
x=$("#titulo1");
x.css("color","#ff0000");
x.css("background-color","#ffff00");
x.css("font-family","Courier");
}
{
var x;
x=$("#titulo2");
x.css("color","#ffff00");
x.css("background-color","#ff0000");
x.css("font-family","Arial");
}
Como va ser costumbre siempre que trabajemos con esta librería primero creamos
un objeto jquery a partir de la referencia a 'document' y luego llamamos al método
ready indicándole el nombre de la función que debe ejecutarse luego de generarse
el árbol de elementos HTML para la página:
var x;
x=$(document);
La función inicializarEventos se ejecuta una vez que se cargó la página y están

creados todos los elementos HTML, en esta función mediante $ accedemos a
través del id a los elementos h1 respectivos, a casa uno le asignamos al evento
click una función distinta que se disparará cuando presionemos con el mouse:
Mejora Continua
Página 7 de 29
{
var x;
x=$("#titulo1");
x=$("#titulo2");
}
Luego las dos funciones que se ejecutan al presionar los títulos:

{
var x;
x=$("#titulo1");
}
{
var x;
x=$("#titulo2");
x.css("color","#ffff00");
x.css("font-family","Arial");
}
Hasta ahora hemos presentado los siguientes métodos que tiene jquery:
ready
click
El tercer método nos permite modificar una propiedad de la hoja de estilo de un

elemento HTML:
var x;
x=$("#titulo1");
Una vez que hemos obtenido la referencia a un elemento HTML llamamos al

método css que tiene dos parámetros: el primero indica el nombre de la propiedad
y el segundo el valor a asignarle. Podemos ver las otras dos asignaciones:
Como podemos ver es muy fácil acceder al estilo de un elemento HTML para
actualizarlo en forma dinámica luego que la página fue cargada.
Selección de elementos por el tipo de elementos.
La sintaxis para tener la referencia de todos los elementos de cierto tipo (a, p, h1,
Mejora Continua
Página 8 de 29
etc.):
$("nombre del elemento")
Problema
Confeccionar una tabla con 5 filas. Hacer que cambie de color la fila que se
presiona con el mouse. Obtener la referencia a todos los elementos 'tr'.
pagina1.html
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
funciones.js
var x;
x=$(document);
{
var x;
x=$("tr");
x.click(presionFila);
}
function presionFila()
Mejora Continua
Página 9 de 29
{
var x;
x=$(this);
x.css("background-color","eeeeee");
}
Con la siguiente sintaxis obtenemos la referencia a todos los elementos HTML de

tipo 'tr':
var x;
x=$("tr");
x.click(presionFila);
y a todos ellos los enlazamos con la función presionFila

Cuando se presiona cualquiera de las filas de la tabla se ejecuta la siguiente
función:
function presionFila()
{
var x;
x=$(this);
x.css("background-color","eeeeee");
}
Para obtener la referencia de que elemento en particular disparó el evento

podemos hacerlo de la siguiente manera:
x=$(this);
y a partir de esta referencia llamar al método css.
Métodos text(), text(valor)
Para saber el contenido de un elemento el objeto jQuery cuenta con un método

llamado text(), por ejemplo:
var x=$("#parrafo1");
luego si hacemos x.text() obtenemos el contenido del párrafo con id igual a

parrafo1.
Luego si queremos cambiar el texto del párrafo deberíamos disponer:
x.text("Este es el texto nuevo");
Pero hay que tener mucho cuidado cuando utilizamos jQuery ya que podemos
cambiar el contenido de muchos elementos con una sola llamada al método text,
Mejora Continua
Página 10 de 29
por ejemplo:
var x=$("p");
x.text("Este texto aparece en todos los párrafos del documento");
El código anterior crea un objeto jQuery con la referencia a todos los párrafos
contenidos en el documento. Luego si llamamos al método text enviándole una
cadena, esta aparecerá en todo el documento remplazando el contenido de los
párrafos actuales.
El siguiente problema muestra el acceso y modificación unitaria y múltiple de

contenidos de elementos.
<html>
<head>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="Obtener el texto contenido en un
párrafo" id="boton1"><br>
<input type="button" value="Modificar el texto de un párrafo"
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 párrafo</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>
Mejora Continua
Página 11 de 29
funciones.js
var x;
x=$(document);
{
var x=$("#boton1");
x.click(extraerTexto);
x=$("#boton2");
x.click(modificarTexto);
x=$("#boton3");
x.click(modificarDatosTabla);
}
function extraerTexto()
{
alert(x.text());
}
function modificarTexto()
{
x.text("Nuevo texto del párrafo");
}
function modificarDatosTabla()
{
var x=$("td");
x.text("texto nuevo");
}
Como vemos esta página tiene tres botones, al presionarse el primero se dispara
la función:
function extraerTexto()
{
alert(x.text());
}
Obtenemos la referencia al párrafo mediante su id (recordemos que en una página

todos los valores de los id son distintos), luego extraemos el contenido mediante el
método text() y lo mostramos en un alert.
La segunda función cambia el contenido del párrafo:
function modificarTexto()
{
x.text("Nuevo texto del párrafo");
Mejora Continua
Página 12 de 29
Obtenemos la referencia del párrafo mediante su id y llamamos al método text

enviándole el nuevo string a mostrar.
Por último la función:
function modificarDatosTabla()
{
var x=$("td");
x.text("texto nuevo");
}
Crea 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
método text modifica el contenido de todos ellos (todos los td del documento se
cambian por el string "nuevo texto")
Administración de eventos con jQuery.
jQuery facilita la administración de eventos de JavaScript y lo más importante nos

hace transparente la diferencia en la registración de eventos entre distintos
navegadores (IExplorer, FireFox)
confeccionaremos una página que muestre un párrafo, luego una tabla que
contenga dos párrafos y por último otra tabla que contenga dos párrafos.
Capturaremos el evento click de todos los párrafos del documento y mostraremos
un mensaje indicando:'se presionó un párrafo del documento', también
capturaremos el evento click del los dos párrafos de la segunda tabla y
mostraremos: 'se presionó un párrafo contenido en la segunda tabla.'.
pagina1.html
<html>
<head>
</head>
<body>
<p>Párrafo fuera de la tabla</p>
<table border="1">
<tr>
<td><p>Párrafo dentro de la primer tabla.</p></td><td><p>Párrafo
dentro de la primer tabla.</p></td>
</tr>
</table>
Mejora Continua
Página 13 de 29
<br>
<table border="1" id="tabla2">
<tr>
<td><p>Párrafo dentro de la segunda tabla.</p></td><td><p>Párrafo
dentro de la segunda tabla.</p></td>
</tr>
</table>
</body>
</html>
funciones.js
var x;
x=$(document);
{
var x;
x=$("p");
x.click(presionParrafoDocumento);
x=$("#tabla2 p");
x.click(presionpresionParrafoSegundaTabla);
}
function presionParrafoDocumento()
{
alert('se presionó un párrafo del documento');
}
function presionpresionParrafoSegundaTabla()
{
alert('se presionó un párrafo contenido en la segunda tabla.');
}
El siguiente código asocia a cada elemento de tipo "p" (párrafo del documento) la
función 'presionParrafoDocumento':
x=$("p");
x.click(presionParrafoDocumento);
Luego cuando ejecutemos este documento cada vez que presionemos un párrafo
de la página mostrará el mensaje 'se presionó un párrafo del documento'.
También asociamos otra función para el evento click de los párrafos contenidos
dentro de la segunda tabla:
x=$("#tabla2 p");
x.click(presionpresionParrafoSegundaTabla);
Esto significa que los párrafos contenidos en la segunda tabla tienen asociados
dos funciones para el evento click, luego cuando presionemos alguno de los
párrafos de la segunda tabla aparecerán los dos mensajes: 'se presionó un párrafo
Mejora Continua
Página 14 de 29
del documento' y 'se presionó un párrafo contenido en la segunda tabla.'
Eventos mouseover y mouseout.
Para probar estos dos eventos implementaremos una página que contenga tres
botones y cuando ingrese la flecha del mouse al botón cambiaremos el color de
texto del mismo, retornando el color original cuando retiramos la flecha del control.
Implementaremos una página que contenga tres hipervínculos, cuando ingrese la
flecha del mouse al hipervínculo cambiaremos el color de fondo, retornando el
color original cuando retiramos la flecha del elemento.
pagina1.html
<html>
<head>
</head>
<body>
<a href="http://www.lavoz.com.ar">La Voz del Interior</a>
<br>
<a href="http://www.lanacion.com.ar">La nación</a>
<br>
<a href="http://www.clarin.com.ar">El clarín</a>
<br>
</body>
</html>
funciones.js
var x;
x=$(document);
{
var x;
x=$("a");
x.mouseover(entraMouse);
x.mouseout(saleMouse);
}
function entraMouse()
{
$(this).css("background-color","#ff0");
}
Mejora Continua
Página 15 de 29
function saleMouse()
{
$(this).css("background-color","#fff");
}
Otras de las funcionalidades que nos permite la librería JQuery, es la manipulación dinámica de los
elementos de las páginas web html y la manipulación de la información enviada a los lenguajes de
programación dinámicos, como php, asp y jsp.
Manipulación de los elementos del DOM
JQuery dispone de una serie de métodos que nos facilitan el tratamiento de los
elementos del Dom.
Confeccionaremos un problema que haga uso de estos métodos.
Problema: Implementar una página que contenga una lista con cuatro items.
Probar distintos métodos para manipular la lista (borrar, insertar)
pagina1.html
<html>
<head>
</head>
<body>
<h1>Métodos para manipular nodos del DOM con jQuery.</h1>
<ul>
<li>Primer item.</li>
<li>Segundo item.</li>
<li>Tercer item.</li>
<li>Cuarto item.</li>
</ul>
<input type="button" id="boton1" value="Eliminar la lista completa."><br>
<input type="button" id="boton2" value="Restaurar Lista"><br>
<input type="button" id="boton3" value="Añadir un elemento al final de la lista"><br>
<input type="button" id="boton4" value="Añadir un elemento al principio de la lista"><br>
<input type="button" id="boton5" value="Eliminar el último elemento."><br>
<input type="button" id="boton6" value="Eliminar el primer elemento."><br>
<input type="button" id="boton7" value="Eliminar el primero y segundo elemento."><br>
<input type="button" id="boton8" value="Eliminar los dos últimos."><br>
</body>
</html>
Mejora Continua
Página 16 de 29
funciones.js
var x;
x=$(document);
{
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>");
}
function eliminarElementoFinal()
{
var x;
x=$("li");
Mejora Continua
Página 17 de 29
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:lt(2)");
x.remove();
}
function eliminarDosUltimos()
{
var x;
x=$("li");
x=x.slice(x.length-3, x.length);
x.remove();
}
Para borrar todos los elementos contenidos en una lista obtenemos la referencia
de la lista mediante la función $ y seguidamente llamamos al método empty:
function eliminarElementos()
{
var x;
x=$("ul");
x.empty();
}
Para restaurar la lista utilizamos el método html insertando directamente los item a
partir del elemento ul:
function restaurarLista()
{
$("ul").html('<li>Primer item.</li><li>
Segundo item.</li><li>Tercer item.</li><li>Cuarto item.</li>');
}
Para añadir un elemento al final de la colección de elementos del objeto jQuery

disponemos del método append:
function anadirElementoFinal()
{
var x;
x=$("ul");
x.append("<li>otro item al final</li>");
}
Mejora Continua
Página 18 de 29
Para añadir un elemento al principio disponemos de un método llamado prepend:

function anadirElementoPrincipio()
{
var x;
x=$("ul");
x.prepend("<li>otro item al principio</li>");
}
Para eliminar un elemento del final de la lista, primero obtenemos la cantidad de

elementos que almacena el objeto jQuery por medio de la propiedad length y luego
mediante el método eq (equal) indicamos la posición del elemento que
necesitamos (el método eq retorna otro objeto de tipo jQuery) y por último
llamamos al método remove:
function eliminarElementoFinal()
{
var x;
x=$("li");
var cantidad=x.length;
x=x.eq(cantidad-1);
x.remove();
}
Para eliminar un elemento del principio es similar a borrar el último, pero aquí no
necesitamos saber la cantidad de elementos que almacena el objeto jQuery ya
que debemos acceder al primero (el primero se almacena en la posición cero):
function eliminarElementoPrincipio()
{
var x;
x=$("li");
x=x.eq(0);
x.remove();
}
Para eliminar el primero y segundo elemento que almacena el objeto jQuery

disponemos de un método lt (low than) que retorna todos los elementos menores a
la posición que le pasamos como parámetro (en nuestro ejemplo nos retorna los
elementos de la posición 0 y 1:
function eliminarPrimeroSegundo()
{
var x;
x=$("li:lt(2)");
x.remove();
}
Para eliminar los dos elementos finales podemos rescatarlos mediante el método
gt (great than) que retorna un objeto jQuery con todos los elementos que superan
la posición que le indicamos en el parámetro:
Mejora Continua
Página 19 de 29
Para eliminar los dos elementos finales podemos rescatarlos mediante el método
gt (great than) que retorna un objeto jQuery con todos los elementos que superan
la posición que le indicamos en el parámetro:
function eliminarDosUltimos()
{
var x;
x=$("li");
x=x.slice(x.length-3, x.lentgh);
x.remove();
}
Otro de los selectores útiles para realizar el desplazamiento entre el arreglo de los
elementos de la pagina que se cargan en el JQuery es el metodo .slice(start, [end]), que
permite seleccionar los elementos del arreglo de componentes desde un inicio hasta un fin, o
partir de determinada posición.
Ejemplos
$('li').slice(2).css('background-color', 'red');
$('li').slice(2, 4).css('background-color', 'red');
Ejercicio
Crear una página para un local de comidas rápidas, donde cada una de las mesas posee un
dispositivo electrónico que permite por medio de el mouse adicionar los productos que los clientes
desean consumir en ese momento, haciendo clic en un listado que posee la totalidad de los
productos ofrecidos por el restaurante
Efectos con los métodos show y hide.
Una característica muy interesante de jQuery que nos provee de un serie de

efectos visuales.
Problema: Confeccionar una página que muestre un recuadro con texto. Disponer
dos botones, uno que oculte lentamente el cuadro y el otro que lo
muestre rápidamente.
pagina1.html
<html>
<head>
Mejora Continua
Página 20 de 29
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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 páginas
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
imágenes
sobre una página, hipervínculos que nos permiten dirigirnos a otra
página, listas, tablas
para tabular datos, etc.</b>
<p>Para poder crear una página 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 página HTML con su navegador).</p>
<p>Lo más 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 alfabética.</p>
<p>Como veremos, de cada concepto se presenta una parte teórica,
en la que se da una
explicación completa, luego se pasa a la sección del ejercicio resuelto
donde podemos
ver el contenido de la página HTML y cómo la visualiza el navegador.
Por último y
tal vez la sección más importante de este tutorial es donde se propone
que usted
haga páginas en forma autónoma (donde realmente podrá darse
cuenta si el concepto quedó firme).</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);
{
var x=$("#boton1");
x.click(ocultarRecuadro);
x=$("#boton2");
x.click(mostrarRecuadro);
Mejora Continua
Página 21 de 29
function ocultarRecuadro()
{
var x=$("#descripcion");
x.hide("slow");
}
function mostrarRecuadro()
{
x.show("fast");
}
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;
}
La función ocultarRecuadro se ejecuta cuando presionamos el botón de "Ocultar

recuadro":
{
x.hide("slow");
}
donde obtenemos la referencia del div mediante su id y procedemos a llamar al

método hide pasándole el string "slow", con esto logramos que se oculte el
recuadro lentamente.
De forma similar la función mostrarRecuadro:
{
Mejora Continua
Página 22 de 29
x.show("fast");
}
llama a la función show pasando como parámetro el string "fast".

Hay varias formas para llamar a los métodos show y hide:
Lo muestra en forma instantanea:
show()
Lo muestra con una animación rápida:

show("fast")
Lo muestra con una animación normal:

show("normal")
Lo muestra con una animación lenta:

show("slow")
Lo muestra con una animación que tarda tantos milisegundos como le indicamos:
show([cantidad de milisegundos])
Lo muestra con una animación que tarda tantos milisegundos como le indicamos y
ejecuta al final la función que le pasamos como segundo parámetro:
show([cantidad de milisegundos],[función])
De forma similar funciona el método hide.
Efectos con los métodos fadeIn y fadeOut.
Estos dos métodos son similares a show y hide pero con la diferencia que fadeIn
hace aparecer los elementos HTML con opacidad. El método fadeOut decolora
hasta desaparecer, es decir reduce la opacidad del elemento en forma progresiva.
Problema: Confeccionar una página que muestre un recuadro con texto. Disponer
dos botones, uno que oculte (fadeOut) y el otro que lo muestre (fadeIn).
pagina1.html
<html>
<head>
Mejora Continua
Página 23 de 29
</head>
<body>
<input type="button" id="boton1" value="Ocultar recuadro">
<input type="button" id="boton2" value="Mostrar recuadro">
de internet.</p>
y las despliega en la pantalla
de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes
sobre una página, hipervínculos
que nos permiten dirigirnos a otra página, listas, tablas para tabular
datos, etc.</b>
<p>Para poder crear una página 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 página HTML con su
navegador).</p>
propuestos y modifique los que se
presentan ya resueltos.<p>
nunca antes trabajó con el mismo.
No pretende mostrar todas los elementos HTML en forma alfabética.</p>
en la que se da una explicación completa,
luego se pasa a la sección del ejercicio resuelto donde podemos ver el
contenido de la página HTML y cómo
la visualiza el navegador. Por último y tal vez la sección más
importante de este tutorial es donde se
propone que usted haga páginas en forma autónoma (donde realmente
podrá darse cuenta si el concepto quedó
firme).</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);
{
var x=$("#boton1");
x.click(ocultarRecuadro);
x=$("#boton2");
x.click(mostrarRecuadro);
}
{
x.fadeOut("slow");
Mejora Continua
Página 24 de 29
{
x.fadeIn("slow");
}
estilos.css
.recuadro {
font-size:14px;
}
La función ocultarRecuadro se ejecuta cuando presionamos el botón de "Ocultar

recuadro":
{
x.fadeOut("slow");
}
donde obtenemos la referencia del div mediante su id y procedemos a llamar al

método fadeOut pasándole el string "slow", con esto logramos que se oculte el
recuadro se decolore lentamente hasta desaparecer.
De forma similar la función mostrarRecuadro:
{
x.fadeIn("slow");
}
llama a la función fadeIn pasando como parámetro el string "slow".

Mejora Continua
Página 25 de 29
Las formas de llamar a los métodos fadeIn y fadeOut:

Lo muestra con una animación rápida:
fadeIn("fast")
Lo muestra con una animación normal:

fadeIn("normal")
Lo muestra con una animación lenta:

fadeIn("slow")
Lo muestra con una animación que tarda tantos milisegundos como le indicamos:
fadeIn([cantidad de milisegundos])
Lo muestra con una animación que tarda tantos milisegundos como le indicamos y
ejecuta al final la función que le pasamos como segundo parámetro:
fadeIn([cantidad de milisegundos],[función])
De forma similar funciona el método fadeOut.
Efecto con el método toggle.
El método toggle permite cada vez que se ejecute cambiar de estado la visibilidad
del elemento HTML, es decir si está visible pasa a oculto y si se encuentra oculto
pasa a visible.
Problema: Hacer que un bloque de información pase de visible a oculto

lentamente y viceversa al presionar un botón.
pagina1.html
<html>
<head>
</head>
<body>
<input type="button" id="boton1" value="Mostrar/Ocultar">
de internet.</p>
Mejora Continua
Página 26 de 29
y las despliega en la pantalla

de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes
sobre una página, hipervínculos
que nos permiten dirigirnos a otra página, listas, tablas para tabular
datos, etc.</b><p>Para poder crear una página 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 página HTML
con su navegador).</p>
propuestos y modifique los que se presentan ya resueltos.<p>
nunca antes trabajó con el mismo.
No pretende mostrar todas los elementos HTML en forma alfabética.</p>
en la que se da una explicación completa,
luego se pasa a la sección del ejercicio resuelto donde podemos ver el
contenido de la página HTML y cómo la visualiza el navegador.
Por último y tal vez la sección más importante de este tutorial es donde se
propone que usted haga páginas en forma autónoma (donde realmente
podrá darse cuenta si el concepto quedó
firme).</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);
{
var x=$("#boton1");
x.click(ocultarMostrarRecuadro);
}
function ocultarMostrarRecuadro()
{
x.toggle("slow");
}
estilos.css
.recuadro {
font-size:14px;
Mejora Continua
Página 27 de 29
}
La función ocultarMostrarRecuadro:
function ocultarMostrarRecuadro()
{
x.toggle("slow");
}
se encarga de llamar al método toggle del objeto jQuery, y este analiza si

actualmente el elemento está visible u oculto, la transición se hace en forma lenta
ya que le pasamos como parámetro el string "slow".
Iteración por los elementos (each)
jQuery dispone de un método que nos permite asociar una función que se
ejecutará por cada elemento que contenga la lista del objeto jQuery.
Dentro de esta función podemos manipular el elemento actual.
La sintaxis del iterador each es:
var x;
x=$([elementos]);
x.each([nombre de funcion])
Problema: Resaltar con fondo amarillo todos los párrafos que tienen menos de
100 caracteres.
pagina1.html
<html>
<head>
</head>
<body>
Mejora Continua
Página 28 de 29
<div id="parrafos">
<p>párrafo 1 - párrafo 1 - párrafo 1 - párrafo
1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 -
párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo
1 - párrafo 1 - párrafo 1 - párrafo 1 -
1 - párrafo 1 - párrafo 1 - párrafo 1</p>
<p>párrafo 2 - párrafo 2 - párrafo 2 - párrafo 2</p>
3 - párrafo 3 - párrafo 3 -
3 - párrafo 3</p>
4 - párrafo 4</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);
{
var x;
x=$("#parrafos p");
x.each(resaltarParrafos);
}
function resaltarParrafos()
{
var x=$(this);
if (x.text().length<100)
{
}
}
En la función inicializarEventos obtenemos la lista de párrafos contenidas en el div

y luego a este objeto jQuery mediante el método each indicamos el nombre de la
función que procesará a cada elemento:
x=$("#parrafos p");
x.each(resaltarParrafos);
La función resaltarParrafos se ejecuta por cada uno de los párrafos contenidos en

el objeto jQuery (en nuestro caso 4 párrafos):
Mejora Continua
Página 29 de 29
function resaltarParrafos()
{
var x=$(this);
if (x.text().length<100)
{
}
}
Lo primero que hacemos mediante la función $ y pasando this como parámetro

obtenemos la referencia del párrafo a procesar. Accedemos al método text() que
nos retorna el texto del párrafo propiamente dicho.
El método text() retorna un string por lo que podemos acceder al atributo length y
verificar la cantidad de caracteres que tiene, en caso de ser inferior a 100
procedemos a cambiar el color de fondo de dicho párrafo.
FORMULACIÓN DE ACTIVIDADES:
• Aplicar en cada uno de los proyectos de aprendizaje, la característica de paginas
dinámicas sin recarga
BIBLIOGRAFIA DE ANEXOS:
• Introducción a Ajax.pdf
• http://www.javascriptya.com.ar/jquery/
EVALUACIÓN:
• La actividad será evaluada teniendo en cuenta la lista de chequeo ADSI-AJX-
03

Guia 5

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Guia 5

Загружено:

Авторское право:

Доступные форматы

Sistema Integrado de

La historia de AJAX está íntimamente relacionada con un objeto de

El sitio oficial de la librería es http://jquery.com/, donde puedes descargar la librería y además

Del sitio oficial de jQuery descargaremos la versión descomprimida que ocupa

La librería jQuery en resumen nos aporta las siguientes ventajas:

• Nos ahorra muchas líneas de código.

• Nos hace transparente el soporte de nuestra aplicación para los

• Nos provee de un mecanismo para la captura de eventos.

• Provee un conjunto de funciones para animar el contenido de la página en

• Integra funcionalidades para trabajar con AJAX.

Dispongamos el problema trivial de capturar el evento de un control HTML de tipo

Ahora el mismo ejemplo Utilizando JQuery

Lo primero que tenemos en cuenta es que debemos importar la librería:

La función principal de esta librería se llama $.

A la función $ le podemos pasar distintos valores como veremos (en la primer

Esta función nos devuelve un objeto de tipo jQuery.

El primer método que nos interesa de esta clase es el ready:

El método ready tiene como parámetro un nombre de función. Esta función se

Utilizamos nuevamente la función $ para crear un objeto de la clase jQuery pero

Selección de un elemento del documento mediante el id.

La sintaxis para seleccionar un elemento particular de la página mediante la

Confeccionaremos un problema para ver como obtenemos la referencia a

<h1 id="titulo2">Segundo título</h1>

La función inicializarEventos se ejecuta una vez que se cargó la página y están

Luego las dos funciones que se ejecutan al presionar los títulos:

El tercer método nos permite modificar una propiedad de la hoja de estilo de un

Una vez que hemos obtenido la referencia a un elemento HTML llamamos al

Selección de elementos por el tipo de elementos.

Con la siguiente sintaxis obtenemos la referencia a todos los elementos HTML de

y a todos ellos los enlazamos con la función presionFila

Para obtener la referencia de que elemento en particular disparó el evento

y a partir de esta referencia llamar al método css.

Métodos text(), text(valor)

Para saber el contenido de un elemento el objeto jQuery cuenta con un método

luego si hacemos x.text() obtenemos el contenido del párrafo con id igual a

El siguiente problema muestra el acceso y modificación unitaria y múltiple de

Obtenemos la referencia al párrafo mediante su id (recordemos que en una página

Obtenemos la referencia del párrafo mediante su id y llamamos al método text

Administración de eventos con jQuery.

jQuery facilita la administración de eventos de JavaScript y lo más importante nos

del documento' y 'se presionó un párrafo contenido en la segunda tabla.'

Eventos mouseover y mouseout.

Manipulación de los elementos del DOM

Para añadir un elemento al final de la colección de elementos del objeto jQuery

Para añadir un elemento al principio disponemos de un método llamado prepend:

Para eliminar un elemento del final de la lista, primero obtenemos la cantidad de

Para eliminar el primero y segundo elemento que almacena el objeto jQuery

$('li').slice(2, 4).css('background-color', 'red');

Efectos con los métodos show y hide.

Una característica muy interesante de jQuery que nos provee de un serie de

La función ocultarRecuadro se ejecuta cuando presionamos el botón de "Ocultar

donde obtenemos la referencia del div mediante su id y procedemos a llamar al

llama a la función show pasando como parámetro el string "fast".

Lo muestra con una animación rápida:

Lo muestra con una animación normal:

Lo muestra con una animación lenta:

De forma similar funciona el método hide.

Efectos con los métodos fadeIn y fadeOut.

La función ocultarRecuadro se ejecuta cuando presionamos el botón de "Ocultar

donde obtenemos la referencia del div mediante su id y procedemos a llamar al

llama a la función fadeIn pasando como parámetro el string "slow".

Las formas de llamar a los métodos fadeIn y fadeOut:

Lo muestra con una animación normal:

Lo muestra con una animación lenta: