├── .gitignore ├── .vscode └── launch.json ├── Basic ├── 00-helloworld.js ├── 01-variables.js ├── 02-datatypes.js ├── 03-beginner-exercises.js ├── 04-operators.js ├── 05-operators-exercises.js ├── 06-strings.js ├── 07-strings-exercises.js ├── 08-conditionals.js ├── 09-conditionals-exercises.js ├── 10-array.js ├── 11-set.js ├── 12-map.js ├── 13-structures-exercises.js ├── 14-loops.js ├── 15-loops-exercises.js ├── 16-functions.js ├── 17-functions-exercises.js ├── 18-objects.js ├── 19-objects-exercises.js ├── 20-destructuring-spreading.js ├── 21-destructuring-spreading-exercises.js ├── 22-classes.js ├── 23-classes-exercises.js ├── 24-error-handling.js ├── 25-error-handling-exercises.js ├── 26-console-methods.js ├── 27-console-methods-exercises.js ├── 28-export-modules.js ├── 29-import-modules.js ├── 30-import-external-modules.cjs ├── 31-modules-exercises.js └── package.json ├── Images ├── header.jpg ├── intermediate.jpg └── pro.jpg ├── Intermediate ├── 00-advanced-functions.js ├── 01-advanced-functions-exercises.js ├── 02-advanced-structures.js ├── 03-advanced-structures-exercises.js ├── 04-advanced-objects.js ├── 05-advanced-classes.js ├── 06-advanced-objects-classes-exercises.js ├── 07-async.js ├── 08-async-exercises.js ├── 09-apis.js ├── 10-apis-exercises.js ├── 11-dom.js ├── 12-dom-example.html ├── 13-dom-example.js ├── 14-tasklist.html ├── 15-tasklist.js ├── 16-dom-exercises.js ├── 17-debugging.js ├── 18-debugging-exercises.js ├── 19-regex.js ├── 20-regex-exercises.js ├── 21-testing.js ├── 22-testing.test.js └── 23-testing-exercises.js ├── LICENSE ├── README.md ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "launch", 10 | "name": "Launch Program", 11 | "skipFiles": [ 12 | "/**" 13 | ], 14 | "program": "${workspaceFolder}/Intermediate/17-debugging.js" 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /Basic/00-helloworld.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 1 a 14 (sin código) 3 | Vídeo: https://youtu.be/1glVfFxj8a4 4 | 5 | Clase 15 - Hola mundo 6 | Vídeo: https://youtu.be/1glVfFxj8a4?t=2390 7 | */ 8 | 9 | // Esto es un comentario simple 10 | 11 | /* 12 | Esto es 13 | un comentario 14 | en varias líneas 15 | */ 16 | 17 | console.log("¡Hola, JavaScript!") 18 | console.log('¡Hola, JavaScript!') 19 | console.log(`¡Hola, JavaScript!`) 20 | 21 | // console.log("¡Hola, JavaScript!") 22 | 23 | /* 24 | console.log("¡Hola, JavaScript!") 25 | console.log('¡Hola, JavaScript!') 26 | console.log(`¡Hola, JavaScript!`) 27 | */ 28 | 29 | console.log("5") 30 | console.log(5) 31 | console.log(5 + 2) 32 | console.log(5 - 2) 33 | console.log(5 * 2) 34 | console.log(5 / 2) 35 | console.log(5 % 2) 36 | console.log(5 ** 2) -------------------------------------------------------------------------------- /Basic/01-variables.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 16 - Variables 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=3049 4 | */ 5 | 6 | // var 7 | 8 | var helloWorld = "¡Hola, JavaScript!" 9 | console.log(helloWorld) 10 | 11 | helloWorld = "¡Hola de nuevo, JavaScript!" 12 | console.log(helloWorld) 13 | 14 | // let 15 | 16 | let helloWorld2 = "¡Hola, JavaScript 2!" 17 | console.log(helloWorld2) 18 | 19 | helloWorld2 = "¡Hola de nuevo, JavaScript 2!" 20 | console.log(helloWorld2) 21 | 22 | // const 23 | 24 | const helloWorld3 = "¡Hola, JavaScript 3!" 25 | console.log(helloWorld3) 26 | 27 | // Error 28 | // helloWorld3 = "¡Hola de nuevo, JavaScript 2!" 29 | // console.log(helloWorld3) -------------------------------------------------------------------------------- /Basic/02-datatypes.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 17 - Tipos de datos 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=3599 4 | */ 5 | 6 | // Tipos de datos primitivos 7 | 8 | // Cadenas de texto (string) 9 | let myName = "Brais Moure" 10 | let alias = 'MoureDev' 11 | let email = `braismoure@mouredev.com` 12 | 13 | // Números (number) 14 | let age = 37 // Entero 15 | let height = 1.77 // Decimal 16 | 17 | // Booleanos (boolean) 18 | let isTeacher = true 19 | let isStudent = false 20 | 21 | // Undefined 22 | let undefinedValue 23 | console.log(undefinedValue) 24 | 25 | // Null 26 | let nullValue = null 27 | 28 | // Symbol 29 | 30 | let mySymbol = Symbol("mysymbol") 31 | 32 | // BigInt 33 | 34 | let myBigInt = BigInt(817239871289371986589716389471628379612983761289376129) 35 | let myBigInt2 = 817239871289371986589716389471628379612983761289376129n 36 | 37 | // Mostramos los tipos de datos 38 | console.log(typeof myName) 39 | console.log(typeof alias) 40 | console.log(typeof email) 41 | 42 | console.log(typeof age) 43 | console.log(typeof height) 44 | 45 | console.log(typeof isTeacher) 46 | console.log(typeof isStudent) 47 | 48 | console.log(typeof undefinedValue) 49 | 50 | console.log(typeof nullValue) 51 | 52 | console.log(typeof mySymbol) 53 | 54 | console.log(typeof myBigInt) 55 | console.log(typeof myBigInt2) -------------------------------------------------------------------------------- /Basic/03-beginner-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 18 - Ejercicios: primeros pasos 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=4733 4 | */ 5 | 6 | // 1. Escribe un comentario en una línea 7 | 8 | // 2. Escribe un comentario en varias líneas 9 | 10 | // 3. Declara variables con valores asociados a todos los datos de tipo primitivos 11 | 12 | // 4. Imprime por consola el valor de todas las variables 13 | 14 | // 5. Imprime por consola el tipo de todas las variables 15 | 16 | // 6. A continuación, modifica los valores de las variables por otros del mismo tipo 17 | 18 | // 7. A continuación, modifica los valores de las variables por otros de distinto tipo 19 | 20 | // 8. Declara constantes con valores asociados a todos los tipos de datos primitivos 21 | 22 | // 9. A continuación, modifica los valores de las constantes 23 | 24 | // 10. Comenta las líneas que produzcan algún tipo de error al ejecutarse -------------------------------------------------------------------------------- /Basic/04-operators.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 19 - Operadores 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=4937 4 | */ 5 | 6 | // Operadores Aritméticos 7 | 8 | let a = 5 9 | let b = 10 10 | 11 | console.log(a + b) // Suma 12 | console.log(a - b) // Resta 13 | console.log(a * b) // Multiplicación 14 | console.log(a / b) // División 15 | 16 | console.log(a % b) // Módulo 17 | console.log(a ** b) // Exponente 18 | 19 | a++ // Incremento 20 | console.log(a) 21 | 22 | b-- // Decremento 23 | console.log(b) 24 | 25 | // Operadores de asignacion 26 | 27 | let myVariable = 2 28 | console.log(myVariable) 29 | myVariable += 2 // Suma con asignación 30 | console.log(myVariable) 31 | 32 | myVariable -= 2 // Resta con asignación 33 | myVariable *= 2 // Multiplicación con asignación 34 | myVariable /= 2 // División con asignación 35 | myVariable %= 2 // Módulo con asignación 36 | myVariable **= 2 // Exponente con asignación 37 | 38 | // Operadores de comparación 39 | 40 | console.log(a > b) // Mayor que 41 | console.log(a < b) // Menor que 42 | console.log(a >= b) // Mayor o igual que 43 | console.log(a <= b) // Menor o igual que 44 | console.log(a == b) // Igualdad por valor 45 | console.log(a == 6) 46 | console.log(a == "6") 47 | console.log(a == a) 48 | console.log(a === a) // Igualdad por identidad (por tipo y valor) o igualdad estricta 49 | console.log(a === 6) 50 | console.log(a === "6") 51 | console.log(a != 6) // Desigualdad por valor 52 | console.log(a !== "6") // Desigualdad por identidad (por tipo y valor) o desigualdad estricta 53 | console.log(0 == false) 54 | console.log(1 == false) 55 | console.log(2 == false) 56 | console.log(0 == "") 57 | console.log(0 == " ") 58 | console.log(0 == '') 59 | console.log(0 == "Hola") 60 | console.log(0 === "") 61 | console.log(undefined == null) 62 | console.log(undefined === null) 63 | 64 | /* 65 | Truthy values (valores verdaderos) 66 | 67 | - Todos los numeros positivos y negativos menos el cero 68 | - Todas las cadenas de texto menos las vacías 69 | - El boolean true 70 | */ 71 | 72 | /* 73 | Falsy values (valores falsos) 74 | 75 | - 0 76 | - 0n 77 | - null 78 | - undefined 79 | - NaN (Not a Number) 80 | - El boolean false 81 | - Cadenas de texto vacías 82 | */ 83 | 84 | // Operadores lógicos 85 | 86 | // and (&&) 87 | console.log(5 > 10 && 15 > 20) 88 | console.log(5 < 10 && 15 < 20) 89 | console.log(5 < 10 && 15 > 20) 90 | console.log(5 > 10 && 15 > 20 && 30 > 40) 91 | 92 | // or (||) 93 | console.log(5 > 10 || 15 > 20) 94 | console.log(5 < 10 || 15 < 20) 95 | console.log(5 < 10 || 15 > 20) 96 | console.log(5 > 10 || 15 > 20 || 30 > 40) 97 | 98 | console.log(5 > 10 && 15 > 20 || 30 < 40) 99 | 100 | // not (!) 101 | console.log(!true) 102 | console.log(!false) 103 | console.log(!(5 > 10 && 15 > 20)) 104 | console.log(!(5 > 10 || 15 > 20)) 105 | 106 | // Operadores ternarios 107 | 108 | const isRaining = false 109 | isRaining ? console.log("Está lloviendo") : console.log("No está lloviendo") -------------------------------------------------------------------------------- /Basic/05-operators-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 20 - Ejercicios: Operadores 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=6458 4 | */ 5 | 6 | // 1. Crea una variable para cada operación aritmética 7 | 8 | // 2. Crea una variable para cada tipo de operación de asignación, 9 | // que haga uso de las variables utilizadas para las operaciones aritméticas 10 | 11 | // 3. Imprime 5 comparaciones verdaderas con diferentes operadores de comparación 12 | 13 | // 4. Imprime 5 comparaciones falsas con diferentes operadores de comparación 14 | 15 | // 5. Utiliza el operador lógico and 16 | 17 | // 6. Utiliza el operador lógico or 18 | 19 | // 7. Combina ambos operadores lógicos 20 | 21 | // 8. Añade alguna negación 22 | 23 | // 9. Utiliza el operador ternario 24 | 25 | // 10. Combina operadores aritméticos, de comparáción y lógicas -------------------------------------------------------------------------------- /Basic/06-strings.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 21 - Strings 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=6565 4 | */ 5 | 6 | // Strings (cadenas de texto) 7 | 8 | // Concatenación 9 | 10 | let myName = "Brais" 11 | let greeting = "Hola, " + myName + "!" 12 | console.log(greeting) 13 | console.log(typeof greeting) 14 | 15 | // Longitud 16 | 17 | console.log(greeting.length) 18 | 19 | // Acceso a caracteres 20 | 21 | console.log(greeting[0]) 22 | console.log(greeting[11]) 23 | 24 | // Métodos comunes 25 | 26 | console.log(greeting.toUpperCase()) // Mayúsculas 27 | console.log(greeting.toLowerCase()) // Minúsculas 28 | console.log(greeting.indexOf("Hola")) // Índice 29 | console.log(greeting.indexOf("Brais")) 30 | console.log(greeting.indexOf("MoureDev")) 31 | console.log(greeting.includes("Hola")) // Incluye 32 | console.log(greeting.includes("Brais")) 33 | console.log(greeting.includes("MoureDev")) 34 | console.log(greeting.slice(0, 10)) // Sección 35 | console.log(greeting.replace("Brais", "MoureDev")) // Reemplazo 36 | 37 | // Template literals (plantillas literales) 38 | 39 | // Strings en varias líneas 40 | let message = `Hola, este 41 | es mi 42 | curso de 43 | JavaScript` 44 | console.log(message) 45 | 46 | // Interpolación de valores 47 | let email = "braismoure@mouredev.com" 48 | console.log(`Hola, ${myName}! Tu email es ${email}.`) -------------------------------------------------------------------------------- /Basic/07-strings-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 22 - Ejercicios: Strings 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=7226 4 | */ 5 | 6 | // 1. Concatena dos cadenas de texto 7 | 8 | // 2. Muestra la longitud de una cadena de texto 9 | 10 | // 3. Muestra el primer y último carácter de un string 11 | 12 | // 4. Convierte a mayúsculas y minúsculas un string 13 | 14 | // 5. Crea una cadena de texto en varias líneas 15 | 16 | // 6. Interpola el valor de una variable en un string 17 | 18 | // 7. Reemplaza todos los espacios en blanco de un string por guiones 19 | 20 | // 8. Comprueba si una cadena de texto contiene una palabra concreta 21 | 22 | // 9. Comprueba si dos strings son iguales 23 | 24 | // 10. Comprueba si dos strings tienen la misma longitud -------------------------------------------------------------------------------- /Basic/08-conditionals.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 23 - Condicionales 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=7277 4 | */ 5 | 6 | // if, else if, else 7 | 8 | // if (si) 9 | 10 | let age = 37 11 | 12 | if (age == 37) { 13 | console.log("La edad es 37") 14 | } 15 | 16 | // else (si no) 17 | 18 | if (age == 37) { 19 | console.log("La edad es 37") 20 | } else { 21 | console.log("La edad no es 37") 22 | } 23 | 24 | // else if (si no, si) 25 | 26 | if (age == 37) { 27 | console.log("La edad es 37") 28 | } else if (age < 18) { 29 | console.log("Es menor de edad") 30 | } else { 31 | console.log("La edad no es 37 ni es menor de edad") 32 | } 33 | 34 | // Operador ternario 35 | 36 | const message = age == 37 ? "La edad es 37" : "La edad no es 37" 37 | console.log(message) 38 | 39 | // switch 40 | 41 | let day = 3 42 | let dayName 43 | 44 | switch (day) { 45 | case 0: 46 | dayName = "Lunes" 47 | break 48 | case 1: 49 | dayName = "Martes" 50 | break 51 | case 2: 52 | dayName = "Miércoles" 53 | break 54 | case 3: 55 | dayName = "Jueves" 56 | break 57 | case 4: 58 | dayName = "Viernes" 59 | break 60 | case 5: 61 | dayName = "Sábado" 62 | break 63 | case 6: 64 | dayName = "Domingo" 65 | break 66 | default: 67 | dayName = "Número de día incorrecto" 68 | } 69 | 70 | console.log(dayName) -------------------------------------------------------------------------------- /Basic/09-conditionals-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 24 - Ejercicios: Condicionales 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=8652 4 | */ 5 | 6 | // if/else/else if/ternaria 7 | 8 | // 1. Imprime por consola tu nombre si una variable toma su valor 9 | 10 | // 2. Imprime por consola un mensaje si el usuario y contraseña concide con unos establecidos 11 | 12 | // 3. Verifica si un número es positivo, negativo o cero e imprime un mensaje 13 | 14 | // 4. Verifica si una persona puede votar o no (mayor o igual a 18) e indica cuántos años le faltan 15 | 16 | // 5. Usa el operador ternario para asignar el valor "adulto" o "menor" a una variable 17 | // dependiendo de la edad 18 | 19 | // 6. Muestra en que estación del año nos encontramos dependiendo del valor de una variable "mes" 20 | 21 | // 7. Muestra el número de días que tiene un mes dependiendo de la variable del ejercicio anterior 22 | 23 | // switch 24 | 25 | // 8. Usa un switch para imprimir un mensaje de saludo diferente dependiendo del idioma 26 | 27 | // 9. Usa un switch para hacer de nuevo el ejercicio 6 28 | 29 | // 10. Usa un switch para hacer de nuevo el ejercicio 7 -------------------------------------------------------------------------------- /Basic/10-array.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 25 - Arrays 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=8741 4 | */ 5 | 6 | // Array 7 | 8 | // Declaración 9 | 10 | let myArray = [] 11 | let myArray2 = new Array() 12 | 13 | console.log(myArray) 14 | console.log(myArray2) 15 | 16 | // Inicialización 17 | 18 | myArray = [3] 19 | myArray2 = new Array(3) 20 | 21 | console.log(myArray) 22 | console.log(myArray2) 23 | 24 | myArray = [1, 2, 3, 4] 25 | myArray2 = new Array(1, 2, 3, 4) 26 | 27 | console.log(myArray) 28 | console.log(myArray2) 29 | 30 | myArray = ["Brais", "Moure", "mouredev", 37, true] 31 | myArray2 = new Array("Brais", "Moure", "mouredev", 37, true) 32 | 33 | console.log(myArray) 34 | console.log(myArray2) 35 | 36 | myArray2 = new Array(3) 37 | myArray2[2] = "Brais" 38 | // myArray2[0] = "Moure" 39 | myArray2[1] = "mouredev" 40 | myArray2[4] = "mouredev" 41 | 42 | console.log(myArray2) 43 | 44 | myArray = [] 45 | myArray[2] = "Brais" 46 | // myArray[0] = "Moure" 47 | myArray[1] = "mouredev" 48 | 49 | console.log(myArray) 50 | 51 | // Métodos comunes 52 | 53 | myArray = [] 54 | 55 | // push y pop 56 | 57 | myArray.push("Brais") 58 | myArray.push("Moure") 59 | myArray.push("mouredev") 60 | myArray.push(37) 61 | 62 | console.log(myArray) 63 | 64 | console.log(myArray.pop()) // Elimina el último y lo devuelve 65 | myArray.pop() 66 | 67 | console.log(myArray) 68 | 69 | // shift y unshift 70 | 71 | console.log(myArray.shift()) 72 | console.log(myArray) 73 | 74 | myArray.unshift("Brais", "mouredev") 75 | console.log(myArray) 76 | 77 | // length 78 | 79 | console.log(myArray.length) 80 | 81 | // clear 82 | 83 | myArray = [] 84 | myArray.length = 0 // alternativa 85 | console.log(myArray) 86 | 87 | // slice 88 | 89 | myArray = ["Brais", "Moure", "mouredev", 37, true] 90 | 91 | let myNewArray = myArray.slice(1, 3) 92 | 93 | console.log(myArray) 94 | console.log(myNewArray) 95 | 96 | // splice 97 | 98 | myArray.splice(1, 3) 99 | console.log(myArray) 100 | 101 | myArray = ["Brais", "Moure", "mouredev", 37, true] 102 | 103 | myArray.splice(1, 2, "Nueva entrada") 104 | console.log(myArray) -------------------------------------------------------------------------------- /Basic/11-set.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 26 - Sets 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=9952 4 | */ 5 | 6 | // Set 7 | 8 | // Declaración 9 | 10 | let mySet = new Set() 11 | 12 | console.log(mySet) 13 | 14 | // Inicialización 15 | 16 | mySet = new Set(["Brais", "Moure", "mouredev", 37, true, "braismoure@mouredev.com"]) 17 | 18 | console.log(mySet) 19 | 20 | // Métodos comunes 21 | 22 | // add y delete 23 | 24 | mySet.add("https://moure.dev") 25 | 26 | console.log(mySet) 27 | 28 | mySet.delete("https://moure.dev") 29 | 30 | console.log(mySet) 31 | 32 | console.log(mySet.delete("Brais")) 33 | console.log(mySet.delete(4)) 34 | 35 | console.log(mySet) 36 | 37 | // has 38 | 39 | console.log(mySet.has("Moure")) 40 | console.log(mySet.has("Brais")) 41 | 42 | // size 43 | 44 | console.log(mySet.size) 45 | 46 | // Convertir un set a array 47 | let myArray = Array.from(mySet) 48 | console.log(myArray) 49 | 50 | // Convertir un array a set 51 | 52 | mySet = new Set(myArray) 53 | console.log(mySet) 54 | 55 | // No admite duplicados 56 | 57 | mySet.add("braismoure@mouredev.com") 58 | mySet.add("braismoure@mouredev.com") 59 | mySet.add("braismoure@mouredev.com") 60 | mySet.add("BraisMoure@mouredev.com") 61 | console.log(mySet) -------------------------------------------------------------------------------- /Basic/12-map.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 27 - Maps 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=10755 4 | */ 5 | 6 | // Map 7 | 8 | // Declaración 9 | 10 | let myMap = new Map() 11 | 12 | console.log(myMap) 13 | 14 | // Inicialiación 15 | 16 | myMap = new Map([ 17 | ["name", "Brais"], 18 | ["email", "braismoure@mouredev.com"], 19 | ["age", 37] 20 | ]) 21 | 22 | console.log(myMap) 23 | 24 | // Métodos y propiedades 25 | 26 | // set 27 | 28 | myMap.set("alias", "mouredev") 29 | myMap.set("name", "Brais Moure") 30 | 31 | console.log(myMap) 32 | 33 | // get 34 | 35 | console.log(myMap.get("name")) 36 | console.log(myMap.get("surname")) 37 | 38 | // has 39 | 40 | console.log(myMap.has("surname")) 41 | console.log(myMap.has("age")) 42 | 43 | // delete 44 | 45 | myMap.delete("email") 46 | 47 | console.log(myMap) 48 | 49 | // keys, values y entries 50 | 51 | console.log(myMap.keys()) 52 | console.log(myMap.values()) 53 | console.log(myMap.entries()) 54 | 55 | // size 56 | 57 | console.log(myMap.size) 58 | 59 | // clear 60 | 61 | myMap.clear() 62 | 63 | console.log(myMap) 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Basic/13-structures-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 28 - Ejercicios: Estructuras 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=11451 4 | */ 5 | 6 | // 1. Crea un array que almacene cinco animales 7 | 8 | // 2. Añade dos más. Uno al principio y otro al final 9 | 10 | // 3. Elimina el que se encuentra en tercera posición 11 | 12 | // 4. Crea un set que almacene cinco libros 13 | 14 | // 5. Añade dos más. Uno de ellos repetido 15 | 16 | // 6. Elimina uno concreto a tu elección 17 | 18 | // 7. Crea un mapa que asocie el número del mes a su nombre 19 | 20 | // 8. Comprueba si el mes número 5 existe en el map e imprime su valor 21 | 22 | // 9. Añade al mapa una clave con un array que almacene los meses de verano 23 | 24 | // 10. Crea un Array, transfórmalo a un Set y almacénalo en un Map -------------------------------------------------------------------------------- /Basic/14-loops.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 29 - Bucles 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=11575 4 | */ 5 | 6 | // Loops o bucles 7 | 8 | // for 9 | 10 | for (let i = 0; i < 5; i++) { 11 | console.log(`Hola ${i}`) 12 | } 13 | 14 | const numbers = [1, 2, 3, 4, 5, 6, 7, 8] 15 | 16 | for (let i = 0; i < numbers.length; i++) { 17 | console.log(`Elemento: ${numbers[i]}`) 18 | } 19 | 20 | // while 21 | 22 | let i = 0 23 | while (i < 5) { 24 | console.log(`Hola ${i}`) 25 | i++ 26 | } 27 | 28 | // Bucle infinito 29 | // while(true) { 30 | // } 31 | 32 | // do while 33 | 34 | i = 6 35 | do { 36 | console.log(`Hola ${i}`) 37 | i++ 38 | } while (i < 5) 39 | 40 | // for of 41 | 42 | const myArray = [1, 2, 3, 4] 43 | 44 | const mySet = new Set(["Brais", "Moure", "mouredev", 37, true, "braismoure@mouredev.com"]) 45 | 46 | const myMap = new Map([ 47 | ["name", "Brais"], 48 | ["email", "braismoure@mouredev.com"], 49 | ["age", 37] 50 | ]) 51 | 52 | const myString = "¡Hola, JavaScript!" 53 | 54 | for (let value of myArray) { 55 | console.log(value) 56 | } 57 | 58 | for (let value of mySet) { 59 | console.log(value) 60 | } 61 | 62 | for (let value of myMap) { 63 | console.log(value) 64 | } 65 | 66 | for (let value of myString) { 67 | console.log(value) 68 | } 69 | 70 | // break y continue 71 | 72 | for (let i = 0; i < 10; i++) { 73 | if (i == 5) { 74 | continue 75 | } else if (i == 7) { 76 | break 77 | } 78 | console.log(`Hola ${i}`) 79 | } -------------------------------------------------------------------------------- /Basic/15-loops-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 30 - Ejercicios: Bucles 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=12732 4 | */ 5 | 6 | // NOTA: Explora diferentes sintaxis de bucles para resolver los ejercicios 7 | 8 | // 1. Crea un bucle que imprima los números del 1 al 20 9 | 10 | // 2. Crea un bucle que sume todos los números del 1 al 100 y muestre el resultado 11 | 12 | // 3. Crea un bucle que imprima todos los números pares entre 1 y 50 13 | 14 | // 4. Dado un array de nombres, usa un bucle para imprimir cada nombre en la consola 15 | 16 | // 5. Escribe un bucle que cuente el número de vocales en una cadena de texto 17 | 18 | // 6. Dado un array de números, usa un bucle para multiplicar todos los números y mostrar el producto 19 | 20 | // 7. Escribe un bucle que imprima la tabla de multiplicar del 5 21 | 22 | // 8. Usa un bucle para invertir una cadena de texto 23 | 24 | // 9. Usa un bucle para generar los primeros 10 números de la secuencia de Fibonacci 25 | 26 | // 10. Dado un array de números, usa un bucle para crear un nuevo array que contenga solo los números mayores a 10 -------------------------------------------------------------------------------- /Basic/16-functions.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 31 - Funciones 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=12829 4 | */ 5 | 6 | // Funciones 7 | 8 | // Simple 9 | 10 | function myFunc() { 11 | console.log("¡Hola, función!") 12 | } 13 | 14 | for (let i = 0; i < 5; i++) { 15 | myFunc() 16 | } 17 | 18 | // Con parámetros 19 | 20 | function myFuncWithParams(name) { 21 | console.log(`¡Hola, ${name}!`) 22 | } 23 | 24 | myFuncWithParams("Brais") 25 | myFuncWithParams("MoureDev") 26 | 27 | // Funciones anónimas 28 | 29 | const myFunc2 = function (name) { 30 | console.log(`¡Hola, ${name}!`) 31 | } 32 | 33 | myFunc2("Brais Moure") 34 | 35 | // Arrow functions 36 | 37 | const myFunc3 = (name) => { 38 | console.log(`¡Hola, ${name}!`) 39 | } 40 | 41 | const myFunc4 = (name) => console.log(`¡Hola, ${name}!`) 42 | 43 | myFunc3("Brais Moure") 44 | myFunc4("Brais Moure") 45 | 46 | // Parámetros 47 | 48 | function sum(a, b) { 49 | console.log(a + b) 50 | } 51 | 52 | sum(5, 10) 53 | sum(5) 54 | sum() 55 | 56 | function defaultSum(a = 0, b = 0) { 57 | console.log(a + b) 58 | } 59 | 60 | // Por defecto 61 | 62 | defaultSum() 63 | defaultSum(5) 64 | defaultSum(5, 10) 65 | defaultSum(b = 5) 66 | 67 | // Retorno de valores 68 | 69 | function mult(a, b) { 70 | return a * b 71 | } 72 | 73 | let result = mult(5, 10) 74 | console.log(result) 75 | 76 | // Funciones anidadas 77 | 78 | function extern() { 79 | console.log("Función externa") 80 | function intern() { 81 | console.log("Función interna") 82 | } 83 | intern() 84 | } 85 | 86 | extern() 87 | // intern() Error: fuera del scope 88 | 89 | // Funciones de orden superior 90 | 91 | function applyFunc(func, param) { 92 | func(param) 93 | } 94 | 95 | applyFunc(myFunc4, "función de orden superior") 96 | 97 | // forEach 98 | 99 | myArray = [1, 2, 3, 4] 100 | 101 | mySet = new Set(["Brais", "Moure", "mouredev", 37, true, "braismoure@mouredev.com"]) 102 | 103 | myMap = new Map([ 104 | ["name", "Brais"], 105 | ["email", "braismoure@mouredev.com"], 106 | ["age", 37] 107 | ]) 108 | 109 | myArray.forEach(function (value) { 110 | console.log(value) 111 | }) 112 | 113 | myArray.forEach((value) => console.log(value)) 114 | 115 | mySet.forEach((value) => console.log(value)) 116 | 117 | myMap.forEach((value) => console.log(value)) -------------------------------------------------------------------------------- /Basic/17-functions-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 32 - Ejercicios: Funciones 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=14146 4 | */ 5 | 6 | // NOTA: Explora diferentes sintaxis de funciones para resolver los ejercicios 7 | 8 | // 1. Crea una función que reciba dos números y devuelva su suma 9 | 10 | // 2. Crea una función que reciba un array de números y devuelva el mayor de ellos 11 | 12 | // 3. Crea una función que reciba un string y devuelva el número de vocales que contiene 13 | 14 | // 4. Crea una función que reciba un array de strings y devuelva un nuevo array con las strings en mayúsculas 15 | 16 | // 5. Crea una función que reciba un número y devuelva true si es primo, y false en caso contrario 17 | 18 | // 6. Crea una función que reciba dos arrays y devuelva un nuevo array que contenga los elementos comunes entre ambos 19 | 20 | // 7. Crea una función que reciba un array de números y devuelva la suma de todos los números pares 21 | 22 | // 8. Crea una función que reciba un array de números y devuelva un nuevo array con cada número elevado al cuadrado 23 | 24 | // 9. Crea una función que reciba una cadena de texto y devuelva la misma cadena con las palabras en orden inverso 25 | 26 | // 10. Crea una función que calcule el factorial de un número dado -------------------------------------------------------------------------------- /Basic/18-objects.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 33 - Objetos 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=14229 4 | */ 5 | 6 | // Objetos 7 | 8 | // Sintaxis 9 | 10 | let person = { 11 | name: "Brais", 12 | age: 37, 13 | alias: "MoureDev" 14 | } 15 | 16 | // Acceso a propiedades 17 | 18 | // Notación punto 19 | console.log(person.name) 20 | 21 | // Notación de corchetes 22 | console.log(person["name"]) 23 | 24 | // Modificación de propiedades 25 | 26 | person.name = "Brais Moure" 27 | console.log(person.name) 28 | 29 | console.log(typeof person.age) 30 | person.age = "37" 31 | console.log(person.age) 32 | console.log(typeof person.age) 33 | 34 | // Eliminación de propiedades 35 | 36 | delete person.age 37 | 38 | console.log(person) 39 | 40 | // Nueva propiedad 41 | 42 | person.email = "braismoure@mouredev.com" 43 | person["age"] = 37 44 | 45 | console.log(person) 46 | 47 | // Métodos (funciones) 48 | 49 | let person2 = { 50 | name: "Brais", 51 | age: 37, 52 | alias: "MoureDev", 53 | walk: function () { 54 | console.log("La persona camina.") 55 | } 56 | } 57 | person2.walk() 58 | 59 | // Anidación de objetos 60 | 61 | let person3 = { 62 | name: "Brais", 63 | age: 37, 64 | alias: "MoureDev", 65 | walk: function () { 66 | console.log("La persona camina.") 67 | }, 68 | job: { 69 | name: "Programador", 70 | exp: 15, 71 | work: function () { 72 | console.log(`La persona de ${this.age} años de experiencia trabaja.`) 73 | } 74 | } 75 | } 76 | 77 | console.log(person3) 78 | 79 | console.log(person3.name) 80 | console.log(person3.job) 81 | console.log(person3.job.name) 82 | person3.job.work() 83 | 84 | // Igualdad de objetos 85 | 86 | let person4 = { 87 | name: "Brais Moure", 88 | alias: "MoureDev", 89 | email: "braismoure@mouredev.com", 90 | age: 37 91 | } 92 | 93 | console.log(person) 94 | console.log(person4) 95 | 96 | console.log(person == person4) 97 | console.log(person === person4) 98 | 99 | console.log(person.name == person4.name) 100 | 101 | // Iteración 102 | 103 | for (let key in person4) { 104 | console.log(key + ": " + person4[key]) 105 | } 106 | 107 | // Funciones como objetos 108 | 109 | function Person(name, age) { // Debería ser una clase 110 | this.name = name 111 | this.age = age 112 | } 113 | 114 | let person5 = new Person("Brais", 37) 115 | console.log(person5) 116 | console.log(person5.name) 117 | 118 | console.log(typeof person5) 119 | console.log(typeof person4) -------------------------------------------------------------------------------- /Basic/19-objects-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 34 - Ejercicios: Objetos 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=15675 4 | */ 5 | 6 | // 1. Crea un objeto con 3 propiedades 7 | 8 | // 2. Accede y muestra su valor 9 | 10 | // 3. Agrega una nueva propiedad 11 | 12 | // 4. Elimina una de las 3 primeras propiedades 13 | 14 | // 5. Agrega una función e invócala 15 | 16 | // 6. Itera las propiedades del objeto 17 | 18 | // 7. Crea un objeto anidado 19 | 20 | // 8. Accede y muestra el valor de las propiedades anidadas 21 | 22 | // 9. Comprueba si los dos objetos creados son iguales 23 | 24 | // 10. Comprueba si dos propiedades diferentes son iguales -------------------------------------------------------------------------------- /Basic/20-destructuring-spreading.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 35 - Desestructuración y propagación 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=15747 4 | */ 5 | 6 | let myArray = [1, 2, 3, 4] 7 | 8 | let person = { 9 | name: "Brais", 10 | age: 37, 11 | alias: "MoureDev" 12 | } 13 | 14 | let myValue = myArray[1] 15 | console.log(myValue) 16 | 17 | let myName = person.name 18 | console.log(myName) 19 | 20 | // Desestructuración 21 | 22 | // Sintaxis arrays 23 | 24 | let [myValue0, myValue1, myValue2, myValue3, myValue4] = myArray 25 | console.log(myValue0) 26 | console.log(myValue1) 27 | console.log(myValue2) 28 | console.log(myValue3) 29 | console.log(myValue4) 30 | 31 | // Sintaxis arrays con valores predeterminados 32 | 33 | let [myValue5 = 0, myValue6 = 0, myValue7 = 0, myValue8 = 0, myValue9 = 0] = myArray 34 | console.log(myValue5) 35 | console.log(myValue6) 36 | console.log(myValue7) 37 | console.log(myValue8) 38 | console.log(myValue9) 39 | 40 | // Ignorar elementos array 41 | 42 | let [myValue10, , , myValue13] = myArray 43 | console.log(myValue10) 44 | console.log(myValue13) 45 | 46 | // Sintaxis objects 47 | 48 | let { name, age, alias } = person 49 | console.log(name) 50 | console.log(age) 51 | console.log(alias) 52 | 53 | // Sintaxis objects con valores predeterminados 54 | 55 | let { name2, age2, alias2, email = "email@email.com" } = person 56 | console.log(name2) // No existe 57 | console.log(age2) // No existe 58 | console.log(alias2) // No existe 59 | console.log(email) 60 | 61 | // Sintaxis objects con nuevos nombres de variables 62 | 63 | let { alias: alias3, name: name3, age: age3 } = person 64 | console.log(name3) 65 | console.log(age3) 66 | console.log(alias3) 67 | 68 | // Objects anidados 69 | 70 | let person3 = { 71 | name: "Brais", 72 | age: 37, 73 | alias: "MoureDev", 74 | walk: function () { 75 | console.log("La persona camina.") 76 | }, 77 | job: { 78 | name: "Programador", 79 | exp: 15, 80 | work: function () { 81 | console.log(`La persona de ${this.age} años de experiencia trabaja.`) 82 | } 83 | } 84 | } 85 | 86 | let { name: name4, job: { name: jobName } } = person3 87 | 88 | console.log(name4) 89 | console.log(jobName) 90 | 91 | // Propagación (...) 92 | 93 | // Sintaxis arrays 94 | 95 | let myArray2 = [...myArray, 5, 6] 96 | 97 | console.log(myArray2) 98 | 99 | // Copia de arrays 100 | 101 | let myArray3 = [...myArray] 102 | 103 | console.log(myArray3) 104 | 105 | // Combinación de arrays 106 | 107 | let myArray4 = [...myArray, ...myArray2, ...myArray3] 108 | 109 | console.log(myArray4) 110 | 111 | // Sintaxis objects 112 | 113 | let person4 = { ...person, email: "braismoure@mouredev.com" } 114 | 115 | console.log(person4) 116 | 117 | // Copia de objects 118 | 119 | let person5 = { ...person } 120 | 121 | console.log(person5) -------------------------------------------------------------------------------- /Basic/21-destructuring-spreading-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 36 - Ejercicios: Desestructuración y propagación 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=16802 4 | */ 5 | 6 | // 1. Usa desestructuración para extraer los dos primeros elementos de un array 7 | 8 | // 2. Usa desestructuración en un array y asigna un valor predeterminado a una variable 9 | 10 | // 3. Usa desestructuración para extraer dos propiedades de un objeto 11 | 12 | // 4. Usa desestructuración para extraer dos propiedades de un objeto y asígnalas 13 | // a nuevas variables con nombres diferentes 14 | 15 | // 5. Usa desestructuración para extraer dos propiedades de un objeto anidado 16 | 17 | // 6. Usa propagación para combinar dos arrays en uno nuevo 18 | 19 | // 7. Usa propagación para crear una copia de un array 20 | 21 | // 8. Usa propagación para combinar dos objetos en uno nuevo 22 | 23 | // 9. Usa propagación para crear una copia de un objeto 24 | 25 | // 10. Combina desestructuración y propagación -------------------------------------------------------------------------------- /Basic/22-classes.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 37 - Clases 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=16864 4 | */ 5 | 6 | // Clases 7 | 8 | class Person { 9 | 10 | constructor(name, age, alias) { 11 | this.name = name 12 | this.age = age 13 | this.alias = alias 14 | } 15 | 16 | } 17 | 18 | // Sintaxis 19 | 20 | let person = new Person("Brais", 37, "MoureDev") 21 | let person2 = new Person("Brais", 37, "MoureDev") 22 | 23 | console.log(person) 24 | console.log(person2) 25 | 26 | console.log(typeof person) 27 | 28 | // Valores por defecto 29 | 30 | class DefaultPerson { 31 | 32 | constructor(name = "Sin nombre", age = 0, alias = "Sin alias") { 33 | this.name = name 34 | this.age = age 35 | this.alias = alias 36 | } 37 | 38 | } 39 | 40 | let person3 = new DefaultPerson("Brais", 37) 41 | 42 | console.log(person3) 43 | 44 | // Acceso a propiedades 45 | 46 | console.log(person3.alias) 47 | console.log(person3["alias"]) 48 | 49 | person3.alias = "MoureDev" 50 | 51 | console.log(person3.alias) 52 | 53 | // Funciones en clases 54 | 55 | class PersonWithMethod { 56 | 57 | constructor(name, age, alias) { 58 | this.name = name 59 | this.age = age 60 | this.alias = alias 61 | } 62 | 63 | walk() { 64 | console.log("La persona camina.") 65 | } 66 | 67 | } 68 | 69 | let person4 = new PersonWithMethod("Brais", 37, "MoureDev") 70 | person4.walk() 71 | 72 | // Propiedades privadas 73 | 74 | class PrivatePerson { 75 | 76 | #bank 77 | 78 | constructor(name, age, alias, bank) { 79 | this.name = name 80 | this.age = age 81 | this.alias = alias 82 | this.#bank = bank 83 | } 84 | 85 | pay() { 86 | this.#bank 87 | } 88 | 89 | } 90 | 91 | let person5 = new PrivatePerson("Brais", 37, "MoureDev", "IBAN123456789") 92 | 93 | // No podemos acceder 94 | // console.log(person5.bank) 95 | // person5.bank = "new IBAN123456789" // bank no es #bank 96 | 97 | console.log(person5) 98 | 99 | // Getters y Setters 100 | 101 | class GetSetPerson { 102 | 103 | #name 104 | #age 105 | #alias 106 | #bank 107 | 108 | constructor(name, age, alias, bank) { 109 | this.#name = name 110 | this.#age = age 111 | this.#alias = alias 112 | this.#bank = bank 113 | } 114 | 115 | get name() { 116 | return this.#name 117 | } 118 | 119 | set bank(bank) { 120 | this.#bank = bank 121 | } 122 | 123 | } 124 | 125 | person6 = new GetSetPerson("Brais", 37, "MoureDev", "IBAN123456789") 126 | 127 | console.log(person6) 128 | console.log(person6.name) 129 | 130 | person6.bank = "new IBAN123456789" 131 | 132 | /* 133 | Clase 38 - Herencia de clases 134 | Vídeo: https://youtu.be/1glVfFxj8a4?t=17999 135 | */ 136 | 137 | // Herencia 138 | 139 | class Animal { 140 | 141 | constructor(name) { 142 | this.name = name 143 | } 144 | 145 | sound() { 146 | console.log("El animal emite un sonido genérico") 147 | } 148 | 149 | } 150 | 151 | class Dog extends Animal { 152 | 153 | sound() { 154 | console.log("Guau!") 155 | } 156 | 157 | run() { 158 | console.log("El perro corre") 159 | } 160 | 161 | } 162 | 163 | class Fish extends Animal { 164 | 165 | constructor(name, size) { 166 | super(name) 167 | this.size = size 168 | } 169 | 170 | swim() { 171 | console.log("El pez nada") 172 | } 173 | 174 | } 175 | 176 | let myDog = new Dog("MoureDog") 177 | myDog.run() 178 | myDog.sound() 179 | 180 | let myFish = new Fish("MoureFish", 10) 181 | myFish.swim() 182 | myFish.sound() 183 | 184 | // Métodos estáticos 185 | 186 | class MathOperations { 187 | 188 | static sum(a, b) { 189 | return a + b 190 | } 191 | } 192 | 193 | console.log(MathOperations.sum(5, 10)) -------------------------------------------------------------------------------- /Basic/23-classes-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 39 - Ejercicios: Clases 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=18630 4 | */ 5 | 6 | // 1. Crea una clase que reciba dos propiedades 7 | 8 | // 2. Añade un método a la clase que utilice las propiedades 9 | 10 | // 3. Muestra los valores de las propiedades e invoca a la función 11 | 12 | // 4. Añade un método estático a la primera clase 13 | 14 | // 5. Haz uso del método estático 15 | 16 | // 6. Crea una clase que haga uso de herencia 17 | 18 | // 7. Crea una clase que haga uso de getters y setters 19 | 20 | // 8. Modifica la clase con getters y setters para que use propiedades privadas 21 | 22 | // 9. Utiliza los get y set y muestra sus valores 23 | 24 | // 10. Sobrescribe un método de una clase que utilice herencia -------------------------------------------------------------------------------- /Basic/24-error-handling.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 40 - Manejo de errores 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=18751 4 | */ 5 | 6 | // Excepción 7 | 8 | // Produce una excepción 9 | let myObject 10 | // console.log(myObject.email) 11 | 12 | // Captura de errores 13 | 14 | // try-catch 15 | 16 | try { 17 | // Código que intenta ejecutar 18 | console.log(myObject.email) 19 | console.log("Finaliza la ejecución sin errores") 20 | } catch { 21 | // Bloque de error 22 | console.log("Se ha producido un error") 23 | } 24 | 25 | // Captura del error 26 | 27 | try { 28 | console.log(myObject.email) 29 | } catch (error) { 30 | console.log("Se ha producido un error:", error.message) 31 | } 32 | 33 | // finally 34 | 35 | try { 36 | console.log(myObject.email) 37 | } catch (error) { 38 | console.log("Se ha producido un error:", error.message) 39 | } finally { 40 | console.log("Este código se ejecuta siempre") 41 | } 42 | 43 | // No está soportado 44 | // try { 45 | // console.log(myObject.email) 46 | // } finally { 47 | // console.log("Este código se ejecuta siempre") 48 | // } 49 | 50 | // Lanzamiento de errores 51 | 52 | // throw 53 | 54 | // throw new Error("Se ha producido un error") 55 | 56 | function sumIntegers(a, b) { 57 | if (typeof a !== "number" || typeof b !== "number") { 58 | throw new TypeError("Esta operación sólo suma números") 59 | } 60 | if (!Number.isInteger(a) || !Number.isInteger(b)) { 61 | throw new Error("Esta operación sólo suma números enteros") 62 | } 63 | if (a == 0 || b == 0) { 64 | throw new SumZeroIntegerError("Se está intentando sumar cero", a, b) 65 | } 66 | return a + b 67 | } 68 | 69 | try { 70 | console.log(sumIntegers(5, 10)) 71 | // console.log(sumIntegers(5.5, 10)) 72 | console.log(sumIntegers("5", 10)) 73 | // console.log(sumIntegers(5, "10")) 74 | // console.log(sumIntegers("5", "10")) 75 | } catch (error) { 76 | console.log("Se ha producido un error:", error.message) 77 | } 78 | 79 | // Capturar varios tipos de errores 80 | 81 | try { 82 | // console.log(sumIntegers(5.5, 10)) 83 | console.log(sumIntegers("5", 10)) 84 | } catch (error) { 85 | if (error instanceof TypeError) { 86 | console.log("Se ha producido un error de tipo:", error.message) 87 | } else if (error instanceof Error) { 88 | console.log("Se ha producido un error:", error.message) 89 | } 90 | } 91 | 92 | // Crear excepciones personalizadas 93 | 94 | class SumZeroIntegerError extends Error { 95 | constructor(message, a, b) { 96 | super(message) 97 | this.a = a 98 | this.b = b 99 | } 100 | 101 | printNumbers() { 102 | console.log(this.a, " + ", this.b) 103 | } 104 | } 105 | 106 | try { 107 | console.log(sumIntegers(0, 10)) 108 | } catch (error) { 109 | console.log("Se ha producido un error personalizado:", error.message) 110 | error.printNumbers() 111 | } -------------------------------------------------------------------------------- /Basic/25-error-handling-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 41 - Ejercicios: Manejo de errores 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=20392 4 | */ 5 | 6 | // 1. Captura una excepción utilizando try-catch 7 | 8 | // 2. Captura una excepción utilizando try-catch y finally 9 | 10 | // 3. Lanza una excepción genérica 11 | 12 | // 4. Crea una excepción personalizada 13 | 14 | // 5. Lanza una excepción personalizada 15 | 16 | // 6. Lanza varias excepciones según una lógica definida 17 | 18 | // 7. Captura varias excepciones en un mismo try-catch 19 | 20 | // 8. Crea un bucle que intente transformar a float cada valor y capture y muestre los errores 21 | 22 | // 9. Crea una función que verifique si un objeto tiene una propiedad específica y lance una excepción personalizada 23 | 24 | // 10. Crea una función que realice reintentos en caso de error hasta un máximo de 10 -------------------------------------------------------------------------------- /Basic/26-console-methods.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 42 - Console 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=20444 4 | */ 5 | 6 | // Console 7 | 8 | // log 9 | 10 | console.log("¡Hola, JavaScript!") 11 | 12 | // error 13 | 14 | console.error("Este es un mensaje de error.") 15 | console.error("Error al conectarse a la base de datos: ", new Error("Conexión fallida.")) 16 | 17 | // warn 18 | 19 | console.warn("Este es un mensaje de advertencia.") 20 | 21 | // info 22 | 23 | console.info("Este es un mensaje de información adicional.") 24 | 25 | // table 26 | 27 | let data = [ 28 | ["Brais", 37], 29 | ["Sara", 21] 30 | ] 31 | 32 | console.table(data) 33 | 34 | data = [ 35 | { name: "Brais", age: 37 }, 36 | { name: "Sara", age: 21 } 37 | ] 38 | 39 | console.table(data) 40 | 41 | // group 42 | 43 | console.group("Usuario:") 44 | console.log("Nombre: Brais") 45 | console.log("Edad: 37") 46 | console.groupEnd() 47 | 48 | // time 49 | 50 | console.time("Tiempo de ejecución 2") 51 | 52 | for (let i = 0; i < 10000; i++) { 53 | 54 | } 55 | 56 | console.time("Tiempo de ejecución 1") 57 | 58 | for (let i = 0; i < 10000; i++) { 59 | 60 | } 61 | 62 | console.timeEnd("Tiempo de ejecución 2") 63 | 64 | for (let i = 0; i < 10000; i++) { 65 | 66 | } 67 | 68 | console.timeEnd("Tiempo de ejecución 1") 69 | 70 | // assert 71 | 72 | let age = 17 73 | console.assert(age >= 18, "El usuario debe ser mayor de edad.") 74 | 75 | // count 76 | 77 | console.count("Click") 78 | console.count("Click") 79 | console.count("Click") 80 | console.countReset("Click") 81 | console.count("Click") 82 | 83 | // trace 84 | 85 | function funcA() { 86 | funcB() 87 | } 88 | 89 | function funcB() { 90 | console.trace("Seguimiento de la ejecución.") 91 | } 92 | 93 | funcA() 94 | 95 | // clear 96 | 97 | // console.clear() -------------------------------------------------------------------------------- /Basic/27-console-methods-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 43 - Ejercicios: Console 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=21421 4 | */ 5 | 6 | // 1. Crea un función que utilice error correctamente 7 | 8 | // 2. Crea una función que utilice warn correctamente 9 | 10 | // 3. Crea una función que utilice info correctamente 11 | 12 | // 4. Utiliza table 13 | 14 | // 5. Utiliza group 15 | 16 | // 6. Utiliza time 17 | 18 | // 7. Valida con assert si un número es positivo 19 | 20 | // 8. Utiliza count 21 | 22 | // 9. Utiliza trace 23 | 24 | // 10. Utiliza clear -------------------------------------------------------------------------------- /Basic/28-export-modules.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 44 - Módulos 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=21480 4 | */ 5 | 6 | // Exportación de módulos 7 | 8 | // Funciones 9 | 10 | export function add(a, b) { 11 | return a + b 12 | } 13 | 14 | console.log(add(5, 10)) 15 | 16 | // Propiedades 17 | 18 | export const PI = 3.1416 19 | export let name = "MoureDev" 20 | 21 | // Clases 22 | 23 | export class Circle { 24 | 25 | constructor(radius) { 26 | this.radius = radius 27 | } 28 | 29 | area() { 30 | return Math.PI * Math.pow(this.radius, 2) 31 | } 32 | 33 | perimeter() { 34 | return 2 * Math.PI * this.radius 35 | } 36 | 37 | } 38 | 39 | // Exportación por defecto 40 | 41 | export default function substract(a, b) { 42 | return a - b 43 | } 44 | 45 | // export default class MyClass { 46 | 47 | // func() { 48 | // console.log("Mi clase") 49 | // } 50 | // } 51 | -------------------------------------------------------------------------------- /Basic/29-import-modules.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 44 - Módulos 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=21480 4 | */ 5 | 6 | // Importación de módulos 7 | 8 | import { add, PI, name, Circle } from "./28-export-modules.js" 9 | 10 | import defaultImport from "./28-export-modules.js" 11 | 12 | // Funciones 13 | 14 | console.log(add(5, 10)) 15 | 16 | // Propiedades 17 | 18 | console.log(PI) 19 | console.log(name) 20 | 21 | // Clases 22 | 23 | let circle = new Circle(10) 24 | console.log(circle.radius) 25 | console.log(circle.area().toFixed(2)) 26 | console.log(circle.perimeter().toFixed(2)) 27 | 28 | // Importación por defecto 29 | 30 | console.log(defaultImport(5, 10)) 31 | 32 | // let myClass = new defaultImport() 33 | // myClass.func() 34 | 35 | // Proyecto modular 36 | 37 | // import { MyImport } from "./directory/file.js" -------------------------------------------------------------------------------- /Basic/30-import-external-modules.cjs: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 44 - Módulos 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=21480 4 | */ 5 | 6 | // Módulos externos 7 | 8 | const os = require("os") 9 | 10 | console.log(os.platform()) 11 | console.log(os.arch()) 12 | console.log(os.totalmem()) 13 | console.log(os.freemem()) -------------------------------------------------------------------------------- /Basic/31-modules-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 45 - Ejercicios: Módulos 3 | Vídeo: https://youtu.be/1glVfFxj8a4?t=22720 4 | */ 5 | 6 | // 1. Exporta una función 7 | 8 | // 2. Exporta una constante 9 | 10 | // 3. Exporta una clase 11 | 12 | // 4. Importa una función 13 | 14 | // 5. Importa una constante 15 | 16 | // 6. Importa una clase 17 | 18 | // 7. Exporta una función, una constante y una clase por defecto (en caso de que lo permita) 19 | 20 | // 8. Importa una función, una constante y una clase por defecto (en caso de que lo permita) 21 | 22 | // 9. Exporta una función, una constante y una clase desde una carpeta 23 | 24 | // 10. Importa una función, una constante y una clase desde un directorio diferente al anterior -------------------------------------------------------------------------------- /Basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "module" 3 | } -------------------------------------------------------------------------------- /Images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mouredev/hello-javascript/4eacf49e359dba50d39d769bac6596e023a68f44/Images/header.jpg -------------------------------------------------------------------------------- /Images/intermediate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mouredev/hello-javascript/4eacf49e359dba50d39d769bac6596e023a68f44/Images/intermediate.jpg -------------------------------------------------------------------------------- /Images/pro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mouredev/hello-javascript/4eacf49e359dba50d39d769bac6596e023a68f44/Images/pro.jpg -------------------------------------------------------------------------------- /Intermediate/00-advanced-functions.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 2 a 11 - Funciones avanzadas 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=346 4 | */ 5 | 6 | // Ciudadanos de primera clase 7 | 8 | const greet = function (name) { 9 | console.log(`Hola, ${name}`) 10 | } 11 | 12 | greet("Brais") 13 | 14 | function processGreeting(greetFunction, name) { 15 | greetFunction(name) 16 | } 17 | 18 | function returnGreeting() { 19 | return greet 20 | } 21 | 22 | processGreeting(greet, "MoureDev") 23 | const greet2 = returnGreeting() 24 | greet2("Brais Moure") 25 | 26 | // Arrow functions avanzadas 27 | 28 | // - Retorno implícito 29 | const multiply = (a, b) => a * b 30 | console.log(multiply(2, 5)) 31 | 32 | // - this léxico 33 | const handler = { 34 | name: "Brais", 35 | greeting: function () { 36 | console.log(`Hola, ${this.name}`) 37 | }, 38 | arrowGreeting: () => { 39 | console.log(`Hola, ${this.name}`) 40 | } 41 | } 42 | 43 | handler.greeting() 44 | handler.arrowGreeting(); 45 | 46 | // IIFE (Expresión de Función Invocada Inmediatamente) 47 | 48 | (function () { 49 | console.log("IIFE clásico") 50 | })(); 51 | 52 | (() => { 53 | console.log("IIFE con arrow function") 54 | })(); 55 | 56 | // Parámetros Rest (...) 57 | 58 | function sum(...numbers) { 59 | let result = 0 60 | for (let number of numbers) { 61 | result += number 62 | } 63 | return result 64 | } 65 | 66 | console.log(sum(1, 2, 3, 4, 5)) 67 | console.log(sum(10, 15)) 68 | 69 | // Operador Spread (...) 70 | 71 | const numbers = [1, 2, 3] 72 | function sumWithSpread(a, b, c) { 73 | return a + b + c 74 | } 75 | 76 | console.log(sumWithSpread(1, 2, 3)) // Sin Spread 77 | console.log(sumWithSpread(...numbers)) // Con Spread 78 | 79 | // Closures (Clausuras) 80 | 81 | function createCounter() { 82 | let counter = 0 83 | return function () { 84 | counter++ 85 | console.log(`Contador: ${counter}`) 86 | } 87 | } 88 | 89 | const counter = createCounter() 90 | counter() 91 | counter() 92 | counter() 93 | counter() 94 | 95 | // Recursividad 96 | 97 | function factorial(n) { 98 | if (n <= 1) { 99 | return 1 100 | } 101 | return n * factorial(n - 1) 102 | } 103 | 104 | console.log(factorial(5)) 105 | 106 | // Funciones parciales 107 | 108 | function partialSum(a) { 109 | return function (b, c) { 110 | return sum(a, b, c) 111 | } 112 | } 113 | 114 | const sumWith = partialSum(4) 115 | console.log(sumWith(2, 3)) 116 | console.log(sumWith(1, 2)) 117 | 118 | // Currying 119 | 120 | function currySum(a) { 121 | return function (b) { 122 | return function (c) { 123 | return function (d) { 124 | return sum(a, b, c, d) 125 | } 126 | } 127 | } 128 | } 129 | 130 | const sumAB = currySum(1)(2) 131 | const sumC = sumAB(3) 132 | console.log(sumC(3)) 133 | console.log(sumC(4)) 134 | console.log(sumAB(5)(7)) 135 | 136 | // Callbacks 137 | 138 | function processData(data, callback) { 139 | const result = sum(...data) 140 | callback(result) 141 | } 142 | 143 | function processResult(result) { 144 | console.log(result) 145 | } 146 | 147 | function processResult2(result) { 148 | console.log(`Mi resultado es: ${result}`) 149 | } 150 | 151 | processData([1, 2, 3], processResult) 152 | processData([1, 2, 3], processResult2) 153 | processData([1, 2, 3], (result) => { 154 | console.log(`Mi resultado en la arrow function es: ${result}`) 155 | }) -------------------------------------------------------------------------------- /Intermediate/01-advanced-functions-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 12 - Funciones avanzadas 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=4112 4 | */ 5 | 6 | // 1. Crea una función que retorne a otra función 7 | 8 | // 2. Implementa una función currificada que multiplique 3 números 9 | 10 | // 3. Desarrolla una función recursiva que calcule la potencia de un número elevado a un exponente 11 | 12 | // 4. Crea una función createCounter() que reciba un valor inicial y retorne un objeto con métodos para increment(), decrement() y getValue(), utilizando un closure para mantener el estado 13 | 14 | // 5. Crea una función sumManyTimes(multiplier, ...numbers) que primero sume todos los números (usando parámetros Rest) y luego multiplique el resultado por multiplier 15 | 16 | // 6. Crea un Callback que se invoque con el resultado de la suma de todos los números que se le pasan a una función 17 | 18 | // 7. Desarrolla una función parcial 19 | 20 | // 8. Implementa un ejemplo que haga uso de Spread 21 | 22 | // 9. Implementa un retorno implícito 23 | 24 | // 10. Haz uso del this léxico -------------------------------------------------------------------------------- /Intermediate/02-advanced-structures.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 13 a 22 - Estructuras avanzadas 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=4355 4 | */ 5 | 6 | // Arrays avanzados 7 | 8 | // - Métodos funcionales 9 | 10 | // forEach 11 | 12 | let numbers = [1, 2, 3, 4, 5, 6] 13 | 14 | numbers.forEach(element => console.log(element)) 15 | 16 | // map 17 | 18 | let doubled = numbers.map(element => element * 2) 19 | console.log(doubled) 20 | 21 | // filter 22 | 23 | let evens = numbers.filter(element => element % 2 === 0) 24 | console.log(evens) 25 | 26 | // reduce 27 | 28 | let sum = numbers.reduce((result, current) => result + current, 0) 29 | console.log(sum) 30 | 31 | // - Manipulación 32 | 33 | // flat 34 | 35 | let nestedArray = [1, [2, [3, [4]]]] 36 | console.log(nestedArray) 37 | let flatArray = nestedArray.flat(1) 38 | console.log(flatArray) 39 | flatArray = nestedArray.flat(2) 40 | console.log(flatArray) 41 | flatArray = nestedArray.flat(3) 42 | console.log(flatArray) 43 | 44 | // flatMap 45 | 46 | let phrases = ["Hola mundo", "Adiós mundo"] 47 | let words = phrases.flatMap(phrase => phrase.split(" ")) 48 | console.log(words) 49 | 50 | // - Ordenación 51 | 52 | // sort 53 | 54 | let unsorted = ["b", "a", "d", "c"] 55 | let sorted = unsorted.sort() 56 | console.log(sorted) 57 | 58 | unsorted = [3, 4, 1, 6, 10] 59 | sorted = unsorted.sort((a, b) => a - b) 60 | 61 | console.log(sorted) 62 | 63 | // reverse 64 | 65 | sorted.reverse() 66 | console.log(sorted) 67 | 68 | // - Búsqueda 69 | 70 | // includes 71 | 72 | console.log(sorted.includes(4)) 73 | console.log(sorted.includes(5)) 74 | 75 | // find 76 | 77 | let firstEven = sorted.find(element => element % 2 === 0) 78 | console.log(firstEven) 79 | 80 | // findIndex 81 | 82 | let firstEvenIndex = sorted.findIndex(element => element % 2 === 0) 83 | console.log(firstEvenIndex) 84 | 85 | // Sets avanzados 86 | 87 | // - Operaciones 88 | 89 | // Eliminación de duplicados 90 | 91 | let numbersArray = [1, 2, 2, 3, 4, 5, 6, 6] 92 | numbersArray = [...new Set(numbersArray)] 93 | console.log(numbersArray) 94 | 95 | // Unión 96 | 97 | const setA = new Set([1, 2, 3]) 98 | const setB = new Set([2, 3, 4, 5]) 99 | const union = new Set([...setA, ...setB]) 100 | console.log(union) 101 | 102 | // Intersección 103 | 104 | const intersection = new Set([...setA].filter(element => setB.has(element))) 105 | console.log(intersection) 106 | 107 | // Diferencia 108 | 109 | const difference = new Set([...setA].filter(element => !setB.has(element))) 110 | console.log(difference) 111 | 112 | // - Conversión 113 | 114 | // Set a Array 115 | 116 | console.log([...setA]) 117 | 118 | // - Iteración 119 | 120 | // forEach 121 | 122 | setA.forEach(element => console.log(element)) 123 | 124 | // Maps avanzados 125 | 126 | // - Iteración 127 | 128 | let myMap = new Map([ 129 | ["name", "MoureDev"], 130 | ["age", 37] 131 | ]) 132 | 133 | myMap.forEach((value, key) => console.log(`${key}: ${value}`)) 134 | 135 | // - Conversión 136 | 137 | // Map a Array 138 | 139 | const arrayFromMap = Array.from(myMap) 140 | console.log(arrayFromMap) 141 | 142 | // Map a Objeto 143 | 144 | const objectFromMap = Object.fromEntries(myMap) 145 | console.log(objectFromMap) 146 | 147 | // Objeto a Map 148 | 149 | const mapFromObject = new Map(Object.entries(objectFromMap)) 150 | console.log(mapFromObject) -------------------------------------------------------------------------------- /Intermediate/03-advanced-structures-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 23 - Estructuras avanzadas 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=7514 4 | */ 5 | 6 | // 1. Utiliza map, filter y reduce para crear un ejemplo diferente al de la lección 7 | 8 | // 2. Dado un array de números, crea uno nuevo con dichos números elevados al cubo y filtra sólo los números pares 9 | 10 | // 3. Utiliza flat y flatMap para crear un ejemplo diferente al de la lección 11 | 12 | // 4. Ordena un array de números de mayor a menor 13 | 14 | // 5. Dados dos sets, encuentra la unión, intersección y diferencia de ellos 15 | 16 | // 6. Itera los resultados del ejercicio anterior 17 | 18 | // 7. Crea un mapa que almacene información se usuarios (nombre, edad y email) e itera los datos 19 | 20 | // 8. Dado el mapa anterior, crea un array con los nombres 21 | 22 | // 9. Dado el mapa anterior, obtén un array con los email de los usuarios mayores de edad y transfórmalo a un set 23 | 24 | // 10. Transforma el mapa en un objeto, a continuación, transforma el objeto en un mapa con clave el email de cada usuario y como valor todos los datos del usuario -------------------------------------------------------------------------------- /Intermediate/04-advanced-objects.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 24 a 28 - Objetos y clases avanzados 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=7639 4 | */ 5 | 6 | // Objetos avanzados 7 | 8 | // - Prototipos y Herencia 9 | 10 | // Prototipos 11 | 12 | let person = { 13 | name: "Brais", 14 | age: 37, 15 | greet() { 16 | console.log(`Hola, soy ${this.name}`) 17 | } 18 | } 19 | 20 | console.log(person.__proto__) 21 | console.log(Object.getPrototypeOf(person)) 22 | 23 | person.sayAge = function () { 24 | console.log(`Tengo ${this.age} años`) 25 | } 26 | 27 | console.log(person) 28 | person.sayAge() 29 | 30 | // Herencia 31 | 32 | let programmer = Object.create(person) 33 | programmer.language = "JavaScript" 34 | 35 | programmer.name = "MoureDev" 36 | console.log(person.name) 37 | console.log(person.language) 38 | 39 | console.log(programmer.name) 40 | console.log(programmer.age) 41 | console.log(programmer.language) 42 | programmer.greet() 43 | programmer.sayAge() 44 | 45 | // - Métodos estáticos y de instancia 46 | 47 | function Person(name, age) { 48 | this.name = name 49 | this.age = age 50 | } 51 | 52 | Person.prototype.greet = function () { 53 | console.log(`Hola, soy ${this.name}`) 54 | } 55 | 56 | let newPerson = new Person("Brais", 37) 57 | newPerson.greet() 58 | 59 | // - Métodos avanzados 60 | 61 | // assign 62 | 63 | let personCore = { name: "Brais" } 64 | let personDetails = { age: 37, alias: "MoureDev" } 65 | 66 | let fullPerson = Object.assign(personCore, personDetails) 67 | console.log(fullPerson) 68 | 69 | // keys, values, entries 70 | 71 | console.log(Object.keys(fullPerson)) 72 | console.log(Object.values(fullPerson)) 73 | console.log(Object.entries(fullPerson)) -------------------------------------------------------------------------------- /Intermediate/05-advanced-classes.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 29 a 37 - Objetos y clases avanzados 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=9096 4 | */ 5 | 6 | // Clases avanzadas 7 | 8 | class Person { 9 | constructor(name, age) { 10 | this.name = name 11 | this.age = age 12 | } 13 | 14 | greet() { 15 | console.log(`Hola, soy ${this.name}`) 16 | } 17 | } 18 | 19 | const person = new Person("Brais", 37) 20 | person.greet() 21 | 22 | person.sayAge = function () { 23 | console.log(`Tengo ${this.age} años`) 24 | } 25 | person.sayAge() 26 | 27 | // - Abstracción 28 | 29 | class Animal { 30 | constructor(name) { 31 | if (new.target === Animal) { 32 | throw new Error("No se puede instanciar una clase abstracta") 33 | } 34 | this.name = name 35 | } 36 | 37 | makeSound() { 38 | throw new Error("Este método tiene que ser implementado por la subclase") 39 | } 40 | } 41 | 42 | // Error 43 | // const animal = new Animal("Mou") 44 | // console.log(animal) 45 | 46 | // - Polimorfismo 47 | 48 | class Cat extends Animal { 49 | 50 | makeSound() { 51 | console.log("Miau!") 52 | } 53 | } 54 | 55 | class Dog extends Animal { 56 | 57 | makeSound() { 58 | console.log("Guau!") 59 | } 60 | } 61 | 62 | const cat = new Cat("MoureCat") 63 | console.log(cat) 64 | cat.makeSound() 65 | 66 | const dog = new Dog("MoureDog") 67 | console.log(dog) 68 | dog.makeSound() 69 | 70 | // - Mixins 71 | 72 | const FlyMixin = { 73 | fly() { 74 | console.log(`${this.name} está volando`) 75 | } 76 | } 77 | 78 | class Bird extends Animal { } 79 | 80 | class Dragon extends Animal { } 81 | 82 | Object.assign(Bird.prototype, FlyMixin) 83 | Object.assign(Dragon.prototype, FlyMixin) 84 | 85 | const bird = new Bird("MoureBird") 86 | 87 | console.log(bird.name) 88 | bird.fly() 89 | 90 | const dragon = new Dragon("MoureDragon") 91 | 92 | console.log(dragon.name) 93 | dragon.fly() 94 | 95 | // - Patrón Singleton 96 | 97 | class Session { 98 | 99 | constructor(name) { 100 | if (Session.instance) { 101 | return Session.instance 102 | } 103 | this.name = name 104 | Session.instance = this 105 | } 106 | } 107 | 108 | const session1 = new Session("Brais Moure") 109 | const session2 = new Session() 110 | console.log(session1.name) 111 | console.log(session2.name) 112 | console.log(session1 === session2) 113 | 114 | const session3 = new Session("MoureDev") 115 | console.log(session3.name) 116 | console.log(session2 === session3) 117 | 118 | // - Symbol 119 | 120 | const ID = Symbol("id") 121 | 122 | class User { 123 | constructor(name) { 124 | this.name = name 125 | this[ID] = Math.random() 126 | } 127 | 128 | getId() { 129 | return this[ID] 130 | } 131 | } 132 | 133 | const user = new User("Brais") 134 | console.log(user.name) 135 | console.log(user.ID) 136 | console.log(user.getId()) 137 | 138 | // - instanceof 139 | 140 | class Car { } 141 | 142 | const car = new Car() 143 | 144 | console.log(car instanceof Car) 145 | 146 | // - create 147 | 148 | const anotherCar = Object.create(Car.prototype) 149 | 150 | console.log(anotherCar instanceof Car) 151 | 152 | // - Proxy 153 | 154 | const proxy = { 155 | get(target, property) { 156 | console.log(`Se accede a la propiedad ${property}`) 157 | return target[property] 158 | }, 159 | set(target, property, value) { 160 | if (property === "balance" && value < 0) { 161 | throw new Error("El saldo no puede ser negativo") 162 | } 163 | target[property] = value 164 | } 165 | } 166 | 167 | class BankAccount { 168 | constructor(balance) { 169 | this.balance = balance 170 | } 171 | } 172 | 173 | const account = new Proxy(new BankAccount(100), proxy) 174 | console.log(account.balance) 175 | 176 | account.balance = 50 177 | console.log(account.balance) 178 | 179 | // Error 180 | // account.balance = -10 -------------------------------------------------------------------------------- /Intermediate/06-advanced-objects-classes-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 38 - Objetos y clases avanzados 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=11832 4 | */ 5 | 6 | // 1. Agregega una función al prototipo de un objeto 7 | 8 | // 2. Crea un objeto que herede de otro 9 | 10 | // 3. Define un método de instancia en un objeto 11 | 12 | // 4. Haz uso de get y set en un objeto 13 | 14 | // 5. Utiliza la operación assign en un objeto 15 | 16 | // 6. Crea una clase abstracta 17 | 18 | // 7. Utiliza polimorfismo en dos clases diferentes 19 | 20 | // 8. Implementa un Mixin 21 | 22 | // 9. Crea un Singleton 23 | 24 | // 10. Desarrolla un Proxy -------------------------------------------------------------------------------- /Intermediate/07-async.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 39 a 44 - Asincronía 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=11890 4 | */ 5 | 6 | // Programación asíncrona 7 | 8 | // Código síncrono 9 | 10 | console.log("Inicio") 11 | 12 | for (let i = 0; i < 100000000; i++) { } 13 | 14 | console.log("Fin") 15 | 16 | // Event Loop (Bucle de eventos) 17 | 18 | // Componentes del Event Loop: 19 | // 1. Call Stack (Pila de ejecución) 20 | // 2. Web APIs (APIs del navegador) o Node.js: 21 | // 3. Task Queue (setTimeout()) y Microtask Queue (Promesas) 22 | 23 | // Flujo del Event Loop: 24 | // 1. Call Stack 25 | // 2. Operaciones asíncronas -> Web APIs o Node.js 26 | // 3. Operación termina -> La coloca en Task Queue o Microtask Queue 27 | // 4. Si Call Stack vacío -> Mueve tareas del Microtask Queue o Task Queue al Call Stack 28 | // 5. El proceso se repite 29 | 30 | // Código asíncrono 31 | 32 | // - Callbacks 33 | 34 | console.log("Inicio") 35 | 36 | setTimeout(() => { 37 | console.log("Esto se ejecuta después de 2 segundos") 38 | }, 2000) 39 | 40 | console.log("Fin") 41 | 42 | // - Problema: Callback Hell 43 | 44 | function step1(callback) { 45 | setTimeout(() => { 46 | console.log("Paso 1 completado") 47 | callback() 48 | }, 1000) 49 | } 50 | 51 | function step2(callback) { 52 | setTimeout(() => { 53 | console.log("Paso 2 completado") 54 | callback() 55 | }, 1000) 56 | } 57 | 58 | function step3(callback) { 59 | setTimeout(() => { 60 | console.log("Paso 3 completado") 61 | callback() 62 | }, 1000) 63 | } 64 | 65 | step1(() => { 66 | step2(() => { 67 | step3(() => { 68 | console.log("Todos los pasos completados") 69 | }) 70 | }) 71 | }) 72 | 73 | // - Promesas 74 | 75 | const promise = new Promise((resolve, reject) => { 76 | // IMPORTANTE: Inicialmente escribí setInterval, pero lo correcto es setTimeout 77 | // setInterval se ejecutaría indefinidamente cada 4s, y el proceso nunca finalizaría 78 | setTimeout(() => { 79 | const ok = false 80 | if (ok) { 81 | resolve("Operación exitosa") 82 | } else { 83 | reject("Se ha producido un error") 84 | } 85 | }, 4000) 86 | }) 87 | 88 | promise 89 | .then(result => { 90 | console.log(result) 91 | }) 92 | .catch(error => { 93 | console.log(error) 94 | }) 95 | 96 | // - Encadenamiento de promesas 97 | 98 | function step1Promise() { 99 | return new Promise(resolve => { 100 | setTimeout(() => { 101 | console.log("Paso 1 con promesa completado") 102 | resolve() 103 | }, 1000) 104 | }) 105 | } 106 | 107 | function step2Promise() { 108 | return new Promise(resolve => { 109 | setTimeout(() => { 110 | console.log("Paso 2 con promesa completado") 111 | resolve() 112 | }, 1000) 113 | }) 114 | } 115 | 116 | function step3Promise() { 117 | return new Promise(resolve => { 118 | setTimeout(() => { 119 | console.log("Paso 3 con promesa completado") 120 | resolve() 121 | }, 1000) 122 | }) 123 | } 124 | 125 | step1Promise() 126 | .then(step2Promise) 127 | .then(step3Promise) 128 | .then(() => { 129 | console.log("Todos los pasos con promesa completados") 130 | }) 131 | 132 | // - Async/Await 133 | 134 | function wait(ms) { 135 | return new Promise(resolve => setTimeout(resolve, ms)) 136 | } 137 | 138 | async function process() { 139 | 140 | console.log("Inicio del proceso") 141 | 142 | await wait(5000) 143 | console.log("Proceso después de 5 segundos") 144 | 145 | await wait(1000) 146 | console.log("Proceso después de 1 segundo") 147 | 148 | await wait(2000) 149 | console.log("Proceso después de 2 segundos") 150 | 151 | console.log("Fin del proceso") 152 | } 153 | 154 | process() -------------------------------------------------------------------------------- /Intermediate/08-async-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 45 - Asincronía 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=14558 4 | */ 5 | 6 | // 1. Crea una función para saludar que reciba un nombre y un callback. 7 | // El callback debe ejecutarse después de 2 segundos y mostrar en consola "Hola, [nombre]". 8 | 9 | // 2. Crea tres funciones task1(callback), task2(callback) y task3(callback). 10 | // Cada función debe tardar 1 segundo en ejecutarse y luego llamar al callback. 11 | 12 | // 3. Crea una función para verificar un número que retorne una Promesa. 13 | // Si el número es par, la promesa se resuelve con el mensaje "Número par". 14 | // Si el número es impar, la promesa se rechaza con el mensaje "Número impar". 15 | 16 | // 4. Crea tres funciones que devuelvan promesas: 17 | // firstTask(): tarda 1s y muestra "Primera tarea completada". 18 | // secondTask(): tarda 2s y muestra "Segunda tarea completada". 19 | // thirdTask(): tarda 1.5s y muestra "Tercera tarea completada". 20 | 21 | // 5. Transforma el ejercicio anterior de Promesas en una función async/await llamada executeTasks(). 22 | 23 | // 6. Crea una función getUser(id) que devuelva una promesa y simule una llamada a una API (que se demore 2s). 24 | // Si el id es menor a 5, la promesa se resuelve con { id, nombre: "Usuario " + id }. 25 | // Si el id es 5 o mayor, la promesa se rechaza con el mensaje "Usuario no encontrado". 26 | // Usa async/await para llamar a getUser(id) y maneja los errores con try/catch. 27 | 28 | // 7. Intenta predecir el resultado de este código antes de ejecutarlo en la consola: 29 | // console.log("Inicio") 30 | // setTimeout(() => console.log("setTimeout ejecutado"), 0) 31 | // Promise.resolve().then(() => console.log("Promesa resuelta")) 32 | // console.log("Fin") 33 | 34 | // 8. Crea tres funciones que devuelvan promesas con tiempos de espera distintos. 35 | // A continuación, usa Promise.all() para ejecutarlas todas al mismo tiempo y mostrar "Todas las promesas resueltas" cuando terminen. 36 | 37 | // 9. Crea una función waitSeconds(segundos) que use setTimeout dentro de una Promesa para esperar la cantidad de segundos indicada. 38 | // A continuación, usa async/await para que se espere 3 segundos antes de mostrar "Tiempo finalizado" en consola. 39 | 40 | // 10. Crea una simulación de un cajero automático usando asincronía. 41 | // - La función checkBalance() tarda 1s y devuelve un saldo de 500$. 42 | // - La función withdrawMoney(amount) tarda 2s y retira dinero si hay suficiente saldo, o devuelve un error si no hay fondos. 43 | // - Usa async/await para hacer que el usuario intente retirar 300$ y luego 300$ más. 44 | // 45 | // Posible salida esperada: 46 | // Saldo disponible: 500$ 47 | // Retirando 300$... 48 | // Operación exitosa, saldo restante: 200$ 49 | // Retirando 300$... 50 | // Error: Fondos insuficientes -------------------------------------------------------------------------------- /Intermediate/09-apis.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 46 a 59 - APIs 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=14777 4 | */ 5 | 6 | // Manejo de APIs 7 | 8 | // - APIs REST (HTTP + URLs + JSON) 9 | 10 | // Métodos HTTP: 11 | // - GET 12 | // - POST 13 | // - PUT 14 | // - DELETE 15 | 16 | // Códigos de respuesta HTTP: 17 | // - 200 OK 18 | // - 201 19 | // - 400 20 | // - 404 21 | // - 500 22 | 23 | // Consumir una API 24 | 25 | // https://jsonplaceholder.typicode.com 26 | 27 | // GET 28 | fetch("https://jsonplaceholder.typicode.com/posts") 29 | .then(response => { 30 | // Transforma la respuesta a JSON 31 | return response.json() 32 | }) 33 | .then(data => { 34 | // Procesa los datos 35 | console.log(data) 36 | }) 37 | .catch(error => { 38 | // Captura errores 39 | console.log("Error", error) 40 | }) 41 | 42 | // Uso de Async/Await 43 | 44 | async function getPosts() { 45 | try { 46 | const response = await fetch("https://jsonplaceholder.typicode.com/posts") 47 | const data = await response.json() 48 | console.log(data) 49 | } catch (error) { 50 | console.log("Error", error) 51 | } 52 | } 53 | 54 | getPosts() 55 | 56 | // Solicitud POST 57 | 58 | async function createPost() { 59 | try { 60 | 61 | const newPost = { 62 | userId: 1, 63 | title: "Este es el título de mi post", 64 | body: "Este es el cuerpo de mi post" 65 | } 66 | 67 | const response = await fetch("https://jsonplaceholder.typicode.com/posts", { 68 | method: "POST", 69 | headers: { 70 | "Content-Type": "application/json" 71 | }, 72 | body: JSON.stringify(newPost) 73 | }) 74 | 75 | const data = await response.json() 76 | console.log(data) 77 | } catch (error) { 78 | console.log("Error", error) 79 | } 80 | } 81 | 82 | createPost() 83 | 84 | // Herramientas para realizar peticiones HTTP 85 | // - https://postman.com 86 | // - https://apidog.com 87 | // - https://thunderclient.com 88 | 89 | // Manejo de errores 90 | 91 | fetch("https://jsonplaceholder.typicode.com/mouredev") 92 | .then(response => { 93 | if (!response.ok) { 94 | throw Error(`Status HTTP: ${response.status}`) 95 | } 96 | return response.json() 97 | }) 98 | .catch(error => { 99 | console.log("Error", error) 100 | }) 101 | 102 | // Métodos HTTP adicionales 103 | // - PATCH 104 | // - OPTIONS 105 | 106 | async function partialPostUpdate() { 107 | try { 108 | const response = await fetch("https://jsonplaceholder.typicode.com/posts/10", { 109 | method: "PATCH", 110 | headers: { 111 | "Content-Type": "application/json" 112 | }, 113 | body: JSON.stringify({ title: "Este es el nuevo título de mi post" }) 114 | }) 115 | 116 | const data = await response.json() 117 | console.log(data) 118 | } catch (error) { 119 | console.log("Error", error) 120 | } 121 | } 122 | 123 | partialPostUpdate() 124 | 125 | // Autenticación mediante API Key 126 | 127 | async function getWeather(city) { 128 | 129 | // https://openweathermap.org 130 | const apiKey = "TU_API_KEY" 131 | const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}` 132 | 133 | try { 134 | const response = await fetch(url) 135 | const data = await response.json() 136 | console.log(data) 137 | } catch (error) { 138 | console.log("Error", error) 139 | } 140 | } 141 | 142 | getWeather("Madrid") 143 | 144 | // Otros métodos de Autenticación y Autorización 145 | // - Bearer Tokens 146 | // - JWT 147 | 148 | // Versionado de APIs 149 | // - https://api.example.com/v1/resources 150 | // - https://api.example.com/v2/resources 151 | 152 | // Otras APIs 153 | 154 | async function getPokemon(pokemon) { 155 | 156 | // https://pokeapi.co 157 | const url = `https://pokeapi.co/api/v2/pokemon/${pokemon}` 158 | 159 | try { 160 | const response = await fetch(url) 161 | const data = await response.json() 162 | console.log(`Habilidades de ${data.name}`) 163 | data.abilities.forEach(ability => { 164 | console.log(ability.ability.name) 165 | }) 166 | } catch (error) { 167 | console.log("Error", error) 168 | } 169 | } 170 | 171 | getPokemon("pikachu") -------------------------------------------------------------------------------- /Intermediate/10-apis-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 60 - APIs 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=18710 4 | */ 5 | 6 | // 1. Realiza una petición GET con fetch() a JSONPlaceholder y muestra en la consola la lista de publicaciones 7 | 8 | // 2. Modifica el ejercicio anterior para que verifique si la respuesta es correcta usando response.ok. Si no lo es, lanza y muestra un error 9 | 10 | // 3. Reescribe el ejercicio 1 usando la sintaxis async/await en lugar de promesas 11 | 12 | // 4. Realiza una petición POST a JSONPlaceholder para crear una nueva publicación. Envía un objeto con propiedades como title o body 13 | 14 | // 5. Utiliza el método PUT para actualizar completamente un recurso (por ejemplo, modificar una publicación) en JSONPlaceholder 15 | 16 | // 6. Realiza una petición PATCH para modificar únicamente uno o dos campos de un recurso existente 17 | 18 | // 7. Envía una solicitud DELETE a la API para borrar un recurso (por ejemplo, una publicación) y verifica la respuesta 19 | 20 | // 8. Crea una función que realice una solicitud GET (la que quieras) a OpenWeatherMap 21 | 22 | // 9. Utiliza la PokéAPI para obtener los datos de un Pokémon concreto, a continuación los detalles de la especie y, finalmente, la cadena evolutiva a partir de la especie 23 | 24 | // 10. Utiliza una herramienta como Postman o Thunder Client para probar diferentes endpoint de una API 25 | -------------------------------------------------------------------------------- /Intermediate/11-dom.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 61 a 68 - DOM 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=18822 4 | */ 5 | 6 | // Manejo del DOM (Document Object Model) 7 | 8 | console.log(document) 9 | 10 | // - Selección de elementos 11 | 12 | // Métodos básicos (selector HTML) 13 | 14 | const myElementById = document.getElementById("id") 15 | 16 | const myElementsByClass = document.getElementsByClassName("class") 17 | 18 | const myElementsByTag = document.getElementsByTagName("tag") 19 | 20 | // Métodos más modernos (selector CSS) 21 | 22 | document.querySelector(".paragraph") 23 | document.querySelectorAll(".paragraph") 24 | 25 | // - Manipulación de elementos 26 | 27 | const title = document.getElementById("title") 28 | title.textContent = "Hola JavaScript" 29 | 30 | const container = document.querySelector(".container") 31 | container.innerHTML = "

