Desarrollo FrontEnd con JavaScript - S01

Desarrollo FrontEnd con JavaScript - S01

S01 - Entendiendo JavaScript:
- Sintáxis básica
- Objeto prototype
- Patrones de diseño

10a0e11595c04259f746f31bf0715e4b?s=128

Gustavo Leon

October 23, 2013
Tweet

Transcript

  1. Desarrollo FrontEnd con JavaScript s01 - Entendiendo JavaScript

  2. Temas • Semana 01: Entendiendo JavaScript • Semana 02: Manejo

    del DOM y APIs del navegador • Semana 03: Peticiones asíncronas con XmlHttpRequest • Semana 04: jQuery • Semana 05: Aplicaciones Web I : Modelos y colecciones • Semana 06: Aplicaciones Web II : Vistas y routers
  3. Desarrollo FrontEnd Single-page web apps Web applications (no web sites!)

    HTML5 JavaScript CSS3 Patrones de diseño
  4. JavaScript JavaScript != Java JavaScript != jQuery JavaScript != FrontEnd*

    *(aunque casi)
  5. JavaScript Sintaxis similar a C/C++, PHP… Tipado dinámico Orientada a

    objetos* *(No hay clases, hay prototypes) Las funciones son objetos* *(Y también son constructores de objetos)
  6. Arrays • • • • •

  7. Arrays • • • • •

  8. Arrays • • • • •

  9. Arrays • • • • •

  10. Arrays • • • • •

  11. Objetos • for .. in • instanceof • typeof •

    hasOwnProperty
  12. Objetos • for .. in • instanceof • typeof •

    hasOwnProperty
  13. Objetos • for .. in • instanceof • typeof •

    hasOwnProperty
  14. Objetos • for .. in • instanceof • typeof •

    hasOwnProperty
  15. Objetos • for .. in • instanceof • typeof •

    hasOwnProperty
  16. Funciones • apply • call

  17. Funciones • apply • call

  18. Funciones • apply • call

  19. Funciones – Aceptando “n” parámetros

  20. Funciones – Usando apply

  21. Usando objetos y funciones

  22. Usando objetos y funciones

  23. Funciones - Constructores

  24. Prototype Extendiendo objetos

  25. Prototype - Extendiendo objetos • Las funciones reemplazan a las

    clases al construir objetos. • Las funciones son objetos que tienen propiedades y métodos, por lo que son llamadas First-Class Citizens. • La propiedad prototype sirve para extender objetos creados con funciones.
  26. Prototype - Extendiendo objetos

  27. Prototype - Extendiendo objetos nativos • Todos los objetos de

    JavaScript pueden ser extendidos, incluso los objetos nativos o del navegador.
  28. Patrones de diseño Closure, Module, Callbacks, Publish/Subscribe

  29. Scope • Los scopes controlan la visibilidad de variables en

    un programa. • Las variables definidas dentro de un scope están disponibles dentro del scope pero no fuera.
  30. Context • El context es el “dueño” del scope más

    inmediato. • Dentro de una función, puede ser llamado con .
  31. Context y apply • Con y se pueden ejecutar funciones

    cambiando su context. • Estos casos son útiles cuando se desea ejecutar una función en un scope diferente al que se encuentre.
  32. Closure • Un closure es una función definida dentro de

    otra función que tiene acceso al scope de la función que la contiene. • En este caso, es un closure definido dentro de y tiene acceso al scope de .
  33. Module

  34. Module – Scopes

  35. Module - Contexts

  36. Callbacks • Al ser las funciones First-Class Citizens, estas pueden

    ser pasadas como parámetros en otras funciones. • Un callback es una función pasada como parámetro que es ejecutada después de determinado tiempo.
  37. Publish/Subscribe