Semana 2: Javascript básico

1 files changed, 143 insertions, 1 deletions

diff --git a/contenidos.md b/contenidos.md
index 3f7b175..6014512 100644
--- a/contenidos.md
+++ b/contenidos.md
@@ -280,7 +280,7 @@ explicación de qué atributos estándar pueden utilizar.
 
 Los formularios son un componente muy importante de la web.
 
-> TODO discutir los formularios
+> TODO discutir los formularios cuando haya un back-end con el que probar
 
 
 # CSS
@@ -333,3 +333,145 @@ variedad de valores posibles. Una vez entendidos los conceptos de la [guía de
 MDN][css] de forma general, la mejor manera de aprender es ir trabajando y
 aprendiendo a realizar operaciones concretas con el tiempo. Tener los
 conceptos básicos es primordial, eso sí, pero tampoco son demasiados.
+
+# JavaScript
+
+[Curso rápido de JavaScript][js-crash]
+
+[Curso de JavaScript][js]
+
+[Curso detallado de JavaScript][js-deep]
+
+[Contexto de las tecnologías de JavaScript][js-overview]
+
+[js-crash]: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
+[js]: https://developer.mozilla.org/en-US/docs/Learn/JavaScript
+[js-deep]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
+[js-overview]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview
+
+La estructura básica del lenguaje es primordial conocer. Diferenciar los tipos
+de dato básicos, qué es una **sentencia** (*statement*) y qué es una
+**expresión** (*expression*).
+
+En JavaScript las funciones son valores, como cualquier otro. Y pueden
+recibirse como argumentos y retornarse como valores de retorno.
+
+## Scope
+
+Las variables declaradas con `var` viven en todo el cuerpo de la función donde
+se declararon.
+
+Con la aparición de ES6 (ECMAScript 6) se añaden `let` y `const` cuyo ámbito
+(*scope*) se limita al bloque actual.
+
+## Closures
+
+El *scope* (ámbito) en JavaScript es **léxico** (*lexical scope*) y para
+implementarlo se utilizan *closures*. Una *closure* aparece cuando una función
+captura el contexto en el que fue creada para recordar una o más variables:
+
+``` javascript
+function incrementador( incremento ){
+    return (function (valor){
+        // Se captura el contexto porque `incremento` no está definido en la
+        // función interna, sino en `incrementador`
+        return valor + incremento;
+    })
+}
+
+let masDiez     = incrementador (10);
+let masVeinte   = incrementador (20);
+
+masDiez(1)      // => 11
+masVeinte(1)    // => 21
+```
+
+## Objetos
+
+Los objetos son fundamentales en JavaScript. Son colecciones valores, cada uno
+asignado a una clave.
+
+> Los `Array` son realmente un tipo de objeto con claves numéricas
+
+
+### Programación orientada a objetos (OOP)
+
+Conceptos principales de la **programación orientada a objetos basada en
+clases**:
+
+- **Polimorfismo**: no es aplicable en JavaScript, porque al ser un lenguaje
+  dinámico se acerca más al
+  [*duck-typing*](https://en.wikipedia.org/wiki/Duck_typing).
+- **Herencia**: que las clases puedan definirse como subclases de otras,
+  adquiriendo sus características. Las subclases pueden especificar
+  comportamiento propio sobreescribiendo el comportamiento de la superclase.
+- **Encapsulación**: aislar los campos internos de los objetos del exterior
+  para mantener sus invariantes y asegurarse de que la información dentro del
+  objeto es siempre coherente.
+- **Identidad**: que cada objeto tenga noción de sí mismo. Se realiza mediante
+  el `this`.
+
+#### Orientación a prototipos
+
+**Realmente JavaScript implementa un sistema de orientación a objetos basado en
+prototipos** que permite emular el comportamiento de un sistema basado en
+clases, pero que es en realidad mucho más flexible.
+
+La programación orientada a objetos basada en prototipos nace con el objetivo
+de clasificar los objetos en función de su *semejanza* a otros, en lugar de si
+pertenecen o no a una *clase*. Pero la *semejanza* es un concepto tan fuerte
+que realmente permite implementar clases.
+
+[La guía básica de MDN introduce estos conceptos][js-oop]
+
+[js-oop]: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects
+
+Los objetos de JavaScript pueden tener un **prototipo** (*prototype*). El
+prototipo es otro objeto. Cuando se hace referencia a una propiedad o método de
+un objeto si éste no lo tiene entre sus elementos, se busca en su prototipo.
+Los prototipos también pueden tener prototipos. Esta cadena de búsqueda se
+conoce como *prototype chain* (cadena de prototipos) y es la que permite
+implementar lógicas de relación entre objetos, ya sean basadas en *clases* o en
+*semejanza*. Es un mecanismo simple pero muy poderoso.
+
+Debida a la flexibilidad del lenguaje [hay muchas formas de programar mediante
+orientación a objetos en JavaScript][csstricks-js-oop-flavors]. La forma más
+moderna se introdujo en ES6: `class`.
+
+[csstricks-js-oop-flavors]: https://css-tricks.com/the-flavors-of-object-oriented-programming-in-javascript/
+
+#### Identidad
+
+En JavaScript es muy importante controlar la identidad de los objetos: el
+`this`.
+
+En ocasiones, como al enviar un método de un objeto como argumento a una
+función, el `this` se pierde y el método pierde su identidad. Es por eso que
+debe controlarse con mucho cuidado.
+
+Un ejemplo:
+
+``` javascript
+function Human(name){
+    this.name = name;
+    this.greet = function(){
+        console.log(`Hola, soy ${this.name}`);
+    }
+}
+
+let ekaitz = new Human("Ekaitz");
+ekaitz.greet()                  // => "Hola, soy Ekaitz"
+
+setTimeout(ekaitz.greet, 100);  // => "Hola, soy"
+// Al separar el método de su objeto, se pierde el `this`, que se vuelve
+// undefined, y no se imprime en pantalla
+
+setTimeout(ekaitz.greet.bind(ekaitz), 100) // => "Hola, soy Ekaitz"
+// Gracias al método `bind` de las funciones, es posible asignar el this para
+// el futuro
+```
+
+Otro operador interesante a comprender es [`new`][new], que habilita algunas de
+las formas habituales de crear nuevos objetos. Aunque hay otras.
+
+[new]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new