├── Readme.md ├── Sesion-01 ├── Ejemplo-01 │ ├── Readme.md │ └── assets │ │ └── typeof.png ├── Ejemplo-02 │ ├── Readme.md │ └── assets │ │ ├── operators-1.png │ │ └── operators-2.png ├── Ejemplo-03 │ ├── Readme.md │ └── assets │ │ └── precedence.png ├── Readme.md ├── Reto-01 │ └── Readme.md └── assets │ ├── back-end.png │ ├── companies.jpg │ ├── front-end.png │ ├── most-popular-technologies.png │ └── variables.png ├── Sesion-02 ├── Ejemplo-01 │ ├── Readme.md │ └── assets │ │ ├── if-else.png │ │ └── if.png ├── Ejemplo-02 │ ├── Readme.md │ └── assets │ │ └── switch.png ├── Ejemplo-03 │ ├── Readme.md │ └── assets │ │ └── for-loop.png ├── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-03 │ └── Readme.md └── Soluciones │ └── Readme.md ├── Sesion-03 ├── Ejemplo-01 │ ├── Readme.md │ └── assets │ │ └── doubleNumbers.png ├── Ejemplo-02 │ ├── Readme.md │ └── assets │ │ └── keyValuePairs.png ├── Ejemplo-03 │ ├── Readme.md │ └── assets │ │ └── destructuring.png ├── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-03 │ └── Readme.md ├── Soluciones │ └── Readme.md └── assets │ └── array.png ├── Sesion-04 ├── Ejemplo-01 │ ├── Readme.md │ └── assets │ │ ├── calculateAge.png │ │ └── yearsUntilRetirement.png ├── Ejemplo-02 │ ├── Readme.md │ └── assets │ │ └── whatDoYouDo.png ├── Ejemplo-03 │ ├── Readme.md │ └── assets │ │ ├── IIFE-args.png │ │ ├── IIFE.png │ │ └── logName.png ├── Postwork │ └── Readme.md ├── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-03 │ └── Readme.md └── Soluciones │ └── Readme.md ├── Sesion-05 ├── Ejemplo-01 │ └── Readme.md ├── Ejemplo-02 │ ├── Readme.md │ └── assets │ │ ├── execution-context-phases.png │ │ ├── scope-chain-example.png │ │ ├── scope-chain.png │ │ ├── this-keyword.png │ │ └── variable-object.png ├── Ejemplo-03 │ ├── Readme.md │ └── assets │ │ └── this-arrow.png ├── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-03 │ └── Readme.md ├── Soluciones │ └── Readme.md └── assets │ ├── execution-context.png │ ├── this-browser.png │ └── this-node.png ├── Sesion-06 ├── Ejemplo-01 │ ├── Readme.md │ └── assets │ │ ├── function-constructor.png │ │ └── instances.png ├── Ejemplo-02 │ ├── Readme.md │ └── assets │ │ └── inheritance.png ├── Ejemplo-03 │ ├── Readme.md │ └── assets │ │ ├── prototype-2.png │ │ ├── prototype-3.png │ │ └── prototype.png ├── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-03 │ └── Readme.md ├── Soluciones │ └── Readme.md └── assets │ ├── constructor.png │ ├── inheritance.png │ ├── instances.png │ └── prototype-chain.png ├── Sesion-07 ├── Ejemplo-01 │ ├── Readme.md │ └── assets │ │ ├── immutable.png │ │ └── mutable.png ├── Ejemplo-02 │ ├── Readme.md │ └── assets │ │ └── pure-function.png ├── Ejemplo-03 │ ├── Readme.md │ └── assets │ │ └── sum-digits.png ├── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-03 │ └── Readme.md ├── Soluciones │ └── Readme.md └── assets │ └── pure-function.png ├── Sesion-08 ├── Ejemplo-01 │ ├── Readme.md │ └── assets │ │ ├── npm-init.png │ │ └── npm-run-build.png ├── Ejemplo-02 │ ├── Readme.md │ └── assets │ │ └── dev-server.png ├── Ejemplo-03 │ └── Readme.md ├── Postwork │ └── Readme.md ├── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Soluciones │ └── Readme.md └── assets │ ├── babel.png │ └── webpack.png ├── Sesion-09 ├── Ejemplo-01 │ ├── Readme.md │ └── assets │ │ ├── document-1.png │ │ └── document-2.png ├── Ejemplo-02 │ ├── Readme.md │ └── assets │ │ ├── nodes.png │ │ └── paragraphs.png ├── Ejemplo-03 │ ├── Readme.md │ └── assets │ │ └── create-nodes.png ├── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Soluciones │ └── Readme.md └── assets │ ├── document.png │ ├── links.png │ └── tree.png ├── Sesion-10 ├── Ejemplo-01 │ ├── Readme.md │ └── assets │ │ └── colors.gif ├── Ejemplo-02 │ ├── Readme.md │ └── assets │ │ └── changing-text.gif ├── Ejemplo-03 │ ├── Readme.md │ └── assets │ │ └── pressing-keys.gif ├── Readme.md ├── Reto-01 │ ├── Readme.md │ └── assets │ │ └── balloon.gif ├── Reto-02 │ ├── Readme.md │ └── assets │ │ └── modal.gif ├── Reto-03 │ ├── Readme.md │ └── assets │ │ └── tabs.gif └── Soluciones │ └── Readme.md ├── Sesion-11 ├── Ejemplo-01 │ ├── Readme.md │ └── assets │ │ └── callback-hell.png ├── Ejemplo-02 │ ├── Readme.md │ └── assets │ │ └── chaining-promises.png ├── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-03 │ └── Readme.md ├── Soluciones │ └── Readme.md └── assets │ └── control-io.svg └── Sesion-12 ├── Ejemplo-01 ├── Readme.md └── assets │ └── nasa-api.png ├── Ejemplo-02 ├── Readme.md └── assets │ └── giphy.png ├── Postwork └── Readme.md ├── Readme.md ├── Reto-01 ├── Readme.md └── assets │ └── challenge-1.png ├── Reto-02 ├── Readme.md └── assets │ └── challenge-2.png ├── Reto-03 └── Readme.md ├── Soluciones └── Readme.md └── assets ├── api.png └── rest-api.png /Readme.md: -------------------------------------------------------------------------------- 1 | 2 | ## Módulo: Programación con JavaScript 3 | 4 | ### Objetivo 5 | 6 | Conocer los fundamentos del lenguaje para poder interactuar con la web. 7 | 8 | ### Organización Del Módulo 9 | 10 | - [Sesión 1: Fundamentos de JS](./Sesion-01) 11 | 12 | - [Sesión 2: Controles de flujo](./Sesion-02) 13 | 14 | - [Sesión 3: Objetos y arreglos](./Sesion-03) 15 | 16 | - [Sesión 4: Funciones](./Sesion-04) 17 | 18 | - [Sesión 5: Scope y this](./Sesion-05) 19 | 20 | - [Sesión 6: Programación orientada a objetos](./Sesion-06) 21 | 22 | - [Sesión 7: Programación funcional](./Sesion-07) 23 | 24 | - [Sesión 8: Webpack y Babel](./Sesion-08) 25 | 26 | - [Sesión 9: Manipulación del DOM](./Sesion-09) 27 | 28 | - [Sesión 10: Eventos en el DOM](./Sesion-10) 29 | 30 | - [Sesión 11: Programación Asíncrona](./Sesion-11) 31 | 32 | - [Sesión 12: API](./Sesion-12) 33 | -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 01`](../Readme.md) > `Ejemplo 01` 2 | 3 | --- 4 | 5 | ## Ejemplo 1: Tipos de datos y operador `typeof` 6 | 7 | ### Objetivo 8 | 9 | Usaremos el operador `typeof` para distinguir los distintos tipos de datos de manera práctica. 10 | 11 | #### Requisitos 12 | 13 | Puedes hacer el siguiente ejemplo directo en la consola de Chrome. 14 | 15 | #### Desarrollo 16 | 17 | ```javascript 18 | // Numbers 19 | typeof 10; // "number" 20 | typeof 12.5; // "number" 21 | typeof 2.5e+6; // "number" 22 | typeof Infinity; // "number" 23 | typeof NaN; // "number" 24 | 25 | // Strings 26 | typeof ' '; // "string" - Espacios en blanco cuentan como caracteres 27 | typeof 'Hello World'; // "string" 28 | typeof '12'; // "string" - Números dentro de comillas son strings 29 | 30 | // Booleans 31 | typeof true; // "boolean" 32 | typeof false; // "boolean" 33 | 34 | // Undefined 35 | typeof undefined; // "undefined" 36 | 37 | var name; 38 | typeof name; // "undefined" - Aún no se asigna un valor 39 | 40 | // Null 41 | typeof null; // "object" 42 | ``` 43 | 44 | > Cuando usamos el operador `typeof` con `null` obtenemos como resultado `object` en lugar de `null`. Esto es 45 | > considerado como un bug en JavaScript que está presente desde su creación, debido a que hay mucho código escrito 46 | > tomando en cuenta este comportamiento, la idea de corregir este bug fue abandonada, ya que causaría más problemas. 47 | 48 | ![typeof operator](./assets/typeof.png) 49 | -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-01/assets/typeof.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-01/Ejemplo-01/assets/typeof.png -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 01`](../Readme.md) > `Ejemplo 02` 2 | 3 | --- 4 | 5 | ## Ejemplo 2: Operadores 6 | 7 | ### Objetivo 8 | 9 | Practicar los distintos operadores básicos que proporciona JavaScript. 10 | 11 | #### Requisitos 12 | 13 | Puedes hacer el siguiente ejemplo directo en la consola de Chrome. 14 | 15 | #### Desarrollo 16 | 17 | ```javascript 18 | var a = 5; 19 | var b = 10; 20 | var c = 15; 21 | 22 | a + b; // 15 23 | 24 | b - a; // 5 25 | 26 | a * c; // 75 27 | 28 | c / a; // 3 29 | 30 | b % a; // 0 31 | ``` 32 | 33 | ![Operators](./assets/operators-1.png) 34 | 35 | Este tipo de operaciones no cambia el valor de las variables `a`, `b` y `c` ya que no estamos usando el operador de asignación `=`. Sin embargo, los operadores de incremento y decremento sí cambian el valor de las variables. 36 | 37 | ```javascript 38 | var a = 5; 39 | var b = 10; 40 | var c = 15; 41 | 42 | c++; // 16 43 | 44 | b--; // 9 45 | ``` 46 | 47 | ![Operators](./assets/operators-2.png) 48 | 49 | > Es bueno aclarar sobre la separación de cada línea en JavaScript con punto y coma `;`. JavaScript no requiere estrictamente usar puntos y comas al final de cada línea, sin embargo vale la pena colocarlos. Ahora, en algún punto, cuando alcances un mejor nivel, podrías considerarlos opcional mientras cumplas con ciertos criterios. [Te compartimos un artículo que habla sobre este tema.](https://flaviocopes.com/javascript-automatic-semicolon-insertion/) 50 | -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-02/assets/operators-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-01/Ejemplo-02/assets/operators-1.png -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-02/assets/operators-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-01/Ejemplo-02/assets/operators-2.png -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 01`](../Readme.md) > `Ejemplo 03` 2 | 3 | --- 4 | 5 | ## Ejemplo 3: Precedencia de operadores 6 | 7 | ### Objetivo 8 | 9 | Practicar el orden de precedencia de los operadores en JavaScript. 10 | 11 | #### Requisitos 12 | 13 | Puedes hacer el siguiente ejemplo directo en la consola de Chrome. 14 | 15 | #### Desarrollo 16 | 17 | ```javascript 18 | var a = 5; 19 | var b = 10; 20 | var c = 15; 21 | 22 | a + b * c; // 155 23 | 24 | (a + b) * c; // 255 25 | 26 | b / a * c; // 30 27 | 28 | b / (a * c); // 0.1333 29 | 30 | a - b + c; // 10 31 | 32 | a - (b + c); // -20 33 | ``` 34 | 35 | Cuando hay distintos operadores con el mismo orden de precedencia se sigue el orden de asociatividad, que puede ir de izquierda a derecha o derecha a izquierda dependiendo del tipo de operador. El uso de paréntesis nos permite controlar el orden de precedencia agrupando las operaciones que queremos que se realicen primero. 36 | 37 | ![Operators](./assets/precedence.png) 38 | -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-03/assets/precedence.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-01/Ejemplo-03/assets/precedence.png -------------------------------------------------------------------------------- /Sesion-01/Reto-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 01`](../Readme.md) > `Reto 01` 2 | 3 | --- 4 | 5 | ## Reto 1: Precedencia de operadores 6 | 7 | ### Objetivo 8 | 9 | Practicar el orden de precedencia de los operadores en JavaScript. 10 | 11 | #### Requisitos 12 | 13 | Puedes hacer el siguiente ejemplo directo en la consola de Chrome. 14 | 15 | #### Desarrollo 16 | 17 | Intenta calcular el resultado de las siguientes operaciones antes de ver el resultado en la consola. 18 | 19 | ```javascript 20 | var a = 5; 21 | var b = 10; 22 | var c = 15; 23 | 24 | (3 + b) * c / a * 2; 25 | 26 | ((a + b * c) / 5) * 2; 27 | 28 | b / a + 2 * c; 29 | 30 | (a + b + c / c) * a; 31 | 32 | ((3 * a) / c) + a + b + c; 33 | 34 | a - (b + c) * a / 1; 35 | ``` 36 | 37 | Puedes consultar la tabla de precedencia si no estás seguro de qué operación hacer primero. 38 | 39 |
40 | Solución 41 | 42 | ```javascript 43 | (3 + b) * c / a * 2; // 78 44 | 45 | ((a + b * c) / 5) * 2; // 62 46 | 47 | b / a + 2 * c; // 32 48 | 49 | (a + b + c / c) * a; // 80 50 | 51 | ((3 * a) / c) + a + b + c; // 31 52 | 53 | a - (b + c) * a / 1; // -120 54 | ``` 55 |
56 | -------------------------------------------------------------------------------- /Sesion-01/assets/back-end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-01/assets/back-end.png -------------------------------------------------------------------------------- /Sesion-01/assets/companies.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-01/assets/companies.jpg -------------------------------------------------------------------------------- /Sesion-01/assets/front-end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-01/assets/front-end.png -------------------------------------------------------------------------------- /Sesion-01/assets/most-popular-technologies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-01/assets/most-popular-technologies.png -------------------------------------------------------------------------------- /Sesion-01/assets/variables.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-01/assets/variables.png -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 02`](../Readme.md) > `Ejemplo 01` 2 | 3 | --- 4 | 5 | ## Ejemplo 1: Primeras condicionales 6 | 7 | ### Objetivo 8 | 9 | Implementar operadores lógicos y condicionales tipo `if`/`else`. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-2.js` que es donde se trabajarán los ejemplos de esta 24 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 25 | 26 | #### Desarrollo 27 | 28 | Vamos a dar un saludo adecuado dependiendo de la hora. 29 | 30 | ```javascript 31 | const time = 13; 32 | let greeting; 33 | 34 | if (time < 12) { 35 | greeting = "Good morning"; 36 | } 37 | 38 | if (time < 20) { 39 | greeting = "Good afternoon"; 40 | } 41 | 42 | if (time >= 20) { 43 | greeting = "Good evening"; 44 | } 45 | 46 | console.log(greeting) // Good afternoon 47 | ``` 48 | 49 | ![if](./assets/if.png) 50 | 51 | En lugar de tener distintos bloques con la condicional `if`, podemos concatenarlos todos con `else if`. 52 | 53 | ```javascript 54 | const time = 13; 55 | let greeting; 56 | 57 | if (time < 12) { 58 | greeting = "Good morning"; 59 | } else if (time < 20) { 60 | greeting = "Good afternoon"; 61 | } else if (time >= 20) { 62 | greeting = "Good evening"; 63 | } 64 | 65 | console.log(greeting) // Good afternoon 66 | ``` 67 | 68 | ![if/else](./assets/if-else.png) 69 | -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-01/assets/if-else.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-02/Ejemplo-01/assets/if-else.png -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-01/assets/if.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-02/Ejemplo-01/assets/if.png -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 02`](../Readme.md) > `Ejemplo 02` 2 | 3 | --- 4 | 5 | ## Ejemplo 2: Usando `switch` 6 | 7 | ### Objetivo 8 | 9 | Analizar la sintaxis de `switch` y determinar en qué casos es mejor usarlo en lugar de `if`/`else`. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-2.js` que es donde se trabajarán los ejemplos de esta 24 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 25 | 26 | #### Desarrollo 27 | 28 | Vamos a calcular el día de la semana dependiendo de su valor numérico empezando en cero. 29 | 30 | ```javascript 31 | const day = 2; 32 | let text; 33 | 34 | switch (day) { 35 | case 0: 36 | text = "Sunday"; 37 | break; 38 | case 1: 39 | text = "Monday"; 40 | break; 41 | case 2: 42 | text = "Tuesday"; 43 | break; 44 | case 3: 45 | text = "Wednesday"; 46 | break; 47 | case 4: 48 | text = "Thursday"; 49 | break; 50 | case 5: 51 | text = "Friday"; 52 | break; 53 | case 6: 54 | text = "Saturday"; 55 | break; 56 | default: 57 | text = "Error"; 58 | 59 | } 60 | 61 | console.log(text); // Tuesday 62 | ``` 63 | 64 | ![switch](./assets/switch.png) 65 | -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-02/assets/switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-02/Ejemplo-02/assets/switch.png -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 02`](../Readme.md) > `Ejemplo 03` 2 | 3 | --- 4 | 5 | ## Ejemplo 2: Ciclo `for` 6 | 7 | ### Objetivo 8 | 9 | Analizar el funcionamiento de los ciclos o bucles para ejecutar código que queremos repetir `n` cantidad de veces. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-2.js` que es donde se trabajarán los ejemplos de esta 24 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 25 | 26 | #### Desarrollo 27 | 28 | Pensemos que queremos repetir un texto 5 veces y que aparezca en consola: 29 | 30 | ```javascript 31 | console.log("Hello World"); 32 | console.log("Hello World"); 33 | console.log("Hello World"); 34 | console.log("Hello World"); 35 | console.log("Hello World"); 36 | ``` 37 | 38 | Excelente, funcionará y se reflejarán en la consola. 39 | 40 | Ahora bien, si te dijera que queremos repetirlo 200 veces, entonces copiar y pegar cada línea se volvería ineficiente ( 41 | aparte de odiar al que te dio la instrucción). 42 | 43 | ¿Qué podemos hacer? 44 | 45 | ```javascript 46 | for(let i = 0; i<=200; i++){ 47 | console.log("Hello World"); 48 | } 49 | ``` 50 | 51 | Con esto, obtendremos de retorno los 200 `"Hello World"`. 52 | 53 | ![for](./assets/for-loop.png) 54 | -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-03/assets/for-loop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-02/Ejemplo-03/assets/for-loop.png -------------------------------------------------------------------------------- /Sesion-02/Reto-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 02`](../Readme.md) > `Reto 01` 2 | 3 | --- 4 | 5 | ## Reto 1: Operadores condicionales 6 | 7 | ### Objetivos 8 | 9 | Implementar adecuadamente los operadores condicionales necesarios para controlar el flujo del código. 10 | 11 | #### Requisitos 12 | 13 | Vamos a empezar con el último código generado en el [Ejemplo 01](../Ejemplo-01/): 14 | 15 | ```javascript 16 | const time = 13; 17 | let greeting; 18 | 19 | if (time < 12) { 20 | greeting = "Good morning"; 21 | } else if (time < 20) { 22 | greeting = "Good afternoon"; 23 | } else if (time >= 20) { 24 | greeting = "Good evening"; 25 | } 26 | 27 | console.log(greeting) // Good afternoon 28 | ``` 29 | 30 | #### Desarrollo 31 | 32 | Nuestro código tiene una pequeña falla, el día solo tiene 24 horas y no se está tomando en cuenta el caso en el 33 | que `time` sea una hora inválida. 34 | 35 | Utilizando lo visto hasta el momento sobre operadores lógicos y condicionales, debes crear un nuevo mensaje que será 36 | usado cuando `time` sea una hora que no existe en el día. 37 | -------------------------------------------------------------------------------- /Sesion-02/Reto-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 02`](../Readme.md) > `Reto 02` 2 | 3 | --- 4 | 5 | ## Reto 2: Números pares 6 | 7 | ### Objetivos 8 | 9 | Dominar el uso de ciclos y operadores lógicos. 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | - Crear un ciclo desde 0 hasta 100. 18 | - Mostrar todos los números pares en este ciclo con `console.log()` 19 | -------------------------------------------------------------------------------- /Sesion-02/Reto-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 02`](../Readme.md) > `Reto 03` 2 | 3 | --- 4 | 5 | ## Reto 3: Números primos 6 | 7 | ### Objetivos 8 | 9 | Dominar el uso de ciclos y operadores lógicos. 10 | 11 | #### Requisitos 12 | 13 | Haber terminado el [reto 2](../Reto-02). 14 | 15 | #### Desarrollo 16 | 17 | - Crear un ciclo desde 0 hasta 100. 18 | - Mostrar todos los números primos en este ciclo con `console.log()` 19 | 20 | > Un número primo es número natural mayor a 1 que sólo es divisible entre 1 y sí mismo. 21 | -------------------------------------------------------------------------------- /Sesion-02/Soluciones/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 02`](../Readme.md) > `Soluciones` 2 | 3 | --- 4 | 5 | ## Reto 1: Operadores condicionales 6 | 7 | ```javascript 8 | const time = 27; 9 | let greeting; 10 | 11 | if (time >= 0 && time < 12) { 12 | greeting = "Good morning"; 13 | } else if (time >= 12 && time < 20) { 14 | greeting = "Good afternoon"; 15 | } else if (time >= 20 && time < 24) { 16 | greeting = "Good evening"; 17 | } else { 18 | greeting = "Unknown hour"; 19 | } 20 | 21 | console.log(greeting) // Unknown hour 22 | ``` 23 | 24 | --- 25 | 26 | ## Reto 2: Números pares 27 | 28 | ```javascript 29 | for(let i = 0; i <= 100; i++) { 30 | if(i % 2 === 0) console.log( i ) 31 | } 32 | ``` 33 | 34 | --- 35 | 36 | ## Reto 3: Números primos 37 | 38 | ```javascript 39 | for (let counter = 2; counter <= 100; counter++) { 40 | let isPrime = true; 41 | 42 | for (let i = 2; i <= counter; i++) { 43 | if (counter % i === 0 && i !== counter) { 44 | isPrime = false; 45 | } 46 | } 47 | 48 | if(isPrime) console.log(counter) 49 | } 50 | ``` 51 | -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 03`](../Readme.md) > `Ejemplo 01` 2 | 3 | --- 4 | 5 | ## Ejemplo 1: Arreglos 6 | 7 | ### Objetivo 8 | 9 | Distinguir la sintaxis y correcta implementación de los arreglos en JavaScript. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-4.js` que es donde se trabajarán los ejemplos de esta 24 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados 25 | 26 | #### Desarrollo 27 | 28 | Vamos a empezar con un arreglo de enteros llamado `numbers` y otro arreglo `doubled`, este segundo arreglo será 29 | inicializado vacío. Nuestro objetivo será llenar `doubled` con todos los números que se encuentren en `numbers` 30 | multiplicados por dos. 31 | 32 | ```javascript 33 | const numbers = [1, 3, 4, 7, 2, 1, 9, 0] 34 | 35 | const doubled = [] 36 | ``` 37 | 38 | Vamos a recorrer cada elemento del arreglo `numbers` con un ciclo `for`, multiplicando el número por dos y lo 39 | agregaremos al arreglo vacío. 40 | 41 | ```javascript 42 | for(let i = 0; i < numbers.length; i++) { 43 | doubled.push(numbers[i] * 2) 44 | } 45 | ``` 46 | 47 | > El método `push()` agrega un nuevo elemento al final de un arreglo. Contrario al método `pop()` que elimina el último 48 | > elemento del arreglo cambiando su longitud. 49 | 50 | Como estamos comparando que `i < numbers.length` el ciclo va a terminar con el último elemento del arreglo. 51 | 52 | ```javascript 53 | const numbers = [1, 3, 4, 7, 2, 1, 9, 0] 54 | 55 | const doubled = [] 56 | 57 | for(let i = 0; i < numbers.length; i++) { 58 | doubled.push(numbers[i] * 2) 59 | } 60 | 61 | console.log(numbers) // [1, 3, 4, 7, 2, 1, 9, 0] 62 | console.log(doubled) // [2, 6, 8, 14, 4, 2, 18, 0] 63 | ``` 64 | 65 | ![multiplyByTwo](./assets/doubleNumbers.png) 66 | -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-01/assets/doubleNumbers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-03/Ejemplo-01/assets/doubleNumbers.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 03`](../Readme.md) > `Ejemplo 02` 2 | 3 | --- 4 | 5 | ## Ejemplo 2: Transformando objetos en arreglos 6 | 7 | ### Objetivo 8 | 9 | Distinguir la sintaxis y correcta implementación de los arreglos en JavaScript. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-4.js` que es donde se trabajarán los ejemplos de esta 24 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 25 | 26 | #### Desarrollo 27 | 28 | Vamos a convertir un objeto en un arreglo con los pares `[key, value]` por cada propiedad. 29 | 30 | ```javascript 31 | const car = { 32 | brand: 'Nissan', 33 | model: 'Versa', 34 | year: 2020 35 | } 36 | 37 | // [['brand', 'Nissan'], ['model', 'Versa'], ['year', 2020]] 38 | ``` 39 | 40 | Para resolver este ejercicio haremos uso del 41 | método [`Object.keys()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) 42 | el cual retorna un arreglo con el nombre de las propiedades de un objeto. 43 | 44 | ```javascript 45 | const obj = { 46 | a: 'some string', 47 | b: 42, 48 | c: false 49 | }; 50 | 51 | console.log( Object.keys(obj) ); // ['a', 'b', 'c'] 52 | ``` 53 | 54 | Después usaremos un ciclo para ir recorriendo todas las propiedades del objeto e ir obteniendo sus respectivos valores. 55 | 56 | ```javascript 57 | const car = { 58 | brand: 'Nissan', 59 | model: 'Versa', 60 | year: 2020 61 | } 62 | 63 | const keys = Object.keys(car) 64 | const pairs = [] 65 | 66 | for(let i = 0; i < keys.length; i++) { 67 | pairs.push( [keys[i], car[keys[i]]] ) 68 | } 69 | 70 | console.log(pairs) 71 | 72 | // [['brand', 'Nissan'], ['model', 'Versa'], ['year', 2020]] 73 | ``` 74 | 75 | ![keyValuePairs](./assets/keyValuePairs.png) 76 | -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-02/assets/keyValuePairs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-03/Ejemplo-02/assets/keyValuePairs.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 03`](../Readme.md) > `Ejemplo 02` 2 | 3 | --- 4 | 5 | ## Ejemplo 3: Object Destructuring 6 | 7 | ### Objetivo 8 | 9 | Extraer propiedades de un objeto mediante asignación por destructuring. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-4.js` que es donde se trabajarán los ejemplos de esta 24 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 25 | 26 | #### Desarrollo 27 | 28 | Si la propiedad que queremos extraer no existe en el objeto se retorna `undefined`. Podemos usar asignar un valor por 29 | default en caso de no encontrar la propiedad que buscamos. Para esto debemos asignar (`=`) un valor dentro de las llaves. 30 | 31 | ```javascript 32 | const person = { 33 | firstName: 'John', 34 | lastName: 'Doe' 35 | }; 36 | 37 | const { firstName, country = 'Unknown' } = person; 38 | 39 | console.log(firstName, country); // John Unknown 40 | ``` 41 | 42 | En ocasiones no queremos usar el mismo nombre de la propiedad del objeto, por ejemplo cuando estamos consumiendo 43 | información de un recurso externo o de una base de datos. Usando `:` podemos renombrar una variable. 44 | 45 | ```javascript 46 | const person = { 47 | firstName: 'John', 48 | lastName: 'Doe' 49 | }; 50 | 51 | const { firstName: name } = person; 52 | 53 | console.log(name); // John 54 | ``` 55 | 56 | La asignación de un valor default y el cambio de nombre de la variable se pueden mezclar para casos de usos un poco más 57 | complejos. 58 | 59 | ```javascript 60 | const person = { 61 | firstName: 'John', 62 | lastName: 'Doe' 63 | }; 64 | 65 | const { firstName: name, country: ctry = 'Unknown'} = person; 66 | 67 | console.log(name, ctry); // John Unknown 68 | ``` 69 | 70 | ![Object Destructuring](./assets/destructuring.png) 71 | -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-03/assets/destructuring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-03/Ejemplo-03/assets/destructuring.png -------------------------------------------------------------------------------- /Sesion-03/Reto-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 04`](../Readme.md) > `Reto 01` 2 | 3 | --- 4 | 5 | ## Reto 1: Calcular promedio 6 | 7 | ### Objetivos 8 | 9 | Implementar adecuadamente los conceptos vistos hasta el momento sobre ciclos y arreglos para solucionar un problema. 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | Dado el arreglo `numbers` compuesto solamente por números enteros mayores que cero, obtener el promedio de todos sus 18 | elementos. 19 | 20 | ```javascript 21 | const numbers = [5, 3, 4, 7, 2, 1, 9, 7, 7] 22 | ``` 23 | 24 | > Para calcular el promedio se divide la suma de todos los elementos entre el número total de elementos. 25 | -------------------------------------------------------------------------------- /Sesion-03/Reto-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 03`](../Readme.md) > `Reto 02` 2 | 3 | --- 4 | 5 | ## Reto 2: Arreglo a objeto 6 | 7 | ### Objetivos 8 | 9 | Implementar adecuadamente los conceptos vistos hasta el momento de arreglos y ciclos para solucionar un problema. 10 | 11 | #### Requisitos 12 | 13 | En el ejemplo 2 transformamos un objeto a un arreglo con los pares `[key, value]` por cada propiedad y valor del objeto. 14 | 15 | ```javascript 16 | const car = { 17 | brand: 'Nissan', 18 | model: 'Versa', 19 | year: 2020 20 | } 21 | 22 | const keys = Object.keys(car) 23 | const pairs = [] 24 | 25 | for(let i = 0; i < keys.length; i++) { 26 | pairs.push( [keys[i], car[keys[i]]] ) 27 | } 28 | 29 | console.log(pairs) 30 | 31 | // [['brand', 'Nissan'], ['model', 'Versa'], ['year', 2020]] 32 | ``` 33 | 34 | #### Desarrollo 35 | 36 | Para este reto vamos a realizar lo opuesto. Es decir, tomar un arreglo con pares `[key, value]` y crear un objeto con 37 | sus respectivas propiedades y valores. 38 | 39 | ```javascript 40 | const car = [['brand', 'Nissan'], ['model', 'Versa'], ['year', 2020]] 41 | ``` 42 | -------------------------------------------------------------------------------- /Sesion-03/Reto-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 03`](../Readme.md) > `Reto 03` 2 | 3 | --- 4 | 5 | ## Reto 3: Objetos anidados 6 | 7 | ### Objetivos 8 | 9 | Extraer propiedades de un objeto anidado mediante asignación por destructuring. 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | Dado el siguiente objeto: 18 | 19 | ```javascript 20 | const person = { 21 | firstName: 'John', 22 | lastName: 'Doe', 23 | links: { 24 | web: { 25 | blog: 'https://johndoe.com' 26 | }, 27 | social: { 28 | facebook: 'https://facebook.com/john.doe', 29 | instagram: 'https://instagram.com/john.doe' 30 | } 31 | } 32 | } 33 | ``` 34 | 35 | Extraer las URLs de `facebook` e `instagram` y renombrar las variables por `fb` e `ig` respectivamente. 36 | -------------------------------------------------------------------------------- /Sesion-03/Soluciones/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 03`](../Readme.md) > `Soluciones` 2 | 3 | --- 4 | 5 | ## Reto 1: Calcular promedio 6 | 7 | ```javascript 8 | const numbers = [5, 3, 4, 7, 2, 1, 9, 7, 7] 9 | let sum = 0; 10 | 11 | for (const num of numbers) { 12 | sum += num; // Same as: sum = sum + numbers[i]; 13 | } 14 | 15 | const average = sum / numbers.length 16 | 17 | console.log(average) // 5 18 | ``` 19 | 20 | --- 21 | 22 | ## Reto 2: Arreglo a objeto 23 | 24 | ```javascript 25 | const car = [['brand', 'Nissan'], ['model', 'Versa'], ['year', 2020]] 26 | const obj = {} 27 | 28 | for(const keyValue of car) { 29 | obj[keyValue[0]] = keyValue[1] 30 | } 31 | 32 | console.log(obj) 33 | ``` 34 | 35 | --- 36 | 37 | ## Reto 3: Objetos anidados 38 | 39 | ```javascript 40 | const person = { 41 | firstName: 'John', 42 | lastName: 'Doe', 43 | links: { 44 | web: { 45 | blog: 'https://johndoe.com' 46 | }, 47 | social: { 48 | facebook: 'https://facebook.com/john.doe', 49 | instagram: 'https://instagram.com/john.doe' 50 | } 51 | } 52 | } 53 | 54 | const { facebook: fb, instagram: ig } = person.links.social 55 | ``` 56 | -------------------------------------------------------------------------------- /Sesion-03/assets/array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-03/assets/array.png -------------------------------------------------------------------------------- /Sesion-04/Ejemplo-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 04`](../Readme.md) > `Ejemplo 01` 2 | 3 | --- 4 | 5 | ## Ejemplo 1: Funciones 6 | 7 | ### Objetivo 8 | 9 | Distinguir la sintaxis de las funciones y su correcta implementación. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-3.js` que es donde se trabajarán los ejemplos de esta 24 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 25 | 26 | #### Desarrollo 27 | 28 | Vamos a dar calcular la edad mediante una función que reciba el año de nacimiento. 29 | 30 | ```javascript 31 | function calculateAge(birthYear) { 32 | const age = 2020 - birthYear; 33 | return age; 34 | } 35 | ``` 36 | 37 | Cuando vemos `return` en una función significa que va a retornar un valor al final de la ejecución de la función. Este 38 | valor puede ser guardado en una variable. 39 | 40 | ```javascript 41 | const ageJohn = calculateAge(1995); 42 | ``` 43 | 44 | Para ejecutar una función colocamos el nombre de la función seguido de `()` con los argumentos necesarios. En este 45 | ejemplo la variable `ageJohn` contiene el resultado que retorne `calculateAge()`. 46 | 47 | ```javascript 48 | function calculateAge(birthYear) { 49 | const age = 2020 - birthYear; 50 | return age; 51 | } 52 | 53 | const ageJohn = calculateAge(1995); 54 | 55 | console.log(ageJohn); // 25 56 | ``` 57 | 58 | ![calculateAge](./assets/calculateAge.png) 59 | 60 | Ahora podemos llamar la misma función las veces que queramos sin necesidad de repetir las mismas líneas de código una y 61 | otra vez. Las funciones también pueden llamar a otras funciones. 62 | 63 | ```javascript 64 | function yearsUntilRetirement(year, name) { 65 | const age = calculateAge(year); 66 | const retirement = 65 - age; 67 | console.log(`${name} retires in ${retirement} years.`); 68 | } 69 | ``` 70 | 71 | Algunas funciones no retornan valor alguno, como `yearsUntilRetirement` qué solo muestra un mensaje en consola. En este 72 | caso no podemos guardar el resultado en una variable como hicimos con `ageJohn`. 73 | 74 | ```javascript 75 | yearsUntilRetirement(1995, 'John Doe'); 76 | // John Doe retires in 40 years. 77 | ``` 78 | 79 | ![yearsUntilRetirement](./assets/yearsUntilRetirement.png) 80 | -------------------------------------------------------------------------------- /Sesion-04/Ejemplo-01/assets/calculateAge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-04/Ejemplo-01/assets/calculateAge.png -------------------------------------------------------------------------------- /Sesion-04/Ejemplo-01/assets/yearsUntilRetirement.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-04/Ejemplo-01/assets/yearsUntilRetirement.png -------------------------------------------------------------------------------- /Sesion-04/Ejemplo-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 04`](../Readme.md) > `Ejemplo 02` 2 | 3 | --- 4 | 5 | ## Ejemplo 2: Expresión de Función 6 | 7 | ### Objetivo 8 | 9 | Analizar la diferencia entre declaración de función y expresión de función. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-4.js` que es donde se trabajarán los ejemplos de esta 24 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 25 | 26 | #### Desarrollo 27 | 28 | Ya vimos cómo en las declaraciones de funciones comenzamos con `function` después el nombre y los argumentos de la 29 | función dentro de paréntesis. 30 | 31 | ```javascript 32 | function whatDoYouDo(job, name) { 33 | ... 34 | } 35 | ``` 36 | 37 | La sintaxis cambia un poco en una expresión de función. 38 | 39 | ```javascript 40 | const whatDoYouDo = function(job, name) { 41 | switch (job) { 42 | case 'developer': 43 | return name + ' develops cool apps.'; 44 | case 'designer': 45 | return name + ' designs awesome websites.'; 46 | default: 47 | return name + ' does something else.' 48 | } 49 | } 50 | 51 | console.log(whatDoYouDo('developer', 'John Doe')); 52 | console.log(whatDoYouDo('designer', 'Jane Doe')); 53 | console.log(whatDoYouDo('retired', 'Mark Doe')); 54 | ``` 55 | 56 | > No es necesario incluir `break` en cada caso del `switch` porque `return` finaliza la función, el siguiente código no es ejecutado. 57 | 58 | ![whatDoYouDo](./assets/whatDoYouDo.png) 59 | -------------------------------------------------------------------------------- /Sesion-04/Ejemplo-02/assets/whatDoYouDo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-04/Ejemplo-02/assets/whatDoYouDo.png -------------------------------------------------------------------------------- /Sesion-04/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 04`](../Readme.md) > `Ejemplo 03` 2 | 3 | --- 4 | 5 | ## Ejemplo 3: IIFE 6 | 7 | ### Objetivo 8 | 9 | Evaluar otra forma de utilizar expresiones de función al ejecutarlas inmediatamente. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-4.js` que es donde se trabajarán los ejemplos de esta 24 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 25 | 26 | #### Desarrollo 27 | 28 | Supongamos que tenemos una función que muestra en consola un nombre cualquiera. 29 | 30 | ```javascript 31 | function logName() { 32 | const name = "John Doe"; 33 | console.log(name); 34 | } 35 | 36 | logName(); // John Doe 37 | ``` 38 | 39 | ![logName](./assets/logName.png) 40 | 41 | Para convertir esta función en una IIFE debemos envolver toda la función en paréntesis, eso lo hace una expresión, 42 | posteriormente usamos `()` para ejecutar la función justo después de ser definida. 43 | 44 | ```javascript 45 | (function() { 46 | const name = "John Doe"; 47 | console.log(name); 48 | })(); 49 | ``` 50 | 51 | ![IIFE](./assets/IIFE.png) 52 | 53 | Como ya fue ejecutada y es anónima, no hay forma de que podamos volver a llamar la función de nuevo. 54 | 55 | También se pueden pasar argumentos a este tipo de funciones, de la misma forma que lo hacemos con las funciones 56 | normales. 57 | 58 | ```javascript 59 | (function(lastName) { 60 | const firstName = "John"; 61 | console.log(`${firstName} ${lastName}`); 62 | })('Doe'); 63 | ``` 64 | 65 | ![IIFE With Arguments](./assets/IIFE-args.png) 66 | -------------------------------------------------------------------------------- /Sesion-04/Ejemplo-03/assets/IIFE-args.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-04/Ejemplo-03/assets/IIFE-args.png -------------------------------------------------------------------------------- /Sesion-04/Ejemplo-03/assets/IIFE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-04/Ejemplo-03/assets/IIFE.png -------------------------------------------------------------------------------- /Sesion-04/Ejemplo-03/assets/logName.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-04/Ejemplo-03/assets/logName.png -------------------------------------------------------------------------------- /Sesion-04/Postwork/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 04`](../Readme.md) > `Postwork` 2 | 3 | --- 4 | 5 | ## Postwork 6 | 7 | ### Objetivos 8 | 9 | Implementar adecuadamente los conceptos vistos hasta el momento para solucionar un problema. 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | Escribir una función llamada `deepEqual` que reciba dos argumentos y retorne `true` si son el mismo valor o si son 18 | objetos con las mismas propiedades, en este último caso los valores de las propiedades deben ser comparados con una 19 | llamada recursiva de `deepEqual`. 20 | 21 | Usando el operador `typeof` puedes determinar si ambas variables son objetos, de ser así se debe llamar nuevamente 22 | `deepEqual` para comparar las propiedades de dichos objetos, en caso contrario solo es necesario revisar si ambas 23 | variables son estrictamente iguales. 24 | 25 | La función `Object.keys()` es útil para obtener las propiedades de los objetos. 26 | 27 | ```javascript 28 | function deepEqual(a, b) { 29 | // Code goes here 30 | } 31 | 32 | var john = { 33 | firstName: 'John', 34 | lastName: 'Doe' 35 | } 36 | 37 | console.log('Test 1:', deepEqual(1, 1)) // true 38 | console.log('Test 2:', deepEqual(1, '1')) // false 39 | console.log('Test 3:', deepEqual(john, john)) // true 40 | console.log('Test 4:', deepEqual(john, { firstName: 'John', lastName: 'Doe' })) // true 41 | console.log('Test 5:', deepEqual(john, { firstName: 'John' })) // false 42 | ``` 43 | 44 | --- 45 | 46 | Escribir una función `chunk` que recibe un arreglo y un número entero `size`. La función debe dividir el arreglo en 47 | múltiples arreglos del tamaño determinado por `size`. 48 | 49 | ```javascript 50 | function chunk(array, size) { 51 | // Code goes here 52 | }; 53 | 54 | var data = [1, 2, 3, 4, 5, 6, 7, 8] 55 | 56 | console.log('Test 1:', chunk(data, 1)) // [[1], [2], [3], [4], [5], [6], [7], [8]] 57 | console.log('Test 2:', chunk(data, 2)) // [[1, 2], [3, 4], [5, 6], [7, 8]] 58 | console.log('Test 3:', chunk(data, 3)) // [[1, 2, 3], [4, 5, 6], [7, 8]] 59 | ``` 60 | 61 | --- 62 | 63 | Escribir una función `frequency` que recibe un string como argumento. Esta función debe contar la frecuencia o el número 64 | de veces que se repite cada carácter. El resultado debe mostrarse en un objeto donde las propiedades sean los 65 | caracteres, y los valores sean la frecuencia. Los resultados deben ordenarse ascendentemente por los caracteres y no la 66 | frecuencia. 67 | 68 | ```javascript 69 | function frequency(string) { 70 | // Code goes here 71 | } 72 | 73 | console.log('Test 1:', frequency('cccbbbaaa')) 74 | // {a: 3, b: 3, c: 3} 75 | console.log('Test 2:', frequency('www.bedu.org')) 76 | // {.: 2, b: 1, d: 1, e: 1, g: 1, o: 1, r: 1, u: 1, w: 3} 77 | console.log('Test 3:', frequency('john.doe@domain.com')) 78 | // {.: 2, @: 1, a: 1, c: 1, d: 2, e: 1, h: 1, i: 1, j: 1, m: 2, n: 2, o: 4} 79 | ``` 80 | -------------------------------------------------------------------------------- /Sesion-04/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | [`Programación con JavaScript`](../Readme.md) > `Sesión 04` 3 | 4 | # Sesión 4: Funciones 5 | 6 | ## Objetivos 7 | 8 | Dividir el trabajo que realiza un programa mediante tareas más pequeñas aisladas del flujo principal. 9 | 10 | --- 11 | 12 | ## Tabla de Contenidos 13 | 14 | - **[¿Qué es una función?](#qué-es-una-función)** 15 | 16 | - [Ejemplo 1: Funciones](./Ejemplo-01) 17 | 18 | - [Reto 1: Potenciación](./Reto-01) 19 | 20 | - **[Expresiones de función](#expresiones-de-función)** 21 | 22 | - [Ejemplo 2: Expresión de función](./Ejemplo-02) 23 | 24 | - **[Expresión de función ejecutada inmediatamente](#expresión-de-función-ejecutada-inmediatamente)** 25 | 26 | - [Ejemplo 3: IIFE](./Ejemplo-03) 27 | 28 | - **[Arrow functions](#arrow-functions)** 29 | 30 | - [Sintaxis](#sintaxis) 31 | 32 | - [Paréntesis](#paréntesis) 33 | 34 | - [Return Implícito](#return-implícito) 35 | 36 | - [Reto 2: Número mayor](./Reto-02) 37 | 38 | - [Reto 3: Fibonacci](./Reto-03) 39 | 40 | --- 41 | 42 | ## ¿Qué es una función? 43 | 44 | Uno de los conceptos más importantes en JavaScript. Una función es un conjunto de sentencias que realizan una tarea o 45 | calculan un valor. En lugar de repetir el mismo código una y otra vez, podemos crear una función la cual se puede llamar 46 | las veces que sea necesario. 47 | 48 | ```javascript 49 | function myFunction(parameter1, parameter2) { 50 | // Código a ejecutar 51 | } 52 | ``` 53 | 54 | - `function` - La palabra clave que usamos para definir una función. 55 | 56 | - `myFunction` - Es el nombre que le damos a la función. Puede contener letras, números, guion bajo y el signo de dólar. 57 | 58 | - `(parameter1, parameter2)` - Dentro de los paréntesis colocamos los parámetros de la función separados por coma. Los 59 | parámetros son variables que se van a usar dentro de la función y no es necesario declararlas nuevamente dentro de la 60 | función. Algunas funciones no reciben parámetros, por lo que los paréntesis pueden ir vacíos. 61 | 62 | #### [Ejemplo 1: Funciones](./Ejemplo-01) 63 | 64 | #### [Reto 1: Potenciación](./Reto-01) 65 | 66 | --- 67 | 68 | ## Expresiones de función 69 | 70 | La sintaxis que hemos visto hasta ahora se le conoce como **declaración de función** o **sentencia de función**. Las 71 | funciones también pueden ser creadas mediante una **expresión de función**. 72 | 73 | #### [Ejemplo 2: Expresión de función](./Ejemplo-02) 74 | 75 | Como vimos en el ejemplo anterior, las funciones son anónimas, es decir no tienen nombre. 76 | 77 | ```javascript 78 | const square = function(number) { 79 | return number * number; 80 | } 81 | 82 | const squareOfFour = square(4); 83 | 84 | console.log(squareOfFour); // 16 85 | ``` 86 | 87 | Pero las expresiones de funciones también pueden tener un nombre para referirse a sí mismas, como en una función 88 | recursiva. 89 | 90 | ```javascript 91 | const factorial = function fac(num) { 92 | return num < 2 ? 1 : num * fac(num - 1) 93 | } 94 | 95 | console.log(factorial(5)); // 120 96 | ``` 97 | 98 | --- 99 | 100 | ## Expresión de función ejecutada inmediatamente 101 | 102 | Las expresiones de funciones ejecutadas inmediatamente o **IIFE** por sus siglas en inglés (Immediately Invoked Function 103 | Expression) son funciones que se ejecutan inmediatamente después de definirlas. Son útiles cuando queremos ejecutar una 104 | función una sola vez y no queremos que otras partes del programa puedan ejecutar dicha función accidentalmente. 105 | 106 | #### [Ejemplo 3: IIFE](./Ejemplo-03) 107 | 108 | Es común ver este patrón en frameworks o librerías de JavaScript. Al envolver el código en un IIFE están aislando las 109 | variables del resto del código y se aseguran que se ejecuta sin necesidad de que el usuario lo tenga que hacer. 110 | 111 | --- 112 | 113 | ## Arrow functions 114 | 115 | Este tipo de funciones presenta una sintaxis más concisa comparada con las funciones normales. Antes de ver la sintaxis 116 | veamos un ejemplo más con funciones normales. 117 | 118 | Tenemos un arreglo `firstNames`. 119 | 120 | ```javascript 121 | const firstNames = [ 'John', 'Jane', 'Mark']; 122 | ``` 123 | 124 | A cada nombre le vamos a agregar el apellido `Doe` y crear un nuevo arreglo `fullNames`. Para esto usaremos un ciclo y 125 | aprovecharemos la flexibilidad de template strings. 126 | 127 | ```javascript 128 | const firstNames = [ 'John', 'Jane', 'Mark']; 129 | 130 | function getFullNames(names) { 131 | const fullNames = [] 132 | 133 | for(const name of names) { 134 | fullNames.push(`${name} Doe`) 135 | } 136 | 137 | return fullNames 138 | } 139 | 140 | const fullNames = getFullNames(firstNames) 141 | 142 | console.log(fullNames); // ["John Doe", "Jane Doe", "Mark Doe"] 143 | ``` 144 | 145 | Ahora veamos cómo podemos sobreescribir esta función para usar arrow functions. 146 | 147 | ### Sintaxis 148 | 149 | Lo primero que debemos tomar en cuenta es que las arrow functions son funciones anónimas. Significa que el primer paso 150 | es usar una expresión de función. 151 | 152 | ```javascript 153 | const firstNames = [ 'John', 'Jane', 'Mark']; 154 | 155 | const getFullNames = function(names) { 156 | const fullNames = [] 157 | 158 | for(const name of names) { 159 | fullNames.push(`${name} Doe`) 160 | } 161 | 162 | return fullNames 163 | } 164 | 165 | const fullNames = getFullNames(firstNames) 166 | 167 | console.log(fullNames); // ["John Doe", "Jane Doe", "Mark Doe"] 168 | ``` 169 | 170 | Ahora bien, para escribir un arrow function solo debemos quitar el keyword `function` y agregar lo que se conoce como _ 171 | fat arrow_ (`=>`) justo después de los paréntesis que contienen los parámetros de la función. 172 | 173 | ```javascript 174 | const firstNames = [ 'John', 'Jane', 'Mark']; 175 | 176 | const getFullNames = (names) => { 177 | const fullNames = [] 178 | 179 | for(const name of names) { 180 | fullNames.push(`${name} Doe`) 181 | } 182 | 183 | return fullNames 184 | } 185 | 186 | const fullNames = getFullNames(firstNames) 187 | 188 | console.log(fullNames); // ["John Doe", "Jane Doe", "Mark Doe"] 189 | ``` 190 | 191 | ### Paréntesis 192 | 193 | Adicionalmente, cuando contamos con un único parámetro los paréntesis pueden ser eliminados. 194 | 195 | ```javascript 196 | const firstNames = [ 'John', 'Jane', 'Mark']; 197 | 198 | const getFullNames = names => { 199 | const fullNames = [] 200 | 201 | for(const name of names) { 202 | fullNames.push(`${name} Doe`) 203 | } 204 | 205 | return fullNames 206 | } 207 | 208 | const fullNames = getFullNames(firstNames) 209 | 210 | console.log(fullNames); // ["John Doe", "Jane Doe", "Mark Doe"] 211 | ``` 212 | 213 | Eliminar los paréntesis es opcional. Algunos [Style Guides](https://github.com/airbnb/javascript#arrows--one-arg-parens) 214 | sugieren no hacerlo por claridad y consistencia en el código. 215 | 216 | ### Return implícito 217 | 218 | Cuando escribimos `return` estamos definiendo explícitamente lo que debe retornar la función. Muchas veces las funciones 219 | solo retornan un valor sin hacer alguna otra operación antes. Cuando este es el caso podemos omitir el `return` pues el 220 | arrow function asume que se va a retornar lo que sigue después del fat arrow. 221 | 222 | ```javascript 223 | const logName = (name) => console.log(`Hello ${name}!`); 224 | 225 | logName('John Doe'); // Hello John Doe! 226 | ``` 227 | 228 | De esta manera podemos eliminar las llaves, ya que estas definen un bloque de líneas, y eliminar también el 229 | keyword `return` 230 | 231 | #### [Reto 2: Número mayor](./Reto-02) 232 | 233 | #### [Reto 3: Fibonacci](./Reto-03) 234 | -------------------------------------------------------------------------------- /Sesion-04/Reto-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 04`](../Readme.md) > `Reto 01` 2 | 3 | --- 4 | 5 | ## Reto 1: Potenciación 6 | 7 | ### Objetivos 8 | 9 | Implementar adecuadamente los conceptos vistos hasta el momento de funciones y ciclos para solucionar un problema. 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | Crear una función `power` que recibe dos argumentos `base` y `exponent`. La función debe retornar el resultado de 18 | elevar `base` a la potencia `exponent`. 19 | 20 | ```javascript 21 | function power(base, exponent) { 22 | ... 23 | } 24 | ``` 25 | 26 | Recuerda que en la potenciación el `exponent` indica cuántas veces se debe multiplicar `base` por sí mismo. 27 | 28 | ```javascript 29 | 3 ^ 3 = 3 * 3 * 3 30 | 3 ^ 3 = 27 31 | ``` 32 | 33 | > Evitar usar el operador de potenciación `**` o la función `Math.pow()` 34 | -------------------------------------------------------------------------------- /Sesion-04/Reto-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 04`](../Readme.md) > `Reto 02` 2 | 3 | --- 4 | 5 | ## Reto 2: Número mayor 6 | 7 | ### Objetivos 8 | 9 | Implementar adecuadamente los conceptos vistos hasta el momento de funciones y ciclos para solucionar un problema. 10 | 11 | #### Requisitos 12 | 13 | Haber terminado el [reto 1](../Reto-01). 14 | 15 | #### Desarrollo 16 | 17 | Completar la función `getLargerInt` la cual recibe dos números enteros. La función debe retornar el número mayor. 18 | 19 | ```javascript 20 | function getLergerInt(number1, number2) { 21 | ... 22 | } 23 | ``` 24 | -------------------------------------------------------------------------------- /Sesion-04/Reto-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 04`](../Readme.md) > `Reto 03` 2 | 3 | --- 4 | 5 | ## Reto 3: Fibonacci 6 | 7 | ### Objetivos 8 | 9 | Implementar adecuadamente los conceptos vistos hasta el momento de funciones y ciclos para solucionar un problema. 10 | 11 | #### Requisitos 12 | 13 | Haber terminado el [reto 2](../Reto-02). 14 | 15 | #### Desarrollo 16 | 17 | En la serie de Fibonacci: 18 | 19 | `1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...` 20 | 21 | Cada elemento se obtiene sumando los dos valores anteriores. 22 | 23 | Completar la función `fibonacciSequence` la cuál recibe `limit`, un entero positivo que representa la cantidad de 24 | elementos de la serie que queremos. 25 | 26 | ```javascript 27 | function fibonacciSequence(limit) { 28 | ... 29 | } 30 | ``` 31 | 32 | La función debe mostrar en consola los elementos de la serie hasta que `limit` sea alcanzado. 33 | 34 | ```javascript 35 | fibonacciSequence(1); // 1 36 | fibonacciSequence(2); // 1, 1 37 | fibonacciSequence(5); // 1, 1, 2, 3, 5 38 | ``` 39 | -------------------------------------------------------------------------------- /Sesion-04/Soluciones/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 04`](../Readme.md) > `Soluciones` 2 | 3 | --- 4 | 5 | ## Reto 1: Potenciación 6 | 7 | ```javascript 8 | function power(base, exponent) { 9 | let result = 1; 10 | 11 | for(var i = 0; i < exponent; i++) { 12 | result *= base; // Same as: result = result * base; 13 | } 14 | 15 | return result; 16 | } 17 | ``` 18 | 19 | --- 20 | 21 | ## Reto 2: Número mayor 22 | 23 | ```javascript 24 | function getLergerInt(number1, number2) { 25 | if(number1 > number2) { 26 | return number1 27 | } else { 28 | return number2 29 | } 30 | } 31 | ``` 32 | 33 | --- 34 | 35 | ## Reto 3: Fibonacci 36 | 37 | ```javascript 38 | function fibonacci(num) { 39 | if (num <= 1) return 1; 40 | 41 | return fibonacci(num - 1) + fibonacci(num - 2); 42 | } 43 | 44 | function fibonacciSequence(limit) { 45 | if(limit < 1) return console.log('Limit must be greater than 0'); 46 | 47 | for(var i = 0; i < limit; i++ ) { 48 | console.log( fibonacci(i) ); 49 | } 50 | } 51 | ``` 52 | -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 05`](../Readme.md) > `Ejemplo 01` 2 | 3 | --- 4 | 5 | ## Ejemplo 1: Block scope 6 | 7 | ### Objetivo 8 | 9 | Diferenciar function scope de block scope 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | Ejemplo 1: Block Scope 20 | 21 | 22 | 23 | 24 | 25 | ``` 26 | 27 | Dentro de la misma carpeta creamos un archivo `ejemplo-1.js` que es donde se trabajarán los ejemplos de esta sesión. 28 | Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 29 | 30 | #### Desarrollo 31 | 32 | Cuando agrupamos una o varias sentencias dentro de un par de llaves decimos que tenemos Block Statements o bloque de 33 | sentencias. Esto lo usamos todo el tiempo, en funciones por ejemplo, lo usamos para delimitar el cuerpo de la función. 34 | También lo usamos en condicionales como `if/else` o `switch`, e incluso en bucles como `for` o `while`. 35 | 36 | Aquí encontramos otra diferencia entre `var` y `let/const`. Un bloque de sentencias no genera un nuevo scope local 37 | cuando estamos usando `var`. 38 | 39 | ```javascript 40 | if(true) { 41 | var foo = "John Doe" 42 | 43 | console.log(foo) // "John Doe" 44 | } 45 | 46 | console.log(foo) // "John Doe" 47 | ``` 48 | 49 | En este bloque `if` creamos una variable `foo`, como `var` no tiene block scope se encuentra en el scope global, es por 50 | eso que podemos llamar a `foo` desde afuera del bloque. 51 | 52 | ```javascript 53 | var numbers = [1, 2, 3, 4, 5] 54 | var doubles = [] 55 | 56 | for(var i = 0; i < numbers.length; i++) { 57 | doubles.push(numbers[i] * 2) 58 | } 59 | 60 | console.log(numbers) // [1, 2, 3, 4, 5] 61 | console.log(doubles) // [2, 4, 6, 8, 10] 62 | console.log(i) // 5 63 | ``` 64 | 65 | Este es otro ejemplo, en este bloque `for` creamos un contador `i` que cuenta con scope global por lo que es accesible 66 | desde otras partes del código. 67 | 68 | Ahora bien, las variables creadas con `let/const` cuentan con block scope, es decir, su scope está limitado al bloque 69 | donde son creadas dichas variables. 70 | 71 | ```javascript 72 | if(true) { 73 | const foo = "John Doe" 74 | 75 | console.log(foo) // "John Doe" 76 | } 77 | 78 | console.log(foo) // Uncaught ReferenceError: foo is not defined 79 | ``` 80 | 81 | Ahora `foo` no puede leerle fuera del `if` en el que fue creado. Lo mismo sucede para el ciclo `for` que hicimos 82 | anteriormente. 83 | 84 | ```javascript 85 | const numbers = [1, 2, 3, 4, 5] 86 | const doubles = [] 87 | 88 | for(let i = 0; i < numbers.length; i++) { 89 | doubles.push(numbers[i] * 2) 90 | } 91 | 92 | console.log(numbers) // [1, 2, 3, 4, 5] 93 | console.log(doubles) // [2, 4, 6, 8, 10] 94 | console.log(i) // Uncaught ReferenceError: i is not defined 95 | ``` 96 | -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 05`](../Readme.md) > `Ejemplo 02` 2 | 3 | --- 4 | 5 | ## Ejemplo 2: Execution Context a detalle 6 | 7 | ### Objetivo 8 | 9 | Diferenciar Scope de Context y entender a detalle el Execution Context 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | Scope, Context y Execution Context son conceptos que muy fácilmente se confunden entre sí por lo que es bastante 18 | complejo entender la diferencia y cómo funcionan cuando estamos aprendiendo JavaScript. Ya vimos que _Scope_ se refiere 19 | al alcance que tienen las variables, es decir, limita desde dónde podemos acceder a una variable. Por otro lado, 20 | _Context_ se refiere al valor que tiene `this` el cual puede cambiar. 21 | 22 | --- 23 | 24 | ### Execution Context a detalle 25 | 26 | En la sesión vimos al Execution Context como una caja que envuelve variables donde parte de nuestro código es evaluado y 27 | ejecutado. Podemos asociar el Execution Context con un objeto que tiene tres propiedades: **Variable Object**, el cual 28 | contiene los argumentos de la función, declaraciones de variables internas y declaraciones de funciones. 29 | **Scope Chain**, este contiene el Variable Object del Execution Context actual así como el de los padres. Por último la 30 | variable **this**. 31 | 32 | ![Execution Context Phases](./assets/execution-context-phases.png) 33 | 34 | Empecemos con lo que ya sabemos. Cuando una función es llamada un nuevo Execution Context se coloca encima del 35 | Execution Stack y esto sucede en dos fases. La fase de creación que básicamente es crear o inicializar las propiedades 36 | descritas más arriba: Variable Object, Scope Chain y `this`. La segunda fase es la fase de ejecución, aquí se ejecuta 37 | el código de la función línea por línea. 38 | 39 | --- 40 | 41 | ### Variable Object 42 | 43 | ![Variable Object](./assets/variable-object.png) 44 | 45 | Cuando se crea el Variable Object se genera un objeto que contiene todos los argumentos que se pasaron a la función. 46 | Después, por cada declaración de función se crea una nueva propiedad dentro del VO que apunta a la función en sí. Por 47 | último, por cada declaración de variable se crea una propiedad en el VO y se inicializa la variable como `undefined`. 48 | 49 | Los últimos dos pasos es lo que se conoce como Hoisting. En este punto aún no llegamos a la fase de ejecución, es decir, 50 | el código de nuestra función aún no se ejecuta, sin embargo, ya tenemos acceso a las funciones y las variables son 51 | inicializadas con `undefined`. 52 | 53 | --- 54 | 55 | ### Scope Chain 56 | 57 | ![Scope Chain](./assets/scope-chain.png) 58 | 59 | En esta fase se crea un nuevo scope por cada función. Además del scope global y el scope local que vimos durante la 60 | sesión, existe el scope léxico. Toda función que se encuentre dentro de otra función tiene acceso al scope de la 61 | función más externa. 62 | 63 | ![Scope Chain Example](./assets/scope-chain-example.png) 64 | 65 | De esta forma la función `second` tiene acceso tanto al scope de la función `first` como el scope global. Por lo tanto 66 | tiene acceso a las variables `a` y `b`. 67 | 68 | --- 69 | 70 | ### `this` variable 71 | 72 | ![This Keyword](./assets/this-keyword.png) 73 | 74 | Por último se determina cuál será el valor de `this`. Cuando hablamos de llamadas de funciones regulares, `this` apunta 75 | al objeto global `window` en caso de los navegadores y `global` para el caso de Node.js. Cuando hablamos de un método 76 | entonces `this` apunta al objeto que está llamando el método. 77 | 78 | Es importante tomar en cuenta que a `this` no se le asigna valor alguno hasta que la función que lo define es ejecutada. 79 | -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-02/assets/execution-context-phases.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-05/Ejemplo-02/assets/execution-context-phases.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-02/assets/scope-chain-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-05/Ejemplo-02/assets/scope-chain-example.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-02/assets/scope-chain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-05/Ejemplo-02/assets/scope-chain.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-02/assets/this-keyword.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-05/Ejemplo-02/assets/this-keyword.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-02/assets/variable-object.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-05/Ejemplo-02/assets/variable-object.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 05`](../Readme.md) > `Ejemplo 02` 2 | 3 | --- 4 | 5 | ## Ejemplo 3: Arrow function y this 6 | 7 | Diferenciar el valor de this entre arrow functions y funciones normales 8 | 9 | #### Requisitos 10 | 11 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 12 | 13 | ```html 14 | 15 | 16 | 17 | Ejemplo 3: Arrow function y this 18 | 19 | 20 | 21 | 22 | 23 | ``` 24 | 25 | Dentro de la misma carpeta creamos un archivo `ejemplo-2.js` que es donde se trabajarán los ejemplos de esta sesión. 26 | Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 27 | 28 | #### Desarrollo 29 | 30 | Una característica de los arrow functions que no mencionamos la sesión anterior es que no modifican el valor de `this`, 31 | es decir dentro de un arrow function `this` sigue haciendo referencia a la global `window`. 32 | 33 | ```javascript 34 | const john = { 35 | firstName: 'John', 36 | lastName: 'Doe', 37 | birthYear: 1990, 38 | calculateAge: function() { 39 | const today = new Date() 40 | const year = today.getFullYear() 41 | this.age = year - this.birthYear 42 | } 43 | } 44 | ``` 45 | 46 | Retomemos este ejemplo. Ya vimos que al llamar `john.calculateAge()` se agrega una nueva propiedad `age` al 47 | objeto `john`. Ahora veamos qué sucede si usamos un arrow function. 48 | 49 | ```javascript 50 | const john = { 51 | firstName: 'John', 52 | lastName: 'Doe', 53 | birthYear: 1990, 54 | calculateAge: () => { 55 | const today = new Date() 56 | const year = today.getFullYear() 57 | this.age = year - this.birthYear 58 | } 59 | } 60 | ``` 61 | 62 | Si reescribimos este ejemplo con arrow function no vamos a obtener el mismo resultado. En este caso `this` deja de 63 | apuntar al objeto `john` y toma el valor de más arriba, en este caso el objeto `window`. Esto implica que la 64 | propiedad `age` será agregada a `window` en lugar de `john`. 65 | 66 | ![Arrow function and this](./assets/this-arrow.png) 67 | -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-03/assets/this-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-05/Ejemplo-03/assets/this-arrow.png -------------------------------------------------------------------------------- /Sesion-05/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../Readme.md) > `Sesión 05` 2 | 3 | # Sesión 5: Scope y this 4 | 5 | ## Objetivos 6 | 7 | Diferenciar scope global de local y cómo this cambia dependiendo del execution context 8 | 9 | --- 10 | 11 | ## Tabla de Contenidos 12 | 13 | - **[¿Qué es scope?](#qué-es-scope)** 14 | 15 | - **[Scope global](#scope-global)** 16 | 17 | - **[Scope local](#scope-local)** 18 | 19 | - [Ejemplo 1: Block Scope](./Ejemplo-01) 20 | 21 | - **[Execution context](#execution-context)** 22 | 23 | - [Ejemplo 2: Execution Context a detalle](./Ejemplo-02) 24 | 25 | - **[¿Cuál es el valor de `this`?](#cuál-es-el-valor-de-this)** 26 | 27 | - **[`this` como método](#this-como-método)** 28 | 29 | - [Ejemplo 3: Arrow function y this](./Ejemplo-03) 30 | 31 | - [Reto 1: Extraer una lista de propiedades](./Reto-01) 32 | 33 | - [Reto 2: Crear un número de teléfono](./Reto-02) 34 | 35 | - [Reto 3: Encontrar elementos faltantes](./Reto-03) 36 | 37 | --- 38 | 39 | ## ¿Qué es scope? 40 | 41 | Scope es la accesibilidad que tienen las variables, funciones y objetos en partes específicas del código durante el 42 | tiempo de ejecución. En otras palabras, el scope determina la visibilidad de las variables en áreas del código. 43 | 44 | JavaScript cuenta con dos tipos de scope: global y local. Las variables dentro de una función se encuentran en un scope 45 | local, aquellas definidas fuera de una función están en un scope global. 46 | 47 | --- 48 | 49 | ## Scope global 50 | 51 | Al momento de empezar a escribir en un documento de JavaScript ya estás en un scope global y solamente existe uno todo 52 | el documento. Todas las variables que estén definidas fuera de una función se encuentran en el scope global. Esto 53 | significa que se puede acceder a dichas variables e incluso modificarlas desde cualquier otra parte del código, incluso 54 | dentro de una función. 55 | 56 | ```javascript 57 | const name = "John Doe"; 58 | 59 | console.log(name); // "John Doe" 60 | 61 | function foo() { 62 | console.log(name); 63 | } 64 | 65 | foo(); // "John Doe" 66 | ``` 67 | 68 | --- 69 | 70 | ## Scope local 71 | 72 | Las variables definidas dentro de una función se encuentran en un scope local, esto significa que solo se puede acceder 73 | a ellas dentro de la función donde se definió la variable. Esto te permite tener variables con el mismo nombre en 74 | distintas funciones, cada una de esas variables estará ligada a su respectiva función. 75 | 76 | ```javascript 77 | function foo() { 78 | const bar = "John Doe"; 79 | console.log(bar); 80 | } 81 | 82 | foo(); // "John Doe" 83 | 84 | console.log(bar); // Uncaught ReferenceError: name is not defined 85 | ``` 86 | 87 | #### [Ejemplo 1: Block scope](./Ejemplo-01) 88 | 89 | --- 90 | 91 | ## Execution context 92 | 93 | El ambiente en el cual cada línea de código es ejecutada se conoce como Execution Context. Cada vez que se llama o 94 | ejecuta una nueva función, JavaScript crea un nuevo execution context, estos se van apilando en lo que se conoce como 95 | Execution Stack. 96 | 97 | ![Execution Context](./assets/execution-context.png) 98 | 99 | Todas las variables y declaraciones de funciones por default forman parte del Global Execution Context, como es el caso 100 | de `name`, `first`, `second`, y `third`. Al momento de ejecutar `first()` se crea un nuevo execution context encima del 101 | global, después de crear `var a` en este nuevo contexto se ejecuta `second()` y el proceso se repite. El contexto que 102 | esté hasta arriba en la pila es el que se está ejecutando en el momento, una vez que la ejecución finalice se elimina de 103 | la pila y se procede a ejecutar el que sigue, así hasta terminar. 104 | 105 | Para evitar confusiones, el **scope se refiere a la visibilidad de variables** mientras que el **contexto se refiere al 106 | valor de `this`**. Es decir, conforme cambia el execution context también lo hace el objeto `this`. 107 | 108 | #### [Ejemplo 2: Execution Context a detalle](./Ejemplo-02) 109 | 110 | --- 111 | 112 | ## ¿Cuál es el valor de `this`? 113 | 114 | Ya mencionamos que la ejecución de un execution context por default es global. Esto significa que `this` por default 115 | está haciendo referencia a un objeto global. 116 | 117 | En un navegador o browser este objeto global es `window`. 118 | 119 | ![This in browser](./assets/this-browser.png) 120 | 121 | Mientras que en un ambiente de Node.js `this` hace referencia al objeto `global`. 122 | 123 | ![This in Node.js](./assets/this-node.png) 124 | 125 | --- 126 | 127 | ## `this` como método 128 | 129 | Ya mencionamos que las propiedades de los objetos pueden contener cualquier tipo de dato, esto incluye expresiones de 130 | funciones, en cuyo caso deja de llamarse propiedad y se conoce como método. 131 | 132 | ```javascript 133 | const john = { 134 | firstName: 'John', 135 | lastName: 'Doe', 136 | birthYear: 1990, 137 | calculateAge: function(birthYear) { 138 | const today = new Date() 139 | const year = today.getFullYear() 140 | return year - birthYear 141 | } 142 | } 143 | ``` 144 | 145 | El objeto `john` contiene el método `calculateAge`. Este método es una expresión de función que recibe `birthYear` como 146 | argumento y retorna la edad actual de `john`. 147 | 148 | ```javascript 149 | console.log(john.calculateAge(1990)) // 31 150 | ``` 151 | 152 | Ahora bien, como vimos anteriormente por default `this` hace referencia a la global `window`. 153 | 154 | ```javascript 155 | console.log(this) // Window { … } 156 | ``` 157 | 158 | Incluso dentro de una función `this` sigue apuntando a la global `window`. 159 | 160 | ```javascript 161 | function foo() { 162 | console.log(this) 163 | } 164 | 165 | foo() // Window { … } 166 | ``` 167 | 168 | Pero no es el caso cuando se trata de un método de un objeto. Veamos un ejemplo: 169 | 170 | ```javascript 171 | function logThis () { 172 | console.log("Is this === window? " + (this === window)) 173 | } 174 | 175 | const foo = { 176 | logThis: logThis 177 | } 178 | 179 | logThis() // Is this === window? true 180 | 181 | foo.logThis() // Is this === window? false 182 | ``` 183 | 184 | Cuando ejecutamos `logThis()` directamente `this` sigue haciendo referencia a `window`. Al llamar `logThis()` como 185 | método de un objeto el valor de `this` cambia, ahora hace referencia al objeto que lo contiene, en este caso el 186 | objeto `foo`. 187 | 188 | De esta manera los métodos pueden modificar o agregar nuevas propiedades a los objetos. Podemos reescribir el ejemplo 189 | anterior para usar la propiedad `birthYear` del objeto en lugar de pasarlo al método `calculateAge`. 190 | 191 | ```javascript 192 | const john = { 193 | firstName: 'John', 194 | lastName: 'Doe', 195 | birthYear: 1990, 196 | calculateAge: function() { 197 | const today = new Date() 198 | const year = today.getFullYear() 199 | this.age = year - this.birthYear 200 | } 201 | } 202 | ``` 203 | 204 | Ahora el método `calculateAge` en lugar de retornar la edad la va a guardar en una nueva propiedad llamada `age.` 205 | 206 | ```javascript 207 | console.log( john ); 208 | /* 209 | Valor actual 210 | { 211 | firstName: "John", 212 | lastName: "Doe", 213 | birthYear: 1990, 214 | calculateAge: ƒ 215 | } 216 | */ 217 | 218 | john.calculateAge(); 219 | 220 | console.log( john ); 221 | /* 222 | Después de llamar el método calculateAge() 223 | { 224 | firstName: "John", 225 | lastName: "Doe", 226 | birthYear: 1990, 227 | age: 31, 228 | calculateAge: ƒ 229 | } 230 | */ 231 | ``` 232 | 233 | #### [Ejemplo 3: Arrow function y this](./Ejemplo-03) 234 | 235 | #### [Reto 1: Extraer una lista de propiedades](./Reto-01) 236 | 237 | #### [Reto 2: Crear un número de teléfono](./Reto-02) 238 | 239 | #### [Reto 3: Encontrar elementos faltantes](./Reto-03) 240 | -------------------------------------------------------------------------------- /Sesion-05/Reto-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 05`](../Readme.md) > `Reto 01` 2 | 3 | --- 4 | 5 | ## Reto 1: Extraer una lista de propiedades 6 | 7 | ### Objetivos 8 | 9 | Implementar adecuadamente los conceptos vistos hasta el momento de funciones y ciclos para solucionar un problema. 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | Completar la función `pluck` que extrae una lista de propiedades de un arreglo de objetos. 18 | 19 | ```javascript 20 | var singers = [ 21 | { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 }, 22 | { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }, 23 | { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 }, 24 | { name: 'Chris Cornell', band: 'Soundgarden', born: 1964 }, 25 | ]; 26 | 27 | function pluck(list, propertyName) { 28 | // Code goes here... 29 | } 30 | 31 | console.log( pluck(singers, 'name') ); 32 | // ["Steven Tyler", "Karen Carpenter", "Kurt Cobain", "Chris Cornell"] 33 | 34 | console.log( pluck(singers, 'band') ); 35 | // ["Aerosmith", "The Carpenters", "Nirvana", "Soundgarden"] 36 | 37 | console.log( pluck(singers, 'born') ); 38 | // [1948, 1950, 1967, 1964] 39 | ``` 40 | -------------------------------------------------------------------------------- /Sesion-05/Reto-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 05`](../Readme.md) > `Reto 02` 2 | 3 | --- 4 | 5 | ## Reto 2: Crear un número de teléfono 6 | 7 | ### Objetivos 8 | 9 | Implementar ciclos o funciones de alto orden para producir un string con formato especificado 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | Escribir una función que reciba un arreglo de 10 enteros entre 0 - 9, y retorne un string en forma de número telefónico. 18 | 19 | ```javascript 20 | createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]); // "(123) 456-7890" 21 | ``` 22 | 23 | La función debe retornar el mismo formato, incluyendo el espacio después del paréntesis. 24 | -------------------------------------------------------------------------------- /Sesion-05/Reto-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 05`](../Readme.md) > `Reto 03` 2 | 3 | --- 4 | 5 | ## Reto 3: Encontrar elementos faltantes 6 | 7 | ### Objetivos 8 | 9 | Implementar ciclos o funciones de alto orden para producir un arreglo con los elementos faltantes de otro 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | Escribir una función que reciba un arreglo de _n_ cantidad de enteros positivos que pueden no estar ordenados. La 18 | función debe retornar un nuevo arreglo con los elementos faltantes del primer arreglo. 19 | 20 | ```javascript 21 | findMissingNumbers([2, 1, 9, 5, 7, 3, 10]); // [4, 6, 8] 22 | ``` 23 | -------------------------------------------------------------------------------- /Sesion-05/Soluciones/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 05`](../Readme.md) > `Soluciones` 2 | 3 | --- 4 | 5 | ## Reto 1: Extraer una lista de propiedades 6 | 7 | ```javascript 8 | function pluck(list, propertyName) { 9 | const values = []; 10 | 11 | for (let i = 0; i < list.length; i++) { 12 | values.push( list[i][propertyName] ); 13 | } 14 | 15 | return values; 16 | } 17 | ``` 18 | 19 | --- 20 | 21 | ## Reto 2: Crear un número de teléfono 22 | 23 | ```javascript 24 | function createPhoneNumber(numbers) { 25 | let format = '(xxx) xxx-xxxx' 26 | for (let num of numbers) { 27 | format = format.replace('x', num) 28 | } 29 | return format 30 | } 31 | ``` 32 | 33 | --- 34 | 35 | ## Reto 3: Encontrar elementos faltantes 36 | 37 | ```javascript 38 | function findMissingNumbers(numbers) { 39 | const sortedArray = numbers.sort((a, b) => a - b) 40 | let missing = [] 41 | for (let i = numbers[0]; i < numbers[sortedArray.length - 1]; i++) { 42 | if (sortedArray.indexOf(i) < 0) { 43 | missing.push(i); 44 | } 45 | } 46 | return missing 47 | } 48 | ``` 49 | -------------------------------------------------------------------------------- /Sesion-05/assets/execution-context.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-05/assets/execution-context.png -------------------------------------------------------------------------------- /Sesion-05/assets/this-browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-05/assets/this-browser.png -------------------------------------------------------------------------------- /Sesion-05/assets/this-node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-05/assets/this-node.png -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 06`](../Readme.md) > `Ejemplo 01` 2 | 3 | --- 4 | 5 | ## Ejemplo 1: Function constructor 6 | 7 | ### Objetivo 8 | 9 | Crear constructores para instanciar objetos. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | Ejemplo 1: Function Constructor 20 | 21 | 22 | 23 | ``` 24 | 25 | Dentro de la misma carpeta creamos un archivo `ejemplo-1.js` que es donde se trabajarán los ejemplos de esta 26 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 27 | 28 | #### Desarrollo 29 | 30 | Ya mencionamos que podemos usar un constructor para crear múltiples objetos como: 31 | 32 | ```javascript 33 | const john = { 34 | name: 'John', 35 | birthYear: 1990, 36 | job: 'Developer' 37 | } 38 | ``` 39 | 40 | La forma más común de hacer esto es mediante un `function constructor`, el cual es una expresión de función como la 41 | siguiente: 42 | 43 | ```javascript 44 | const Person = function(name, birthYear, job) { 45 | this.name = name; 46 | this.birthYear = birthYear; 47 | this.job = job; 48 | } 49 | ``` 50 | 51 | > Cuando estamos creando constructores una convención es nombrarlas con la primera letra mayúscula para diferenciar el 52 | > constructor de las instancias. 53 | 54 | Vemos que este constructor recibe tres argumentos los cuales son las propiedades que queremos que tenga nuestro objeto. 55 | 56 | ```javascript 57 | const john = new Person('John', 1990, 'Developer'); 58 | ``` 59 | 60 | El operador `new` crea un nuevo objeto vacío, después se ejecuta la función `Person()`, esta es la razón por la que el 61 | constructor utiliza `this`, está haciendo referencia al nuevo objeto vacío para asignarle las propiedades. 62 | 63 | ```javascript 64 | console.log( john ); 65 | /* 66 | * { 67 | * name: 'John', 68 | * birthYear: 1990, 69 | * job: 'Developer' 70 | * } 71 | */ 72 | ``` 73 | 74 | Hemos creado un objeto `john` el cuál es una instancia del constructor `Person`. 75 | 76 | ![Function Constructor](./assets/function-constructor.png) 77 | 78 | De esta manera podemos crear todas las instancias que sean necesarias a partir del mismo constructor. 79 | 80 | ```javascript 81 | const mark = new Person('Mark', 1985, 'Teacher'); 82 | 83 | const jane = new Person('Jane', 1975, 'Designer'); 84 | ``` 85 | 86 | ![Instances](./assets/instances.png) 87 | -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-01/assets/function-constructor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-06/Ejemplo-01/assets/function-constructor.png -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-01/assets/instances.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-06/Ejemplo-01/assets/instances.png -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 06`](../Readme.md) > `Ejemplo 01` 2 | 3 | --- 4 | 5 | ## Ejemplo 2: Heredando propiedades 6 | 7 | ### Objetivo 8 | 9 | Crear constructores para instanciar objetos y heredar propiedades entre constructores. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | Ejemplo 2: Heredando propiedades 20 | 21 | 22 | 23 | ``` 24 | 25 | Dentro de la misma carpeta creamos un archivo `ejemplo-2.js` que es donde se trabajarán los ejemplos de esta 26 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 27 | 28 | #### Desarrollo 29 | 30 | Ya vimos cómo podemos instanciar objetos a partir del mismo constructor. 31 | 32 | ```javascript 33 | const Person = function(name) { 34 | this.name = name; 35 | } 36 | 37 | const john = new Person('John'); 38 | ``` 39 | 40 | En ocasiones necesitamos que un constructor tenga las propiedades de otro. 41 | 42 | ```javascript 43 | const Developer = function(skills, yearsOfExperience) { 44 | this.skills = skills; 45 | this.yearsOfExperience = yearsOfExperience; 46 | } 47 | ``` 48 | 49 | Con este constructor `Developer` podemos instanciar múltiples objetos que tendrán las propiedades `skils` 50 | y `yearsOfExperience`. Pero también necesitamos la propiedad `name` del constructor `Person`, pues un desarrollador 51 | también es una persona que tiene nombre. Para esto usamos el método `call()` el cual ejecuta el constructor padre. 52 | 53 | ```javascript 54 | const Person = function(name) { 55 | this.name = name; 56 | } 57 | 58 | const Developer = function(name, skills, yearsOfExperience) { 59 | Person.call(this, name); 60 | 61 | this.skills = skills; 62 | this.yearsOfExperience = yearsOfExperience; 63 | } 64 | ``` 65 | 66 | Decimos que el constructor `Developer` es hijo del constructor `Person` porque queremos que `Developer` herede la 67 | propiedad `name` de `Person`. 68 | 69 | `Person.call(this, name);` llama al constructor padre y retorna un objeto con todas sus propiedades. `this` en este 70 | contexto está haciendo referencia a `Developer`. 71 | 72 | ```javascript 73 | const Person = function(name) { 74 | this.name = name; 75 | } 76 | 77 | const Developer = function(name, skills, yearsOfExperience) { 78 | Person.call(this, name); 79 | 80 | this.skills = skills; 81 | this.yearsOfExperience = yearsOfExperience; 82 | } 83 | 84 | const john = new Developer('John', 'JavaScript', 10); 85 | 86 | console.log( john ); 87 | ``` 88 | 89 | De esta forma creamos un objeto `john` que es una instancia de `Developer`. Es importante tomar en cuenta que `john` no es una instancia de `Person` aunque tenga sus mismas propiedades, estas sólo fueron prestadas o heredadas durante la creación del objeto. 90 | 91 | ![Inheritance](./assets/inheritance.png) 92 | -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-02/assets/inheritance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-06/Ejemplo-02/assets/inheritance.png -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 06`](../Readme.md) > `Ejemplo 01` 2 | 3 | --- 4 | 5 | ## Ejemplo 3: Heredando métodos 6 | 7 | ### Objetivo 8 | 9 | Crear constructores para instanciar objetos y heredar métodos. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | Ejemplo 3: Heredando métodos 20 | 21 | 22 | 23 | ``` 24 | 25 | Dentro de la misma carpeta creamos un archivo `ejemplo-3.js` que es donde se trabajarán los ejemplos de esta 26 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 27 | 28 | #### Desarrollo 29 | 30 | En el [Ejemplo 1](../Ejemplo-01) creamos el siguiente constructor: 31 | 32 | ```javascript 33 | const Person = function(name, birthYear, job) { 34 | this.name = name; 35 | this.birthYear = birthYear; 36 | this.job = job; 37 | } 38 | ``` 39 | 40 | Vamos a agregar un método `calculateAge()` similar al que hicimos la sesión anterior, pero no lo vamos a poner en el 41 | constructor, en su lugar lo vamos a crear dentro del prototype. 42 | 43 | ```javascript 44 | Person.prototype.calculateAge = function() { 45 | const today = new Date(); 46 | const year = today.getFullYear(); 47 | 48 | console.log( year - this.birthYear ); 49 | } 50 | ``` 51 | 52 | Ahora vamos a crear múltiples instancias de `Person`. 53 | 54 | ```javascript 55 | const john = new Person('John', 1990, 'Developer'); 56 | 57 | const mark = new Person('Mark', 1985, 'Teacher'); 58 | 59 | const jane = new Person('Jane', 1975, 'Designer'); 60 | ``` 61 | 62 | Si inspeccionamos en consola estos tres objetos nos damos cuenta de que ninguno de ellos tiene el método `calculateAge()`. 63 | 64 | ![Prototype](./assets/prototype.png) 65 | 66 | Aun así podemos llamar `calculateAge()` en los tres objetos. 67 | 68 | ```javascript 69 | john.calculateAge(); 70 | 71 | mark.calculateAge(); 72 | 73 | jane.calculateAge(); 74 | ``` 75 | 76 | ![Prototype](./assets/prototype-2.png) 77 | 78 | Si inspeccionamos más a detalle estos objetos podemos encontrar el método `calculateAge()` dentro de `__proto__` que es 79 | el prototype del objeto. Incluso nos muestra cuál es el contructor del que fue instanciado. De hecho, podemos 80 | inspeccionar todo el prototype chain. 81 | 82 | ![Prototype](./assets/prototype-3.png) 83 | -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-03/assets/prototype-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-06/Ejemplo-03/assets/prototype-2.png -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-03/assets/prototype-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-06/Ejemplo-03/assets/prototype-3.png -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-03/assets/prototype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-06/Ejemplo-03/assets/prototype.png -------------------------------------------------------------------------------- /Sesion-06/Reto-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 06`](../Readme.md) > `Reto 01` 2 | 3 | --- 4 | 5 | ## Reto 1: Vectores 6 | 7 | ### Objetivos 8 | 9 | Crear un constructor, agregar métodos al prototype e instanciar múltiples objetos a partir de dicho constructor. 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | Crear un function constructor `Vec` el cual representa un vector en dos dimensiones. Recibe dos parámetros `x` y `y`, 18 | ambos valores numéricos que deben ser las propiedades del objeto. 19 | 20 | Agregar los siguientes métodos al `prototype` de `Vec`: 21 | 22 | 1. `plus`: Recibe otro vector como parámetro y retorna un nuevo vector con la suma de ambos vectores. 23 | 24 | 2. `minus`: Recibe otro vector como parámetro y retorna un nuevo vector con la diferencia de ambos vectores. 25 | 26 | 3. `length`: Retorna la longitud del vector, es decir, la distancia del punto _(x, y)_ desde el origen _(0, 0)_. 27 | 28 | ```javascript 29 | const Vec = function(x, y) { 30 | // Code goes here... 31 | } 32 | 33 | const vec1 = new Vec(1, 2); 34 | const vec2 = new Vec(2, 3); 35 | 36 | console.log(vec1.plus(vec2)); // Vec { x: 3, y: 5 } 37 | console.log(vec1.minus(vec2)); // Vec { x: -1, y: -1 } 38 | console.log(vec1.length()); // 2.23606797749979 39 | ``` 40 | 41 | > Para calcular la distancia desde (0, 0) hasta (x, y) se puede usar el teorema de Pitágoras: √(x2 + y2). 42 | > En JavaScript existe el método `Math.sqrt` para calcular raíces cuadradas. 43 | -------------------------------------------------------------------------------- /Sesion-06/Reto-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 06`](../Readme.md) > `Reto 02` 2 | 3 | --- 4 | 5 | ## Reto 2: Group 6 | 7 | ### Objetivos 8 | 9 | Crear un constructor, agregar métodos al prototype e instanciar múltiples objetos a partir de dicho constructor. 10 | 11 | #### Requisitos 12 | 13 | Haber terminado el [Reto 1](../Reto-01/Readme.md). 14 | 15 | #### Desarrollo 16 | 17 | Crear un function constructor `Group` el cual crea una lista (arreglo) vacía. 18 | 19 | Agregar los siguientes métodos a `Group`: 20 | 21 | 1. `add`: Agrega un nuevo valor al grupo solo si no existe. 22 | 23 | 2. `has`: Retorna un booleano indicando si el valor es un miembro del grupo. 24 | 25 | 3. `from`: Método estático que recibe un arreglo y crea un grupo con todos los elementos de dicho arreglo. 26 | 27 | ```javascript 28 | const Group = function() { 29 | // Code goes here... 30 | } 31 | 32 | const group = Group.from([1, 2, 3, 4, 5]); 33 | console.log(group); // Group { members: [ 1, 2, 3, 4, 5 ] } 34 | console.log(group.has(5)); // true 35 | console.log(group.has(10)); // false 36 | 37 | group.add(10); 38 | console.log(group.has(10)); // true 39 | ``` 40 | 41 | > Los métodos estáticos son llamados sin instanciar su clase. Cuando se usan function constructors se pueden definir 42 | > como método de la instancia sin necesidad de colocarlo en el prototype. 43 | -------------------------------------------------------------------------------- /Sesion-06/Reto-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 06`](../Readme.md) > `Reto 03` 2 | 3 | --- 4 | 5 | ## Reto 3: Perímetro 6 | 7 | ### Objetivos 8 | 9 | Crear un constructor, agregar métodos al prototype e instanciar múltiples objetos a partir de dicho constructor. 10 | 11 | #### Requisitos 12 | 13 | Haber terminado el [Reto 2](../Reto-02/Readme.md). 14 | 15 | #### Desarrollo 16 | 17 | Crear un function constructor `Triangle` con tres parámetros `a`, `b` y `c`. Cada uno representa un lado del triángulo. 18 | 19 | Agregar el método `getPerimeter` al `prototype` de `Triangle`, el cual retorna el perímetro del triángulo. 20 | 21 | ```javascript 22 | const Triangle = function(a, b, c) { 23 | // Code goes here... 24 | } 25 | 26 | const triangle = new Triangle(1, 2, 3); 27 | 28 | console.log(triangle); // Triangle { a: 1, b: 2, c: 3 } 29 | console.log(triangle.getPerimeter()); // 6 30 | ``` 31 | -------------------------------------------------------------------------------- /Sesion-06/Soluciones/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 06`](../Readme.md) > `Soluciones` 2 | 3 | --- 4 | 5 | ## Reto 1: Vectores 6 | 7 | ```javascript 8 | const Vec = function(x, y) { 9 | this.x = x; 10 | this.y = y; 11 | } 12 | 13 | Vec.prototype.plus = function(other) { 14 | return new Vec(this.x + other.x, this.y + other.y); 15 | } 16 | 17 | Vec.prototype.minus = function(other) { 18 | return new Vec(this.x - other.x, this.y - other.y); 19 | } 20 | 21 | Vec.prototype.length = function() { 22 | return Math.sqrt(this.x * this.x + this.y * this.y); 23 | } 24 | ``` 25 | 26 | --- 27 | 28 | ## Reto 2: Group 29 | 30 | ```javascript 31 | const Group = function() { 32 | this.members = []; 33 | } 34 | 35 | Group.prototype.add = function(value) { 36 | if (!this.has(value)) { 37 | this.members.push(value); 38 | } 39 | } 40 | 41 | Group.prototype.has = function(value) { 42 | return this.members.includes(value); 43 | } 44 | 45 | Group.from = function(collection) { 46 | const group = new Group(); 47 | 48 | for(let i = 0; i < collection.length; i++) { 49 | group.add(collection[i]); 50 | } 51 | return group; 52 | } 53 | ``` 54 | 55 | --- 56 | 57 | ## Reto 3: Perímetro 58 | 59 | ```javascript 60 | const Triangle = function(a, b, c) { 61 | this.a = a; 62 | this.b = b; 63 | this.c = c; 64 | } 65 | 66 | Triangle.prototype.getPerimeter = function() { 67 | return this.a + this.b + this.c; 68 | } 69 | ``` 70 | -------------------------------------------------------------------------------- /Sesion-06/assets/constructor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-06/assets/constructor.png -------------------------------------------------------------------------------- /Sesion-06/assets/inheritance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-06/assets/inheritance.png -------------------------------------------------------------------------------- /Sesion-06/assets/instances.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-06/assets/instances.png -------------------------------------------------------------------------------- /Sesion-06/assets/prototype-chain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-06/assets/prototype-chain.png -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 07`](../Readme.md) > `Ejemplo 01` 2 | 3 | --- 4 | 5 | ## Ejemplo 1: Mutando objetos 6 | 7 | ### Objetivo 8 | 9 | Crear una función que inmutable. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | Ejemplo 1: Mutando Objetos 19 | 20 | 21 | 22 | ``` 23 | 24 | Dentro de la misma carpeta creamos un archivo `ejemplo-1.js` que es donde se trabajarán los ejemplos de esta 25 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 26 | 27 | #### Desarrollo 28 | 29 | Para ver cómo funciona la inmutabilidad vamos a empezar creando un objeto que represente un carro. 30 | 31 | ```javascript 32 | const car = { 33 | brand: 'Nissan', 34 | model: 'Sentra', 35 | year: 2020 36 | } 37 | ``` 38 | 39 | Ahora vamos a crear una función que agregue la propiedad color al auto. 40 | 41 | ```javascript 42 | function addColor(car) { 43 | car.color = 'Black'; 44 | return car; 45 | } 46 | ``` 47 | 48 | Ahora llamamos a la función pasándole el objeto `car` y guardamos en resultado en otra variable. 49 | 50 | ```javascript 51 | console.log('Before calling addColor()', car); 52 | 53 | const sameCar = addColor(car); 54 | 55 | console.log('After calling addColor()', car); 56 | console.log('After calling addColor()', sameCar); 57 | 58 | console.log('Same car?', car === sameCar); // true 59 | ``` 60 | 61 | La función `addColor` muta el objeto `car` que recibe. La primera vez que mostramos en consola vemos que no existe la 62 | propiedad `color`, después de llamar a la función vemos la propiedad en ambos objetos. 63 | 64 | El objeto retornado por `addColor` es el mismo que recibió. Ambas variables, tanto `car` como `sameCar` están apuntando 65 | al mismo objeto en memoria. 66 | 67 | ![Mutable](./assets/mutable.png) 68 | 69 | Tenemos que hacer unos cambios para que `addColor` no mute el objeto que recibe. 70 | 71 | ```javascript 72 | function addColor(car) { 73 | const newCar = Object.assign({}, car, { 74 | color: 'Black' 75 | }); 76 | return newCar; 77 | } 78 | ``` 79 | 80 | `Object.assign()` asigna las propiedades de un objeto a otro sin modificar el objeto original. En este ejemplo está 81 | copiando todas las propiedades de `car` en un nuevo objeto vacío `{}` y agregando la propiedad `color`. 82 | 83 | ```javascript 84 | console.log('Before calling addColor()', car); 85 | 86 | const newCar = addColor(car); 87 | 88 | console.log('After calling addColor()', car); 89 | console.log('After calling addColor()', newCar); 90 | 91 | console.log('Same car?', car === newCar); // false 92 | ``` 93 | 94 | Como ahora la función `addColor` está creando un nuevo objeto vemos que `car` no cambia sus propiedades y el objeto 95 | retornado es diferente al que recibe la función. 96 | 97 | ![Immutable](./assets/immutable.png) 98 | -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-01/assets/immutable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-07/Ejemplo-01/assets/immutable.png -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-01/assets/mutable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-07/Ejemplo-01/assets/mutable.png -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 07`](../Readme.md) > `Ejemplo 02` 2 | 3 | --- 4 | 5 | ## Ejemplo 2: Creando funciones puras 6 | 7 | ### Objetivo 8 | 9 | Crear funciones puras. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | Ejemplo 2: Creando funciones puras 19 | 20 | 21 | 22 | ``` 23 | 24 | Dentro de la misma carpeta creamos un archivo `ejemplo-2.js` que es donde se trabajarán los ejemplos de esta 25 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 26 | 27 | #### Desarrollo 28 | 29 | En el ejemplo anterior buscamos la forma de hacer una función que no mutara el objeto que recibe. 30 | 31 | ```javascript 32 | function addColor(car) { 33 | const newCar = Object.assign({}, car, { 34 | color: 'Black' 35 | }); 36 | 37 | return newCar; 38 | } 39 | ``` 40 | 41 | Tratando de no mutar `car` terminamos creando una función pura, como podrás ver no produce ningún efecto secundario. Es 42 | por ello que la inmutabilidad está muy ligada a las funciones puras. 43 | 44 | Veamos otro ejemplo. Tenemos un carrito de compras y queremos crear una función que agregue más artículos. 45 | 46 | ```javascript 47 | const cart = [ 48 | { 49 | item: 'Laptop', 50 | quantity: 1 51 | } 52 | ] 53 | ``` 54 | 55 | Como el carrito va a almacenar múltiples elementos usaremos un arreglo. Cada artículo será representado por un objeto 56 | con dos propiedades `item` y `quantity`. 57 | 58 | ```javascript 59 | function addItemToCart(item, quantity) { 60 | cart.push({ 61 | item: item, 62 | quantity: quantity 63 | }) 64 | } 65 | ``` 66 | 67 | La solución más obvia sería usar `push()` para agregar un nuevo objeto con las propiedades `item` y `quantity`. Esta 68 | función no es pura porque está modificando `cart`, una variable que no se encuentra dentro de esta función. Quizás en 69 | este ejemplo no es un problema, pero si estuviéramos haciendo una tienda en línea, es posible que otras partes de la 70 | aplicación intenten acceder a `cart` al mismo tiempo que estamos ejecutando la función `addItemToCart` y eso sí podría 71 | representar un problema como falta de inconsistencia en los datos. 72 | 73 | ```javascript 74 | function addItemToCart(cart, item, quantity) { 75 | const newCart = cart.map(function(element) { 76 | return element; 77 | }); 78 | 79 | newCart.push({ 80 | item: item, 81 | quantity: quantity 82 | }) 83 | 84 | return newCart; 85 | } 86 | ``` 87 | 88 | > Como `map()` crea un nuevo arreglo lo podemos usar para crear una copia retornando el parámetro que recibe sin 89 | > modificarlo. 90 | 91 | Una alternativa sería pasar `cart` como argumento a la función. Hacer una copia de todo el arreglo para no mutar el 92 | original, agregar el nuevo objeto y retornar el arreglo actualizado. 93 | 94 | ```javascript 95 | cart = addItemToCart(cart, 'Phone', 1); 96 | 97 | console.log(cart); 98 | ``` 99 | 100 | Esta sería una forma más funcional, recuerda que en este paradigma se da prioridad a la inmutabilidad, lo que significa 101 | crear nuevas variables que van a reemplazar a los valores antiguos. 102 | 103 | ![Pure Function](./assets/pure-function.png) 104 | -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-02/assets/pure-function.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-07/Ejemplo-02/assets/pure-function.png -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 07`](../Readme.md) > `Ejemplo 03` 2 | 3 | --- 4 | 5 | ## Ejemplo 3: Suma de dígitos 6 | 7 | ### Objetivo 8 | 9 | Implementar múltiples funciones de alto orden para resolver un problema 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | Ejemplo 3: Suma de dígitos 19 | 20 | 21 | 22 | ``` 23 | 24 | Dentro de la misma carpeta creamos un archivo `ejemplo-3.js` que es donde se trabajarán los ejemplos de esta 25 | sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 26 | 27 | #### Desarrollo 28 | 29 | Sumar todos los dígitos de un número entero: 30 | 31 | ``` 32 | Input: 12345 33 | 34 | -- 1 + 2 + 3 + 4 + 5 = 15 35 | 36 | Output: 15 37 | ``` 38 | 39 | Este ejercicio puede ser resuelto mediante operadores matemáticos, pero en este ejemplo veremos otra forma implementando 40 | múltiples funciones. Lo primero que haremos es crear un arreglo y cada dígito del número será un elemento del arreglo. 41 | De esta forma será más fácil trabajar con funciones de alto orden como `filter` y `reduce`. 42 | 43 | ```javascript 44 | const num = 12345; 45 | 46 | const str = num.toString(); 47 | 48 | const array = str.split(''); 49 | 50 | console.log(num); // 12345 51 | console.log(str); // '12345' 52 | console.log(array); // ['1', '2', '3', '4', '5'] 53 | ``` 54 | 55 | Con el método `toString()` podemos convertir un número entero a un string. El método `split()` nos permite dividir un 56 | string en una serie de substrings y colocarlos dentro de un arreglo. En JavaScript podemos encadenar funciones, lo que 57 | retorne la primera función será pasada como argumento a la siguiente función, de esta manera podemos simplificar nuestro 58 | código. 59 | 60 | ```javascript 61 | const num = 12345; 62 | 63 | const array = num.toString().split(''); 64 | 65 | console.log(num); // 12345 66 | console.log(array); // ['1', '2', '3', '4', '5'] 67 | ``` 68 | 69 | Antes de poder realizar operaciones matemáticas con este arreglo debemos convertir cada elemento a un entero nuevamente. 70 | En la sesión uno vimos cómo usar la función `Number()` para convertir un string a un number. Para aplicar esta función a 71 | cada elemento del arreglo usaremos la función `map()`. 72 | 73 | ```javascript 74 | const arrayOfNumbers = array.map(function(num) { 75 | return Number(num); 76 | }) 77 | 78 | console.log(arrayOfNumbers); // [1, 2, 3, 4, 5] 79 | ``` 80 | 81 | Cuando usemos una función como `map()` y queremos que retorne el resultado de otra función con el mismo argumento 82 | podemos simplificarlo de la siguiente manera: 83 | 84 | ```javascript 85 | const arrayOfNumbers = array.map(Number); 86 | 87 | console.log(arrayOfNumbers); // [1, 2, 3, 4, 5] 88 | ``` 89 | 90 | Por último debemos sumar todos los elementos de este arreglo. Ya vimos cómo podemos usar `reduce` para reducir a un 91 | único valor todos los elementos de un arreglo. 92 | 93 | ```javascript 94 | const sum = arrayOfNumbers.reduce(function(a, b) { 95 | return a + b; 96 | }, 0); 97 | 98 | console.log(sum); // 15 99 | ``` 100 | 101 | Todas estas funciones pueden ser encadenadas de la misma forma que hicimos con las primeras dos. El producto final 102 | dentro de una función sería: 103 | 104 | ```javascript 105 | function sumDigits(number) { 106 | return number 107 | .toString() 108 | .split('') 109 | .map(Number) 110 | .reduce(function(a, b) { 111 | return a + b; 112 | }, 0) 113 | } 114 | 115 | console.log(sumDigits(12345)); // 15 116 | ``` 117 | 118 | ![Sum Digits](./assets/sum-digits.png) 119 | -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-03/assets/sum-digits.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-07/Ejemplo-03/assets/sum-digits.png -------------------------------------------------------------------------------- /Sesion-07/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../Readme.md) > `Sesión 07` 2 | 3 | # Sesión 7: Programación funcional 4 | 5 | ## Objetivos 6 | 7 | Implementar los principios de inmutabilidad para crear funciones puras 8 | 9 | --- 10 | 11 | ## Tabla de Contenidos 12 | 13 | - **[Programación funcional](#programación-funcional)** 14 | 15 | - **[Inmutabilidad](#inmutabilidad)** 16 | 17 | - [Ejemplo 1: Mutando objetos](./Ejemplo-01) 18 | 19 | - **[Funciones puras](#funciones-puras)** 20 | 21 | - [Ejemplo 2: Creando funciones puras](./Ejemplo-02) 22 | 23 | - **[Funciones de primera clase](#funciones-de-primera-clase)** 24 | 25 | - **[Funciones de alto orden](#funciones-de-alto-orden)** 26 | 27 | - [Ejemplo 3: Sumando Dígitos](./Ejemplo-03) 28 | 29 | - [Reto 1: Flatten](./Reto-01) 30 | 31 | - [Reto 2: Compact](./Reto-02) 32 | 33 | - [Reto 3: Loop](./Reto-03) 34 | 35 | --- 36 | 37 | ## Programación funcional 38 | 39 | Como vimos en la sesión anterior existen distintos paradigmas de programación. La programación funcional es un paradigma 40 | declarativo, es decir, se enfoca en el _qué_ se desea lograr sin preocuparse mucho en el _cómo_ (el lenguaje de 41 | programación se encarga de esta parte). 42 | 43 | ```javascript 44 | const numbers = [1, 2, 3, 4, 5]; 45 | const doubles = []; 46 | 47 | for(var i = 0; i < numbers.length; i++) { 48 | doubles.push(numbers[i] * 2); 49 | } 50 | 51 | console.log(numbers); // [1, 2, 3, 4, 5] 52 | console.log(doubles); // [2, 4, 6, 8, 10] 53 | ``` 54 | 55 | Este es un ejemplo de código imperativo. Generalmente usar ciclos es programación imperativa pues queda del lado del 56 | programador controlar cuándo iniciar, cuándo terminar y qué hacer en cada ciclo. 57 | 58 | ```javascript 59 | const numbers = [1, 2, 3, 4, 5]; 60 | const doubles = numbers.map(function(number) { 61 | return number * 2; 62 | }); 63 | 64 | console.log(numbers); // [1, 2, 3, 4, 5] 65 | console.log(doubles); // [2, 4, 6, 8, 10] 66 | ``` 67 | 68 | Esta es la forma declarativa del mismo código. Ambos fragmentos de código hacen exactamente lo mismo, crear un 69 | arreglo `doubles` con el doble de cada elemento del arreglo `numbers`. La diferencia con el segundo ejemplo es que 70 | hacemos uso del método `map()`, el programador no se encarga de controlar cuándo y dónde terminar el ciclo, solo se 71 | encarga del resultado, obtener el doble de cada elemento dentro de `numbers`. 72 | 73 | > El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de 74 | > sus elementos. 75 | 76 | --- 77 | 78 | ## Inmutabilidad 79 | 80 | Decimos que algo es mutable cuando puede ser cambiado o modificado. Por lo tanto, inmutable es algo que no puede ser 81 | alterado. En términos de programación, las variables inmutables nunca cambian su valor. Este es un principio muy 82 | importante en la programación funcional, de hecho, lenguajes de programación como Elixir o Erlang no permiten la 83 | mutación de variables. 84 | 85 | En lugar de alterar una variable, creamos nuevos valores y reemplazamos los antiguos. Si bien JavaScript no es puramente 86 | funcional, es lo suficientemente flexible como para permitir o pretender serlo. 87 | 88 | Para llevar este concepto a la práctica es importante siempre preferir crear una nueva variable en lugar de intentar 89 | modificar la original. Esto se puede llevar a cabo con métodos como `map()` que no altera el arreglo original, o bien 90 | creando tus propias funciones inmutables. 91 | 92 | #### [Ejemplo 1: Mutando objetos](./Ejemplo-01) 93 | 94 | --- 95 | 96 | ## Funciones puras 97 | 98 | Para que una función pueda ser considerada pura debe cumplir dos reglas: 99 | 100 | 1. El valor retornado siempre es el mismo cuando se da el mismo valor de entrada. 101 | 102 | 2. No debe producir side effects (efectos secundarios). 103 | 104 | ![Pure Function](./assets/pure-function.png) 105 | 106 | El primer punto se refiere a que si ejecutamos la misma función varias veces con los mismos argumentos siempre 107 | obtendremos el mismo resultado. 108 | 109 | ```javascript 110 | function add(a, b) { 111 | return a + b; 112 | } 113 | ``` 114 | 115 | Podemos llamar las veces que queramos la esta función de la forma `add(1, 2)` y sabemos que siempre vamos a obtener el 116 | mismo resultado `3`. 117 | 118 | ```javascript 119 | function randomNumber() { 120 | return Math.floor(Math.random() * 10); 121 | } 122 | ``` 123 | 124 | Esta función no cumple la primera regla porque si la llamamos 10 veces, obtendremos cada vez un número aleatorio entre 1 125 | y 10. No podemos predecir el valor de retorno de esta función. 126 | 127 | Los side effects son un término más amplio que el anterior. A grandes rasgos significa modificar algo fuera de la 128 | función. Algunos ejemplos: 129 | 130 | 1. Mutar los parámetros que recibe una función como en el [Ejemplo 1](./Ejemplo-01). 131 | 132 | 2. Modificar cualquier variable fuera de la función. 133 | 134 | 3. Llamadas a una API. 135 | 136 | 4. `console.log()` 137 | 138 | La función anterior `add()` también cumple con la segunda regla, no produce side effects. Solamente está trabajando con 139 | las variables que recibe la función y siempre retorna un valor. 140 | 141 | #### [Ejemplo 2: Creando funciones puras](./Ejemplo-02) 142 | 143 | --- 144 | 145 | ## Funciones de primera clase 146 | 147 | En un lenguaje de programación se dice que una función es de primera clase cuando puede ser tratada como cualquier otra 148 | variable. Por ejemplo, cuando puede ser pasada como argumento a otras funciones o cuando puede ser asignada a una 149 | variable. Este comportamiento no es exclusivo de JavaScript, otros lenguajes de programación como R o Scala también 150 | cuentan con esta característica. 151 | 152 | Ya hemos guardado funciones anónimas en una variable anteriormente. 153 | 154 | ```javascript 155 | var square = function(number) { 156 | return number * number; 157 | } 158 | 159 | var squareOfFour = square(4); 160 | 161 | console.log(squareOfFour); // 16 162 | ``` 163 | 164 | Por lo tanto, las expresiones de funciones como estas son consideradas funciones de primera clase. 165 | 166 | --- 167 | 168 | ## Funciones de alto orden 169 | 170 | Cuando una función recibe otra función como parámetro se le llama de alto orden o de orden superior. JavaScript nos 171 | proporciona varias funciones de alto orden para trabajar con estructuras de datos. Las más usadas son `map()`, 172 | `filter()` y `reduce()`. 173 | 174 | Al principio de la sesión vimos cómo funciona `map()`, aplica una función sobre cada elemento del arreglo. Es importante 175 | destacar que no muta el arreglo original. 176 | 177 | ```javascript 178 | const numbers = [1, 2, 3, 4, 5]; 179 | const doubles = numbers.map(function(number) { 180 | return number * 2; 181 | }); 182 | 183 | console.log(numbers); // [1, 2, 3, 4, 5] 184 | console.log(doubles); // [2, 4, 6, 8, 10] 185 | ``` 186 | 187 | De igual forma `filter()` crea un nuevo arreglo, pero solo con aquellos elementos que retornen `true` por la función 188 | que actúa como predicado. 189 | 190 | ```JavaScript 191 | const numbers = [1, 2, 3, 4, 5]; 192 | 193 | const evenNumbers = numbers.filter(function(number) { 194 | return number % 2 === 0; 195 | }); 196 | 197 | console.log(evenNumbers); // [2, 4] 198 | ``` 199 | 200 | Por último, `reduce()` acumula o reduce todos los elementos a un valor único según la función dada. 201 | 202 | ```JavaScript 203 | const numbers = [1, 2, 3, 4, 5]; 204 | 205 | const sum = numbers.reduce(function(accumulator, currentValue) { 206 | return accumulator + currentValue; 207 | }, 0); // Initial value 208 | 209 | console.log(sum); // 15 210 | ``` 211 | 212 | #### [Ejemplo 3: Sumando Dígitos](./Ejemplo-03) 213 | 214 | #### [Reto 1: Flatten](./Reto-01) 215 | 216 | #### [Reto 2: Compact](./Reto-02) 217 | 218 | #### [Reto 3: Loop](./Reto-03) 219 | -------------------------------------------------------------------------------- /Sesion-07/Reto-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 07`](../Readme.md) > `Reto 01` 2 | 3 | --- 4 | 5 | ## Reto 1: Flatten 6 | 7 | ### Objetivos 8 | 9 | Implementar funciones de alto orden para manipular arreglos. 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | Crear una función `flatten` que recibe un arreglo de arreglos y retorna un nuevo arreglo con todos los elementos del 18 | arreglo original. 19 | 20 | ```javascript 21 | function flatten(arrays) { 22 | // Code goes here... 23 | } 24 | 25 | const arrays = [[1, 2, 3], [4, 5], [6]]; 26 | const array = flatten(arrays); 27 | 28 | console.log(array); // [1, 2, 3, 4, 5, 6] 29 | ``` 30 | -------------------------------------------------------------------------------- /Sesion-07/Reto-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 07`](../Readme.md) > `Reto 02` 2 | 3 | --- 4 | 5 | ## Reto 2: Compact 6 | 7 | ### Objetivos 8 | 9 | Implementar funciones de alto orden para manipular arreglos. 10 | 11 | #### Requisitos 12 | 13 | Haber terminado el [Reto 1](../Reto-01/Readme.md). 14 | 15 | #### Desarrollo 16 | 17 | Crear una función `compact` que recibe un arreglo y retorna un nuevo arreglo sin incluir los valores que sean falsy. 18 | 19 | ```javascript 20 | function compact(array) { 21 | // Code goes here... 22 | } 23 | 24 | const array = [0, 1, false, 2, '', 3]; 25 | const compactedArray = compact(array); 26 | 27 | console.log(compactedArray); // [1, 2, 3] 28 | ``` 29 | -------------------------------------------------------------------------------- /Sesion-07/Reto-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 07`](../Readme.md) > `Reto 03` 2 | 3 | --- 4 | 5 | ## Reto 3: Loop 6 | 7 | ### Objetivos 8 | 9 | Implementar funciones de alto orden para manipular arreglos. 10 | 11 | #### Requisitos 12 | 13 | Haber terminado el [Reto 2](../Reto-02/Readme.md). 14 | 15 | #### Desarrollo 16 | 17 | Crear una función de alto orden `loop` que será similar a un `for`. 18 | 19 | Recibe tres argumentos: `start`, una función `test`, una función `update` y una función `body`. 20 | 21 | - El ciclo empieza en `start` y termina cuando `test` retorne `false`. 22 | - En cada iteración se ejecuta la función `body` dándole como argumento el valor actual de `start` actual. 23 | - Al final de cada ciclo se ejecuta la función `update`. 24 | 25 | ```javascript 26 | function loop(start, test, update, body) { 27 | // Code goes here... 28 | } 29 | 30 | const test = function(n) { 31 | return n > 0; 32 | } 33 | 34 | const update = function(n) { 35 | return n - 1; 36 | } 37 | 38 | loop(3, test, update, console.log); 39 | // 3 40 | // 2 41 | // 1 42 | ``` 43 | -------------------------------------------------------------------------------- /Sesion-07/Soluciones/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 07`](../Readme.md) > `Soluciones` 2 | 3 | --- 4 | 5 | ## Reto 1: Flatten 6 | 7 | ```javascript 8 | function flatten(arrays) { 9 | return arrays.reduce(function(flat, current) { 10 | return flat.concat(current); 11 | }, []); 12 | } 13 | ``` 14 | 15 | --- 16 | 17 | ## Reto 2: Compact 18 | 19 | ```javascript 20 | function compact(array) { 21 | return array.filter(function(element) { 22 | return !!element; 23 | }); 24 | } 25 | ``` 26 | 27 | --- 28 | 29 | ## Reto 3: Loop 30 | 31 | ```javascript 32 | function loop(start, test, update, body) { 33 | for (let value = start; test(value); value = update(value)) { 34 | body(value); 35 | } 36 | } 37 | ``` 38 | -------------------------------------------------------------------------------- /Sesion-07/assets/pure-function.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-07/assets/pure-function.png -------------------------------------------------------------------------------- /Sesion-08/Ejemplo-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 08`](../Readme.md) > `Ejemplo 01` 2 | 3 | --- 4 | 5 | ## Ejemplo 1: Instalación y configuración 6 | 7 | ### Objetivo 8 | 9 | Instalar y configurar webpack 10 | 11 | #### Requisitos 12 | 13 | Para este ejemplo necesitamos contar con la siguiente estructura de carpetas y archivos: 14 | 15 | ``` 16 | demo 17 | |- /src 18 | |- index.html 19 | |- js 20 | |- index.js 21 | ``` 22 | 23 | #### Desarrollo 24 | 25 | Para poder usar webpack debemos primero inicializar npm. Desde la consola o terminal debemos ejecutar `npm init -y` 26 | estando en la ruta donde se encuentra la carpeta recién creada. Esto nos mostrará un mensaje confirmando que se creó el 27 | archivo `package.json` 28 | 29 | ![npm init](./assets/npm-init.png) 30 | 31 | Ahora instalamos las siguientes librerías: 32 | 33 | ```text 34 | npm install --save-dev webpack webpack-cli html-webpack-plugin 35 | ``` 36 | 37 | - **webpack:** Esta es la librería principal. [Documentación](https://webpack.js.org/) 38 | - **webpack-cli:** Nos permite ejecutar webpack desde la línea de 39 | comandos. [Documentación](https://webpack.js.org/api/cli/) 40 | - **html-webpack-plugin:** Simplifica la creación de archivos HTML que ejecuten bundles de 41 | webpack. [Documentación](https://webpack.js.org/plugins/html-webpack-plugin/) 42 | 43 | En la raíz del proyecto (al mismo nivel de `package.json`) vamos a crear un archivo de configuración llamado 44 | `webpack.config.js`, aquí definiremos el punto de entrada y el output. 45 | 46 | ```javascript 47 | const path = require('path'); 48 | 49 | module.exports = { 50 | entry: './src/js/index.js', 51 | output: { 52 | path: path.resolve(__dirname, 'dist'), 53 | filename: 'bundle.js' 54 | } 55 | } 56 | ``` 57 | 58 | Ahora importamos `HtmlWebpackPlugin` y lo agregamos a la propiedad `plugins`. 59 | 60 | ```javascript 61 | const path = require('path'); 62 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 63 | 64 | module.exports = { 65 | entry: './src/js/index.js', 66 | output: { 67 | path: path.resolve(__dirname, 'dist'), 68 | filename: 'bundle.js' 69 | }, 70 | plugins: [ 71 | new HtmlWebpackPlugin({ 72 | filename: 'index.html', 73 | template: './src/index.html' 74 | }) 75 | ] 76 | } 77 | ``` 78 | 79 | En nuestro archivo HTML agregaremos una estructura sencilla. 80 | 81 | ```html 82 | 83 | 84 | 85 | 86 | Webpack setup 87 | 88 | 89 |

