El Mal Odiado Javascript

1,532
-1

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,532
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

El Mal Odiado Javascript

  1. 1. EL MAL ODIADO JAVASCRIPT
  2. 2. Índice <ul><li>Introduccion
  3. 3. Manipulación DOM
  4. 4. Eventos
  5. 5. Objetos y prototipos
  6. 6. Simulacion de clases
  7. 7. Programacion funcional
  8. 8. MVC </li></ul>
  9. 9. Introducción <ul><li>Programación de lado de cliente
  10. 10. Inicialmente desarollado por Netscape
  11. 11. Uso inicial para pequeñas cosas como validación de formularios, añadir contadores y relojes giratorios
  12. 12. Hoy en dia se construllen aplicaciones enteras (eyeos, google docs, clientes web ricos de correo)
  13. 13. Navegadores optimizan los interpretes de js
  14. 14. ¿Chrome OS? </li></ul>
  15. 15. DOM <ul><li>API para manipular la estructura de un elemento
  16. 16. Podemos añadir, eliminar, modificar y recorrer elementos
  17. 17. Estructura en arbol </li></ul>
  18. 18. DOM acceder a elementos <ul><li>document.getElementById(id)
  19. 19. document.getElementsByTagName(nombre) </li></ul>
  20. 20. DOM acceder a elementos (ejemplo)
  21. 21. DOM acceder a elementos (ejemplo) <ul><li>Obtener elemento con id cabecera </li><ul><li>document.getElementById(”cabecera”) </li></ul><li>Obtener los divs </li><ul><li>document.getElementsByTagName(”div”) </li></ul></ul>
  22. 22. DOM acceder a elementos <ul><li>Acceder a elementos con una clase dada
  23. 23. Ejemplo </li><ul><li>getByClass(”articulo”) </li></ul></ul>
  24. 24. DOM propiedades <ul><li>childeNodes
  25. 25. ClassName
  26. 26. style
  27. 27. parentNode
  28. 28. nextSlibing
  29. 29. firstChild
  30. 30. lastChild
  31. 31. nodeType </li></ul>
  32. 32. DOM crear nodo <ul><li>document.createElement(elemento) </li><ul><li>document.createElement(”p”); </li></ul><li>document.createTextNode(texto) </li><ul><li>documentl.createTextNode(”soy un texto molon”); </li></ul><li>A partir de html </li></ul>
  33. 33. DOM añadir elemento a otro <ul><li>appendChild(elemento) </li><ul><li>var div = document.createElement(”div”);
  34. 34. var cab = document.getElementById(”cabecera”);
  35. 35. cab.appendChild(div); </li></ul><li>Usando HTML2DOM </li></ul>
  36. 36. DOM eliminar elemento <ul><li>removeChild para eliminar elemento hijo
  37. 37. Ejemplo </li></ul>
  38. 38. DOM atributos <ul><li>setAttribute(atributo,valor) </li><ul><li>document.getElementById(”cabecera”).setAttribute(”name”,”cabecera”); </li></ul><li>getAttribute(atributo) </li><ul><li>document.getElementById(”cabecera”).getAttribute(”name”); </li></ul><li>createAttribute(atributo) </li><ul><li>document.getElementById(”cabecera”).createAttribute(”nuevoatributo”); </li></ul></ul>
  39. 39. DOM recorrer elementos <ul><li>document.getElementsByTagName devuelve un array
  40. 40. Recorrer nodos hijo </li></ul>
  41. 41. EVENTOS modelo de propagacion <ul><li>Los eventos se capturan desde la raiz hacia abajo
  42. 42. Una vez capturado se propagan hacia arriba </li><ul><li>Se puede modificar el comportamiento </li></ul></ul>
  43. 43. EVENTOS asignar manejador I <ul><li>Forma tradicional
  44. 44. elemento.evento = function(e){...} </li><ul><li>e es un objeto de tipo Event
  45. 45. En IE es nulo, hai que accecer a window.event </li></ul><li>Ventaja </li><ul><li>Simple </li></ul><li>Inconveniente </li><ul><li>Solo puedo asociar un manejador </li></ul></ul>
  46. 46. EVENTOS evitar propagacion <ul><li>Ejemplo de propagacion
  47. 47. Problema: Si hago click en los h2 se propaga el evento a los div padre
  48. 48. Solucion: cancelar la propagacion </li></ul>
  49. 49. ENTOS evitar propagacion <ul><li>Funcion para evitar propagacion
  50. 50. Uso </li></ul>
  51. 51. EVENTOS asignar manejador II <ul><li>Navegadores no IE </li><ul><li>elemento.addEventListener(”tipo”,manejador,propagar) </li></ul><li>IE </li><ul><li>elemento.attachEvent(”ontipo”,manejador)
  52. 52. } </li></ul></ul>
  53. 53. EVENTOS asignar manejador II <ul><li>Ventajas </li><ul><li>Asociar varios manejadores a un evento </li></ul><li>Desventajas </li><ul><li>IE tiene nombre distinto para manejador
  54. 54. IE usa metodo distinto para cancelar propagacion
  55. 55. IE uso ontipo mientras que otros navegadores usan tipo para nombrar al evento </li></ul><li>Solucion: usar una libreria </li></ul>
  56. 56. EVENTOS asignar manejador II <ul><li>Libreria: http://dean.edwards.name/my/events.js
  57. 57. Caracteristicas </li><ul><li>Usa metodo tradicional para asignar manejadors </li><ul><li>Funciona en navegadores algo anticuados </li></ul><li>Permite asignar varios manejadores a un evento
  58. 58. Normaliza el objeto Event de IE </li></ul><li>Uso </li></ul>
  59. 59. EVENTOS delegacion <ul><li>Propagar eventos hacia arriba no siempre es malo
  60. 60. Caso de uso: Todos los hijos de un nodo reaccionaran igual ante un evento
  61. 61. Al nodo se le van añadir mas hijos en un futuro que tendran el mismo comportamiento
  62. 62. El manejo de eventos lo delegamos en el padre
  63. 63. Ventajas: </li><ul><li>Ahorro de memoria
  64. 64. No tenemos que recorer los hijos
  65. 65. Los nuevos hijos heredan comportamiento </li></ul></ul>
  66. 66. EVENTOS delegacion <ul><li>Ejemplo
  67. 67. Queremos que al pinchar sobre una opcion se ponga el texto en #seleccionado </li></ul>
  68. 68. EVENTOS delegacion <ul><li>Código </li></ul>
  69. 69. OBJETOS <ul><li>En javascript todo es un objeto
  70. 70. Las funciones tambien
  71. 71. Creacion del objeto mas simple: var obj = {}
  72. 72. Para añadir atribtos: obj.nom = ”Jota” </li><ul><li>Tambien obj[”nombre”] = ”Jota” </li></ul><li>Añadir metodo: obj.diHola = function(){ alert(this.nombre);} </li><ul><li>This hace referencia al objeto
  73. 73. Tambien obj[”diHola”] = function(){ alert(this.nombre);} </li></ul><li>Instancir objetos predefinidos (clases) var obj = new Clase(argumentos); </li></ul>
  74. 74. OBJETOS <ul><li>Crear objeto literal (JSON) </li></ul>
  75. 75. OBJTOS recorrer propiedades <ul><li>Formas de acceder a una propiedad o metodo </li><ul><li>obj.propiedad
  76. 76. obj[”propiedad”] </li></ul><li>Recorrer propiedades </li></ul>
  77. 77. OBJETOS prototipos <ul><li>Javascript no es un lenguaje orientado a objetos
  78. 78. Javascript es orientado a prototipos
  79. 79. Todo objeto tiene un portotipo: obj.prototype
  80. 80. Si añadimos propiedades a obj.prototype las nuevas intancias tentran la propiedad tambien
  81. 81. Ejemplo </li></ul>
  82. 82. OBJETOS otros usos <ul><li>Opciones por defecto en funciones </li></ul>
  83. 83. OBJETOS otros usos <ul><li>Varias formas de llamar a la funcion </li><ul><li>suma([1,2,3,4]);
  84. 84. suma([1,2,3,4],{filtrarPares : true})
  85. 85. suma([1,2,3,4],{filtrarPares : true, doblar : true}) </li></ul></ul>
  86. 86. SIMULACION DE CLASES <ul><li>Al ser un lenguaje orientado a prototipos temenos que simular las clases
  87. 87. En realidad creamos objetos
  88. 88. Vamos añadiendo propiedades al prototipo </li></ul>
  89. 89. SIMULACION DE CLASES método clásico <ul><li>Partimos de una funcion
  90. 90. Añadimos metodos y propiedades al prototipo </li></ul>
  91. 91. SIMULACION DE CLASES herncia método clásico <ul><li>Creamos una funcion
  92. 92. En el prototipo instanciamos un objeto del padre
  93. 93. Añadimos propiedades al prototipo </li></ul>
  94. 94. SIMULACION DE CLASES método moderno <ul><li>Crear funcion encapsulando la creacion pasando un objeto literal (objeto de definicion) con metodos y propiedade y un objeto padre como opcional
  95. 95. La funcion copia propiedades del objeto padre al objeto de definicion
  96. 96. Devuelve una funcion con el prototio apuntanto al objeto definicion
  97. 97. init es el constructor </li></ul>
  98. 98. SIMULACION DE CLASES método moderno
  99. 99. SIMULACION DE CLASES método moderno <ul><li>Uso </li></ul>
  100. 100. PROGRAMACION FUNCIONAL <ul><li>Tipos de de lenguajes de programación </li><ul><li>Imperativos
  101. 101. Orientado a objetos
  102. 102. Funcionales
  103. 103. Declarativos </li></ul></ul>
  104. 104. PROGRAMACION FUNCIONAL <ul><li>Caracteristicas </li><ul><li>Uso intensivo de funciones y recursividad
  105. 105. No hai bucles
  106. 106. Transparencia referencial
  107. 107. Muy comodo para trabajar con arrays
  108. 108. Facilita reutilizar funcionalidad
  109. 109. Reduce codigo y aumenta legibilidad </li></ul><li>Javascript no es un lenguaje funcional pero podemos simularlo </li></ul>
  110. 110. PROGRAMACION FUNCIONAL <ul><li>Funciones caracterísitcas de la programación funcional (funciones de orden superior) </li><ul><li>Map
  111. 111. FoldLeft
  112. 112. Reduce
  113. 113. FoldRight
  114. 114. Clausura
  115. 115. Filter </li></ul></ul>
  116. 116. PROGRAMACION FUNCIONAL <ul><li>Simular programacion funcional en javascript </li><ul><li>Funciones pueden recibir funciones como argumento
  117. 117. Funciones pueden devolver funciones
  118. 118. Las funciones de orden superior se implementan con programacion imperativa (bucles) </li></ul></ul>
  119. 119. PROGRAMACION FUNCIONAL map <ul><li>Recibe como argumentos un array y una funcion
  120. 120. Devuelve un array con la funcion aplicada a todos los elementos
  121. 121. Uso </li><ul><li>map([1,2,3],function(e){ return e*e;}); </li></ul></ul>
  122. 122. PROGRACION FUNCIONAL foldLeft <ul><li>Recibe como argumentes un array, un valor inicial y una funcion
  123. 123. Reduce el array empezando por la izquierda
  124. 124. Caso de uso: sumar elemento de un array </li><ul><li>foldLeft([1,2,3,4],0,function(a,b){return a+b;}) </li></ul></ul>
  125. 125. PROGRAMACION FUNCIONAL foldRight <ul><li>Recibe como argumentes un array, un valor inicial y una funcion
  126. 126. Reduce el array empezando por la derecha
  127. 127. Caso de uso: multiplicar elementos de un array </li><ul><li>foldRight([1,2,3,4],1,function(a,b){return a*b;}) </li></ul></ul>
  128. 128. PROGRAMACION FUNCIONAL reduce <ul><li>Recibe como argumentos un array y una funcion con la cual reducir el array
  129. 129. No recibe valor incial
  130. 130. Caso de uso: obtener numero menor de un array </li><ul><li>reduce([1,2,3,4],function(a,b){return a<b?a:b ;}} </li></ul></ul>
  131. 131. PROGRAMACION FUNCIONAL ejercicio <ul><li>Implementar funcion filter </li><ul><li>Recibe 2 parametros </li><ul><li>Array
  132. 132. Funcion de un argumento que devuelve valor boolean </li></ul><li>Devolver array con elementos que cumplan la funcion booleana </li></ul><li>Reimplementar getElementsByClass usando filter </li></ul>
  133. 133. MVC
  134. 134. MVC <ul><li>Patron de diseño
  135. 135. Separa el código en 3 partes </li><ul><li>Modelo: se encarga de la lógica de negocio
  136. 136. Vista: se encarga de presentar los datos
  137. 137. Controlador: captura acciones, media entre el modelo y la vista </li></ul></ul>
  138. 138. MVC <ul><li>Ventajas </li><ul><li>Separa lógica del programa de la presentacion
  139. 139. Mejora la reutilización de codigo
  140. 140. Más facil de hacer cambios </li></ul><li>Desventajas </li><ul><li>Curva de aprendizaje </li></ul></ul>
  141. 141. MVC – implementando un mini mvc <ul><li>El modelo lo implementamos en una clase
  142. 142. Las vistas con funciones
  143. 143. Los controladores con funiones
  144. 144. Creamos un objeto router que se encargara de enrutar las urls al controlador correspondiente </li><ul><li>Los enlaces contendran links anclas </li><ul><li>Nos facilita la vista
  145. 145. No tendremos que preocuparnos de asignarles eventos
  146. 146. Tenemos historial!!!!! </li></ul></ul></ul>
  147. 147. MVC – implementando un mini mvc <ul><li>El router I </li><ul><li>Funcion para añadir rutas
  148. 148. Funcion para ejecutar rutas </li></ul></ul>
  149. 149. MVC – implementando un mini mvc <ul><li>El router II </li><ul><li>Definimos una funcion que al cambiar la url depache el controlador
  150. 150. Asociamos a window.onhashchange </li><ul><li>Problema no todos los navegadores lo soportan </li></ul></ul></ul>
  151. 151. MVC – implementando un mini mvc <ul><li>El router II </li><ul><li>Solucion: crear una funcion que periodicamente averigüe si la url cambio y llame a dispatch </li></ul></ul>
  152. 152. MVC – implementando un mini mvc <ul><li>El router III </li><ul><li>Definimos un metodo para aplicar a formularios para que no se envien y se ejecute la ruta del action </li></ul></ul>
  153. 153. MVC – implementando un mini mvc <ul><li>Creamos una funcion de inicializacion </li><ul><li>La llamaremos en window.onload </li></ul></ul>
  154. 154. MVC – implementando un mini mvc <ul><li>Ejemplo (HTML) </li></ul>
  155. 155. MVC – implementando un mini mvc <ul><li>Ejemplo (Script – Modelo) </li></ul>
  156. 156. MVC – implementando un mini mvc <ul><li>Ejemplo (Script – Vista) </li></ul>
  157. 157. MVC – implementando un mini mvc <ul><li>Ejemplo (Script – Controlador) </li></ul>
  158. 158. MVC – implementando un mini mvc <ul><li>Ejemplo (Script – inicializacion) </li></ul>
  159. 159. Agradecimientos <ul><li>XGN
  160. 160. Organización
  161. 161. Asistentes </li></ul>

×