Está en la página 1de 8

Manejo de contenido Web

Uso de la librería jquery

INTRODUCCIÓN

Hace unos añ os, la ú nica manera en la que podíamos insertar una animació n dentro de
un sitio web era con flash. Hoy en día eso ha cambiado, ya que tenemos otras opciones
con las que podemos trabajar las animaciones, las cuales se basan en el uso de la
combinació n de javascript con hojas de estilos.

No necesitamos comenzar a programar desde cero, ya que existen librerías que se


pueden usar como base para comenzar una animació n. Las dos librerías má s usadas son:
 jquery (http://jquery.com/)
 mootools (http://mootools.net/)

En este mó dulo nos dedicaremos a estudiar las aplicaciones con jquery.

OBJETIVO

Aplicar la librería jquery para construir animaciones como rotadores, scrolls, tooltips,
desplazamientos y otros.

CONTENIDO

En este mó dulo veremos como implementar las siguientes aplicaciones:


 rotadores y carruseles:
- cycling (http://jquery.malsup.com/cycle/)
- slick
 ventanas modales
- fancybox (http://fancybox.net/)
 scroll
- funció n anímate()
 parallax
JAVASCRIPT Y HTML

 JavaScript es un lenguaje de programació n interpretado.


 Es orientado a objetos.
 Se utiliza en su forma del lado del cliente (client-side).

Su forma de insertarse o incluirse dentro de un archivo HTML debe ser siempre dentro
de las etiquetas :
<script></script>

Ejemplo:

En el siguiente ejemplo, se puede ver los elementos sombreados en colores verde y


celeste se refieren a la inserció n de archivos externos que contienen có digo en javascript,
en cambio lo sombreado en amarillo se refiere a có digo insertado directamente en el
HTML.

Ejemplo 1. Inserción de código javascript dentro del head

<head>
<title>Samuel Sarmiento</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="includes/jquery/jquery.min.js"></script>


<script type="text/javascript" src="includes/jquery/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$('.rotador').cycle({
fx: 'scrollHorz',
speed: 1000,
timeout: 3000,
next: '.rotador_next',
prev: '.rotador_prev'
});
});

</script>

</head>

Importante:
El có digo javascript siempre debe insertarse dentro de etiquetas
<script></script>
JQUERY

jQuery es una librería de JavaScript, creada inicialmente por John Resig, que permite
simplificar la manera de interactuar con los documentos HTML, manipular el á rbol DOM,
manejar eventos, desarrollar animaciones (FLV) y agregar interacció n con la técnica
AJAX a pá ginas web.

Sintaxis

Para usar jquery dentro de los documentos y hacer que los objetivos web se comporten
de la forma que deseamos, se utiliza la funció n $().

Esta funció n recibe como pará metro una expresió n de CSS, es decir un ID o una clase, la
cual es denominada selector.

Ejemplos:

Ejemplo 2. Inserción de código javascript dentro del head

$("body "); // Devolverá el body


$("h1, h2, h3"); // Devolverá el conjunto de elementos compuesto por h1, h2 y h3 de todo el html
$("#rotador"); // Devolverá el elemento con id="rotador"
$(".invisible"); // Devolverá todos los elementos q tengan asignada la class="invisible"
$(".menu li"); // Devolverá todos los li q estén adentro del elemento class=”menu”

HTML y jquery

Hay dos pasos importante para poder usar una librería jquery dentro de los archivos
html:

1. Insertar la librería

Para insertar la librería nos guiamos por el ejemplo 1: ubicados dentro del cabecero
head del documento html, copiamos lo siguiente:

<script type="text/javascript" src="includes/jquery/jquery.min.js"></script>

2. Insertar el código que dirá que acciones realizar después de cierto evento.

Para insertar el có digo debemos recordar lo siguiente:


 puede estar en cualquier parte del documento HTML, ya sea en el cabecero o en el
body.
 debe estar dentro de las etiquetas <script></script>
 para que el uso de la librería tenga efecto, debemos estar seguro que el
documento HTML se ha cargado correctamente, y es por ello que el có digo se
inserta dentro de la siguiente expresió n:

<script>
$(document).ready(function() {
//Aquí van todas las acciones del jquery.
});
</script>

 Existen otras expresiones que se usan para algunas aplicaciones, por ejemplo

<script>
$(function() {
//Aquí van todas las acciones del jquery.
});
</script>

Eventos con jquery

Un evento es lo que ocurre cuando un usuario interactú a con los elementos de nuestro
html. Por ejemplo un click del rató n sobre un menú , un over del del rató n sobre un div, el
presionar de una tecla sobre un botó n, el movimiento del scroll del navegador.

Entonces, tenemos varios elementos a considerar en un evento:

Objeto --> Evento --> resultado

Los eventos tienen restricciones y funcionen só lo con ciertos elementos. En la siguiente


tabla se resume la lista de eventos má s usados y el objeto con que se puede usar:

Evento Descripció n Elementos para los que está definido

<button>, <input>, <label>, <select>, <text
onblur Deseleccionar el elemento
area>, <body>