Webpack Setup

90 | 91 | 92 | ``` 93 | 94 | Por último vamos a reemplazar los scripts de nuestro `package.json`. 95 | 96 | ```json 97 | "scripts": { 98 | "build": "webpack --mode production" 99 | } 100 | ``` 101 | 102 | Con este script podemos ejecutar `npm run build` en la línea de comandos para generar el bundle. 103 | 104 | ![Build](./assets/npm-run-build.png) 105 | -------------------------------------------------------------------------------- /Sesion-08/Ejemplo-01/assets/npm-init.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-08/Ejemplo-01/assets/npm-init.png -------------------------------------------------------------------------------- /Sesion-08/Ejemplo-01/assets/npm-run-build.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-08/Ejemplo-01/assets/npm-run-build.png -------------------------------------------------------------------------------- /Sesion-08/Ejemplo-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 08`](../Readme.md) > `Ejemplo 02` 2 | 3 | --- 4 | 5 | ## Ejemplo 2: Webpack DevServer 6 | 7 | ### Objetivo 8 | 9 | Instalar y configurar webpack dev server 10 | 11 | #### Requisitos 12 | 13 | Continuar con el código del ejemplo 1 14 | 15 | #### Desarrollo 16 | 17 | Webpack Dev Server nos puede ahorrar tiempo de desarrollo. Cada vez que guardemos algún cambio en nuestro código webpack 18 | automáticamente creará un bundle y abrirá nuestra aplicación en el navegador. Así no tenemos que generar el build 19 | manualmente cada vez que hagamos cambios. 20 | 21 | Empecemos instalando la librería. 22 | 23 | ```text 24 | npm install --save-dev webpack-dev-server 25 | ``` 26 | 27 | En nuestro archivo de configuración de webpack vamos a agregar la propiedad `devServer`. 28 | 29 | ```javascript 30 | const path = require('path'); 31 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 32 | 33 | module.exports = { 34 | entry: './src/js/index.js', 35 | output: { 36 | path: path.resolve(__dirname, 'dist'), 37 | filename: 'bundle.js' 38 | }, 39 | plugins: [ 40 | new HtmlWebpackPlugin({ 41 | filename: 'index.html', 42 | template: './src/index.html' 43 | }) 44 | ], 45 | devServer: { 46 | contentBase: path.resolve(__dirname, 'dist') 47 | } 48 | } 49 | ``` 50 | 51 | Con la propiedad `contentBase` le decimos a webpack qué carpeta queremos que use al iniciar el servidor local. Recuerda 52 | que `src` es nuestro código fuente, es aquí donde desarrollamos la aplicación. La carpeta `dist` es código final para 53 | distribución. 54 | 55 | Lo siguiente es agregar un nuevo script en `package.json` que usaremos para iniciar webpack dev server. 56 | 57 | ```json 58 | "scripts": { 59 | "start": "webpack serve --mode development --open", 60 | "build": "webpack --mode production" 61 | } 62 | ``` 63 | 64 | La opción `--open` es para abrir el HTML inmediatamente. Ahora podemos ejecutar `npm run start` para iniciar un servidor 65 | local con webpack. Cualquier cambio que se haga al código generará un nuevo bundle y actualizará el navegador 66 | automáticamente. 67 | 68 | ![DevServer](./assets/dev-server.png) 69 | -------------------------------------------------------------------------------- /Sesion-08/Ejemplo-02/assets/dev-server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-08/Ejemplo-02/assets/dev-server.png -------------------------------------------------------------------------------- /Sesion-08/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 08`](../Readme.md) > `Ejemplo 0` 2 | 3 | --- 4 | 5 | ## Ejemplo 3: Webpack y Babel 6 | 7 | ### Objetivo 8 | 9 | Instalar y configurar babel junto con webpack 10 | 11 | #### Requisitos 12 | 13 | Continuar con el código del reto 1 14 | 15 | #### Desarrollo 16 | 17 | Vamos a empezar instalando las siguientes librerías: 18 | 19 | ```text 20 | npm install --save-dev @babel/core @babel/preset-env babel-loader 21 | ``` 22 | 23 | - **@babel/core:** Esta es la librería principal. [Documentación](https://babeljs.io/docs/en/babel-core) 24 | - **@babel/preset-env:** Preset con las características más recientes de 25 | JavaScript. [Documentación](https://babeljs.io/docs/en/babel-preset-env) 26 | - **babel-loader:** Loader de webpack. [Documentación](https://webpack.js.org/loaders/babel-loader/) 27 | 28 | En nuestro archivo de configuración de webpack agregamos el nuevo loader. 29 | 30 | ```javascript 31 | const path = require('path'); 32 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 33 | 34 | module.exports = { 35 | entry: './src/js/index.js', 36 | output: { 37 | path: path.resolve(__dirname, 'dist'), 38 | filename: 'bundle.js' 39 | }, 40 | plugins: [ 41 | new HtmlWebpackPlugin({ 42 | filename: 'index.html', 43 | template: './src/index.html' 44 | }) 45 | ], 46 | module: { 47 | rules: [ 48 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, 49 | { 50 | test: /\.m?js$/, 51 | exclude: /node_modules/, 52 | use: { 53 | loader: "babel-loader", 54 | options: { 55 | presets: ['@babel/preset-env'] 56 | } 57 | } 58 | }, 59 | ] 60 | }, 61 | devServer: { 62 | contentBase: path.resolve(__dirname, 'dist') 63 | } 64 | } 65 | ``` 66 | 67 | Con esto, cada vez que webpack encuentre un archivo `.js` lo pasará por babel primero antes de hacer el bundle. Lo 68 | último que nos falta es crear un nuevo archivo en la raíz `babel.config.json`, aquí es donde configuramos babel y le 69 | indicamos el preset que debe usar. 70 | 71 | ```json 72 | { 73 | "presets": ["@babel/preset-env"] 74 | } 75 | ``` 76 | 77 | La estructura final que tenemos es la siguiente: 78 | 79 | ``` 80 | demo 81 | |- /dist 82 | |- /node_modules 83 | |- /src 84 | | |- index.html 85 | | |- /css 86 | | |- styles.css 87 | | |- /js 88 | | |- index.js 89 | |- babel.config.json 90 | |- package.json 91 | |- package-lock.json 92 | |- webpack.config.js 93 | ``` 94 | -------------------------------------------------------------------------------- /Sesion-08/Postwork/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 08`](../Readme.md) > `Postwork` 2 | 3 | --- 4 | 5 | ## Postwork 6 | 7 | ### Objetivos 8 | 9 | Configurar un ambiente de desarrollo para una aplicación nueva 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | Como proyecto final vas a crear un buscador de recetas con las siguientes especificaciones: 18 | 19 | - Mostrar en la UI un input para ingresar texto y un botón para generar la búsqueda. 20 | - Utilizar la siguiente API para obtener los resultados: [TheMealDB](https://www.themealdb.com/api.php) 21 | - Mostrar los resultados usando las imágenes de las recetas. 22 | - Al seleccionar una imagen se deben desplegar los detalles de la receta, es decir, los ingredientes y las 23 | instrucciones. 24 | - Mostrar en la UI un botón secundario para desplegar una receta aleatoria. 25 | 26 | El acomodo de todos los elementos junto con el diseño es completamente libre, se pueden usar librerías que ayuden con la 27 | UI como Bootstrap, Foundation, Materialize, etc. 28 | 29 | Esta es la primera parte de ese proyecto y consiste en dejar listo el ambiente de desarrollo: 30 | 31 | - Desarrolla los mockups de la aplicación, esto te permitirá visualizar cómo se van a acomodar todos los elementos mucho 32 | antes de crear el código. Es parte fundamental en el desarrollo del software. 33 | - Instalar y configurar Webpack, Babel y Webpack Dev Server. 34 | - Instalar las librerías que se vayan a utilizar (Bootstrap, Materialize, Foundation, etc.). 35 | - Configurar los loaders necesarios para los estilos, se puede utilizar CSS o SASS. 36 | 37 | En las sesiones que vienen aprenderás todo lo necesario para finalizar el proyecto, desde cómo manipular elementos del 38 | DOM hasta cómo consumir la información de una API. 39 | -------------------------------------------------------------------------------- /Sesion-08/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../Readme.md) > `Sesión 08` 2 | 3 | # Sesión 8: Webpack y Babel 4 | 5 | ## Objetivos 6 | 7 | - Procesar aplicaciones modernas de JavaScript con Webpack para producir uno o más bundles 8 | - Compilar las nuevas características de JavaScript en código compatible con todos los navegadores 9 | 10 | --- 11 | 12 | ## Tabla de Contenidos 13 | 14 | - **[¿Qué es ECMAScript 6?](#qué-es-ecmascript-6)** 15 | 16 | - **[ES6 Modules](#es6-modules)** 17 | 18 | - **[Webpack](#webpack)** 19 | 20 | - [Ejemplo 1: Instalación y configuración](./Ejemplo-01/Readme.md) 21 | 22 | - [Webpack DevServer](#webpack-devserver) 23 | 24 | - [Ejemplo 2: Webpack DevServer](./Ejemplo-02/Readme.md) 25 | 26 | - [Loaders](#loaders) 27 | 28 | - [Reto 1: Webpack y CSS](./Reto-01/Readme.md) 29 | 30 | - **[Babel](#babel)** 31 | 32 | - [Ejemplo 3: Webpack y Babel](./Ejemplo-03/Readme.md) 33 | 34 | - [Reto 2: Assets en Webpack](./Reto-02/Readme.md) 35 | 36 | --- 37 | 38 | ## ¿Qué es ECMAScript 6? 39 | 40 | Ecma International es una organización sin ánimos de lucro encargada de regular el funcionamiento de varios estándares 41 | en la industria de la computación. Así surge ECMAScript 1 (ES1) en 1997 como la primera versión del estándar de 42 | JavaScript. Normalmente se usa el término ECMAScript para referirse al estándar y JavaScript para hablar del lenguaje en 43 | la práctica. 44 | 45 | En 2009 se lanzó ECMAScript 5 (ES5) con muchas mejoras de las versiones anteriores. Sin embargo, a los navegadores les 46 | tomó varios años ser compatibles con esta versión. 47 | 48 | En 2015 surge ECMAScript 2015, que también se le conoce como ES6 o ES2015. A partir de este año se decide lanzar una 49 | nueva versión de manera anual cambiando el número del año en cada versión, es decir, ES2016, ES2017, ES2018, etc. 50 | 51 | Actualmente la versión ES6 es compatible con la mayoría de los navegadores. Para usar características de versiones 52 | superiores es necesario un proceso de transpiling y polyfilling que convierte el código en ES5, garantizando así la 53 | compatibilidad del código en navegadores viejos. 54 | 55 | --- 56 | 57 | ## ES6 Modules 58 | 59 | En JavaScript, un módulo es una unidad independiente de código que puede ser reutilizado. Los módulos permiten exponer 60 | ciertas partes del código que serán usadas por otros módulos. Esto nos da la flexibilidad suficiente para mantener 61 | nuestro código mejor organizado en múltiples scripts. Dada la siguiente estructura: 62 | 63 | ``` 64 | app/ 65 | |- app.js 66 | |- helpers.js 67 | ``` 68 | 69 | En `helpers.js` podemos tener algunas funciones que podrán ser usadas en otras partes del código: 70 | 71 | ```javascript 72 | const sum = (a, b) => a + b; 73 | 74 | const multiply = (a, b) => a * b; 75 | ``` 76 | 77 | Podemos exportar cada módulo de manera independiente usando el keyword `export`. 78 | 79 | ```javascript 80 | export const sum = (a, b) => a + b; 81 | 82 | export const multiply = (a, b) => a * b; 83 | ``` 84 | 85 | O bien en una sola sentencia. 86 | 87 | ```javascript 88 | const sum = (a, b) => a + b; 89 | 90 | const multiply = (a, b) => a * b; 91 | 92 | export { sum, multiply } 93 | ``` 94 | 95 | Para usar estas funciones en `app.js` usamos el keyword `import` junto con `from` para definir la ruta del archivo. 96 | 97 | ```javascript 98 | import { sum, multiply } from './helpers.js' 99 | 100 | console.log(sum(3, 2)); // 5 101 | 102 | console.log(multiply(3, 2)); // 6 103 | ``` 104 | 105 | --- 106 | 107 | ## Webpack 108 | 109 | ![Webpack](./assets/webpack.png) 110 | 111 | Webpack es una herramienta muy usada en el desarrollo de aplicaciones en JavaScript modernas. Después de procesar la 112 | aplicación, webpack genera internamente un grafo de dependencias lo que le permite generar uno o más _bundles_. Este 113 | _bundle_ contiene el código optimizado de todos los módulos y dependencias de tu aplicación. 114 | 115 | Webpack solamente es capaz de transpilar los módulos de ES6 `import` y `export`, por lo que si queremos usar cualquier 116 | otra característica de ES6+ es necesario usar un transpilador como Babel. 117 | 118 | #### [Ejemplo 1: Instalación y configuración](./Ejemplo-01/Readme.md) 119 | 120 | ### Webpack DevServer 121 | 122 | Con la configuración del ejemplo 1 podemos generar un bundle optimizado para producción. Sin embargo, mientras estamos 123 | desarrollando nuestra aplicación resulta tedioso el proceso que debemos seguir cada que hagamos un cambio. 124 | 125 | - Generar cambios. 126 | - Crear un nuevo bundle ejecutando `npm run build`. 127 | - Abrir la versión dentro de `dist` en el navegador para ver los cambios. 128 | 129 | Afortunadamente contamos con [webpack-dev-server](https://webpack.js.org/configuration/dev-server) que nos facilita el 130 | proceso de desarrollo, ya que nos genera un servidor local que genera un bundle cada vez que realicemos cambios a 131 | nuestro código. 132 | 133 | #### [Ejemplo 2: Webpack DevServer](./Ejemplo-02/Readme.md) 134 | 135 | ### Loaders 136 | 137 | Webpack solamente entiende archivos de JavaScript y JSON. Usando _loaders_ webpack puede procesar otro tipo de archivos 138 | y convertirlos en módulos que serán agregados al grafo de dependencias. 139 | 140 | #### [Reto 1: Webpack y CSS](./Reto-01/Readme.md) 141 | 142 | --- 143 | 144 | ## Babel 145 | 146 | ![Babel](./assets/babel.png) 147 | 148 | [Babel](https://babeljs.io/) es usado principalmente para convertir código ES6+ en una versión compatible con 149 | navegadores y ambientes tanto actuales como anteriores. 150 | 151 | ```javascript 152 | // Babel Input: ES6 arrow function 153 | [1, 2, 3].map((n) => n + 1); 154 | 155 | // Babel Output: ES5 equivalent 156 | [1, 2, 3].map(function(n) { 157 | return n + 1; 158 | }); 159 | ``` 160 | 161 | Las transformaciones de código que se realizan a través de _plugins_. Cada plugin le dice a babel cómo transformar el 162 | código. Por ejemplo, el plugin `@babel/plugin-transform-arrow-functions` permite transformar arrow functions. 163 | 164 | En lugar de agregar todos los plugins que queremos implementar uno por uno podemos usar _presets_. Estos son conjuntos 165 | ya preestablecidos de ciertos plugins. Por ejemplo, el preset `@babel/preset-env` contiene todos los plugins necesarios 166 | para soportar las versiones modernas de JavaScript. 167 | 168 | #### [Ejemplo 3: Webpack y Babel](./Ejemplo-03/Readme.md) 169 | 170 | #### [Reto 2: Assets en Webpack](./Reto-02/Readme.md) 171 | -------------------------------------------------------------------------------- /Sesion-08/Reto-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 08`](../Readme.md) > `Reto 01` 2 | 3 | --- 4 | 5 | ## Reto 1: Webpack y CSS 6 | 7 | ### Objetivos 8 | 9 | Configurar loaders para que webpack pueda procesar archivos `.css` 10 | 11 | #### Requisitos 12 | 13 | Continuar con el código del ejemplo 2. 14 | 15 | #### Desarrollo 16 | 17 | Revisar la [documentación](https://webpack.js.org/loaders/) de webpack. Instalar y configurar los loaders necesarios 18 | para procesar estilos. Centrar el header para confirmar que se están procesando los estilos correctamente. 19 | -------------------------------------------------------------------------------- /Sesion-08/Reto-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 08`](../Readme.md) > `Reto 02` 2 | 3 | --- 4 | 5 | ## Reto 2: Assets en Webpack 6 | 7 | ### Objetivos 8 | 9 | Configurar webpack para procesar assets 10 | 11 | #### Requisitos 12 | 13 | Continuar con el código del ejemplo 3. 14 | 15 | #### Desarrollo 16 | 17 | En el reto anterior se configuró webpack para que pueda procesar estilos. Webpack no se limita solamente a JavaScript y 18 | CSS, nos permite procesar cualquier tipo de archivo con el loader o módulo apropiado. 19 | 20 | Revisar la [documentación](https://webpack.js.org/loaders/) de webpack. Hacer los cambios necesarios para poder procesar 21 | imágenes. 22 | -------------------------------------------------------------------------------- /Sesion-08/Soluciones/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 08`](../Readme.md) > `Soluciones` 2 | 3 | --- 4 | 5 | ## Reto 1: Webpack y CSS 6 | 7 | Estructura de archivos: 8 | 9 | ``` 10 | demo 11 | |- /src 12 | |- index.html 13 | |- js 14 | |- index.js 15 | |- css 16 | |- styles.css 17 | ``` 18 | 19 | Instalar loaders 20 | 21 | ```text 22 | npm install --save-dev css-loader style-loader 23 | ``` 24 | 25 | - **css-loader:** le permite a webpack recolectar todos los estilos que encuentre y colocarlos en un string. 26 | - **style-loader:** inyecta los estilos generados por `css-loader` en el DOM. 27 | 28 | `webpack.config.js` 29 | 30 | ```javascript 31 | const path = require('path'); 32 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 33 | 34 | module.exports = { 35 | entry: './src/js/index.js', 36 | output: { 37 | path: path.resolve(__dirname, 'dist'), 38 | filename: 'bundle.js' 39 | }, 40 | plugins: [ 41 | new HtmlWebpackPlugin({ 42 | filename: 'index.html', 43 | template: './src/index.html' 44 | }) 45 | ], 46 | module: { 47 | rules: [ 48 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, 49 | ] 50 | }, 51 | devServer: { 52 | contentBase: path.resolve(__dirname, 'dist') 53 | } 54 | } 55 | ``` 56 | 57 | `styles.css` 58 | 59 | ```css 60 | h1 { 61 | text-align: center; 62 | } 63 | ``` 64 | 65 | `index.js` 66 | 67 | ```javascript 68 | import '../css/styles.css' 69 | ``` 70 | 71 | --- 72 | 73 | ## Reto 2: Assets en Webpack 74 | 75 | Instalar loaders 76 | 77 | ```text 78 | npm install --save-dev html-loader 79 | ``` 80 | 81 | `webpack.config.js` 82 | 83 | ```javascript 84 | const path = require('path'); 85 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 86 | 87 | module.exports = { 88 | entry: './src/js/index.js', 89 | output: { 90 | path: path.resolve(__dirname, 'dist'), 91 | filename: 'bundle.js' 92 | }, 93 | plugins: [ 94 | new HtmlWebpackPlugin({ 95 | filename: 'index.html', 96 | template: './src/index.html' 97 | }) 98 | ], 99 | module: { 100 | rules: [ 101 | { test: /\.css$/, use: ['style-loader', 'css-loader'] }, 102 | { 103 | test: /\.m?js$/, 104 | exclude: /node_modules/, 105 | use: { 106 | loader: "babel-loader", 107 | options: { 108 | presets: ['@babel/preset-env'] 109 | } 110 | } 111 | }, 112 | { 113 | test: /\.(png|svg|jpg|jpeg|gif)$/i, 114 | type: 'asset/resource', 115 | }, 116 | { 117 | test: /\.html$/i, 118 | loader: 'html-loader', 119 | }, 120 | ] 121 | }, 122 | devServer: { 123 | contentBase: path.resolve(__dirname, 'dist') 124 | } 125 | } 126 | ``` 127 | -------------------------------------------------------------------------------- /Sesion-08/assets/babel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-08/assets/babel.png -------------------------------------------------------------------------------- /Sesion-08/assets/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-08/assets/webpack.png -------------------------------------------------------------------------------- /Sesion-09/Ejemplo-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 09`](../Readme.md) > `Ejemplo 01` 2 | 3 | --- 4 | 5 | ## Ejemplo 1: Inspeccionando el DOM 6 | 7 | ### Objetivo 8 | 9 | Identificar de manera práctica la variable global `document` como representación del código HTML. 10 | 11 | #### Requisitos 12 | 13 | Visitar cualquier página web y abrir la consola del navegador. Para este ejemplo trabajaremos sobre la página 14 | de [Google](https://www.google.com/). 15 | 16 | #### Desarrollo 17 | 18 | En la consola vamos a poner la variable global `document`. Esto nos va a mostrar un objeto que representa la página web, 19 | contiene todas las etiquetas HTML de la página. 20 | 21 | ![DOM](./assets/document-1.png) 22 | 23 | Si seguimos expandiendo las etiquetas podemos ver cómo se selecciona en la pantalla el área que representa el objeto o 24 | la etiqueta por la que estamos pasando el mouse. 25 | 26 | ![DOM](./assets/document-2.png) 27 | 28 | Es importante recordar que aunque se muestre como si fuera código HTML en la consola, `document` es un objeto de 29 | JavaScript, y todas las etiquetas dentro de este también son objetos. Más adelante veremos cómo podemos manipular estos 30 | objetos y ver los cambios reflejados en la pantalla. 31 | -------------------------------------------------------------------------------- /Sesion-09/Ejemplo-01/assets/document-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-09/Ejemplo-01/assets/document-1.png -------------------------------------------------------------------------------- /Sesion-09/Ejemplo-01/assets/document-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-09/Ejemplo-01/assets/document-2.png -------------------------------------------------------------------------------- /Sesion-09/Ejemplo-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 09`](../Readme.md) > `Ejemplo 02` 2 | 3 | --- 4 | 5 | ## Ejemplo 2: Cambiando el DOM 6 | 7 | ### Objetivo 8 | 9 | Modificar el DOM agregando nodos hijos a un elemento. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | Ejemplo 2: Cambiando el DOM 19 | 20 | 21 |

