jQuery para lechones

jQuery para lechones www.jquery.com Ignacio Segura www.isegura.es

I Por qué jQuery

jQuery es una librería de Javascript Javascript es un lenguaje de programación que permite manipular una página web una vez que esta está cargada. El código se carga dentro de la página web, y no puede interactuar con ninguna otra ventana / pestaña que aquella en la que se ha cargado. excepto... También puede abrir nuevas ventanas (si el navegador se lo permite). Estas son las únicas “otras ventanas” con las que Javascript puede interactuar. Al recargar una página o cerrar la ventana, todo lo que había hecho Javascript desaparece.

¿Por qué necesitamos una librería de Javascript? Las librerías se inventan porque los desarrolladores queremos ahorrar tiempo y dolor.

Los problemas de Javascript
Tiempo: Ciertas tareas se repiten con mucha frecuencia y no podemos hacerlas cómodamente.
Dolor: Javascript no funciona igual en todos los navegadores.

El precio que pagamos
Tiempo de carga de la página: Tenemos que cargar la librería en cada página web.
jQuery es, sin embargo, una de las librerías más pequeñas.
Aprendizaje: Tenemos que aprender nuevas funciones, nuevas propiedades, nuevos... para lo que a menudo son las mismas cosas en el fondo.

II “ Arrancar” jQuery

Cargar jQuery y otros plugins <html> <head> ... <script type="text/javascript" src="jquery.js"></script> ... </head> ... Tenemos que cargar jQuery en cada página que vayamos a usar. Incluimos esto en la cabecera de nuestra página: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.vCenter.js"></script> ... Si necesitamos otros plugins, los cargamos detrás de jQuery: parte2.htm

ready()! $ = jQuery. Como escribir “jQuery” todo el rato es muy pesado, se han buscado un atajo que es escribir simplemente $. Este atajo también lo usan otras librerías, y puede causar conflictos. Para evitarlos, consultar jQuery.noConflict() Javascript se ejecuta en cuanto se carga, incluso si todavía no se ha cargado la página, así que le vamos a hacer esperar.

¡A darse cabezazos! Sacad un aviso en pantalla en cuanto termine de cargar la página. alert(“text”);

.ready() no es igual a load() $(document). ready() -> se pone en marcha cuando el HTML está cargado. element. load() -> se pone en marcha cuando todo está cargado, incluidas las imágenes, CSS y demás. load() es un evento de Javascript, no de jQuery, que se pone en marcha cuando un elemento determinado ha sido cargado completamente, imágenes incluidas.

III Manipular la página

Eliminar el aviso al hacer click en él Vamos a eliminar el aviso que nos sale en pantalla al hacer click en él. Paso 1: Coger ese aviso. Paso 2: Asignarle el evento “click con el ratón”. Paso 3: Al hacer click, borrar el elemento. Mostrar Firebug – sustituir remove por animaciones probar fadeOut y animate

Con jQuery, podemos usar selectores de CSS3 para coger nuestros elementos. Funciona en todos los navegadores soportados por jQuery , incluso si son anteriores a CSS3 . Si está en la documentación, ese selector va a funcionar. Sí, también en IE6. CSS3?

Activar el botón “siguiente” Paso 1: Coger el botón. Paso 2: Asignarle el evento “click con el ratón”. Paso 3: Al hacer click, pasar ese elemento atrás.

Activar el botón “siguiente”: lo que necesitáis saber 1 – Reutilizar un resultado Una selección se puede guardar como variable y reutilizar: foo = $( selección ); $(foo) 2 – Encadenamiento Los métodos en jQuery se pueden encadenar $(this). addClass('selected') . appendTo('#menu') ; 2 – Selectores :last – Selecciona el último de los anteriores. Ejemplo : $('div#content p:last') coge solamente el último párrafo de todos los que están dentro de div#content 3 - Métodos: $( selección ).remove() : Elimina el elemento seleccionado. $( selección ).prependTo( destino ) : Inserta el elemento o HTML dentro de destino , al principio. Cuidado, este método inserta el objeto original, no una copia. $(selección).clone() : Saca una copia del objeto seleccionado. Todos estos son métodos de manipulación.

¡A darse cabezazos! Como soy mala persona, os he dado más información de la que necesitáis para resolverlo.

