PDF de programación - JavaScript Avanzado

JavaScript Avanzado
Adolfo Sanz De Diego

Octubre 2015

1 Acerca de

1.1 Autor
1.2 Licencia
1.3 Ejemplos

2 JavaScript

2.1 Historia
2.2 El lenguaje

3 Orientación a objetos

3.1 ¿Qué es un objeto?
3.2 Propiedades
3.3 Objeto iniciador
3.4 Función constructora
3.5 Prototipos
3.6 Eficiencia
3.7 Herencia
3.8 Cadena de prototipos
3.9 Cadena de prototipos de la instancia
3.10 Cadena de prototipos de la función constructora
3.11 Esquema prototipos
3.12 Operador instanceof
3.13 Extensión
3.14 Propiedades y métodos estáticos
3.15 Propiedades y métodos privados
3.16 Polimorfismo

4 Técnicas avanzadas
4.1 Funciones
4.2 This

4.3 call y apply
4.4 Número variable de argumentos
4.5 Arguments
4.6 Declaración de funciones
4.7 Transfiriendo funciones a otras funciones
4.8 Funciones anónimas
4.9 Funciones autoejecutables
4.10 Clousures
4.11 El patrón Modulo
4.12 Eficiencia
4.13 El patrón Modulo Revelado
4.14 Espacios de nombres

5 Document Object Model
5.1 ¿Qué es DOM?
5.2 Tipos de nodos
5.3 Recorrer el DOM
5.4 Manipular el DOM
5.5 Propiedades Nodos

6 Librerías y Frameworks

6.1 jQuery
6.2 jQuery UI & Mobile
6.3 Frameworks CSS
6.4 MVC en el front
6.5 NodeJS
6.6 Automatización de tareas
6.7 Gestión de dependencias
6.8 Aplicaciones de escritorio multiplataforma
6.9 Aplicaciones móviles híbridas
6.10 WebComponents
6.11 Otros

7 Eventos

7.1 El patrón PubSub
7.2 Principales eventos
7.3 Suscripción
7.4 Eventos personalizados

7.5 Disparar un evento
7.6 Propagación

8 WebSockets

8.1 ¿Qué son los WebSockets?
8.2 Socket.IO

9 AJAX

9.1 ¿Qué es AJAX?
9.2 Tecnologías AJAX
9.3 ¿Qué es el XMLHttpRequest?
9.4 Ejemplo

10 JSON

10.1 ¿Qué es JSON?
10.2 Parse
10.3 Ejemplo
10.4 JSONP
10.5 CORS

11 APIs REST

11.1 ¿Qué es un API REST?
11.2 ¿Por qué REST?
11.3 Ejemplo API
11.4 Errores HTTP

12 Gestión de dependencias

12.1 AMD
12.2 RequireJS
12.3 CommonJS
12.4 Browserify
12.5 ECMAScript 6

13 ES6

13.1 Como usarlo hoy
13.2 Función Arrow
13.3 Función Arrow
13.4 This
13.5 Definición de Clases
13.6 Herencia de Clases
13.7 let

13.8 Scopes
13.9 const
13.10 Template Strings
13.11 Destructuring
13.12 Parámetros con nombre
13.13 Resto parámetros
13.14 Valores por defecto
13.15 Valores por defecto
13.16 Exportar módulos
13.17 Importar módulos
13.18 Generadores
13.19 Set
13.20 Map
13.21 Nuevos métodos en String
13.22 Nuevos métodos en Number
13.23 Proxies
13.24 Internacionalization
13.25 Promesas

14.1 General (ES)
14.2 General (EN)
14.3 Orientación Objetos (ES)
14.4 Orientación Objetos (EN)
14.5 Técnicas avanzadas (ES)
14.6 DOM (ES)
14.7 DOM (EN)
14.8 Frameworks (ES)
14.9 Frameworks (EN)
14.10 Eventos (ES)
14.11 Eventos (EN)
14.12 WebSockets (ES)
14.13 WebSockets (EN)
14.14 AJAX, JSON, REST (ES)
14.15 ES6 (ES)
14.16 ES6 (EN)