One

22 |

Two

23 |

Three

24 | 25 | 28 | 29 | 30 | ``` 31 | 32 | Opcionalmente se puede manejar el código de JavaScript en un archivo independiente como se ha trabajado en sesiones 33 | anteriores. 34 | 35 | #### Desarrollo 36 | 37 | En este ejemplo vamos a ver cómo cambiar la estructura del DOM. Lo primero es seleccionar todas las etiquetas `p` del 38 | documento, esto lo podemos lograr con el método `getElementsByTagName`. 39 | 40 | ```javascript 41 | const paragraphs = document.body.getElementsByTagName("p"); 42 | 43 | console.log('Colección de nodos: ', paragraphs); 44 | 45 | console.log('Primer nodo: ', paragraphs[0]); 46 | console.log('Segundo nodo: ', paragraphs[1]); 47 | console.log('Tercer nodo: ', paragraphs[2]); 48 | ``` 49 | 50 | Podemos ver en consola que `paragraphs` representa una colección con las tres etiquetas `p` de nuestro documento. 51 | 52 | ![Paragraphs](./assets/paragraphs.png) 53 | 54 | Vamos a cambiar el orden de estos nodos con el método `insertBefore`, el cual recibe dos argumentos, el primero es el 55 | nodo a insertar justo antes del nodo proporcionado como segundo argumento. 56 | 57 | ![Nodes](./assets/nodes.png) 58 | 59 | Al abrir la página vemos que el orden de los párrafos cambia. Un nodo puede existir en el documento en un solo lugar a 60 | la vez, por lo que al insertar `Three` antes de `One` primero se elimina del final de la lista para insertarse al 61 | principio. **Todas las operaciones que impliquen insertar nodos tienen como efecto secundario la eliminación del nodo en 62 | la posición actual** si es que ya existe en el DOM. 63 | -------------------------------------------------------------------------------- /Sesion-09/Ejemplo-02/assets/nodes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-09/Ejemplo-02/assets/nodes.png -------------------------------------------------------------------------------- /Sesion-09/Ejemplo-02/assets/paragraphs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-09/Ejemplo-02/assets/paragraphs.png -------------------------------------------------------------------------------- /Sesion-09/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 09`](../Readme.md) > `Ejemplo 03` 2 | 3 | --- 4 | 5 | ## Ejemplo 3: Crear nuevos nodos 6 | 7 | ### Objetivo 8 | 9 | Crear nuevos nodos para manipular la estructura del DOM. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | Ejemplo 3: Crear nuevos nodos 19 | 20 | 21 |
22 | No book can ever be finished. While working on it we learn 23 | just enough to find it immature the moment we turn away 24 | from it. 25 |
26 | 27 | 30 | 31 | 32 | ``` 33 | 34 | Opcionalmente se puede manejar el código de JavaScript en un archivo independiente como se ha trabajado en sesiones anteriores. 35 | 36 | #### Desarrollo 37 | 38 | Obtener un nuevo nodo normalmente consta de tres pasos, el primero es crear el nodo en sí con `document.createElement`, 39 | el segundo paso es crear otro nodo de texto con `document.createTextNode`, el último paso es agregar el texto como hijo 40 | del nodo creado en el primero paso. 41 | 42 | En este ejemplo vamos a crear una función que se encargue de estos tres pasos, la función recibirá dos argumentos, el 43 | primero será el tipo de nodo que queremos, y el segundo el hijo. Usaremos esta función para agregar el autor de la frase 44 | que ya tenemos en nuestro documento. 45 | 46 | ```javascript 47 | function createNode(type, child) { 48 | const node = document.createElement(type); 49 | const text = document.createTextNode(child); 50 | 51 | node.appendChild(text); 52 | 53 | return node; 54 | } 55 | 56 | console.log(createNode('h1', 'Hello World')); //

