Este documento presenta una introducción a la historia, orientación a objetos y ámbitos/módulos en JavaScript. Explica brevemente el origen y evolución de JavaScript, así como herramientas como jQuery, JSFiddle y Chrome DevTools. Luego cubre conceptos como la creación de objetos, clases, herencia y el uso de prototype. Finalmente, introduce ámbitos y módulos, explicando cómo se pueden usar funciones de inmediato para crear ámbitos privados y encapsular funcionalidad.

1. Sesión 1: Historia, Objetos y Closures
Javascript + Angular
Sergio Castillo Yrizales
@scyrizales

2. Agenda
2
 Introducción
 Orientación a Objetos
 Ámbitos y módulos

3. Introducción
3

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. Javascript ¿Qué aprender?
813
pages
147
pages
666 pages
5 (Número de páginas es
referencial)

6. JQuery
 Nace en 2005
 Gracias Jhon Resig!!!
 Uniformiza la programación entre browsers
 Obligatorio saber:
 http://oscarotero.com/jquery/ (Cheat Sheet)
6

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. 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. Orientación a objetos
9

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. Creación de Objetos
 La forma mas simple: operador new
11

12. Creación de Objetos
 Usando Literales
12

13. Clases
 Constructores:
13

14. Agregando Propiedades
 Usando el prototype:
14

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. Ejercicio
 Extender la clase String para hacer la funcion
que invierta palabras.
 Respuesta: http://jsfiddle.net/scyrizales/PBzDt/
16

17. Herencia
 Creamos una clase:
 Heredamos en otra
17

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. Ámbitos y módulos
19

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. Ámbito
 El ámbito en Javascript es a nivel de funciones.
 Una función permite crear ámbitos privados
21

22. Módulos
22
 Usaremos el IIFE para crear módulos que no
colisionen

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. Ejemplo
 Variable global
 Variable dentro de función
 Variable dentro de bucle
24

25. Muchas gracias
Y que esta luz los ilumine donde las otras no puedan…
25