14 Enlaces

1 Acerca de
1.1 Autor

Adolfo Sanz De Diego

Blog: asanzdiego.blogspot.com.es
Correo: [email protected]
GitHub: github.com/asanzdiego
Twitter: twitter.com/asanzdiego
Linkedin: in/asanzdiego
SlideShare: slideshare.net/asanzdiego

1.2 Licencia

Este obra está bajo una licencia:

Creative Commons Reconocimiento-CompartirIgual 3.0
El código fuente de los programas están bajo una licencia:

GPL 3.0
1.3 Ejemplos

Las slides y los códigos de ejemplo los podéis encontrar en:

https://github.com/asanzdiego/curso-javascript-avanzado-2015

2 JavaScript
2.1 Historia

Lo crea Brendan Eich en Netscape en 1995 para hacer páginas web dinámicas
Aparece por primera vez en Netscape Navigator 2.0
Cada día más usado (clientes web, videojuegos, windows 8, servidores web, bases de datos, etc.)

2.2 El lenguaje

Orientado a objetos
Basado en prototipos
Funcional
Débilmente tipado
Dinámico

3 Orientación a objetos
3.1 ¿Qué es un objeto?

Colección de propiedades (pares nombre-valor).

Todo son objetos (las funciones también) excepto los primitivos: strings, números, booleans, null o undefined

Para saber si es un objeto o un primitivo hacer typeof variable

3.2 Propiedades

Podemos acceder directamente o como si fuese un contenedor:

objeto.nombre === objeto[nombre] // true

Podemos crearlas y destruirlas en tiempo de ejecución

var objeto = {};
objeto.nuevaPropiedad = 1; // añadir
delete objeto.nuevaPropiedad; // eliminar
3.3 Objeto iniciador

Podemos crear un objeto así:

var objeto = {
nombre: "Adolfo",

twitter: "@asanzdiego"
};
3.4 Función constructora

O con una función constructora y un new.

function Persona(nombre, twitter) {
this.nombre = nombre;
this.twitter = twitter;
};
var objeto = new Persona("Adolfo", "@asanzdiego");
3.5 Prototipos

Las funciones son objetos y tienen una propiedad llamada prototype.

Cuando creamos un objeto con new, la referencia a esa propiedad prototype es almacenada en una propiedad interna.

El prototipo se utiliza para compartir propiedades.

Podemos acceder al objeto prototipo de un objeto:

// Falla en Opera o IE <= 8
Object.getPrototypeOf(objeto);

// No es estandar y falla en IE
objeto.__proto__;
3.6 Eficiencia

Si queremos que nuestro código se ejecute una sola vez y que prepare en memoria todo lo necesario para generar objetos, la mejor opción es usar una
función constructora solo con el estado de una nueva instancia, y el resto (los métodos) añadirlos al prototipo.

Ejemplo:

function ConstructorA(p1) {
this.p1 = p1;
}

// los métodos los ponenmos en el prototipo
ConstructorA.prototype.metodo1 = function() {
console.log(this.p1);
};
3.7 Herencia

Ejemplo:

function ConstructorA(p1) {
this.p1 = p1;
}

function ConstructorB(p1, p2) {
// llamamos al super para que no se pierda p1.
ConstructorA.call(this, p1);
this.p2 = p2;
}

// Hacemos que B herede de A
// Prototipo de Función Constructora B apunta al
// Prototipo de Función Constructora A
ConstructorB.prototype = Object.create(ConstructorA.prototype);
3.8 Cadena de prototipos

Cuando se invoca una llamada a una propiedad, JavaScript primero busca en el propio objeto, y si no lo encuentra busca en su prototipo, y sino en el
prototipo del prototipo, así hasta el prototipo de Object que es null.

3.9 Cadena de prototipos de la instancia

En el ejemplo anterior:

instanciaB.__proto__ == ConstructorB.prototype // true
instanciaB.__proto__.__proto__ == ConstructorA.prototype // true
instanciaB.__proto__.__proto__.__proto__ == Object.prototype // true
instanciaB.__proto__.__proto__.__proto__.__proto__ == null // true
3.10 Cadena de prototipos de la función constructora