Hello World

57 | ``` 58 | 59 | Hasta ahora está bien, pero podemos extender aún más la funcionalidad de esta función, el segundo parámetro no 60 | necesariamente debe ser un string, también podría ser un nodo. De esta forma podríamos anidar nodos con la misma función. 61 | 62 | ```javascript 63 | function createNode(type, child) { 64 | const node = document.createElement(type); 65 | 66 | if(typeof child === "string") { 67 | const text = document.createTextNode(child); 68 | node.appendChild(text); 69 | } else { 70 | node.appendChild(child); 71 | } 72 | 73 | return node; 74 | } 75 | 76 | console.log(createNode('h1', createNode('strong', 'Hello World'))); 77 | /** 78 | *

79 | * Hello World 80 | *

81 | **/ 82 | ``` 83 | 84 | Con esta función es ahora más fácil crear nodos con sus respectivos hijos. Ahora podemos seleccionar el nodo que 85 | contiene la frase célebre con su respectivo id y agregar el autor. 86 | 87 | ```javascript 88 | document.getElementById("quote") 89 | .appendChild( 90 | createNode("footer", createNode("strong", "- Karl Popper")) 91 | ) 92 | ``` 93 | > Se puede escribir en una sola línea. Es buena práctica agregar los saltos de línea y la indentación para facilitar la 94 | > lectura. 95 | 96 | ![Create Nodes](./assets/create-nodes.png) 97 | -------------------------------------------------------------------------------- /Sesion-09/Ejemplo-03/assets/create-nodes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-09/Ejemplo-03/assets/create-nodes.png -------------------------------------------------------------------------------- /Sesion-09/Reto-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 09`](../Readme.md) > `Reto 01` 2 | 3 | --- 4 | 5 | ## Reto 1: Reemplazar imágenes 6 | 7 | ### Objetivos 8 | 9 | Manipular el DOM creando nuevos nodos y reemplazándolos con existentes. 10 | 11 | #### Requisitos 12 | 13 | Partir del siguiente documento HTML: 14 | 15 | ```html 16 | 17 | 18 | 19 | Reto 1: Reemplazar Imágenes 20 | 21 | 22 |