Activar el botón “anterior” En este, tenemos que funcionar al revés, tenemos que coger el primero y ponerlo arriba del todo. Paso 1: Coger el botón. Paso 2: Asignarle el evento “click con el ratón”. Paso 3: Al hacer click, pasar ese elemento delante.

Activar el botón “anterior”: lo que necesitáis saber 1 – Selectores :first – Selecciona el primero de los anteriores. Ejemplo : $('div#content p:first') coge solamente el primer párrafo de todos los que están dentro de div#content 2 - Métodos: $( selección ).appendTo( destino ) : Inserta el elemento o HTML dentro de destino , al final. Como el anterior, este método inserta el objeto original, no una copia.

¡A darse cabezazos!

IV AJAX

¿Qué es AJAX? Originalmente definido como: Asynchronous JavaScript And XML Consiste en: 1 – Con la página ya cargada, pedimos, mediante Javascript, una información al servidor. 2 – Cuando el servidor nos la da (si nos la da), modificamos la página de acuerdo con esa información. Los efectos visuales NO SON AJAX, son efectos visuales. AJAX se refiere solamente a cuando pedimos al servidor datos mediante Javascript con la página ya cargada.

¿Qué tipos de datos acepta jQuery? HTML XML Código javascript JSON (Javascript Object) Texto plano

AJAX es fácil con jQuery Probemos a cargar las películas desde fuera Pero algo va a ir mal... cargar parte 4-0

Manipular el resultado de load() Problema: cada vídeo (<object>) debería ir rodeado por un <div>. Se lo añadimos después de cargar. Solución en 4-1

One step beyond... Ahora tendremos un gran botón rojo, y al pulsarlo, cargaremos un nuevo vídeo. Fuera del método ready() definimos la función que se encargará de pasar al siguiente trailer al recibir los datos. cargar 4-2

Vale, tengo mi XML. ¿Y...? Podemos manipular el fichero XML con los selectores de jQuery igual que con la página HTML. Por ejemplo: miXML = ....; $('trailer', miXML) ... jQuery buscará los nodos <trailer> dentro de miXML. mostrar el XML trailers.xml

¡A darse cabezazos! Cada vez que pulse el botón rojo, se carga un fichero XML (“trailers.xml”) que contiene una lista de trailers: su referencia en Youtube y su título. Tenéis que insertar: El vídeo dentro de <span id=”videos”> El título dentro de <div id=”titlebox”> Pero antes de insertarlos ahí, es posible que necesitéis vaciarlos primero.

Os va a hacer falta... Javascript: Dentro de una función podemos crear variables locales y globales: Ejemplo de local: var foo = 'bar'; Ejemplo de global: foo = 'bar'; Para generar un número al azar entre 0 y 4... numero = Math.floor(Math.random() * 5); jQuery: Para saber cuántos elementos hay en un objeto de jquery: foo = $('bar'); foo.length Para vaciar un elemento: $(foo).empty(); Para insertar texto dentro de un elemento: $(foo).text('mi texto'); Para seleccionar algo dentro de “ foo ” (siendo foo HTML o XML) $('selector', foo)

V Crear un plugin

Sintaxis de un plugin Los plugins de jQuery lo que hacen es extender la función jQuery (también llamada $). El código en verde es para evitar conflictos con otras librerías que también usan la función $ Por regla general, nuestro código debe retornar lo mismo que se ha recibido, es decir, this . Un plugin puede definir más de un método. Abrir parte5.htm

Convenciones de un plugin Por regla general, los plugins de jQuery se graban cada uno en un fichero distinto, con el nombre: jquery.nombre.js Esto es una convención, en realidad, mientras el código se cargue después de jQuery y antes de que se ejecute el código que va a usar el plugin, éste va a funcionar. http://docs.jquery.com/Plugins/Authoring

¡A darse cabezazos! A convertir lo que habéis hecho antes en un plugin. solución en parte5-resuelto.htm

Muchas gracias. www.jquery.com www.isegura.es [email_address]

http://www.isegura.es	65
http://www.webmastergranada.es	57
http://www.pensamientosdivergentes.net	8
http://www.slideshare.net	3

jQuery para lechones

by Ignacio Segura on Jun 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 133

Statistics

jQuery para lechones — Presentation Transcript