En 20 minutos ... jQuery

3,214 views

Published on

Charla sobre jQuery que inluye una pequeña introducción, describe cómo funciona, y propone buenas prácticas. También habla de jQuery Mobile.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
3,214
On SlideShare
0
From Embeds
0
Number of Embeds
662
Actions
Shares
0
Downloads
61
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

En 20 minutos ... jQuery

  1. 1. jQuery Jesús María Méndez Pérez Grupo de Apoyo a la Teleenseñanza (GAT)
  2. 2. Introducción• Es una librería Javascript que: – elimina las diferencias entre los distintos navegadores web – simplifica tareas comunes – es amigable para los diseñadores web – tiene una gran cantidad de plugins (http://archive.plugins.jquery.com) – es usado en más del 35% de los sitios webs
  3. 3. Características• jQuery es la librería Javascript más utilizada actualmente.• Ha tenido un gran crecimiento durante estos últimos años.• jQuery es usado en más del 50% de los 10,000 sitios top de Internet y en más del 30% del top 1,000,000.
  4. 4. Uso jQuery
  5. 5. Historia• John Resig lanzó jQuery approximadamente el 16 de Enero de 2006• John escribió en su blog – “Making it to both del.icio.us popular and the front page of digg just shows how badly Javascript programmers want a better library for writing code with.”• Justo una semana después Michael Geary escribió el primer plugin jQuery, una función para manipular JSON que se incluiría posteriormente en la librería jQuery.• Version 1.0 - 26 de Agosto de 2006.• Actualmente - Versión 1.8.3 - 13 de Noviembre de 2012.
  6. 6. Cargar jQuery<!DOCTYPE html><html><head><meta charset="utf:8"><title>My Web Page</title><link href="css/main.css rel="stylesheet"><script src="js/jquery/1.8.3.min.js"></script></head><body>…</script> $(document).ready(function() { });</script></body>O bien…<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
  7. 7. Programando en jQuery1. Seleccionar 2. Acciónimages showlinks hidedivs animatetables add new contenttable rows change CSSform fields change HTML propertiesExternal links load data from the web… any HTML TAG
  8. 8. Programando en jQueryhttp://api.jquery.com/category/selectors/$(p)$(.navbar)$(#banner)$(#banner p)$(h2 + p)$(a[href^="http://"])http://files.sawmac.com/js2e/testbed/selectors.html
  9. 9. Programando en jQuery1. Seleccionar 2. Acción$(a[href^="http://"]).attr(target,_blank); $(a[href^="http://"]).attr(target,_blank);<li> <li><a href="http://google.com/">Google</a> <a href="http://google.com/" target="_blank") >Google</a></li> </li><li> <li><a href="http://yahoo.com">Yahoo!</a> <a href="http://yahoo.com" target="_blank") >Yahoo!</a></li> </li><li> <li><a href="../testbed/events.html">Events testbed</a> <a href="../testbed/events.html "target="_blank") >Events</li> testbed</a><li> </li><a href="http://twitter.com">Twitter</a> <li></li> <a href="http://twitter.com">Twitter</a> </li>
  10. 10. Interacción - EventosMouse events mouseover mouseout mousemoveClick events click dbclick mousedown mouseupWindow load unload resize scrolleventsKey events keydown keyup keypressForm events focus blur submit
  11. 11. Programando en jQuery• 1. Seleccionar elemento $(‘div’)• 2. Añadir Evento $(‘div).click(function(){ });• 3. Acción $(‘div).click(function(){ alert(‘hola); });
  12. 12. jQuery Effects
  13. 13. Buenas prácticas• Usar SIEMPRE la última versión de jQuery – Mejora el rendimiento y corrige errores de versiones anteriores.• Precaución al seleccionar selectores – De mayor a menor rendimiento: • Selectores de ID: (#sidebar) • Selectores de etiqueta HTML (input, div, etc.) • Selectores de clase (.pantalon) • Pseudoselectores y selectores de atributo (:visible, :hidden, [attribute=value], etc.)
  14. 14. Hazlo simple• Evita selectores complicados $("body #page:first-child article.main p#intro em"); //mal $("#intro em"); //bien• Aumento especificación de izquierda a derecha $("#intro em") -> Carga todos los elementos ‘em’ en un array. Muy ineficiente si tienes cientos de etiquetas ‘em’. $("em", $("#intro")); -> $("em", "#intro"); $("#intro").find("em");
  15. 15. <div id="content"> <form method="post" action="/"> <h2>Traffic Light</h2> <ul id="traffic_light"> <li><input type="radio" class="on" name="light" value="red" /> Red</li> <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li> <li><input type="radio" class="off" name="light" value="green" /> Green</li> </ul> <input class="button" id="traffic_button" type="submit" value="Go" /> </form> </div>Seleccionar un elemento var traffic_button = $(#content .button); //lento var traffic_button = $(#traffic_button); //rápidoSeleccionar múltiples elementos – Siempre descender del ID más cercano (var traffic_lights = $(#traffic_light input);) – Siempre utilizar una etiqueta antes de una clase (y descender de un ID): var active_light = $(#traffic_light input.on); – Nunca utilices etiqueta con un ID. var content = $(div#content); – Consejo: Si queremos recordar que nuestra variable local es un objeto jQuery podemos ponerle $ como prefijo. – Nunca repitas una operación de selección de jQuery mas de una vez en tu aplicación.
  16. 16. Separar la funcionalidad de JavascriptSeparar la funcionalidad de Javascript en otra capa independiente de (X)HTML and CSS.//malNunca incluyas eventos Javascript en los atributos. <a onclick="doSomething()" href="#">Click!</a>//bienEl código Javascript se debe de incluir en un fichero externo y enlazado al documento con la etiqueta ‘<script>’ <a href="backuplink.html" class="doSomething">Click!</a> $(a.doSomething).click(function(){ // Do something here! alert(You did something, woo hoo!); }); ...The método .click() de jQuery nos permite enlazar el evento click al resultado de nuestro selector.Se seleccionarán todas las etiquetas <a> con clase “doSomething” y se le enlazará el evento que llamará a lafunción.
  17. 17. Nunca depender de JavascriptNunca asumir que el navegador del usuario tiene Javascript activado.//mal <script language="javascript"> var now = new Date(); if(now.getHours() < 12) document.write(Good Morning!); else document.write(Good Afternoon!); </script>Javascript desactivado -> No aparecería nada.//bien <p title="Good Day Message">Good Morning!</p> <script language="javascript"> var now = new Date(); if(now.getHours() >= 12) { var goodDay = $(p[title="Good Day Message"]); goodDay.text(Good Afternoon!); }Javascript desactivado -> Siempre aparecería “Good Morning”
  18. 18. Código accessibleImportante que nuestro (X)HTML esté bien estructurado para evitar DOM scripting e interactuar de manerasencilla con jQuery.//muy mal //mal //bien
  19. 19. CSS DinámicoSi el navegador web no soporta Javascript o éste está desactivado, los elementos que ocultamos a travésde CSS nunca serán nuevamente visibles ya que nuestro código Javascript no se ejecutará.Podemos ocultar elementos de la página usando usando CSS, sin embargo nuestro CSS solo se ejecutarási el Javascript está activado.#bad #goodHTML: HTML:<h2>This is a heading</h2> <h2>This is a heading</h2> <p class="hide-me-first"> This is some information about the heading. </p> <p class="hide-me-first"> This is some information about the heading. </p>CSS: jQuery Javascript:p.hide-me-first $(document).ready(function{{ $("p.hide-me-first").css("display", "none"); display: none; $("p.hide-me-first").css("visibility", "hidden"); visibility: hidden;} });
  20. 20. Almacenar consultas jQuerySi pretendes usar los objetos jQuery obtenidos durante la selección en otras partes del código,deberías almacenarlo en un objeto de ámbito global. // Definir un objeto de ámbito global (i.e. the window object) window.$my = { // Initialize all the queries you want to use more than once head : $(head), traffic_light : $(#traffic_light), traffic_button : $(#traffic_button) }; function do_something() { // Now you can reference the stored results and manipulate them var script = document.createElement(script); $my.head.append(script); // When working inside functions, continue to save jQuery results to your global container. $my.cool_results = $(#some_ul li); $my.other_results = $(#some_table td); // Use the global functions as you would a normal jQuery result $my.other_results.css(border-color, red); $my.traffic_light.css(border-color, green); }
  21. 21. • 1) $(‘.child’, $parent).show(); (Ámbito)• 2) $parent.find(‘.child’).show(); (Usando find())• 3) $parent.children(‘child’).show(); (hijo inmediato)• 4) $(‘parent > .child’).show(); (selector CSS)• 5) $(‘#parent .child’).show(); (igual que 2)
  22. 22. • Caching var parents = $(‘.parents’); var children = $(‘.parents’).find(‘.child’) //mal var children = parents.find(‘.child’) //bienCualquier $(‘ ’) implica volver a recorrer el DOM -> Mayor lentitud (Menor rendimiento)• Encadenamiento //sin encadenamiento $(‘#message’).fadeIn(‘slow’); $(‘#message’).addClass(‘activeMessage’); //con encadenamiento $(‘#message’).fadeIn(‘slow’) .addClass(‘activeMessage’);
  23. 23. • Inserción en el DOM – Cada inserción en el DOM es muy costosa. – Construir cadenas de HTML en una variable y realizar una única inserción (append()) tan tarde como sea posible. – Usar detach() en vez de remove() si posteriormente se va a hacer una reinserción de los elementos en el DOM.• Evitar bucles – La manipulación directa del DOM es muy costosa. – Crear lo que necesites en memoria y por último actualizar el DOM. //mal //bien
  24. 24. Objetos jQuery como ArraysEl resultado de un selector es un objeto jQuery. Sin embargo, te hace pensar que estás trabajandocon un array con elementos y una longitud.Usar for (o while) en lugar de $.each() hace que mejore el rendimiento.Comprobar la longitud es la única manera de determinar si la colección contiene algún elementohttp://jsfiddle.net/martinaglv/NcRsV/
  25. 25. Delegación de eventos (Bubbling)Cada evento (e.g. click, mouseover, etc.) en JavaScript hace el efecto burbuja en el árbol DOMhacia los elementos padre.Muy útil cuando muchos elementos llaman a la misma función. En vez de establecer una funciónde listener a muchos nodos (ineficiente), se establece una función de listener a su padre.
  26. 26. Mantén el código clarovar defaultSettings = {};defaultSettings[carModel] = Mercedes;defaultSettings[carYear] = 2010;defaultSettings[carMiles] = 5000;defaultSettings[carTint] = Metallic Blue;$(.someCheckbox).click(function(){ $(‘.someCheckbox’).click(function(){ if(this.checked){ var checked= this.checked; $(#input_carModel).val(defaultSettings.carModel); $(#input_carYear).val(defaultSettings.carYear); $.each([‘carModel’, ‘carYear’, ‘carMiles’, ‘carTint’, function (i,key) { $(#input_carMiles).val(defaultSettings.carMiles); $(#input_ + key).val(checked ? defaultSettings[key] : ‘’); $(#input_carTint).val(defaultSettings.carTint); }); } }); else { $(#input_carModel).val(); $(#input_carModel).val(); $(#input_carModel).val(); $(#input_carModel).val(); }});
  27. 27. Usar CSS HooksLa API CSS hooks permite a los desarrolladores obtener y establecer particular valores CSS. $.cssHooks[borderRadius] = { get: function(elem, computed, extra){ // Depending on the browser, read the value of // -moz-border-radius, -webkit-border-radius or border-radius }, set: function(elem, value){ // Set the appropriate CSS3 property } }; // Use it without worrying which property the browser actually understands: $(#rect).css(borderRadius,5);https://github.com/brandonaaron/jquery-cssHooks -> Colección de CSS Hooks
  28. 28. Usar Custom Easing FunctionsEl plugin jQuery easing plugin permite añadir efectos a tus animaciones.Copiar el efecto que necesitas del plugin y añadirlo a jQuery.easing $.easing.easeInOutQuad = function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }; // To use it: $(#elem).animate({width:200},slow,easeInOutQuad);
  29. 29. $.proxy() //Ejecutar• Problema: Desaparece el botón pero no el panel.• Utilizando $.proxy:
  30. 30. Determinar el tamaño de tu página web• Cuanto más contenido tenga tu página web, más le costará al navegador renderizarla.• Puedes contar el numero de elementos DOM mediante: console.log( $(*).length );• Intenta optimizarla eliminando nodos innecesarios.
  31. 31. Ámbito• El problema del ámbitoSólo se está alterando el DOM una vez la página esté cargada.En casi cualquier aplicación web moderna, el DOM va a cambiar después de que la página haya sido cargada.Ejecutando jQuery dentro de success de una función AJAX:
  32. 32. • Como manejar el ámbitoA la izquierda, se establece el handler de la manera normal. A la derecha, se realiza una búsqueda de la clase botón en el documento.La de la derecha te permite controlar el ámbito sobre el DOM que está siendo modificado.Dada esta función, se reescribe $(document).ready(fuction(){Y la llamada AJAX de una manera similar:
  33. 33. • Cuando se rompe el ámbito La variable scope solo será válida dentro de la función my_button_jquery. Es importante tener en cuenta que este ámbito se romperá si realizamos una llamada a otra función. Naturaleza asíncrona del modelo de eventos de Javascript. Por eso, la función AJAX anterior no es posible escribirla con scope dentro del manejador success.• Eficiencia Siempre debes invocar el objeto jQuery desde fuera de la función para mejorar la eficiencia. //mal //bien
  34. 34. Establecer AJAX GlobalEn una petición AJAX, algunas veces necesitas indicar que la petición está en progreso(mostrar animación, capa más oscura, etc.)
  35. 35. Usar HTML5 Data Attributes• HTML5 data attributes son utilizados para almacenar información en la página web.• Para acceder a los atributos del div:• http://api.jquery.com/data/
  36. 36. Crear un plugin en jQuery(function($){ $.fn.yourPluginName = function(){ … return this; };})( jQuery);$(“p”).yourPluginName(); Fichero jquery.reversetext.js
  37. 37. Crear un plugin en jQueryHTML:Resultado:
  38. 38. Comprimir tu Javascript• Comprimir el código Javascript usando YUICompressor• Menor tiempo de respuesta -> Agilizamos la carga del página web.• Otros compresores de Javascript: – http://javascriptcompressor.com/ – http://jscompress.com/• También podemos comprimir nuestro código CSS – http://www.cssdrive.com/index.php/main/csscompressor/
  39. 39. jQuery mobile• http://jquerymobile.com/ - Versión 1.2.0• Librería Mobile UI.• HTML5 Data Atributtes definidos. <div data-role="page" id="home"> </div><link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /><script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  40. 40. <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li></ul>http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html
  41. 41. jQuery mobile – Buenas prácticasa) Mirar detenidamente los ejemplos – http://jquerymobile.com/demos/b) Cada página debe de valerse por sí misma – Debe contener: CSS, Javascript, header, footer, etc.c) Comprobar que ocurre cuando desactivas Javascriptd) Asegúrate de que tu código no sea vulnerable a losataques
  42. 42. jQuery mobile – Buenas prácticas• Minimizar y comprimir – Reducir el número de peticiones HTTP – Minimizar los ficheros CSS y Javascript – Intentar que las páginas webs sean menores de 25KB (para que sea posible el uso de la caché) – Utilizar la herramienta YUI Compressor
  43. 43. jQuery mobile – Buenas prácticas• Números de teléfono, mapas y correos electrónicos – No embeber mapas en las aplicaciones móviles
  44. 44. jQuery mobile – Buenas prácticas• Usar jQuery Validate – http://bassistance.de/jquery-plugins/jquery-plugin-validation/ – No hay que confiar en el usuario.
  45. 45. jQuery mobile – Buenas prácticas• Usar ThemeRoller – http://jquerymobile.com/themeroller/• Usar radio button en lugar de select – Select son menos consistentes, suelen dar más problemas entre las plataformas. – Permiten al usuario ver al instante las opciones de elección.
  46. 46. jQuery mobile – Buenas prácticas• Añadir Google Analytics
  47. 47. jQuery mobile – Buenas prácticas• Usar correctamente las etiquetas meta• Determinar que estilo de navegación usar: – La página principal es el menú global – El menú global es una subpágina – El menú global está al final de cada página
  48. 48. La página principal es el menú global El menú global es una subpágina• Pros • Pros – Simple – Escalable – Buena UX – Contexto – Velocidad – Velocidad• Contras • Contras – Demasiados enlaces – Cuestionable UX
  49. 49. El menú global está al final de cada página • Pros – Escalable – Velocidad – Contexto – Excelente UX • Contras – Aplicaciones no usan esta interfaz
  50. 50. jQuery mobile – Buenas prácticas• Detectar y redireccionar a móvil – Browser sniffing - WURFL• Establecer un enlace a la página completa• Contenido vs Funcionalidad
  51. 51. GRACIAS

×