Javascript en proyectos reales




Nuevos estándares Web
Máster en Ingeniería Web     David Arango Maroto
Universidad de O...
Javascript en los 90s




http://www.dynamicdrive.com/dynamicindex9/noright.htm
Javascript en la actualidad
                (mayormente)
●   Compatibilidad
●   Portabilidad
●   Código no intrusivo
    –...
Javascript en la actualidad
●   Demanda de expertos:
    –   607 ofertas buscando en www.tecnoempleo.com
    –   http://jo...
¿Cómo quieres escribir Javascript?


            - Dificultad +
 Drop-in                     From scratch
¿Por qué usar librerías?
●   Simplifican el trabajo con Javascript
    –   Múltiples niveles de DOM
    –   Diferentes imp...
Librerías
●   Prototype
●   Dojo
●   moo.fx      ¡NO FRAMEWORKS!
●   YUI
●   Jquery
●   ...
Librerías – 2007

                                                 jQuery 38%




                                        ...
Librerías – 2008

                                               jQuery 37%




  Prototype 37%
                          ...
Prototype vs jQuery
●   Prototype:
    –   Extiende los objetos de DOM y de Javascript.
    –   Añade un montón de objetos...
jQuery
●   “Haz más con menos código”
●   2006, John Resig
●   Todo lo que necesitas:
    –   Selección de elementos del D...
jQuery (somos fans)
●   Estupenda documentación
●   Comunidad sólida
    –   http://docs.jquery.com/Discussion
    –   htt...
jQuery ¿por qué?
●   Estilo de programación
●   Manejo de eventos más sencillo
●   Peso       80

               70
      ...
Lovely lovely jQuery
●   Cuando empezamos con jQuery no había soporte
    RoR
●   Los bindings javascript de RoR tenían pr...
Al grano, la función jQuery
●   La función jQuery encapsula toda la funcionalidad
    de la librería.
●   Lo primero que d...
Inciso: incluyendo scripts
●   Hay sólo una forma de hacerlo bien, y no hace falta
    ser Neerlandés para utilizarla:


<...
Selección de nodos, CSS
●   CSS
    –   $('p.activo')
    –   $('ul#menu li.activo')
    –   $('ul#menu li:first')
    –  ...
Selección de nodos, CSS3


           $('div[id^=quot;contentquot;]')
       Elementos div cuyo id empieza por “content”
 ...
Moviéndonos por el DOM
●   parents() y parent()
●   prev(), prev('a')
●   next()
●   siblings()
Inciso: literal de objeto
●   Utiliza el literal de objeto, es una forma de
    encapsular tu código:


mi_app = {
    ini...
Colecciones de nodos
●   Con una selección de nodos podemos...
     –    Recorrerla:
           ●   $('input').each(functi...
Trabajando con la colección
Modificación de attributos
●   attr() hace sencillo el trabajo con atributos:
    –   $('p').attr('title') // Retorna el v...
Manipulación de contenidos
●   Obtener y cambiar contenido
    –   html() text() val()   (getters y setters)
●   Insercion...
Modificación de estilos
●   css() nos hace el trabajo:
    –   $('p').css('color', 'red')
    –   $('p.destacado').css({ c...
Inciso: usa siempre var
●   Las variables en Javascript tienen ámbito global o
    local dependiendo de si se han creado c...
Ejemplo: cebrear tabla
●   Crear una tabla y aplicarle un color diferente a las
    filas pares e impares siguiendo los pr...
Efectos
●   hide() y show()
●   slideDown(), slideUp()
●   fadeIn() y fadeOut
●   Permiten añadir comportamiento al termin...
Ejemplo: ocultar párrafos
●   Documento con una serie de párrafos.
●   Insertar enlaces antes de cada párrafo que permitan...
Sobre el cierre del elemento
                  <script>
●   Según el apéndice C de la especificación XHTML 1.0:


    C.3 ...
Manejo de eventos
●   $('p').bind('click', function() { alert('Click') })
●   blur, focus, load, resize, scroll, unload,
 ...
Manejo de eventos
●   Si el callback del evento retorna false se cancela el
    burbujeo y el comportamiento por defecto d...
Inciso: burbujeo de eventos
●   ¿Qué pasa cuando dos elementos anidados tienen
    comportamiento para un mismo evento?

 ...
preventDefault versus return(false)
●   return(false) evita la propagación del evento y
    cancela su comportamiento por ...
Ojo
●   return(false) no frenará el comportamiento por defecto
    si ocurre un error javascript antes:
$('a').click(funct...
Ejemplo: menú de acordeon
●   Empezamos con una lista de enlaces anidada.
●   Los enlaces de primer nivel deben ser agrupa...
Ejemplo: tabtastic
●   Típica lista de contenidos con pestañas.
AJAX


Asynchronous
 Javascript
    And
    XML
AJAX
Inciso, diálogos HTTP
●   Presentación sobre diálogos HTTP.
●   Analizar la Fisgona de Menéame.
AJAX




               ?
Asynchronous
 Javascript
    And
    XML
Ajax en minúsculas


●   Más que un acrónimo, es una forma de interacción.
●   Carga asincrónica de datos, con o sin inter...
Ejemplos: autocompletado
Ejemplos: edit in place
Ejemplos: formularios asincrónicos
Ajax con jQuery: load()



       load(uri)
Ejemplo: hola mundo ajax
●   Escribir una página web con una lista de enlaces a
    páginas locales.
●   Cargar el enlace ...
Ajax avanzado en jQuery : ajax()

          $.ajax({
            url: url,
            dataType: 'xml',
            succes...
Ejemplo: ajax con xml
●   ¡Lo de antes era AHAH!
    http://en.wikipedia.org/wiki/AHAH
●   Intentar el ejemplo anterior co...
Tests de unidad: jShoulda



   http://jshoulda.scriptia.net/
Tests de aceptación: Selenium




         http://seleniumhq.org/
    http://www.vimeo.com/2343914
Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQuery
Upcoming SlideShare
Loading in...5
×

Javascript en proyectos reales: jQuery

10,910

Published on

Presentación utilizada como guía para la asignatura "Nuevos estándares Web" del Máster de Ingeniería Web de la Universidad de Oviedo

Published in: Technology
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,910
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
231
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Javascript en proyectos reales: jQuery

  1. 1. Javascript en proyectos reales Nuevos estándares Web Máster en Ingeniería Web David Arango Maroto Universidad de Oviedo Simplelógica
  2. 2. Javascript en los 90s http://www.dynamicdrive.com/dynamicindex9/noright.htm
  3. 3. Javascript en la actualidad (mayormente) ● Compatibilidad ● Portabilidad ● Código no intrusivo – No hay consenso sobre la definición – Separación entre capas – Evitar incompatibilidad – Graceful degradation
  4. 4. Javascript en la actualidad ● Demanda de expertos: – 607 ofertas buscando en www.tecnoempleo.com – http://jobs.jsninja.com/ ● Requerimientos Javascript en proyectos reales ● Mucho buzz por la llamada “Web 2.0”
  5. 5. ¿Cómo quieres escribir Javascript? - Dificultad + Drop-in From scratch
  6. 6. ¿Por qué usar librerías? ● Simplifican el trabajo con Javascript – Múltiples niveles de DOM – Diferentes implementaciones en navegadores ● Agilidad
  7. 7. Librerías ● Prototype ● Dojo ● moo.fx ¡NO FRAMEWORKS! ● YUI ● Jquery ● ...
  8. 8. Librerías – 2007 jQuery 38% YUI 17% Prototype 45% http://ajaxian.com/archives/nitobi-survey-results-on-ajax-development
  9. 9. Librerías – 2008 jQuery 37% Prototype 37% YUI 26% http://ajaxian.com/archives/2007-ajax-tools-usage-survey-results
  10. 10. Prototype vs jQuery ● Prototype: – Extiende los objetos de DOM y de Javascript. – Añade un montón de objetos extra. – Muy sólida. ● jQuery – Totalmente encapsulada en un sólo objeto. – Permite encadenado de métodos. – Realmente sencilla e intuitiva.
  11. 11. jQuery ● “Haz más con menos código” ● 2006, John Resig ● Todo lo que necesitas: – Selección de elementos del DOM – Manejo de eventos http://ejohn.org/about/ – API ajax – Animaciones (básicas)
  12. 12. jQuery (somos fans) ● Estupenda documentación ● Comunidad sólida – http://docs.jquery.com/Discussion – http://lists.scriptia.net/listinfo.cgi/jquery-es-scriptia.net ● Variedad de plugins ● Integración con RoR – http://ennerchi.com/projects/jrails ● Libre, cobertura de tests, amplio soporte de navegadores...
  13. 13. jQuery ¿por qué? ● Estilo de programación ● Manejo de eventos más sencillo ● Peso 80 70 73 60 54 50 40 30 20 10 0 Prototype jQuery Comprimidas con YUI Compressor http://developer.yahoo.com/yui/compressor/
  14. 14. Lovely lovely jQuery ● Cuando empezamos con jQuery no había soporte RoR ● Los bindings javascript de RoR tenían problemas de accesibilidad ● jQuery hizo el trabajo, bueno, y nosotros ● Choan Gálvez fue el culpable: – http://choangalvez.nom.es/
  15. 15. Al grano, la función jQuery ● La función jQuery encapsula toda la funcionalidad de la librería. ● Lo primero que debes saber es cómo agregar comportamiento en la carga del DOM ¡magia!: $(document).ready(function() { })
  16. 16. Inciso: incluyendo scripts ● Hay sólo una forma de hacerlo bien, y no hace falta ser Neerlandés para utilizarla: <script type=”text/javascript”> // Cada vez que pones LANGUAGE Dios mata un gatito </script> Buenas prácticas
  17. 17. Selección de nodos, CSS ● CSS – $('p.activo') – $('ul#menu li.activo') – $('ul#menu li:first') – $('ul#menu li:odd') – $('ul#menu li:eq(3)')
  18. 18. Selección de nodos, CSS3 $('div[id^=quot;contentquot;]') Elementos div cuyo id empieza por “content” Más en: http://www.456bereastreet.com/archive/200601/css_3_selectors_e
  19. 19. Moviéndonos por el DOM ● parents() y parent() ● prev(), prev('a') ● next() ● siblings()
  20. 20. Inciso: literal de objeto ● Utiliza el literal de objeto, es una forma de encapsular tu código: mi_app = { init: function() { // Cosas } } Buenas $(document).ready(mi_app.init); prácticas
  21. 21. Colecciones de nodos ● Con una selección de nodos podemos... – Recorrerla: ● $('input').each(function() { alert(this.value) }) – Hacer modificaciones: ● $('p').hide() ● $('p').addClass('activo') ● $('p:odd').show().addClass('odd').append('<strong>Yeah! </strong>) ● ...
  22. 22. Trabajando con la colección
  23. 23. Modificación de attributos ● attr() hace sencillo el trabajo con atributos: – $('p').attr('title') // Retorna el valor del atributo para el primer elemento encontrado – $('p.destacado').attr('title', 'Destacado') // Asigna el valor al atributo de todos los elementos de la colección ● removeAttr() ● addClass(), removeClass, hasClass() hacen el resto
  24. 24. Manipulación de contenidos ● Obtener y cambiar contenido – html() text() val() (getters y setters) ● Inserciones – after() before() // Insertar fuera – append() prepend() // Insertar dentro – wrap()
  25. 25. Modificación de estilos ● css() nos hace el trabajo: – $('p').css('color', 'red') – $('p.destacado').css({ color: 'red', background-color: 'blue'}) ● Ojito con la separación entre capas
  26. 26. Inciso: usa siempre var ● Las variables en Javascript tienen ámbito global o local dependiendo de si se han creado con la palabra clave var: numero = 42 // Yo soy global var numero = 42 // Yo soy local Buenas prácticas
  27. 27. Ejemplo: cebrear tabla ● Crear una tabla y aplicarle un color diferente a las filas pares e impares siguiendo los preceptos de la separación entre capas.
  28. 28. Efectos ● hide() y show() ● slideDown(), slideUp() ● fadeIn() y fadeOut ● Permiten añadir comportamiento al terminar la animación: – $('p').slideDown(2000, function() { alert('Fin') })
  29. 29. Ejemplo: ocultar párrafos ● Documento con una serie de párrafos. ● Insertar enlaces antes de cada párrafo que permitan ocultar y desplegar.
  30. 30. Sobre el cierre del elemento <script> ● Según el apéndice C de la especificación XHTML 1.0: C.3 Element Minimization and Empty Element Content Given an empty instance of an element whose content model is not EMPTY (for example, an empty title or paragraph) do not use the minimized form (e.g. use <p> </p> and not <p />). http://www.w3.org/TR/xhtml1/#guidelines
  31. 31. Manejo de eventos ● $('p').bind('click', function() { alert('Click') }) ● blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error ● Muchos tienen shortcuts: – $('a:first').click(mostrar_parrafos)
  32. 32. Manejo de eventos ● Si el callback del evento retorna false se cancela el burbujeo y el comportamiento por defecto de dicho evento: $('a:first').click(function() { // El navegador no sigue el enlace return false; });
  33. 33. Inciso: burbujeo de eventos ● ¿Qué pasa cuando dos elementos anidados tienen comportamiento para un mismo evento? Captura Burbujeo 1 2 http://www.quirksmode.org/js/events_order.html
  34. 34. preventDefault versus return(false) ● return(false) evita la propagación del evento y cancela su comportamiento por defecto. ● En ocasiones no querremos cancelar el burbujeo: $('a').click(function(e) { e.preventDefault(); }); ● Si queremos evitar la propagación sin cancelar el comportamiento por defecto: stopPropagation()
  35. 35. Ojo ● return(false) no frenará el comportamiento por defecto si ocurre un error javascript antes: $('a').click(function() { funcion_inexistente(); return(false); // El enlace seguirá su curso // Un preventDefault hubiera hecho el trabajo }); Buenas prácticas
  36. 36. Ejemplo: menú de acordeon ● Empezamos con una lista de enlaces anidada. ● Los enlaces de primer nivel deben ser agrupadores. ● Al hacer click sobre un enlace de primer nivel se despliega la lista de enlaces que contiene.
  37. 37. Ejemplo: tabtastic ● Típica lista de contenidos con pestañas.
  38. 38. AJAX Asynchronous Javascript And XML
  39. 39. AJAX
  40. 40. Inciso, diálogos HTTP ● Presentación sobre diálogos HTTP. ● Analizar la Fisgona de Menéame.
  41. 41. AJAX ? Asynchronous Javascript And XML
  42. 42. Ajax en minúsculas ● Más que un acrónimo, es una forma de interacción. ● Carga asincrónica de datos, con o sin interacción del usuario.
  43. 43. Ejemplos: autocompletado
  44. 44. Ejemplos: edit in place
  45. 45. Ejemplos: formularios asincrónicos
  46. 46. Ajax con jQuery: load() load(uri)
  47. 47. Ejemplo: hola mundo ajax ● Escribir una página web con una lista de enlaces a páginas locales. ● Cargar el enlace vía ajax en un div insertado a continuación. ● Copiar el ejemplo a servidor HTTP local, analizar con firebug las cabeceras HTTP.
  48. 48. Ajax avanzado en jQuery : ajax() $.ajax({ url: url, dataType: 'xml', success: function(msg) { // Éxito } });
  49. 49. Ejemplo: ajax con xml ● ¡Lo de antes era AHAH! http://en.wikipedia.org/wiki/AHAH ● Intentar el ejemplo anterior con XML como tipo de datos.
  50. 50. Tests de unidad: jShoulda http://jshoulda.scriptia.net/
  51. 51. Tests de aceptación: Selenium http://seleniumhq.org/ http://www.vimeo.com/2343914
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×