CURSO DE PROGRAMACIN WEB

EJERCICIOS JQUERY
EJERCICIO 1
OBJETIVO

Utilizar selectores y detectar la altura de

diferentes elementos.
Crea una pgina que contenga un header con un ttulo en h1 y una section.con el id
centro y dales un poco de estilo (especialmente color de fondo). Aade un prrafo de
texto dentro de la section #centro.
Una vez hecho eso enlaza en el head con el archivo de jQuery.
Tambin dentro del head crea las etiquetas de script y dentro de ellas introduce la
instruccin para que el script se ejecute una vez la pgina est cargada
(Ayuda: http://api.jquery.com/ready/)

Una vez hecho esto tienes que detectar la altura de los diferentes elementos. Para ello
tendrs que utilizar los selectores necesarios y la funcin .height de jQuery
(Ayuda: http://api.jquery.com/height/)

Finalmente visualiza los valores localizados con un alert.

Puedes ver el efecto deseado aqu.

EJERCICIO 2
OBJETIVO

Utilizar selectores y modificar la altura de un

elemento

Crea una pgina igual que la anterior y coloca los valores de la altura total, la del
header y la del footer en tres variables diferentes. En este caso utiliza la funcin
outerHeight (Ayuda: http://api.jquery.com/outerheight/)

Ahora has de modificar la altura del id #centro para que la pgina se ajuste con
exactitud.

Para tienes que utilizar la misma funcin outerHeight, pero asignando una operacin
aritmtica entre las diferentes variables de altura que has declarado.

Puedes ver el efecto deseado aqu.

EJERCICIO 3

OBJETIVO

Utilizar selectores y vincular con un evento

Comienza creando una pgina de base como en los ejercicios anteriores y dentro de
document .ready empieza a escribir el cdigo.

En html coloca una imagen en el centro de la section #centro y asgnale el id #foto.

Coloca encima de ella dos botones con el texto ocultar y mostrar y asigna a cada
uno de ellos una id.
Ahora ya ests preparado para darles funcionalidad a los botones.
Para ello utiliza en primer lugar la funcin click (Ayuda http://api.jquery.com/click/)
sobre cada uno de los dos id de los botones.
Dentro de ellos para darles la funcionalidad concreta utiliza las funciones hide y show
(Ayuda http://api.jquery.com/hide/ y http://api.jquery.com/show/)
Una vez aplicado podrs ocultar y visualizar la imagen desde los botones.
Puedes ver el efecto deseado aqu.

EJERCICIO 4

OBJETIVO

Usar las funciones slideDown, slideUp, fadeIn , fadeOut

y fadeTo
Toma como base el ejercicio anterior para realizar algunas modificaciones.

Ahora, en vez de dos botones, necesitars seis con los siguientes nombres:
slideDown
slideUp
fadeIn
fadeOut
opacidad
quitar opacidad
Una vez hecho esto tienes que darle funcionalidad, igual que habas hecho
anteriormente con mostrar y ocultar. Para ello puedes visitar estas ayudas de jQuery:

Ayuda http://api.jquery.com/slidedown/
Ayuda http://api.jquery.com/slideup/
Ayuda http://api.jquery.com/fadeIn/
Ayuda http://api.jquery.com/fadeOut/
Ayuda http://api.jquery.com/fadeto/
Una vez hecho esto podrs comprobar el resultado de diferentes opciones grficas de
gran utilidad.
Puedes ver el efecto deseado aqu.

EJERCICIO 5

OBJETIVO

aplicacin de fadeTo , fadeIn y fadeOut

Crea una pgina bsica igual que en ejercicios anteriores.

En la section #centro coloca tambin una imagen centrada.
El objetivo de este ejercicio es que al hacer click en la imagen se ponga con opacidad
y aparezca un mensaje superpuesto.
Para ello en primer lugar tienes que crear el mensaje en html y darle propiedades en
css de manera que quede oculto al iniciar la web (es decir colocar display:none por
defecto). Procura que mediante el CSS el mensaje quede superpuesto a la imagen.
Una vez hecho eso asignamos una funcionalidad al click en #foto y utilizamos las
funciones fadeTo respecto al id de la foto y fadeIn respecto al id del mensaje.
Puedes ver el efecto deseado aqu.

EJERCICIO 6
OBJETIVO

aplicacin de fadeTo , fadeIn y fadeOut

Partiendo del ejercicio anterior ahora queremos que el mensaje que aparezca ofrezca
la posibilidad de quitar la opacidad.
Para ello bastar con asignar funcionalidad al click sobre el id #mensaje e invertir el
efecto creado anteriormente.
Puedes ver el efecto deseado aqu.

EJERCICIO 7

OBJETIVO

aplicacin de animate

Igual que hemos hecho anteriormente empezamos creando una pgina con una
imagen, pero en este caso hacemos que quede de u tamao reducido a la izquierda
de la pantalla.
Ahora vamos a utilizar la funcin animate para modificar algunas de sus
caractersticas. (Ayuda http://api.jquery.com/animate/)
El objetivo es que al hacer click sobre la imagen cambie de tamao y se desplace
hacia la derecha.
Puedes ver el efecto deseado aqu.

EJERCICIO 8
OBJETIVO

Creacin de un slider

En este ejercicio realizars un visor de imgenes, con un marcador de posicin. Las

imgenes se pasarn una a una automticamente y la transicin deber ser animada.
Abre el archivo ejercicio08-inicio.html y coloca una nueva etiqueta script para empezar
a trabajar.

El primer paso es crear la funcin ready de jQuery, y dentro de dicha funcin inicializar
una variable llamada contador con el valor numrico 1, y luego ejecutar la funcin
foto1 que debers realizar en los siguiente pasos. El cdigo resultante deber ser el
siguiente:

$(document).ready(function(){
var contador = 1;
foto1();
});

Ahora debers declarar un array que contenga las rutas de las imgenes que utilizars
en el visor. Todas estas imgenes se encuentran en la carpeta imgenes y tienen los
nombres: imagen0.jpg imagen1.jpg, imagen2.jpg, imagen3.jpg. El cdigo resultante
ser el siguiente:

var imagenes = new Array();

imagenes[0] = "imagenes/imagen0.jpg";
imagenes[1] = "imagenes/imagen1.jpg";
imagenes[2] = "imagenes/imagen2.jpg";
imagenes[3] = "imagenes/imagen3.jpg";

El tercer paso ser crear una funcin llamada foto1, que ser la encargada de cambiar
las fotos por medio de una animacin y mantener parte del marcador de posicin.
Dentro de esta funcin debers seguir los siguientes pasos:

1) Utilizando el selector #imagenes mini, asignarle con la funcin css de jQuery una
altura y anchura de 50 pxeles.
2) Utilizando el selector #imagen+contador asignar un alto y un ancho de 80 pxeles.
Este selector ser el encargado de mostrar la imagen activa.
3) Ejecutar la funcin animate sobre el selector #visor1, cambiando las propiedades
top y left , incrementando su valor actual en 250 y 300 pxeles respectivamente, en 1
segundo y debers preparar la funcin callback, que se ejecute cuando esta
animacin est lista.

Dentro de dicha funcin callback debers cambiar el valor zIndex del

elemento #visor2 al valor 1 y a #visor1 a 0. Y tambin debers crear
la funcin anmate sobre el #visor1 que mueva el elemento desde su
posicin actual hacia la izquierda y arriba, en -300px y -250px
respectivamente, en 1 segundo y prepara la funcin callback.

En la funcin callback debers incrementar el valor de contador en 1, y

validarlo, si es igual a 4, asignarle el valor 0. Luego debers cambiar la
imagen que se visualiza en el #visor1, por la siguiente del array,
valindote de la variable contador y hacer una llamada a la funcin
foto2.

Con esta funcin cambiars las fotografas con un toque de animacin, el cdigo
resultante es el siguiente:

function foto1(){
$("#minis img").css("height", "50px").css("width", "50px");
$("#imagen"+ contador).css("height", "80px").css("width", "80px");
$("#visor1").animate({
top: "+=250px",
left: "+=300px"
},1000,function(){

$("#visor2").css("zIndex", "1")
$("#visor1").css("zIndex", "0").animate({
top: "-=250px",
left: "-=300px"
},1000,function(){
contador++;
if(contador == 4){contador = 0;}
$("#visor1").attr("src", imagenes[contador]);
foto2();
})
});
}

Ahora debers crear la funcin foto2 que ser la encargada de realizar exactamente lo
mismo que la funcin anterior pero para el elemento #visor2, el cdigo resultante
ser el siguiente:
function foto2(){
$("#minis img").css("height", "50px").css("width", "50px");
$("#imagen"+ contador).css("height", "80px").css("width", "80px");
$("#visor2").animate({
top: "+=250px",
left: "+=300px"
},1000,function(){
$("#visor1").css("zIndex", "1")
$("#visor2").css("zIndex", "0").animate({
top: "-=250px", left: "-=300px"
},1000,function(){
contador++;
if(contador == 4){contador = 0;}
$("#visor2").attr("src", imagenes[contador]);
foto1();
})
});
}
SI todo ha funcionado correctamente al abrir la pgina se debern animar las
fotografas e ir pasndose una a una.

EJERCICIO JQUERY-UI

OBJETIVO: UTILIZACION DE JQUERY-UI Y PLUGGINS EXTERNOS

Crear una web que contenga, como mnimo, estas

funcionalidades de jQuery:

Tabs
Accordion
Datapicker
Nivoslider
Fancybox
Contactable

Ver modelo en http://carpehosting.com/ejemplojquery