Javascript | Tus ceros y mis unos

Posts tagged ‘Javascript’

Entender jQuery. Principios básicos

Una de las maneras, quizás la más utilizada, de emplear jQuery es siguiendo los ejemplos del plugin que queramos utilizar, como hice en este mismo blog en «Utilización de jQuery cycle plugin«.

Pero si queremos entender cómo funciona jQuery o intentar hacer nuestro propio plugin necesitamos ir más allá. Eso es lo que intenta esta entrada.

logo_jquery_215x53

jQuery es un framework javascript especializado principalmente en la localización y modificación de elementos en el árbol DOM (Document Object Model). También es importante su gestión de eventos y la facilidad para el desarrollo de plugins.

Un uso frecuente de jQuery sería:

Reaccionar a un evento llamando a una función.
En dicha función localizar un objeto del árbol DOM.
Modificar dicho objeto.

Podemos reaccionar a un evento del tipo de pulsado de un enlace, paso del ratón sobre algo o envío de un formulario entre otros. Podemos consultar el API de eventos de jQuery para velos todos.

Un evento un tanto especial es el que indica que el árbol DOM está listo para recorrerse. Este evento es el que se suele utilizar para dar entrada a todo el código jQuery, por lo que solemos ver que siempre ponemos nuestro código jQuery dentro de $(document).ready():

$(document).ready(function(){
  //Nuestro codigo aqui
});

Para buscar dentro del árbol DOM, jQuery utiliza una nomenclatura de selectores muy similar a CSS, por lo que si conocemos CSS nos resultará bastante familiar. Ejemplos de selectores serían:

$("#id") que devuelve el elemento de identificador «id».
$("p") que devolverá todos los párrafos
$("p.class") que devuelve los párrafos con la clase «class»

Podemos ver todos los selectores en la documentación de jQuery sobre selectores.

Vemos que estamos utilizando en varias ocasiones la función $(), que es la llamada función jQuery. Podemos señalar que la función jQuery siempre nos devuelve un objeto jQuery, que contiene un array con todos los resultados. Realmente tambiéń la mayoría de eventos y otras funciones de jQuery devuelven el objeto jQuery (lo que se conoce por Interface Fluida), por lo que es muy común enlazar unas llamadas con otras tal y como veremos en el ejemplo que acompaña a esta entrada.

Por último vamos a conocer las funciones de manipulación del árbol DOM. Con estas funciones podemos por ejemplo: añadir una clase a una etiqueta HTML o agregar contenido dentro de un elemento. Podemos ver todos ellos en el API de atributos y en el API de manipulación.

Finalmente y para aclarar los conceptos vamos a ver un pequeño ejemplo. Nos vamos a basar en la siguiente página HTML:

<html>
<head>
    <style type="text/css">
        p.red { background: red; }
	p.yellow { background: yellow; }
    </style>
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
	//Aqui nuestro codigo jQuery
   </script>
</head>
<p class="color">Este es un párrafo</p>
<p>Este es otro párrafo</p>
<p class="color">Y este el último párrafo</p>
<ul>
<li><a id="redLink" href="#">red</a></li>
<li><a id="yellowLink" href="#">yellow</a></li>
<li><a id="resetLink" href="#">reset</a></li>
</ul>
<body>
</body>
</html>

Como vemos son tres párrafos de los cuales dos pertenecen a la clase «color». Además tenemos tres enlaces cada uno con un id distinto. Aparte en la cabecera se definen dos estilos CSS para los párrafos (para darle un color de fondo) y se importa la librería jQuery.

Ahora añadimos el código jQuery en la etiqueta script de la cabecera:

$(document).ready(function(){
	$("#redLink").click(function(event){
		$("p.color").removeClass("yellow").addClass("red");
	});
	$("#yellowLink").click(function(event){
		$("p.color").removeClass("red").addClass("yellow");
	});
	$("#resetLink").click(function(event){
		$("p.color").removeClass("red").removeClass("yellow");
	});
});

Destacamos lo siguiente:

Como hemos dicho, todo nuestro código se engloba en una función que se suministra al evento $(document).ready.
Utilizamos el selector para buscar por id para localizar cada uno de los enlaces y pasarle un código a su evento click.
Dentro del código del evento click utilizamos el selector «p.color» para localizar los párrafos pertenecientes a la clase «color».
Utilizando la concatenación de funciones (Interface Fluida) modificamos el árbol DOM añadiendo o quitando clases.

Podemos ver este ejemplo funcionando en: ejemplo de jQuery funcionando.

29 enero 2009 at 7:36 pm 2 comentarios

Utilización de JQuery Cycle Plugin

Tengo pensado para más adelante escribir una entrada más detallada sobre JQuery, una librería JavaScript que nos facilita enormemente la integración de dicho lenguaje en nuestra página. Sin embargo me adelanto con esta pequeña entrada que describe la utilización de uno de sus plugins.

Una de las características destacables de JQuery es la existencia de multitud de plugins, para incorporar una gran variedad de efectos y funcionalidades a nuestro código HTML.

En esta entrada presento el plugin Cycle, que como podéis ver en su página logra unos efectos espectaculares para rotar un contenido (imágenes es lo más habitual, aunque se pueden rotar otros contenidos).

Estaba yo intentando adaptar uno de dichos efectos a un pequeño proyecto. Añadía los enlaces a los ficheros JavaScript en la cabecera:


<script type="text/javascript" src="./js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="./js/jquery.cycle.all.min.js"></script>

Definía el contenido a rotar dentro de un div con id determinada. En este caso el contenido eran varios divs con imágenes y texto cada uno:

<div id="rotar">
<div>
<image height="135px" width="180px" src="image1.gif"/>
<b>Test1</b>
Texto de primera nota.</div>
<div>
<image height="135px" width="180px" src="image2.gif"/>
<b>Test2</b>
Texto segundo</div>
</div>

Y finalmente llamaba a la función cycle() dentro del $(document).ready(function() { como es habitual en JQuery:

$(document).ready(function() {
	$('#rotar').cycle({
		fx:     'scrollUp',
		timeout: 6000,
		delay:  -2000
	});
});

Pero no conseguía que funcionara. Me centraba en la llamada a la función cycle(), pero finalmente descubrí el problema…

Parece que determinados efectos de cycle() entre ellos scrollUp que es el que yo pretendía usar necesitan que esté definida la altura en el contenido a ciclar. Por lo tanto modifiqué el CSS de mi proyecto para añadir dicha altura y todo perfecto: