├── Sesion-07 ├── assets │ ├── tree.png │ ├── links.png │ └── document.png ├── Postwork │ ├── assets │ │ ├── app.png │ │ └── app-final.png │ └── Readme.md ├── Ejemplo-02 │ ├── assets │ │ ├── nodes.png │ │ └── paragraphs.png │ └── Readme.md ├── Ejemplo-01 │ ├── assets │ │ ├── document-1.png │ │ └── document-2.png │ └── Readme.md ├── Reto-final │ ├── assets │ │ └── functional.png │ └── Readme.md ├── Ejemplo-03 │ ├── assets │ │ └── create-nodes.png │ └── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md └── Readme.md ├── 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 ├── Reto-final │ └── Readme.md └── Readme.md ├── Sesion-05 ├── assets │ ├── instances.png │ ├── constructor.png │ ├── inheritance.png │ └── prototype-chain.png ├── Postwork │ ├── assets │ │ └── tasks.png │ └── Readme.md ├── Reto-final │ ├── assets │ │ └── tasks.png │ └── Readme.md ├── Ejemplo-01 │ ├── assets │ │ ├── instances.png │ │ └── function-constructor.png │ └── Readme.md ├── Ejemplo-02 │ ├── assets │ │ └── inheritance.png │ └── Readme.md ├── Ejemplo-03 │ ├── assets │ │ ├── prototype-2.png │ │ ├── prototype-3.png │ │ └── prototype.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 ├── Reto-final │ ├── assets │ │ └── mockup.png │ └── Readme.md ├── Ejemplo-03 │ ├── assets │ │ └── for-loop.png │ └── Readme.md ├── Postwork │ ├── assets │ │ └── user-stories.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 ├── Reto-final │ ├── assets │ │ └── functional.png │ └── Readme.md ├── Ejemplo-02 │ ├── assets │ │ └── pure-function.png │ └── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-03 │ └── Readme.md ├── Postwork │ └── Readme.md └── Readme.md ├── Sesion-01 ├── Ejemplo-01 │ ├── assets │ │ └── typeof.png │ └── Readme.md ├── Ejemplo-02 │ ├── assets │ │ ├── operators-1.png │ │ └── operators-2.png │ └── Readme.md ├── Ejemplo-03 │ ├── assets │ │ └── precedence.png │ └── Readme.md ├── Reto-final │ ├── assets │ │ └── web-app-infrastructure.jpg │ └── Readme.md ├── Reto-01 │ └── Readme.md ├── Postwork │ └── Readme.md └── Readme.md ├── Sesion-03 ├── Ejemplo-03 │ ├── assets │ │ ├── IIFE.png │ │ ├── logName.png │ │ └── IIFE-args.png │ └── Readme.md ├── Reto-final │ ├── assets │ │ ├── network.png │ │ └── folder-structure.png │ └── Readme.md ├── Ejemplo-02 │ ├── assets │ │ └── whatDoYouDo.png │ └── Readme.md ├── Ejemplo-01 │ ├── assets │ │ ├── calculateAge.png │ │ └── yearsUntilRetirement.png │ └── Readme.md ├── Reto-02 │ └── Readme.md ├── Reto-01 │ └── Readme.md ├── Reto-03 │ └── Readme.md ├── Postwork │ └── Readme.md └── Readme.md ├── Sesion-08 ├── Ejemplo-01 │ ├── assets │ │ └── colors.gif │ └── Readme.md ├── Reto-final │ ├── assets │ │ └── tasks.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 ├── Postwork │ └── Readme.md └── Readme.md └── Readme.md /Sesion-07/assets/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-07/assets/tree.png -------------------------------------------------------------------------------- /Sesion-04/assets/array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-04/assets/array.png -------------------------------------------------------------------------------- /Sesion-07/assets/links.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-07/assets/links.png -------------------------------------------------------------------------------- /Sesion-05/assets/instances.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-05/assets/instances.png -------------------------------------------------------------------------------- /Sesion-07/assets/document.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-07/assets/document.png -------------------------------------------------------------------------------- /Sesion-05/assets/constructor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-05/assets/constructor.png -------------------------------------------------------------------------------- /Sesion-05/assets/inheritance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-05/assets/inheritance.png -------------------------------------------------------------------------------- /Sesion-07/Postwork/assets/app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-07/Postwork/assets/app.png -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-01/assets/if.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-02/Ejemplo-01/assets/if.png -------------------------------------------------------------------------------- /Sesion-05/Postwork/assets/tasks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-05/Postwork/assets/tasks.png -------------------------------------------------------------------------------- /Sesion-06/assets/pure-function.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-06/assets/pure-function.png -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-01/assets/typeof.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-01/Ejemplo-01/assets/typeof.png -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-02/assets/switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-02/Ejemplo-02/assets/switch.png -------------------------------------------------------------------------------- /Sesion-02/Reto-final/assets/mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-02/Reto-final/assets/mockup.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-03/assets/IIFE.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-03/Ejemplo-03/assets/IIFE.png -------------------------------------------------------------------------------- /Sesion-05/Reto-final/assets/tasks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-05/Reto-final/assets/tasks.png -------------------------------------------------------------------------------- /Sesion-05/assets/prototype-chain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-05/assets/prototype-chain.png -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-02/assets/nodes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-07/Ejemplo-02/assets/nodes.png -------------------------------------------------------------------------------- /Sesion-08/Ejemplo-01/assets/colors.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-08/Ejemplo-01/assets/colors.gif -------------------------------------------------------------------------------- /Sesion-08/Reto-final/assets/tasks.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-08/Reto-final/assets/tasks.gif -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-01/assets/if-else.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-02/Ejemplo-01/assets/if-else.png -------------------------------------------------------------------------------- /Sesion-02/Ejemplo-03/assets/for-loop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-02/Ejemplo-03/assets/for-loop.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-03/assets/logName.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-03/Ejemplo-03/assets/logName.png -------------------------------------------------------------------------------- /Sesion-03/Reto-final/assets/network.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-03/Reto-final/assets/network.png -------------------------------------------------------------------------------- /Sesion-06/Ejemplo-01/assets/mutable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-06/Ejemplo-01/assets/mutable.png -------------------------------------------------------------------------------- /Sesion-07/Postwork/assets/app-final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-07/Postwork/assets/app-final.png -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-02/assets/operators-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/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/HEAD/Sesion-01/Ejemplo-02/assets/operators-2.png -------------------------------------------------------------------------------- /Sesion-01/Ejemplo-03/assets/precedence.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-01/Ejemplo-03/assets/precedence.png -------------------------------------------------------------------------------- /Sesion-02/Postwork/assets/user-stories.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-02/Postwork/assets/user-stories.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-02/assets/whatDoYouDo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-03/Ejemplo-02/assets/whatDoYouDo.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-03/assets/IIFE-args.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/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/HEAD/Sesion-05/Ejemplo-01/assets/instances.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-02/assets/inheritance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/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/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/HEAD/Sesion-05/Ejemplo-03/assets/prototype-3.png -------------------------------------------------------------------------------- /Sesion-05/Ejemplo-03/assets/prototype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/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/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/HEAD/Sesion-06/Ejemplo-03/assets/sum-digits.png -------------------------------------------------------------------------------- /Sesion-06/Reto-final/assets/functional.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-06/Reto-final/assets/functional.png -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-01/assets/document-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/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/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/HEAD/Sesion-07/Ejemplo-02/assets/paragraphs.png -------------------------------------------------------------------------------- /Sesion-07/Reto-final/assets/functional.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-07/Reto-final/assets/functional.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-01/assets/calculateAge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-03/Ejemplo-01/assets/calculateAge.png -------------------------------------------------------------------------------- /Sesion-04/Ejemplo-01/assets/multiplyByTwo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/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/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/HEAD/Sesion-06/Ejemplo-02/assets/pure-function.png -------------------------------------------------------------------------------- /Sesion-07/Ejemplo-03/assets/create-nodes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-07/Ejemplo-03/assets/create-nodes.png -------------------------------------------------------------------------------- /Sesion-08/Ejemplo-02/assets/changing-text.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/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/HEAD/Sesion-08/Ejemplo-03/assets/pressing-keys.gif -------------------------------------------------------------------------------- /Sesion-03/Reto-final/assets/folder-structure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-03/Reto-final/assets/folder-structure.png -------------------------------------------------------------------------------- /Sesion-03/Ejemplo-01/assets/yearsUntilRetirement.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/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/HEAD/Sesion-05/Ejemplo-01/assets/function-constructor.png -------------------------------------------------------------------------------- /Sesion-01/Reto-final/assets/web-app-infrastructure.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beduExpert/B1-Programacion-con-Javascript-2020/HEAD/Sesion-01/Reto-final/assets/web-app-infrastructure.jpg -------------------------------------------------------------------------------- /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-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-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-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/Postwork/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 05`](../Readme.md) > `Postwork` 2 | 3 | --- 4 | 5 | ## Postwork 6 | 7 | ### Objetivo 8 | 9 | Integrar function constructors e instanciamiento de objetos en el proyecto. 10 | 11 | #### Desarrollo 12 | 13 | Una ventaja más de crear un function constructor para `Task` es que nos permite agregar funciones en el prototype para que sean heredadas a todas las instancias. Un caso muy práctico sería para funciones que deban modificar propiedades del mismo objeto. 14 | 15 | ```javascript 16 | function toggleTaskCompleted(index) { 17 | tasks[index].isCompleted = !tasks[index].isCompleted; 18 | } 19 | ``` 20 | 21 | La sesión anterior creamos la función `toggleTaskCompleted` para modificar la propiedad `isCompleted` de cualquier tarea en base a su posición en el arreglo. Podemos poner esta función en el prototype de `Task` de la siguiente manera: 22 | 23 | ```javascript 24 | var Task = function(description, isCompleted) { 25 | this.description = description; 26 | this.isCompleted = isCompleted; 27 | } 28 | 29 | Task.prototype.toggleCompleted = function() { 30 | this.isCompleted = !this.isCompleted; 31 | } 32 | ``` 33 | 34 | Ahora todos los objetos creados a partir de `Task` tendrán acceso a esta función. 35 | 36 | ```javascript 37 | var tasks = []; 38 | 39 | function addTask(description, isCompleted = false) { 40 | tasks.push(new Task(description, isCompleted)); 41 | } 42 | 43 | addTask('Some task to do'); 44 | 45 | console.log(tasks[0]); // { description: 'Some...', isCompleted: false } 46 | 47 | tasks[0].toggleCompleted(); 48 | 49 | console.log(tasks[0]); // { description: 'Some...', isCompleted: true } 50 | ``` 51 | 52 | ![Tasks](./assets/tasks.png) 53 | -------------------------------------------------------------------------------- /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-02/Reto-final/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 02`](../Readme.md) > `Reto Final` 2 | 3 | --- 4 | 5 | ## Reto Final 6 | 7 | ### Objetivo 8 | 9 | Realizar los mockups y la planeación del proyecto que se desarrollará a lo largo del módulo. También, reforzar conceptos utilizados en la sesión. 10 | 11 | #### Desarrollo 12 | 13 | Ahora que ya tienes definido cuál será tu proyecto debes comenzar la planeación. Tal vez consideres esta parte como un paso innecesario pero es bueno que te acostumbres a siempre hacerlo independientemente del tipo de proyectos que tengas, de esta forma te ahorrarás tiempo de desarrollo. 14 | 15 | Lo primero es hacer un mockup de la aplicación. Un mockup es un diseño digital de un sitio web y/o aplicación. Estos se utilizan en la fase de diseño inicial para visualizar ideas y conceptos en el contexto del diseño web e incluyen la estructura de navegación, el sitio y los elementos de diseño en detalle. 16 | 17 | Los mockups se utilizan para pruebas de usabilidad mucho antes de si quiera empezar a programar. De este modo, cualquier problema se detecta antes de crear el prototipo y se reduce el riesgo de que un concepto tenga que ser completamente revisado a mitad de la fase de desarrollo. Como se mencionó anteriormente, los mockups pueden contribuir a ahorrar tiempo y dinero en un proyecto. 18 | 19 | ![mockup](./assets/mockup.png) 20 | 21 | No es necesario utilizar algún software, este bosquejo se puede realizar con papel y lápiz, y puede ser tan detallado o minimalista como gustes. El objetivo es plasmar en físico las ideas que tienes sobre cómo debe verse y qué quieres que haga. 22 | 23 | Incluso puedes crear varios mockups para simular la interación del usuario con la aplicación, es decir, puedes crear distintas vistas de la aplicación que se muestran cuando un usuario hace click en algún botón en específico o cuando llena un formulario. 24 | -------------------------------------------------------------------------------- /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-01/Postwork/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../Readme.md) > [`Sesión 01`](../Readme.md) > `Postwork` 2 | 3 | --- 4 | 5 | ## Postwork 6 | 7 | ### Objetivo 8 | 9 | Definir el proyecto que se desarrollará a lo largo del módulo. 10 | 11 | #### Desarrollo 12 | 13 | Una vez tengas definido lo que quieres realizar debes escoger un nombre para el proyecto y crear un repositorio en **GitHub** para alojar el proyecto y llevar un control en sus versiones. 14 | 15 | Después de iniciar sesión, en la esquina superior derecha encontrarás un menú desplegable con la opción **Nuevo repositorio** 16 | 17 | ![Repo create](https://help.github.com/assets/images/help/repository/repo-create.png). 18 | 19 | El nombre del repositorio debe ser en minúsculas, con guiones en lugar de espacios y sin caracteres especiales. Por ejemplo: *hello-world*. 20 | 21 | ![Create repo name](https://help.github.com/assets/images/help/repository/create-repository-name.png) 22 | 23 | La descripción debe ser breve e incluir a grandes rasgos de qué trata el proyecto. Por ejemplo: *Aplicación para crear recordatorios*. 24 | 25 | ![Create repo desc](https://help.github.com/assets/images/help/repository/create-repository-desc.png) 26 | 27 | Selecciona el repositorio como público. 28 | 29 | ![Create repo public](https://help.github.com/assets/images/help/repository/create-repository-public-private.png) 30 | 31 | Selecciona **Inicializar este repositorio con un README**. 32 | 33 | ![Create repo init readme](https://help.github.com/assets/images/help/repository/create-repository-init-readme.png) 34 | 35 | Finalmente haz click en **Crear repositorio**. 36 | 37 | #### Opcional 38 | 39 | Para reforzar lo visto en clase se recomienda leer la [introducción](https://eloquentjavascript.net/00_intro.html) (historia de JavaScript) y el [capítulo 1](https://eloquentjavascript.net/01_values.html) (variables, tipos de datos y operadores) del siguiente libro interactivo: 40 | 41 | **[Eloquent JavaScript](https://eloquentjavascript.net/)** 42 | -------------------------------------------------------------------------------- /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-02/Postwork/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../Readme.md) > [`Sesión 02`](../Readme.md) > `Postwork` 2 | 3 | --- 4 | 5 | ## Postwork 6 | 7 | ### Objetivo 8 | 9 | Realizar los mockups y la planeación del proyecto que se desarrollará a lo largo del módulo. También, reforzar conceptos utilizados en la sesión. 10 | 11 | #### Desarrollo 12 | 13 | Lo siguiente que puedes hacer es crear user stories. Los user stories son descripciones pequeñas y simples de una funcionalidad o feature desde el punto de vista de la persona que va a hacer uso de dicho feature. Normalmente esa persona es el usuario final, pero también puede ser alguien con rol de administrador o permisos especiales. 14 | 15 | Se pueden escribir de la siguiente manera: 16 | 17 | ``` 18 | Como , quiero para 19 | ``` 20 | 21 | Algunos ejemplos para el Todo App podrían ser: 22 | 23 | - Como usuario quiero agregar nuevas tareas a la lista. 24 | - Como usuario quiero marcar una tarea como completada. 25 | - Como usuario quiero eliminar una tarea para que no utilice espacio. 26 | - Como usuario quiero filtrar tareas completadas o no completadas. 27 | - Como usuario quiero buscar una tarea específica. 28 | - Como usuario quiero scrollear cuando la lista es muy larga. 29 | 30 | ![User Stories](./assets/user-stories.png) 31 | 32 | Con esto tenemos una lista de features que queremos en nuestra aplicación. Ahora podemos decidir cuáles son obligatorias tener en nuestra aplicación y cuáles podemos dejar para después e incluir como mejoras de la aplicación. 33 | 34 | 35 | #### Opcional 36 | 37 | Para reforzar lo visto en clase se recomienda leer el [capítulo 2](https://eloquentjavascript.net/02_program_structure.html) del siguiente libro interactivo: 38 | 39 | **[Eloquent JavaScript](https://eloquentjavascript.net/)** 40 | 41 | En este capítulo encontrarás más información sobre el control de flujo de una aplicación mediante el uso de condicionales y blucles, también vienen convenciones comunes para nombrar variables y al final del capítulo verás 3 ejercicios que puedes resolver desde la página. 42 | -------------------------------------------------------------------------------- /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-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-05/Reto-final/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 05`](../Readme.md) > `Reto Final` 2 | 3 | --- 4 | 5 | ## Reto Final 6 | 7 | ### Objetivo 8 | 9 | Integrar function constructors e instanciamiento de objetos en el proyecto. 10 | 11 | #### Desarrollo 12 | 13 | Ya vimos cómo podemos instanciar múltiples objetos a partir de un constructor para evitar repetir el mismo código una y otra vez, ahora podemos implementar la misma lógica en el proyecto. 14 | 15 | Siguiendo el ejemplo de la aplicación para crear tareas, pasamos de tener múltiples variables como las siguientes: 16 | 17 | ```javascript 18 | var task1 = { 19 | description: 'Some task to do', 20 | isCompleted: false 21 | } 22 | 23 | var task2 = { 24 | description: 'Another task to do', 25 | isCompleted: false 26 | } 27 | 28 | var task3 = { 29 | description: 'One more task to do', 30 | isCompleted: false 31 | } 32 | ``` 33 | 34 | A guardar todos los objetos dentro de un arreglo: 35 | 36 | ```javascript 37 | var tasks = [ 38 | { 39 | description: 'Some task to do', 40 | isCompleted: false 41 | }, 42 | { 43 | description: 'Another task to do', 44 | isCompleted: false 45 | }, 46 | { 47 | description: 'One more task to do', 48 | isCompleted: false 49 | } 50 | ] 51 | ``` 52 | 53 | Para implementar los conceptos de programación orientada a objetos vistos hasta ahora, vamos crear un function constructor `Task` e instanciar los tasks que irán dentro del arreglo `tasks`. 54 | 55 | ```javascript 56 | var Task = function(description, isCompleted) { 57 | this.description = description; 58 | this.isCompleted = isCompleted; 59 | } 60 | ``` 61 | 62 | Con esto podemos instanciar nuevos objetos a partir de `Task`. Para ello vamos a crear una función que se encargará de agregar una nueva tarea al arreglo que inicialmente se encontrará vacío. 63 | 64 | ```javascript 65 | var tasks = []; 66 | 67 | function addTask(description, isCompleted = false) { 68 | tasks.push(new Task(description, isCompleted)); 69 | } 70 | ``` 71 | 72 | En JavaScript podemos asignar un valor por default a los parámetros de una función. Esto significa que si no pasamos un valor para `isCompleted` la función le asignará `false` por default, por lo que sólo debemos pasarle `description` a la función al menos que queramos crear una tarea ya completada. 73 | 74 | ```javascript 75 | addTask('Some task to do'); 76 | 77 | console.log(tasks[0]); // { description: 'Some...', isCompleted: false } 78 | 79 | addTask('Completed task', true); 80 | 81 | console.log(tasks[1]); // { description: 'Completed...', isCompleted: true } 82 | ``` 83 | 84 | ![Tasks](./assets/tasks.png) 85 | -------------------------------------------------------------------------------- /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-06/Reto-final/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 06`](../Readme.md) > `Reto Final` 2 | 3 | --- 4 | 5 | ## Reto Final 6 | 7 | ### Objetivo 8 | 9 | Integrar principios de programación funcional en el proyecto. 10 | 11 | #### Desarrollo 12 | 13 | En la sesión anterior creamos un constructor para crear nuevas instancias de `Task` e ir agregando tareas a nuestro arreglo `tasks` mediante la función `addTask()`: 14 | 15 | ```javascript 16 | var tasks = []; 17 | 18 | var Task = function(description, isCompleted) { 19 | this.description = description; 20 | this.isCompleted = isCompleted; 21 | } 22 | 23 | function addTask(description, isCompleted = false) { 24 | tasks.push(new Task(description, isCompleted)); 25 | } 26 | ``` 27 | 28 | La función `addTask()` no es una función pura porque está modificando `tasks`, una variable que no forma parte de los parámetros de la función. 29 | 30 | ```javascript 31 | function addTask(tasks, description, isCompleted = false) { 32 | tasks.push(new Task(description, isCompleted)); 33 | } 34 | ``` 35 | 36 | Agregar `tasks` a la lista de parámetros no es suficiente, la función sigue sin ser pura porque se encuentra mutando `tasks`. Debemos crear una copia de `tasks` para no mutar el arreglo original. 37 | 38 | ```javascript 39 | function addTask(tasks, description, isCompleted = false) { 40 | var newTasks = tasks.map(function(task) { return task; }); 41 | 42 | ... 43 | } 44 | ``` 45 | 46 | En el [ejemplo 2](../Ejemplo-02/Readme.md) vimos cómo usar `map()` para crear una copia de un arreglo. En uno de los retos implementamos el método `concat()` para unir dos arreglos, este método es una buena alternativa para `map()`. 47 | 48 | ```javascript 49 | function addTask(tasks, description, isCompleted = false) { 50 | var newTasks = [].concat(tasks); 51 | 52 | ... 53 | } 54 | ``` 55 | 56 | Por último debemos agregar la nueva tarea a `newTasks`. En este caso no usaremos el constructor `Tasks`, simplemente agregaremos un objeto nuevo a `newTasks`. 57 | 58 | ```javascript 59 | function addTask(tasks, description, isCompleted = false) { 60 | var newTasks = [].concat(tasks); 61 | 62 | newTasks.push({ 63 | description: description, 64 | isCompleted: isCompleted 65 | }); 66 | 67 | return newTasks; 68 | } 69 | ``` 70 | 71 | Para usar esta función debemos siempre pasar `tasks` y reemplazarlo con el nuevo arreglo creado en `addTask()`. 72 | 73 | ```javascript 74 | var tasks = []; 75 | 76 | function addTask(tasks, description, isCompleted = false) { 77 | var newTasks = [].concat(tasks); 78 | 79 | newTasks.push({ 80 | description: description, 81 | isCompleted: isCompleted 82 | }); 83 | 84 | return newTasks; 85 | } 86 | 87 | tasks = addTask(tasks, 'Some task to do'); 88 | 89 | console.log(tasks[0]); // { description: 'Some...', isCompleted: false } 90 | ``` 91 | 92 | ![Functional](./assets/functional.png) 93 | -------------------------------------------------------------------------------- /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-07/Postwork/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 07`](../Readme.md) > `Postwork` 2 | 3 | --- 4 | 5 | ## Postwork 6 | 7 | ### Objetivo 8 | 9 | Crear nodos para dar estructura al proyecto en base a los mockups realizados anteriormente. 10 | 11 | #### Desarrollo 12 | 13 | Ya hemos visto cómo cambiar la estructura de un documento manipulando el DOM al crear elementos y modificarlos. Además, en el [Reto Final](../Reto-final) realizamos dos funciones auxiliares que facilitan la creación de nodos. 14 | 15 | Ahora puedes comenzar a integrar todo lo visto en tu proyecto. En la [sesión 3](../../Sesion-03/Reto-final) vimos una estructura sugerida para iniciar el proyecto, en el HTML puedes tener un sólo `
` e ir construyendo los demás elementos desde JavaScript. 16 | 17 | ```html 18 | 19 | 20 | 21 | 22 | 23 | Todo App 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | 32 | ``` 33 | 34 | Este elemento `
` lo usaremos como un contenedor para el resto de la aplicación. 35 | 36 | ```javascript 37 | var container = document.getElementById('app'); 38 | ``` 39 | 40 | Todos los demás elementos que creemos los agregaremos como hijos de `container`. 41 | 42 | ```javascript 43 | var title = createNode('h1', 'Todo App'); 44 | 45 | var addButton = createNode('button', 'Add', { type: 'button' }); 46 | 47 | var input = createNode('input', '', { type: 'text', placeholder: 'New task...' }); 48 | ``` 49 | 50 | Sin usar la función `createNode` que hicimos anteriormente tendríamos que crear los nodos de texto por separado y agregar los atributos mediante las propiedades `.type` y `.placeholder` respectivamente. El segundo argumento para el input es un string vacío ya que la etiqueta `` se cierra sola y no tiene nodos hijos. 51 | 52 | En lugar de usar `.appendChild()` tres veces podemos agregar estos elementos con la función auxiliar `appendChildren()`. 53 | 54 | ```javascript 55 | appendChildren(container, [title, input, addButton]); 56 | ``` 57 | 58 | ![App](./assets/app.png) 59 | 60 | Como podrás ver, puedes realizar toda la estructura del mockup de tu proyecto sólo con JavaScript. Al final tendrás que agregar estilos, recuerda que `class` es una palabra reservada en JavaScript por lo que debes usar la propiedad `className`. 61 | 62 | ```javascript 63 | var container = document.getElementById('app'); 64 | container.className = 'container'; 65 | 66 | var title = createNode('h1', 'Todo App', { className: 'title' }); 67 | 68 | var addButton = createNode('button', 'Add', { type: 'button', className: 'add-button' }); 69 | 70 | var input = createNode('input', '', { type: 'text', placeholder: 'New task...', className: 'todo-input' }); 71 | ``` 72 | 73 | ![App Final](./assets/app-final.png) 74 | -------------------------------------------------------------------------------- /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-08/Reto-final/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 08`](../Readme.md) > `Reto Final` 2 | 3 | --- 4 | 5 | ## Reto Final 6 | 7 | ### Objetivo 8 | 9 | Integrar event handlers para agregar interactividad en el proyecto. 10 | 11 | #### Desarrollo 12 | 13 | Como reto final debes permitir al usuario interactuar con tu aplicación agregando los event handlers necesarios. 14 | 15 | Retomando el ejemplo del Todo App, parte crucial de la aplicación es poder agregar tareas. Ya habíamos creado anteriormente la función `addTask` para esto. 16 | 17 | ```javascript 18 | function addTask(tasks, description, isCompleted = false) { 19 | var newTasks = [].concat(tasks); 20 | 21 | newTasks.push({ 22 | description: description, 23 | isCompleted: isCompleted 24 | }); 25 | 26 | return newTasks; 27 | } 28 | ``` 29 | 30 | La solución más obvia sería agregar un event handler al botón para que llame a la función `addTask`. Sin embargo, es necesario hacer unos pasos extras antes de agregar la nueva tarea a nuestra lista como validar que el input no se encuentra vacío, e incluso después de agregar la tarea tenemos que hacer algunos pasos como limpiar el input y finalmente mostrar la lista. Para todo esto necesitamos una funcción intermediaria. 31 | 32 | ```javascript 33 | var addButton = createNode('button', 'Add', { type: 'button', className: 'add-button' }); 34 | addButton.addEventListener('click', handleClick); 35 | 36 | function handleClick() { 37 | if(input.value !== '') { // Check input isn't empty 38 | tasks = addTask(tasks, input.value); // Add the task 39 | input.value = ''; // Clean input 40 | renderList(listContainer, tasks); // Render the list 41 | } 42 | } 43 | ``` 44 | 45 | Ahora que se actualizó `tasks` podemos llamar la función `renderList` para crear los nodos que representant las tareas y agregarlos a `listContainer`. 46 | 47 | ```javascript 48 | function renderList(node, tasks) { 49 | node.innerHTML = ''; // Remove all items first 50 | 51 | var fragment = document.createDocumentFragment(); 52 | 53 | tasks.forEach(function(task) { 54 | var listItem = createNode('div', task.description, { className: 'list-item' }); 55 | fragment.appendChild(listItem); 56 | }) 57 | 58 | node.appendChild(fragment); 59 | } 60 | ``` 61 | 62 | Cuando trabajamos con funciones que tengan que agregar nodos a una lista en ocasiones es necesario limpiar esa lista primero, de lo contrario cada nuevo nodo se suma a la lista anterior generando duplicados. Con `node.innerHTML = ''` eliminamos todo el contenido del nodo que contiene la lista. 63 | 64 | Otra ventaja de haber separado `renderList` del handler es que podemos podemos llamar esta función desde otras partes de la aplicación si es necesario modificar la lista, por ejemplo, agregando un botón para borrar todas las tareas. 65 | 66 | ![Tasks](./assets/tasks.gif) 67 | 68 | Ahora puedes agregar los event handlers necesarios a tu proyecto separando la lógica que manipula datos de las funciones que crean nodos y manipulan el DOM. 69 | -------------------------------------------------------------------------------- /Sesion-08/Postwork/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 08`](../Readme.md) > `Postwork` 2 | 3 | --- 4 | 5 | ## Postwork 6 | 7 | ### Objetivo 8 | Implementar lo aprendido a lo largo del módulo. 9 | 10 | #### Resumen 11 | 12 | A lo largo del módulo aprendiste conceptos fundamentales de JavaScript e implementaste dichos conceptos en un proyecto personal. Partimos de variables y tipos de datos en la sesión 1, vimos cómo definir variables y las distintas formas tanto explícitas como implícitas de cambiar el tipo de dato, así como también los principales operadores que se pueden manejar con datos de tipo `Number`. 13 | 14 | En la sesión 2 vimos que todas las variables en JavaScript tienen un valor booleano truthy o falsy y su importacia para controlar el flujo de ejecución de la aplicación mediante operadores lógicos y condicionales como `if/else`, `switch` o el operador ternario. También implementamos bucles con los ciclos `for` y `while` para ejecutar sentencias repetidamente. 15 | 16 | Vimos las diferencias entre dos paradigmas de programación y cómo JavaScript es lo suficientemente flexible como para implementar conceptos de programación funcional a la par de programación orientada a objetos. Ningún paradigma resuelve todos los problemas de la forma más sencilla y eficiente, pero sabemos cómo sacar provecho de ambos paradigmas. 17 | 18 | Por último aprendimos a manipular el DOM creando nodos y modificando la estructura del árbol. Vimos que los nodos son objetos que representan elementos del documento e incluyen propiedades que nos permiten acceder a los atributos de dichos elementos, e incluso cuentan con métodos como `addEventListener` que nos permite registrar un event handler a un nodo para reaccionar a un evento realizado por el usuario o el navegador mismo. 19 | 20 | #### Siguientes pasos 21 | 22 | La mejor forma de aprender a programar es practicando. Visita nuevamente la [lista de proyectos](https://learnvanillajs.com/projects/) de la sesión 1 para continuar implementando lo que has aprendido hasta ahora. Seguramente verás la lista de manera distinta ahora que tienes en mente cómo crear aplicaciones web con JavaScript. 23 | 24 | Lo importante es seguir manteniéndote alejado de librerías y frameworks hasta que consideres que dominas los temas vistos en todo el módulo. Las librerías aceleran los tiempos de programación porque abstraen lógica compleja del código, cuando estamos aprendiendo es crucial entender cómo funcionan las cosas, esto te ayudará en un futuro pues sabrás exactamente lo que hacen las librerías reduciendo la cantidad de bugs en tu código. 25 | 26 | Además de practicar creando proyectos es bueno dedicar un tiempo a resolver problemas de programación. Esto te ayudará no sólo a crear proyectos más complejos sino también en entrevistas técnicas donde te ponen a resolver distintos _code challenges_. Algunos buenos recursos son [Project Euler](https://projecteuler.net/) y [HackerRank](https://www.hackerrank.com/dashboard) ambos cuentan con ejercicios de múltiples dificultades y una comunidad activa para discutir posibles soluciones a los problemas. 27 | -------------------------------------------------------------------------------- /Sesion-03/Postwork/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 03`](../Readme.md) > `Postwork` 2 | 3 | --- 4 | 5 | ## Postwork 6 | 7 | ### Objetivo 8 | 9 | Crear variables y funciones que se pueden integrar al proyecto postwork. Poner en práctica conceptos utilizados en sesiones anteriores. 10 | 11 | #### Desarrollo 12 | 13 | Del ejemplo anterior se tomarán los tres primeros user stories: 14 | 15 | * Como usuario quiero agregar nuevas tareas a la lista. 16 | * Como usuario quiero marcar una tarea como completada. 17 | * Como usuario quiero eliminar una tarea para que no utilice espacio. 18 | 19 | Las otras tres son muy buenas ideas también pero pueden ser implementadas como mejoras. Lo más importante para que la App funcione es que el usuario pueda crear, eliminar y marcar notas como completadas. 20 | 21 | Con lo que hemos visto hasta ahora podemos empezar a definir los tipos de datos que vamos a utilizar y pensar en nuestras primeras funciones. Por ejemplo, las tareas son el texto que el usuario ingresa por lo que un String es el tipo de dato más adecuado. Además, las tareas cuentan con dos estados, completado y no completado, esto es un Booleano. 22 | 23 | ```javascript 24 | var isCompleted = false; 25 | 26 | function markTaskAsCompleted() { 27 | isCompleted = true; 28 | } 29 | ``` 30 | 31 | Inicializo isCompleted en false porque las tareas no están completadas al momento de ser creadas. markTaskAsCompleted() es una función que me va a ayudar a cambiar este estado de completo o incompleto. Sin embargo, no me sirve para regresar isCompleted a false. Necesitaría una segunda función que haga lo opuesto o bien, podemos jugar con esta misma función para que haga ambas cosas. 32 | 33 | ```javascript 34 | 35 | function martTaskAsCompleted() { 36 | isCompleted = !isCompleted; 37 | } 38 | ``` 39 | 40 | Con esto podemos cambiar de true a false y viceversa. La función asignará a isCompleted su opuesto, es decir, si en ese momento es false lo guardará como true. 41 | 42 | Lo último que hace falta es cambiar el nombre de la función ya hace más de lo que su nombre indica. 43 | 44 | ```javascript 45 | function toggleTaskCompleted() { 46 | isCompleted = !isCompleted; 47 | } 48 | ``` 49 | 50 | Recuerda que el nombre tanto de tus variables como funciones deben ser descriptivas, con sólo leer el nombre otro desarrollador debe poder darse una idea de qué hace una función o de qué contiene una variable. 51 | 52 | Este es un ejemplo de cómo puedes ir integrando lo visto hasta ahora en tu proyecto. Puedes ir creando las variables que consideres necesarias y tus primeras funciones que deban manipular un valor. 53 | 54 | #### Opcional 55 | 56 | Para reforzar lo visto en clase se recomienda leer el [capítulo 3](https://eloquentjavascript.net/03_functions.html) del siguiente libro interactivo: 57 | 58 | **[Eloquent JavaScript](https://eloquentjavascript.net/)** 59 | 60 | En este capítulo se abordan las funciones, cómo declararlas, expresiones de funciones y funciones recursivas. Al final del capítulo encontrarás 3 ejercicios que pueden ser resueltos en la misma página. 61 | -------------------------------------------------------------------------------- /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-04/Postwork/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 04`](../Readme.md) > `Postwork` 2 | 3 | --- 4 | 5 | ## Postwork 6 | 7 | ### Objetivo 8 | 9 | Modificar las funciones creadas hasta el momento para que sean compatibles con los cambios realizados en el Reto Final. 10 | 11 | #### Desarrollo 12 | 13 | Después de haber cambiado variables por objetos y arreglos las funciones creadas anteriomente dejarán de trabajar como esperamos. 14 | 15 | ```javascript 16 | var isCompleted = false; 17 | 18 | function toggleTaskCompleted() { 19 | isCompleted = !isCompleted; 20 | } 21 | ``` 22 | 23 | La función `toggleTaskCompleted()` invertía el valor de `isCompleted` pero esta variable aislada ya no existe, ahora es parte de un arreglo de objetos. 24 | 25 | ```javascript 26 | var tasks = [ 27 | { 28 | description: 'Some task to do', 29 | isCompleted: false 30 | }, 31 | { 32 | description: 'Another task to do', 33 | isCompleted: false 34 | }, 35 | { 36 | description: 'One more task to do', 37 | isCompleted: false 38 | } 39 | ] 40 | ``` 41 | 42 | La lógica de la función seguirá siendo la misma. El ajuste que debemos hacer es pasarle un `index` para que la función sepa qué tarea es la que debe modificar. 43 | 44 | ```javascript 45 | function toggleTaskCompleted(index) { 46 | tasks[index].isCompleted = !tasks[index].isCompleted; 47 | } 48 | ``` 49 | 50 | Con esto podemos utilizar la misma función para modificar la propiedad `isCompleted` de cualquier tarea que se encuentre dentro del arreglo. 51 | 52 | ```javascript 53 | toggleTaskCompleted(0); 54 | 55 | toggleTaskCompleted(2); 56 | 57 | console.log( tasks ); 58 | 59 | /* 60 | [ 61 | { 62 | description: 'Some task to do', 63 | isCompleted: true 64 | }, 65 | { 66 | description: 'Another task to do', 67 | isCompleted: false 68 | }, 69 | { 70 | description: 'One more task to do', 71 | isCompleted: true 72 | } 73 | ] 74 | */ 75 | ``` 76 | 77 | Ahora que sabemos cómo modificar un arreglo y las propiedades de un objeto podemos avanzar con otra de los user stories: _Como usuario quiero eliminar una tarea._ 78 | 79 | ```javascript 80 | function deleteTask(index) { 81 | tasks.splice(index, 1); 82 | } 83 | ``` 84 | 85 | El método `splice()` cambia el contenido de un arreglo eliminando elementos existentes. El primer argumento es el index a partir de donde se quiere comenzar a eliminar, el segundo argumento es la cantidad de elementos a eliminar. Este caso sólo queremos elimiar una tarea cada que llamemos a la función. 86 | 87 | ```javascript 88 | deleteTask(1); 89 | 90 | console.log( tasks ); 91 | 92 | /* 93 | [ 94 | { 95 | description: 'Some task to do', 96 | isCompleted: true 97 | }, 98 | { 99 | description: 'One more task to do', 100 | isCompleted: true 101 | } 102 | ] 103 | */ 104 | ``` 105 | 106 | Ahora puedes hacer los cambios necesarios para que las funciones que creaste en la sesión anterior sigan trabajando de forma esperada después de las modificiones hechas en el reto final. 107 | -------------------------------------------------------------------------------- /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-final/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 07`](../Readme.md) > `Reto Final` 2 | 3 | --- 4 | 5 | ## Reto Final 6 | 7 | ### Objetivo 8 | 9 | Integrar funciones que faciliten la creación de elementos del DOM en el proyecto. 10 | 11 | #### Desarrollo 12 | 13 | En el [ejemplo 3](../Ejemplo-03) desarrollamos una función que nos permite crear elementos del DOM 14 | con facilidad. 15 | 16 | ```javascript 17 | function createNode(type, child) { 18 | var node = document.createElement(type); 19 | 20 | if(typeof child === "string") { 21 | var text = document.createTextNode(child); 22 | node.appendChild(text); 23 | } else { 24 | node.appendChild(child); 25 | } 26 | 27 | return node; 28 | } 29 | 30 | var title = createNode('h1', 'Hello World'); 31 | console.log(title); //

Hello World

32 | ``` 33 | 34 | Vamos a extender la funcionalidad de `createNode` para que reciba un objeto cuyas propiedades serán los atributos del elemento. Así no los tenemos que agregar manualmente después de crear el nodo. 35 | 36 | ```javascript 37 | function createNode(type, child, attrs) { 38 | var node = document.createElement(type); 39 | 40 | if(attrs) { 41 | Object.keys(attrs).map(function(attr) { 42 | node[attr] = attrs[attr]; 43 | }); 44 | } 45 | 46 | if(typeof child === "string") { 47 | node.appendChild(document.createTextNode(child)); 48 | } else { 49 | node.appendChild(child); 50 | } 51 | 52 | return node; 53 | } 54 | ``` 55 | 56 | Revisamos primero que `attrs` esté definido, es decir, podemos no pasar el tercer argumento si el elemento que queremos crear no necesita atributos. El método `Object.keys()` retorna un arreglo con todas las propiedades de un objeto, después aplicamos una función a cada elemento de ese arreglo con `map()`. Recuerda que también se pueden acceder a las propiedades de un objeto con la sintaxis similar a un arreglo. 57 | 58 | ```javascript 59 | var title = createNode('h1', 'Hello World'); 60 | console.log(title); //

Hello World

61 | 62 | var p = createNode('p', 'Hello World', { className: 'subtitle' }); 63 | console.log(p); //

Hello World

64 | ``` 65 | 66 | Si queremos agregar estos dos elementos como hijo de otro nodo debemos usar `appendChild` dos veces. 67 | 68 | ```javascript 69 | var container = document.createElement('div'); 70 | 71 | container.appendChild(title); 72 | container.appendChild(p); 73 | ``` 74 | 75 | Podemos hacer una función que reciba un nodo y un arreglo de nodos para agregar como hijos. 76 | 77 | ```javascript 78 | function appendChildren(node, children) { 79 | var documentFragment = document.createDocumentFragment(); 80 | 81 | children.forEach(function(child) { 82 | documentFragment.appendChild(child); 83 | }) 84 | 85 | node.appendChild(documentFragment); 86 | } 87 | ``` 88 | 89 | `DocumentFragment` representa un objeto del DOM que no tiene padre. Como no forma parte del documento los cambios que se hagan sobre este objeto no afectan la estructura del árbol. Normalmente se usa para _armar_ o preparar un elemento antes de insertarlo en el DOM. 90 | 91 | ```javascript 92 | appendChildren(container, [title, p]); 93 | ``` 94 | 95 | No es obligatorio incluir `createNode` y `appendChildren` en tu proyecto, sin embargo, las puedes considerar como funciones auxiliares que te permitirán crear nodos sin realizar tantos pasos. 96 | -------------------------------------------------------------------------------- /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-04/Reto-final/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 04`](../Readme.md) > `Reto Final` 2 | 3 | --- 4 | 5 | ## Reto Final 6 | 7 | ### Objetivo 8 | 9 | Revisar las variables creadas en el prework de la sesión anterior y cambiar el tipo de dato si es necesario. 10 | 11 | #### Desarrollo 12 | 13 | Ahora que hemos visto tipos de datos más complejos como arreglos y objetos podemos revisar nuevamente tanto las funciones como las variables que creamos en el postwork de la sesión anterior. Seguramente encontrarás que no todas las variables cuentan con el tipo de dato más adecuado. 14 | 15 | Siguiendo el ejemplo de la aplicación para crear tareas, vemos que teníamos una variable para representar el estado de una tarea, es decir, si se encuentra completada o no. 16 | 17 | ```javascript 18 | var isCompleted = false; 19 | ``` 20 | 21 | Esta variable por sí sola no es suficiente para representar una tarea, ya que también necesitamos la descripción de la tarea en sí. 22 | 23 | ```javascript 24 | var description = 'Some task to do'; 25 | var isCompleted = false; 26 | ``` 27 | 28 | Estas variables en conjunto representan la información necesaria de una tarea, sin embargo, manejar esta información por separado es más complejo, especialmente cuando estemos jugando con más de una tarea. En este caso, un objeto es la mejor forma de lograr lo que queremos. 29 | 30 | ```javascript 31 | var task = { 32 | description: 'Some task to do', 33 | isCompleted: false 34 | } 35 | ``` 36 | 37 | Ahora sí, el objeto `task` es lo que buscamos para representar una tarea. Sabemos que cuando queramos acceder a la información de `task` sólo tenemos que escribir el nombre de la variable seguida por un punto y el nombre de la propiedad. 38 | 39 | ```javascript 40 | console.log( task.description ); // 'Some task to do' 41 | 42 | console.log( task.isCompleted ); // false 43 | ``` 44 | 45 | ¿Qué pasa cuando el usuario empieza a crear varias tareas? 46 | 47 | ```javascript 48 | var task1 = { 49 | description: 'Some task to do', 50 | isCompleted: false 51 | } 52 | 53 | var task2 = { 54 | description: 'Another task to do', 55 | isCompleted: false 56 | } 57 | 58 | var task3 = { 59 | description: 'One more task to do', 60 | isCompleted: false 61 | } 62 | ``` 63 | 64 | Definitivamente crear una variable por cada tarea no es la mejor opción, podemos terminar con miles de variables y un código difícil de mantener. Una mejor alternativa es agrupar todas nuestras tareas en un arreglo, recuerda que los arreglos pueden contener cualquier tipo de dato, incluyendo objetos. 65 | 66 | ```javascript 67 | var tasks = [ 68 | { 69 | description: 'Some task to do', 70 | isCompleted: false 71 | }, 72 | { 73 | description: 'Another task to do', 74 | isCompleted: false 75 | }, 76 | { 77 | description: 'One more task to do', 78 | isCompleted: false 79 | } 80 | ] 81 | ``` 82 | 83 | Mucho mejor, ahora tenemos todas las tareas en una misma variable y podemos acceder a cualquiera de ellas mediante el `index` del arreglo. 84 | 85 | ```javascript 86 | console.log( tasks[0].description ); // 'Some task to do' 87 | 88 | console.log( tasks[1].description ); // 'Another task to do' 89 | 90 | console.log( tasks[2].description ); // 'One more task to do' 91 | ``` 92 | 93 | Ahora puedes implementar la misma lógica en tu proyecto, revisa qué información tienes que pueda ser representada en un objeto y qué variables es mejor agrupar dentro de un arreglo. 94 | -------------------------------------------------------------------------------- /Sesion-06/Postwork/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 06`](../Readme.md) > `Postwork` 2 | 3 | --- 4 | 5 | ## Postwork 6 | 7 | ### Objetivo 8 | 9 | Integrar principios de programación funcional en el proyecto. 10 | 11 | #### Desarrollo 12 | 13 | Como ya no estamos usando el constructor `Task` no podemos asignar `toggleCompleted` al prototype: 14 | 15 | ```javascript 16 | Task.prototype.toggleCompleted = function() { 17 | this.isCompleted = !this.isCompleted; 18 | } 19 | ``` 20 | 21 | Por lo que podemos retomar la función original y hacer los cambios necesarios para que sea una función pura. 22 | 23 | ```javascript 24 | function toggleTaskCompleted(index) { 25 | tasks[index].isCompleted = !tasks[index].isCompleted; 26 | } 27 | ``` 28 | 29 | Al igual que con `addTask()` debemos pasar `tasks`, crear una copia para modificar la propiedad `isCompleted` y después actualizar el arreglo original. 30 | 31 | ```javascript 32 | function toggleTaskCompleted(tasks, index) { 33 | var newTasks = [].concat(tasks); 34 | 35 | newTasks[index].isCompleted = !newTasks[index].isCompleted; 36 | 37 | return newTasks; 38 | } 39 | ``` 40 | 41 | Una mejora que podemos hacer en esta función es validar el index de `tasks`. Si sólo tenemos una tarea en el arreglo y pasamos `2` como index tendremos un error porque `tasks[2]` es `undefined`, es decir, no existe esa tarea. 42 | 43 | ```javascript 44 | function toggleTaskCompleted(tasks, index) { 45 | var newTasks = [].concat(tasks); 46 | 47 | if(newTasks[index]) { 48 | newTasks[index].isCompleted = !newTasks[index].isCompleted; 49 | } 50 | 51 | return newTasks; 52 | } 53 | ``` 54 | 55 | Otra función que debemos modificar es `deleteTask()`: 56 | 57 | ```javascript 58 | function deleteTask(index) { 59 | tasks.splice(index, 1); 60 | } 61 | ``` 62 | 63 | Al igual que con las funciones anteriores debemos pasar `tasks` para hacer una copia. Por otro lado, podemos usar la función de alto orden `filter()` en lugar del método `splice()`. 64 | 65 | ```javascript 66 | function deleteTask(tasks, index) { 67 | var newTasks = tasks.filter(function(task, i) { 68 | return i !== index; 69 | }) 70 | 71 | return newTasks; 72 | } 73 | ``` 74 | 75 | > No es necesario usar `concat()` ya que `filter()` retorna un nuevo arreglo. El parámetro `i` representa el index de `task`. 76 | 77 | ```javascript 78 | var tasks = []; 79 | 80 | function addTask(tasks, description, isCompleted = false) { 81 | var newTasks = [].concat(tasks); 82 | 83 | newTasks.push({ 84 | description: description, 85 | isCompleted: isCompleted 86 | }); 87 | 88 | return newTasks; 89 | } 90 | 91 | function toggleTaskCompleted(tasks, index) { 92 | var newTasks = [].concat(tasks); 93 | 94 | if(newTasks[index]) { 95 | newTasks[index].isCompleted = !newTasks[index].isCompleted; 96 | } 97 | 98 | return newTasks; 99 | } 100 | 101 | function deleteTask(tasks, index) { 102 | var newTasks = tasks.filter(function(task, i) { 103 | return i !== index; 104 | }) 105 | 106 | return newTasks; 107 | } 108 | ``` 109 | 110 | No todas las funciones de tu proyecto deben ser puras, en ocasiones es necesario tener funciones que produzcan efectos secundarios. Lo importante es conocer ambos paradigmas de programación, tanto programación orientada a objetos como programación funcional, e implementar los conceptos de la mejor forma posible para solucionar un problema. 111 | -------------------------------------------------------------------------------- /Sesion-01/Reto-final/Readme.md: -------------------------------------------------------------------------------- 1 | [`Programación con JavaScript`](../../Readme.md) > [`Sesión 01`](../Readme.md) > `Reto Final` 2 | 3 | --- 4 | 5 | ## Reto Final 6 | 7 | ### Objetivo 8 | 9 | Definir el proyecto que se desarrollará a lo largo del módulo. 10 | 11 | #### Desarrollo 12 | 13 | Una aplicación web es una herramienta informática accesible desde cualquier navegador, bien sea a través de internet o por medio de una red local. Las aplicaciones de este presentan grandes ventajas: 14 | 15 | - La primera y quizás la más importante es que el usuario no necesita realizar ningún tipo de instalación o descarga, el acceso a la aplicación y toda su funcionalidad se da por medio del navegador. 16 | - Una aplicación web es multiplataforma y multidispositivo. Esto significa que nos podemos olvidar del sistema operativo de cada dispositivo desde el cuál se está accediendo y los usuarios puedes entrar desde un ordenador, tablet o smartphone. 17 | - Otra gran ventaja es que la potencia no está en el dispositivo que accede, por lo que aunque tengamos un ordenador con bajos recursos la aplicación puede ser muy potente, ya que el peso no lo soporta el equipo desde el que se accede sino el servidor donde está alojada. 18 | - La aplicación puede estar en la nube, con lo que sería accesible para cualquier ordenador con acceso a internet (aunque también podría ser una aplicación local en una intranet). 19 | - Y para finalizar, es muy adaptable, visualmente intuitiva y muy fácil de actualizar si fuera necesario. 20 | 21 | Años atrás muchas de estas necesidades sólo podían ser cubiertas por aplicaciones de escritorio que requerían ser instaladas en el equipo del usuario. Hoy en día las aplicaciones web crecen en popularidad por muchas razones incluyendo las ventajas descritas anteriormente. 22 | 23 | ![Web App Infrastructure](./assets/web-app-infrastructure.jpg) 24 | 25 | Existen tres partes fundamentales en una aplicación web: 26 | 27 | - La base de datos que es donde se almacena toda necesaria como contenidos, usuarios, permisos, etc. 28 | - La aplicación en sí que es alojada en un servidor. Puede estar en la nube o un servidor local. 29 | - El usuario quien accede con cualquier dispositivo mediante un navegador y conexión a internet. 30 | 31 | Este último punto se conoce como Front End. Es toda la parte visual e interactiva en contacto con el usuario final. Hay muchas librerías y frameworks de JavaScript como Angular, React o Vue.js que permiten crear aplicaciones robustas. Sin embargo, no es necesario hacer uso de estas herramientas para construir el Front End de una aplicación web. 32 | 33 | De hecho, a lo largo de este módulo aprenderás varios conceptos de JavaScript como variables, controles de flujo, funciones, objetos, arreglos, distintos paradigmas de programación y cómo manipular el DOM. Todo esto en conjunto te permitirá desarrollar una aplicación web. 34 | 35 | Ahora que tienes una idea más clara de los temas que serán abordados en este módulo es momento de empezar a planear tu proyecto personal. Si necesitas un poco de inspiración puedes revisar esta lista de ideas. 36 | 37 | Todos los proyectos que se mencionan en este recurso pueden ser desarrollados sin el uso de librerías o frameworks. Toma en cuenta que tienen distintos niveles de dificultad, algunos son considerablemente sencillos, por lo que puedes combinar distintas ideas para crear un proyecto más robusto. Algunos otros requieren de conocimientos previos en temas que no son abordados en este módulo, pero no significa que no los puedas realizar. Puedes desarrollar una parte y revisar con tu experto alternativas para la parte faltante, o bien, te puede proporcionar recursos que te ayuden a terminar el proyecto completo. 38 | -------------------------------------------------------------------------------- /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 | - **[Reto final](./Reto-final)** 33 | 34 | - **[Postwork](./Postwork)** 35 | 36 | --- 37 | 38 | ## ¿Qué es una función? 39 | 40 | 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. 41 | 42 | ```javascript 43 | function myFunction(parameter1, parameter2) { 44 | // Código a ejecutar 45 | } 46 | ``` 47 | 48 | - `function` - La palabra clave que usamos para definir una función. 49 | 50 | - `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. 51 | 52 | - `(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. 53 | 54 | #### [Ejemplo 1: Funciones](./Ejemplo-01) 55 | 56 | #### [Reto 1: Potenciación](./Reto-01) 57 | 58 | --- 59 | 60 | ## Expresiones de función 61 | 62 | 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**. 63 | 64 | #### [Ejemplo 2: Expresión de función](./Ejemplo-02) 65 | 66 | Como vimos en el ejemplo anterior, las funciones son anónimas, es decir no tienen nombre. 67 | 68 | ```javascript 69 | var square = function(number) { 70 | return number * number; 71 | } 72 | 73 | var squareOfFour = square(4); 74 | 75 | console.log(squareOfFour); // 16 76 | ``` 77 | 78 | Pero las expresiones de funciones también pueden tener un nombre para referirse a sí mismas, como en una función recursiva. 79 | 80 | ```javascript 81 | var factorial = function fac(number) { 82 | return number < 2 ? 1 : number * fac(number - 1) 83 | } 84 | 85 | console.log(factorial(5)); // 120 86 | ``` 87 | 88 | --- 89 | 90 | ## Expresión de función ejecutada inmediatamente 91 | 92 | 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. 93 | 94 | #### [Ejemplo 3: IIFE](./Ejemplo-03) 95 | 96 | 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. 97 | 98 | #### [Reto 2: Número mayor](./Reto-02) 99 | 100 | #### [Reto 3: Fibonacci](./Reto-03) 101 | -------------------------------------------------------------------------------- /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 | - **[Reto final](./Reto-final)** 35 | 36 | - **[Postwork](./Postwork)** 37 | 38 | --- 39 | 40 | ## Event handlers 41 | 42 | 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. 43 | 44 | 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. 45 | 46 | ```javascript 47 | window.addEventListener("click", function() { 48 | console.log("Hello World!"); 49 | }); 50 | ``` 51 | 52 | `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). 53 | 54 | --- 55 | 56 | ## Eventos y nodos del DOM 57 | 58 | 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. 59 | 60 | ```html 61 |

No handler here.

62 | 63 | 64 | 65 |

No handler here.

66 | 67 | 74 | ``` 75 | 76 | > El método `querySelector` retorna el primer elemento del DOM que hace match con el selector de CSS especificado. 77 | 78 | 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. 79 | 80 | 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. 81 | 82 | También podemos eliminar handlers que hayamos creado con anterioridad usando el método `removeEventListener`. 83 | 84 | ```html 85 | 86 | 87 | 97 | ``` 98 | 99 | 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. 100 | 101 | #### [Ejemplo 1: Eventos en nodos del DOM](./Ejemplo-01) 102 | 103 | --- 104 | 105 | ## Event object 106 | 107 | 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. 108 | 109 | ```html 110 | 111 | 112 | 125 | ``` 126 | 127 | La información contenida en el event object puede variar dependiendo del tipo de evento. 128 | 129 | #### [Ejemplo 2: Usando event object](./Ejemplo-02) 130 | 131 | --- 132 | 133 | ## Tipos de eventos 134 | 135 | ### Teclado 136 | 137 | 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. 138 | 139 | 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ó. 140 | 141 | > `Meta`: En teclados Macintosh es la tecla comando (⌘). En teclados Windows es la tecla window (⊞). 142 | 143 | ### Mouse 144 | 145 | 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`. 146 | 147 | #### [Ejemplo 3: Key events](./Ejemplo-03) 148 | 149 | > Consultar la [siguiente documentación](https://developer.mozilla.org/es/docs/Web/Events) para una lista completa de los tipos de eventos. 150 | 151 | #### [Reto 1: Inflar un globo](./Reto-01) 152 | 153 | #### [Reto 2: Modal](./Reto-02) 154 | 155 | #### [Reto 3: Navegando entre tabs](./Reto-03) 156 | -------------------------------------------------------------------------------- /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 | - **[Reto final](./Reto-final)** 35 | 36 | - **[Postwork](./Postwork)** 37 | 38 | --- 39 | 40 | ## Paradigma de programación 41 | 42 | Un paradigma de programación es una forma de pensar a la hora de hacer tu código. 43 | Es como una receta que nos explica cómo debemos estructurar y organizar el código. 44 | Existen distintos tipos de paradigmas y estos difieren unos de otros en cuanto a 45 | conceptos y la forma de solucionar problemas. 46 | 47 | Existen dos grandes categorías en cuanto a estilos de programación, y la mayoría de 48 | paradigmas es una variante de una de estas dos. 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
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.
72 | 73 | Existen también **lenguajes multiparadigma**, es decir, que te permiten crear programas 74 | con múltiples estilos de programación, dándole al desarrollador la flexibilidad de 75 | escoger el mejor paradigma para cada tarea, esto implica que **ningún paradigma resuelve 76 | todos los problemas de la forma más sencilla y eficiente.** 77 | 78 | Un claro ejemplo de esto es JavaScript. Si bien se define como un lenguaje orientado 79 | a objetos, también incorpora capacidades de programación funcional. 80 | 81 | --- 82 | 83 | ## Programación orientada a objetos 84 | 85 | 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. 86 | 87 | En la sesión anterior creamos un objeto que representa información personal de una persona. 88 | 89 | ```javascript 90 | var john = { 91 | name: 'John', 92 | birthYear: 1990, 93 | job: 'Developer' 94 | } 95 | ``` 96 | 97 | Si queremos representar información de más personas tendríamos que crear múltiples objetos de la misma forma. 98 | 99 | ```javascript 100 | var john = { 101 | name: 'John', 102 | birthYear: 1990, 103 | job: 'Developer' 104 | } 105 | 106 | var mark = { 107 | name: 'Mark', 108 | birthYear: 1985, 109 | job: 'Teacher' 110 | } 111 | 112 | var jane = { 113 | name: 'Jane', 114 | birthYear: 1975, 115 | job: 'Designer' 116 | } 117 | ``` 118 | 119 | Hay una mejor forma de hacer esto. Imagina una plantilla o un template a partir del cual se pueden crear múltiples objetos. 120 | 121 | ![Constructor](./assets/constructor.png) 122 | 123 | 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`. 124 | 125 | ![Instances](./assets/instances.png) 126 | 127 | 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. 128 | 129 | #### [Ejemplo 1: Function constructor](./Ejemplo-01) 130 | 131 | #### [Reto 1: Vectores](./Reto-01) 132 | 133 | --- 134 | 135 | ## Herencia 136 | 137 | 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. 138 | 139 | ![Inheritance](./assets/inheritance.png) 140 | 141 | 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. 142 | 143 | #### [Ejemplo 2: Heredando propiedades](./Ejemplo-02) 144 | 145 | #### [Reto 2: Group](./Reto-02) 146 | 147 | --- 148 | 149 | ## Prototype 150 | 151 | 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. 152 | 153 | ![Prototype Chain](./assets/prototype-chain.png) 154 | 155 | 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**. 156 | 157 | #### [Ejemplo 3: Heredando métodos](./Ejemplo-03) 158 | 159 | #### [Reto 3: Perímetro](./Reto-03) 160 | -------------------------------------------------------------------------------- /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 | - **[Reto final](./Reto-final)** 31 | 32 | - **[Postwork](./Postwork)** 33 | 34 | --- 35 | 36 | ## Arreglos 37 | 38 | 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. 39 | 40 | ```javascript 41 | var color1 = 'Red'; 42 | var color2 = 'Blue'; 43 | var color3 = 'Green'; 44 | 45 | console.log(color1); // Red 46 | console.log(color2); // Blue 47 | console.log(color3); // Green 48 | ``` 49 | 50 | En lugar de crear tres variables distintas podemos crear un arreglo usando corchetes `[]` y separando cada elemento del arreglo con comas. 51 | 52 | ```javascript 53 | var colors = ['Red', 'Blue', 'Green']; 54 | 55 | console.log(colors); // ['Red', 'Blue', 'Green'] 56 | ``` 57 | 58 | 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. 59 | 60 | ![array](assets/array.png) 61 | 62 | Este `index` nos permite acceder a un elemento específico del arreglo. 63 | 64 | ```javascript 65 | var colors = ['Red', 'Blue', 'Green']; 66 | 67 | console.log(colors[0]); // 'Red' 68 | console.log(colors[1]); // 'Blue' 69 | console.log(colors[2]); // 'Green' 70 | console.log(colors[3]); // undefined 71 | ``` 72 | 73 | También se pueden manipular los elementos de un arreglo con el `index`. 74 | 75 | ```javascript 76 | var colors = ['Red', 'Blue', 'Green']; 77 | 78 | console.log(colors); // ['Red', 'Blue', 'Green'] 79 | 80 | colors[1] = 'Pink'; 81 | 82 | console.log(colors); // ['Red', 'Pink', 'Green'] 83 | ``` 84 | 85 | Para obtener la longitud del arreglo (cantidad de elementos) utilizamos el método `length`. 86 | 87 | ```javascript 88 | var colors = ['Red', 'Blue', 'Green']; 89 | 90 | console.log(colors); // ['Red', 'Blue', 'Green'] 91 | 92 | console.log(colors.length); // 3 93 | ``` 94 | 95 | #### [Ejemplo 1: Arreglos](./Ejemplo-01) 96 | 97 | #### [Reto 1: Calcular promedio](./Reto-01) 98 | 99 | --- 100 | 101 | ## Objetos 102 | 103 | 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. 104 | 105 | ```javascript 106 | var john = { 107 | firstName: 'John', 108 | lastName: 'Doe', 109 | birthYear: 1990 110 | } 111 | ``` 112 | 113 | 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`. 114 | 115 | ```javascript 116 | var john = { 117 | firstName: 'John', 118 | lastName: 'Doe', 119 | birthYear: 1990 120 | } 121 | 122 | console.log(john.firstName); // 'John' 123 | 124 | console.log(john['lastName']); // 'Doe' 125 | ``` 126 | 127 | De igual forma se puede cambiar el valor de las propiepdades de los objetos. 128 | 129 | ```javascript 130 | var john = { 131 | firstName: 'John', 132 | lastName: 'Doe', 133 | birthYear: 1990 134 | } 135 | 136 | console.log(john.firstName); // 'John' 137 | 138 | john.firstName = 'Jane'; 139 | 140 | console.log(john.firstName); // 'Jane' 141 | 142 | john['firstName'] = 'Joe'; 143 | 144 | console.log(john['firstName']); // 'Joe' 145 | ``` 146 | 147 | #### [Ejemplo 2: Transformando objetos en arreglos](./Ejemplo-02) 148 | 149 | #### [Reto 2: Arreglo a objeto](./Reto-02) 150 | 151 | --- 152 | 153 | ## Objetos y métodos 154 | 155 | Ya mencionamos que las propiedades de los objetos pueden contener cualquier tipo 156 | de dato, esto incluye expresiones de funciones, en cuyo caso deja de llamarse propiedad 157 | y se conoce como método. 158 | 159 | ```javascript 160 | var john = { 161 | firstName: 'John', 162 | lastName: 'Doe', 163 | birthYear: 1990, 164 | calculateAge: function(birthYear) { 165 | var today = new Date(); 166 | var year = today.getFullYear(); 167 | 168 | return year - birthYear; 169 | } 170 | } 171 | ``` 172 | 173 | Acabamos de agregar el método `calculateAge`, como vemos es una expresión de función, 174 | una función anónima que recibe `birthYear` como argumento. Este método nos regresa 175 | la edad actual de John. 176 | 177 | ```javascript 178 | console.log( john.calculateAge(1990) ); // 30 179 | ``` 180 | 181 | La variable `today` es un objeto de la clase `Date()` de JavaScript. A su vez vemos 182 | que este objeto tiene un método `getFullYear()` el cual nos regresa el año. 183 | 184 | No necesitamos pasar el argumento `birthYear` al método `calculateAge` porque ya existe 185 | como propiedad del objeto `john`. 186 | 187 | ```javascript 188 | var john = { 189 | firstName: 'John', 190 | lastName: 'Doe', 191 | birthYear: 1990, 192 | calculateAge: function() { 193 | var today = new Date(); 194 | var year = today.getFullYear(); 195 | 196 | return year - this.birthYear; 197 | } 198 | } 199 | ``` 200 | 201 | El keyword `this` hace referencia al mismo objeto, por lo que cuando decimos `this.birthYear` 202 | es como decir `john.birthYear`. Lo usamos cuando queremos hacer referencia a 203 | una propiedad o método del mismo objeto, e incluso para asignar nuevas propiedades. 204 | 205 | ```javascript 206 | var john = { 207 | firstName: 'John', 208 | lastName: 'Doe', 209 | birthYear: 1990, 210 | calculateAge: function() { 211 | var today = new Date(); 212 | var year = today.getFullYear(); 213 | 214 | this.age = year - this.birthYear; 215 | } 216 | } 217 | ``` 218 | 219 | Ahora el método `calculateAge` en lugar de retornar la edad la va a guardar en una nueva 220 | propiedad llamada `age.` 221 | 222 | ```javascript 223 | console.log( john ); 224 | /* 225 | Valor actual 226 | { 227 | firstName: "John", 228 | lastName: "Doe", 229 | birthYear: 1990, 230 | calculateAge: ƒ 231 | } 232 | */ 233 | 234 | john.calculateAge(); 235 | 236 | console.log( john ); 237 | /* 238 | Después de llamar el método calculateAge() 239 | { 240 | firstName: "John", 241 | lastName: "Doe", 242 | birthYear: 1990, 243 | age: 30, 244 | calculateAge: ƒ 245 | } 246 | */ 247 | ``` 248 | 249 | #### [Reto 3: Extraer una lista de propiedades](./Reto-03) 250 | 251 | 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. 252 | -------------------------------------------------------------------------------- /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 | - **[Reto final](./Reto-final)** 37 | 38 | - **[Postwork](./Postwork)** 39 | 40 | --- 41 | 42 | ## Programación funcional 43 | 44 | 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). 45 | 46 | ```javascript 47 | var numbers = [1, 2, 3, 4, 5]; 48 | var doubles = []; 49 | 50 | for(var i = 0; i < numbers.length; i++) { 51 | doubles.push(numbers[i] * 2); 52 | } 53 | 54 | console.log(numbers); // [1, 2, 3, 4, 5] 55 | console.log(doubles); // [2, 4, 6, 8, 10] 56 | ``` 57 | 58 | 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. 59 | 60 | ```javascript 61 | var numbers = [1, 2, 3, 4, 5]; 62 | var doubles = numbers.map(function(number) { 63 | return number * 2; 64 | }); 65 | 66 | console.log(numbers); // [1, 2, 3, 4, 5] 67 | console.log(doubles); // [2, 4, 6, 8, 10] 68 | ``` 69 | 70 | 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`. 71 | 72 | > 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. 73 | 74 | --- 75 | 76 | ## Inmutabilidad 77 | 78 | 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. 79 | 80 | 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. 81 | 82 | 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. 83 | 84 | #### [Ejemplo 1: Mutando objetos](./Ejemplo-01) 85 | 86 | --- 87 | 88 | ## Funciones puras 89 | 90 | Para que una función pueda ser considerada pura debe cumplir dos reglas: 91 | 92 | 1. El valor retornado siempre es el mismo cuando se da el mismo valor de entrada. 93 | 94 | 2. No debe producir side effects (efectos secundarios). 95 | 96 | ![Pure Function](./assets/pure-function.png) 97 | 98 | El primer punto se refiere a que si ejecutamos la misma función varias veces con los mismos argumentos siempre obtendremos el mismo resultado. 99 | 100 | ```javascript 101 | function add(a, b) { 102 | return a + b; 103 | } 104 | ``` 105 | 106 | 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`. 107 | 108 | ```javascript 109 | function randomNumber() { 110 | return Math.floor(Math.random() * 10); 111 | } 112 | ``` 113 | 114 | 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. 115 | 116 | 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: 117 | 118 | 1. Mutar los parámetros que recibe una función como en el [Ejemplo 1](./Ejemplo-01). 119 | 120 | 2. Modificar cualquier variable fuera de la función. 121 | 122 | 3. Llamadas a una API. 123 | 124 | 4. `console.log()` 125 | 126 | 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. 127 | 128 | #### [Ejemplo 2: Creando funciones puras](./Ejemplo-02) 129 | 130 | --- 131 | 132 | ## Funciones de primera clase 133 | 134 | 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. 135 | 136 | Ya hemos guardado funciones anónimas en una variable anteriormente. 137 | 138 | ```javascript 139 | var square = function(number) { 140 | return number * number; 141 | } 142 | 143 | var squareOfFour = square(4); 144 | 145 | console.log(squareOfFour); // 16 146 | ``` 147 | 148 | Por lo tanto, las expresiones de funciones como estas son consideradas funciones de primera clase. 149 | 150 | --- 151 | 152 | ## Funciones de alto orden 153 | 154 | 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()`. 155 | 156 | 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. 157 | 158 | ```javascript 159 | var numbers = [1, 2, 3, 4, 5]; 160 | var doubles = numbers.map(function(number) { 161 | return number * 2; 162 | }); 163 | 164 | console.log(numbers); // [1, 2, 3, 4, 5] 165 | console.log(doubles); // [2, 4, 6, 8, 10] 166 | ``` 167 | 168 | 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. 169 | 170 | ```JavaScript 171 | var numbers = [1, 2, 3, 4, 5]; 172 | 173 | var evenNumbers = numbers.filter(function(number) { 174 | return number % 2 === 0; 175 | }); 176 | 177 | console.log(evenNumbers); // [2, 4] 178 | ``` 179 | 180 | Por último, `reduce()` acumula o reduce todos los elementos a un valor único según la función dada. 181 | 182 | ```JavaScript 183 | var numbers = [1, 2, 3, 4, 5]; 184 | 185 | var sum = numbers.reduce(function(accumulator, currentValue) { 186 | return accumulator + currentValue; 187 | }, 0); // Initial value 188 | 189 | console.log(sum); // 15 190 | ``` 191 | 192 | #### [Ejemplo 3: Sumando Dígitos](./Ejemplo-03) 193 | 194 | #### [Reto 1: Flatten](./Reto-01) 195 | 196 | #### [Reto 2: Compact](./Reto-02) 197 | 198 | #### [Reto 3: Loop](./Reto-03) 199 | -------------------------------------------------------------------------------- /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 | - **[Reto final](./Reto-final)** 37 | 38 | - **[Postwork](./Postwork)** 39 | 40 | --- 41 | 42 | ## ¿Qué es el DOM? 43 | 44 | 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. 45 | 46 | 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. 47 | 48 | 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: 49 | 50 | ```html 51 | 52 | 53 | 54 | DOM 55 | 56 | 57 |

Document Object Model

58 |

Hello World!

59 |

Here is a 60 | link 61 |

62 | 63 | 64 | ``` 65 | 66 | Esta es la estructura de esa página: 67 | 68 | ![DOM](./assets/document.png) 69 | 70 | 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. 71 | 72 | > `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. 73 | 74 | #### [Ejemplo 1: Inspeccionando el DOM](./Ejemplo-01) 75 | 76 | --- 77 | 78 | ## Estructura de datos de árbol 79 | 80 | 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. 81 | 82 | 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`. 83 | 84 | Esta es otra forma de visualizar el ejemplo que vimos anteriormente: 85 | 86 | ![Tree](./assets/tree.png) 87 | 88 | `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. 89 | 90 | Los nodos del DOM contienen vínculos entre ellos como los que se muestran en el siguiente diagrama: 91 | 92 | ![Node links](./assets/links.png) 93 | 94 | 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. 95 | 96 | --- 97 | 98 | ## Seleccionar elementos 99 | 100 | 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. 101 | 102 | 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_. 103 | 104 | ```javascript 105 | var link = document.body.getElementsByTagName('a')[0]; 106 | 107 | console.log(link); // link 108 | ``` 109 | 110 | El método `getElementsByTagName` regresa un objeto similar a un arreglo con todos los elementos descendientes que contengan la etiqueta proporcionada como argumento. 111 | 112 | > Elementos descendientes se refiere a todos los nodos hijos directos e indirectos. 113 | 114 | Para seleccionar un sólo nodo en específico podemos darle un atributo `id` y usar el método `document.getElementById`. 115 | 116 | ```html 117 | 118 |

Document Object Model

119 |

Hello World!

120 |

Here is a 121 | link 122 |

123 | 124 | 128 | 129 | ``` 130 | 131 | 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`. 132 | 133 | ```html 134 | 135 |

Document Object Model

136 |

Hello World!

137 |

Here is a 138 | link 139 |

140 | 141 | 145 | 146 | ``` 147 | 148 | --- 149 | 150 | ## Modificar el documento 151 | 152 | 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. 153 | 154 | 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. 155 | 156 | #### [Ejemplo 2: Cambiando el DOM](./Ejemplo-02) 157 | 158 | --- 159 | 160 | ## Crear nodos 161 | 162 | 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. 163 | 164 | ```javascript 165 | var h1 = document.createElement('h1'); 166 | 167 | console.log(h1); //

168 | ``` 169 | 170 | 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`. 171 | 172 | ```javascript 173 | var text = document.createTextNode('Hello World'); 174 | 175 | console.log(text); // 'Hello World' 176 | 177 | h1.appendChild(text); 178 | 179 | console.log(h1); //

Hello World

180 | ``` 181 | 182 | #### [Ejemplo 3: Crear nuevos nodos](./Ejemplo-03) 183 | 184 | --- 185 | 186 | ## Atributos 187 | 188 | 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. 189 | 190 | ```html 191 | Some cool link 192 | 193 | 200 | ``` 201 | 202 | 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. 203 | 204 | ```html 205 | Some cool link 206 | 207 | 216 | ``` 217 | 218 | #### [Reto 1: Reemplazar imágenes](./Reto-01) 219 | 220 | #### [Reto 2: Crear una tabla](./Reto-02) 221 | -------------------------------------------------------------------------------- /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 | - **[Reto final](./Reto-final)** 42 | 43 | - **[Postwork](./Postwork)** 44 | 45 | --- 46 | 47 | ## Condicionales 48 | 49 | 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. 50 | 51 | ### Operadores lógicos 52 | 53 | JavaScript nos proporciona varios operadores lógicos para que podamos realizar operaciones de comparación. 54 | 55 | | Operador | Descripción | Ejemplos | 56 | |----------|-------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------| 57 | | == | **Igualdad:** Devuelve `true` si ambos operandos son iguales | 3 == 3
3 == "3"
"mike" == "mike"
var1 == true
| 58 | | != | **Desigualdad:** Devuelve `true` si ambos operandos no son iguales | 3 != 4 | 59 | | === | **Estrictamente iguales:**
Devuelve `true` si los operandos son igual
y tienen el mismo tipo. | 3 === 3