Images

23 | 24 | First Image 25 | Second Image 26 | Third Image 27 | 28 | 31 | 32 | 33 | ``` 34 | 35 | #### Desarrollo 36 | 37 | Reemplazar todas las imágenes del documento (etiquetas ``) con el texto que contienen en el atributo `alt`. 38 | -------------------------------------------------------------------------------- /Sesion-09/Reto-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 09`](../Readme.md) > `Reto 02` 2 | 3 | --- 4 | 5 | ## Reto 2: Crear una tabla 6 | 7 | ### Objetivos 8 | 9 | Crear una tabla en el DOM a partir de un arreglo de objetos. 10 | 11 | #### Requisitos 12 | 13 | Partir del siguiente documento HTML: 14 | 15 | ```html 16 | 17 | 18 | 19 | Reto 2: Crear una tabla 20 | 21 | 22 |

Mountains

23 | 24 |
25 | 26 | 38 | 39 | 40 | ``` 41 | 42 | #### Desarrollo 43 | 44 | En HTML podemos construir tablas usando etiquetas como las siguientes: 45 | 46 | ```HTML 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |
NameHeightPlace
Kilimanjaro5895Tanzania
59 | ``` 60 | 61 | La etiqueta `` define la tabla, cada fila está compuesta por la etiqueta ``. Dentro de cada fila podemos 62 | crear celdas como headers `
` o celdas regulares ``. 63 | 64 | Crear una tabla a partir de la información proporcionada por `data`, un arreglo de objetos con las propiedades `name`, 65 | `height` y `place`. La tabla debe contener una columna por cada propiedad, y una fila por cada objeto. Adicionalmente 66 | debe contener una fila con headers `` listando el nombre de cada columna, el cual corresponde a las propiedades del 67 | objeto. 68 | 69 | Alinear hacia la derecha las celdas que contengan valores numéricos asignando a la propiedad `style.textAlign` el 70 | valor `right`. 71 | -------------------------------------------------------------------------------- /Sesion-09/Soluciones/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 09`](../Readme.md) > `Soluciones` 2 | 3 | --- 4 | 5 | ## Reto 1: Reemplazar imágenes 6 | 7 | ```javascript 8 | const images = document.body.getElementsByTagName("img"); 9 | 10 | for (let i = images.length - 1; i >= 0; i--) { 11 | const image = images[i]; 12 | if (image.alt) { 13 | const text = document.createTextNode(image.alt); 14 | image.parentNode.replaceChild(text, image); 15 | } 16 | } 17 | ``` 18 | 19 | --- 20 | 21 | ## Reto 2: Crear una tabla 22 | 23 | ```javascript 24 | function buildTable(data) { 25 | const table = document.createElement("table"); 26 | 27 | const fields = Object.keys(data[0]); 28 | const headRow = document.createElement("tr"); 29 | fields.forEach(function(field) { 30 | const headCell = document.createElement("th"); 31 | headCell.appendChild(document.createTextNode(field)); 32 | headRow.appendChild(headCell); 33 | }); 34 | table.appendChild(headRow); 35 | 36 | data.forEach(function(object) { 37 | const row = document.createElement("tr"); 38 | fields.forEach(function(field) { 39 | const cell = document.createElement("td"); 40 | cell.appendChild(document.createTextNode(object[field])); 41 | if (typeof object[field] == "number") { 42 | cell.style.textAlign = "right"; 43 | } 44 | row.appendChild(cell); 45 | }); 46 | table.appendChild(row); 47 | }); 48 | 49 | return table; 50 | } 51 | 52 | document.getElementById("mountains") 53 | .appendChild(buildTable(data)); 54 | ``` 55 | 56 | -------------------------------------------------------------------------------- /Sesion-09/assets/document.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-09/assets/document.png -------------------------------------------------------------------------------- /Sesion-09/assets/links.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-09/assets/links.png -------------------------------------------------------------------------------- /Sesion-09/assets/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-09/assets/tree.png -------------------------------------------------------------------------------- /Sesion-10/Ejemplo-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 10`](../Readme.md) > `Ejemplo 01` 2 | 3 | --- 4 | 5 | ## Ejemplo 1: Eventos en nodos del DOM 6 | 7 | ### Objetivo 8 | 9 | Agregar event handlers a distintos nodos. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | Ejemplo 1: Eventos en nodos del DOM 19 | 20 | 21 |