Esto es un nuevo párrafo

" 32 | 33 | // - Modificación de atributos 34 | 35 | // Obtención del atributo 36 | const link = document.querySelector("a") 37 | const url = link.getAttribute("href") 38 | 39 | // Establecimiento del atributo 40 | link.setAttribute("href", "https://example.com") 41 | 42 | // Comprobación de atributo 43 | const hasTarget = link.hasAttribute("target") 44 | 45 | // Eliminación de atributos 46 | link.removeAttribute("target") 47 | 48 | // - Interacción con clases CSS 49 | 50 | const box = document.querySelector(".box") 51 | box.classList.add("selected") 52 | box.classList.remove("selected") 53 | box.classList.toggle("selected") 54 | 55 | const button = document.querySelector("button") 56 | button.style.backgroundColor = "blue" 57 | button.style.color = "white" 58 | button.style.padding = "10px" 59 | 60 | // - Creación y eliminación de elementos 61 | 62 | // Creación 63 | 64 | const newParagraph = document.createElement("p") 65 | newParagraph.textContent = "Este es un nuevo párrafo creado desde JS" 66 | newParagraph.style.padding = "8px" 67 | 68 | container.appendChild(newParagraph) 69 | 70 | const itemsList = document.querySelector("ul") 71 | const newItem = document.createElement("li") 72 | newItem.textContent = "Nuevo elemento" 73 | 74 | // Inserción en un lugar concreto 75 | 76 | const secondItem = itemsList.children[1] 77 | itemsList.insertBefore(newItem, secondItem) 78 | 79 | itemsList.append(newItem) 80 | itemsList.prepend(newItem) 81 | secondItem.before(newItem) 82 | secondItem.after(newItem) 83 | 84 | // Eliminación 85 | 86 | newParagraph.remove() 87 | 88 | // Eliminación tradicional 89 | 90 | const parent = newParagraph.parentElement 91 | parent.removeChild(newParagraph) 92 | 93 | // - Elementos del DOM 94 | 95 | function showMsg() { 96 | alert("Clic!") 97 | } 98 | 99 | const sendButton = document.querySelector("#send") 100 | sendButton.addEventListener("click", showMsg) 101 | 102 | sendButton.addEventListener("click", () => { 103 | alert("Clic con una arrow function!") 104 | }) 105 | 106 | // Eventos comunes 107 | 108 | document.addEventListener("DOMContentLoader", () => { 109 | console.log("El DOM está completamente cargado") 110 | }) 111 | 112 | sendButton.addEventListener("mouseenter", () => { 113 | sendButton.style.backgroundColor = "green" 114 | }) 115 | 116 | sendButton.addEventListener("mouseleave", () => { 117 | sendButton.style.backgroundColor = "blue" 118 | }) 119 | 120 | const form = document.querySelector("form") 121 | form.addEventListener("submit", (event) => { 122 | // Código 123 | }) -------------------------------------------------------------------------------- /Intermediate/12-dom-example.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | HTML de ejemplo 10 | 11 | 12 |

