Desarrollo FrontEnd con
JavaScript
s01 - Entendiendo JavaScript
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
Desarrollo FrontEnd
Single-page web apps Web applications (no web sites!)
HTML5
JavaScript
CSS3
Patrones de diseño
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)
Slide 6
Slide 6 text
Arrays
•
•
•
•
•
Slide 7
Slide 7 text
Arrays
•
•
•
•
•
Slide 8
Slide 8 text
Arrays
•
•
•
•
•
Slide 9
Slide 9 text
Arrays
•
•
•
•
•
Slide 10
Slide 10 text
Arrays
•
•
•
•
•
Slide 11
Slide 11 text
Objetos
• for .. in
• instanceof
• typeof
• hasOwnProperty
Slide 12
Slide 12 text
Objetos
• for .. in
• instanceof
• typeof
• hasOwnProperty
Slide 13
Slide 13 text
Objetos
• for .. in
• instanceof
• typeof
• hasOwnProperty
Slide 14
Slide 14 text
Objetos
• for .. in
• instanceof
• typeof
• hasOwnProperty
Slide 15
Slide 15 text
Objetos
• for .. in
• instanceof
• typeof
• hasOwnProperty
Slide 16
Slide 16 text
Funciones
• apply
• call
Slide 17
Slide 17 text
Funciones
• apply
• call
Slide 18
Slide 18 text
Funciones
• apply
• call
Slide 19
Slide 19 text
Funciones – Aceptando “n” parámetros
Slide 20
Slide 20 text
Funciones – Usando apply
Slide 21
Slide 21 text
Usando objetos y funciones
Slide 22
Slide 22 text
Usando objetos y funciones
Slide 23
Slide 23 text
Funciones - Constructores
Slide 24
Slide 24 text
Prototype
Extendiendo objetos
Slide 25
Slide 25 text
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.
Slide 26
Slide 26 text
Prototype - Extendiendo objetos
Slide 27
Slide 27 text
Prototype - Extendiendo objetos nativos
• Todos los objetos de
JavaScript pueden ser
extendidos, incluso los
objetos nativos o del
navegador.
Slide 28
Slide 28 text
Patrones de diseño
Closure, Module, Callbacks, Publish/Subscribe
Slide 29
Slide 29 text
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.
Slide 30
Slide 30 text
Context
• El context es el “dueño”
del scope más
inmediato.
• Dentro de una función,
puede ser llamado con
.
Slide 31
Slide 31 text
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.
Slide 32
Slide 32 text
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 .
Slide 33
Slide 33 text
Module
Slide 34
Slide 34 text
Module – Scopes
Slide 35
Slide 35 text
Module - Contexts
Slide 36
Slide 36 text
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.