├── Sesion-04 ├── assets │ └── array.png ├── Ejemplo-01 │ ├── assets │ │ └── multiplyByTwo.png │ └── Readme.md ├── Ejemplo-02 │ ├── assets │ │ └── keyValuePairs.png │ └── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-03 │ └── Readme.md ├── Postwork │ └── Readme.md └── Readme.md ├── Sesion-07 ├── assets │ ├── links.png │ ├── tree.png │ └── document.png ├── Ejemplo-02 │ ├── assets │ │ ├── nodes.png │ │ └── paragraphs.png │ └── Readme.md ├── Ejemplo-01 │ ├── assets │ │ ├── document-1.png │ │ └── document-2.png │ └── Readme.md ├── Ejemplo-03 │ ├── assets │ │ └── create-nodes.png │ └── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md └── Readme.md ├── Sesion-05 ├── assets │ ├── constructor.png │ ├── inheritance.png │ ├── instances.png │ └── prototype-chain.png ├── Ejemplo-01 │ ├── assets │ │ ├── instances.png │ │ └── function-constructor.png │ └── Readme.md ├── Ejemplo-03 │ ├── assets │ │ ├── prototype.png │ │ ├── prototype-2.png │ │ └── prototype-3.png │ └── Readme.md ├── Ejemplo-02 │ ├── assets │ │ └── inheritance.png │ └── Readme.md ├── Reto-03 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-01 │ └── Readme.md └── Readme.md ├── Sesion-02 ├── Ejemplo-01 │ ├── assets │ │ ├── if.png │ │ └── if-else.png │ └── Readme.md ├── Ejemplo-02 │ ├── assets │ │ └── switch.png │ └── Readme.md ├── Ejemplo-03 │ ├── assets │ │ └── for-loop.png │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-03 │ └── Readme.md ├── Reto-01 │ └── Readme.md └── Readme.md ├── Sesion-06 ├── assets │ └── pure-function.png ├── Ejemplo-01 │ ├── assets │ │ ├── mutable.png │ │ └── immutable.png │ └── Readme.md ├── Ejemplo-03 │ ├── assets │ │ └── sum-digits.png │ └── Readme.md ├── Ejemplo-02 │ ├── assets │ │ └── pure-function.png │ └── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-03 │ └── Readme.md └── Readme.md ├── Sesion-09 ├── Postwork │ ├── assets │ │ └── list.png │ └── Readme.md ├── Ejemplo-01 │ ├── assets │ │ └── destructuring.png │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-03 │ └── Readme.md ├── Reto-01 │ └── Readme.md └── Readme.md ├── Sesion-03 ├── Ejemplo-03 │ ├── assets │ │ ├── IIFE.png │ │ ├── logName.png │ │ └── IIFE-args.png │ └── Readme.md ├── Ejemplo-01 │ ├── assets │ │ ├── calculateAge.png │ │ └── yearsUntilRetirement.png │ └── Readme.md ├── Ejemplo-02 │ ├── assets │ │ └── whatDoYouDo.png │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-03 │ └── Readme.md └── Readme.md ├── Sesion-01 ├── Ejemplo-01 │ ├── assets │ │ └── typeof.png │ └── Readme.md ├── Ejemplo-03 │ ├── assets │ │ └── precedence.png │ └── Readme.md ├── Ejemplo-02 │ ├── assets │ │ ├── operators-1.png │ │ └── operators-2.png │ └── Readme.md ├── Reto-01 │ └── Readme.md └── Readme.md ├── Sesion-08 ├── Ejemplo-01 │ ├── assets │ │ └── colors.gif │ └── Readme.md ├── Ejemplo-02 │ ├── assets │ │ └── changing-text.gif │ └── Readme.md ├── Ejemplo-03 │ ├── assets │ │ └── pressing-keys.gif │ └── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-03 │ └── Readme.md ├── Reto-02 │ └── Readme.md └── Readme.md └── Readme.md /Sesion-04/assets/array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-04/assets/array.png -------------------------------------------------------------------------------- /Sesion-07/assets/links.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-07/assets/links.png -------------------------------------------------------------------------------- /Sesion-07/assets/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-07/assets/tree.png -------------------------------------------------------------------------------- /Sesion-07/assets/document.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-07/assets/document.png -------------------------------------------------------------------------------- /Sesion-05/assets/constructor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-05/assets/constructor.png -------------------------------------------------------------------------------- /Sesion-05/assets/inheritance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-05/assets/inheritance.png -------------------------------------------------------------------------------- /Sesion-05/assets/instances.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-05/assets/instances.png -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-01/assets/if.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-02/Ejemplo-01/assets/if.png -------------------------------------------------------------------------------- /Sesion-06/assets/pure-function.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-06/assets/pure-function.png -------------------------------------------------------------------------------- /Sesion-09/Postwork/assets/list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-09/Postwork/assets/list.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-03/assets/IIFE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-03/Ejemplo-03/assets/IIFE.png -------------------------------------------------------------------------------- /Sesion-05/assets/prototype-chain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-05/assets/prototype-chain.png -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-02/assets/nodes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-07/Ejemplo-02/assets/nodes.png -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-01/assets/typeof.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-01/Ejemplo-01/assets/typeof.png -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-01/assets/if-else.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-02/Ejemplo-01/assets/if-else.png -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-02/assets/switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-02/Ejemplo-02/assets/switch.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-03/assets/logName.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-03/Ejemplo-03/assets/logName.png -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-01/assets/mutable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-06/Ejemplo-01/assets/mutable.png -------------------------------------------------------------------------------- /Sesion-08/Ejemplo-01/assets/colors.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-08/Ejemplo-01/assets/colors.gif -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-03/assets/precedence.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-01/Ejemplo-03/assets/precedence.png -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-03/assets/for-loop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-02/Ejemplo-03/assets/for-loop.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-03/assets/IIFE-args.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-03/Ejemplo-03/assets/IIFE-args.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-01/assets/instances.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-05/Ejemplo-01/assets/instances.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-03/assets/prototype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-05/Ejemplo-03/assets/prototype.png -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-01/assets/immutable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-06/Ejemplo-01/assets/immutable.png -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-03/assets/sum-digits.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-06/Ejemplo-03/assets/sum-digits.png -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-01/assets/document-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-07/Ejemplo-01/assets/document-1.png -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-01/assets/document-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-07/Ejemplo-01/assets/document-2.png -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-02/assets/paragraphs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-07/Ejemplo-02/assets/paragraphs.png -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-02/assets/operators-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-01/Ejemplo-02/assets/operators-1.png -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-02/assets/operators-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-01/Ejemplo-02/assets/operators-2.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-01/assets/calculateAge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-03/Ejemplo-01/assets/calculateAge.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-02/assets/whatDoYouDo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-03/Ejemplo-02/assets/whatDoYouDo.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-02/assets/inheritance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-05/Ejemplo-02/assets/inheritance.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-03/assets/prototype-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-05/Ejemplo-03/assets/prototype-2.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-03/assets/prototype-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-05/Ejemplo-03/assets/prototype-3.png -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-03/assets/create-nodes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-07/Ejemplo-03/assets/create-nodes.png -------------------------------------------------------------------------------- /Sesion-04/Ejemplo-01/assets/multiplyByTwo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-04/Ejemplo-01/assets/multiplyByTwo.png -------------------------------------------------------------------------------- /Sesion-04/Ejemplo-02/assets/keyValuePairs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-04/Ejemplo-02/assets/keyValuePairs.png -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-02/assets/pure-function.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-06/Ejemplo-02/assets/pure-function.png -------------------------------------------------------------------------------- /Sesion-08/Ejemplo-02/assets/changing-text.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-08/Ejemplo-02/assets/changing-text.gif -------------------------------------------------------------------------------- /Sesion-08/Ejemplo-03/assets/pressing-keys.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-08/Ejemplo-03/assets/pressing-keys.gif -------------------------------------------------------------------------------- /Sesion-09/Ejemplo-01/assets/destructuring.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-09/Ejemplo-01/assets/destructuring.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-01/assets/yearsUntilRetirement.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-03/Ejemplo-01/assets/yearsUntilRetirement.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-01/assets/function-constructor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020-MASIVO/HEAD/Sesion-05/Ejemplo-01/assets/function-constructor.png -------------------------------------------------------------------------------- /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 | 20 |
21 | Solución 22 | 23 | ```javascript 24 | for(var i = 0; i <= 100; i++) { 25 | if(i % 2 === 0) { 26 | console.log( i ); 27 | } 28 | } 29 | ``` 30 |
31 | -------------------------------------------------------------------------------- /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: Funciones](./Sesion-03) 15 | 16 | - [Sesión 4: Objetos y arreglos](./Sesion-04) 17 | 18 | - [Sesión 5: Programación orientada a objetos](./Sesion-05) 19 | 20 | - [Sesión 6: Programación funcional](./Sesion-06) 21 | 22 | - [Sesión 7: Introducción al DOM](./Sesion-07) 23 | 24 | - [Sesión 8: Manipulación del DOM](./Sesion-08) 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: 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 | 25 |
26 | Solución 27 | 28 | ```javascript 29 | function getLergerInt(number1, number2) { 30 | if(number1 > number2) { 31 | return number1 32 | } else { 33 | return number2 34 | } 35 | } 36 | ``` 37 |
38 | -------------------------------------------------------------------------------- /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: 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 arreglo original. 18 | 19 | ```javascript 20 | function flatten(arrays) { 21 | ... 22 | } 23 | 24 | var arrays = [[1, 2, 3], [4, 5], [6]]; 25 | var array = flatten(arrays); 26 | 27 | console.log(array); // [1, 2, 3, 4, 5, 6] 28 | ``` 29 | 30 |
31 | Solución 32 | 33 | ```javascript 34 | function flatten(arrays) { 35 | return arrays.reduce(function(flat, current) { 36 | return flat.concat(current); 37 | }, []); 38 | } 39 | ``` 40 | 41 |
42 | -------------------------------------------------------------------------------- /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: 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 | ... 22 | } 23 | 24 | var array = [0, 1, false, 2, '', 3]; 25 | var compactedArray = compact(array); 26 | 27 | console.log(compactedArray); // [1, 2, 3] 28 | ``` 29 | 30 |
31 | Solución 32 | 33 | ```javascript 34 | function compact(array) { 35 | return array.filter(function(element) { 36 | return !!element; 37 | }); 38 | } 39 | ``` 40 | 41 |
42 | -------------------------------------------------------------------------------- /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 | 22 |
23 | Solución 24 | 25 | ```javascript 26 | for (var counter = 2; counter <= 100; counter++) { 27 | var isPrime = true; 28 | 29 | for (var i = 2; i <= counter; i++) { 30 | if (counter % i === 0 && i !== counter) { 31 | isPrime = false; 32 | } 33 | } 34 | 35 | if(isPrime) { 36 | console.log(counter); 37 | } 38 | } 39 | ``` 40 |
41 | -------------------------------------------------------------------------------- /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: 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 | 37 |
38 | Solución 39 | 40 | ```javascript 41 | const { facebook: fb, instagram: ig } = person.links.social; 42 | ``` 43 | 44 |
45 | -------------------------------------------------------------------------------- /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-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: Calcular promedio 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 `calculateAverage` la cual recibe `numbers`, un arreglo de _n_ cantidad de enteros. La función debe retornar el promedio de todos los enteros que tenga `numbers`. 18 | 19 | ```javascript 20 | function calculateAverage(numbers) { 21 | ... 22 | } 23 | ``` 24 | 25 | > Para calcular el promedio se divide la suma de todos los elementos entre el número total de elementos. 26 | 27 |
28 | Solución 29 | 30 | ```javascript 31 | function calculateAverage(numbers) { 32 | var sum = 0; 33 | 34 | for (var i = 0; i < numbers.length; i++) { 35 | sum += numbers[i]; // Same as: sum = sum + numbers[i]; 36 | } 37 | 38 | return sum / numbers.length 39 | } 40 | ``` 41 |
42 | -------------------------------------------------------------------------------- /Sesion-03/Reto-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 03`](../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 elevar `base` a la potencia `exponent`. 18 | 19 | ```javascript 20 | function power(base, exponent) { 21 | ... 22 | } 23 | ``` 24 | 25 | Recuerda que en la potenciación el `exponent` indica cuántas veces se debe multiplicar `base` por sí mismo. 26 | 27 | ```javascript 28 | 3 ^ 3 = 3 * 3 * 3 29 | 3 ^ 3 = 27 30 | ``` 31 | 32 | > Evitar usar el operador de exponenciación `**` 33 | 34 |
35 | Solución 36 | 37 | ```javascript 38 | function power(base, exponent) { 39 | var result = 1; 40 | 41 | for(var i = 0; i < exponent; i++) { 42 | result *= base; // Same as: result = result * base; 43 | } 44 | 45 | return result; 46 | } 47 | ``` 48 |
49 | -------------------------------------------------------------------------------- /Sesion-09/Reto-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 09`](../Readme.md) > `Reto 03` 2 | 3 | --- 4 | 5 | ## Reto 3: 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 | 25 |
26 | Solución 27 | 28 | ```javascript 29 | // for...of. 30 | function createPhoneNumber(numbers) { 31 | let format = '(xxx) xxx-xxxx' 32 | for (let num of numbers) { 33 | format = format.replace('x', num) 34 | } 35 | return format 36 | } 37 | 38 | // reduce() 39 | const createPhoneNumber = (numbers) => 40 | numbers.reduce((accumulator, current) => 41 | accumulator.replace('x', current), '(xxx) xxx-xxxx') 42 | ``` 43 | 44 |
45 | -------------------------------------------------------------------------------- /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-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: 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 una lado del triángulo. 18 | 19 | Agregar el método `getPerimeter` al `prototype` de `Triangle`, el cual retorna el perímetro del tríangulo. 20 | 21 | ```javascript 22 | var Triangle = function(a, b, c) { 23 | ... 24 | } 25 | 26 | var 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 | 32 |
33 | Solución 34 | 35 | ```javascript 36 | var Triangle = function(a, b, c) { 37 | this.a = a; 38 | this.b = b; 39 | this.c = c; 40 | } 41 | 42 | Triangle.prototype.getPerimeter = function() { 43 | return this.a + this.b + this.c; 44 | } 45 | ``` 46 | 47 |
48 | -------------------------------------------------------------------------------- /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: 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 de [Google](https://www.google.com/). 14 | 15 | #### Desarrollo 16 | 17 | En la consola vamos a poner la variable global `document`. Esto nos va a mostrar un objeto que representa la página web, contiene todas las etiquetas HTML de la página. 18 | 19 | ![DOM](./assets/document-1.png) 20 | 21 | Si seguimos expandiendo las etiquetas podemos ver cómo se selecciona en la pantalla el área que representa el objeto o la etiqueta por la que estamos pasando el mouse. 22 | 23 | ![DOM](./assets/document-2.png) 24 | 25 | Es importante recordar que aunque se muestre como si fuera código HTML en la consola, `document` es un objeto de JavaScript, y todas las etiquetas dentro de este también son objetos. Más adelante veremos cómo podemos manipular estos objetos y ver los cambios reflejados en la pantalla. 26 | -------------------------------------------------------------------------------- /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: Arreglo a objeto 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 | En el Ejemplo 2 se creó una función para transformar un objeto en un arreglo con los pares 14 | `[key, value]` por cada propiedad. 15 | 16 | ```javascript 17 | function keyValuePairs(obj) { 18 | var keys = Object.keys(obj); 19 | var pairs = []; 20 | 21 | for(var i = 0; i < keys.length; i++) { 22 | pairs.push( [keys[i], obj[keys[i]]] ) 23 | } 24 | 25 | return pairs; 26 | } 27 | ``` 28 | 29 | #### Desarrollo 30 | 31 | Para este reto vamos a crear una función que haga lo opuesto. Es decir, la función recibe 32 | un arreglo con pares `[key, value]` y debe retornar un objeto con sus respectivas propiedades 33 | y valores. 34 | 35 |
36 | Solución 37 | 38 | ```javascript 39 | function arrayToObject(arr) { 40 | var obj = {}; 41 | 42 | for(var i = 0; i < arr.length; i++) { 43 | obj[arr[i][0]] = arr[i][1] 44 | } 45 | 46 | return obj; 47 | } 48 | ``` 49 |
50 | -------------------------------------------------------------------------------- /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: 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`. Recibe `value`, una función `test`, una función `update` y una función `body`. En cada iteración se debe ejecutar la función `test` y terminar el ciclo si la función retorna `false`. Después se ejecuta la función `body` dándole como argumento el `value` actual. Por último se ejecuta la función `update` para crear un nuevo valor y se repite el proceso. 18 | 19 | ```javascript 20 | function loop(start, test, update, body) { 21 | ... 22 | } 23 | 24 | var test = function(n) { 25 | return n > 0; 26 | } 27 | 28 | var update = function(n) { 29 | return n - 1; 30 | } 31 | 32 | loop(3, test, update, console.log); 33 | // 3 34 | // 2 35 | // 1 36 | ``` 37 | 38 |
39 | Solución 40 | 41 | ```javascript 42 | function loop(start, test, update, body) { 43 | for (var value = start; test(value); value = update(value)) { 44 | body(value); 45 | } 46 | } 47 | ``` 48 | 49 |
50 | -------------------------------------------------------------------------------- /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: 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 | 39 |
40 | Solución 41 | 42 | ```javascript 43 | var images = document.body.getElementsByTagName("img"); 44 | for (var i = images.length - 1; i >= 0; i--) { 45 | var image = images[i]; 46 | if (image.alt) { 47 | var text = document.createTextNode(image.alt); 48 | image.parentNode.replaceChild(text, image); 49 | } 50 | } 51 | ``` 52 | 53 |
54 | -------------------------------------------------------------------------------- /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: Intercambiar variables 6 | 7 | ### Objetivos 8 | 9 | Implementar asignación por destructuring para intercambiar variables 10 | 11 | #### Requisitos 12 | 13 | `N/A` 14 | 15 | #### Desarrollo 16 | 17 | Cuando necesitamos intercambiar el valor de dos variables usualmente usamos una tercera variable temporal. 18 | 19 | ```javascript 20 | let person1 = 'John Doe'; 21 | let person2 = 'Jane Doe'; 22 | 23 | let tmp = person1; 24 | person1 = person2; 25 | person2 = tmp; 26 | 27 | console.log(`Person 1: ${person1} 28 | Person 2: ${person2}`); 29 | // Jane Doe 30 | // John Doe 31 | ``` 32 | 33 | - Obtener el mismo resultado implementando asignación por destructuring. 34 | 35 | Podemos hacer lo mismo con arreglos: 36 | 37 | ```javascript 38 | const colors = [ 'Red', 'Blue', 'Yellow' ]; 39 | ``` 40 | 41 | - Intercambiar los valores del primer elemento del arreglo con el último elemento. 42 | 43 |
44 | Solución 45 | 46 | ```javascript 47 | // Obtener el mismo resultado implementando asignación por destructuring. 48 | [ person1, person2 ] = [ person2, person1 ]; 49 | 50 | // Intercambiar los valores del primer elemento del arreglo con el último elemento. 51 | [ colors[0], colors[2] ] = [ colors[2], colors[0] ] 52 | ``` 53 | 54 |
55 | -------------------------------------------------------------------------------- /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: 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 | ... 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 | 41 |
42 | Solución 43 | 44 | ```javascript 45 | function pluck(list, propertyName) { 46 | var values = []; 47 | 48 | for (var i = 0; i < list.length; i++) { 49 | values.push( list[i][propertyName] ); 50 | } 51 | 52 | return values; 53 | } 54 | ``` 55 |
56 | -------------------------------------------------------------------------------- /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 | > Cuando usamos el operador `typeof` con `null` obtenemos como resultado `object` en lugar de `null`. 44 | Esto es considerado como un bug en JavaScript que está presente desde su creación, debido a que hay muchísimo código escrito tomando en cuenta este comportamiento, la idea de corregir este bug fue abandonada ya que causaría más problemas. 45 | 46 | ![typeof operator](./assets/typeof.png) 47 | -------------------------------------------------------------------------------- /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-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: 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 elementos de la serie que queremos. 24 | 25 | ```javascript 26 | function fibonacciSequence(limit) { 27 | ... 28 | } 29 | ``` 30 | 31 | La función debe mostrar en consola los elementos de la serie hasta que `limit` sea alcanzado. 32 | 33 | ```javascript 34 | fibonacciSequence(1); // 1 35 | fibonacciSequence(2); // 1, 1 36 | fibonacciSequence(5); // 1, 1, 2, 3, 5 37 | ``` 38 | 39 |
40 | Solución 41 | 42 | ```javascript 43 | function fibonacci(num) { 44 | if (num <= 1) return 1; 45 | 46 | return fibonacci(num - 1) + fibonacci(num - 2); 47 | } 48 | 49 | function fibonacciSequence(limit) { 50 | if(limit < 1) return console.log('Limit must be greater than 0'); 51 | 52 | for(var i = 0; i < limit; i++ ) { 53 | console.log( fibonacci(i) ); 54 | } 55 | } 56 | ``` 57 |
58 | -------------------------------------------------------------------------------- /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 sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 25 | 26 | #### Desarrollo 27 | 28 | Vamos a calcular el día de la semana dependiendode su valor númerico empezando en cero. 29 | 30 | ```javascript 31 | var day = 2; 32 | var 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/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 lógicos - if/else 6 | 7 | ### Objetivos 8 | 9 | Implementar adecuadamente los operadores lógicos 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 | var time = 13; 17 | var 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 sólo tiene 24 horas y no se está tomando en cuenta el caso en el que `time` sea una hora inválida. 33 | 34 | Utilizando lo visto hasta el momento sobre operadores lógicos y condicionales, debes crear un nuevo mensaje que será usado cuando `time` sea una hora que no existe en el día. 35 | 36 |
37 | Solución 38 | 39 | ```javascript 40 | var time = 27; 41 | var greeting; 42 | 43 | if (time >= 0 && time < 12) { 44 | greeting = "Good morning"; 45 | } else if (time >= 12 && time < 20) { 46 | greeting = "Good afternoon"; 47 | } else if (time >= 20 && time < 24) { 48 | greeting = "Good evening"; 49 | } else { 50 | greeting = "Unknown hour"; 51 | } 52 | 53 | console.log(greeting) // Unknown hour 54 | ``` 55 |
56 | -------------------------------------------------------------------------------- /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 sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 25 | 26 | #### Desarrollo 27 | 28 | Pensemos que queremos repetir un texto 5 veces y que aparezca en consola: 29 | 30 | 31 | ```javascript 32 | console.log("Hello World"); 33 | console.log("Hello World"); 34 | console.log("Hello World"); 35 | console.log("Hello World"); 36 | console.log("Hello World"); 37 | ``` 38 | 39 | Excelente, funcionará y se reflejarán en la consola. 40 | 41 | Ahora bien, si te dijera que queremos repetirlo 200 veces, entonces copiar y pegar cada línea se volvería ineficiente (aparte de odiar al que te dio la instrucción). 42 | 43 | ¿Qué podemos hacer? 44 | 45 | ```javascript 46 | for(var 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-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 sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 25 | 26 | #### Desarrollo 27 | 28 | Vamos a dar un saludo adecuado dependiendo de la hora. 29 | 30 | ```javascript 31 | var time = 13; 32 | var 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 | var time = 13; 55 | var 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-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: 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 sólo 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 | var Group = function() { 29 | ... 30 | } 31 | 32 | var 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 |
42 | Solución 43 | 44 | ```javascript 45 | var Group = function() { 46 | this.members = []; 47 | } 48 | 49 | Group.prototype.add = function(value) { 50 | if (!this.has(value)) { 51 | this.members.push(value); 52 | } 53 | } 54 | 55 | Group.prototype.has = function(value) { 56 | return this.members.includes(value); 57 | } 58 | 59 | Group.from = function(collection) { 60 | var group = new Group(); 61 | 62 | for(var i = 0; i < collection.length; i++) { 63 | group.add(collection[i]); 64 | } 65 | return group; 66 | } 67 | ``` 68 | 69 |
70 | -------------------------------------------------------------------------------- /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: 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-3.js` que es donde se trabajarán los ejemplos de esta sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 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 función dentro de paréntesis. 29 | 30 | ```javascript 31 | function whatDoYouDo(job, name) { 32 | ... 33 | } 34 | ``` 35 | 36 | La sintaxis cambia un poco en una expresión de función. 37 | 38 | ```javascript 39 | var whatDoYouDo = function(job, name) { 40 | switch (job) { 41 | case 'developer': 42 | return name + ' develops cool apps.'; 43 | case 'designer': 44 | return name + ' designs awesome websites.'; 45 | default: 46 | return name + ' does something else.' 47 | } 48 | } 49 | 50 | console.log(whatDoYouDo('developer', 'John Doe')); 51 | console.log(whatDoYouDo('designer', 'Jane Doe')); 52 | console.log(whatDoYouDo('retired', 'Mark Doe')); 53 | ``` 54 | > No es necesario incluir `break` en cada caso del `switch` porque `return` finaliza la función, el siguiente código no es ejecutado. 55 | 56 | ![whatDoYouDo](./assets/whatDoYouDo.png) 57 | -------------------------------------------------------------------------------- /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: 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 anteriores. 33 | 34 | #### Desarrollo 35 | 36 | En el ejemplo anterior vimos como cambiar las propiedad de un nodo a través de event handlers. En este ejemplo vamos a usar la información contenida en el event object para manipular el DOM. 37 | 38 | ```javascript 39 | var title = document.getElementById('title'); 40 | 41 | var input = document.getElementById('text'); 42 | ``` 43 | 44 | Ahora usaremos el método `addEventListener` para registrar un handler en el ``, el evento que queremos escuchar es `input`, el cual se dispara cuando hay un cambio en el nodo. 45 | 46 | ```javascript 47 | input.addEventListener("input", function(event) { 48 | title.textContent = event.target.value; 49 | }); 50 | ``` 51 | 52 | La propiedad `textContent` nos permite obtener o cambiar el contenido de texto de un nodo. La propiedad `target` del event object es una referencia al nodo que lanzó el evento, en este caso nuestro ``, por lo que podemos acceder al atributo `value` de ese elemento. 53 | 54 | ![Changing Text](./assets/changing-text.gif) 55 | -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 03`](../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-3.js` que es donde se trabajarán los ejemplos de esta sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 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 | var 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, posteriormente usamos `()` para ejecutar la función justo después de ser definida. 42 | 43 | ```javascript 44 | (function() { 45 | var name = "John Doe"; 46 | console.log(name); 47 | })(); 48 | ``` 49 | 50 | ![IIFE](./assets/IIFE.png) 51 | 52 | Como ya fue ejecutada y es anónima, no hay forma de que podamos volver a llamar la función de nuevo. 53 | 54 | También se pueden pasar argumentos a este tipo de funciones, de la misma forma que lo hacemos con las funciones normales. 55 | 56 | ```javascript 57 | (function(lastName) { 58 | var firstName = "John"; 59 | console.log(firstName + ' ' + lastName); 60 | })('Doe'); 61 | ``` 62 | 63 | ![IIFE With Arguments](./assets/IIFE-args.png) 64 | -------------------------------------------------------------------------------- /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: 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 anteriores. 35 | 36 | #### Desarrollo 37 | 38 | En este ejemplo vamos a cambiar el color del título agregando event handlers a todos los botones del documento. Tanto el título como los botones cuentan con un id único por lo que podemos usar `getElementById`. 39 | 40 | ```javascript 41 | var title = document.getElementById('title'); 42 | 43 | var redButton = document.getElementById('red'); 44 | 45 | var blueButton = document.getElementById('blue'); 46 | 47 | var blackButton = document.getElementById('black'); 48 | ``` 49 | 50 | Ahora usaremos el método `addEventListener` para registrar un handler a cada botón. El cambio de color lo haremos asignando la propiedad `style` del nodo `title`. 51 | 52 | ```javascript 53 | redButton.addEventListener("click", function() { 54 | title.style = "color: red;"; 55 | }); 56 | 57 | blueButton.addEventListener("click", function() { 58 | title.style = "color: blue;"; 59 | }); 60 | 61 | blackButton.addEventListener("click", function() { 62 | title.style = "color: black;"; 63 | }); 64 | ``` 65 | 66 | ![Ejemplo 1](./assets/colors.gif) 67 | -------------------------------------------------------------------------------- /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: 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`, ambos valores numéricos que deben ser las propiedades del objeto. 18 | 19 | Agregar los siguientes métodos al `prototype` de `Vec`: 20 | 21 | 1. `plus`: Recibe otro vector como parámetro y retorna un nuevo vector con la suma de ambos vectores. 22 | 23 | 2. `minus`: Recibe otro vector como parámetro y retorna un nuevo vector con la diferencia de ambos vectores. 24 | 25 | 3. `length`: Retorna la longitud del vector, es decir, la distancia del punto _(x, y)_ desde el origen _(0, 0)_. 26 | 27 | ```javascript 28 | var Vec = function(x, y) { 29 | ... 30 | } 31 | 32 | var vec1 = new Vec(1, 2); 33 | var vec2 = new Vec(2, 3); 34 | 35 | console.log(vec1.plus(vec2)); // Vec { x: 3, y: 5 } 36 | console.log(vec1.minus(vec2)); // Vec { x: -1, y: -1 } 37 | console.log(vec1.length()); // 2.23606797749979 38 | ``` 39 | 40 | > Para calcular la distancia desde (0, 0) hasta (x, y) se puede usar el teorema de Pitágoras: √(x2 + y2). En JavaScript existe el método `Math.sqrt` para calcular raíces cuadradas. 41 | 42 |
43 | Solución 44 | 45 | ```javascript 46 | var Vec = function(x, y) { 47 | this.x = x; 48 | this.y = y; 49 | } 50 | 51 | Vec.prototype.plus = function(other) { 52 | return new Vec(this.x + other.x, this.y + other.y); 53 | } 54 | 55 | Vec.prototype.minus = function(other) { 56 | return new Vec(this.x - other.x, this.y - other.y); 57 | } 58 | 59 | Vec.prototype.length = function() { 60 | return Math.sqrt(this.x * this.x + this.y * this.y); 61 | } 62 | ``` 63 | 64 |
65 | -------------------------------------------------------------------------------- /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: 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 (disminuir su tamaño) un 10% el presionar la flecha hacia abajo. 35 | 36 | Los emojis son considerados como texto por lo que puedes controlar el tamaño con la propiedad de CSS `font-size`. El valor inicial debe ser de `20px`. 37 | 38 | Los nombres de las teclas de flecha que necesitas son `ArrowUp` y `ArrowDown`. Con el método `preventDefault()` podemos evitar que la página haga un scroll al presionar estas teclas. 39 | 40 | Por último, si el tamaño del globo es mayor a `80px` se debe reemplazar por el emoji 💥 y eliminar el event handler. 41 | 42 |
43 | Solución 44 | 45 | ```javascript 46 | var p = document.querySelector("p"); 47 | var size; 48 | 49 | function setSize(newSize) { 50 | size = newSize; 51 | p.style.fontSize = size + "px"; 52 | } 53 | 54 | setSize(20); 55 | 56 | function handleArrow(event) { 57 | if (event.key == "ArrowUp") { 58 | if (size > 80) { 59 | p.textContent = "💥"; 60 | document.body.removeEventListener("keydown", handleArrow); 61 | } else { 62 | setSize(size * 1.1); 63 | event.preventDefault(); 64 | } 65 | } else if (event.key == "ArrowDown") { 66 | setSize(size * 0.9); 67 | event.preventDefault(); 68 | } 69 | } 70 | 71 | document.body.addEventListener("keydown", handleArrow); 72 | ``` 73 | 74 |
75 | -------------------------------------------------------------------------------- /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: 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 anteriores. 33 | 34 | #### Desarrollo 35 | 36 | En este ejemplo vamos a ver cómo cambiar la estructura del DOM. Lo primero es seleccionar todas las etiquetas `p` del documento, esto lo podemos lograr con el método `getElementsByTagName`. 37 | 38 | ```javascript 39 | var paragraphs = document.body.getElementsByTagName("p"); 40 | 41 | console.log('Colección de nodos: ', paragraphs); 42 | 43 | console.log('Primer nodo: ', paragraphs[0]); 44 | console.log('Segundo nodo: ', paragraphs[1]); 45 | console.log('Tercer nodo: ', paragraphs[2]); 46 | ``` 47 | 48 | Podemos ver en consola que `paragraphs` representa una colección con las tres etiquetas `p` de nuestro documento. 49 | 50 | ![Paragraphs](./assets/paragraphs.png) 51 | 52 | Vamos a cambiar el orden de estos nodos con el método `insertBefore`, el cual recibe dos argumentos, el primero es el nodo a insertar justo antes del nodo proporcionado como segundo argumento. 53 | 54 | ![Nodes](./assets/nodes.png) 55 | 56 | Al abrir la página vemos que el órden de los párrafos cambia. Un nodo puede existir en el documento en un sólo lugar a la vez, por lo que al insertar `Three` antes de `One` primero se elimina del final de la lista para insertarse al principio. **Todas las operaciones que impliquen insertar nodos tienen como efecto secundario la eliminación del nodo en la posición actual** si es que ya existe en el DOM. 57 | -------------------------------------------------------------------------------- /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: 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 | Ejemplo 1: Object destructuring 20 | 21 | 22 | 23 | 24 | 25 | ``` 26 | 27 | Dentro de la misma carpeta creamos un archivo `ejemplo-1.js` que es donde se trabajará este ejemplo. Finalmente abre el 28 | archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 29 | 30 | #### Desarrollo 31 | 32 | Si la propiedad que queremos extraer no existe en el objeto se retorna `undefined`. Podemos usar asignar un valor por 33 | default en caso de no encontrar la propiedad que buscamos. Para esto debemos asignar (`=`) un valor dentro de las llaves. 34 | 35 | ```javascript 36 | const person = { 37 | firstName: 'John', 38 | lastName: 'Doe' 39 | }; 40 | 41 | const { firstName, country = 'Unknown' } = person; 42 | 43 | console.log(firstName, country); // John Unknown 44 | ``` 45 | 46 | En ocasiones no queremos usar el mismo nombre de la propiedad del objeto, por ejemplo cuando estamos consumiendo 47 | información de un recurso externo o de una base de datos. Usando `:` podemos renombrar una variable. 48 | 49 | ```javascript 50 | const person = { 51 | firstName: 'John', 52 | lastName: 'Doe' 53 | }; 54 | 55 | const { firstName: name } = person; 56 | 57 | console.log(name); // John 58 | ``` 59 | 60 | 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 61 | complejos. 62 | 63 | ```javascript 64 | const person = { 65 | firstName: 'John', 66 | lastName: 'Doe' 67 | }; 68 | 69 | const { firstName: name, country: ctry = 'Unknown'} = person; 70 | 71 | console.log(name, ctry); // John Unknown 72 | ``` 73 | 74 | ![Object Destructuring](./assets/destructuring.png) 75 | -------------------------------------------------------------------------------- /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: 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 24 | se trabajarán los ejemplos de esta sesión. Finalmente abre el archivo `index.html` 25 | en Chrome e inspecciona la consola para ver los resultados. 26 | 27 | 28 | #### Desarrollo 29 | 30 | Vamos a crear una función que convierta un objeto en un arreglo con los pares 31 | `[key, value]` por cada propiedad. 32 | 33 | ```javascript 34 | var car = { 35 | brand: 'Nissan', 36 | model: 'Versa', 37 | year: 2020 38 | } 39 | 40 | [['brand', 'Nissan'], ['model', 'Versa'], ['year', 2020]] // Resultado esperado 41 | ``` 42 | 43 | Para resolver este ejercicio haremos uso del método [`Object.keys()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) el cual retorna un arreglo con el nombre de las propiedades de un objeto. 44 | 45 | ```javascript 46 | var obj = { 47 | a: 'some string', 48 | b: 42, 49 | c: false 50 | }; 51 | 52 | console.log( Object.keys(obj) ); // ['a', 'b', 'c'] 53 | ``` 54 | 55 | Después usaremos un ciclo para ir recorriendo todas las propiedades del objeto e ir obteniendo sus respectivos valores. 56 | 57 | ```javascript 58 | function keyValuePairs(obj) { 59 | var keys = Object.keys(obj); 60 | var pairs = []; 61 | 62 | for(var i = 0; i < keys.length; i++) { 63 | pairs.push( [keys[i], obj[keys[i]]] ) 64 | } 65 | 66 | return pairs; 67 | } 68 | ``` 69 | 70 | > El método `push()` agrega un nuevo elemento al final de un arreglo. 71 | 72 | ```javascript 73 | var result = keyValuePairs(car); 74 | 75 | console.log(result); 76 | 77 | // [['brand', 'Nissan'], ['model', 'Versa'], ['year', 2020]] 78 | ``` 79 | 80 | ![keyValuePairs](./assets/keyValuePairs.png) 81 | -------------------------------------------------------------------------------- /Sesion-08/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 08`](../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 | Ejemplo 3: Key events 19 | 20 | 21 | 22 |

Press Enter to turn this page blue.

23 |

Press Ctrl + Enter to turn this page orange.

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 anteriores. 33 | 34 | #### Desarrollo 35 | 36 | En este ejemplo vamos a ver cómo realizar un cambio en el DOM al presionar una tecla o combinación de teclas. Agregaremos un event handler a la global `window` de tipo `keydown` que se ejecuta al presionar una tecla. 37 | 38 | ```javascript 39 | window.addEventListener("keydown", function(event) { 40 | if (event.key == "Enter") { 41 | document.body.style.background = "lightblue"; 42 | } 43 | 44 | if (event.key == "Enter" && event.ctrlKey) { 45 | document.body.style.background = "orange"; 46 | } 47 | }); 48 | ``` 49 | 50 | Estamos leyendo dos propiedades del event object, la primera es `key` que nos dice qué tecla fue presionada. La segunda propiedad que nos interesa es `ctrlKey` que nos ayuda a determinar si la tecla `ctrl` estuvo presionada cuando se lanzó el evento. Vamos a cambiar el color de fondo del documento, si se presiona solamente la tecla `Enter` el color será azul, pero si se presiona la combinación de teclas `Ctrl + Enter` entonces el color será naraja. 51 | 52 | ```javascript 53 | window.addEventListener("keyup", function(event) { 54 | if (event.key == "Enter") { 55 | document.body.style.background = ""; 56 | } 57 | }); 58 | ``` 59 | 60 | Por último, necesitamos regresar al color por default cuando las teclas fueron soltadas, para eso utilizamos el evento `keyup` y verificamos que la tecla que se soltó es la misma que cambia el color, es decir, la tecla `Enter`. 61 | 62 | ![Pressing Keys](./assets/pressing-keys.gif) 63 | -------------------------------------------------------------------------------- /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: 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 sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 25 | 26 | #### Desarrollo 27 | 28 | Vamos a crear una función que reciba como argumento un arreglo con _n_ cantidad de enteros, dicha función debe retornar un nuevo arreglo con todos los elementos del primer arreglo multiplicados por dos. 29 | 30 | ```javascript 31 | [1, 3, 4, 7, 2, 1, 9, 0] // Arreglo inicial 32 | 33 | [2, 6, 8, 14, 4, 2, 18, 0] // Resultado esperado 34 | ``` 35 | 36 | Una forma de resolverlo es recorriendo cada elemento del arreglo con un ciclo `for`, multiplicando el número por dos y guardándalo en un nuevo arreglo para retornarlo al final. 37 | 38 | ```javascript 39 | function multiplyByTwo(numbers) { 40 | var multipliedNumbers = []; 41 | 42 | for(var i = 0; i < numbers.length; i++) { 43 | multipliedNumbers.push(numbers[i] * 2); 44 | } 45 | 46 | return multipliedNumbers; 47 | } 48 | ``` 49 | 50 | > El método `push()` agrega un nuevo elemento al final de un arreglo. 51 | 52 | Como estamos comparando que `i < numbers.length` el ciclo va a terminar con el último elemento del arreglo. 53 | 54 | ```javascript 55 | function multiplyByTwo(numbers) { 56 | var multipliedNumbers = []; 57 | 58 | for(var i = 0; i < numbers.length; i++) { 59 | multipliedNumbers.push(numbers[i] * 2); 60 | } 61 | 62 | return multipliedNumbers; 63 | } 64 | 65 | var input = [1, 3, 4, 7, 2, 1, 9, 0]; 66 | 67 | var output = multiplyByTwo(input); 68 | 69 | console.log(input); // [1, 3, 4, 7, 2, 1, 9, 0] 70 | console.log(output); // [2, 6, 8, 14, 4, 2, 18, 0] 71 | ``` 72 | 73 | ![multiplyByTwo](./assets/multiplyByTwo.png) 74 | -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 05`](../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 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-5.js` que es donde se trabajarán los ejemplos de esta sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 25 | 26 | #### Desarrollo 27 | 28 | En el [Ejemplo 1](../Ejemplo-01) creamos el siguiente constructor: 29 | 30 | ```javascript 31 | var Person = function(name, birthYear, job) { 32 | this.name = name; 33 | this.birthYear = birthYear; 34 | this.job = job; 35 | } 36 | ``` 37 | 38 | Vamos a agregar un método `calculateAge()` similar al que hicimos la sesión anterior, pero no lo vamos a poner en el constructor, en su lugar lo vamos a crear dentro del prototype. 39 | 40 | ```javascript 41 | Person.prototype.calculateAge = function() { 42 | var today = new Date(); 43 | var year = today.getFullYear(); 44 | 45 | console.log( year - this.birthYear ); 46 | } 47 | ``` 48 | 49 | Ahora vamos a crear múltiples instancias de `Person`. 50 | 51 | ```javascript 52 | var john = new Person('John', 1990, 'Developer'); 53 | 54 | var mark = new Person('Mark', 1985, 'Teacher'); 55 | 56 | var jane = new Person('Jane', 1975, 'Designer'); 57 | ``` 58 | 59 | Si inspeccionamos en consola estos tres objetos nos damos cuenta que ninguno de ellos tiene el método `calculateAge()`. 60 | 61 | ![Prototype](./assets/prototype.png) 62 | 63 | Aún así podemos llamar `calculateAge()` en los tres objetos. 64 | 65 | ```javascript 66 | john.calculateAge(); 67 | 68 | mark.calculateAge(); 69 | 70 | jane.calculateAge(); 71 | ``` 72 | 73 | ![Prototype](./assets/prototype-2.png) 74 | 75 | Si inspeccionamos más a detalle estos objetos podemos encontrar el método `calculateAge()` dentro de `__proto__` que es el prototype del objeto. Incluso nos muestra cuál es el contructor del que fue instanciado. De hecho, podemos inspeccionar todo el prototype chain. 76 | 77 | ![Prototype](./assets/prototype-3.png) 78 | -------------------------------------------------------------------------------- /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: 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 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-5.js` que es donde se trabajarán los ejemplos de esta sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 25 | 26 | #### Desarrollo 27 | 28 | Ya mencionamos que podemos usar un constructor para crear múltiples objetos como: 29 | 30 | ```javascript 31 | var john = { 32 | name: 'John', 33 | birthYear: 1990, 34 | job: 'Developer' 35 | } 36 | ``` 37 | 38 | La forma más común de hacer esto es mediante un `function constructor`, el cuál es una expresión de función como la siguiente: 39 | 40 | ```javascript 41 | var Person = function(name, birthYear, job) { 42 | this.name = name; 43 | this.birthYear = birthYear; 44 | this.job = job; 45 | } 46 | ``` 47 | 48 | > Cuando estamos creando constructores una convención es nombrarlas con la primera letra mayúscula para diferenciar el constructor de las instancias. 49 | 50 | Vemos que este constructor recibe tres argumentos los cuáles son las propiedades que queremos que tenga nuestro objeto. 51 | 52 | ```javascript 53 | var john = new Person('John', 1990, 'Developer'); 54 | ``` 55 | 56 | 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 constructor utiliza `this`, está haciendo referencia al nuevo objeto vacío para asignarle las propiedades. 57 | 58 | ```javascript 59 | console.log( john ); 60 | /* 61 | * { 62 | * name: 'John', 63 | * birthYear: 1990, 64 | * job: 'Developer' 65 | * } 66 | */ 67 | ``` 68 | 69 | Hemos creado un objeto `john` el cuál es una instancia del constructor `Person`. 70 | 71 | ![Function Constructor](./assets/function-constructor.png) 72 | 73 | De esta manera podemos crear todas las instancias que sean necesarias a partir del mismo construcor. 74 | 75 | ```javascript 76 | var mark = new Person('Mark', 1985, 'Teacher'); 77 | 78 | var jane = new Person('Jane', 1975, 'Designer'); 79 | ``` 80 | 81 | ![Instances](./assets/instances.png) 82 | -------------------------------------------------------------------------------- /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: 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 sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 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 | var 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 valor puede ser guardado en una variable. 38 | 39 | ```javascript 40 | var ageJohn = calculateAge(1995); 41 | ``` 42 | 43 | Para ejecutar una función colocamos el nombre de la función seguido de `()` con los argumentos necesarios. En este ejemplo la variable `ageJohn` contiene el resultado que retorne `calculateAge()`. 44 | 45 | ```javascript 46 | function calculateAge(birthYear) { 47 | var age = 2020 - birthYear; 48 | return age; 49 | } 50 | 51 | var ageJohn = calculateAge(1995); 52 | 53 | console.log(ageJohn); // 25 54 | ``` 55 | 56 | ![calculateAge](./assets/calculateAge.png) 57 | 58 | Ahora podemos llamar la misma función las veces que queramos sin necesidad de repetir las mismas líneas de código una y otra vez. Las funciones también pueden llamar a otras funciones. 59 | 60 | ```javascript 61 | function yearsUntilRetirement(year, name) { 62 | var age = calculateAge(year); 63 | var retirement = 65 - age; 64 | console.log(name + ' retires in ' + retirement + ' years.'); 65 | } 66 | ``` 67 | 68 | Algunas funciones no retornan valor alguno, como `yearsUntilRetirement` qué sólo muestra un mensaje en consola. En este caso no podemos guardar el resultado en una variable como hicimos con `ageJohn`. 69 | 70 | ```javascript 71 | yearsUntilRetirement(1995, 'John Doe'); 72 | // John Doe retires in 40 years. 73 | ``` 74 | 75 | ![yearsUntilRetirement](./assets/yearsUntilRetirement.png) 76 | -------------------------------------------------------------------------------- /Sesion-08/Reto-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 08`](../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 ` 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 propiedad de CSS `display: none;`. Al hacer click en el botón se debe mostrar un modal con una imagen. Usar la url `https://picsum.photos/300/200` para mostrar una imagen aleatoria. Una vez abierto el modal aparece una X en la esquina superior derecha, al hacer click se debe cerrar el modal. 81 | 82 |
83 | Solución 84 | 85 | ```javascript 86 | var modal = document.getElementById("modal"); 87 | 88 | var button = document.getElementsByTagName('button')[0]; 89 | var modalImage = document.getElementById("modal-image"); 90 | var close = document.getElementsByClassName("close")[0]; 91 | 92 | button.addEventListener('click', function() { 93 | modal.style.display = "block"; 94 | modalImage.src = 'https://picsum.photos/300/200'; 95 | }) 96 | 97 | close.addEventListener('click', function() { 98 | modal.style.display = "none"; 99 | }) 100 | ``` 101 | 102 |
103 | -------------------------------------------------------------------------------- /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-05/Ejemplo-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 05`](../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 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-5.js` que es donde se trabajarán los ejemplos de esta sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 25 | 26 | #### Desarrollo 27 | 28 | Ya vimos cómo podemos instanciar objetos a partir del mismo constructor. 29 | 30 | ```javascript 31 | var Person = function(name) { 32 | this.name = name; 33 | } 34 | 35 | var john = new Person('John'); 36 | ``` 37 | 38 | En ocasiones necesitamos que un constructor tenga las propiedades de otro. 39 | 40 | ```javascript 41 | var Developer = function(skills, yearsOfExperience) { 42 | this.skills = skills; 43 | this.yearsOfExperience = yearsOfExperience; 44 | } 45 | ``` 46 | 47 | Con este constructor `Developer` podemos instanciar múltiples objetos que tendran las propiedades `skils` y `yearsOfExperience`. Pero también necesitamos la propiedad `name` del constructor `Person`, pues un desarrollador también es una persona que tiene nombre. Para esto usamos el método `call()` el cual ejecuta el constructor padre. 48 | 49 | ```javascript 50 | var Person = function(name) { 51 | this.name = name; 52 | } 53 | 54 | var Developer = function(name, skills, yearsOfExperience) { 55 | Person.call(this, name); 56 | 57 | this.skills = skills; 58 | this.yearsOfExperience = yearsOfExperience; 59 | } 60 | ``` 61 | 62 | Decimos que el constructor `Developer` es hijo del constructor `Person` porque queremos que `Developer` herede la propiedad `name` de `Person`. 63 | 64 | `Person.call(this, name);` llama al constructor padre y retorna un objeto con todas sus propiedades. `this` en este contexto está haciendo referencia a `Developer`. 65 | 66 | ```javascript 67 | var Person = function(name) { 68 | this.name = name; 69 | } 70 | 71 | var Developer = function(name, skills, yearsOfExperience) { 72 | Person.call(this, name); 73 | 74 | this.skills = skills; 75 | this.yearsOfExperience = yearsOfExperience; 76 | } 77 | 78 | var john = new Developer('John', 'JavaScript', 10); 79 | 80 | console.log( john ); 81 | ``` 82 | 83 | 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. 84 | 85 | ![Inheritance](./assets/inheritance.png) 86 | -------------------------------------------------------------------------------- /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: 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 | 19 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-6.js` que es donde se trabajarán los ejemplos de esta sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 25 | 26 | #### Desarrollo 27 | 28 | Para ver cómo funciona la inmutabilidad vamos a empezar creando un objeto que represente un carro. 29 | 30 | ```javascript 31 | var car = { 32 | brand: 'Nissan', 33 | model: 'Sentra', 34 | year: 2020 35 | } 36 | ``` 37 | 38 | Ahora vamos a crear una función que agregue la propiedad color al auto. 39 | 40 | ```javascript 41 | function addColor(car) { 42 | car.color = 'Black'; 43 | 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 | var 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 propiedad `color`, después de llamar a la función vemos la propiedad en ambos objetos. 62 | 63 | El objeto retornado por `addColor` es el mismo que recibió. Ambas variables, tanto `car` como `sameCar` están apuntando al mismo objeto en memoria. 64 | 65 | ![Mutable](./assets/mutable.png) 66 | 67 | Tenemos que hacer unos cambios para que `addColor` no mute el objeto que recibe. 68 | 69 | ```javascript 70 | function addColor(car) { 71 | var newCar = Object.assign({}, car, { 72 | color: 'Black' 73 | }); 74 | 75 | return newCar; 76 | } 77 | ``` 78 | 79 | `Object.assign()` asigna las propiedades de un objeto a otro sin modificar el objeto original. En este ejemplo está copiando todas las propiedades de `car` en un nuevo objeto vacío `{}` y agregando la propiedad `color`. 80 | 81 | ```javascript 82 | console.log('Before calling addColor()', car); 83 | 84 | var newCar = addColor(car); 85 | 86 | console.log('After calling addColor()', car); 87 | console.log('After calling addColor()', newCar); 88 | 89 | console.log('Same car?', car === newCar); // false 90 | ``` 91 | 92 | Como ahora la función `addColor` está creando un nuevo objeto vemos que `car` no cambia sus propiedades y el objeto retornado es diferente al que recibe la función. 93 | 94 | ![Immutable](./assets/immutable.png) 95 | -------------------------------------------------------------------------------- /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: 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`, el segundo paso es crear otro nodo de texto con `document.createTextNode`, el último paso es agregar el texto como hijo del nodo creado en el primero paso. 39 | 40 | En este ejemplo vamos a crear una función que se encargue de estos tres pasos, la función recibirá dos argumentos, el primero será el tipo de nodo que queremos, y el segundo el hijo. Usaremos esta función para agregar el autor de la frase que ya tenemos en nuestro documento. 41 | 42 | ```javascript 43 | function createNode(type, child) { 44 | var node = document.createElement(type); 45 | var text = document.createTextNode(child); 46 | 47 | node.appendChild(text); 48 | 49 | return node; 50 | } 51 | 52 | console.log(createNode('h1', 'Hello World')); //

Hello World

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

74 | * Hello World 75 | *

76 | **/ 77 | ``` 78 | 79 | Con esta función es ahora más fácil crear nodos con sus respectivos hijos. Ahora podemos seleccionar el nodo que contiene la frase célebre con su respectivo id y agregar el autor. 80 | 81 | ```javascript 82 | document.getElementById("quote") 83 | .appendChild( 84 | createNode("footer", createNode("strong", "- Karl Popper")) 85 | ) 86 | ``` 87 | > 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 lectura. 88 | 89 | ![Create Nodes](./assets/create-nodes.png) 90 | -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 06`](../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 | 19 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-6.js` que es donde se trabajarán los ejemplos de esta sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 25 | 26 | #### Desarrollo 27 | 28 | En el ejemplo anterior buscamos la forma de hacer una función que no mutara el objeto que recibe. 29 | 30 | ```javascript 31 | function addColor(car) { 32 | var newCar = Object.assign({}, car, { 33 | color: 'Black' 34 | }); 35 | 36 | return newCar; 37 | } 38 | ``` 39 | 40 | Tratando de no mutar `car` terminamos creando una función pura, como podrás ver no produce ningún efecto secundario. Es por ello que la inmutabilidad está muy ligada a las funciones puras. 41 | 42 | Veamos otro ejemplo. Tenemos un carrito de compras y queremos crear una función que agregue más artículos. 43 | 44 | ```javascript 45 | var cart = [ 46 | { 47 | item: 'Laptop', 48 | quantity: 1 49 | } 50 | ] 51 | ``` 52 | 53 | Como el carrito va a almacenar múltiples elementos usaremos un arreglo. Cada artículo será representado por un objeto con dos propiedades `item` y `quantity`. 54 | 55 | ```javascript 56 | function addItemToCart(item, quantity) { 57 | cart.push({ 58 | item: item, 59 | quantity: quantity 60 | }) 61 | } 62 | ``` 63 | 64 | La solución más obvia sería usar `push()` para agregar un nuevo objeto con las propiedades `item` y `quantity`. Esta función no es pura porque está modificando `cart`, una variable que no se encuentra dentro de esta función. Quizás en este ejemplo no es un problema, pero si estuviéramos haciendo una tienda en línea, es posible que otras partes de la aplicación intenten acceder a `cart` al mismo tiempo que estamos ejecutando la función `addItemToCart` y eso sí podría representar un problema como falta de inconsistencia en los datos. 65 | 66 | ```javascript 67 | function addItemToCart(cart, item, quantity) { 68 | var newCart = cart.map(function(element) { 69 | return element; 70 | }); 71 | 72 | newCart.push({ 73 | item: item, 74 | quantity: quantity 75 | }) 76 | 77 | return newCart; 78 | } 79 | ``` 80 | > Como `map()` crea un nuevo arreglo lo podemos usar para crear una copia retornando el parámetro que recibe sin modificarlo. 81 | 82 | Una alternativa sería pasar `cart` como argumento a la función. Hacer una copia de todo el arreglo para no mutar el original, agregar el nuevo objeto y retornar el arreglo actualizado. 83 | 84 | ```javascript 85 | cart = addItemToCart(cart, 'Phone', 1); 86 | 87 | console.log(cart); 88 | ``` 89 | 90 | Esta sería una forma más funcional, recuerda que en este paradigma se da prioridad a la inmutabilidad, lo que significa crear nuevas variables que van a reemplazar a los valores antiguos. 91 | 92 | ![Pure Function](./assets/pure-function.png) 93 | -------------------------------------------------------------------------------- /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: 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 ``. 62 | Dentro de cada fila podemos crear celdas como headers `
` o celdas regulares ``. 63 | 64 | Crear una tabla a partir de la información proporcionada por `data`, un arreglo 65 | de objetos con las propiedades `name`, `height` y `place`. La tabla debe contener 66 | una columna por cada propiedad, y una fila por cada objeto. Adicionalmente debe 67 | contener una fila con headers `` listando el nombre de cada columna, el cual 68 | corresponde a las propiedades del objeto. 69 | 70 | Alinear hacia la derecha las celdas que contengan valores numéricos asignando a la 71 | propiedad `style.textAlign` el valor `right`. 72 | 73 |
74 | Solución 75 | 76 | ```javascript 77 | function buildTable(data) { 78 | var table = document.createElement("table"); 79 | 80 | var fields = Object.keys(data[0]); 81 | var headRow = document.createElement("tr"); 82 | fields.forEach(function(field) { 83 | var headCell = document.createElement("th"); 84 | headCell.appendChild(document.createTextNode(field)); 85 | headRow.appendChild(headCell); 86 | }); 87 | table.appendChild(headRow); 88 | 89 | data.forEach(function(object) { 90 | var row = document.createElement("tr"); 91 | fields.forEach(function(field) { 92 | var cell = document.createElement("td"); 93 | cell.appendChild(document.createTextNode(object[field])); 94 | if (typeof object[field] == "number") { 95 | cell.style.textAlign = "right"; 96 | } 97 | row.appendChild(cell); 98 | }); 99 | table.appendChild(row); 100 | }); 101 | 102 | return table; 103 | } 104 | 105 | document.getElementById("mountains") 106 | .appendChild(buildTable(data)); 107 | ``` 108 | 109 |
110 | -------------------------------------------------------------------------------- /Sesion-03/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | [`Programación con JavaScript`](../Readme.md) > `Sesión 03` 3 | 4 | # Sesión 3: 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 | - [Reto 2: Número mayor](./Reto-02) 29 | 30 | - [Reto 3: Fibonacci](./Reto-03) 31 | 32 | --- 33 | 34 | ## ¿Qué es una función? 35 | 36 | Uno de los conceptos más importantes en JavaScript. Una función es un conjunto de sentencias que realizan una tarea o 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 las veces que sea necesario. 37 | 38 | ```javascript 39 | function myFunction(parameter1, parameter2) { 40 | // Código a ejecutar 41 | } 42 | ``` 43 | 44 | - `function` - La palabra clave que usamos para definir una función. 45 | 46 | - `myFunction` - Es el nombre que le damos a la función. Puede contener letras, números, guión bajo y el signo de dólar. 47 | 48 | - `(parameter1, parameter2)` - Dentro de los paréntesis colocamos los parámetros de la función separados por coma. Los parámetros son variables que se van a usar dentro de la función y no es necesario declararlas nuevamente dentro de la función. Algunas funciones no reciben parámetros, por lo que los paréntesis pueden ir vacios. 49 | 50 | #### [Ejemplo 1: Funciones](./Ejemplo-01) 51 | 52 | #### [Reto 1: Potenciación](./Reto-01) 53 | 54 | --- 55 | 56 | ## Expresiones de función 57 | 58 | La sintaxis que hemos visto hasta ahora se le conoce como **declaración de función** o **sentencia de función**. Las funciones también pueden ser creadas mediante una **expresión de función**. 59 | 60 | #### [Ejemplo 2: Expresión de función](./Ejemplo-02) 61 | 62 | Como vimos en el ejemplo anterior, las funciones son anónimas, es decir no tienen nombre. 63 | 64 | ```javascript 65 | var square = function(number) { 66 | return number * number; 67 | } 68 | 69 | var squareOfFour = square(4); 70 | 71 | console.log(squareOfFour); // 16 72 | ``` 73 | 74 | Pero las expresiones de funciones también pueden tener un nombre para referirse a sí mismas, como en una función recursiva. 75 | 76 | ```javascript 77 | var factorial = function fac(number) { 78 | return number < 2 ? 1 : number * fac(number - 1) 79 | } 80 | 81 | console.log(factorial(5)); // 120 82 | ``` 83 | 84 | --- 85 | 86 | ## Expresión de función ejecutada inmediatamente 87 | 88 | Las expresiones de funciones ejecutadas inmediatamente o **IIFE** por sus siglas en inglés (Immediately Invoked Function Expression) son funciones que se ejecutan inmediatamente después de definirlas. Son útiles cuando queremos ejecutar una función una sola vez y no queremos que otras partes del programa puedan ejecutar dicha función accidentalmente. 89 | 90 | #### [Ejemplo 3: IIFE](./Ejemplo-03) 91 | 92 | 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 variables del resto del código y se aseguran que se ejecuta sin necesidad de que el usuario lo tenga que hacer. 93 | 94 | #### [Reto 2: Número mayor](./Reto-02) 95 | 96 | #### [Reto 3: Fibonacci](./Reto-03) 97 | -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-03/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 06`](../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 | 19 | 20 | 21 | ``` 22 | 23 | Dentro de la misma carpeta creamos un archivo `ejemplos-sesion-6.js` que es donde se trabajarán los ejemplos de esta sesión. Finalmente abre el archivo `index.html` en Chrome e inspecciona la consola para ver los resultados. 24 | 25 | 26 | #### Desarrollo 27 | 28 | Sumar todos los dígitos de un número entero: 29 | 30 | ``` 31 | Input: 12345 32 | 33 | -- 1 + 2 + 3 + 4 + 5 = 15 34 | 35 | Output: 15 36 | ``` 37 | 38 | Este ejercicio puede ser resuelto mediante operadores matemáticos, pero en este ejemplo veremos otra forma implementando múltiples funciones. Lo primero que haremos es crear un arreglo y cada dígito del número será un elemento del arreglo. De esta forma será más fácil trabajar con funciones de alto orden como `filter` y `reduce`. 39 | 40 | ```javascript 41 | var number = 12345; 42 | 43 | var string = number.toString(); 44 | 45 | var array = string.split(''); 46 | 47 | console.log(number); // 12345 48 | console.log(string); // '12345' 49 | console.log(array); // ['1', '2', '3', '4', '5'] 50 | ``` 51 | 52 | Con el método `toString()` podemos convertir un número entero a un string. El método `split()` nos permite dividir un string en una serie de substrings y colocarlos dentro de un arreglo. En JavaScript podemos encadenar funciones, lo que retorne la primera función será pasada como argumento a la siguiente función, de esta manera podemos simplificar nuestro código. 53 | 54 | ```javascript 55 | var number = 12345; 56 | 57 | var array = number.toString().split(''); 58 | 59 | console.log(number); // 12345 60 | console.log(array); // ['1', '2', '3', '4', '5'] 61 | ``` 62 | 63 | Antes de poder realizar operaciones matemáticas con este arreglo debemos convertir cada elemento a un entero nuevamente. 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 cada elemento del arreglo usaremos la función `map()`. 64 | 65 | ```javascript 66 | var arrayOfNumbers = array.map(function(number) { 67 | return Number(number); 68 | }) 69 | 70 | console.log(arrayOfNumbers); // [1, 2, 3, 4, 5] 71 | ``` 72 | 73 | Cuando usemos una función como `map()` y queremos que retorne el resultado de otra función con el mismo argumento podemos simplificarlo de la siguiente manera: 74 | 75 | ```javascript 76 | var arrayOfNumbers = array.map(Number); 77 | 78 | console.log(arrayOfNumbers); // [1, 2, 3, 4, 5] 79 | ``` 80 | 81 | Por último debemos sumar todos los elementos de este arreglo. Ya vimos cómo podemos usar `reduce` para reducir a un único valor todos los elementos de un arreglo. 82 | 83 | ```javascript 84 | var sum = arrayOfNumbers.reduce(function(a, b) { 85 | return a + b; 86 | }, 0); 87 | 88 | console.log(sum); // 15 89 | ``` 90 | 91 | Todas estas funciones pueden ser encadenadas de la misma forma que hicimos con las primeras dos. El producto final dentro de una función sería: 92 | 93 | ```javascript 94 | function sumDigits(number) { 95 | return number 96 | .toString() 97 | .split('') 98 | .map(Number) 99 | .reduce(function(a, b) { 100 | return a + b; 101 | }, 0) 102 | } 103 | 104 | console.log(sumDigits(12345)); // 15 105 | ``` 106 | 107 | ![Sum Digits](./assets/sum-digits.png) 108 | -------------------------------------------------------------------------------- /Sesion-08/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | [`Programación con JavaScript`](../Readme.md) > `Sesión 08` 3 | 4 | # Sesión 8: Manipulación del 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 interactuar con nuestra aplicación o sitio web. El usuario en algún momento va a presionar una tecla, hacer click en un botón, o ingresar un valor en un input y espera que la interfaz reaccione de alguna forma en el momento que se realiza cualquiera de esas acciones. 39 | 40 | Los navegadores son capaces de notificar o avisar a nuestro código cuando un evento sucede. En este contexto un evento 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 carga, o incluso cuando una ventana se cierra son ejemplos de eventos. El navegador nos permite registrar funciones conocidas como _handlers_ que se ejecutan cuando un evento en específico sucede. 41 | 42 | ```javascript 43 | window.addEventListener("click", function() { 44 | console.log("Hello World!"); 45 | }); 46 | ``` 47 | 48 | `window` es un objeto que representa la ventana del navegador donde se carga `document`. Al llamar el método `addEventListener` se registra el segundo argumento para ser llamado cuando el evento descrito en el primer argumento sucede. Como resultado, al hacer click (evento) en cualquier parte de la ventana se mostrará en consola un mensaje `Hello World!` (handler). 49 | 50 | --- 51 | 52 | ## Eventos y nodos del DOM 53 | 54 | Todos los event handlers son registrados en un contexto. En el ejemplo anterior llamamos `addEventListener` en el objeto `window` por lo que el handler se registra para toda la ventana. Los elementos del DOM también cuentan con este método. 55 | 56 | ```html 57 |

No handler here.

58 | 59 | 60 | 61 |

No handler here.

62 | 63 | 70 | ``` 71 | 72 | > El método `querySelector` retorna el primer elemento del DOM que hace match con el selector de CSS especificado. 73 | 74 | Este handler está vinculado al elemento `button`. Lo clicks en el botón ejecutarán la función handler pero los clicks en los párrafos (o cualquier parte del documento) no. 75 | 76 | Usar el atributo `onclick` tiene el mismo efecto, sin embargo, los nodos sólo pueden tener un atributo `onclick` por lo que sólo se puede registrar un handler de esta manera. Usando el método `addEventListener` se pueden registrar múltiples handlers sobre un mismo nodo. 77 | 78 | También podemos eliminar handlers que hayamos creado con anterioridad usando el método `removeEventListener`. 79 | 80 | ```html 81 | 82 | 83 | 93 | ``` 94 | 95 | La función que le pasemos a `removeEventListener` debe ser la misma que se le dió a `addEventListener`. En este caso se debe definir una función y darle un nombre, de esta forma podemos pasar la funicón a ambos métodos. 96 | 97 | #### [Ejemplo 1: Eventos en nodos del DOM](./Ejemplo-01) 98 | 99 | --- 100 | 101 | ## Event object 102 | 103 | La función de un event handler recibe un argumento `event`. Este es un objeto con toda la información referente al evento. Por ejemplo, si quisiéramos saber cuál botón del mouse fue presionado podemos leer la propiedad `button` del event object. 104 | 105 | ```html 106 | 107 | 108 | 121 | ``` 122 | 123 | La información contenida en el event object puede variar dependiendo del tipo de evento. 124 | 125 | #### [Ejemplo 2: Usando event object](./Ejemplo-02) 126 | 127 | --- 128 | 129 | ## Tipos de eventos 130 | 131 | ### Teclado 132 | 133 | Cada vez que se presiona una tecla el navegador lanza un evento `keydown`, al soltar la tecla se ejecuta un evento `keyup`. Cuando usemos `keydown` hay que tomar en cuenta que no es un evento que se ejecute una sola vez, si la tecla se mantiene presionada el evento se seguirá ejecutando de manera constante. 134 | 135 | Podemos determinar la tecla presionada con la propiedad `key` del event object. Esta propiedad contiene un string con el nombre de la tecla presionada. Adicionalmente, si queremos determinar una combinación de teclas el event object cuenta con las propiedades `shiftKey`, `ctrlKey`, `altKey` y `metaKey` que contienen un booleano indicando si la tecla `Shift`, `Control`, `Alt` o `Meta` respectivamente se encontraba presionada cuando el evento ocurrió. 136 | 137 | > `Meta`: En teclados Macintosh es la tecla comando (⌘). En teclados Windows es la tecla window (⊞). 138 | 139 | ### Mouse 140 | 141 | Similar a los eventos `keydown` y `keyup`, cuando presionamos un botón del mouse se ejcuta el evento `mousedown` y `mouseup` cuando se suelta el botón. Esto sucede en el nodo del DOM donde se encuentre el cursor al momento que ocurre el evento. Después del evento `mouseup` se ejecuta el evento `click` que ya hemos visto anteriormente. En caso de que sucedan dos clicks de manera continua se lanza el evento `dblclick`. 142 | 143 | #### [Ejemplo 3: Key events](./Ejemplo-03) 144 | 145 | > Consultar la [siguiente documentación](https://developer.mozilla.org/es/docs/Web/Events) para una lista completa de los tipos de eventos. 146 | 147 | #### [Reto 1: Inflar un globo](./Reto-01) 148 | 149 | #### [Reto 2: Modal](./Reto-02) 150 | 151 | #### [Reto 3: Navegando entre tabs](./Reto-03) 152 | -------------------------------------------------------------------------------- /Sesion-05/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | [`Programación con JavaScript`](../Readme.md) > `Sesión 05` 3 | 4 | # Sesión 5: Programación orientada a objetos 5 | 6 | ## Objetivos 7 | 8 | Crear constructores a partir de los cuales se puedan instanciar múltiples objetos. 9 | 10 | --- 11 | 12 | ## Tabla de Contenidos 13 | 14 | - **[Paradigma de programación](#paradigma-de-programación)** 15 | 16 | - **[Programación orientada a objetos](#programación-orientada-a-objetos)** 17 | 18 | - [Ejemplo 1: Function constructor](./Ejemplo-01) 19 | 20 | - [Reto 1: Vectores](./Reto-01) 21 | 22 | - **[Herencia](#herencia)** 23 | 24 | - [Ejemplo 2: Heredando propiedades](./Ejemplo-02) 25 | 26 | - [Reto 2: Group](./Reto-02) 27 | 28 | - **[Prototype](#prototype)** 29 | 30 | - [Ejemplo 3: Heredando métodos](./Ejemplo-03) 31 | 32 | - [Reto 3: Perímetro](./Reto-03) 33 | 34 | --- 35 | 36 | ## Paradigma de programación 37 | 38 | Un paradigma de programación es una forma de pensar a la hora de hacer tu código. 39 | Es como una receta que nos explica cómo debemos estructurar y organizar el código. 40 | Existen distintos tipos de paradigmas y estos difieren unos de otros en cuanto a 41 | conceptos y la forma de solucionar problemas. 42 | 43 | Existen dos grandes categorías en cuanto a estilos de programación, y la mayoría de 44 | paradigmas es una variante de una de estas dos. 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
Programación imperativa
Describe paso a paso un conjunto de instrucciones necesarias para solucionar el problema. Se enfoca en describir el cómo se llega a la solución.
Programación orientada a objetosSe encapsulan tanto variables como funciones en objetos. Dichos objetos manipulan los datos de entrada para la obtención de datos de salida específicos. Cada objeto creado ofrece una funcionalidad específica. Ejemplos: C++, C#, Java.
Programación declarativa
Se describe el problema que se pretende solucionar. Está más enfocado en el qué solución se desea alcanzar.
Programación funcionalEstá basado en las funciones matemáticas, lo que permite hacer uso de mecanismos matemáticos para optimizar procesos. Prevalece la inmutabilidad y los datos son usados con transparencia referencial. Ejemplos: Erlang, Rust, Haskell.
68 | 69 | Existen también **lenguajes multiparadigma**, es decir, que te permiten crear programas 70 | con múltiples estilos de programación, dándole al desarrollador la flexibilidad de 71 | escoger el mejor paradigma para cada tarea, esto implica que **ningún paradigma resuelve 72 | todos los problemas de la forma más sencilla y eficiente.** 73 | 74 | Un claro ejemplo de esto es JavaScript. Si bien se define como un lenguaje orientado 75 | a objetos, también incorpora capacidades de programación funcional. 76 | 77 | --- 78 | 79 | ## Programación orientada a objetos 80 | 81 | También conocido como OOP por sus siglas en inglés (Object Oriented Programming), es un paradigma imperativo que hace fuerte uso de las propiedades y métodos de los objetos. Múltiples objetos interactuan entre ellos para construir aplicaciones complejas. Permite estructurar las aplicaciones en módulos, una buena forma de organizar y mantener limpio el código. 82 | 83 | En la sesión anterior creamos un objeto que representa información personal de una persona. 84 | 85 | ```javascript 86 | var john = { 87 | name: 'John', 88 | birthYear: 1990, 89 | job: 'Developer' 90 | } 91 | ``` 92 | 93 | Si queremos representar información de más personas tendríamos que crear múltiples objetos de la misma forma. 94 | 95 | ```javascript 96 | var john = { 97 | name: 'John', 98 | birthYear: 1990, 99 | job: 'Developer' 100 | } 101 | 102 | var mark = { 103 | name: 'Mark', 104 | birthYear: 1985, 105 | job: 'Teacher' 106 | } 107 | 108 | var jane = { 109 | name: 'Jane', 110 | birthYear: 1975, 111 | job: 'Designer' 112 | } 113 | ``` 114 | 115 | Hay una mejor forma de hacer esto. Imagina una plantilla o un template a partir del cual se pueden crear múltiples objetos. 116 | 117 | ![Constructor](./assets/constructor.png) 118 | 119 | Este es un objeto `Person` que podemos utilzar como plantilla para crear varios objetos que representen personas. En otros lenguajes de programación a esto se le conoce como clase, en JavaScript le llamamos `Constructor`. 120 | 121 | ![Instances](./assets/instances.png) 122 | 123 | De esta forma podemos crear los objetos que queramos a partir de la plantilla. En este ejemplo decimos que `john`, `mark` y `jane` son instancias del constructor `Person`. Todas las instancias tienen las mismas propiedades y métodos del constructor. 124 | 125 | #### [Ejemplo 1: Function constructor](./Ejemplo-01) 126 | 127 | #### [Reto 1: Vectores](./Reto-01) 128 | 129 | --- 130 | 131 | ## Herencia 132 | 133 | En términos simples la herencia es cuando un objeto está basado en otro objeto, es decir, un objeto puede acceder a las propiedades y métodos de otro objeto. 134 | 135 | ![Inheritance](./assets/inheritance.png) 136 | 137 | El constructor `Developer` tiene propiedades y métodos únicos cómo skills que domina, años de experiencia y el skill de su preferencia. Como `Developer` también es una persona, es decir, tambíen tiene nombre, edad y un empleo, el constructor `Developer` puede heredar del constructor `Person`, teniendo acceso a las mismas propiedades y métodos. 138 | 139 | #### [Ejemplo 2: Heredando propiedades](./Ejemplo-02) 140 | 141 | #### [Reto 2: Group](./Reto-02) 142 | 143 | --- 144 | 145 | ## Prototype 146 | 147 | En JavaScript la herencia es posible gracias a una propiedad con la que cuentan todos los objetos llamada `Prototype`. Si queremos que las instancias hereden un método lo podemos colocar en el `Prototype` del constructor. Veamos un ejemplo con el constructo `Person` y la instancia `john` con la que hemos trabajado anteriormente. 148 | 149 | ![Prototype Chain](./assets/prototype-chain.png) 150 | 151 | Como `john` es una instancia de `Person`, este tiene acceso al método `calculateAge()` aunque no se encuentre dentro del prototype de `john`. Cuando llamamos a un método, JavaScript busca primero en el prototype del objeto, si no lo encuentra busca en el prototype del constructor con el que fue instanciado, y así sucesivamente hasta llegar al constructor `Object`, del cuál se instancian todos los objetos en JavaScript y [contiene varios métodos](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object). A esto se le conoce como **prototype chain**. 152 | 153 | #### [Ejemplo 3: Heredando métodos](./Ejemplo-03) 154 | 155 | #### [Reto 3: Perímetro](./Reto-03) 156 | -------------------------------------------------------------------------------- /Sesion-09/Postwork/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 09`](../Readme.md) > `Postwork` 2 | 3 | --- 4 | 5 | ## Postwork 6 | 7 | ### Objetivos 8 | 9 | Diferenciar el uso de arrow functions sobre funciones regulares. 10 | 11 | ### Desarrollo 12 | 13 | Arrow functions es sin duda una de las características más llamativas de ES6. Después de ver la simplicidad de la 14 | sintaxis y las ventajas de su uso, debemos entender que no reemplazan las funciones regulares. 15 | 16 | Estos son algunos casos en los que definitivamente no deberíamos usar arrow functions. 17 | 18 | #### Métodos de un objeto 19 | 20 | ```javascript 21 | const cat = { 22 | lives: 9, 23 | jumps: () => { 24 | this.lives--; 25 | } 26 | } 27 | 28 | console.log(cat.lives); // 9 29 | 30 | cat.jumps() 31 | 32 | console.log(cat.lives); // 9 33 | ``` 34 | 35 | Después de llamar `cat.jumps` esperaríamos que `lives` disminuya su valor en uno. Este no es el caso porque `this` no 36 | está ligado a nada dentro de la función por lo que hereda el valor de `this` del scope padre, que en este caso viene 37 | siendo el objeto global `window`. 38 | 39 | #### Object prototype 40 | 41 | ```javascript 42 | function Person(name) { 43 | this.name = name; 44 | } 45 | 46 | Person.prototype.getName = () => { 47 | return this.name; 48 | } 49 | 50 | const john = new Person('John'); 51 | 52 | console.log(john.getName()); // "" <- undefined 53 | ``` 54 | 55 | Similar al caso anterior, `this` está haciendo referencia a `window` por lo que obtenemos `undefined` ya que `name` no 56 | se encuentra en `window`. 57 | 58 | #### Function Constructor 59 | 60 | ```javascript 61 | const Person = (name) => { 62 | this.name = name; 63 | } 64 | 65 | const john = new Person('John'); 66 | // TypeError: Person is not a constructor 67 | ``` 68 | 69 | El operador `new` crea un nuevo objeto vacío, después se ejecuta la función `Person` y en este contexto `this` permite 70 | que el constructor asigne las propiedades ya que apunta al objeto vacío. Como los arrow functions no tienen un `this` 71 | propio no pueden usarse para crear function constructors. 72 | 73 | #### Callback con un contexto dinámico 74 | 75 | ```javascript 76 | const button = document.getElementById('myButton'); 77 | button.addEventListener('click', () => { 78 | this.innerHTML = 'Clicked button'; 79 | }); 80 | ``` 81 | 82 | Este es el caso cuando estamos trabajando con event listeners en elementos del DOM. Aquí el contexto `this` no cambia 83 | cuando se declara el arrow function por lo que sigue apuntando a `window`. 84 | 85 | --- 86 | 87 | ### Ejercicios 88 | 89 | #### Deep Comparison 90 | 91 | El operador == compara objetos por identidad. En ocasiones lo que necesitamos es comparar los valores de sus 92 | propiedades. 93 | 94 | Crear una función `deepEqual` que recibe dos argumentos y retorne `true` solo en los siguientes casos: 95 | - Ambos son el mismo valor y tipo de dato. 96 | - Los dos son objetos, tienen las mismas propiedades y los valores son iguales cuando se comparan con una llamada 97 | recursiva de `deepEqual`. 98 | 99 | Puedes usar el operador `typeof` para saber si los argumentos son objetos. Si retorna `"object"` entonces se debe hacer una 100 | comparación recursiva. Toma en cuenta una excepción, cuando usamos `typeof` sobre `null` recibimos `"object"` pese a que 101 | no es un objeto. 102 | 103 | ```javascript 104 | function deepEqual(a, b) { 105 | // Code goes here 106 | } 107 | 108 | let obj = { here: { is: "an" }, object: 2 }; 109 | 110 | console.log(deepEqual(obj, obj)); // true 111 | 112 | console.log(deepEqual(obj, { here: 1, object: 2 })); // false 113 | 114 | console.log(deepEqual(obj, { here: { is: "an" }, object: 2 })); // true 115 | ``` 116 | 117 |
118 | Solución 119 | 120 | ```javascript 121 | function deepEqual(a, b) { 122 | if (a === b) return true; 123 | 124 | if (a == null || typeof a != "object" || 125 | b == null || typeof b != "object") return false; 126 | 127 | let keysA = Object.keys(a), keysB = Object.keys(b); 128 | 129 | if (keysA.length !== keysB.length) return false; 130 | 131 | for (let key of keysA) { 132 | if (!keysB.includes(key) || !deepEqual(a[key], b[key])) return false; 133 | } 134 | 135 | return true; 136 | } 137 | ``` 138 | 139 |
140 | 141 | #### List 142 | 143 | Una lista es una serie de objetos anidados donde el primero tiene una referencia al segundo, el segundo al tercero y 144 | así sucesivamente hasta llegar al último objeto de la lista. 145 | 146 | ![List](./assets/list.png) 147 | 148 | Esta forma de encadenar objetos se puede ver de la siguiente manera: 149 | 150 | ```javascript 151 | const list = { 152 | value: 1, 153 | rest: { 154 | value: 2, 155 | rest: { 156 | value: 3, 157 | rest: null 158 | } 159 | } 160 | } 161 | ``` 162 | 163 | Crear una función `arrayToList` que construya una estructura como la anterior cuando recibe un arreglo. 164 | 165 | Crear una función `listToArray` que hace lo opuesto a la anterior. 166 | 167 | Después crear dos funciones auxiliares, `prepend` que toma un elemento y una lista para crear una nueva lista agregando 168 | el elemento al principio de la lista que se recibió como argumento. Y la función recursiva `nth` que recibe una lista y 169 | un número para retornar el elemento en la posición indicada por el número (cero debe ser el primer elemento de la lista) 170 | o `undefined` si no existe dicho elemento. 171 | 172 | ```javascript 173 | function arrayToList(array) { 174 | // Code goes here 175 | } 176 | 177 | function listToArray(list) { 178 | // Code goes here 179 | } 180 | 181 | function prepend(value, list) { 182 | // Code goes here 183 | } 184 | 185 | function nth(list, n) { 186 | // Code goes here 187 | } 188 | 189 | console.log(arrayToList([1, 2])); 190 | // {value: 1, rest: {value: 2, rest: null}} 191 | 192 | console.log(listToArray(arrayToList([1, 2, 3]))); 193 | // [1, 2, 3] 194 | 195 | console.log(prepend(1, prepend(2, null))); 196 | // {value: 1, rest: {value: 2, rest: null}} 197 | 198 | console.log(nth(arrayToList([1, 2, 3]), 1)); 199 | // 2 200 | ``` 201 | 202 |
203 | Solución 204 | 205 | ```javascript 206 | function arrayToList(array) { 207 | let list = null; 208 | 209 | for (let i = array.length - 1; i >= 0; i--) { 210 | list = { value: array[i], rest: list }; 211 | } 212 | 213 | return list; 214 | } 215 | 216 | function listToArray(list) { 217 | let array = []; 218 | 219 | for (let node = list; node; node = node.rest) { 220 | array.push(node.value); 221 | } 222 | 223 | return array; 224 | } 225 | 226 | function prepend(value, list) { 227 | return { value, rest: list }; 228 | } 229 | 230 | function nth(list, n) { 231 | if (!list) return undefined; 232 | else if (n === 0) return list.value; 233 | else return nth(list.rest, n - 1); 234 | } 235 | ``` 236 | 237 |
238 | -------------------------------------------------------------------------------- /Sesion-04/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | [`Programación con JavaScript`](../Readme.md) > `Sesión 04` 3 | 4 | # Sesión 4: Objetos y Arreglos 5 | 6 | ## Objetivos 7 | 8 | Mostrar las principales características de los objetos y arreglos, así como las diferencias con otros tipos de datos 9 | 10 | --- 11 | 12 | ## Tabla de Contenidos 13 | 14 | - **[Arreglos](#arreglos)** 15 | 16 | - [Ejemplo 1: Arreglos](./Ejemplo-01) 17 | 18 | - [Reto 1: Calcular promedio](./Reto-01) 19 | 20 | - **[Objetos](#objetos)** 21 | 22 | - [Ejemplo 2: Transformando objetos en arreglos](./Ejemplo-02) 23 | 24 | - [Reto 2: Arreglo a objeto](./Reto-02) 25 | 26 | - **[Objetos y Métodos](#objetos-y-métodos)** 27 | 28 | - [Reto 3: Extraer una lista de propiedades](./Reto-03) 29 | 30 | - **[Postwork](./Postwork/Readme.md)** 31 | 32 | --- 33 | 34 | ## Arreglos 35 | 36 | Ya hemos trabajado con distintos tipos de datos como string, number y boolean. Muchas veces necesitamos representar una colección de variables, en lugar de crear múltples variables podemos utilizar arreglos. 37 | 38 | ```javascript 39 | var color1 = 'Red'; 40 | var color2 = 'Blue'; 41 | var color3 = 'Green'; 42 | 43 | console.log(color1); // Red 44 | console.log(color2); // Blue 45 | console.log(color3); // Green 46 | ``` 47 | 48 | En lugar de crear tres variables distintas podemos crear un arreglo usando corchetes `[]` y separando cada elemento del arreglo con comas. 49 | 50 | ```javascript 51 | var colors = ['Red', 'Blue', 'Green']; 52 | 53 | console.log(colors); // ['Red', 'Blue', 'Green'] 54 | ``` 55 | 56 | Todo elemento de un arreglo tiene un identificador numérico que representa su posición en el arreglo. A esto se le conoce como `index` y se empieza a contar desde cero. 57 | 58 | ![array](assets/array.png) 59 | 60 | Este `index` nos permite acceder a un elemento específico del arreglo. 61 | 62 | ```javascript 63 | var colors = ['Red', 'Blue', 'Green']; 64 | 65 | console.log(colors[0]); // 'Red' 66 | console.log(colors[1]); // 'Blue' 67 | console.log(colors[2]); // 'Green' 68 | console.log(colors[3]); // undefined 69 | ``` 70 | 71 | También se pueden manipular los elementos de un arreglo con el `index`. 72 | 73 | ```javascript 74 | var colors = ['Red', 'Blue', 'Green']; 75 | 76 | console.log(colors); // ['Red', 'Blue', 'Green'] 77 | 78 | colors[1] = 'Pink'; 79 | 80 | console.log(colors); // ['Red', 'Pink', 'Green'] 81 | ``` 82 | 83 | Para obtener la longitud del arreglo (cantidad de elementos) utilizamos el método `length`. 84 | 85 | ```javascript 86 | var colors = ['Red', 'Blue', 'Green']; 87 | 88 | console.log(colors); // ['Red', 'Blue', 'Green'] 89 | 90 | console.log(colors.length); // 3 91 | ``` 92 | 93 | #### [Ejemplo 1: Arreglos](./Ejemplo-01) 94 | 95 | #### [Reto 1: Calcular promedio](./Reto-01) 96 | 97 | --- 98 | 99 | ## Objetos 100 | 101 | En los arreglos utilizamos un índice numérico para acceder a un elemento de la colección. Con los objetos en lugar de usar valores numéricos como índice utilizamos propiedades con nombre y valor, el cual puede ser cualquier tipo de dato. Para crear un objeto utilizamos llaves `{}` separando cada propiedad con coma. 102 | 103 | ```javascript 104 | var john = { 105 | firstName: 'John', 106 | lastName: 'Doe', 107 | birthYear: 1990 108 | } 109 | ``` 110 | 111 | Se puede acceder al valor de una propiedad de dos formas. La primera es con un punto después del nombre del objeto seguido del nombre de la propiedad que queremos leer, la segunda es usando corchetes `[]` similar a como se hace con los arreglos pero pasando un string con el nombre de la propiedad en lugar de un `index`. 112 | 113 | ```javascript 114 | var john = { 115 | firstName: 'John', 116 | lastName: 'Doe', 117 | birthYear: 1990 118 | } 119 | 120 | console.log(john.firstName); // 'John' 121 | 122 | console.log(john['lastName']); // 'Doe' 123 | ``` 124 | 125 | De igual forma se puede cambiar el valor de las propiepdades de los objetos. 126 | 127 | ```javascript 128 | var john = { 129 | firstName: 'John', 130 | lastName: 'Doe', 131 | birthYear: 1990 132 | } 133 | 134 | console.log(john.firstName); // 'John' 135 | 136 | john.firstName = 'Jane'; 137 | 138 | console.log(john.firstName); // 'Jane' 139 | 140 | john['firstName'] = 'Joe'; 141 | 142 | console.log(john['firstName']); // 'Joe' 143 | ``` 144 | 145 | #### [Ejemplo 2: Transformando objetos en arreglos](./Ejemplo-02) 146 | 147 | #### [Reto 2: Arreglo a objeto](./Reto-02) 148 | 149 | --- 150 | 151 | ## Objetos y métodos 152 | 153 | Ya mencionamos que las propiedades de los objetos pueden contener cualquier tipo 154 | de dato, esto incluye expresiones de funciones, en cuyo caso deja de llamarse propiedad 155 | y se conoce como método. 156 | 157 | ```javascript 158 | var john = { 159 | firstName: 'John', 160 | lastName: 'Doe', 161 | birthYear: 1990, 162 | calculateAge: function(birthYear) { 163 | var today = new Date(); 164 | var year = today.getFullYear(); 165 | 166 | return year - birthYear; 167 | } 168 | } 169 | ``` 170 | 171 | Acabamos de agregar el método `calculateAge`, como vemos es una expresión de función, 172 | una función anónima que recibe `birthYear` como argumento. Este método nos regresa 173 | la edad actual de John. 174 | 175 | ```javascript 176 | console.log( john.calculateAge(1990) ); // 30 177 | ``` 178 | 179 | La variable `today` es un objeto de la clase `Date()` de JavaScript. A su vez vemos 180 | que este objeto tiene un método `getFullYear()` el cual nos regresa el año. 181 | 182 | No necesitamos pasar el argumento `birthYear` al método `calculateAge` porque ya existe 183 | como propiedad del objeto `john`. 184 | 185 | ```javascript 186 | var john = { 187 | firstName: 'John', 188 | lastName: 'Doe', 189 | birthYear: 1990, 190 | calculateAge: function() { 191 | var today = new Date(); 192 | var year = today.getFullYear(); 193 | 194 | return year - this.birthYear; 195 | } 196 | } 197 | ``` 198 | 199 | El keyword `this` hace referencia al mismo objeto, por lo que cuando decimos `this.birthYear` 200 | es como decir `john.birthYear`. Lo usamos cuando queremos hacer referencia a 201 | una propiedad o método del mismo objeto, e incluso para asignar nuevas propiedades. 202 | 203 | ```javascript 204 | var john = { 205 | firstName: 'John', 206 | lastName: 'Doe', 207 | birthYear: 1990, 208 | calculateAge: function() { 209 | var today = new Date(); 210 | var year = today.getFullYear(); 211 | 212 | this.age = year - this.birthYear; 213 | } 214 | } 215 | ``` 216 | 217 | Ahora el método `calculateAge` en lugar de retornar la edad la va a guardar en una nueva 218 | propiedad llamada `age.` 219 | 220 | ```javascript 221 | console.log( john ); 222 | /* 223 | Valor actual 224 | { 225 | firstName: "John", 226 | lastName: "Doe", 227 | birthYear: 1990, 228 | calculateAge: ƒ 229 | } 230 | */ 231 | 232 | john.calculateAge(); 233 | 234 | console.log( john ); 235 | /* 236 | Después de llamar el método calculateAge() 237 | { 238 | firstName: "John", 239 | lastName: "Doe", 240 | birthYear: 1990, 241 | age: 30, 242 | calculateAge: ƒ 243 | } 244 | */ 245 | ``` 246 | 247 | #### [Reto 3: Extraer una lista de propiedades](./Reto-03) 248 | 249 | En este punto nos damos cuenta que los arreglos también tienen métodos como `push()` que agrega un elemento al final del arreglo o `pop()` que elimina el último elemento del arreglo. También los strings tienen propiedades como `length` que retorna la longitud del string, o incluso métodos como `search()` que permite buscar un valor específico dentro del string. Por eso es común escuchar que todo en JavaScript se comporta como un objeto. 250 | -------------------------------------------------------------------------------- /Sesion-06/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | [`Programación con JavaScript`](../Readme.md) > `Sesión 06` 3 | 4 | # Sesión 6: Programación funcional 5 | 6 | ## Objetivos 7 | 8 | Crear constructores a partir de los cuales se puedan instanciar múltiples objetos. 9 | 10 | --- 11 | 12 | ## Tabla de Contenidos 13 | 14 | - **[Programación funcional](#programación-funcional)** 15 | 16 | - **[Inmutabilidad](#inmutabilidad)** 17 | 18 | - [Ejemplo 1: Mutando objetos](./Ejemplo-01) 19 | 20 | - **[Funciones puras](#funciones-puras)** 21 | 22 | - [Ejemplo 2: Creando funciones puras](./Ejemplo-02) 23 | 24 | - **[Funciones de primera clase](#funciones-de-primera-clase)** 25 | 26 | - **[Funciones de alto orden](#funciones-de-alto-orden)** 27 | 28 | - [Ejemplo 3: Sumando Dígitos](./Ejemplo-03) 29 | 30 | - [Reto 1: Flatten](./Reto-01) 31 | 32 | - [Reto 2: Compact](./Reto-02) 33 | 34 | - [Reto 3: Loop](./Reto-03) 35 | 36 | --- 37 | 38 | ## Programación funcional 39 | 40 | Como vimos en la sesión anterior existen distintos paradigmas de programación. La programación funcional es un paradigma declarativo, es decir, se enfoca en el _qué_ se desea lograr sin preocuparse mucho en el _cómo_ (el lenguaje de programación se encarga de esta parte). 41 | 42 | ```javascript 43 | var numbers = [1, 2, 3, 4, 5]; 44 | var doubles = []; 45 | 46 | for(var i = 0; i < numbers.length; i++) { 47 | doubles.push(numbers[i] * 2); 48 | } 49 | 50 | console.log(numbers); // [1, 2, 3, 4, 5] 51 | console.log(doubles); // [2, 4, 6, 8, 10] 52 | ``` 53 | 54 | Este es un ejemplo de código imperativo. Generalmente usar ciclos es programación imperativa pues queda del lado del programador controlar cuándo iniciar, cuándo terminar y qué hacer en cada ciclo. 55 | 56 | ```javascript 57 | var numbers = [1, 2, 3, 4, 5]; 58 | var doubles = numbers.map(function(number) { 59 | return number * 2; 60 | }); 61 | 62 | console.log(numbers); // [1, 2, 3, 4, 5] 63 | console.log(doubles); // [2, 4, 6, 8, 10] 64 | ``` 65 | 66 | Esta es la forma declarativa del mismo código. Ambos fragmentos de código hacen exactamente lo mismo, crear un arreglo `doubles` con el doble de cada elemento del arreglo `numbers`. La diferencia con el segundo ejemplo es que hacemos uso del método `map()`, el programador no se encarga de controlar cuándo y dónde terminar el ciclo, sólo se encarga del resultado, obtener el doble de cada elemento dentro de `numbers`. 67 | 68 | > El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos. 69 | 70 | --- 71 | 72 | ## Inmutabilidad 73 | 74 | Decimos que algo es mutable cuando puede ser cambiado o modificado. Por lo tanto, inmutable es algo que no puede ser alterado. En términos de programación, las variables inmutables nunca cambian su valor. Este es un principio muy importante en la programación funcional, de hecho, lenguajes de programación como Elixir o Erlang no permiten la mutación de variables. 75 | 76 | En lugar de alterar una variable, creamos nuevos valores y reemplazamos los antiguos. Si bien JavaScript no es puramente funcional, es lo suficientemente flexible como para permitir o pretender serlo. 77 | 78 | Para llevar este concepto a la práctica es importante siempre preferir crear una nueva variable en lugar de intentar modificar la original. Esto se puede llevar a cabo con métodos como `map()` que no altera el arreglo original, o bien creando tus propias funciones inmutables. 79 | 80 | #### [Ejemplo 1: Mutando objetos](./Ejemplo-01) 81 | 82 | --- 83 | 84 | ## Funciones puras 85 | 86 | Para que una función pueda ser considerada pura debe cumplir dos reglas: 87 | 88 | 1. El valor retornado siempre es el mismo cuando se da el mismo valor de entrada. 89 | 90 | 2. No debe producir side effects (efectos secundarios). 91 | 92 | ![Pure Function](./assets/pure-function.png) 93 | 94 | El primer punto se refiere a que si ejecutamos la misma función varias veces con los mismos argumentos siempre obtendremos el mismo resultado. 95 | 96 | ```javascript 97 | function add(a, b) { 98 | return a + b; 99 | } 100 | ``` 101 | 102 | Podemos llamar las veces que queramos la esta función de la forma `add(1, 2)` y sabemos que siempre vamos a obtener el mismo resultado `3`. 103 | 104 | ```javascript 105 | function randomNumber() { 106 | return Math.floor(Math.random() * 10); 107 | } 108 | ``` 109 | 110 | Esta función no cumple la primera regla porque si la llamamos 10 veces, obtendremos cada vez un número aleatorio entre 1 y 10. No podemos predecir el valor de retorno de esta función. 111 | 112 | Los side effects son un término más amplio que el anterior. A grandes rasgos significa modificar algo fuera de la función. Algunos ejemplos: 113 | 114 | 1. Mutar los parámetros que recibe una función como en el [Ejemplo 1](./Ejemplo-01). 115 | 116 | 2. Modificar cualquier variable fuera de la función. 117 | 118 | 3. Llamadas a una API. 119 | 120 | 4. `console.log()` 121 | 122 | La función anterior `add()` también cumple con la segunda regla, no produce side effects. Sólamente está trabajando con las variables que recibe la función y siempre retorna un valor. 123 | 124 | #### [Ejemplo 2: Creando funciones puras](./Ejemplo-02) 125 | 126 | --- 127 | 128 | ## Funciones de primera clase 129 | 130 | En un lenguaje de programación se dice que una función es de primera clase cuando puede ser tratada como cualquier otra variable. Por ejemplo, cuando puede ser pasada como argumento a otras funciones o cuando puede ser asignada a una variable. Este comportamiento no es explusivo de JavaScript, otros lenguajes de programación como R o Scala también cuentan con esta característica. 131 | 132 | Ya hemos guardado funciones anónimas en una variable anteriormente. 133 | 134 | ```javascript 135 | var square = function(number) { 136 | return number * number; 137 | } 138 | 139 | var squareOfFour = square(4); 140 | 141 | console.log(squareOfFour); // 16 142 | ``` 143 | 144 | Por lo tanto, las expresiones de funciones como estas son consideradas funciones de primera clase. 145 | 146 | --- 147 | 148 | ## Funciones de alto orden 149 | 150 | Cuando una función recibe otra función como parámetro se le llama de alto orden o de orden superior. JavaScript nos proporciona varias funciones de alto orden para trabajar con estructuras de datos. Las más usadas son `map()`, `filter()` y `reduce()`. 151 | 152 | Al principio de la sesión vimos cómo funciona `map()`, aplica una función sobre cada elemento del arreglo. Es importante destacar que no muta el arreglo original. 153 | 154 | ```javascript 155 | var numbers = [1, 2, 3, 4, 5]; 156 | var doubles = numbers.map(function(number) { 157 | return number * 2; 158 | }); 159 | 160 | console.log(numbers); // [1, 2, 3, 4, 5] 161 | console.log(doubles); // [2, 4, 6, 8, 10] 162 | ``` 163 | 164 | De igual forma `filter()` crea un nuevo arreglo pero sólo con aquellos elementos que retornen true por la función que actúa como predicado. 165 | 166 | ```JavaScript 167 | var numbers = [1, 2, 3, 4, 5]; 168 | 169 | var evenNumbers = numbers.filter(function(number) { 170 | return number % 2 === 0; 171 | }); 172 | 173 | console.log(evenNumbers); // [2, 4] 174 | ``` 175 | 176 | Por último, `reduce()` acumula o reduce todos los elementos a un valor único según la función dada. 177 | 178 | ```JavaScript 179 | var numbers = [1, 2, 3, 4, 5]; 180 | 181 | var sum = numbers.reduce(function(accumulator, currentValue) { 182 | return accumulator + currentValue; 183 | }, 0); // Initial value 184 | 185 | console.log(sum); // 15 186 | ``` 187 | 188 | #### [Ejemplo 3: Sumando Dígitos](./Ejemplo-03) 189 | 190 | #### [Reto 1: Flatten](./Reto-01) 191 | 192 | #### [Reto 2: Compact](./Reto-02) 193 | 194 | #### [Reto 3: Loop](./Reto-03) 195 | -------------------------------------------------------------------------------- /Sesion-07/Readme.md: -------------------------------------------------------------------------------- 1 | 2 | [`Programación con JavaScript`](../Readme.md) > `Sesión 07` 3 | 4 | # Sesión 7: Introducción al DOM 5 | 6 | ## Objetivos 7 | 8 | Identificar el rol de JavaScript en el desarrollo web al permitir interactividad entre el usuario y la página web. 9 | 10 | --- 11 | 12 | ## Tabla de Contenidos 13 | 14 | - **[DOM](#dom)** 15 | 16 | - [Ejemplo 1: Inspeccionando el DOM](./Ejemplo-01) 17 | 18 | - **[Estructura de datos de árbol](#estructura-de-datos-de-árbol)** 19 | 20 | - **[Seleccionar elementos](#seleccionar-elementos)** 21 | 22 | - **[Modificar el documento](#modificar-el-documento)** 23 | 24 | - [Ejemplo 2: Cambiando el DOM](./Ejemplo-02) 25 | 26 | - **[Crear nodos](#crear-nodos)** 27 | 28 | - [Ejemplo 3: Crear nuevos nodos](./Ejemplo-03) 29 | 30 | - **[Atributos](#atributos)** 31 | 32 | - [Reto 1: Reemplazar imágenes](./Reto-01) 33 | 34 | - [Reto 2: Crear una tabla](./Reto-02) 35 | 36 | --- 37 | 38 | ## ¿Qué es el DOM? 39 | 40 | Cuando abres una página web el navegador obtiene el código HTML y lo analiza para construir un modelo de la estructura del documento, este modelo le permite al navegador mostrar la página en la pantalla. 41 | 42 | A esto se le conoce como DOM (Document Object Model), una representación del documento que se muestra en el navegador. Esta estructura puede ser leída y modificada en tiempo real, es decir, cualquier cambio que se haga a este modelo será reflejada en la pantalla en el momento. 43 | 44 | Un documento HTML es como una serie de cajas anidadas. Las etiquetas como ` ` encierran otras etiquetas, y estas a su vez envuelven otras etiquetas o texto. Tomemos como ejemplo el siguiente documento HTML: 45 | 46 | ```html 47 | 48 | 49 | 50 | DOM 51 | 52 | 53 |

Document Object Model

54 |

Hello World!

55 |

Here is a 56 | link 57 |

58 | 59 | 60 | ``` 61 | 62 | Esta es la estructura de esa página: 63 | 64 | ![DOM](./assets/document.png) 65 | 66 | Para cada una de estas cajas existe un objeto en JavaScript con el que podemos interactuar para saber qué etiqueta HTML representa y qué otras cajas o texto contiene. La variable global `document` nos da acceso a todos estos objetos. 67 | 68 | > `document` es una variable global, es decir, se puede acceder a ella desde cualquier parte del script o código. Todas las funciones que hagas pueden hacer referencia a esta variable. 69 | 70 | #### [Ejemplo 1: Inspeccionando el DOM](./Ejemplo-01) 71 | 72 | --- 73 | 74 | ## Estructura de datos de árbol 75 | 76 | Esta estructura de datos imita la estructura jerárquica de un árbol. Es una colección de nodos con un único nodo padre o raíz. Es muy útil para mantener una colección de datos ordenada, ya que es más fácil seleccionar o insertar elementos en un árbol que en un arreglo plano. 77 | 78 | El DOM es una estructura de datos de árbol, y es común nombrarlo también un árbol de nodos. Cada nodo representa una etiqueta de HTML, siendo `document.documentElement` la raíz del árbol, el cuál representa la etiqueta `html`. Cada nodo puede tener nodos hijos (children) o ser un nodo hoja (último elemento de la rama) como el texto dentro de una etiqueta `p`. 79 | 80 | Esta es otra forma de visualizar el ejemplo que vimos anteriormente: 81 | 82 | ![Tree](./assets/tree.png) 83 | 84 | `html` es el nodo raíz del árbol. Los nodos hojas son los últimos nodos de la rama, los elementos de texto. Las flechas indican una relación padre-hijo entre nodos. 85 | 86 | Los nodos del DOM contienen vínculos entre ellos como los que se muestran en el siguiente diagrama: 87 | 88 | ![Node links](./assets/links.png) 89 | 90 | Todos los nodos tienen una propiedad `parentNode` que apunta al nodo que lo contiene. La propiedad `childNodes` apunta a un objeto parecido a un arreglo que contiene los hijos del nodo. Las propiedades `firstChild` y `lastChild` apuntan al primer y último nodo hijo respectivamente o `null` si no tienen. De igual forma, `previousSibling` y `nextSibling` apuntan a los nodos hermanos, es decir, los nodos adyacentes que comparten el mismo padre. 91 | 92 | --- 93 | 94 | ## Seleccionar elementos 95 | 96 | Si bien navegar entre nodos padres, hijos y hermanos con las propiedades vistas anteriormente es útil, no es lo más óptimo si queremos encontrar un nodo en particular y partimos desde `document.body`. La estructura del DOM podría cambiar en cualquier momento, además los nodos de texto son creados incluso para espacios en blanco entre nodos. En nuestro ejemplo, el nodo `body` no tiene sólo tres hijos (`

` y dos `

`), en realidad tiene siete: los tres que ya vimos más los espacios en blanco antes, después y entre nodos. 97 | 98 | Si queremos obtener el link `` de nuestro ejemplo, empezar a recorrer los nodos desde `body` sería como decir que queremos _obtener el segundo hijo del sexto hijo de `body`_. Sería mucho más sencillo decir que queremos _obtener el primer link del documento_. 99 | 100 | ```javascript 101 | var link = document.body.getElementsByTagName('a')[0]; 102 | 103 | console.log(link); // link 104 | ``` 105 | 106 | El método `getElementsByTagName` regresa un objeto similar a un arreglo con todos los elementos descendientes que contengan la etiqueta proporcionada como argumento. 107 | 108 | > Elementos descendientes se refiere a todos los nodos hijos directos e indirectos. 109 | 110 | Para seleccionar un sólo nodo en específico podemos darle un atributo `id` y usar el método `document.getElementById`. 111 | 112 | ```html 113 | 114 |

Document Object Model

115 |

Hello World!

116 |

Here is a 117 | link 118 |

119 | 120 | 124 | 125 | ``` 126 | 127 | Otra forma de seleccionar elementos es con el método `getElementsByClassName`, muy parecido a `getElementsByTagName`, busca en los descendientes de un nodo todos los elementos que contengan el string proporcionado en el atributo `class`. 128 | 129 | ```html 130 | 131 |

Document Object Model

132 |

Hello World!

133 |

Here is a 134 | link 135 |

136 | 137 | 141 | 142 | ``` 143 | 144 | --- 145 | 146 | ## Modificar el documento 147 | 148 | Casi todo en el DOM puede ser modificado. La estructura del árbol puede ser alterada al cambiar las relaciones padre-hijo. Todos los nodos contienen el método `remove` que los elimina del padre actual. También se pueden agregar hijos a un nodo usando el método `appendChild`, el cual agrega un elemento al final de la lista de hijos de un nodo. Otro método es `insertBefore` el cual inserta un nodo antes de otro. 149 | 150 | El método `replaceChild` se puede usar para reemplazar un nodo hijo por otro. Es importante tomar en cuenta que tanto `replaceChild` como `insertBefore` reciben dos argumentos, el primero siempre es el nuevo nodo. 151 | 152 | #### [Ejemplo 2: Cambiando el DOM](./Ejemplo-02) 153 | 154 | --- 155 | 156 | ## Crear nodos 157 | 158 | Parte importante de manipular el DOM es poder crear nuevos nodos para ser insertados posteriormente en el documento con métodos como los vistos anteriormente. JavaScript nos proporciona el método `document.createElement` el cual crea un nuevo nodo vacío del tipo que sea especificado en el argumento de la función. 159 | 160 | ```javascript 161 | var h1 = document.createElement('h1'); 162 | 163 | console.log(h1); //

164 | ``` 165 | 166 | Para agregar un texto a este nuevo nodo `h1` primero debemos crear un nuevo nodo de texto, para esto usamos el método `document.createTextNode`, posteriormente lo podemos agregar como hijo de `h1` con el método `appendChild`. 167 | 168 | ```javascript 169 | var text = document.createTextNode('Hello World'); 170 | 171 | console.log(text); // 'Hello World' 172 | 173 | h1.appendChild(text); 174 | 175 | console.log(h1); //

Hello World

176 | ``` 177 | 178 | #### [Ejemplo 3: Crear nuevos nodos](./Ejemplo-03) 179 | 180 | --- 181 | 182 | ## Atributos 183 | 184 | Hasta ahora hemos creado elementos del DOM que representan etiquetas HTML. Algunas de estas etiquetas requieren de atributos, por ejemplo el atributo `href` para los hipervínculos. Los objetos del DOM cuentan con propiedades del mismo nombre del atributo que nos permiten leer o modificar su valor. 185 | 186 | ```html 187 | Some cool link 188 | 189 | 196 | ``` 197 | 198 | Un atributo muy utilizado es `class` para darle estilos a una etiqueta. Esta es una palabra reservada en JavaScript, por lo que debemos usar `className` en su lugar. 199 | 200 | ```html 201 | Some cool link 202 | 203 | 212 | ``` 213 | 214 | #### [Reto 1: Reemplazar imágenes](./Reto-01) 215 | 216 | #### [Reto 2: Crear una tabla](./Reto-02) 217 | -------------------------------------------------------------------------------- /Sesion-02/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../Readme.md) > `Sesión 02` 2 | 3 | --- 4 | 5 | # Sesión 2: Controles de flujo 6 | 7 | ## Objetivos 8 | 9 | Distinguir las distintas estructuras que permiten controlar el flujo de ejecución de un programa o aplicación 10 | 11 | --- 12 | 13 | ## Tabla de Contenidos 14 | 15 | - **[Condicionales](#condicionales)** 16 | 17 | - [Operadores lógicos](#operadores-lógicos) 18 | 19 | - [`if`/`else`](#if--else) 20 | 21 | - [Ejemplo 1: Primeras condicionales](./Ejemplo-01) 22 | 23 | - [Reto 1: Controles de flujo](./Reto-01) 24 | 25 | - [`switch`](#switch) 26 | 27 | - [Ejemplo 2: Usando `switch`](./Ejemplo-02) 28 | 29 | - **[Operador Ternario](#operador-ternario)** 30 | 31 | - **[Truthy y Falsy](#truthy-y-falsy)** 32 | 33 | - **[Bucles](#bucles)** 34 | 35 | - [Ejemplo 3: Ciclo `for`](./Ejemplo-03) 36 | 37 | - [Reto 2: Números pares](./Reto-02) 38 | 39 | - [Reto 3: Números primos](./Reto-03) 40 | 41 | --- 42 | 43 | ## Condicionales 44 | 45 | Las condicionales nos permiten cotrolar el flujo de un programa, es decir, podemos controlar las partes del código que se ejecutarán dependiendo de si una condición se cumple o no. 46 | 47 | ### Operadores lógicos 48 | 49 | JavaScript nos proporciona varios operadores lógicos para que podamos realizar operaciones de comparación. 50 | 51 | | Operador | Descripción | Ejemplos | 52 | |----------|-------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------| 53 | | == | **Igualdad:** Devuelve `true` si ambos operandos son iguales | 3 == 3
3 == "3"
"mike" == "mike"
var1 == true
| 54 | | != | **Desigualdad:** Devuelve `true` si ambos operandos no son iguales | 3 != 4 | 55 | | === | **Estrictamente iguales:**
Devuelve `true` si los operandos son igual
y tienen el mismo tipo. | 3 === 3

3 === "3"
(Devuelve falso) | 56 | | !== | **Estrictamente desiguales:**
Devuelve `true` si los operandos no son iguales
y/o no son del mismo tipo. | 3 !== "3" | 57 | | > | **Mayor que:** Devuelve `true` si el operando de la izquierda
es mayor que el operando de la derecha. | 4 > 3 | 58 | | >= | **Mayor o igual que:** | 4 >= 4 | 59 | | < | **Menor que:** Devuelve `true` si el operando de la izquierda
es menor que el operando de la derecha. | 12 < 15 | 60 | | <= | **Menor o igual que:** | 15 <= 15 | 61 | | && | **And:** Devuelve `true` si ambas condiciones se cumplen | 2 > 1 && 1 > 0 | 62 | | \|\| | **Or:** Devuelve `true` si una de las condiciones se cumplen | 2 > 1 \|\| 1 < 0 | 63 | 64 | ### `if` / `else` 65 | 66 | El tipo de condición más común de todos. Traducida literalmente del inglés, se la podría llamar la estructura *si...si no*, es decir, *si se cumple la condición, haz esto, y sino, haz esto otro*. 67 | 68 | La sintaxis se compone de la siguiente forma: 69 | 70 | ```javascript 71 | if ( /* Condición a evaluar */ ) { 72 | /* Código a ejecutar si la condición retorna true */ 73 | } else { 74 | /* Código a ejecutar si la condición retorna false */ 75 | } 76 | ``` 77 | 78 | - `if` - La palabra clave que indica que se va a realizar una condicional. 79 | - `( ... )` - Dentro de los paréntesis se coloca la condición a evaluar, la cuál retorna un booleano, es decir, `true` o `false`. 80 | - `{ ... }` - Dentro de las llaves va el texto a ejecutar en caso de que la condición sea `true`. 81 | - `else` - Se utiliza para controlar el flujo en caso de que la condición sea `false`. Si se usa `else`, el código dentro de las llaves que le siguen se ejecuta sólo cuando la condición anterior no se cumplió. 82 | 83 | #### [Ejemplo 1: Primeras condicionales](./Ejemplo-01) 84 | 85 | #### [Reto 1: Controles de flujo](./Reto-01) 86 | 87 | ### `switch` 88 | 89 | Esta condicional nos permite ejecutar un sólo bloque de código de varios. Es una buena alternativa cuando tenemos múltiples condicionales `if`/`else`. 90 | 91 | ```javascript 92 | switch ( /* Expresión a evaluar*/ ) { 93 | case a: 94 | /* Código a ejecutar */ 95 | break; 96 | case b: 97 | /* Código a ejecutar */ 98 | break; 99 | default: 100 | /* Código a ejecutar por default */ 101 | } 102 | ``` 103 | 104 | - `switch` - La palabra clave que indica que se va a realizar una condicional. 105 | - `( ... )` - Expresión a evaluar. 106 | - `case` - Expresa uno de los posibles valores como resultado de la evaluación que se está haciendo. 107 | - `break` - Detiene la ejecución del bloque y sale del `switch`. 108 | - `default` - Define qué se debe hacer cuando ninguno de los casos se cumple. 109 | 110 | #### [Ejemplo 2: Usando `switch`](./Ejemplo-02) 111 | 112 | --- 113 | 114 | ## Operador Ternario 115 | 116 | El operador ternario es el único operador en JavaScript que consta de tres operandos. Es una buena alternativa para una condición `if`/`else`, ya que presenta una sintaxis más sencilla. 117 | 118 | ```javascript 119 | condición ? expresión_true : expresión_false 120 | ``` 121 | 122 | La `condición` a evaluar es retorna un booleano al igual que en la condicional `if`. Las expresiones en caso de ser `true` o `false` se colocan en la misma línea sin necesidad de `else` separadas por dos puntos `:`. 123 | 124 | ```javascript 125 | var speed = 120; 126 | var message; 127 | 128 | if(speed > 100) { 129 | message = "You're going too fast!"; 130 | } else { 131 | message = "Under the limit"; 132 | } 133 | 134 | console.log(message); // You're going too fast! 135 | ``` 136 | 137 | El código anterior lo podemos simplificar usando el operador ternario. 138 | 139 | ```javascript 140 | var speed = 120; 141 | 142 | var message = speed > 100 ? "You're going too fast!" : "Under the limit"; 143 | 144 | console.log(message); // You're going too fast! 145 | ``` 146 | 147 | --- 148 | 149 | ## Truthy y Falsy 150 | 151 | En JavaScript todas las variables contienen un valor booleano, a esto se le conoce como `truthy` o `falsy`. 152 | 153 | Los siguientes valores siempre son `falsy`: 154 | 155 | - `false` 156 | - `0` 157 | - `''` o `""` - String vacío 158 | - `null` 159 | - `undefined` 160 | - `NaN` 161 | 162 | Todo lo demás es `truthy` incluyendo los siguientes casos: 163 | 164 | - `'0'` - String conteniendo cero 165 | - `'false'` - String con el texto `false` 166 | - `[]` - Arreglo vacío 167 | - `{}` - Objeto vacío 168 | - `function(){}` - Función vacía 169 | 170 | Esto es muy útil a la hora de usar condicionales pues podemos evaluar un sólo valor sin necesidad de operadores lógicos. 171 | 172 | ```javascript 173 | if(value) { 174 | // value es truthy 175 | } else { 176 | // value es falsy 177 | // puede ser false, 0, '', null, undefined o NaN 178 | } 179 | ``` 180 | 181 | Es muy importante tener cuidado cuando se están haciendo comparaciones con `==` en lugar de `===` ya que se pueden obtener resultados inesperados, por ejemplo: 182 | 183 | ```javascript 184 | [1] == '1' // true 185 | ``` 186 | 187 | En esta [tabla](https://dorey.github.io/JavaScript-Equality-Table/) se puede comparar los resultados de usar `==` con distintos valores. 188 | 189 | --- 190 | 191 | ## Bucles 192 | 193 | Los ciclos o bucles ofrecen una manera rápida y sencilla de hacer algo repetidamente. Un ciclo `for` se repite hasta que la condición especificada se evalúa como `false`. 194 | 195 | La sintaxis funciona de esta manera: 196 | 197 | ```javascript 198 | for(var i = 0; i<=50; i++){ 199 | // Código a ejecutar en cada ciclo 200 | } 201 | ``` 202 | 203 | - `for`. La sintaxis para el inicio del ciclo. Posteriormente, abrimos paréntesis y dentro habrán 3 valores. 204 | - `Inicializador`. El primer valor en el cual declaras la variable, incluyendo con cuál número inicia el ciclo. 205 | - `Condición`. El segundo valor es la condición, lo que tiene que pasar para terminar la iteración. 206 | - `Incrementable`. El tercer valor es el incrementable. Cada vez que termina todas las sentencias de ejecución, la variable aumenta en 1. Esto se debe al operando `++`. 207 | 208 | #### [Ejemplo 3: Ciclo `for`](./Ejemplo-03) 209 | 210 | Otro ciclo es `while`, el cual se repite siempre y cuando la condición especificada sea evaluada como `true`. 211 | 212 | ```javascript 213 | while(condición) { 214 | // Código a ejecutar en cada ciclo 215 | } 216 | ``` 217 | 218 | El ejemplo 2 podría hacerse con `while` de la siguiente manera: 219 | 220 | ```javascript 221 | var i = 0; 222 | 223 | while(i <= 200) { 224 | console.log("Hello World"); 225 | i++; 226 | } 227 | ``` 228 | 229 | > Si olvidas incrementar la variable `i` dentro del `while` el ciclo nunca termina y se agotan los recursos de memoria. 230 | 231 | #### [Reto 2: Números pares](./Reto-02) 232 | 233 | #### [Reto 3: Números primos](./Reto-03) 234 | -------------------------------------------------------------------------------- /Sesion-09/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../Readme.md) > `Sesión 09` 2 | 3 | # Sesión 9: ECMAScript 6 (ES6 - ES2015) 4 | 5 | ## Objetivos 6 | 7 | - Implementar las nuevas características de JavaScript en la creación, asignación de variables y uso de funciones de 8 | flecha. 9 | 10 | --- 11 | 12 | ## Tabla de Contenidos 13 | 14 | - **[¿Qué es ECMAScript 6?](#qué-es-ecmascript-6)** 15 | 16 | - **[Template strings](#template-strings)** 17 | 18 | - **[Spread operator](#spread-operator)** 19 | 20 | - [Copiar iterables](#copiar-iterables) 21 | 22 | - [Unir iterables](#unir-iterables) 23 | 24 | - [Rest parameter](#rest-parameter) 25 | 26 | - **[Destructuring](#destructuring)** 27 | 28 | - [Reto 1: Intercambiar variables](./Reto-01/Readme.md) 29 | 30 | - [Ejemplo 1: Object destructuring](./Ejemplo-01/Readme.md) 31 | 32 | - [Reto 2: Objetos anidados](./Reto-02/Readme.md) 33 | 34 | - **[Arrow functions](#arrow-functions)** 35 | 36 | - [Sintaxis](#sintaxis) 37 | 38 | - [Paréntesis](#paréntesis) 39 | 40 | - [Return implícito](#return-implícito) 41 | 42 | - [Funciones anónimas](#funciones-anónimas) 43 | 44 | - [Reto 3: Crear un número de teléfono](./Reto-03/Readme.md) 45 | 46 | - **[Postwork](./Postwork/Readme.md)** 47 | 48 | --- 49 | 50 | ## ¿Qué es ECMAScript 6? 51 | 52 | Ecma International es una organización sin ánimos de lucro encargada de regular el funcionamiento de 53 | varios estándares en la industria de la computación. Así surge ECMAScript 1 (ES1) en 1997 como la primera 54 | versión del estándar de JavaScript. Normalmente se usa el término ECMAScript para referirse al estándar 55 | y JavaScript para hablar del lenguaje en la práctica. 56 | 57 | En 2009 se lanzó ECMAScript 5 (ES5) con muchas mejoras de las versiones anteriores. Sin embargo, a los 58 | navegadores les tomó varios años ser compatibles con esta versión. 59 | 60 | En 2015 surge ECMAScript 2015, que también se le conoce como ES6 o ES2015. A partir de este año se decide 61 | lanzar una nueva versión de manera anual cambiando el número del año en cada versión, es decir, ES2016, 62 | ES2017, ES2018, etc. 63 | 64 | Actualmente la versión ES5 es compatible con todos los navegadores. La versión ES6 es compatible con 65 | navegadores modernos. Se puede usar la mayoría de las características de ES6 mediante un proceso de 66 | transpiling y polyfilling que convierte el código en ES5, garantizando así la compatibilidad del código 67 | en navegadores viejos. 68 | 69 | --- 70 | 71 | ## Template Strings 72 | 73 | Las plantillas de texto o template strings, son cadenas de texto que permiten interpolación mediante expresiones. Hacen 74 | mucho más fácil crear textos en los que necesitamos integrar variables o expresiones. La sintaxis consta de dos partes, 75 | la primera es para delimitar la cadena de texto, se usan comillas invertidas. La segunda parte es para agregar 76 | placeholders mediante el uso del signo de dólar y llaves. 77 | 78 | Normalmente si queremos agregar el valor de una variable a una cadena de texto debemos concatenar ambos con el signo + 79 | y siempre tener cuidado de agregar espacios en blanco para que no salgan ambos textos juntos. Si usamos comillas 80 | invertidas podemos incluir variables dentro del string. 81 | 82 | ```javascript 83 | // ES5 84 | const name = 'John Doe'; 85 | 86 | console.log("Welcome " + name); // Welcome John Doe 87 | 88 | // ES6 89 | const name = 'John Doe'; 90 | 91 | console.log(`Welcome ${ name }`); // Welcome John Doe 92 | ``` 93 | 94 | Estas plantillas hacen más fácil crear cadenas de string con múltiples líneas. 95 | 96 | ```javascript 97 | const message = `Welcome Back! 98 | John Doe 99 | `; 100 | 101 | console.log( message ); 102 | // Welcome Back! 103 | // John Doe 104 | ``` 105 | 106 | Además de variables también podemos usar expresiones matemáticas. 107 | 108 | ```javascript 109 | const a = 10; 110 | const b = 20; 111 | 112 | console.log(`a + b = ${a + b}`); // a + b = 30 113 | ``` 114 | 115 | Trabajar con arreglos. 116 | 117 | ```javascript 118 | const colors = ['blue', 'red', 'yellow']; 119 | 120 | console.log(`Primary colors: ${ colors.join(', ') }`); // Primary colors: blue, red, yellow 121 | ``` 122 | 123 | Incluso funciones de alto orden. 124 | 125 | ```javascript 126 | const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 127 | 128 | console.log(`Odd numbers: ${ 129 | numbers.filter(function(n) { 130 | return n % 2 !== 0 131 | }) 132 | }`); // Odd numbers: 1,3,5,7,9 133 | ``` 134 | 135 | --- 136 | 137 | ## Spread operator 138 | 139 | El operador de propagación o spread operator hace más fácil trabajar con iterables como arreglos y objetos. La sintaxis 140 | de este operador es `...` y se coloca justo antes de la variable. 141 | 142 | ### Copiar iterables 143 | 144 | Uno de los usos más comunes de este operador es duplicar arreglos. Después de declarar el nombre de la variable usamos 145 | corchetes para asignar un nuevo arreglo y dentro colocamos el spread operator para obtener todos los elementos del 146 | arreglo que queremos copiar. 147 | 148 | ```javascript 149 | const colors = ['blue', 'red', 'yellow']; 150 | const copyOfColors = [ ...colors ]; 151 | 152 | console.log(copyOfColors); // ['blue', 'red', 'yellow'] 153 | ``` 154 | 155 | En el caso de objetos es casi lo mismo, la única diferencia es el uso de llaves en lugar de corchetes. 156 | 157 | ```javascript 158 | const book = { 159 | author: 'Marijn Haverbeke', 160 | title: 'Eloquent JavaScript', 161 | year: 2018 162 | }; 163 | const copyOfBook = { ...book }; 164 | 165 | console.log(copyOfBook); 166 | // { author: "Marijn Haverbeke", title: "Eloquent JavaScript", year: 2018 } 167 | ``` 168 | 169 | ### Unir iterables 170 | 171 | También podemos usar el spread operator para concatenar arreglos. 172 | 173 | ```javascript 174 | const oneToThree = [1, 2, 3]; 175 | const fourToSix = [4, 5, 6]; 176 | const oneToSix = [ ...oneToThree, ...fourToSix ] 177 | 178 | console.log(oneToSix); // [1, 2, 3, 4, 5, 6] 179 | ``` 180 | 181 | Ahora `oneToSix` contiene todos los elementos de `oneToThree` y `fourToSix`. Además de concatenar arreglos podemos 182 | usarlo para agregar nuevos elementos en un arreglo. 183 | 184 | ```javascript 185 | const oneToThree = [1, 2, 3]; 186 | const oneToSix = [ ...oneToThree, 4, 5, 6 ] 187 | 188 | console.log(oneToSix); // [1, 2, 3, 4, 5, 6] 189 | ``` 190 | 191 | Hay que tomar en cuenta que la posición donde se coloque el spread afecta el orden de los elementos en el arreglo. 192 | 193 | ```javascript 194 | const oneToThree = [1, 2, 3]; 195 | const oneToSix = [ 4, 5, 6, ...oneToThree ] 196 | 197 | console.log(oneToSix); // [4, 5, 6, 1, 2, 3] 198 | ``` 199 | 200 | Es muy similar en el caso de objetos. 201 | 202 | ```javascript 203 | const formalGreetings = { 204 | english: 'Hello', 205 | french: 'Bonjour', 206 | }; 207 | 208 | const informalGreetings = { 209 | russian: 'Privet', 210 | portuguese: 'Oi' 211 | } 212 | 213 | const greetings = { ...formalGreetings, ...informalGreetings } 214 | 215 | console.log(greetings); 216 | // { english: "Hello", french: "Bonjour", russian: "Privet", portuguese: "Oi" } 217 | ``` 218 | 219 | En el caso de tener propiedades duplicadas se sobrescriben. 220 | 221 | ```javascript 222 | const formalGreetings = { 223 | english: 'Hello', 224 | french: 'Bonjour', 225 | }; 226 | 227 | const informalGreetings = { 228 | russian: 'Privet', 229 | portuguese: 'Oi' 230 | } 231 | 232 | const greetings = { 233 | ...formalGreetings, 234 | ...informalGreetings, 235 | english: 'Hi' 236 | } 237 | 238 | console.log(greetings); 239 | // { english: "Hi", french: "Bonjour", russian: "Privet", portuguese: "Oi" } 240 | ``` 241 | 242 | Así como en los arreglos la posición del spread operator afecta el orden de los elementos, en los objetos el orden 243 | del spread operator determina qué propiedad se sobrescribe. 244 | 245 | ```javascript 246 | const formalGreetings = { 247 | english: 'Hello', 248 | french: 'Bonjour', 249 | }; 250 | 251 | const informalGreetings = { 252 | russian: 'Privet', 253 | portuguese: 'Oi' 254 | } 255 | 256 | const greetings = { 257 | english: 'Hi', 258 | ...formalGreetings, 259 | ...informalGreetings 260 | } 261 | 262 | console.log(greetings); 263 | // { english: "Hello", french: "Bonjour", russian: "Privet", portuguese: "Oi" } 264 | ``` 265 | 266 | ### Rest parameter 267 | 268 | Todas las funciones pueden ser llamadas con cualquier número de argumentos. 269 | 270 | ```javascript 271 | function sum(a, b) { 272 | return a + b; 273 | } 274 | 275 | const total = sum(1, 2, 3, 4, 5); 276 | console.log(total); // 3 277 | ``` 278 | 279 | Esto no arroja ningún error, ya que los argumentos excedentes son ignorados, solo se toman en cuenta los dos primeros. 280 | Usando la sintaxis del spread operator (`...`) podemos asignar cualquier cantidad de argumentos dentro de un arreglo. 281 | 282 | ```javascript 283 | function sum(...numbers) { 284 | return numbers.reduce(function(prev, curr) { 285 | return prev + curr, 0 286 | }); 287 | } 288 | 289 | const total = sum(1, 2, 3, 4, 5); 290 | console.log(total); // 15 291 | ``` 292 | 293 | **Importante:** Spread operator y rest parameter tienen la misma sintaxis pero hacen lo opuesto. El primero nos permite 294 | extraer todos los elementos de un arreglo, mientras que el segundo crea un arreglo con todos los argumentos que recibe. 295 | 296 | --- 297 | 298 | ## Destructuring 299 | 300 | Destructuring es extraer valores o propiedades de un arreglo u objeto. 301 | 302 | ```javascript 303 | const colors = [ 'Red', 'Blue', 'Yellow' ] 304 | 305 | const [ red, blue, yellow ] = colors; 306 | 307 | console.log(red); // Red 308 | console.log(blue); // Blue 309 | console.log(yellow); // Yellow 310 | ``` 311 | 312 | En este ejemplo estamos creando 3 variables (`red`, `blue` y `yellow`) y asignando los valores del arreglo `colors`. 313 | Esta asignación se hace basándose en el index del arreglo. 314 | 315 | #### [Reto 1: Intercambiar variables](./Reto-01/Readme.md) 316 | 317 | ```javascript 318 | const person = { 319 | firstName: 'John', 320 | lastName: 'Doe', 321 | country: 'Unknown' 322 | }; 323 | 324 | const firstName = person.firstName; 325 | const lastName = person.lastName; 326 | 327 | console.log(firstName, lastName); // John Doe 328 | ``` 329 | 330 | Este es un caso muy común. En ocasiones queremos crear variables a partir de propiedades de un objeto. Podemos lograr 331 | lo mismo en una sola línea. 332 | 333 | ```javascript 334 | const person = { 335 | firstName: 'John', 336 | lastName: 'Doe', 337 | country: 'Unknown' 338 | }; 339 | 340 | const { firstName, lastName } = person; 341 | 342 | console.log(firstName, lastName); // John Doe 343 | ``` 344 | 345 | Las llaves del lado izquierdo del `=` no son un objeto. Esta es la sintaxis de object destructuring. Estamos creando dos 346 | nuevas variables `firstName` y `lastName`, después estamos extrayendo dos propiedades de `person` con el mismo nombre de 347 | las variables, el valor de esas propiedades es el que se asigna a las variables creadas. 348 | 349 | #### [Ejemplo 1: Object destructuring](./Ejemplo-01/Readme.md) 350 | 351 | #### [Reto 2: Objetos anidados](./Reto-02/Readme.md) 352 | 353 | --- 354 | 355 | ## Arrow functions 356 | 357 | Las funciones de flecha o arrow functions es otra de las novedades de esta versión de JavaScript. Presentan una 358 | sintaxis más concisa comparada con las funciones normales, también cuentas con `returns` implícitos y no cambian el 359 | valor de `this`. 360 | 361 | Antes de ver la sintaxis y cómo usar arrow functions veamos un ejemplo de un caso de uso de funciones normales. 362 | Tenemos un arreglo `firstNames`. 363 | 364 | ```javascript 365 | const firstNames = [ 'John', 'Jane', 'Mark']; 366 | ``` 367 | 368 | A cada nombre le vamos a agregar el apellido `Doe` y crear un nuevo arreglo `fullNames`. Una forma de hacerlo es con 369 | un `map` y aprovechar la flexibilidad de los template strings. 370 | 371 | ```javascript 372 | const firstNames = [ 'John', 'Jane', 'Mark']; 373 | 374 | const fullNames = firstNames.map(function(name) { 375 | return `${name} Doe`; 376 | }); 377 | 378 | console.log(fullNames); // ["John Doe", "Jane Doe", "Mark Doe"] 379 | ``` 380 | 381 | Ahora veamos cómo reescribir la función que recibe `map` como argumento y usar arrow function. 382 | 383 | ### Sintaxis 384 | 385 | Para escribir arrow functions solo necesitamos eliminar el keyword `function` y agregar lo que se conoce como _fat 386 | arrow_ (`=>`) después de los parámetros de la función. 387 | 388 | ```javascript 389 | const firstNames = [ 'John', 'Jane', 'Mark']; 390 | 391 | const fullNames = firstNames.map((name) => { 392 | return `${name} Doe`; 393 | }); 394 | 395 | console.log(fullNames); // ["John Doe", "Jane Doe", "Mark Doe"] 396 | ``` 397 | 398 | La funcionalidad es exactamente la misma al ejemplo de más arriba. 399 | 400 | ### Paréntesis 401 | 402 | La sintaxis de los arrow functions puede ser simplificada todavía más. Cuando solamente tenemos un parámetro en la 403 | función podemos eliminar los paréntesis. 404 | 405 | ```javascript 406 | const firstNames = [ 'John', 'Jane', 'Mark']; 407 | 408 | const fullNames = firstNames.map(name => { 409 | return `${name} Doe`; 410 | }); 411 | 412 | console.log(fullNames); // ["John Doe", "Jane Doe", "Mark Doe"] 413 | ``` 414 | 415 | Esta es una cuestión de estilo pues hay quienes prefieren siempre incluir los paréntesis aunque sea un solo parámetro. 416 | 417 | ### Return implícito 418 | 419 | Cuando escribimos `return` estamos definiendo explícitamente lo que debe retornar la función. Muchas veces las funciones 420 | solo retornan un valor sin hacer alguna otra operación antes. Cuando este es el caso podemos omitir el `return` pues el 421 | arrow function asume que se va a retornar lo que sigue después del fat arrow. 422 | 423 | ```javascript 424 | const firstNames = [ 'John', 'Jane', 'Mark']; 425 | 426 | const fullNames = firstNames.map(name => `${name} Doe`); 427 | 428 | console.log(fullNames); // ["John Doe", "Jane Doe", "Mark Doe"] 429 | ``` 430 | 431 | De esta manera podemos colocar todo en una sola línea, además de eliminar el `return` también debemos eliminar las 432 | llaves (ya que estos definen un bloque de líneas). No es necesario definir que queremos retornar `${name} Doe`, esto 433 | queda implícito. 434 | 435 | ### Funciones anónimas 436 | 437 | Si usamos este tipo de funciones no podemos asignarle un nombre, ya que los arrow functions son funciones anónimas. 438 | La forma más común de uso es asignar estas funciones a variables que sí podemos nombrar. 439 | 440 | ```javascript 441 | const logName = name => console.log(`Hello ${name}!`); 442 | 443 | logName('John Doe'); // Hello John Doe! 444 | ``` 445 | 446 | #### [Reto 3: Crear un número de teléfono](./Reto-03/Readme.md) 447 | 448 | #### [Postwork](./Postwork/Readme.md) 449 | -------------------------------------------------------------------------------- /Sesion-01/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../Readme.md) > `Sesión 01` 2 | 3 | --- 4 | 5 | # Sesión 1: Fundamentos de JS 6 | 7 | ## Objetivos 8 | 9 | Analizar la trayectoria de JavaScript, evaluar por qué es una buena opción aprenderlo y usar sus fundamentos. 10 | 11 | --- 12 | 13 | ## Tabla de Contenidos 14 | 15 | - **[¿Por qué Javascript?](#por-qué-javascript)** 16 | 17 | - **[¿Cómo comenzar y qué hacer?](#cómo-comenzar-y-qué-hacer)** 18 | 19 | - **[¿Qué es Javascript?](#qué-es-javascript)** 20 | 21 | - **[Tu primer archivo Javascript](#tu-primer-archivo-javascript)** 22 | 23 | - **[¿Qué son las variables?](#qué-son-las-variables)** 24 | 25 | - **[Tipos de Datos](#tipos-de-datos)** 26 | 27 | - **[Operador typeof](#operador-typeof)** 28 | 29 | - [Ejemplo 1: Tipos de datos y operador `typeof`](./Ejemplo-01) 30 | 31 | - **[Type coercion](#type-coercion)** 32 | 33 | - **[Operadores](#operadores-básicos)** 34 | 35 | - [Ejemplo 2: Operadores](./Ejemplo-02) 36 | 37 | - **[Precedencia de operadores](#precedencia-de-operadores)** 38 | 39 | - [Ejemplo 3: Precedencia de operadores](./Ejemplo-03) 40 | 41 | - [Reto 1: Precedencia de operadores](./Reto-01) 42 | 43 | --- 44 | 45 | ## ¿Por qué Javascript? 46 | 47 | Te damos la gran bienvenida a Javascript. 48 | 49 | Javascript hoy es uno de los lenguajes de programación más usados en el mundo. 50 | 51 | En la última encuesta de 2019, realizada a la plataforma [Stack Overflow](https://stackoverflow.com/), foro más importante de desarrolladores en el mundo, se comprobó que Javascript es y seguirá teniendo mucha tracción en los siguientes años. 52 | 53 | **No es el único que seguirá creciendo**, claro está, pero el impacto de este se ha mantenido y progresa anualmente. 54 | 55 | > Te recomendamos leer la investigación completa [sobre el ecosistema tecnológico aquí](https://insights.stackoverflow.com/survey/2019). 56 | 57 | ![Survey 2019](https://i.imgur.com/ZZmILsS.png) 58 | 59 | --- 60 | 61 | Atentos de estas tendencias, muchas empresas confían sus productos digitales a Javascript, parcial o totalmente, en diferentes áreas de desarrollo. 62 | 63 | Notemos que es posible, con Javascript, trabajar aplicaciones móviles y escritorio. 64 | 65 | ![tendencias](https://i.imgur.com/nlzlvO0.png) 66 | 67 | --- 68 | 69 | Ahora, el conjunto de tecnologías que necesitarás para construir aplicaciones web puede ser este (importante destacar que no es el único pero es de los más robustos): 70 | 71 | ![](https://i.imgur.com/UgG62hG.png) 72 | 73 | Observa que: 74 | 75 | - Del lado del cliente tenemos React, un framework **basado en Javascript** que te permite organizar, mantener y gestionar una aplicación basado en un concepto llamado componentes. 76 | 77 | > Destacar que React cuenta con un soporte sólido por parte de la comunidad de desarrolladores y también de Facebook, como compañía. De ahí su seguridad y confianza. 78 | 79 | - En el lado del servidor tenemos Node.js, el cual es un ambiente de desarrollo que permite el uso de Javascript del lado del servidor. Este te permitirá conectar con el cliente y con la base de datos, siendo un escudo de seguridad para ambas partes. 80 | 81 | - Finalmente, encontramos MongoDB, una base de datos no relacional, el cual es muy amigable y al trabajar con él para su manejo, verás que se parecerá mucho al lenguaje de Javascript. 82 | 83 | ## ¿Cómo comenzar y qué hacer? 84 | 85 | Para poder utilizar todas las tecnologías mencionadas y crear aplicaciones robustas, deberás formar buenas bases en Javascript. 86 | 87 | A pesar de que es un lenguaje el cual podrás aplicar en poco tiempo, practicar es la clave. 88 | 89 | Te compartimos consejos para mantenerte enfocado y persistente: 90 | 91 | - Al inicio, probablemente muchos conceptos no tengan mucho sentido o implique mucho trabajo comprenderlos. **Es normal.** Sólo es cuestión de ejercitar lógica con muchos ejercicios y retos, los cuales la gran mayoría te los iremos compartiendo a lo largo del módulo. 92 | 93 | - No tengas miedo en pedir ayuda o asumir que no sabes. Las personas que se dedican o implican tecnología en sus carreras profesionales saben que para crecer más rápido deben de aceptar que no lo saben todo. **Acercarse a otras personas alrededor cuando hay obstáculos hará más fácil tu progreso.** 94 | 95 | - Encuentra espacios de estudio. Programar puede parecer diferente a otra área profesional debido a que necesitas momentos donde debes compartir, debatir y hablar sobre tus conclusiones técnicas, pero también te servirá mucho encontrar lugares, tiempos, momentos, donde puedas concentrarte, enfocarte y teclear mucho. 96 | 97 | - Se vale Googlear. Probablemente llegues a estancarte y pasar una o dos horas en algunas líneas de código. Ten la confianza de ir a Google y buscar la respuesta. Encontrarás muchos desarrolladores que han pasado por ese mismo momento y han compartido cómo lo resolvieron. **Buscar ayuda en Internet es normal.** 98 | 99 | > Cabe aclarar, "copiar y pegar" código **no es una buena práctica**. Es importante que todo el código que tú coloques en tu proyecto lo entiendas. Sepas por qué está ahí. Esto hará que tu aplicación pueda seguir creciendo y sigas teniendo, junto con tu equipo, el control del mismo. 100 | 101 | Ahora si, comencemos. 102 | 103 | --- 104 | 105 | ## ¿Qué es Javascript? 106 | 107 | Javascript (JS) es: 108 | 109 | 1. Un lenguaje de programación que permite ejecutarse principalmente en cada navegador (Google Chrome, Safari, Firefox, Opera, etc.). 110 | 111 | 2. Multiplataforma. Puede ser utilizado en muchas plataformas y sistemas. Podemos usarlo fuera del navegador a través de ciertos programas adicionales. 112 | 113 | 3. Multiparadigma. Se puede manejar orientación a objetos, funcional, reactivo. Más adelante explicaremos como se utilizan y para qué nos sirven. 114 | 115 | 4. **Diferente a JAVA. Son diferentes lenguajes. Javascript no es JAVA** 116 | 117 | 5. Un jugador que hace equipo, en el navegador, a lado de HTML y CSS, para que el usuario pueda usar la aplicación. 118 | 119 | 1. HTML maneja el contenido, la estructura, el esqueleto, el "markup". 120 | 2. CSS maneja la presentación, el diseño, la visualización de la aplicación. 121 | 3. JS maneja la interactividad, efectos, dinamismo y más adelante, la gestión de datos y el flujo de los mismos a otras áreas de la aplicación. 122 | 123 | ![Variables](https://i.imgur.com/yNwZN3I.png) 124 | 125 | --- 126 | 127 | ## Tu primer archivo Javascript 128 | 129 | - En tu computadora, crearás una carpeta llamada `bedu-sesion-1`. Aquí colocaremos todos nuestros ejercicios siguientes. 130 | 131 | - Abrirás tu editor de preferencia y darás click en "Open Folder" en la parte posterior de la ventana. Buscarás la carpeta, la seleccionarás y la abrirás. 132 | 133 | ## ¿Qué son las variables? 134 | 135 | Las variables se utilizan para almacenar información dentro de tu programa para ser manipulados. 136 | 137 | En el modo más general, te ayudan a **etiquetar datos**. Los llamaremos en el momento que los necesitemos a lo largo del programa. 138 | 139 | ![Variables](https://i.imgur.com/toMeYM2.png) 140 | 141 | Las variables se dividen en 4 partes: 142 | 143 | ```javascript 144 | var deporte = "Atletismo"; 145 | ``` 146 | 147 | - **Declaración (`var`)**. Cuando comienzas una variable, debes de utilizar la palabra `var` 148 | - **Nombre (etiqueta)**. Irá del lado izquierdo. Será cómo llamarás la variable más adelante. 149 | - **Asignación (`=`)**. A diferencia de la aritmética donde se le conoce como "igual", en Javascript se le conoce como asignación, el cual asignará el valor de lo que el área de su lado derecho genere hacia el lado izquierdo (Nombre). 150 | - **Valor (Tipo de dato)**. Puede ser un texto, un número, un conjunto de datos (objetos, arreglos). 151 | 152 | --- 153 | 154 | Ahora bien, nombrar tus variables implica que deberán ser lo más descriptivas posibles. 155 | 156 | Es decir, que si otras personas leyeran tu código, entenderían rápidamente que significa cada dato porque el nombre de su variable lo explica todo. (Fig 1.1) 157 | 158 | **`Fig. 1.1`** 159 | 160 | ```javascript 161 | var saludo = "Hola Mundo"; 162 | var perro = "Firulais"; 163 | var pais = "México"; 164 | var edad = 35; 165 | ``` 166 | 167 | Si tú lees el nombre de las variables anteriores, rápidamente comprendes de qué tratan. 168 | 169 | Si generas una variable que implica dos palabras, te recomendamos usar una técnica llamada **"Camel Case"**. (Fig 1.2) 170 | 171 | Observemos un ejemplo: 172 | 173 | **`Fig. 1.2`** 174 | 175 | ```javascript 176 | var paisLatinoamericano = "México"; 177 | var animalVerde = "Rana"; 178 | var impuestosAnuales = 250000; 179 | ``` 180 | 181 | **"Camel Case"** implica: 182 | 183 | - Conectar ambas palabras sin espacio, volviéndola una. 184 | - La palabra comenzará con minúscula. 185 | - La segunda palabra empezará con mayúscula. 186 | 187 | Con esto claro, hablemos de los **tipos de datos**. 188 | 189 | --- 190 | 191 | ## Tipos de Datos 192 | 193 | Todos los lenguajes de programación cuentan con estructuras de datos las cuales varían de un lenguaje a otro. 194 | JavaScript es un lenguaje de tipado débil, significa que no es necesario declarar el tipo de variable antes de 195 | usarla. El tipo de dato es determinado automáticamente cuando el programa esté siendo procesado. 196 | 197 | JavaScript cuenta con seis tipos de datos que pueden ser divididos en tres categorías: 198 | 199 | #### Primitivos 200 | 201 | - String 202 | - Number 203 | - Boolean 204 | 205 | #### Compuestos (Referencia) 206 | 207 | - Object 208 | - Array 209 | - Function 210 | 211 | #### Especiales 212 | 213 | - Undefined 214 | - Null 215 | 216 | ### String 217 | 218 | Este tipo de dato es utilizado para almacenar cadenas de texto. Los strings son creados con comillas dobles o sencillas alrededor de uno o más caracteres. 219 | 220 | ```javascript 221 | var a = 'Hello World!'; // Comillas sencillas 222 | var b = "Hello World!"; // Comillas dobles 223 | ``` 224 | 225 | Las comillas también pueden formar parte de la cadena de texto siempre y cuando no coincidan con las comillas que abren y cierran el string. 226 | 227 | ```javascript 228 | var a = "Let's learn JavaScript."; // Comilla sencilla dentro de comillas dobles 229 | var b = 'He said "Hello" and left.'; // Comillas dobles dentro de comillas sencillas 230 | var c = 'We\'ll never stop learning.'; // Escapando comilla sencilla con backslash 231 | ``` 232 | 233 | ### Number 234 | 235 | El tipo de dato Number se usa para representar números enteros positivos o negativos con o sin punto decimal, incluso se puede usar en números con notación científica. 236 | 237 | ```javascript 238 | var a = 12; // Entero 239 | var b = 32.43; // Decimal 240 | var c = 2.25e+6; // Equivalente a 2.25x10^6 o 2250000 241 | var d = 2.25e-6; // Equivalente a 2.25x10-6 o 0.00000225 242 | ``` 243 | 244 | Este tipo de dato incluye algunos valores especiales: `Infinity`, `-Infinity` y `NaN`. 245 | 246 | `Infinity` representa el infinito matemático `∞`, el cual es mayor a cualquier otro número. Se obtiene al dividir un número mayor o menor a cero entre cero. 247 | 248 | ```javascript 249 | console.log(7 / 0); // Infinity 250 | console.log(-7 / 0); // -Infinity 251 | ``` 252 | 253 | Por otro lado, `NaN` representa un valor no numérico. Es el resultado de una operación matemática inválida. 254 | 255 | ```javascript 256 | console.log("Hello World" / 2); // NaN 257 | console.log("Hello World" * 2); // NaN 258 | console.log(Math.sqrt(-1)); // NaN 259 | ``` 260 | 261 | ### Boolean 262 | 263 | Las variables que contengan este tipo de dato sólo pueden almacenar uno de dos valores: `true` o `false`. Normalmente se usan para representar estados que signifiquen sí (`true`) o no (`false`), encendido (`true`) o apagado (`false`), etc. 264 | 265 | ```javascript 266 | var isUserActive = true; // Sí, el usuario se encuentra activo 267 | var isUserAdmin = false; // No, el usuario no es admin 268 | ``` 269 | 270 | ### Undefined 271 | 272 | Cuando una variable es declarada pero no se le ha asignado un valor, por default su valor es `undefined`. 273 | 274 | ```javascript 275 | var a; 276 | var b = 'Hello World'; 277 | 278 | console.log(a); // undefined 279 | console.log(b); // Hello World 280 | ``` 281 | 282 | ### Null 283 | 284 | Este es otro tipo de dato especial con un único valor posible: `null`. Cuando encontremos `null` significa que no hay valor. No es lo mismo que cero o `undefined`, simplemente es `null` o nada. 285 | 286 | Se puede vaciar una variable de manera explícita asignando el valor `null`. 287 | 288 | ```javascript 289 | var a = 'Hello World'; 290 | console.log(a); // Hello World 291 | 292 | a = null 293 | console.log(a); // null 294 | ``` 295 | 296 | --- 297 | 298 | ## Operador `typeof` 299 | 300 | El operador `typeof` es utilizado para averiguar qué tipo de dato contiene una variable. Puede ser usado con o sin paréntesis (`typeof(a)` o `typeof a`). 301 | 302 | #### [Ejemplo 1: Tipos de datos y operador `typeof`](./Ejemplo-01) 303 | 304 | --- 305 | 306 | ## Type coercion 307 | 308 | La coerción de datos o type coercion es el proceso de convertir un valor de un tipo de dato a otro, por ejemplo, string a number, boolean a string, etc. Dicho proceso se puede dar de manera tanto explícita como implícita. 309 | 310 | La forma explícita es cuando se quiere hacer de manera intencional usando las funciones adecuadas como `String(value)` o `Number(value)`, a esto también se le conoce como type casting. 311 | 312 | Anteriormente mencionamos que JavaScript es un lenguaje de tipado débil, es por ello que los valores pueden cambiar de tipo de dato de manera automática, esto es la coerción de datos implícita. Usualmente pasa cuando aplicamos algún operador a valores con tipos de datos distintos. 313 | 314 | En JavaScript sólo existen tres tipos de conversiones posibles: 315 | 316 | - String 317 | - Number 318 | - Boolean 319 | 320 | ### String conversion 321 | 322 | Para convertir un valor a string de manera explcícita usamos la función `String()`. La coercion implícita se da cuando usamor el operador `+` y cualquiera de los operandos es un string. 323 | 324 | ```javascript 325 | String(123); // Explícito 326 | 123 + ''; // Implícito 327 | ``` 328 | 329 | Todos los valores primitivos se pueden convertir en strings. 330 | 331 | ```javascript 332 | String(123); // '123' 333 | String(3.14); // '3.14' 334 | String(true); // 'true' 335 | String(false); // 'false' 336 | String(undefined); // 'undefined' 337 | String(null); // 'null' 338 | ``` 339 | 340 | ### Numeric conversion 341 | 342 | Para convertir explícitamente un valor a tipo numérico se aplica la función `Number()`. Le coerción implícita es un poco más compleja que la de strings porque se da en distintias formas, como el uso de operadores aritméticos, toma en cuenta que para el caso del operador `+` es string conversion y no numérico si uno de los operandos es string, como ya se mencionó anteriormente. 343 | 344 | ```javascript 345 | Number('123'); // Explícito 346 | + '123'; // Implícito 347 | 1 - '1'; // Implícito 348 | 2 * '2'; // Implícito 349 | ``` 350 | 351 | Los valores primitivos también pueden ser convertidos a tipos numéricos con distintos resultados. 352 | 353 | ```javascript 354 | Number(' 10 '); // 12 355 | Number('-10'); // 10 356 | Number('123abc'); // NaN 357 | Number(true); // 1 358 | Number(false); // 0 359 | Number(null); // 0 360 | Number(undefined); // NaN 361 | ``` 362 | 363 | ### Boolean conversion 364 | 365 | Al igual que con strings y números, para una conversión explícita se usa una función, en este caso es `Boolean()`. La coerción implícita se da en un contexto lógico o al usar operadores lógicos. 366 | 367 | ```javascript 368 | Boolean(1); // Explícito 369 | if(1) { ... } // Implícito - Contexto lógico 370 | !!2; // Implícito - Operador lógico 371 | 2 || 'Hello World'; // Implícito - Operador lógico 372 | ``` 373 | 374 | > En la siguiente sesión se vará más a detalle los operadores lógicos y booleanos 375 | 376 | --- 377 | 378 | ## Operadores Básicos 379 | 380 | Con respecto al tipo de datos `Number` puedes ejecutar operaciones para cambiar su valor. 381 | 382 | | Operador | Descripción | Ejemplo Javascript | Observaciones | 383 | |----------|-----------------------------------|-----------------------|---------------------------------------------------| 384 | | + | Adición | var resultado = 4 + 3 | | 385 | | - | Substracción | var resultado = 4 - 3 | | 386 | | * | Multiplicación | var resultado = 4 * 3 | | 387 | | / | División | var resultado = 4 / 2 | "resultado" devolvería 2 | 388 | | % | "Modulus"
Residuo de la división | var resultado = 4 % 2 | "resultado" devolvería 0 | 389 | | ++ | Incremento | var resultado = 4++ | "resultado" devolvería 5,
después de su ejecución | 390 | | -- | Decremento | var resultado = 4-- | "resultado" devolvería 3,
después de su ejecución | 391 | 392 | #### [Ejemplo 2: Operadores](./Ejemplo-02) 393 | 394 | --- 395 | 396 | ## Precedencia de Operadores 397 | 398 | La precedencia es el orden en el cual los operadores se evaluan al momento de ejecutar la operación. 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 |
PrecedenciaOperadorDescripciónAsociatividad
Primero(...)Agrupaciónn/a
Segundo++Incrementon/a
--Decrementon/a
Tercero+Unario másDeracha a izquierda
-Negación unaria
Cuarto\*MultiplicaciónIzquierda a derecha
/División
%Módulo
Quinto+AdiciónIzquierda a derecha
-Substracción
459 | 460 | #### [Ejemplo 3: Precedencia de operadores](./Ejemplo-03) 461 | 462 | #### [Reto 1: Precedencia de operadores](./Reto-01) 463 | --------------------------------------------------------------------------------