Introducción a DOM: HTML y jQuery
Ver para creerHasta el momento construimos páginas web usando HTML y les dimos estilo usando
CSS. Nuestras páginas quedan geniales, pero en realidad nohacen nada; no
podemos arrastrar elementos por la página, abrir o cerrar paneles deslizantes, animar
los elementos de HTML, ni agregar elementos nuevos a nuestras páginas de HTML
simplemente haciendo un clic sobre un botón.
Pero todo eso está a punto de cambiar. En esta serie de ejercicios vas a
aprender jQuery, que te va a permitir hacer todas esas cosas y muchas más.
Instrucciones
Andá a la ventana de Resultados. Pasá el cursor por encima de cada uno de
los <div> para ver qué hacen y hacé clic sobre cada uno. Después hacé clic en
"Guardar y enviar" cuando estés listo para aprender jQuery!
*.html
<!DOCTYPE html>
<html>
<head>
<title>¡Magia!</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="rojo"></div>
<div id="azul"></div>
<div id="amarillo"></div>
<div id="verde"></div>
</body>
</html>
*.css
div {
height:100px;
width:100px;
display: inline-block;
}
#rojo {
background-color:#FF0000;
}
#azul {
background-color:#0000FF;
}
#amarillo {
background-color:#E2BE22;
}
#verde {
background-color:#008800;
}
*.js
$(document).ready(function() {
$('div').mouseenter(function() {
$(this).animate({
height: '+=10px'
});
});
$('div').mouseleave(function() {
$(this).animate({
height: '-=10px'
});
});
$('div').click(function() {
$(this).toggle(1000);
});
});
Introducción a DOM: HTML y jQuery
El Modelo de Objetos del DocumentoPara aprovechar jQuery al máximo tenemos que repasar cómo se compone una
página HTML.
Un documento de HTML está estructurado de acuerdo con elDocument Object
Model, es decir, el Modelo de Objetos del Documento, oDOM. jQuery puede acceder
y modificar el HTML interactuando con el DOM.
El DOM está compuesto de todos los elementos en la página, dispuestos en una
jerarquía que refleja la forma en que el documento HTML está ordenado. ¿Te acordás
de queimaginábamos que el documento de HTML era como una casa? Podés
imaginarte que el DOM es algo parecido. Igual que en un documento de HTML, los
elementos en el DOM pueden tener elementos padres, hijos y hermanos.
Si no tenés muy claro qué es un elemento de HTML, qué es un selector de CSS, o
qué son los ID y las clases, podés repasarlos en la serie de ejercicios de HTML y
CSS.
Instrucciones
Revisá el código en script.js. Pronto vamos a explicarlo, pero por ahora todo lo que
tenés que saber es que este código seleccionará un elemento de HTML y lo hará
desaparecer cuando el documento de HTML se cargue.
En este ejercicio queremos centrarnos en el elemento div, así que en la línea 2 dentro
de $() agregá div.
Cambiar de objetivosNo te sientas intimidado por la cantidad de código que estás viendo: vamos a
analizarlo parte por parte, para asegurarnos de que lo entiendas todo.
Así como div en CSS se refiere al elemento <div> de HTML, el 'div' en jQuery se
refiere al mismo elemento<div> de HTML. Podés imaginarte que el nombre del
elemento se muestra en jQuery igual que como estaba en CSS, solo que ahora
aparece entre comillas. Así que, por ejemplo, podés centrarte en cualquier elemento
de la clasebutton usando
$('.button').algunaAcción
Como te acordarás, .button es la forma que usás en CSS para centrarte en cualquier
elemento que en tu archivo de HTML tengaclass="button".
Instrucciones
Escribí un selector dentro de $() para que se centre en el ID #verde.
¿Qué es jQuery?jQuery es una biblioteca, o un conjunto de complementos útiles (adds-ons), para el
lenguaje de programación JavaScript. Tal vez parezca contradictorio aprender cómo
usar una biblioteca antes de aprender el lenguaje en sí, pero hay algunas buenas
razones para hacerlo.
1. Lleva un poco de tiempo sentirse cómodo con JavaScript y es más fácil manipular los elementos de DOM directamente con jQuery que con JavaScript. Vamos a empezar mostrándote jQuery para ayudarte a crear sitios web geniales mucho más rápido.
2. jQuery brinda una interfaz sencilla para el código JavaScript subyacente. Es más fácil para muchos usuarios aprender primero a manejar jQuery y después sí animarse con los detalles de JavaScript.
3. jQuery es mucho mejor en cuanto a resultados inmediatos y visuales que el JavaScript normal. Cuando termine esta lección vas a haber creado tu propio botón interactivo.
Instrucciones
En la pestaña script.js, agregá las piezas faltantes de la línea 2, de modo que tu
código jQuery llame a fadeOuten el div con el ID #nolisto.
Introducción a DOM: HTML y jQuery
Cómo enlazar tus archivos HTML y JavaScript¡Genial! Ahora necesitamos asociar la página de HTML con el script de jQuery, de
modo que la magia de jQuery modifique nuestro HTML.
Así como necesitamos una etiqueta<link> para conectar nuestros HTML y CSS,
necesitamos una etiqueta<script> para conectar nuestro HTML y jQuery. La etiqueta
se ve así:
<script type="text/javascript" src="src"></script>
Fijate que la etiqueta <script> no se autocierra; necesita una etiqueta</script> de
cierre.
Instrucciones
Agregá una etiqueta <script> aindex.html. En type debe decir "text/javascript" y
en src debe decir "script.js".
Primeros pasosA continuación vamos a iniciar nuestra magia con jQuery usando la sintaxis$
(document).ready(); que ya viste. Funciona de esta manera:
$() dice: "¡Miren, están a punto de pasar cosas que tienen que ver con jQuery!"
Si ponemos document entre paréntesis sabemos que vamos a hacer magia en el
mismo documento HTML.
.ready(); es una función, o una acción básica, en jQuery. Dice: "¡Voy a hacer algo
apenas esté listo el documento HTML!"
Lo que está entre los paréntesis de.ready() es el evento de jQuery, que ocurre en
cuanto el documento HTML está listo.
Entonces,
$(document).ready(algo);
dice: "¡cuando el documento HTML esté listo, hacé algo!" (En el siguiente ejercicio te
vamos a mostrar cómo reemplazar algo con una acción).
Fijate que .ready(); termina con un punto y coma. Esto le indica a jQuery que
terminaste de darle una orden.
Instrucciones
Agregá $(document).ready(); ascript.js. Acordate: la parte de document es
especial: no es un elemento de HTML como <p> o<div>, así que no va entre comillas.
El enfoque funcional¡Perfecto! Ahora necesitamos agregar algo dentro de nuestra funciónready().
Acordate de que cuando hablamos de "función", podés pensar en "acción." Las
funciones son la unidad básica con la que se trabaja en jQuery.
Por eso, jQuery incluye la palabra clave function. La sintaxis se ve así:
function(){ magia de jQuery;}
Si agregamos nuestra función dentro de nuestro .ready(), jQuery ejecutará el código
de nuestra función en cuanto se cargue el documento HTML. La sintaxis se verá de
esta manera:
$(document).ready(function() { magia de jQuery;});
Acordate de que cerramos nuestras sentencias de jQuery con un punto y coma.
Instrucciones
Agregá function(){} dentro de.ready(). Todavía no tenés que escribir nada entre
las llaves ({}) defunction; eso lo vamos a ver en el siguiente ejercicio.
Deslizamiento electr(ón)ico¡Ya casi terminamos! Ahora solamente tenemos que incluir una acción en el cuerpo
de nuestra función. En este caso vamos a hacer un encabezadodiv deslizable para
que se haga visible en nuestra página HTML.
Entre las {} de nuestra function(), vamos a convertir nuestro div en un objeto de
jQuery, para que jQuery pueda manipularlo. De forma muy parecida a como
usamos .ready() en$(document), vamos a usar la acción.slideDown() en nuestro
objeto divde jQuery.
Dentro de los paréntesis de.slideDown, vamos a indicarle la rapidez con la que debe
deslizarse. Vamos a escribir 'slow' (es decir, despacio). No te olvides de poner las
comillas.
Instrucciones
En la línea 2 de la pestaña script.js, convertí 'div' en un objeto de jQuery, y llamá
a la acción.slideDown() sobre dicho objeto. Entre los paréntesis de slideDown(),
escribí 'slow' (despacio) de modo que jQuery sepa a qué velocidad querés que se
deslice div.
Repaso de mitad de lección¡Buen trabajo! Ya vimos bastantes cosas. Tomémonos un segundo para repasar lo
que aprendimos:
Qué es jQuery y cómo puede manipular los elementos de HTML
La sintaxis de jQuery
Instrucciones
Hacé clic en "Guardar y enviar" cuando estés listo para poner en práctica tus nuevas
habilidades de jQuery y crear un botón interactivo para tu sitio web.
¡Listos!¡Muy bien! Vamos a empezar.
Instrucciones
1. En la pestaña index.html, agregá una etiqueta <script> para conectar tu HTML con script.js.
2. En tu pestaña script.js, convertídocument en un objeto de jQuery y llamá a .ready().
En el Consejo hay unos ejemplos.
¡Adentro...!¡Genial! Ahora vamos a incluir nuestra palabra clave function junto con dos nuevas
acciones, mouseenter() yfadeTo().
mouseenter() produce un cambio cuando movés el cursor dentro de un elemento de
HTML determinado. Por ejemplo,
$(document).ready(function() { $('div').mouseenter(function() { $('div').hide(); });});
debería hacer que todos los <div> de la página se oculten en cuanto muevas el cursor
sobre uno de ellos. (En la próxima lección vamos a ver cómo afectar solamente
un <div> entre muchos.) Por ahora solamente tenemos un <div>, así que este código
está bien.
Vamos a ubicar fadeTo() dentro demouseenter(), en lugar de hide().fadeTo() toma
dos argumentos, oentradas, separados por una coma, entre sus paréntesis: la
velocidad a la cual se desvanece el elemento y laopacidad (o transparencia) que
tendrá al desvanecerse. Por ejemplo,
fadeTo('fast', 0.25);
hará que el elemento se desvanezca rápidamente hasta un 25% de su opacidad
original, dejándolo de color muy claro.
Instrucciones
Usando los ejemplos anteriores, hacé que tu 'div' se desvanezca a 1(100%) de
opacidad cuando el cursor pase sobre él. Hacé que la velocidad de la animación
sea 'fast' (rápido). (Asegurate de escribir los argumentos de fadeTo() en orden; es
decir, velocidad y después opacidad.)
¡...y afuera!¡Excelente! Tu botón se ve genial: resalta cuando el usuario mueve el cursor sobre él.
Sin embargo, vas a ver que el botón queda opaco aún después de alejar el cursor de
él. Lo que queremos es que nuestro botón se vuelva claro de nuevo cuando alejamos
el cursor.
Seguro que ya adivinaste que jQuery también incluye la acciónmouseleave(). Si lo
hiciste, ¡estás en lo cierto! (Si sos curioso, podés aprender más acerca de estas
acciones en losdocumentos de jQuery.)
Instrucciones
Entre }); al final de tu mouseenter() y}); al final de tu $(document).ready(), agregá
un mouseleave() que usefadeTo para devolver la opacidad de tu div a 0.5. Igual que
en el fadeToanterior, su primer argumento debe ser 'fast'.
Hacé clic en Guardar y enviar, después pasá el cursor despacio sobre tu div y mirá el
efecto.
Funciones y selectores de jQuery$p vs. $('p')Probablemente te diste cuenta de que en el ejercicio anterior usamos $ y$():
var $p = $('p');
Existe una pequeña diferencia entre los dos.
$p es simplemente un nombre de variable. No hay nada de mágico en el$ de $p; es
solamente una convención para decir: "Mirá, esta variable contiene un objeto de
jQuery". Podemos llamar a $p de cualquier
manera: $parrafo, parrafo,vacas_espaciales, ¡de cualquier forma! Simplemente es
una ayuda para las personas que leen nuestro código que vean $p, ya que es una
forma concreta de decir "Mirá, acá hay un objeto de jQuery 'p'".
Pero por otra parte, $() sí es mágico. Esta es la función disfrazada que crea objetos
de jQuery. ¡Si estás creando un objeto de jQuery, tenés que usarlo!
Instrucciones
Creá una variable $div, y asignala al objeto de jQuery div usando =. No necesitás
usar $(document).ready() ni ningún otro código adicional.
Uso de funciones para seleccionar elementos HTMLAhora que sabés más sobre la manera en que operan las funciones, entendés cuando
decimos algo así:
$(document).ready(function() { $('div').hide(); });
Le estamos pasando a .ready() una función (que no toma argumentos; por eso es
que sus () están vacíos), y el trabajo de esa función es ocultar, con.hide(), el
objeto div de jQuery.
Instrucciones
Dale a .ready() una function(){}como argumento. Dentro de las {} de tu función,
llamá a fadeIn('slow')para que modifique a 'div', que en este momento está
invisible, de modo que pueda aparecer. Así es; ¡los objetos también pueden aparecer!
Selección mediante clasesNo tenemos que limitarnos a seleccionar elementos HTML como<p> y <div>;
básicamente podemos escribir entre comillas cualquier selector de CSS y ponerlo
dentro de $(). ¡Esto quiere decir que también podemos seleccionar clases!
Acordate de que en CSS seleccionamos las clases usando un punto (.). Si
tenemos class="rojo"en nuestro HTML, podemos modificarlo en CSS usando .rojo.
En jQuery, todo lo que necesitamos es escribir '.rojo' entre comillas, y podemos
ponerlo dentro de $() para crear un objeto de jQuery.
Instrucciones
Vamos a practicar un poco con la acción .click().
Completá el código de jQuery, de modo que los cuatro 'div' de la
clase'.desvanecer' se desvanezcan usandofadeOut() y 'slow', cuando hagas clic
( .click() ) en el botón (button ).
Selección mediante ID
Si podemos seleccionar elementos por su clase, también podemos seleccionarlos por
ID. Esto lo hacemos escribiendo el nombre de ID (entre comillas) dentro de $(). Así
como necesitamos el . para las clases, también necesitamos usar # para los ID.
Podemos modificar aid="encabezado" así:
$('#encabezado');
El punto y coma al final es importante: es la manera en que jQuery sabe que le
estamos dando una orden. Por ahora, una buena regla práctica es que escribas punto
y coma al final de cualquier línea que no termine con una { abierta. (El editor tratará
de ayudarte con la ubicación de los punto y coma, así que prestá atención a los
mensajes de advertencia.) En Te trabaste? Te damos un consejo podés ver los
ejemplos del uso correcto e incorrecto del punto y coma.
Instrucciones
Actualizá tu código de jQuery de modo que usando .fadeOut(), solamente se
desvanezca el div que tiene el ID #azul.
Selecciones flexiblesTodo lo que puedas modificar con CSS, podrás modificarlo con jQuery. Por ejemplo
podemos aplicar fadeTo() a un selector p de esta manera:
$('p').fadeTo('slow', 0);
Podemos aplicar fadeTo() a un selector li de esta manera:
$('li').fadeTo('slow', 0);
Podemos aplicar fadeTo() tanto al selector p como al selector li, de esta manera:
$('p, li').fadeTo('slow', 0);
Esto se denomina selector compuesto.
Instrucciones
Usemos un selector compuesto para aplicar fadeTo() tanto al selector.rosa como
al .rojo.
¡'this' es importante!En la última lección, teníamos un código que se veía así:
$(document).ready(function() { $('div').mouseenter(function() { $('div').hide(); }); });
La segunda línea está bien: nos dice que cuando pasamos el cursor sobre un div,
debe ejecutarse una acción determinada. Sin embargo,$('div').hide(); no
solamente ocultará el div sobre el que pasás el cursor; también
ocultará todos losdiv de la página. ¿Cómo podemos indicarle a jQuery que solamente
queremos afectar este div en particular?
¡Con this, por supuesto!
La palabra clave this (este) se refiere al objeto de jQuery con el que estamos
trabajando en ese momento. Las reglas de operación son un poco complejas, pero lo
importante es entender que si usás un controlador de eventos (eventos es el
nombre elegante de las acciones como.click() y .mouseenter(), ya que controlan
eventos de jQuery) en un elemento, podés llamar al evento que ocurre (tal
como fadeOut()) en$(this), y el evento solamenteafectará al elemento con el que
hacés algo en ese momento (por ejemplo, sobre el que se hace clic o se pasa el
cursor).
Instrucciones
Revisá el código en script.js. En lugar de usar fadeOut() en todos los'div',
solamente lo usamos en uno con ayuda de this. Acá this se refiere al div sobre el
que pasás el cursor. Hacé clic en Guardar y enviar y después sobre cada uno de los
div para verlos funcionar.
¿Listo?
¡Muy bien! Es hora de usar nuestros conocimientos recién adquiridos de jQuery para
agregar otro componente interactivo a nuestro sitio web: un panel deslizante que se
mueva hacia arriba y hacia abajo cuando hacemos clic sobre él.
Ya escribimos el HTML y CSS que necesitás. Tu misión: animarlo con jQuery.
Instrucciones
¡Ya sabés cómo se hace! Convertídocument en un objeto de jQuery y llamá
a .ready() a la acción. (Todavía no hace falta que escribas nada entre los paréntesis
de .ready().)
body {
margin:0 auto;
padding:0;
width:200px;
text-align:center;
}
a:hover{
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
.panel {
background: #ffffbd;
background-size:90% 90%;
height:300px;
display:none;
font-family:garamond,times-new-roman,serif;
}
.panel p{
text-align:center;
}
.desliza {
margin:0;
padding:0;
border-top:solid 2px #cc0000;
}
.tirar {
display:block;
position:relative;
right:-25px;
width:150px;
height:20px;
font-family:arial,sans-serif;
font-size:14px;
color:#ffffff;
background:#cc0000;
text-decoration:none;
-moz-border-bottom-left-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.tirar p {
text-align:center;
}
Hacé clic y tirá¡Qué bien! Ahora queremos activar un evento cuando se hace clic sobre la pestaña
"Deslizar hacia arriba/abajo" (la clase de esa pestaña es tirar).
Instrucciones
1. Agregá tu function(){} dentro de los paréntesis de .ready().
2. function no tendrá argumentos en medio de (); pero en medio de {}, deberá llamar al controlador de eventos .click() para modificar el objeto .tirar de jQuery.
Cómo deslizar nuestro panel¡Perfecto! Solo un paso más: necesitamos decirle a .click() qué tiene que hacer. En
este caso, cuando hagamos clic sobre la pestaña, queremos que nuestro panel
deslizable (que tiene la clase .panel) se abra o se cierre.
El evento de jQuery que necesitamos para deslizar nuestro panel es (adivinaste):
¡.slideToggle()! Le daremos un argumento, que es la velocidad de la animación de
deslizamiento.
Instrucciones
Dentro de los paréntesis de .click(), creá un objeto de jQuery .panel, y llamá al
efecto .slideToggle(). Dale a la velocidad de la animación el argumento 'slow'.
¡Bien hecho!¡Buen trabajo! ¿Ves lo fácil que es? Con un poco de magia de jQuery, podés hacer
que tus sitios web hagan toda clase de cosas asombrosas.
Tanto Twitter, Facebook, como Gmail usan jQuery para hacer que sus sitios web sean
interactivos. ¡Aprendiendo jQuery te encaminás hacia la grandeza de Internet!
Si en algún momento tenés dudas sobre lo que es capaz de hacer jQuery, o sobre
cómo funciona, podés revisar la documentación de jQuery (http://docs.jquery.com/),
que cubre todos los aspectos de la biblioteca.
Instrucciones
¡Cuando estés listo hacé clic en Guardar y enviar para completar esta lección y
continuar con más maravillas de jQuery!
Modificar elementos de HTMLCrear elementos de HTMLLa adición dinámica de elementos a nuestra página de HTML es una herramienta
poderosa: nos permite no solamente modificar el formato, sino la estructura misma de
nuestros sitios web como respuesta a las interacciones de los usuarios. Por ejemplo,
cuando usas Gchat, cada mensaje es un nuevo <div> que se agrega de forma
dinámica a la página. Genial, ¿no?
Si lo pensás, es más o menos lo que ya hicimos: establecer una variable que sea
igual a un objeto de jQuery. Sin embargo, en este caso, en lugar de tener
simplemente algo como:
$p = $('p');
Lo que queremos hacer es pasar un elemento completo de HTML entre comillas:
$p = $("<p>¡Soy un párrafo nuevo!</p>");
Cuando escribimos un texto así entre comillas, lo llamamos string (es decir, una
"cadena de caracteres"). De ahora en adelante, cada vez que digamos "string" o
"cadena" podés pensar en un "texto" o "frase." Las cadenas siempre van en medio de
comillas inglesas o simples.
Instrucciones
En script.js, crea una variable, $h1, y hacé que sea igual a un objeto de jQuery que
contenga una etiqueta<h1> con el texto "Hola". La etiqueta debe ser una cadena.
Insertar elementosPodemos insertar nuestros elementos recién creados usando algunas acciones de
jQuery.
.append() insertá el elemento especificado como el último hijo del elemento al que
apunta. .prepend()inserta el elemento especificado como el primer hijo del elemento
al que apunta. Si tenemos un div con clase.info,
$('.info').append('<p>¡Algo!</p>'); $('.info').prepend('<p>¡Algo!</p>');
agregamos un párrafo con el texto "¡Algo!" dentro de todos los divs con
clase .info. .append() hará que el párrafo sea el último hijo de cada
div;.prepend() hará que el párrafo sea el primer hijo de cada div. (Nota: mirá el
consejo si estás usando comillas simples).
.appendTo() hace lo mismo que .append(), pero invierte el orden de "lo que hay que
agregar" y "donde agregarlo". El código
$('<p>¡Algo!</p>').appendTo('.info');
tiene el mismo efecto que el código.append() anterior. .prependTo() tiene una
relación parecida con .prepend().
Instrucciones
En la pestaña script.js, usa.append() para agregar un párrafo abody en tu
documento de HTML. Tu párrafo debe tener el texto: "¡Soy un párrafo!"
Top Related