3 === "3"
(Devuelve falso) | 60 | | !== | **Estrictamente desiguales:**
Devuelve `true` si los operandos no son iguales
y/o no son del mismo tipo. | 3 !== "3" | 61 | | > | **Mayor que:** Devuelve `true` si el operando de la izquierda
es mayor que el operando de la derecha. | 4 > 3 | 62 | | >= | **Mayor o igual que:** | 4 >= 4 | 63 | | < | **Menor que:** Devuelve `true` si el operando de la izquierda
es menor que el operando de la derecha. | 12 < 15 | 64 | | <= | **Menor o igual que:** | 15 <= 15 | 65 | | && | **And:** Devuelve `true` si ambas condiciones se cumplen | 2 > 1 && 1 > 0 | 66 | | \|\| | **Or:** Devuelve `true` si una de las condiciones se cumplen | 2 > 1 \|\| 1 < 0 | 67 | 68 | ### `if` / `else` 69 | 70 | 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*. 71 | 72 | La sintaxis se compone de la siguiente forma: 73 | 74 | ```javascript 75 | if ( /* Condición a evaluar */ ) { 76 | /* Código a ejecutar si la condición retorna true */ 77 | } else { 78 | /* Código a ejecutar si la condición retorna false */ 79 | } 80 | ``` 81 | 82 | - `if` - La palabra clave que indica que se va a realizar una condicional. 83 | - `( ... )` - Dentro de los paréntesis se coloca la condición a evaluar, la cuál retorna un booleano, es decir, `true` o `false`. 84 | - `{ ... }` - Dentro de las llaves va el texto a ejecutar en caso de que la condición sea `true`. 85 | - `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ó. 86 | 87 | #### [Ejemplo 1: Primeras condicionales](./Ejemplo-01) 88 | 89 | #### [Reto 1: Controles de flujo](./Reto-01) 90 | 91 | ### `switch` 92 | 93 | 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`. 94 | 95 | ```javascript 96 | switch ( /* Expresión a evaluar*/ ) { 97 | case a: 98 | /* Código a ejecutar */ 99 | break; 100 | case b: 101 | /* Código a ejecutar */ 102 | break; 103 | default: 104 | /* Código a ejecutar por default */ 105 | } 106 | ``` 107 | 108 | - `switch` - La palabra clave que indica que se va a realizar una condicional. 109 | - `( ... )` - Expresión a evaluar. 110 | - `case` - Expresa uno de los posibles valores como resultado de la evaluación que se está haciendo. 111 | - `break` - Detiene la ejecución del bloque y sale del `switch`. 112 | - `default` - Define qué se debe hacer cuando ninguno de los casos se cumple. 113 | 114 | #### [Ejemplo 2: Usando `switch`](./Ejemplo-02) 115 | 116 | --- 117 | 118 | ## Operador Ternario 119 | 120 | 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. 121 | 122 | ```javascript 123 | condición ? expresión_true : expresión_false 124 | ``` 125 | 126 | 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 `:`. 127 | 128 | ```javascript 129 | var speed = 120; 130 | var message; 131 | 132 | if(speed > 100) { 133 | message = "You're going too fast!"; 134 | } else { 135 | message = "Under the limit"; 136 | } 137 | 138 | console.log(message); // You're going too fast! 139 | ``` 140 | 141 | El código anterior lo podemos simplificar usando el operador ternario. 142 | 143 | ```javascript 144 | var speed = 120; 145 | 146 | var message = speed > 100 ? "You're going too fast!" : "Under the limit"; 147 | 148 | console.log(message); // You're going too fast! 149 | ``` 150 | 151 | --- 152 | 153 | ## Truthy y Falsy 154 | 155 | En JavaScript todas las variables contienen un valor booleano, a esto se le conoce como `truthy` o `falsy`. 156 | 157 | Los siguientes valores siempre son `falsy`: 158 | 159 | - `false` 160 | - `0` 161 | - `''` o `""` - String vacío 162 | - `null` 163 | - `undefined` 164 | - `NaN` 165 | 166 | Todo lo demás es `truthy` incluyendo los siguientes casos: 167 | 168 | - `'0'` - String conteniendo cero 169 | - `'false'` - String con el texto `false` 170 | - `[]` - Arreglo vacío 171 | - `{}` - Objeto vacío 172 | - `function(){}` - Función vacía 173 | 174 | Esto es muy útil a la hora de usar condicionales pues podemos evaluar un sólo valor sin necesidad de operadores lógicos. 175 | 176 | ```javascript 177 | if(value) { 178 | // value es truthy 179 | } else { 180 | // value es falsy 181 | // puede ser false, 0, '', null, undefined o NaN 182 | } 183 | ``` 184 | 185 | Es muy importante tener cuidado cuando se están haciendo comparaciones con `==` en lugar de `===` ya que se pueden obtener resultados inesperados, por ejemplo: 186 | 187 | ```javascript 188 | [1] == '1' // true 189 | ``` 190 | 191 | En esta [tabla](https://dorey.github.io/JavaScript-Equality-Table/) se puede comparar los resultados de usar `==` con distintos valores. 192 | 193 | --- 194 | 195 | ## Bucles 196 | 197 | 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`. 198 | 199 | La sintaxis funciona de esta manera: 200 | 201 | ```javascript 202 | for(var i = 0; i<=50; i++){ 203 | // Código a ejecutar en cada ciclo 204 | } 205 | ``` 206 | 207 | - `for`. La sintaxis para el inicio del ciclo. Posteriormente, abrimos paréntesis y dentro habrán 3 valores. 208 | - `Inicializador`. El primer valor en el cual declaras la variable, incluyendo con cuál número inicia el ciclo. 209 | - `Condición`. El segundo valor es la condición, lo que tiene que pasar para terminar la iteración. 210 | - `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 `++`. 211 | 212 | #### [Ejemplo 3: Ciclo `for`](./Ejemplo-03) 213 | 214 | Otro ciclo es `while`, el cual se repite siempre y cuando la condición especificada sea evaluada como `true`. 215 | 216 | ```javascript 217 | while(condición) { 218 | // Código a ejecutar en cada ciclo 219 | } 220 | ``` 221 | 222 | El ejemplo 2 podría hacerse con `while` de la siguiente manera: 223 | 224 | ```javascript 225 | var i = 0; 226 | 227 | while(i <= 200) { 228 | console.log("Hello World"); 229 | i++; 230 | } 231 | ``` 232 | 233 | > Si olvidas incrementar la variable `i` dentro del `while` el ciclo nunca termina y se agotan los recursos de memoria. 234 | 235 | #### [Reto 2: Números pares](./Reto-02) 236 | 237 | #### [Reto 3: Números primos](./Reto-03) 238 | -------------------------------------------------------------------------------- /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 | - **[Reto final](./Reto-final)** 44 | 45 | - **[Postwork](./Postwork)** 46 | 47 | --- 48 | 49 | ## ¿Por qué Javascript? 50 | 51 | Te damos la gran bienvenida a Javascript. 52 | 53 | Javascript hoy es uno de los lenguajes de programación más usados en el mundo. 54 | 55 | 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. 56 | 57 | **No es el único que seguirá creciendo**, claro está, pero el impacto de este se ha mantenido y progresa anualmente. 58 | 59 | > Te recomendamos leer la investigación completa [sobre el ecosistema tecnológico aquí](https://insights.stackoverflow.com/survey/2019). 60 | 61 | ![Survey 2019](https://i.imgur.com/ZZmILsS.png) 62 | 63 | --- 64 | 65 | Atentos de estas tendencias, muchas empresas confían sus productos digitales a Javascript, parcial o totalmente, en diferentes áreas de desarrollo. 66 | 67 | Notemos que es posible, con Javascript, trabajar aplicaciones móviles y escritorio. 68 | 69 | ![tendencias](https://i.imgur.com/nlzlvO0.png) 70 | 71 | --- 72 | 73 | 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): 74 | 75 | ![](https://i.imgur.com/UgG62hG.png) 76 | 77 | Observa que: 78 | 79 | - 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. 80 | 81 | > 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. 82 | 83 | - 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. 84 | 85 | - 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. 86 | 87 | ## ¿Cómo comenzar y qué hacer? 88 | 89 | Para poder utilizar todas las tecnologías mencionadas y crear aplicaciones robustas, deberás formar buenas bases en Javascript. 90 | 91 | A pesar de que es un lenguaje el cual podrás aplicar en poco tiempo, practicar es la clave. 92 | 93 | Te compartimos consejos para mantenerte enfocado y persistente: 94 | 95 | - 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. 96 | 97 | - 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.** 98 | 99 | - 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. 100 | 101 | - 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.** 102 | 103 | > 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. 104 | 105 | Ahora si, comencemos. 106 | 107 | --- 108 | 109 | ## ¿Qué es Javascript? 110 | 111 | Javascript (JS) es: 112 | 113 | 1. Un lenguaje de programación que permite ejecutarse principalmente en cada navegador (Google Chrome, Safari, Firefox, Opera, etc.). 114 | 115 | 2. Multiplataforma. Puede ser utilizado en muchas plataformas y sistemas. Podemos usarlo fuera del navegador a través de ciertos programas adicionales. 116 | 117 | 3. Multiparadigma. Se puede manejar orientación a objetos, funcional, reactivo. Más adelante explicaremos como se utilizan y para qué nos sirven. 118 | 119 | 4. **Diferente a JAVA. Son diferentes lenguajes. Javascript no es JAVA** 120 | 121 | 5. Un jugador que hace equipo, en el navegador, a lado de HTML y CSS, para que el usuario pueda usar la aplicación. 122 | 123 | 1. HTML maneja el contenido, la estructura, el esqueleto, el "markup". 124 | 2. CSS maneja la presentación, el diseño, la visualización de la aplicación. 125 | 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. 126 | 127 | ![Variables](https://i.imgur.com/yNwZN3I.png) 128 | 129 | --- 130 | 131 | ## Tu primer archivo Javascript 132 | 133 | - En tu computadora, crearás una carpeta llamada `bedu-sesion-1`. Aquí colocaremos todos nuestros ejercicios siguientes. 134 | 135 | - 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. 136 | 137 | ## ¿Qué son las variables? 138 | 139 | Las variables se utilizan para almacenar información dentro de tu programa para ser manipulados. 140 | 141 | En el modo más general, te ayudan a **etiquetar datos**. Los llamaremos en el momento que los necesitemos a lo largo del programa. 142 | 143 | ![Variables](https://i.imgur.com/toMeYM2.png) 144 | 145 | Las variables se dividen en 4 partes: 146 | 147 | ```javascript 148 | var deporte = "Atletismo"; 149 | ``` 150 | 151 | - **Declaración (`var`)**. Cuando comienzas una variable, debes de utilizar la palabra `var` 152 | - **Nombre (etiqueta)**. Irá del lado izquierdo. Será cómo llamarás la variable más adelante. 153 | - **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). 154 | - **Valor (Tipo de dato)**. Puede ser un texto, un número, un conjunto de datos (objetos, arreglos). 155 | 156 | --- 157 | 158 | Ahora bien, nombrar tus variables implica que deberán ser lo más descriptivas posibles. 159 | 160 | 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) 161 | 162 | **`Fig. 1.1`** 163 | 164 | ```javascript 165 | var saludo = "Hola Mundo"; 166 | var perro = "Firulais"; 167 | var pais = "México"; 168 | var edad = 35; 169 | ``` 170 | 171 | Si tú lees el nombre de las variables anteriores, rápidamente comprendes de qué tratan. 172 | 173 | Si generas una variable que implica dos palabras, te recomendamos usar una técnica llamada **"Camel Case"**. (Fig 1.2) 174 | 175 | Observemos un ejemplo: 176 | 177 | **`Fig. 1.2`** 178 | 179 | ```javascript 180 | var paisLatinoamericano = "México"; 181 | var animalVerde = "Rana"; 182 | var impuestosAnuales = 250000; 183 | ``` 184 | 185 | **"Camel Case"** implica: 186 | 187 | - Conectar ambas palabras sin espacio, volviéndola una. 188 | - La palabra comenzará con minúscula. 189 | - La segunda palabra empezará con mayúscula. 190 | 191 | Con esto claro, hablemos de los **tipos de datos**. 192 | 193 | --- 194 | 195 | ## Tipos de Datos 196 | 197 | Todos los lenguajes de programación cuentan con estructuras de datos las cuales varían de un lenguaje a otro. 198 | JavaScript es un lenguaje de tipado débil, significa que no es necesario declarar el tipo de variable antes de 199 | usarla. El tipo de dato es determinado automáticamente cuando el programa esté siendo procesado. 200 | 201 | JavaScript cuenta con seis tipos de datos que pueden ser divididos en tres categorías: 202 | 203 | #### Primitivos 204 | 205 | - String 206 | - Number 207 | - Boolean 208 | 209 | #### Compuestos (Referencia) 210 | 211 | - Object 212 | - Array 213 | - Function 214 | 215 | #### Especiales 216 | 217 | - Undefined 218 | - Null 219 | 220 | ### String 221 | 222 | 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. 223 | 224 | ```javascript 225 | var a = 'Hello World!'; // Comillas sencillas 226 | var b = "Hello World!"; // Comillas dobles 227 | ``` 228 | 229 | 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. 230 | 231 | ```javascript 232 | var a = "Let's learn JavaScript."; // Comilla sencilla dentro de comillas dobles 233 | var b = 'He said "Hello" and left.'; // Comillas dobles dentro de comillas sencillas 234 | var c = 'We\'ll never stop learning.'; // Escapando comilla sencilla con backslash 235 | ``` 236 | 237 | ### Number 238 | 239 | 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. 240 | 241 | ```javascript 242 | var a = 12; // Entero 243 | var b = 32.43; // Decimal 244 | var c = 2.25e+6; // Equivalente a 2.25x10^6 o 2250000 245 | var d = 2.25e-6; // Equivalente a 2.25x10-6 o 0.00000225 246 | ``` 247 | 248 | Este tipo de dato incluye algunos valores especiales: `Infinity`, `-Infinity` y `NaN`. 249 | 250 | `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. 251 | 252 | ```javascript 253 | console.log(7 / 0); // Infinity 254 | console.log(-7 / 0); // -Infinity 255 | ``` 256 | 257 | Por otro lado, `NaN` representa un valor no numérico. Es el resultado de una operación matemática inválida. 258 | 259 | ```javascript 260 | console.log("Hello World" / 2); // NaN 261 | console.log("Hello World" * 2); // NaN 262 | console.log(Math.sqrt(-1)); // NaN 263 | ``` 264 | 265 | ### Boolean 266 | 267 | 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. 268 | 269 | ```javascript 270 | var isUserActive = true; // Sí, el usuario se encuentra activo 271 | var isUserAdmin = false; // No, el usuario no es admin 272 | ``` 273 | 274 | ### Undefined 275 | 276 | Cuando una variable es declarada pero no se le ha asignado un valor, por default su valor es `undefined`. 277 | 278 | ```javascript 279 | var a; 280 | var b = 'Hello World'; 281 | 282 | console.log(a); // undefined 283 | console.log(b); // Hello World 284 | ``` 285 | 286 | ### Null 287 | 288 | 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. 289 | 290 | Se puede vaciar una variable de manera explícita asignando el valor `null`. 291 | 292 | ```javascript 293 | var a = 'Hello World'; 294 | console.log(a); // Hello World 295 | 296 | a = null 297 | console.log(a); // null 298 | ``` 299 | 300 | --- 301 | 302 | ## Operador `typeof` 303 | 304 | 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`). 305 | 306 | #### [Ejemplo 1: Tipos de datos y operador `typeof`](./Ejemplo-01) 307 | 308 | --- 309 | 310 | ## Type coercion 311 | 312 | 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. 313 | 314 | 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. 315 | 316 | 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. 317 | 318 | En JavaScript sólo existen tres tipos de conversiones posibles: 319 | 320 | - String 321 | - Number 322 | - Boolean 323 | 324 | ### String conversion 325 | 326 | 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. 327 | 328 | ```javascript 329 | String(123); // Explícito 330 | 123 + ''; // Implícito 331 | ``` 332 | 333 | Todos los valores primitivos se pueden convertir en strings. 334 | 335 | ```javascript 336 | String(123); // '123' 337 | String(3.14); // '3.14' 338 | String(true); // 'true' 339 | String(false); // 'false' 340 | String(undefined); // 'undefined' 341 | String(null); // 'null' 342 | ``` 343 | 344 | ### Numeric conversion 345 | 346 | 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. 347 | 348 | ```javascript 349 | Number('123'); // Explícito 350 | + '123'; // Implícito 351 | 1 - '1'; // Implícito 352 | 2 * '2'; // Implícito 353 | ``` 354 | 355 | Los valores primitivos también pueden ser convertidos a tipos numéricos con distintos resultados. 356 | 357 | ```javascript 358 | Number(' 10 '); // 10 359 | Number('-10'); // 10 360 | Number('123abc'); // NaN 361 | Number(true); // 1 362 | Number(false); // 0 363 | Number(null); // 0 364 | Number(undefined); // NaN 365 | ``` 366 | 367 | ### Boolean conversion 368 | 369 | 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. 370 | 371 | ```javascript 372 | Boolean(1); // Explícito 373 | if(1) { ... } // Implícito - Contexto lógico 374 | !!2; // Implícito - Operador lógico 375 | 2 || 'Hello World'; // Implícito - Operador lógico 376 | ``` 377 | 378 | > En la siguiente sesión se vará más a detalle los operadores lógicos y booleanos 379 | 380 | --- 381 | 382 | ## Operadores Básicos 383 | 384 | Con respecto al tipo de datos `Number` puedes ejecutar operaciones para cambiar su valor. 385 | 386 | | Operador | Descripción | Ejemplo Javascript | Observaciones | 387 | |----------|-----------------------------------|-----------------------|---------------------------------------------------| 388 | | + | Adición | var resultado = 4 + 3 | | 389 | | - | Substracción | var resultado = 4 - 3 | | 390 | | * | Multiplicación | var resultado = 4 * 3 | | 391 | | / | División | var resultado = 4 / 2 | "resultado" devolvería 2 | 392 | | % | "Modulus"
Residuo de la división | var resultado = 4 % 2 | "resultado" devolvería 0 | 393 | | ++ | Incremento | var resultado = 4++ | "resultado" devolvería 5,
después de su ejecución | 394 | | -- | Decremento | var resultado = 4-- | "resultado" devolvería 3,
después de su ejecución | 395 | 396 | #### [Ejemplo 2: Operadores](./Ejemplo-02) 397 | 398 | --- 399 | 400 | ## Precedencia de Operadores 401 | 402 | La precedencia es el orden en el cual los operadores se evaluan al momento de ejecutar la operación. 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 | 459 | 460 | 461 | 462 |
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
463 | 464 | #### [Ejemplo 3: Precedencia de operadores](./Ejemplo-03) 465 | 466 | #### [Reto 1: Precedencia de operadores](./Reto-01) 467 | --------------------------------------------------------------------------------