Desarrollo FrontEnd con JavaScript - S01

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

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