Hello World

22 | 23 | 24 | 25 | 26 | 27 | 30 | 31 | 32 | ``` 33 | 34 | Opcionalmente se puede manejar el código de JavaScript en un archivo independiente como se ha trabajado en sesiones 35 | anteriores. 36 | 37 | #### Desarrollo 38 | 39 | En este ejemplo vamos a cambiar el color del título agregando event handlers a todos los botones del documento. Tanto el 40 | título como los botones cuentan con un id único por lo que podemos usar `getElementById`. 41 | 42 | ```javascript 43 | const title = document.getElementById('title'); 44 | 45 | const redButton = document.getElementById('red'); 46 | 47 | const blueButton = document.getElementById('blue'); 48 | 49 | const blackButton = document.getElementById('black'); 50 | ``` 51 | 52 | Ahora usaremos el método `addEventListener` para registrar un handler a cada botón. El cambio de color lo haremos 53 | asignando la propiedad `style` del nodo `title`. 54 | 55 | ```javascript 56 | redButton.addEventListener("click", function() { 57 | title.style = "color: red;"; 58 | }); 59 | 60 | blueButton.addEventListener("click", function() { 61 | title.style = "color: blue;"; 62 | }); 63 | 64 | blackButton.addEventListener("click", function() { 65 | title.style = "color: black;"; 66 | }); 67 | ``` 68 | 69 | ![Ejemplo 1](./assets/colors.gif) 70 | -------------------------------------------------------------------------------- /Sesion-10/Ejemplo-01/assets/colors.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-10/Ejemplo-01/assets/colors.gif -------------------------------------------------------------------------------- /Sesion-10/Ejemplo-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 10`](../Readme.md) > `Ejemplo 02` 2 | 3 | --- 4 | 5 | ## Ejemplo 2: Usando event object 6 | 7 | ### Objetivo 8 | 9 | Implementar propiedades del event object para manipular el DOM. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | Ejemplo 2: Usando event object 19 | 20 | 21 |