Deseleccionar un elemento que se ha


onchange <input>, <select>, <textarea>
modificado

onclick Pinchar y soltar el rató n Todos los elementos

ondblclick Pinchar dos veces seguidas con el rató n Todos los elementos

<button>, <input>, <label>, <select>, <text
onfocus Seleccionar un elemento
area>, <body>

onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>


Evento Descripció n Elementos para los que está definido

onkeypress Pulsar una tecla Elementos de formulario y <body>

onkeyup Soltar una tecla pulsada Elementos de formulario y <body>

onload La pá gina se ha cargado completamente <body>

onmousedown Pulsar (sin soltar) un botó n del rató n Todos los elementos

onmousemove Mover el rató n Todos los elementos

El rató n "sale" del elemento (pasa por


onmouseout Todos los elementos
encima de otro elemento)

El rató n "entra" en el elemento (pasa por


onmouseover Todos los elementos
encima del elemento)

Soltar el botó n que estaba pulsado en el


onmouseup Todos los elementos
rató n

Inicializar el formulario (borrar todos sus


onreset <form>
datos)

Se ha modificado el tamañ o de la ventana


onresize <body>
del navegador

onselect Seleccionar un texto <input>, <textarea>

onsubmit Enviar el formulario <form>

Se abandona la pá gina (por ejemplo al


onunload <body>
cerrar el navegador)
Fuente: http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.html

Para leer má s sobre este tema:

 Lista de eventos en jasvascript


https://www.aprenderaprogramar.com/index.php?
option=com_content&view=article&id=842:lista-de-eventos-javascript-on-click-
dblclick-mouseover-mouseout-change-submit-keypress-
cu01159e&catid=78&Itemid=206
 Eventos en JAvascript
https://lenguajehtml.com/p/html/scripting/eventos-html
 Modelos bá sicos de eventos
https://lenguajehtml.com/p/html/scripting/eventos-html
 Eventos con jquery
https://api.jquery.com/category/events/
Ejemplo
Si queremos ejecutar una funció n al hacer click sobre un elemento:

Ejemplo 3. Ejemplo con el evento click

1. Un botó n
<script>
$(document).ready(function() {
$( ".boton" ).click(function() {
alert( “Estamos haciendo click sobre el boton” );
})
});
</script>

2. Los elementos de un menú

<script>
$(document).ready(function() {
$( ".menu li" ).click(function() {
alert( “clickk sobre el menu” );
})
});
</script>

Para saber la sintaxis completa de los eventos con jquery:


 https://api.jquery.com/category/events/

Funciones en Javascript

Una funció n es el conjunto de instrucciones que se van a ejecutar cuando se llama a una
funció n. Normalmente para llamar una funció n se utiliza un evento, por ejemplo un click
del rató n.

Las funciones por si solas no hacen nada, siempre necesitan un evento que las ejecute.

Su sintaxis es la siguiente:

function nombre_funcion(pará metros) {


….. instrucciones a realizar …..
}

Por ejemplo, si quisiéramos tener una funció n que se ejecute al hace click a un vínculo, y
que este abra una ventana con un mensaje específico:
Ejemplo 4. Ejemplo de funciones con javascript

Queremos que al hacer click sobre cada una de las opciones de un menú se ejecute una funció n que abra
una ventana y nos diga el título de la opció n que estamos clickeando.

1. Tenemos un menú con una serie de vínculos:

<ul class="menu">
<li><a href="#" title="Las aves de venezuela">Las Aves de Venezuela</a></li>
<li><a href="#" title="Bibliografia">Bibliografía</a></li>
<li><a href="#" title="Registro">Registros</a></li>
<li><a href="#" title="Programa">Programas</a></li>
<li><a href="#">Instituciones</a></li>
<li><a href="#">Vínculos</a></li>
<li><a href="#">Acerca De</a></li>
<li><a href="#" title="Contacto">Contacto</a></li>
</ul>

2. Tenemos el manejador del evento click sobre cada opció n del menú :

<script>
$(document).ready(function() {
$( ".menu a" ).click(function() {
//guardamos el valor del titulo del elemento al que hicimos click
var titulo = $(this).attr('title');
//llamamos la funció n y le enviamos como variable el titulo
abrir_ventana(titulo);
});
})

</script>

3. Tenemos la funció n:

function abrir_ventana(mensaje=""){
alert(mensaje);
}

Al finalizar tendríamos todo el có digo de la siguiente manera:

<script>
$(document).ready(function() {
$( ".menu a" ).click(function() {
//guardamos el valor del titulo del elemento al que hicimos click
var titulo = $(this).attr('title');
abrir_ventana(titulo);
});

function abrir_ventana(mensaje=""){
alert(mensaje);
}
})

</script>
Para leer má s sobre funciones en javascript:
 https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones
 http://librosweb.es/libro/javascript/capitulo_4/funciones.html

Para leer sobre sentencias de control


 https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Bucles_e_iteraci
%C3%B3n

También podría gustarte