Mi título

13 | 14 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Intermediate/13-dom-example.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 69 - DOM 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=21754 4 | */ 5 | 6 | console.log(document) 7 | 8 | const myH1 = document.querySelector("h1") 9 | console.log(myH1) 10 | 11 | myH1.textContent = "Mi nuevo título" -------------------------------------------------------------------------------- /Intermediate/14-tasklist.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Lista de tareas 10 | 11 | 12 |

Mis tareas

13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Intermediate/15-tasklist.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 70 - DOM 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=22342 4 | */ 5 | 6 | const text = document.getElementById("text") 7 | const button = document.getElementById("button") 8 | const list = document.getElementById("list") 9 | 10 | function addTask() { 11 | 12 | if (text.value === "") return 13 | 14 | const newElement = document.createElement("li") 15 | newElement.textContent = text.value 16 | 17 | newElement.addEventListener("click", () => { 18 | newElement.remove() 19 | }) 20 | 21 | list.appendChild(newElement) 22 | 23 | text.value = "" 24 | } 25 | 26 | button.addEventListener("click", addTask) 27 | 28 | text.addEventListener("keypress", (event) => { 29 | if (event.key === "Enter") { 30 | addTask() 31 | } 32 | }) -------------------------------------------------------------------------------- /Intermediate/16-dom-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 71 - DOM 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=23010 4 | */ 5 | 6 | // 1. Crea un elemento (por ejemplo, un

) y cambia su contenido a "¡Hola Mundo!"" al cargar la página 7 | 8 | // 2. Inserta una imagen con id="myImage" y cambia su atributo src a otra URL 9 | 10 | // 3. Crea un
sin clases y agrega la clase resaltado cuando se cargue la página 11 | 12 | // 4. Crea un párrafo con id="paragraph" y cambia su color de texto a azul 13 | 14 | // 5. Agrega un botón que, al hacer clic, cree un nuevo elemento
  • con el texto "Nuevo elemento y lo agregue a una lista
      15 | 16 | // 6. Crea un párrafo con id="deleteParagraph" y un botón. Al hacer clic en el botón, elimina el párrafo del DOM 17 | 18 | // 7. Crea un
      con algún texto y reemplaza su contenido por un

      con el mensaje "Nuevo Contenido" 19 | 20 | // 8. Crea un botón con id="greetBtn" y añade un evento que muestre una alerta con el mensaje "¡Hola!" al hacer clic 21 | 22 | // 9. Crea un y un
      . Al escribir en el input, el
      se debe actualizarse mostrando lo que se escribe 23 | 24 | // 10. Crea un botón con id="backgroundBtn" y, al hacer clic, cambia el color de fondo del a un color diferente -------------------------------------------------------------------------------- /Intermediate/17-debugging.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 72 a 73 - Depuración 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=23085 4 | */ 5 | 6 | // Depuración 7 | 8 | // console.log() (básico) 9 | 10 | function sum(a, b) { 11 | console.log("a:", a) 12 | console.log("typeof a:", typeof a) 13 | console.log("b:", b) 14 | console.log("typeof b:", typeof b) 15 | return a + b 16 | } 17 | 18 | console.log(sum(3, "5")) 19 | 20 | // Depurador (profesional) 21 | 22 | function divide(a, b) { 23 | if (b === 0) { 24 | throw new Error("No se puede dividir por cero") 25 | } 26 | return a / b 27 | } 28 | 29 | // console.log(divide(5, 0)) Error -------------------------------------------------------------------------------- /Intermediate/18-debugging-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 74 - Depuración 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=24329 4 | */ 5 | 6 | // 1. Crea un código con un error lógico y usa VS Code para encontrarlo 7 | 8 | // 2. Experimenta con breakpoints y observa cómo cambia el flujo de ejecución 9 | -------------------------------------------------------------------------------- /Intermediate/19-regex.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 75 a 78 - Regex 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=24363 4 | */ 5 | 6 | // Expresiones regulares 7 | 8 | // - Sintaxis 9 | 10 | const regex = /abc/ 11 | const regex2 = RegExp("abc") 12 | const text = "Hola abc JavaScript" 13 | 14 | // test: verifica coincidencia con true o false 15 | 16 | console.log(regex.test(text)) 17 | console.log(regex2.test(text)) 18 | 19 | const text2 = "Mi edad es 37" 20 | const regex3 = /\d/g 21 | const regex4 = /[4-6]/ 22 | console.log(regex3.test(text2)) 23 | console.log(regex4.test(text2)) 24 | 25 | // replace: reemplaza el texto que coincide con el patrón 26 | 27 | const regex5 = /JavaScript/ 28 | console.log("Hola JavaScript".replace(regex5, "JS")) 29 | const text3 = "Estoy contando 1 2 3 4 5 6 7" 30 | console.log(text3.replace(regex3, "[número]")) 31 | 32 | // exec: retorna detalles de la coincidencia 33 | 34 | console.log(regex3.exec(text3)) 35 | 36 | while ((match = regex3.exec(text3)) !== null) { 37 | console.log(match) 38 | } -------------------------------------------------------------------------------- /Intermediate/20-regex-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 79 - Regex 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=25888 4 | */ 5 | 6 | // 1. Crea una RegEx que valide correos electrónicos 7 | 8 | // 2. Crea una RegEx obtenga Hashtags de un Texto 9 | 10 | // 3. Crea una RegEx que valide contraseñas seguras (mínimo 8 caracteres, al menos una letra y un número) 11 | 12 | // NOTA: Aplícalas utilizando diferentes operaciones -------------------------------------------------------------------------------- /Intermediate/21-testing.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 80 a 81 - Testing 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=25938 4 | */ 5 | 6 | // Testing 7 | 8 | // - Tipos de testing 9 | 10 | // Pruebas unitarias 11 | 12 | function sum(a, b) { 13 | return a + b 14 | } 15 | 16 | module.exports = sum 17 | 18 | console.log(sum(3, 5) === 8) 19 | 20 | // Pruebas de integración 21 | 22 | // Pruebas end-to-end (E2E) -------------------------------------------------------------------------------- /Intermediate/22-testing.test.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clases 80 a 81 - Testing 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=25938 4 | */ 5 | 6 | const sum = require('./21-testing') 7 | 8 | test("Suma de 3 + 5 tiene que ser 8", () => { 9 | expect(sum(3, 5)).toBe(8) 10 | }) 11 | 12 | test("Suma de 3 + 3 tiene que ser 6", () => { 13 | expect(sum(3, 4)).toBe(6) 14 | }) -------------------------------------------------------------------------------- /Intermediate/23-testing-exercises.js: -------------------------------------------------------------------------------- 1 | /* 2 | Clase 82 - Testing 3 | Vídeo: https://youtu.be/iJvLAZ8MJ2E?t=26946 4 | */ 5 | 6 | // 1. Crea una función isEven(number) que devuelva true si el número es par y false si es impar 7 | 8 | // 2. Escribe una prueba en Jest para verificar que la función funciona correctamente 9 | 10 | // 3. Verifica que la prueba se ejecuta satisfactoriamente -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hello JavaScript 2 | 3 | [![JavaScript](https://img.shields.io/badge/JavaScript-ES6+-yellow?style=for-the-badge&logo=javascript&logoColor=white&labelColor=101010)](https://developer.mozilla.org/es/docs/Web/JavaScript) [![NodeJS](https://img.shields.io/badge/NODEJS-v20+-green?style=for-the-badge&logo=nodedotjs&logoColor=white&labelColor=101010)](https://nodejs.org/) 4 | 5 | ## Curso para aprender el lenguaje de programación JavaScript desde cero y para principiantes 6 | 7 | ![](./Images/header.jpg) 8 | 9 | ### Proyecto realizado durante emisiones en directo desde [Twitch](https://twitch.tv/mouredev) 10 | > ##### Si consideras útil el curso, apóyalo haciendo "★ Star" en el repositorio. ¡Gracias! 11 | 12 | ## Clases en vídeo 13 | 14 | ### Curso de fundamentos desde cero 15 | 16 | 17 | 18 | * [Introducción](https://youtu.be/1glVfFxj8a4) 19 | * [1 - Contexto](https://youtu.be/1glVfFxj8a4?t=174) 20 | * [2 - Historia](https://youtu.be/1glVfFxj8a4?t=322) 21 | * [3 - JavaScript y Java](https://youtu.be/1glVfFxj8a4?t=665) 22 | * [4 - Utilización](https://youtu.be/1glVfFxj8a4?t=931) 23 | * [5 - Especificación ECMAScript](https://youtu.be/1glVfFxj8a4?t=1017) 24 | * [6 - Motor V8](https://youtu.be/1glVfFxj8a4?t=1293) 25 | * [7 - Referencia](https://youtu.be/1glVfFxj8a4?t=1403) 26 | * [8 - Ejercicios prácticos](https://youtu.be/1glVfFxj8a4?t=1621) 27 | * [9 - Versión](https://youtu.be/1glVfFxj8a4?t=1705) 28 | * [10 - Explorador web](https://youtu.be/1glVfFxj8a4?t=1768) 29 | * [11 - Playground](https://youtu.be/1glVfFxj8a4?t=1893) 30 | * [12 - Instalación](https://youtu.be/1glVfFxj8a4?t=1988) 31 | * [13 - Editor de código](https://youtu.be/1glVfFxj8a4?t=2256) 32 | * [14 - Buenas prácticas](https://youtu.be/1glVfFxj8a4?t=2311) 33 | * [15 - Hola mundo](https://youtu.be/1glVfFxj8a4?t=2390) | [Código](./Basic/00-helloworld.js) 34 | * [16 - Variables](https://youtu.be/1glVfFxj8a4?t=3049) | [Código](./Basic/01-variables.js) 35 | * [17 - Tipos de datos](https://youtu.be/1glVfFxj8a4?t=3599) | [Código](./Basic/02-datatypes.js) 36 | * [18 - Ejercicios: primeros pasos](https://youtu.be/1glVfFxj8a4?t=4733) | [Ejercicios](./Basic/03-beginner-exercises.js) 37 | * [19 - Operadores](https://youtu.be/1glVfFxj8a4?t=4937) | [Código](./Basic/04-operators.js) 38 | * [20 - Ejercicios: Operadores](https://youtu.be/1glVfFxj8a4?t=6458) | [Ejercicios](./Basic/05-operators-exercises.js) 39 | * [21 - Strings](https://youtu.be/1glVfFxj8a4?t=6565) | [Código](./Basic/06-strings.js) 40 | * [22 - Ejercicios: Strings](https://youtu.be/1glVfFxj8a4?t=7226) | [Ejercicios](./Basic/07-strings-exercises.js) 41 | * [23 - Condicionales](https://youtu.be/1glVfFxj8a4?t=7277) | [Código](./Basic/08-conditionals.js) 42 | * [24 - Ejercicios: Condicionales](https://youtu.be/1glVfFxj8a4?t=8652) | [Ejercicios](./Basic/09-conditionals-exercises.js) 43 | * [25 - Arrays](https://youtu.be/1glVfFxj8a4?t=8741) | [Código](./Basic/10-array.js) 44 | * [26 - Sets](https://youtu.be/1glVfFxj8a4?t=9952) | [Código](./Basic/11-set.js) 45 | * [27 - Maps](https://youtu.be/1glVfFxj8a4?t=10755) | [Código](./Basic/12-map.js) 46 | * [28 - Ejercicios: Estructuras](https://youtu.be/1glVfFxj8a4?t=11451) | [Ejercicios](./Basic/13-structures-exercises.js) 47 | * [29 - Bucles](https://youtu.be/1glVfFxj8a4?t=11575) | [Código](./Basic/14-loops.js) 48 | * [30 - Ejercicios: Bucles](https://youtu.be/1glVfFxj8a4?t=12732) | [Ejercicios](./Basic/15-loops-exercises.js) 49 | * [31 - Funciones](https://youtu.be/1glVfFxj8a4?t=12829) | [Código](./Basic/16-functions.js) 50 | * [32 - Ejercicios: Funciones](https://youtu.be/1glVfFxj8a4?t=14146) | [Ejercicios](./Basic/17-functions-exercises.js) 51 | * [33 - Objetos](https://youtu.be/1glVfFxj8a4?t=14229) | [Código](./Basic/18-objects.js) 52 | * [34 - Ejercicios: Objetos](https://youtu.be/1glVfFxj8a4?t=15675) | [Ejercicios](./Basic/19-objects-exercises.js) 53 | * [35 - Desestructuración y propagación](https://youtu.be/1glVfFxj8a4?t=15747) | [Código](./Basic/20-destructuring-spreading.js) 54 | * [36 - Ejercicios: Desestructuración y propagación](https://youtu.be/1glVfFxj8a4?t=16802) | [Ejercicios](./Basic/21-destructuring-spreading-exercises.js) 55 | * [37 - Clases](https://youtu.be/1glVfFxj8a4?t=16864) | [Código](./Basic/22-classes.js) 56 | * [38 - Herencia de clases](https://youtu.be/1glVfFxj8a4?t=17999) | [Código](./Basic/22-classes.js) 57 | * [39 - Ejercicios: Clases](https://youtu.be/1glVfFxj8a4?t=18630) | [Ejercicios](./Basic/23-classes-exercises.js) 58 | * [40 - Manejo de errores](https://youtu.be/1glVfFxj8a4?t=18751) | [Código](./Basic/24-error-handling.js) 59 | * [41 - Ejercicios: Manejo de errores](https://youtu.be/1glVfFxj8a4?t=20392) | [Ejercicios](./Basic/25-error-handling-exercises.js) 60 | * [42 - Console](https://youtu.be/1glVfFxj8a4?t=20444) | [Código](./Basic/26-console-methods.js) 61 | * [43 - Ejercicios: Console](https://youtu.be/1glVfFxj8a4?t=21421) | [Ejercicios](./Basic/27-console-methods-exercises.js) 62 | * [44 - Módulos](https://youtu.be/1glVfFxj8a4?t=21480) | [Código exportación](./Basic/28-export-modules.js) | [Código importación](./Basic/29-import-modules.js) | [Código externos](./Basic/30-import-external-modules.cjs) 63 | * [45 - Ejercicios: Módulos](https://youtu.be/1glVfFxj8a4?t=22720) | [Ejercicios](./Basic/31-modules-exercises.js) | [package.json](./Basic/package.json) 64 | * [Despedida](https://youtu.be/1glVfFxj8a4?t=22776) 65 | 66 | ### Curso de fundamentos intermedio (continuación del desde cero) 67 | 68 | 69 | 70 | * [Introducción](https://youtu.be/iJvLAZ8MJ2E) 71 | * [1 - Primeros pasos](https://youtu.be/iJvLAZ8MJ2E?t=279) 72 | 73 | Funciones avanzadas | [Código](./Intermediate/00-advanced-functions.js) 74 | 75 | * [2 - Ciudadanos de primera clase](https://youtu.be/iJvLAZ8MJ2E?t=346) 76 | * [3 - Arrow functions](https://youtu.be/iJvLAZ8MJ2E?t=782) 77 | * [4 - IIFE](https://youtu.be/iJvLAZ8MJ2E?t=1278) 78 | * [5 - Parámetros rest](https://youtu.be/iJvLAZ8MJ2E?t=1873) 79 | * [6 - Operador Spread](https://youtu.be/iJvLAZ8MJ2E?t=2126) 80 | * [7 - Closures](https://youtu.be/iJvLAZ8MJ2E?t=2356) 81 | * [8 - Recursividad](https://youtu.be/iJvLAZ8MJ2E?t=2650) 82 | * [9 - Funciones parciales](https://youtu.be/iJvLAZ8MJ2E?t=3013) 83 | * [10 - Currying](https://youtu.be/iJvLAZ8MJ2E?t=3473) 84 | * [11 - Callbacks](https://youtu.be/iJvLAZ8MJ2E?t=3675) 85 | * [12 - Ejercicios: Funciones avanzadas](https://youtu.be/iJvLAZ8MJ2E?t=4112) | [Ejercicios](./Intermediate/01-advanced-functions-exercises.js) 86 | 87 | Estructuras avanzadas | [Código](./Intermediate/02-advanced-structures.js) 88 | 89 | * [13 - Estructuras avanzadas](https://youtu.be/iJvLAZ8MJ2E?t=4355) 90 | * [14 - Arrays avanzados: métodos funcionales](https://youtu.be/iJvLAZ8MJ2E?t=4411) 91 | * [15 - Arrays avanzados: manipulación](https://youtu.be/iJvLAZ8MJ2E?t=5244) 92 | * [16 - Arrays avanzados: ordenación](https://youtu.be/iJvLAZ8MJ2E?t=5621) 93 | * [17 - Arrays avanzados: búsqueda](https://youtu.be/iJvLAZ8MJ2E?t=5979) 94 | * [18 - Sets avanzados: operaciones](https://youtu.be/iJvLAZ8MJ2E?t=6288) 95 | * [19 - Sets avanzados: conversión](https://youtu.be/iJvLAZ8MJ2E?t=6949) 96 | * [20 - Sets avanzados: iteración](https://youtu.be/iJvLAZ8MJ2E?t=6992) 97 | * [21 - Maps avanzados: iteración](https://youtu.be/iJvLAZ8MJ2E?t=7061) 98 | * [22 - Maps avanzados: conversión](https://youtu.be/iJvLAZ8MJ2E?t=7207) 99 | * [23 - Ejercicios: Estructuras avanzadas](https://youtu.be/iJvLAZ8MJ2E?t=7514) | [Ejercicios](./Intermediate/03-advanced-structures-exercises.js) 100 | 101 | Objetos y clases avanzados | [Código Objetos](./Intermediate/04-advanced-objects.js) | [Código Clases](./Intermediate/05-advanced-classes.js) 102 | 103 | * [24 - Objetos avanzados](https://youtu.be/iJvLAZ8MJ2E?t=7639) 104 | * [25 - Prototipos](https://youtu.be/iJvLAZ8MJ2E?t=7695) 105 | * [26 - Herencia](https://youtu.be/iJvLAZ8MJ2E?t=8068) 106 | * [27 - Métodos estáticos y de instancia](https://youtu.be/iJvLAZ8MJ2E?t=8577) 107 | * [28 - Métodos avanzados](https://youtu.be/iJvLAZ8MJ2E?t=8896) 108 | * [29 - Clases avanzadas](https://youtu.be/iJvLAZ8MJ2E?t=9096) 109 | * [30 - Abstracción](https://youtu.be/iJvLAZ8MJ2E?t=9408) 110 | * [31 - Polimorfismo](https://youtu.be/iJvLAZ8MJ2E?t=9694) 111 | * [32 - Mixins](https://youtu.be/iJvLAZ8MJ2E?t=9956) 112 | * [33 - Singleton](https://youtu.be/iJvLAZ8MJ2E?t=10454) 113 | * [34 - Symbol](https://youtu.be/iJvLAZ8MJ2E?t=10901) 114 | * [35 - instanceof](https://youtu.be/iJvLAZ8MJ2E?t=11264) 115 | * [36 - create](https://youtu.be/iJvLAZ8MJ2E?t=11331) 116 | * [37 - Proxy](https://youtu.be/iJvLAZ8MJ2E?t=11375) 117 | * [38 - Ejercicios: Objetos y clases avanzados](https://youtu.be/iJvLAZ8MJ2E?t=11832) | [Ejercicios](./Intermediate/06-advanced-objects-classes-exercises) 118 | 119 | Asincronía | [Código](./Intermediate/07-async.js) 120 | 121 | * [39 - Asincronía](https://youtu.be/iJvLAZ8MJ2E?t=11890) 122 | * [40 - Código síncrono](https://youtu.be/iJvLAZ8MJ2E?t=12245) 123 | * [41 - Event Loop](https://youtu.be/iJvLAZ8MJ2E?t=12366) 124 | * [42 - Callbacks](https://youtu.be/iJvLAZ8MJ2E?t=12729) 125 | * [43 - Promesas](https://youtu.be/iJvLAZ8MJ2E?t=13349) 126 | * [44 - Async/Await](https://youtu.be/iJvLAZ8MJ2E?t=14171) 127 | * [45 - Ejercicios: Asincronía](https://youtu.be/iJvLAZ8MJ2E?t=14558) | [Ejercicios](./Intermediate/08-async-exercises.js) 128 | 129 | APIs | [Código](./Intermediate/09-apis.js) 130 | 131 | * [46 - APIs](https://youtu.be/iJvLAZ8MJ2E?t=14777) 132 | * [47 - API REST](https://youtu.be/iJvLAZ8MJ2E?t=14973) 133 | * [48 - Métodos HTTP](https://youtu.be/iJvLAZ8MJ2E?t=15134) 134 | * [49 - Códigos de respuesta HTTP](https://youtu.be/iJvLAZ8MJ2E?t=15294) 135 | * [50 - GET](https://youtu.be/iJvLAZ8MJ2E?t=15477) 136 | * [51 - Async/Await en APIs](https://youtu.be/iJvLAZ8MJ2E?t=16400) 137 | * [52 - POST](https://youtu.be/iJvLAZ8MJ2E?t=16626) 138 | * [53 - Herramientas para realizar peticiones HTTP](https://youtu.be/iJvLAZ8MJ2E?t=17088) 139 | * [54 - Manejo de errores](https://youtu.be/iJvLAZ8MJ2E?t=17325) 140 | * [55 - Métodos HTTP adicionales](https://youtu.be/iJvLAZ8MJ2E?t=17619) 141 | * [56 - Autenticación mediante API Key](https://youtu.be/iJvLAZ8MJ2E?t=17770) 142 | * [57 - Otros métodos de autenticación y autorización](https://youtu.be/iJvLAZ8MJ2E?t=18244) 143 | * [58 - Versionado de APIs](https://youtu.be/iJvLAZ8MJ2E?t=18323) 144 | * [59 - Otras APIs](https://youtu.be/iJvLAZ8MJ2E?t=18441) 145 | * [60 - Ejercicios: APIs](https://youtu.be/iJvLAZ8MJ2E?t=18710) | [Ejercicios](./Intermediate/10-apis-exercises.js) 146 | 147 | DOM | [Código](./Intermediate/11-dom.js) 148 | 149 | * [61 - DOM](https://youtu.be/iJvLAZ8MJ2E?t=18822) 150 | * [62 - Estructura del DOM](https://youtu.be/iJvLAZ8MJ2E?t=19105) 151 | * [63 - Métodos de selección](https://youtu.be/iJvLAZ8MJ2E?t=19172) 152 | * [64 - Manipulación de elementos](https://youtu.be/iJvLAZ8MJ2E?t=19792) 153 | * [65 - Modificación de atributos](https://youtu.be/iJvLAZ8MJ2E?t=19996) 154 | * [66 - Interacción con clases CSS](https://youtu.be/iJvLAZ8MJ2E?t=20326) 155 | * [67 - Creación y eliminación de elementos](https://youtu.be/iJvLAZ8MJ2E?t=20787) 156 | * [68 - Elementos y eventos del DOM](https://youtu.be/iJvLAZ8MJ2E?t=21377) 157 | * [69 - Ejemplos: acceso al DOM](https://youtu.be/iJvLAZ8MJ2E?t=21754) | Ejemplo simple: [HTML](./Intermediate/12-dom-example.html) - [JS](./Intermediate/13-dom-example.js) 158 | * [70 - Ejemplos: lista de tareas](https://youtu.be/iJvLAZ8MJ2E?t=22342) Ejemplo lista de tareas: [HTML](./Intermediate/14-tasklist.html) - [JS](./Intermediate/15-tasklist.js) 159 | * [71 - Ejercicios: DOM](https://youtu.be/iJvLAZ8MJ2E?t=23010) | [Ejercicios](./Intermediate/16-dom-exercises.js) 160 | 161 | Depuración | [Código](./Intermediate/17-debugging.js) 162 | 163 | * [72 - Depuración](https://youtu.be/iJvLAZ8MJ2E?t=23085) 164 | * [73 - Depurador](https://youtu.be/iJvLAZ8MJ2E?t=23370) 165 | * [74 - Ejercicios: Depuración](https://youtu.be/iJvLAZ8MJ2E?t=24329) | [Ejercicios](./Intermediate/18-debugging-exercises.js) 166 | 167 | Regex | [Código](./Intermediate/19-regex.js) 168 | 169 | * [75 - Regex](https://youtu.be/iJvLAZ8MJ2E?t=24363) 170 | * [76 - Sintaxis: test](https://youtu.be/iJvLAZ8MJ2E?t=24444) 171 | * [77 - Sintaxis: replace](https://youtu.be/iJvLAZ8MJ2E?t=24989) 172 | * [78 - Sintaxis: exec](https://youtu.be/iJvLAZ8MJ2E?t=25365) 173 | * [79 - Ejercicios: Regex](https://youtu.be/iJvLAZ8MJ2E?t=25888) | [Ejercicios](./Intermediate/20-regex-exercises.js) 174 | 175 | Testing | [Código](./Intermediate/21-testing.js) | [Test](./Intermediate/22-testing.test.js) 176 | 177 | * [80 - Testing](https://youtu.be/iJvLAZ8MJ2E?t=25938) 178 | * [81 - Jest](https://youtu.be/iJvLAZ8MJ2E?t=26272) 179 | * [82 - Ejercicios: Testing](https://youtu.be/iJvLAZ8MJ2E?t=26946) | [Ejercicios](./Intermediate/23-testing-exercises.js) 180 | * [Despedida](https://youtu.be/iJvLAZ8MJ2E?t=26970) 181 | 182 | ## Enlaces de interés 183 | 184 | * Impacto: [Stack Overflow](https://survey.stackoverflow.co/2023/#most-popular-technologies-language) | [GitHub](https://github.blog/2023-11-08-the-state-of-open-source-and-ai/) | [Índice TIOBE](https://www.tiobe.com/tiobe-index/) | [Google Trends](https://trends.google.es/trends/explore?cat=5&date=today%205-y&q=%2Fm%2F02p97,%2Fm%2F05z1_,%2Fm%2F07sbkfb&hl=es) 185 | * [Historia](https://es.wikipedia.org/wiki/JavaScript) 186 | * [Especificación ECMAScript](https://tc39.es/ecma262/) 187 | * [Documentación Mozilla](https://developer.mozilla.org/es/docs/Web/JavaScript) 188 | * [Documentación W3Schools](https://www.w3schools.com/js/) 189 | * [Documentación JS Info](https://es.javascript.info/) 190 | * [Libro Eloquent JavaScript](https://eloquentjavascript.net/) 191 | * [Playground](https://runjs.app/play) 192 | * [Node.js](https://nodejs.org) 193 | * Exploradores: [Chrome](https://www.google.com/intl/es_es/chrome/) | [Brave](https://brave.com/download/) 194 | * [Visual Studio Code](https://code.visualstudio.com/) 195 | * [Guía de estilo](https://google.github.io/styleguide/jsguide.html) 196 | * Clientes HTTP: [Postman](https://postman.com) | [Apidog](https://apidog.com) | [Thunder Client](https://thunderclient.com) 197 | * APIs: [JSONPlaceholder](https://jsonplaceholder.typicode.com) | [OpenWeather](https://openweathermap.org) | [PokéAPI](https://pokeapi.co) 198 | * Expresiones regulares: [Documentación](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Regular_expressions/Cheatsheet 199 | ) | [Regex101](https://regex101.com/) 200 | * [Jest](https://jestjs.io/) 201 | 202 | ## Únete al campus de programación de la comunidad 203 | 204 | ![https://mouredev.pro](./Images/pro.jpg) 205 | 206 | #### Te presento [mouredev pro](https://mouredev.pro), mi proyecto más importante para ayudarte a estudiar programación y desarrollo de software de manera diferente. 207 | 208 | > **¿Buscas un extra?** Aquí encontrarás este y otros cursos editados por lecciones individuales, para avanzar a tu ritmo y guardar el progreso. También dispondrás de ejercicios y correcciones, test para validar tus conocimientos, examen y certificado público de finalización, soporte, foro de estudiantes, reunionnes grupales, cursos exclusivos y mucho más. 209 | > 210 | > Entra en **[mouredev.pro](https://mouredev.pro)** y utiliza el cupón **"JAVASCRIPT"** con un 15% de descuento en tu primera suscripción. 211 | 212 | ## Preguntas frecuentes 213 | 214 | #### ¿Debo tener conocimientos previos? 215 | Mi idea es que el curso sea desde cero y para principiantes. Pensado para una persona que comienza por primera vez a programar. Es un curso de fundamentos, donde nos centraremos en aprender las bases del lenguaje con JavaScript puro (Vanilla JS). Esto no es un curso para aprender a desarrollar proyectos. Vamos a empezar desde el principio. 216 | 217 | Si la acogida de la comunidad es buena, seguiré creando cursos más avanzados. 218 | 219 | #### ¿Este curso se va a subir a YouTube? 220 | 221 | Sí, una vez finalizados, todos los cursos son editados y subidos en bloque a YouTube. 222 | 223 | #### ¿Existe algún lugar donde consultar dudas? 224 | He creado un canal llamado "JavaScript" en el [servidor de Discord](https://discord.gg/mouredev) de la comunidad. Allí puedes consultar dudas y ayudar al resto de miembros. Así nos beneficiamos tod@s. 225 | 226 | #### ¿Cómo puedo practicar? 227 | En cada lección encontrarás ejercicios para poner en práctica lo aprendido. También puedes realizar los ejercicios de mi web [retosdeprogramacion.com](https://retosdeprogramacion.com). 228 | 229 | ## ![https://mouredev.com](https://raw.githubusercontent.com/mouredev/mouredev/master/mouredev_emote.png) Hola, mi nombre es Brais Moure. 230 | ### Freelance full-stack iOS & Android engineer 231 | 232 | [![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UCxPD7bsocoAMq8Dj18kmGyQ?style=social)](https://youtube.com/mouredevapps?sub_confirmation=1) 233 | [![Twitch Status](https://img.shields.io/twitch/status/mouredev?style=social)](https://twitch.com/mouredev) 234 | [![Discord](https://img.shields.io/discord/729672926432985098?style=social&label=Discord&logo=discord)](https://mouredev.com/discord) 235 | [![Twitter Follow](https://img.shields.io/twitter/follow/mouredev?style=social)](https://twitter.com/mouredev) 236 | ![GitHub Followers](https://img.shields.io/github/followers/mouredev?style=social) 237 | ![GitHub Followers](https://img.shields.io/github/stars/mouredev?style=social) 238 | 239 | Soy ingeniero de software desde 2010. Desde 2018 combino mi trabajo desarrollando Apps con la creación de contenido formativo sobre programación y tecnología en diferentes redes sociales como **[@mouredev](https://moure.dev)**. 240 | 241 | Si quieres unirte a nuestra comunidad de desarrollo, aprender programación, mejorar tus habilidades y ayudar a la continuidad del proyecto, puedes encontrarnos en: 242 | 243 | [![Twitch](https://img.shields.io/badge/Twitch-Programación_en_directo-9146FF?style=for-the-badge&logo=twitch&logoColor=white&labelColor=101010)](https://twitch.tv/mouredev) 244 | [![Discord](https://img.shields.io/badge/Discord-Servidor_de_la_comunidad-5865F2?style=for-the-badge&logo=discord&logoColor=white&labelColor=101010)](https://mouredev.com/discord) [![Pro](https://img.shields.io/badge/Cursos-mouredev.pro-FF5500?style=for-the-badge&logo=gnometerminal&logoColor=white&labelColor=101010)](https://mouredev.pro) 245 | [![Link](https://img.shields.io/badge/Links_de_interés-moure.dev-14a1f0?style=for-the-badge&logo=Linktree&logoColor=white&labelColor=101010)](https://moure.dev) [![Web](https://img.shields.io/badge/GitHub-MoureDev-087ec4?style=for-the-badge&logo=github&logoColor=white&labelColor=101010)](https://github.com/mouredev) 246 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello_javascript", 3 | "version": "1.0.0", 4 | "description": "[![JavaScript](https://img.shields.io/badge/JavaScript-ES6+-yellow?style=for-the-badge&logo=javascript&logoColor=white&labelColor=101010)](https://developer.mozilla.org/es/docs/Web/JavaScript) [![NodeJS](https://img.shields.io/badge/NODEJS-v20+-green?style=for-the-badge&logo=nodedotjs&logoColor=white&labelColor=101010)](https://nodejs.org/)", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "jest" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "jest": "^29.7.0" 14 | } 15 | } --------------------------------------------------------------------------------