Successfully reported this slideshow.
Sesión 1: Historia, Objetos y Closures
Javascript + Angular
Sergio Castillo Yrizales
@scyrizales
Agenda
2
 Introducción
 Orientación a Objetos
 Ámbitos y módulos
Introducción
3
Breve Historia del Javascript
 Nacio con Netscape 2.0 en 1995
 Dar soporte a los applets
 Se llamaba Livescript
 Cambi...
Javascript ¿Qué aprender?
813
pages
147
pages
666 pages
5 (Número de páginas es
referencial)
JQuery
 Nace en 2005
 Gracias Jhon Resig!!!
 Uniformiza la programación entre browsers
 Obligatorio saber:
 http://os...
JSFiddle
 Entorno de trabajo para este curso.
 Permite guardar los scripts.
 Tiene la mayoría de los frameworks a utili...
Chrome
8
 Será nuestro browser para hacer pruebas
 ´Con la tecla F12 acceden a las herramientas
para desarrolladores
 E...
Orientación a objetos
9
Orientación a Objetos
 ¿Porque? Es más fácil representar la vida como
objetos de la vida real.
 Nos permite ordenar el c...
Creación de Objetos
 La forma mas simple: operador new
11
Creación de Objetos
 Usando Literales
12
Clases
 Constructores:
13
Agregando Propiedades
 Usando el prototype:
14
Casos para el uso de Prototype
 Crear clases con métodos de instancia.
 Extender funcionalidades de objetos existentes:
...
Ejercicio
 Extender la clase String para hacer la funcion
que invierta palabras.
 Respuesta: http://jsfiddle.net/scyriza...
Herencia
 Creamos una clase:
 Heredamos en otra
17
Recomendación?
 Usen un framework para usar herencia.
 Uno simple puede ser visto aquí:
 http://ejohn.org/blog/simple-j...
Ámbitos y módulos
19
Que es esto!!!
 Esto es algo que verán muy a menudo
 Es una función que se ejecuta inmediatamente
(IIFE - immediately in...
Ámbito
 El ámbito en Javascript es a nivel de funciones.
 Una función permite crear ámbitos privados
21
Módulos
22
 Usaremos el IIFE para crear módulos que no
colisionen
Casos de Uso para Módulos
23
 Cuando queremos asegurarnos de evitar
posibles sobreescrituras de propiedades en otras
libr...
Ejemplo
 Variable global
 Variable dentro de función
 Variable dentro de bucle
24
Muchas gracias
Y que esta luz los ilumine donde las otras no puedan…
25
Upcoming SlideShare
Loading in …5
×

Javascript + Angular Sesion 1

1,001 views

Published on

Parte 1 de 6 del curso de Javascript + Angular.

Published in: Technology
  • Be the first to comment

Javascript + Angular Sesion 1

  1. 1. Sesión 1: Historia, Objetos y Closures Javascript + Angular Sergio Castillo Yrizales @scyrizales
  2. 2. Agenda 2  Introducción  Orientación a Objetos  Ámbitos y módulos
  3. 3. Introducción 3
  4. 4. Breve Historia del Javascript  Nacio con Netscape 2.0 en 1995  Dar soporte a los applets  Se llamaba Livescript  Cambio de nombre por un tema de Marketing  Microsoft lo implementa en IE3 y lo llama Jscript  Se estandariza en 1996  Su nombre actual es EcmaScript 4
  5. 5. Javascript ¿Qué aprender? 813 pages 147 pages 666 pages 5 (Número de páginas es referencial)
  6. 6. JQuery  Nace en 2005  Gracias Jhon Resig!!!  Uniformiza la programación entre browsers  Obligatorio saber:  http://oscarotero.com/jquery/ (Cheat Sheet) 6
  7. 7. JSFiddle  Entorno de trabajo para este curso.  Permite guardar los scripts.  Tiene la mayoría de los frameworks a utilizar.  Muy usado en Github para hacer preguntas. http://jsfiddle.net/ 7
  8. 8. Chrome 8  Será nuestro browser para hacer pruebas  ´Con la tecla F12 acceden a las herramientas para desarrolladores  Es simple, sencillo de usar y fácil de obtener.
  9. 9. Orientación a objetos 9
  10. 10. Orientación a Objetos  ¿Porque? Es más fácil representar la vida como objetos de la vida real.  Nos permite ordenar el código.  Estamos acostumbrados a ello. 10
  11. 11. Creación de Objetos  La forma mas simple: operador new 11
  12. 12. Creación de Objetos  Usando Literales 12
  13. 13. Clases  Constructores: 13
  14. 14. Agregando Propiedades  Usando el prototype: 14
  15. 15. Casos para el uso de Prototype  Crear clases con métodos de instancia.  Extender funcionalidades de objetos existentes:  Ejemplo en: http://jsfiddle.net/scyrizales/3hTPx/ 15
  16. 16. Ejercicio  Extender la clase String para hacer la funcion que invierta palabras.  Respuesta: http://jsfiddle.net/scyrizales/PBzDt/ 16
  17. 17. Herencia  Creamos una clase:  Heredamos en otra 17
  18. 18. Recomendación?  Usen un framework para usar herencia.  Uno simple puede ser visto aquí:  http://ejohn.org/blog/simple-javascript-inheritance/  Ejemplo: 18
  19. 19. Ámbitos y módulos 19
  20. 20. Que es esto!!!  Esto es algo que verán muy a menudo  Es una función que se ejecuta inmediatamente (IIFE - immediately invoked function expression) 20
  21. 21. Ámbito  El ámbito en Javascript es a nivel de funciones.  Una función permite crear ámbitos privados 21
  22. 22. Módulos 22  Usaremos el IIFE para crear módulos que no colisionen
  23. 23. Casos de Uso para Módulos 23  Cuando queremos asegurarnos de evitar posibles sobreescrituras de propiedades en otras librerias.  Para no contaminar el objeto window con propiedades innecesarias.  Para encapsular funcionalidad.
  24. 24. Ejemplo  Variable global  Variable dentro de función  Variable dentro de bucle 24
  25. 25. Muchas gracias Y que esta luz los ilumine donde las otras no puedan… 25

×