Clase 1 del Curso de jQuery que impartimos en vivo. Veremos una rápida introducción a jQuery, con explicaciones y uso de eventos y algunos ejercicios con efectos creados con Javascript.
Quizás sepas que estamos organizando el equipo de DesarrolloWeb.com un curso de jQuery, y si no es así, pues es hora que te vayas enterando! :) es un curso en el que veremos jQuery desde cero, con todo detalle a lo largo de más de 36 horas de clase que te llevarán a dominar este imprescindible complemento a Javascript.
Pues bien, en etas clases experimentales del curso de jQuery podrás aprender esta librería con nosotros, siempre en directo, con contacto estrecho con los estudiantes.
El curso corre a cargo del que escribe, Miguel Angel Alvarez, fundador de DesarrolloWeb.com y EscuelaIT, autor también de los manuales de jQuery, jQueryUI y los talleres jQuery que puedes encontrar en este mismo sitio web. Por supuesto, yo mismo soy el que está ofreciendo estas clases experimentales, que mediante este artículo estoy haciendo públicas para que todo el mundo conozca las mecánicas de los cursos de EscuelaIT.
Esta por tanto es la primera de las dos clases experimentales del curso de jQuery que estamos celebrando en abierto. Pero antes de pasar a comentar el contenido que se impartió quiero aclarar que esta sesión no corresponde con ninguna de las clases del curso. En este vídeo encontraréis muchas explicaciones rápidas de muchos de los asuntos que veremos con mucho mayor detalle a lo largo de los encuentros planificados. La idea del vídeo es ofrecer unas guías básicas para entender que jQuery no es difícil de utilizar, si tienes quien te oriente, para sacarle el máximo partido.
Otra cosa que es importante mencionar es que, mientras que esta exposición es de poco más de una hora de duración, las clases que se celebrarán durante el curso están planificadas para ser impartidas en una hora y media. Además, conjugarán mis exposiciones sobre el API de jQuery y su utilización para resolver las necesidades comunes, con ejercicios propuestos que los estudiantes tendrán que realizar para afianzar los conocimientos que os pasaré.
En EscuelaIT, la plataforma de formación tutorizada de DesarrolloWeb.com, puedes encontrar más información del programa y la mecánica del curso de jQuery.
Contenido de esta presentación de jQuery
Pues en este vídeo realizo varios ejemplos en directo para los amigos que están con nosotors en las clases experimentales. Son ejemplos muy sencillos, similares a los que hayáis podido encontrar en el Manual de jQuery o en otras referencias, pero que creo útiles para empezar con buen pie. A continuación podemos encontrar el código fuente de los mismos, comentado convenientemente.
Ejemplo intro.html:
En el que se hacemos un sencillo ejemplo que nos sirve de "hola mundo". Una instrucción para cambiar el color de fondo del cuerpo de la página y luego una instrucción para mostrar un mensaje de bienvenida, que se muestre con un efecto de transparente a opaco.
<html>
<head>
<title>intro</title>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<script>
$(document).on("ready", function(){
$("body").css("background-color", "#fc9");
$("<h1>Bienvenidos a jQuery</h1>").css("opacity",0).appendTo($("body")).animate({"opacity": 1}, 5000);
});
</script>
</head>
<body>
</body>
</html>En este ejemplo no se explicó mucho para que se entendiese el código, algo que se dejó más para el siguiente ejercicio.
Ejemplo funcionjq.html:
Con este ejemplo comenzamos a entender cómo funciona jQuery, a través de la función jQuery, que es básica para poder entender qué hay detrás de este framework Javascript. Se explicaron los tres usos principales que podemos realizar de la función jQuery, o función dólar "$", como son la creación de objetos jQuery a través de 1) objetos nativos Javascript, 2) selectores CSS, 3) una cadena para crear nuevos elementos al vuelo.
<html>
<head>
<title>funcion jquery</title>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<script>
// $(document).ready(function(){})
$(document).on("ready", function(){
// funcion jQuery $()
// extiende "algo" carac. framework
// - ojb nativos js
// - selector CSS
// - generar elementos "en linea"
$("#micapa").slideUp(5000);
$("<img src='dewebcom.jpg' />").appendTo($("#micapa"));
});
</script>
<style>
#micapa{
font-size: 150%;
background-color: red;
padding: 30px;
height: 300px;
}
</style>
</head>
<body>
<div id="micapa">Hola!!!!!</div>
</body>
</html>
Ejercicio eventos.html:
En este ejercicio se introdujeron los eventos, por medio de unas pinceladas básicas que nos sirvan para entender simplemente cómo se definen los eventos en jQuery, a partir de la versión 1.7. Para mostrar detalles sobre la potencia de jQuery en este ejemplo se hace un listado de cebra, con líneas en colores alternos.
<!DOCTYPE html>
<html>
<head>
<title>funcion jquery</title>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<script>
$(document).on("ready", function(){
$("#mienlace").on("click", function(){
//$(this).css("font-size", "190%");
$("p:odd").addClass("gris");
$("p:even").addClass("azul");
})
});
</script>
<style>
#micapa{
font-size: 150%;
background-color: #555;
padding: 30px;
}
p{
margin: 2px;
padding: 5px;
}
.gris{
background-color: #ccc;
}
.azul{
background-color: #ccf;
}
</style>
</head>
<body>
<p>
Parrafo 1
</p>
<p>
Parrafo 2
</p>
<p>
Parrafo 3
</p>
<p>
Parrafo 4
</p>
<p>
Parrafo 5
</p>
<p>
Parrafo 6
</p>
<div id="micapa"><a href="#" id="mienlace">Hola</a>!!!!!</div>
</body>
</html>
Ejercicio efectos.html:
Este es el último ejemplo, en el que vemos algunos efectos interesantes que nos permite hacer jQuery con muy poco código fuente. Un sencillo enlace de "ver más" que muestra y oculta una capa al hacer clic. Lo complicamos al no poner identificadores a todas las capas, sino utilizar diversas funciones que nos ofrece jQuery para "movernos" entre los elementos del DOM de la página.
<!DOCTYPE html>
<html>
<head>
<title>funcion jquery</title>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<script>
$(document).on("ready", function(){
$("#elemento").children("a").on("click", function() {
//console.log($(this).next());
var elem = $(this);
elem.next().toggle(1500, function() {
if(elem.next().css("display") == "none") {
elem.children("span").text("+");
} else {
elem.children("span").text("-");
}
});
});
});
</script>
<style>
body{
font-family: sans-serif;
}
#elemento{
padding: 50px;
width: 400px;
background-color: #ddd;
border: 1px solid #eee;
}
#elemento div{
display: none;
}
</style>
</head>
<body>
<div id="elemento">
<a href="#"><span>+</span> Mis cosas</a>
<div>
<p>
Esto es lo que se mostraría con datos adicionales...
</p>
<p>
Una información larga...
</p>
</div>
</div>
</body>
</html>Espero que los ejercicios os parezcan interesantes. Para más explicaciones, por favor, veros el vídeo que os pongo a continuación, que presenta el Curso de jQuery que voy a impartir y la herramienta para la formación tutorizada con clases en directo.
Si te ha interesado el contenido de esta primera clase experimental del curso de jQuery, seguramente te guste ver también la segunda clase experimental: Formularios jQuery y Ajax.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...