Hello World!

22 | 23 | 24 | 25 | 28 | 29 | 30 | ``` 31 | 32 | Opcionalmente se puede manejar el código de JavaScript en un archivo independiente como se ha trabajado en sesiones 33 | anteriores. 34 | 35 | #### Desarrollo 36 | 37 | En el ejemplo anterior vimos como cambiar las propiedades de un nodo a través de event handlers. En este ejemplo vamos a 38 | usar la información contenida en el event object para manipular el DOM. 39 | 40 | ```javascript 41 | const title = document.getElementById('title'); 42 | 43 | const input = document.getElementById('text'); 44 | ``` 45 | 46 | Ahora usaremos el método `addEventListener` para registrar un handler en el ``, el evento que queremos escuchar 47 | es `input`, el cual se dispara cuando hay un cambio en el nodo. 48 | 49 | ```javascript 50 | input.addEventListener("input", function(event) { 51 | title.textContent = event.target.value; 52 | }); 53 | ``` 54 | 55 | La propiedad `textContent` nos permite obtener o cambiar el contenido de texto de un nodo. La propiedad `target` del 56 | event object es una referencia al nodo que lanzó el evento, en este caso nuestro ``, por lo que podemos acceder 57 | al atributo `value` de ese elemento. 58 | 59 | ![Changing Text](./assets/changing-text.gif) 60 | -------------------------------------------------------------------------------- /Sesion-10/Ejemplo-02/assets/changing-text.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-10/Ejemplo-02/assets/changing-text.gif -------------------------------------------------------------------------------- /Sesion-10/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 10](../Readme.md) > `Ejemplo 03` 2 | 3 | --- 4 | 5 | ## Ejemplo 3: Key events 6 | 7 | ### Objetivo 8 | 9 | Determinar las teclas presionadas al disparar un evento. 10 | 11 | #### Requisitos 12 | 13 | En una nueva carpeta vamos a crear un archivo `HTML` en blanco llamado `index.html`: 14 | 15 | ```html 16 | 17 | 18 | 19 | Ejemplo 3: Key events 20 | 21 | 22 | 23 |

Press Enter to turn this page blue.

24 |

Press Ctrl + Enter to turn this page orange.

25 | 26 | 29 | 30 | 31 | ``` 32 | 33 | Opcionalmente se puede manejar el código de JavaScript en un archivo independiente como se ha trabajado en sesiones 34 | anteriores. 35 | 36 | #### Desarrollo 37 | 38 | En este ejemplo vamos a ver cómo realizar un cambio en el DOM al presionar una tecla o combinación de teclas. 39 | Agregaremos un event handler a la global `window` de tipo `keydown` que se ejecuta al presionar una tecla. 40 | 41 | ```javascript 42 | window.addEventListener("keydown", function (event) { 43 | if (event.key == "Enter") { 44 | document.body.style.background = "lightblue"; 45 | } 46 | 47 | if (event.key == "Enter" && event.ctrlKey) { 48 | document.body.style.background = "orange"; 49 | } 50 | }); 51 | ``` 52 | 53 | Estamos leyendo dos propiedades del event object, la primera es `key` que nos dice qué tecla fue presionada. La segunda 54 | propiedad que nos interesa es `ctrlKey` que nos ayuda a determinar si la tecla `ctrl` estuvo presionada cuando se lanzó 55 | el evento. Vamos a cambiar el color de fondo del documento, si se presiona solamente la tecla `Enter` el color será 56 | azul, pero si se presiona la combinación de teclas `Ctrl + Enter` entonces el color será naranja. 57 | 58 | ```javascript 59 | window.addEventListener("keyup", function (event) { 60 | if (event.key == "Enter") { 61 | document.body.style.background = ""; 62 | } 63 | }); 64 | ``` 65 | 66 | Por último, necesitamos regresar al color por default cuando las teclas fueron soltadas, para eso utilizamos el 67 | evento `keyup` y verificamos que la tecla que se soltó es la misma que cambia el color, es decir, la tecla `Enter`. 68 | 69 | ![Pressing Keys](./assets/pressing-keys.gif) 70 | -------------------------------------------------------------------------------- /Sesion-10/Ejemplo-03/assets/pressing-keys.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-10/Ejemplo-03/assets/pressing-keys.gif -------------------------------------------------------------------------------- /Sesion-10/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | [`Programación con JavaScript`](../Readme.md) > `Sesión 10` 3 | 4 | # Sesión 10: Eventos en el DOM 5 | 6 | ## Objetivos 7 | 8 | Generar scripts que permitan la manipulación e interacción con la web. 9 | 10 | --- 11 | 12 | ## Tabla de Contenidos 13 | 14 | - **[Event handlers](#event-handlers)** 15 | 16 | - **[Eventos y nodos del DOM](#eventos-y-nodos-del-dom)** 17 | 18 | - [Ejemplo 1: Eventos en nodos del DOM](./Ejemplo-01) 19 | 20 | - **[Event object](#event-object)** 21 | 22 | - [Ejemplo 2: Usando event object](./Ejemplo-02) 23 | 24 | - **[Tipos de eventos](#tipos-de-eventos)** 25 | 26 | - [Ejemplo 3: Key events](./Ejemplo-03) 27 | 28 | - [Reto 1: Inflar un globo](./Reto-01) 29 | 30 | - [Reto 2: Modal](./Reto-02) 31 | 32 | - [Reto 3: Navegando entre tabs](./Reto-03) 33 | 34 | --- 35 | 36 | ## Event handlers 37 | 38 | Manipular el DOM creando nodos y modificando sus atributos carece de sentido si el usuario no tiene la posibildad de 39 | interactuar con nuestra aplicación o sitio web. El usuario en algún momento va a presionar una tecla, hacer click en un 40 | botón, o ingresar un valor en un input y espera que la interfaz reaccione de alguna forma en el momento que se realiza 41 | cualquiera de esas acciones. 42 | 43 | Los navegadores son capaces de notificar o avisar a nuestro código cuando un evento sucede. En este contexto un evento 44 | es cuando el usuario o el navegador mismo manipula la página. Cuando el usuario hace click en un botón, cuando la página 45 | carga, o incluso cuando una ventana se cierra son ejemplos de eventos. El navegador nos permite registrar funciones 46 | conocidas como _handlers_ que se ejecutan cuando un evento en específico sucede. 47 | 48 | ```javascript 49 | window.addEventListener("click", function() { 50 | console.log("Hello World!"); 51 | }); 52 | ``` 53 | 54 | `window` es un objeto que representa la ventana del navegador donde se carga `document`. Al llamar el 55 | método `addEventListener` se registra el segundo argumento para ser llamado cuando el evento descrito en el primer 56 | argumento sucede. Como resultado, al hacer click (evento) en cualquier parte de la ventana se mostrará en consola un 57 | mensaje `Hello World!` (handler). 58 | 59 | --- 60 | 61 | ## Eventos y nodos del DOM 62 | 63 | Todos los event handlers son registrados en un contexto. En el ejemplo anterior llamamos `addEventListener` en el 64 | objeto `window` por lo que el handler se registra para toda la ventana. Los elementos del DOM también cuentan con este 65 | método. 66 | 67 | ```html 68 |

No handler here.

69 | 70 | 71 | 72 |

No handler here.

73 | 74 | 81 | ``` 82 | 83 | > El método `querySelector` retorna el primer elemento del DOM que hace match con el selector de CSS especificado. 84 | 85 | Este handler está vinculado al elemento `button`. Lo clicks en el botón ejecutarán la función handler pero los clicks en 86 | los párrafos (o cualquier parte del documento) no. 87 | 88 | Usar el atributo `onclick` tiene el mismo efecto, sin embargo, los nodos solo pueden tener un atributo `onclick` por lo 89 | que solo se puede registrar un handler de esta manera. Usando el método `addEventListener` se pueden registrar múltiples 90 | handlers sobre un mismo nodo. 91 | 92 | También podemos eliminar handlers que hayamos creado con anterioridad usando el método `removeEventListener`. 93 | 94 | ```html 95 | 96 | 97 | 107 | ``` 108 | 109 | La función que le pasemos a `removeEventListener` debe ser la misma que se le dio a `addEventListener`. En este caso se 110 | debe definir una función y darle un nombre, de esta forma podemos pasar la función a ambos métodos. 111 | 112 | #### [Ejemplo 1: Eventos en nodos del DOM](./Ejemplo-01) 113 | 114 | --- 115 | 116 | ## Event object 117 | 118 | La función de un event handler recibe un argumento `event`. Este es un objeto con toda la información referente al 119 | evento. Por ejemplo, si quisiéramos saber cuál botón del mouse fue presionado podemos leer la propiedad `button` del 120 | event object. 121 | 122 | ```html 123 | 124 | 125 | 138 | ``` 139 | 140 | La información contenida en el event object puede variar dependiendo del tipo de evento. 141 | 142 | #### [Ejemplo 2: Usando event object](./Ejemplo-02) 143 | 144 | --- 145 | 146 | ## Tipos de eventos 147 | 148 | ### Teclado 149 | 150 | Cada vez que se presiona una tecla el navegador lanza un evento `keydown`, al soltar la tecla se ejecuta un 151 | evento `keyup`. Cuando usemos `keydown` hay que tomar en cuenta que no es un evento que se ejecute una sola vez, si la 152 | tecla se mantiene presionada el evento se seguirá ejecutando de manera constante. 153 | 154 | Podemos determinar la tecla presionada con la propiedad `key` del event object. Esta propiedad contiene un string con el 155 | nombre de la tecla presionada. Adicionalmente, si queremos determinar una combinación de teclas el event object cuenta 156 | con las propiedades `shiftKey`, `ctrlKey`, `altKey` y `metaKey` que contienen un booleano indicando si la tecla `Shift`, 157 | `Control`, `Alt` o `Meta` respectivamente se encontraba presionada cuando el evento ocurrió. 158 | 159 | > `Meta`: En teclados Macintosh es la tecla comando (⌘). En teclados Windows es la tecla window (⊞). 160 | 161 | ### Mouse 162 | 163 | Similar a los eventos `keydown` y `keyup`, cuando presionamos un botón del mouse se ejecuta el evento `mousedown` 164 | y `mouseup` cuando se suelta el botón. Esto sucede en el nodo del DOM donde se encuentre el cursor al momento que ocurre 165 | el evento. Después del evento `mouseup` se ejecuta el evento `click` que ya hemos visto anteriormente. En caso de que 166 | sucedan dos clicks de manera continua se lanza el evento `dblclick`. 167 | 168 | #### [Ejemplo 3: Key events](./Ejemplo-03) 169 | 170 | > Consultar la [siguiente documentación](https://developer.mozilla.org/es/docs/Web/Events) para una lista completa de 171 | > los tipos de eventos. 172 | 173 | #### [Reto 1: Inflar un globo](./Reto-01) 174 | 175 | #### [Reto 2: Modal](./Reto-02) 176 | 177 | #### [Reto 3: Navegando entre tabs](./Reto-03) 178 | -------------------------------------------------------------------------------- /Sesion-10/Reto-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 10`](../Readme.md) > `Reto 01` 2 | 3 | --- 4 | 5 | ## Reto 1: Inflar un globo 6 | 7 | ### Objetivos 8 | 9 | Crear event handlers y usar el event object para determinar las teclas presionadas. 10 | 11 | #### Requisitos 12 | 13 | Partir del siguiente documento HTML: 14 | 15 | ```html 16 | 17 | 18 | 19 | Reto 1: Inflar un globo 20 | 21 | 22 | 23 |