En el ejemplo anterior:

expect(ConstructorB.__proto__).toEqual(Function.prototype);
expect(ConstructorB.__proto__.__proto__).toEqual(Object.prototype);
expect(ConstructorB.__proto__.__proto__.__proto__).toEqual(null);
3.11 Esquema prototipos

3.12 Operador instanceof

La expresión instanciaB instanceof ConstructorA devolverá true, si el prototipo de la Función ConstructorA, se encuentra en la cadena de prototipos de
la instanciaB.

En el ejemplo anterior:

instanciaB instanceof ConstructorB; // true
instanciaB instanceof ConstructorA; // true
instanciaB instanceof Object; // true
3.13 Extensión

Con los prototipos podemos extender la funcionalidad del propio lenguaje.

Ejemplo:

String.prototype.hola = function() {
return "Hola "+this;
}

"Adolfo".hola(); // "Hola Adolfo"
3.14 Propiedades y métodos estáticos

Lo que se define dentro de la función constructora va a ser propio de la instancia.

Pero como hemos dicho, en JavaScript, una función es un objeto, al que podemos añadir tanto atributos como funciones.

Añadiendo atributos y funciones a la función constructora obtenemos propiedades y métodos estáticos.

Ejemplo:

function ConstructorA() {

ConstructorA.propiedadEstatica = "propiedad estática";
}

ConstructorA.metodoEstatico = function() {
console.log("método estático");
}
3.15 Propiedades y métodos privados

La visibilidad de objetos depende del contexto.

Los contextos en JavaScript son bloques de código entre dos {} y en general, desde uno de ellos, solo tienes acceso a lo que en él se defina y a lo que se
defina en otros contextos que contengan al tuyo.

Ejemplo:

function ConstructorA(privada, publica) {
var propiedadPrivada = privada;
this.propiedadPublica = publica;
var metodoPrivado = function() {
console.log("-->propiedadPrivada", propiedadPrivada);
}
this.metodoPublico = function() {
console.log("-->propiedadPublica", this.propiedadPublica);
metodoPrivado();
}
}
3.16 Polimorfismo

Poder llamar a métodos sintácticamente iguales de objetos de tipos diferentes.

Esto se consigue mediante herencia.

4 Técnicas avanzadas
4.1 Funciones

Son objetos con sus propiedades.

Se pueden pasar como parámetros a otras funciones.

Pueden guardarse en variables.

Son mensajes cuyo receptor es this.

4.2 This

Ejemplo:

var nombre = "Laura";

var alba = {
nombre: "Alba",
saludo: function() {
return "Hola "+this.nombre;
}
}

alba.saludo(); // Hola Alba

var fn = alba.saludo;

fn(); // Hola Laura
4.3 call y apply

Dos funciones permiten manipular el this: call y apply que en lo único que se diferencian es en la llamada.

fn.call(thisArg [, arg1 [, arg2 [...]]])

fn.apply(thisArg [, arglist])
4.4 Número variable de argumentos

Las funciones en JavaScript aunque tengan especificado un número de argumentos de entrada, pueden recibir más o menos argumentos y es válido.

4.5 Arguments

Es un objeto que contiene los parámetros de la función.

function echoArgs() {
console.log(arguments[0]); // Adolfo
console.log(arguments[1]); // Sanz
}
echoArgs("Adolfo", "Sanz");
4.6 Declaración de funciones

Estas 2 declaraciones son equivalentes:

function holaMundo1() {
console.log("Hola Mundo 1");
}
holaMundo1();

var holaMundo2 = function() {
console.log("Hola Mundo 2");
}
holaMundo2();
4.7 Transfiriendo funciones a otras funciones

Hemos dicho que las funciones son objetos, así que se pueden pasar como parámetros.

function saluda() {
console.log("Hola")
}
function ejecuta(func) {
func()
}
ejecuta(saluda);
4.8 Funciones anónimas

Hemos dicho que