Workshop DSL 2011 - Desarrollo jQuery

1,041 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,041
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Workshop DSL 2011 - Desarrollo jQuery

  1. 1. Write Less, Do More Workshop – Trabajando con jQuery Rodrigo Ayala Desarrollador http://blog.rodrigo-ayala.com
  2. 2. @RodrigoAyala http://blog.rodrigo-ayala.com http://continuum.cl
  3. 3. ¡Hoy nos convoca el desarrollo web!
  4. 4. Pero, ¿Que es la Web ?
  5. 5. La web del hoy, dínamica
  6. 6. La interrogante es, ¿que hacer para llegar a eso?
  7. 7. Base de Datos Backend Frontend
  8. 8. Base de Datos Backend Frontend
  9. 9. text/ javascript
  10. 10. text/ javascript o JS para los amigos
  11. 11. Los browsers incluyen un motor de Javascript
  12. 12. Consideraciones :D
  13. 13. Consideraciones :D <ul><li>Interpretaciones variadas
  14. 14. Funciones JS con distinto nombre
  15. 15. Variaciones en la obtención de elementos
  16. 16. Los tiempos de desarrollo son limitados </li></ul>:D
  17. 18. ¿Soluciones? :D
  18. 19. ¡Llenarnos de condiciones! (o hacks) =( :D
  19. 20. var myObject = document.getElementById(&quot;myLabel&quot;); var myAttribute = myObject.getAttribute(&quot; htmlFor &quot;); var myObject = document.getElementById(&quot;myLabel&quot;); var myAttribute = myObject.getAttribute(&quot; for &quot;); :D
  20. 21. var myObject = document.getElementById(&quot;header&quot;); var myStyle = myObject. currentStyle .backgroundColor; var myObject = document.getElementById(&quot;header&quot;); var myComputedStyle = document.defaultView.getComputedStyle(myObject, null); var myStyle = myComputedStyle.backgroundColor;
  21. 22. Horrible, ¿cierto? :D
  22. 23. Solución 2: Utilizar un framework :D
  23. 24. jQuery :D
  24. 25. ¡Beneficios! (o por qué a muchos desarrolladores nos gusta)
  25. 26. http://bit.ly/dsljquery
  26. 27. 1 Agregar jQuery al HTML, y verificar su instalación
  27. 28. 2 Utilizar Selectores para obtener un set de elementos de acuerdo a una consulta
  28. 29. Listado de selectores http://api.jquery.com/category/selectors/
  29. 30. 3 Manipular los elementos ubicados a través de Selectores
  30. 31. Listado de métodos para manipulación http://api.jquery.com/category/manipulation
  31. 32. 4 Manejo de Eventos asociado a elementos
  32. 33. Listado de eventos disponibles http://api.jquery.com/category/events/
  33. 34. 5 Capacidad Ajax en jQuery
  34. 35. $.ajax({ url: 'load.html', success: function(data) { $('#container').html(data); } }); $('#content').load(“load.html”) Ajax en jQuery =
  35. 36. Comentarios Finales
  36. 37. ¿Preguntas?
  37. 38. ¡Gracias!

×