🎈

24 | 25 | 28 | 29 | 30 | ``` 31 | 32 | #### Desarrollo 33 | 34 | En este reto el globo (🎈) debe inflarse (aumentar su tamaño) un 10% al presionar la flecha hacia arriba y desinflarse ( 35 | disminuir su tamaño) un 10% el presionar la flecha hacia abajo. 36 | 37 | Los emojis son considerados como texto por lo que puedes controlar el tamaño con la propiedad de CSS `font-size`. El 38 | valor inicial debe ser de `20px`. 39 | 40 | Los nombres de las teclas de flecha que necesitas son `ArrowUp` y `ArrowDown`. Con el método `preventDefault()` podemos 41 | evitar que la página haga un scroll al presionar estas teclas. 42 | 43 | Por último, si el tamaño del globo es mayor a `80px` se debe reemplazar por el emoji 💥 y eliminar el event handler. 44 | 45 | ![Balloon](./assets/balloon.gif) 46 | -------------------------------------------------------------------------------- /Sesion-10/Reto-01/assets/balloon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-10/Reto-01/assets/balloon.gif -------------------------------------------------------------------------------- /Sesion-10/Reto-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 10`](../Readme.md) > `Reto 02` 2 | 3 | --- 4 | 5 | ## Reto 2: Modal 6 | 7 | ### Objetivos 8 | 9 | Implementar event handlers para crear un modal. 10 | 11 | #### Requisitos 12 | 13 | Partir del siguiente documento HTML: 14 | 15 | ```html 16 | 17 | 18 | 19 | Reto 2: Modal 20 | 21 | 22 | 61 | 62 |

Modal

63 | 64 | 65 | 66 | 70 | 71 | 74 | 75 | 76 | ``` 77 | 78 | #### Desarrollo 79 | 80 | En este reto se incluyen los estilos necesarios para crear un modal, el cual se encuentra oculto por default con la 81 | propiedad de CSS `display: none;`. 82 | - Al hacer click en el botón se debe mostrar un modal con una imagen. 83 | - Usar la url `https://picsum.photos/300/200` para mostrar una imagen aleatoria. 84 | - Una vez abierto el modal aparece una X en la esquina superior derecha, al hacer click se debe cerrar el modal. 85 | 86 | ![Modal](./assets/modal.gif) 87 | -------------------------------------------------------------------------------- /Sesion-10/Reto-02/assets/modal.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-10/Reto-02/assets/modal.gif -------------------------------------------------------------------------------- /Sesion-10/Reto-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 10`](../Readme.md) > `Reto 03` 2 | 3 | --- 4 | 5 | ## Reto 3: Navegando entre tabs 6 | 7 | ### Objetivos 8 | 9 | Implementar event handlers para crear tabs de navegación. 10 | 11 | #### Requisitos 12 | 13 | Partir del siguiente documento HTML: 14 | 15 | ```html 16 | 17 | 18 | 19 | Reto 3: Navegando entre tabs 20 | 21 | 22 | 23 |
24 |
Tab one
25 |
Tab two
26 |
Tab three
27 |
28 | 29 | 34 | 35 | 36 | ``` 37 | 38 | #### Desarrollo 39 | 40 | Crear una función `createTabs` que recibe un nodo del DOM y genera una interfaz de tabs de navegación. 41 | 42 | - La función debe insertar una lista de elementos ` 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | ``` 36 | 37 | Dentro de la misma carpeta creamos un archivo `ejemplo-1.js` que es donde se trabajará este ejemplo. Finalmente abre el 38 | archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 39 | 40 | Es necesario registrarse en [Giphy](https://developers.giphy.com/) para obtener una API Key que se usará en cada request. 41 | 42 | #### Desarrollo 43 | 44 | Usaremos el [Search Endpoint](https://developers.giphy.com/docs/api/endpoint#search) para buscar GIFs en base a una 45 | palabra o frase. 46 | 47 | De acuerdo con la [documentación](https://developers.giphy.com/docs/resource#code-examples), la URL para realizar una 48 | búsqueda con _Ryan Gosling_ se ve de la siguiente forma: 49 | 50 | ```javascript 51 | const url = "http://api.giphy.com/v1/gifs/search?q=ryan+gosling&api_key=YOUR_API_KEY&limit=5" 52 | ``` 53 | 54 | Al igual que en el ejemplo anterior vamos a crear una función que nos retorne la url en el formato que lo necesitamos. 55 | A esta función le vamos a pasar un string `search` que será el término de búsqueda. En la url vamos a limitar los 56 | resultados a 9. 57 | 58 | ```javascript 59 | function buildUrl (search) { 60 | const API_KEY = 'YOUR_API_KEY'; // Provided by GIPHY 61 | const baseUrl = 'http://api.giphy.com/v1/gifs/search'; 62 | 63 | return `${baseUrl}?q=${search}&api_key=${API_KEY}&limit=9`; 64 | } 65 | ``` 66 | 67 | Cuando buscamos más de dos palabras la API de Giphy espera que le enviemos las palabras separadas por `+` en lugar de 68 | espacios. Vamos a crear otra función auxiliar para reemplazar los espacios en blanco. 69 | 70 | ```javascript 71 | function formatSearchString(search) { 72 | return search.replace(/ /g, '+'); 73 | } 74 | ``` 75 | 76 | También vamos a separar la lógica que hace el request a la API en una función. 77 | 78 | ```javascript 79 | function getGiphyResults(url) { 80 | return fetch(url) 81 | .then(function (response) { 82 | return response.json(); 83 | }) 84 | .then(function (data) { 85 | return data.data; 86 | }) 87 | .catch(function(err) { 88 | console.log(err); 89 | }) 90 | } 91 | ``` 92 | 93 | Para unir todas las piezas vamos a agregar un event listener al botón, al momento de hacer click obtendremos el valor de 94 | búsqueda del input, si el input no está vacío hacemos el request. Cuando obtengamos los resultados agregaremos las 95 | imágenes de la misma manera que hicimos en el ejemplo anterior. 96 | 97 | ```javascript 98 | const searchInput = document.getElementById('search'); 99 | const searchButton = document.getElementById('button'); 100 | 101 | const results = document.getElementById('results'); 102 | 103 | searchButton.addEventListener('click', searchGIFs); 104 | 105 | function searchGIFs() { 106 | const search = searchInput.value; 107 | 108 | if(search) { 109 | const formattedSearch = formatSearchString(search); 110 | const url = buildUrl(formattedSearch); 111 | 112 | return getGiphyResults(url) 113 | .then(function(gifs) { 114 | console.log(gifs) 115 | gifs.forEach(function(gif) { 116 | const img = document.createElement('img'); 117 | img.src = gif.images.fixed_height.url; 118 | img.alt = gif.title; 119 | 120 | results.appendChild(img) 121 | }) 122 | }) 123 | } 124 | } 125 | 126 | function formatSearchString(search) { 127 | return search.replace(/ /g, '+'); 128 | } 129 | 130 | function buildUrl (search) { 131 | const API_KEY = 'YOUR_API_KEY'; // Provided by GIPHY 132 | const baseUrl = 'http://api.giphy.com/v1/gifs/search'; 133 | 134 | return `${baseUrl}?q=${search}&api_key=${API_KEY}&limit=9`; 135 | } 136 | 137 | function getGiphyResults(url) { 138 | return fetch(url) 139 | .then(function (response) { 140 | return response.json(); 141 | }) 142 | .then(function (data) { 143 | return data.data 144 | }) 145 | .catch(function(err) { 146 | console.log(err) 147 | }) 148 | } 149 | ``` 150 | 151 | Cada GIF cuenta con una propiedad `images`, la cual es una lista con distintas URLs para obtener las imágenes en 152 | [diferentes medidas](https://developers.giphy.com/docs/api/schema/#image-object). En este ejemplo usamos `fixed_height` 153 | para tener todas las imágenes con la misma altura. 154 | 155 | ![GIPHY](./assets/giphy.png) 156 | -------------------------------------------------------------------------------- /Sesion-12/Ejemplo-02/assets/giphy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-12/Ejemplo-02/assets/giphy.png -------------------------------------------------------------------------------- /Sesion-12/Postwork/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 12`](../Readme.md) > `Postwork` 2 | 3 | --- 4 | 5 | ## Postwork 6 | 7 | ### Objetivos 8 | 9 | Implementar todos los temas vistos en el desarrollo de una aplicación web 10 | 11 | #### Requisitos 12 | 13 | Postwork Sesión 8 14 | 15 | #### Desarrollo 16 | 17 | Con el ambiente de desarrollo instalado y los mockups creados en el postwork de la sesión 8 ya puedes darle continuidad 18 | a la aplicación. 19 | 20 | Como proyecto final vas a crear un buscador de recetas con las siguientes especificaciones: 21 | 22 | - Mostrar en la UI un input para ingresar texto y un botón para generar la búsqueda. 23 | - Utilizar la siguiente API para obtener los resultados: [TheMealDB](https://www.themealdb.com/api.php) 24 | - Mostrar los resultados usando las imágenes de las recetas. 25 | - Al seleccionar una imagen se deben desplegar los detalles de la receta, es decir, los ingredientes y las 26 | instrucciones. 27 | - Mostrar en la UI un botón secundario para desplegar una receta aleatoria. 28 | 29 | El acomodo de todos los elementos junto con el diseño es completamente libre, se pueden usar librerías que ayuden con la 30 | UI como Bootstrap, Foundation, Materialize, etc. 31 | -------------------------------------------------------------------------------- /Sesion-12/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../Readme.md) > `Sesión 12` 2 | 3 | --- 4 | 5 | # Sesión 12: API 6 | 7 | ## Objetivos 8 | 9 | Consumir recursos externos de una API mediante peticiones HTTP 10 | 11 | --- 12 | 13 | ## Tabla de Contenidos 14 | 15 | - **[API](#api)** 16 | 17 | - **[REST API](#rest-api)** 18 | 19 | - **[Métodos HTTP](#métodos-http)** 20 | 21 | - **[fetch](#fetch)** 22 | 23 | - [Ejemplo 1: NASA API](./Ejemplo-01/Readme.md) 24 | 25 | - [Ejemplo 2: Buscador de GIFs](./Ejemplo-02/Readme.md) 26 | 27 | - [Reto 1: Usuarios de GitHub](./Reto-01/Readme.md) 28 | 29 | - [Reto 2: Repositorios de GitHub](./Reto-02/Readme.md) 30 | 31 | - [Reto 3: Resultados dinámicos](./Reto-03/Readme.md) 32 | 33 | - **[Postwork](./Postwork/Readme.md)** 34 | 35 | --- 36 | 37 | ## API 38 | 39 | Application Program Interface o simplemente API es un contrato entre una porción de software y otra, donde la información 40 | se comparte de manera estructurada a través de request (petición) y response (respuesta). 41 | 42 | ![API](./assets/api.png) 43 | 44 | Como analogía podemos tomar restaurante, donde el cliente y la cocina son dos softwares distintos. La manera de 45 | comunicarse es mediante una API, en este caso el mesero. El cliente realiza un pedido y el mesero se encarga de llevar 46 | el mensaje a la cocina, una vez completa la petición del cliente el mensaje lleva de regreso lo que solicitó el cliente. 47 | 48 | En otras palabras, una API es un mensajero, toma un request de un software para llevarlo a otro y regresa un response. 49 | Esto es algo que existe en todos lados, sistemas operativos, dispositivos móviles, equipos de cómputo, etc. 50 | 51 | --- 52 | 53 | ## REST API 54 | 55 | REST significa Representational State Transfer. Este es un estilo de arquitectura para diseñar aplicaciones en red que 56 | se basan en un protocolo cliente-servidor, usualmente es HTTP. Esto permite a una aplicación web realizar una petición 57 | HTTP a un servidor y obtener un response en cierto formato que en la mayoría de los casos es un JSON, una representación 58 | de un objeto de JavaScript. 59 | 60 | ![REST API](./assets/rest-api.png) 61 | 62 | La mayoría de los lenguajes de programación pueden realizar peticiones HTTP, por lo que se puede implementar no solo con 63 | JavaScript. 64 | 65 | --- 66 | 67 | ## Métodos HTTP 68 | 69 | Cuando realizamos una petición HTTP debemos indicar el método, este define el tipo de acción que deseamos realizar para 70 | un recurso determinado. Los métodos más usados: 71 | 72 | `GET`: Este método es utilizado para obtener datos, por ejemplo cuando queremos ver la información de un perfil de 73 | usuario. 74 | 75 | `POST`: Se usa este método para enviar información para ser procesada, es el caso cuando llenamos algún formulario en un 76 | sitio web. 77 | 78 | `PUT`: Es utilizado para actualizar datos, por ejemplo cambiar el nombre o correo de un usuario. 79 | 80 | `DELETE`: Elimina un recurso. Es necesario especificar el recurso que se desea eliminar. 81 | 82 | Otros métodos menos usados: 83 | 84 | `HEAD`: Es similar al método `GET`, la diferencia es que `HEAD` no regresa el body del request. 85 | 86 | `OPTIONS`: Este método es usado para obtener todos los métodos que un recurso soporta. 87 | 88 | `PATCH`: Se usa para realizar modificaciones parciales. 89 | 90 | --- 91 | 92 | ## fetch 93 | 94 | El método `fetch()` nos permite realizar peticiones HTTP de manera asíncrona. 95 | 96 | ```javascript 97 | fetch('http://example.com/data.json') 98 | .then(function(response) { 99 | return response.json() 100 | }) 101 | .then(function(data) { 102 | console.log(data) 103 | }) 104 | .catch(function(error) { 105 | console.log(error) 106 | }) 107 | ``` 108 | 109 | En este ejemplo se está haciendo una petición tipo `GET` a la URL `http://example.com/data.json` lo que nos retorna una 110 | promesa con un objeto `Response`. Esta respuesta contiene información como los headers, la url a la que se hizo la 111 | petición y el body que contiene la información que estamos solicitando. Para extraer este body usamos el método `json()`. 112 | 113 | El método `fetch()` acepta un segundo argumento opcional para definir configuraciones del request. 114 | 115 | ```javascript 116 | fetch('http://example.com/data.json', { method: 'GET' }) 117 | .then(function(response) { 118 | return response.json() 119 | }) 120 | .then(function(data) { 121 | console.log(data) 122 | }) 123 | .catch(function(error) { 124 | console.log(error) 125 | }) 126 | ``` 127 | 128 | Cuando se requiera enviar un JSON mediante una petición `POST` se puede usar la propiedad `body` en este segundo 129 | argumento, junto con `Content-Type` en los `headers`. 130 | 131 | ```javascript 132 | const data = { 133 | username: 'John Doe', 134 | email: 'john@doe.com' 135 | } 136 | 137 | fetch('http://example.com/user', { 138 | method: 'POST', 139 | headers: { 140 | 'Content-Type': 'application/json' 141 | }, 142 | body: JSON.stringify(data) 143 | }) 144 | .then(function(response) { 145 | return response.json() 146 | }) 147 | .then(function(data) { 148 | console.log(data) 149 | }) 150 | .catch(function(error) { 151 | console.log(error) 152 | }) 153 | ``` 154 | 155 | #### [Ejemplo 1: NASA API](./Ejemplo-01/Readme.md) 156 | 157 | #### [Ejemplo 2: Buscador de GIFs](./Ejemplo-02/Readme.md) 158 | 159 | #### [Reto 1: Usuarios de GitHub](./Reto-01/Readme.md) 160 | 161 | #### [Reto 2: Repositorios de GitHub](./Reto-02/Readme.md) 162 | 163 | #### [Reto 3: Resultados dinámicos](./Reto-03/Readme.md) 164 | -------------------------------------------------------------------------------- /Sesion-12/Reto-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 12`](../Readme.md) > `Reto 01` 2 | 3 | --- 4 | 5 | ## Reto 1: Usuarios de GitHub 6 | 7 | ### Objetivos 8 | 9 | Consumir la API de GitHub para obtener perfiles de usuarios 10 | 11 | #### Requisitos 12 | 13 | Crear un archivo `index.html` con la siguiente estructura: 14 | 15 | ```html 16 | 17 | 18 | 19 | Reto 1: Usuarios de GitHub 20 | 48 | 49 | 50 | 51 |
52 | 53 | 54 | 55 | 56 | ``` 57 | 58 | Dentro de la misma carpeta creamos un archivo `reto-1.js` que es donde se trabajará este reto. 59 | 60 | #### Desarrollo 61 | 62 | Con base en la documentación para usar la API de GitHub 63 | obtener una lista de usuarios. De esa lista se tomarán 4 para mostrar la foto de perfil, el nombre de usuario y un botón 64 | para ver el perfil en GitHub. 65 | 66 | Toda esta información estará contenida en un `div` con la siguiente estructura: 67 | 68 | ```html 69 |
70 | John Doe 71 |

John Doe

72 | 73 | GitHub 74 | 75 |
76 | ``` 77 | 78 | ![Challenge 1](./assets/challenge-1.png) 79 | -------------------------------------------------------------------------------- /Sesion-12/Reto-01/assets/challenge-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-12/Reto-01/assets/challenge-1.png -------------------------------------------------------------------------------- /Sesion-12/Reto-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 12`](../Readme.md) > `Reto 02` 2 | 3 | --- 4 | 5 | ## Reto 2: Repositorios de GitHub 6 | 7 | ### Objetivos 8 | 9 | Consumir la API de GitHub para obtener repositorios de usuarios 10 | 11 | #### Requisitos 12 | 13 | Continuar con el código creado en el [Reto 1](../Reto-01/Readme.md). 14 | 15 | Agregar los siguientes estilos: 16 | 17 | ```css 18 | details summary { 19 | margin-bottom: 8px; 20 | } 21 | .button-repo { 22 | display: inline-block; 23 | padding: 8px 0; 24 | color: #fff; 25 | background-color: #242424; 26 | text-align: center; 27 | cursor: pointer; 28 | width: 100%; 29 | font-size: 18px; 30 | text-decoration: none; 31 | } 32 | .button-repo:hover { 33 | opacity: 0.80; 34 | } 35 | ``` 36 | 37 | #### Desarrollo 38 | 39 | Por cada usuario agregar una lista con un máximo de 5 repositorios. Cada uno será un link para ver el repositorio en 40 | Github. 41 | 42 | ![Challenge 2](./assets/challenge-2.png) 43 | -------------------------------------------------------------------------------- /Sesion-12/Reto-02/assets/challenge-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-12/Reto-02/assets/challenge-2.png -------------------------------------------------------------------------------- /Sesion-12/Reto-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 12`](../Readme.md) > `Reto 03` 2 | 3 | --- 4 | 5 | ## Reto 3: Resultados dinámicos 6 | 7 | ### Objetivos 8 | 9 | Mostrar de manera aleatoria los resultados consumidos de la API de GitHub 10 | 11 | #### Requisitos 12 | 13 | Continuar con el código creado en el [Reto 2](../Reto-02/Readme.md). 14 | 15 | #### Desarrollo 16 | 17 | Mostrar de manera aleatoria tanto los usuarios como los repositorios de cada usuario. Es decir, cada vez que se cargue 18 | la página se mostrarían resultados distintos. 19 | -------------------------------------------------------------------------------- /Sesion-12/Soluciones/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 12`](../Readme.md) > `Soluciones` 2 | 3 | --- 4 | 5 | ## Reto 1: Usuarios de Github 6 | 7 | ```javascript 8 | const app = document.getElementById('app'); 9 | 10 | getGithubUsers() 11 | .then(function (data) { 12 | 13 | console.log(data); 14 | 15 | data.forEach(function (data) { 16 | app.appendChild(createCard(data)); 17 | }) 18 | }) 19 | 20 | function createCard(data) { 21 | const card = document.createElement('div'); 22 | card.className = 'card'; 23 | 24 | const name = document.createElement('h2'); 25 | const nameText = document.createTextNode(data.login); 26 | 27 | name.appendChild(nameText) 28 | 29 | const link = document.createElement('a'); 30 | const linkText = document.createTextNode('GitHub'); 31 | 32 | link.appendChild(linkText); 33 | link.href = data.html_url; 34 | link.target = 'blank'; 35 | link.className = 'button'; 36 | 37 | const img = document.createElement('img'); 38 | img.src = data.avatar_url; 39 | img.alt = data.login; 40 | 41 | card.appendChild(img); 42 | card.appendChild(name); 43 | card.appendChild(link); 44 | 45 | return card; 46 | } 47 | 48 | function getGithubUsers() { 49 | return fetch('https://api.github.com/users') 50 | .then(function (response) { 51 | return response.json(); 52 | }) 53 | .then(function (data) { 54 | return data.slice(0, 4) 55 | }) 56 | } 57 | ``` 58 | 59 | --- 60 | 61 | ## Reto 2: Repositorios de Github 62 | 63 | ```javascript 64 | const app = document.getElementById('app'); 65 | 66 | getGithubUsers() 67 | .then(function (data) { 68 | data.forEach(function (user) { 69 | return getUserRepositories(user.repos_url) 70 | .then(function (repos) { 71 | app.appendChild(createCard(user, repos)); 72 | }) 73 | }) 74 | }) 75 | 76 | function createCard(data) { 77 | // Code from last challenge 78 | 79 | const reposList = createReposList(repos); 80 | 81 | card.appendChild(img); 82 | card.appendChild(name); 83 | card.appendChild(reposList); 84 | card.appendChild(link); 85 | 86 | return card; 87 | } 88 | 89 | function createReposList(repos) { 90 | const details = document.createElement('details'); 91 | 92 | const summary = document.createElement('summary'); 93 | const summaryText = document.createTextNode('Repositories:'); 94 | summary.appendChild(summaryText); 95 | 96 | details.appendChild(summary); 97 | 98 | repos.forEach(function(repo) { 99 | const link = document.createElement('a'); 100 | const linkText = document.createTextNode(repo.name); 101 | 102 | link.appendChild(linkText); 103 | link.href = repo.html_url; 104 | link.target = '_blank'; 105 | link.className = 'button-repo'; 106 | 107 | details.appendChild(link); 108 | }) 109 | 110 | return details; 111 | } 112 | 113 | function getUserRepositories(url) { 114 | return fetch(url) 115 | .then(function (response) { 116 | return response.json(); 117 | }) 118 | .then(function (data) { 119 | return data.slice(0, 5) 120 | }) 121 | } 122 | ``` 123 | 124 | --- 125 | 126 | ## Reto 3: Resultados Dinámicos 127 | 128 | ```javascript 129 | function getGithubUsers() { 130 | return fetch('https://api.github.com/users') 131 | .then(function (response) { 132 | return response.json(); 133 | }) 134 | .then(function (data) { 135 | return shuffleArray(data).slice(0, 4) 136 | }) 137 | } 138 | 139 | function getUserRepositories(url) { 140 | return fetch(url) 141 | .then(function (response) { 142 | return response.json(); 143 | }) 144 | .then(function (data) { 145 | return shuffleArray(data).slice(0, 5) 146 | }) 147 | } 148 | 149 | function shuffleArray(array) { 150 | for(let i = array.length - 1; i > 0; i--) { 151 | const j = Math.floor(Math.random() * i); 152 | [ array[i], array[j] ] = [ array[j], array[i] ]; 153 | } 154 | return array 155 | } 156 | ``` 157 | -------------------------------------------------------------------------------- /Sesion-12/assets/api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-12/assets/api.png -------------------------------------------------------------------------------- /Sesion-12/assets/rest-api.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/Programacion-JavaScript-12sesiones-2021/ef687f3e8ef2406cbdf337a9cc7f5e83aac570d8/Sesion-12/assets/rest-api.png --------------------------------------------------------------------------------