diff options
| -rw-r--r-- | contenidos.md | 144 |
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 |