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
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:
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
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.
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
