├── Clase 10 ├── index.html └── scripts.js ├── Clase 11 ├── index.html └── scripts.js ├── Clase 12 ├── index.html └── scripts.js ├── Clase 13 ├── index.html └── scripts.js ├── Clase 14 ├── ejercicios.md └── scripts.js ├── Clase 15-16 ├── Ejercicio 1 │ ├── index.html │ └── scripts.js ├── Ejercicio 10 │ ├── index.html │ └── scripts.js ├── Ejercicio 2 │ ├── index.html │ └── scripts.js ├── Ejercicio 3 │ ├── index.html │ └── scripts.js ├── Ejercicio 4 │ ├── index.html │ └── scripts.js ├── Ejercicio 5 │ ├── index.html │ └── scripts.js ├── Ejercicio 6 │ ├── index.html │ └── scripts.js ├── Ejercicio 7 │ ├── index.html │ └── scripts.js ├── Ejercicio 8 │ ├── index.html │ └── scripts.js ├── Ejercicio 9 │ ├── index.html │ └── scripts.js ├── ejercicios.md └── scripts.js ├── Clase 17 ├── index.html └── scripts.js ├── Clase 18 ├── index.html └── scripts.js ├── Clase 19 ├── index.html └── scripts.js ├── Clase 20 ├── index.html └── scripts.js ├── Clase 21 ├── index.html └── scripts.js ├── Clase 22 ├── index.html └── scripts.js ├── Clase 23 ├── index.html └── scripts.js ├── Clase 24 ├── index.html └── scripts.js ├── Clase 25 ├── index.html └── scripts.js ├── Clase 26 ├── index.html ├── scripts.js └── styles.css ├── Clase 27 ├── index.html ├── scripts.js └── styles.css ├── Clase 28 ├── index.html └── scripts.js ├── Clase 29 ├── index.html └── scripts.js ├── Clase 30 ├── index.html └── scripts.js ├── Clase 31 ├── index.html └── scripts.js ├── Clase 32 ├── index.html └── scripts.js ├── Clase 33 ├── index.html ├── marvel.php ├── marvel.sql ├── scripts.js └── styles.css ├── Clase 34 ├── index.html ├── marvel.php ├── marvel.sql ├── scripts.js └── styles.css ├── Clase 35 ├── index.html └── scripts.js ├── Clase 36 ├── index.html └── scripts.js ├── Clase 37 ├── index.html └── scripts.js ├── Clase 38 ├── index.html └── scripts.js ├── Clase 39 ├── demo.pdf ├── dog.jpg ├── index.html ├── scripts.js └── styles.css ├── Clase 4 ├── index.html └── scripts.js ├── Clase 40 ├── index.html └── scripts.js ├── Clase 41 ├── index.html └── scripts.js ├── Clase 42 ├── index.html └── scripts.js ├── Clase 43 ├── index.html ├── scripts.js └── styles.css ├── Clase 44-45-46-47 ├── index.html └── scripts.js ├── Clase 48 ├── index.html └── validate.js ├── Clase 49 ├── index.html ├── scripts.js └── styles.css ├── Clase 5 ├── index.html └── scripts.js ├── Clase 50 ├── index.html ├── scripts.js ├── smile.svg └── styles.css ├── Clase 51 ├── index.html ├── scripts.js └── styles.css ├── Clase 52 ├── index.html ├── scripts.js └── styles.css ├── Clase 53 ├── index.html ├── scripts.js └── styles.css ├── Clase 54 ├── index.html ├── scripts.js └── styles.css ├── Clase 55 ├── index.html ├── scripts.js └── styles.css ├── Clase 56 ├── index.html ├── scripts.js └── styles.css ├── Clase 57 ├── index.html ├── scripts.js └── styles.css ├── Clase 58 ├── index.html ├── scripts.js └── styles.css ├── Clase 59 ├── index.html ├── scripts.js └── styles.css ├── Clase 6 ├── index.html └── scripts.js ├── Clase 60 ├── index.html ├── scripts.js ├── styles.css └── video.mp4 ├── Clase 61 ├── index.html ├── scripts.js └── styles.css ├── Clase 62 ├── index.html ├── scripts.js ├── styles.css └── world.png ├── Clase 63 ├── index.html ├── scripts.js └── styles.css ├── Clase 64 ├── index.html ├── scripts.js └── styles.css ├── Clase 65 ├── index.html ├── scripts.js └── styles.css ├── Clase 66 ├── index.html ├── scripts.js └── styles.css ├── Clase 67 ├── index.html └── scripts.js ├── Clase 68 ├── index.html └── scripts.js ├── Clase 7 ├── index.html └── scripts.js ├── Clase 8 ├── index.html └── scripts.js ├── Clase 9 ├── index.html └── scripts.js ├── clase 3 ├── index.html └── scripts.js └── clase69 ├── .babelrc ├── .gitignore ├── dev └── js │ └── scripts.js ├── gulpfile.babel.js ├── package-lock.json ├── package.json └── public └── js └── scripts-min.js /Clase 10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Arrays - Propiedades y métodos 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 10/scripts.js: -------------------------------------------------------------------------------- 1 | 2 | let numbers = [1,2,3,4,5,1]; 3 | 4 | /* 5 | Arrays - Propiedad 6 | .length - devuelve el número de posiciones que contiene el array 7 | */ 8 | 9 | //console.log(numbers.length); 10 | 11 | /* 12 | Arrays - Métodos 13 | Array.isArray(variable a evaluar) - Devuelve true si la variable es un array. 14 | */ 15 | 16 | //let number = 4; 17 | //console.log(Array.isArray(number)); 18 | //console.log(Array.isArray(numbers)); 19 | 20 | /* 21 | Eliminar un elemento 22 | .shift() - Elimina el primer elemento del array y devuelve ese elemento 23 | .pop() - Elimina el último elemento de un array y devuelve ese elemento 24 | */ 25 | 26 | //console.log(numbers); 27 | //let deleteElement = numbers.shift(); 28 | //console.log(numbers); 29 | //console.log(deleteElement); 30 | //console.log(numbers); 31 | //numbers.pop(); 32 | //console.log(numbers); 33 | 34 | /* 35 | Añadir elementos 36 | .push(element1, element2,...) - Añade uno o más elementos al final del array y devuelve la nueva longitud. 37 | 38 | .unshift(element1, element2,...) - Añade uno o más elementos al comienzo del array y devuelve la nueva longitud. 39 | */ 40 | 41 | //console.log(numbers); 42 | //let newLength = numbers.push(6); 43 | //console.log(numbers); 44 | //console.log(newLength); 45 | //let newLength2 = numbers.unshift(0); 46 | //console.log(numbers); 47 | 48 | /* 49 | .indexOf() - Devuelve el primer índice del elemento que coincida con el valor especificado, o -1 si ninguno es encontrado. 50 | */ 51 | 52 | //console.log(numbers); 53 | //console.log(numbers.indexOf(1)); 54 | 55 | /* 56 | .lastIndexOf() - Devuelve el último índice del elemento que coincida con el valor especificado, o -1 si ninguno es encontrado. 57 | */ 58 | 59 | //console.log(numbers); 60 | //console.log(numbers.lastIndexOf(1)); 61 | 62 | /* 63 | .reverse() - Invierte el orden de los elementos del array. 64 | */ 65 | 66 | //console.log(numbers); 67 | //numbers.reverse(); 68 | //console.log(numbers); 69 | 70 | /* 71 | .join('separador') - Devuelve un string con el separador que indiquemos, por defecto son comas 72 | */ 73 | 74 | //console.log(numbers); 75 | //let arrayString = numbers.join(' ') 76 | //console.log(arrayString); 77 | //console.log(numbers.join('-')); 78 | 79 | /* 80 | .splice(a,b,items) - Cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos. 81 | a - Indice de inicio 82 | b - Número de elementos (opcional) 83 | items - Elementos a añadir en el caso de que se añadan. (opcional) 84 | */ 85 | 86 | //console.log(numbers); 87 | //numbers.splice(3) - Elimina desde la posicion a hasta el final 88 | //numbers.splice(2,2) - Elimina desde la posicion a el número valores que le indiquemos 89 | //numbers.splice(2,2,10,23,54) - Si b es un valor distinto de 0 elimina el número de valores que indiquemos en b y añade los valores de items a partir de la posicion a 90 | //numbers.splice(4,0,10,23,54) - Si b vale 0 añade los elementos a partir de la posicion a y no elimina ninguno 91 | //console.log(numbers); 92 | 93 | /* 94 | .slice(a,b) - Extrae elementos de un array desde el índice a hasta el índice b. Si no existe b lo hace desde a hasta el final, si no existe ni a ni b hace una copia del original. 95 | */ 96 | 97 | //let newNumbers = numbers.slice(); 98 | //console.log(numbers); 99 | //console.log(newNumbers); 100 | 101 | //let newNumbers = numbers.slice(2); 102 | //console.log(numbers); 103 | //console.log(newNumbers); 104 | 105 | //let newNumbers = numbers.slice(2,4); 106 | //console.log(numbers); 107 | //console.log(newNumbers); -------------------------------------------------------------------------------- /Clase 11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bucles I - Bucle while & do...while 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Clase 11/scripts.js: -------------------------------------------------------------------------------- 1 | /* Bucles */ 2 | 3 | /* 4 | Indeterminados - No sabemos el número de veces que se va a ejecutar el código 5 | 6 | Bucle while 7 | while(condición){ 8 | //código a ejecutar 9 | } 10 | 11 | Bucle do...while 12 | do{ 13 | //código a ejecutar 14 | }while(condición) 15 | */ 16 | 17 | let pass = 'hola'; 18 | 19 | while(pass != 'hola'){ 20 | pass = prompt('Introduzca su contraseña') 21 | } 22 | 23 | console.log('Fin del bucle'); 24 | 25 | do{ 26 | pass = prompt('Introduzca su contraseña') 27 | 28 | }while(pass != 'hola') 29 | 30 | -------------------------------------------------------------------------------- /Clase 12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bucles II - Bucle for 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 12/scripts.js: -------------------------------------------------------------------------------- 1 | /* Bucles */ 2 | 3 | /* 4 | Determinados 5 | 6 | bucle for 7 | 8 | Su sintaxis se compone de 3 partes 9 | Iniciación de variable 10 | Número de vueltas 11 | Incremento o decremento 12 | 13 | for(let i=0;i<=10;i++){ 14 | Código a ejecutar 15 | } 16 | */ 17 | 18 | let numbers = [56,14,23,37,41,59] 19 | 20 | for(let i=0;i<=numbers.length;i++){ 21 | console.log(`i vale ${i} y el valor de esa posición en el array es ${numbers[i]}`); 22 | } 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Clase 13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bucles III - Bucle for of y for in 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 13/scripts.js: -------------------------------------------------------------------------------- 1 | /* Bucles */ 2 | 3 | /* 4 | Determinados 5 | 6 | bucle for of / for in 7 | 8 | for(let variable of estructura){ 9 | Código a ejecutar 10 | } 11 | 12 | Palabras reservadas de bucles 13 | 14 | break - Rompe el bucle 15 | continue - Se salta la(s) posicion(es) que le indequemos y después continúa su ejecución 16 | */ 17 | 18 | let names = ['Paco', 'José', 'Paula', 'María'] 19 | 20 | for (let i = 0; i < names.length; i++){ 21 | if(names[i]==='Paula'){ 22 | continue 23 | } 24 | console.log(names[i]); 25 | } 26 | 27 | for(let name of names){ 28 | if(name==='Paula'){ 29 | continue 30 | } 31 | console.log(name); 32 | } 33 | 34 | for(let index in names){ 35 | if(names[index]==='Paula'){ 36 | continue 37 | } 38 | console.log(index); 39 | } -------------------------------------------------------------------------------- /Clase 14/ejercicios.md: -------------------------------------------------------------------------------- 1 | 1 - Solicita un nombre, la edad y muestra por consola el mensaje "Hola ____, tienes ____ años y el año que viene tendrás ____ años" 2 | Realiza el ejercicio con prompt(mensaje) y haz uso de los template strings 3 | 4 | 2 - Escribe un programa que pueda calcular el área de 3 figuras geométricas, triángulo, rectángulo y círculo. En primer lugar pregunta de qué figura se quiere calcular el área, después solicita los datos que necesites para calcularlo. 5 | triángulo = b * h/2 6 | rectángulo = b * h 7 | círculo = π * r2 (pi * radio al cuadrado) 8 | 9 | 3 - Solicita un número e imprime todos los números pares e impares desde 1 hasta ese número con el mensaje "es par" o "es impar" 10 | si el número es 5 el resultado será: 11 | 1 - es impar 12 | 2 - es par 13 | 3 - es impar 14 | 4 - es par 15 | 5 - es impar 16 | 17 | 4 - Escribe un programa que pida un número entero mayor que 1 y que escriba si el número primo o no. 18 | Un número primo es aquel que solo es divisible por sí mismo y la unidad 19 | 20 | 5 - Escriba un programa que pida un número entero mayor que cero y calcule su factorial. 21 | El factorial es el resultado de multiplicar ese número por sus anteriores hasta la unidad. 22 | 23 | !5 = 5*4*3*2*1 = 120 24 | 25 | 6 - Escribe un programa que permita ir introduciendo una serie indeterminadade números mientras su suma no supere 50. Cuando esto ocurra, se debe mostrar el total acumulado y el contador de cuantos números se han introducido 26 | 27 | 7 - Crea 3 arrays. El primero tendra 5 números y el segundo se llamará pares y el tercero impares, ambos estarán vacíos. Después multiplica cada uno de los números del primer array por un número aleatorio entre 1 y 10, si el resultado es par guarda ese número en el array de pares y si es impar en el array de impares. Muestra por consola: 28 | -la multiplicación que se produce junto con su resultado con el formato 2 x 3 = 6 29 | -el array de pares e impares 30 | 31 | 8 - Dado un array de letras, solicita un número de DNI y calcula que letra le corresponde. El número no puede ser negativo ni tener más de 8 dígitos. La posición de la letra es el resultado del módulo del número introducido entre 23 32 | 33 | const letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T']; 34 | 35 | 9 - Solicitar al usuario una palabra y mostrar por consola el número de consonantes, vocales y longitud de la palabra. 36 | 37 | 10 - Dado un array que contiene ["azul", "amarillo", "rojo", "verde", "rosa"] determinar si un color introducido por el usuario a través de un prompt se encuentra dentro del array o no. -------------------------------------------------------------------------------- /Clase 14/scripts.js: -------------------------------------------------------------------------------- 1 | /* Para pedir un dato al usuario se puede usar prompt(mensaje) */ 2 | 3 | prompt('Introduzca su nombre') 4 | 5 | /* Para imprimir un dato se puede usar console.log(dato) */ 6 | 7 | console.log(dato); 8 | 9 | -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ejercicio 1 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 1/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | 1 - Solicita un nombre, la edad y muestra por consola el mensaje "Hola ____, tienes ____ años y el año que viene tendrás ____ años" 3 | Realiza el ejercicio con prompt(mensaje) y haz uso de los template strings 4 | */ 5 | 6 | let name = prompt('Introduce tu nombre') 7 | let age = parseInt(prompt('Introduce tu edad')) 8 | 9 | console.log(`Hola ${name} tienes ${age} años y el año que viene tendrás ${age+1} años`); -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ejercicio 10 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 10/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | 10 - Dado un array que contiene ["azul", "amarillo", "rojo", "verde", "rosa"] determinar si un color introducido por el usuario a través de un prompt se encuentra dentro del array o no. 3 | */ 4 | 5 | const colors = ["azul", "amarillo", "rojo", "verde", "rosa"] 6 | 7 | const color = prompt('Introduce un color').toLowerCase() 8 | 9 | if(colors.indexOf(color) !== -1){ 10 | console.log('Tu color se encuentra en el array'); 11 | }else{ 12 | console.log('Tu color no está definido'); 13 | } -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ejercicio 2 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 2/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | 2 - Escribe un programa que pueda calcular el área de 3 figuras geométricas, triángulo, rectángulo y círculo. En primer lugar pregunta de qué figura se quiere calcular el área, después solicita los datos que necesites para calcularlo. 3 | triángulo = b * h/2 4 | rectángulo = b * h 5 | círculo = π * r2 (pi * radio al cuadrado) 6 | */ 7 | 8 | let figure = prompt('Introduce la figura geómetrica de la que quieres calcular el área: triangle, rectangle or circle') 9 | 10 | let base; 11 | let height; 12 | let radius; 13 | 14 | switch(figure){ 15 | case 'triangle': 16 | base=prompt('Introduce la base del triángulo') 17 | height=prompt('Introduce la altura del triángulo') 18 | console.log(`El área del triángulo es ${(base*height)/2}`); 19 | break 20 | case 'rectangle': 21 | base=prompt('Introduce la base del rectángulo') 22 | height=prompt('Introduce la altura del rectángulo') 23 | console.log(`El área del rectángulo es ${base*height}`); 24 | break 25 | case 'circle': 26 | radius=prompt('Introduce el radio del círculo') 27 | console.log(`El área del círculo es ${Math.PI * Math.pow(radius,2)}`); 28 | break 29 | default: console.log('La figura geométrica no es válida'); 30 | } -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ejercicio 3 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 3/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 - Solicita un número e imprime todos los números pares e impares desde 1 hasta ese número con el mensaje "es par" o "es impar" 3 | si el número es 5 el resultado será: 4 | 1 - es impar 5 | 2 - es par 6 | 3 - es impar 7 | 4 - es par 8 | 5 - es impar 9 | */ 10 | 11 | let num = parseInt(prompt('Introduce un número')) 12 | 13 | for(let i=1; i<=num; i++){ 14 | if(i%2==0){ 15 | console.log(`${i} - es par`); 16 | }else{ 17 | console.log(`${i} - es impar`); 18 | } 19 | } -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ejercicio 4 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 4/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | 4 - Escribe un programa que pida un número entero mayor que 1 y que escriba si el número primo o no. 3 | Un número primo es aquel que solo es divisible por sí mismo y la unidad 4 | */ 5 | 6 | let num = parseInt(prompt('Introduce un número')) 7 | let divisores = 0 8 | 9 | if (num === 1) console.log('El número no es válido') 10 | else { 11 | 12 | for (let i = 2; i < num; i++) { 13 | if (num % i == 0) { 14 | console.log(`${num} / ${i} = ${num / i} No es primo`) 15 | divisores++ 16 | break 17 | } 18 | } 19 | } 20 | 21 | if(divisores==0) console.log(`${num} es primo`); -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ejercicio 5 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 5/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | 5 - Escriba un programa que pida un número entero mayor que cero y calcule su factorial. 3 | El factorial es el resultado de multiplicar ese número por sus anteriores hasta la unidad. 4 | 5 | !5 = 5*4*3*2*1 = 120 6 | */ 7 | 8 | let num = parseInt(prompt('Introduce un número')) 9 | let result=1 10 | 11 | for(let i = num; i>1; i--){ 12 | result *= i 13 | } 14 | 15 | console.log(`El factorial de ${num} es ${result}`) -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ejercicio 6 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 6/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | 6 - Escribe un programa que permita ir introduciendo una serie indeterminada de números mientras su suma no supere 50. Cuando esto ocurra, se debe mostrar el total acumulado y el contador de cuantos números se han introducido 3 | */ 4 | 5 | let suma=0 6 | let cont=0 7 | 8 | while(suma<=50){ 9 | suma += parseInt(prompt('Introduce un número para añadir a la suma')) 10 | cont++ 11 | } 12 | 13 | console.log(`La suma total es de: ${suma}`); 14 | console.log(`El total de números introducidos es: ${cont}`); -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ejercicio 7 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 7/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | 7 - Crea 3 arrays. El primero tendrá 5 números y el segundo se llamará pares y el tercero impares, ambos estarán vacíos. Después multiplica cada uno de los números del primer array por un número aleatorio entre 1 y 10, si el resultado es par guarda ese número en el array de pares y si es impar en el array de impares. Muestra por consola: 3 | -la multiplicación que se produce junto con su resultado con el formato 2 x 3 = 6 4 | -el array de pares e impares 5 | */ 6 | 7 | const numbers = [3,43,21,20,56] 8 | let pares = [] 9 | let impares = [] 10 | 11 | for(const number of numbers){ 12 | let random = Math.round(Math.random() * 10 + 1) 13 | const result = number * random 14 | 15 | console.log(`${number} x ${random} = ${result}`); 16 | if(result % 2 == 0){ 17 | pares.push(result) 18 | }else{ 19 | impares.push(result) 20 | } 21 | } 22 | 23 | console.log(pares); 24 | console.log(impares); -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ejercicio 8 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 8/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | 8 - Dado un array de letras, solicita un número de DNI y calcula que letra le corresponde. El número no puede ser negativo ni tener más de 8 dígitos. La posición de la letra es el resultado del módulo del número introducido entre 23 3 | */ 4 | 5 | const letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'] 6 | 7 | const dni = prompt('Introduce tu DNI') 8 | 9 | if(dni.length==8 && parseInt(dni)>0){ 10 | let letra = dni%23 11 | console.log(`Tu DNI completo es ${dni}${letras[letra]}`); 12 | } 13 | 14 | -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ejercicio 9 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 15-16/Ejercicio 9/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | 9 - Solicitar al usuario una palabra y mostrar por consola el número de consonantes, vocales y longitud de la palabra. 3 | */ 4 | 5 | const palabra = prompt('Introduce una palabra').toLowerCase() 6 | 7 | let consonantes=0 8 | let vocales = 0 9 | 10 | for(const letra of palabra){ 11 | if(letra == 'a' || letra == 'e' || letra == 'i' || letra == 'o' || letra == 'u') vocales++ 12 | else consonantes++ 13 | } 14 | 15 | console.log(`Tu palabra tiene ${vocales} vocales, ${consonantes} consonantes y tiene un total de ${palabra.length} letras.`); -------------------------------------------------------------------------------- /Clase 15-16/ejercicios.md: -------------------------------------------------------------------------------- 1 | 1 - Solicita un nombre, la edad y muestra por consola el mensaje "Hola ____, tienes ____ años y el año que viene tendrás ____ años" 2 | Realiza el ejercicio con prompt(mensaje) y haz uso de los template strings 3 | 4 | 2 - Escribe un programa que pueda calcular el área de 3 figuras geométricas, triángulo, rectángulo y círculo. En primer lugar pregunta de qué figura se quiere calcular el área, después solicita los datos que necesites para calcularlo. 5 | triángulo = b * h/2 6 | rectángulo = b * h 7 | círculo = π * r2 (pi * radio al cuadrado) 8 | 9 | 3 - Solicita un número e imprime todos los números pares e impares desde 1 hasta ese número con el mensaje "es par" o "es impar" 10 | si el número es 5 el resultado será: 11 | 1 - es impar 12 | 2 - es par 13 | 3 - es impar 14 | 4 - es par 15 | 5 - es impar 16 | 17 | 4 - Escribe un programa que pida un número entero mayor que 1 y que escriba si el número primo o no. 18 | Un número primo es aquel que solo es divisible por sí mismo y la unidad 19 | 20 | 5 - Escriba un programa que pida un número entero mayor que cero y calcule su factorial. 21 | El factorial es el resultado de multiplicar ese número por sus anteriores hasta la unidad. 22 | 23 | !5 = 5*4*3*2*1 = 120 24 | 25 | 6 - Escribe un programa que permita ir introduciendo una serie indeterminadade números mientras su suma no supere 50. Cuando esto ocurra, se debe mostrar el total acumulado y el contador de cuantos números se han introducido 26 | 27 | 7 - Crea 3 arrays. El primero tendra 5 números y el segundo se llamará pares y el tercero impares, ambos estarán vacíos. Después multiplica cada uno de los números del primer array por un número aleatorio entre 1 y 10, si el resultado es par guarda ese número en el array de pares y si es impar en el array de impares. Muestra por consola: 28 | -la multiplicación que se produce junto con su resultado con el formato 2 x 3 = 6 29 | -el array de pares e impares 30 | 31 | 8 - Dado un array de letras, solicita un número de DNI y calcula que letra le corresponde. El número no puede ser negativo ni tener más de 8 dígitos. La posición de la letra es el resultado del módulo del número introducido entre 23 32 | 33 | const letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T']; 34 | 35 | 9 - Solicitar al usuario una palabra y mostrar por consola el número de consonantes, vocales y longitud de la palabra. 36 | 37 | 10 - Dado un array que contiene ["azul", "amarillo", "rojo", "verde", "rosa"] determinar si un color introducido por el usuario a través de un prompt se encuentra dentro del array o no. -------------------------------------------------------------------------------- /Clase 15-16/scripts.js: -------------------------------------------------------------------------------- 1 | /* Para pedir un dato al usuario se puede usar prompt(mensaje) */ 2 | 3 | prompt('Introduzca su nombre') 4 | 5 | /* Para imprimir un dato se puede usar console.log(dato) */ 6 | 7 | console.log(dato); 8 | 9 | -------------------------------------------------------------------------------- /Clase 17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Objetos - Introducción 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 17/scripts.js: -------------------------------------------------------------------------------- 1 | const person = { 2 | name: 'Juan', 3 | age: 26, 4 | sons: ['Laura', 'Diego', 'Pepe', 'Rosa', 'Tomás'] 5 | } 6 | 7 | /* console.log(person.name); 8 | console.log(person['name']); */ 9 | 10 | /* for(const key in person){ 11 | console.log(key); 12 | } 13 | 14 | for(const key in person){ 15 | console.log(person[key]); 16 | } */ 17 | 18 | /* for(const son of person.sons){ 19 | console.log(son); 20 | } */ 21 | 22 | console.log(`Hola ${person.name}. Tienes ${person.age} años y tus hijos se llaman ${person.sons.join(', ')}`); -------------------------------------------------------------------------------- /Clase 18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Funciones - Introducción 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 18/scripts.js: -------------------------------------------------------------------------------- 1 | /* function saludar(){ 2 | console.log("Hola"); 3 | } */ 4 | 5 | /* const saludar = () => console.log("Hola"); 6 | const saludarUsuario = (user) => console.log(`Hola ${user}`); 7 | 8 | saludarUsuario('Pepe') 9 | saludarUsuario('Marta') */ 10 | 11 | /* const suma = (num1, num2) => { 12 | if(num1 == 2){ 13 | return num1+num2 14 | } 15 | console.log("Esto no se va a ejecutar si entra en el if"); 16 | return num1 17 | } 18 | console.log(suma(7,3)); */ 19 | 20 | const suma = (num1, num2) => num1+num2 21 | 22 | let result = suma(3,6) 23 | 24 | console.log(result); -------------------------------------------------------------------------------- /Clase 19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Programación Orientada a Objetos - POO 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 19/scripts.js: -------------------------------------------------------------------------------- 1 | class Persona{ 2 | constructor(nombre, apellido, edad){ 3 | this.nombre = nombre 4 | this.apellido = apellido 5 | this.edad = edad 6 | 7 | this.datos = `Me llamo ${nombre} ${apellido} y tengo ${edad} años` 8 | } 9 | 10 | saludar(){ 11 | return `Hola, me llamo ${this.nombre} y tengo ${this.edad} años.` 12 | } 13 | } 14 | 15 | const juan = new Persona('Juan', 'García', 25) 16 | const marta = new Persona('Marta', 'García', 35) 17 | 18 | console.log(juan); 19 | 20 | console.log(juan.saludar()); 21 | console.log(marta.saludar()); -------------------------------------------------------------------------------- /Clase 20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ejercicio repaso clases y objetos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Clase 20/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Crea una clase Libro 3 | La clase libro tendrá título, autor, año y género. 4 | Crea un método que devuelva toda la información del libro 5 | Pide 3 libros y guárdalos en un array 6 | Los libros se introducirán al arrancar el programa pidiendo los datos con prompt. 7 | Validar que los campos no se introduzcan vacíos 8 | Validar que el año sea un número y que tenga 4 dígitos 9 | Validar que el género sea: aventuras, terror o fantasía 10 | Crea una función que muestre todos los libros 11 | Crea una función que muestre los autores ordenados alfabéticamente 12 | Crea una función que pida un género y muestre la información de los libros que pertenezcan a ese género usando un el método que devuelve la información 13 | */ 14 | 15 | class Book { 16 | constructor(title, author, year, gender) { 17 | this.title = title 18 | this.author = author 19 | this.year = year 20 | this.gender = gender 21 | } 22 | 23 | getAuthor() { 24 | return this.author 25 | } 26 | 27 | getGender() { 28 | return this.gender 29 | } 30 | 31 | bookInfo() { 32 | return `${this.title} es un libro de ${this.gender} escrito por ${this.author} en el año ${this.year}` 33 | } 34 | } 35 | 36 | let books = [] 37 | 38 | while (books.length < 3) { 39 | let title = prompt('Introduce el título del libro') 40 | let author = prompt('Introduce el autor del libro') 41 | let year = prompt('Introduce el año del libro') 42 | let gender = prompt('Introduce el género del libro').toLowerCase() 43 | 44 | if (title != '' && 45 | author != '' && 46 | !isNaN(year) && 47 | year.length == 4 && 48 | (gender == 'aventura' || gender == 'terror' || gender == 'fantasía')) { 49 | 50 | books.push(new Book(title, author, year, gender)) 51 | 52 | } 53 | } 54 | 55 | const showAllBooks = () => { 56 | console.log(books); 57 | } 58 | 59 | const showAuthors = () => { 60 | let authors = [] 61 | 62 | for (const book of books) { 63 | authors.push(book.getAuthor()); 64 | } 65 | 66 | console.log(authors.sort()); 67 | } 68 | 69 | const showGender = () => { 70 | const gender = prompt('Introduce el género a buscar') 71 | 72 | for (const book of books) { 73 | if (book.getGender() == gender) { 74 | console.log(book.bookInfo()) 75 | } 76 | } 77 | 78 | } 79 | 80 | //showAllBooks() 81 | //showAuthors() 82 | showGender() 83 | 84 | 85 | -------------------------------------------------------------------------------- /Clase 21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrays III - Métodos II 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Clase 21/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Arrays - Métodos II 3 | 4 | .from(iterable) - Convierte en array el elemento iterable 5 | 6 | .sort([callback]) - Ordena los elementos de un array alfabéticamente(valor Unicode), si le pasamos un callback los ordena en función del algoritmo que le pasemos. 7 | 8 | .forEach(callback(currentValue, [index])) - ejecuta la función indicada una vez por cada elemento del array. 9 | 10 | .some(callback) - Comprueba si al menos un elemento del array cumple la condición 11 | 12 | .every(callback) - Comprueba si todos los elementos del array cumplen la condición 13 | 14 | .map(callback) - Transforma todos los elementos del array y devuelve un nuevo array 15 | 16 | .filter(callback) - Filtra todos los elementos del array que cumplan la condición y devuelve un nuevo array 17 | 18 | .reduce(callback) - Reduce todos los elementos del array a un único valor 19 | */ 20 | 21 | /* FROM */ 22 | /* let word = 'Hola mundo' 23 | 24 | console.log(Array.from(word)); 25 | console.log(word.split('')); */ 26 | 27 | 28 | /* SORT */ 29 | /* const letters = ['b', 'c', 'z', 'a'] 30 | const numbers = [1,8,100,300,3] 31 | 32 | console.log(letters.sort()) 33 | console.log(numbers.sort()) 34 | 35 | console.log(numbers.sort((a,b)=>a-b)) 36 | 37 | function menorMayor(a, b) { 38 | if (a-b < 0) return -1; 39 | if (a-b > 0) return 1; 40 | if(a == b) return 0; 41 | } 42 | 43 | function mayorMenor(a, b) { 44 | if (b-a < 0) return -1; 45 | if (b-a > 0) return 1; 46 | if(b == a) return 0; 47 | } */ 48 | 49 | /* FOREACH */ 50 | /* const numbers = [12, 25, 47, 84, 98] 51 | 52 | //numbers.forEach((number)=>console.log(number)) 53 | numbers.forEach((number, index) => 54 | console.log(`${number} está en la posición ${index}`)) */ 55 | 56 | /* const words = ['HTML', 'CSS', 'JavaScript', 'PHP'] 57 | 58 | console.log(words.some(word => word.length>10)); 59 | console.log(words.every(word => word.length>3)); */ 60 | 61 | /* MAP */ 62 | /* const numbers = [1, 2, 3, 4, 5] */ 63 | 64 | /* const numbers2 = numbers.map(number => number * 2) 65 | 66 | console.log(numbers2); */ 67 | 68 | /* REDUCE */ 69 | 70 | /* const numbers2 = numbers.filter(number => number > 80) 71 | 72 | console.log(numbers2) 73 | 74 | console.log(numbers.reduce((a,b)=>a+b)) 75 | 76 | const users = [ 77 | { 78 | name: 'user 1', 79 | online: true 80 | }, 81 | { 82 | name: 'user 2', 83 | online: true 84 | }, 85 | { 86 | name: 'user 3', 87 | online: false 88 | }, 89 | { 90 | name: 'user 4', 91 | online: false 92 | }, 93 | { 94 | name: 'user 5', 95 | online: false 96 | }, 97 | { 98 | name: 'user 6', 99 | online: true 100 | } 101 | ] 102 | 103 | const usersOnline = users.reduce((cont, user) => { 104 | if (user.online) cont++ 105 | return cont 106 | },0) 107 | 108 | console.log(`Hay ${usersOnline} usuarios conectados`); */ 109 | -------------------------------------------------------------------------------- /Clase 22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spread operator 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Clase 22/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Spread Operator (operador de expansión) 3 | 4 | Su sintaxis es ... 5 | 6 | */ 7 | 8 | /* console.log(...numbers) */ 9 | 10 | //Enviar elementos en un array a una función 11 | 12 | /* const addNumbers = (a, b, c) => { 13 | console.log(a+b+c) 14 | } 15 | 16 | let numbersToAdd = [1,2,3] 17 | 18 | addNumbers(...numbersToAdd) */ 19 | 20 | //Añadir un array a otro array 21 | /* let users = ['javier', 'david', 'rosa', 'juan', 'mercedes'] 22 | 23 | let newUsers = ['marta', 'jaime', 'laura'] 24 | 25 | users.push(...newUsers) 26 | 27 | console.log(users); */ 28 | 29 | //Copiar arrays 30 | /* let arr1 = [1, 2, 3, 4,5] 31 | let arr2 = [...arr1] 32 | console.log(arr2); */ 33 | 34 | //Concatenar arrays 35 | /* let arr1 = [1, 2, 3, 4, 5] 36 | let arr2 = [6, 7, 8] 37 | 38 | let arrConcat = [...arr1, ...arr2] 39 | console.log(arrConcat) */ 40 | 41 | // Enviar un número indefinido de argumentos a una función (parámetros REST) 42 | 43 | /* const restParms = (...numbers) => { 44 | console.log(numbers) 45 | } 46 | 47 | restParms(1,2,3,4,5,6,7,8) */ 48 | 49 | //librería math 50 | const numbers = [-12, 2, 3, 23, 43, 2, 3] 51 | 52 | console.log(Math.max(...numbers)) 53 | console.log(Math.min(...numbers)) 54 | 55 | //Eliminar elementos duplicados 56 | console.log([...new Set(numbers)]) -------------------------------------------------------------------------------- /Clase 23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DOM 6 | 7 | 8 |

DOM Document Object Model

9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Clase 23/scripts.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DorianDesings/js2018/d79de46300cf3e00a5b5c436acf149875b02eb37/Clase 23/scripts.js -------------------------------------------------------------------------------- /Clase 24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DOM - Acceder a elementos/nodos 6 | 7 | 8 | 9 |

DOM - Acceder a elementos/nodos Prueba

10 |
11 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

12 | 13 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit.Aliquam et iure blanditiis doloribus iste quasi adipisci, mollitia ad! Quod vero neque nisi recusandae perferendis

14 | 15 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit.Aliquam et iure blanditiis doloribus iste quasi adipisci, mollitia ad!

16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Clase 24/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | document.getElementById('id') - Acceder a un elemento a través de su id 3 | 4 | document | element .querySelector('selectorCSS') - Accede al primer elemento que coincida con el selector CSS 5 | 6 | document | element .querySelectorAll('selectorCSS') - Accede a todos los elementos que coincidan con el selector CSS, devuelve un nodeList 7 | */ 8 | 9 | /* const title = document.getElementById('title') 10 | 11 | title.textContent = 'DOM - Accediendo a nodos' */ 12 | 13 | /* const paragraph = document.querySelector('.paragraph') 14 | 15 | const span = document.getElementById('title').querySelector("span") */ 16 | 17 | const paragraphs = document.querySelectorAll('.paragraph') 18 | 19 | //const paragraphsSpread = [...document.querySelectorAll('.paragraph')] 20 | 21 | const paragraphsArray = Array.from(document.querySelectorAll('.paragraph')) 22 | 23 | paragraphs[0].style.color = 'red' 24 | 25 | //paragraphs.map(p => p.style.color = 'green') 26 | 27 | //paragraphsSpread.map(p => p.style.color = 'green') 28 | 29 | paragraphsArray.map(p=>p.style.color='blue') -------------------------------------------------------------------------------- /Clase 25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Atributos desde JavaScript 6 | 7 | 8 | 9 |

Atributos desde JavaScript

10 |
11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Clase 25/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Atributos 3 | element.getAttribute('attribute') 4 | element.setAttribute('attribute', value) 5 | 6 | Clases 7 | element.classList.add('class','class',...) 8 | element.classList.remove('class','class',...) 9 | element.classList.contains('class') 10 | element.classList.replace('oldClass', newClass) 11 | 12 | element.classList.toggle('class'[,force]) 13 | atributos directos 14 | id 15 | value 16 | */ 17 | 18 | const title = document.getElementById('title') 19 | const name = document.getElementById('name') 20 | 21 | //console.log(name.getAttribute('type')) 22 | //name.setAttribute('type','date') 23 | 24 | //title.classList.add('main-title','other-title') 25 | //title.classList.remove('title') 26 | 27 | /* if(title.classList.contains('title')) console.log('Title tiene la clase title') 28 | else console.log('Title no tiene la clase title') */ 29 | 30 | /* title.classList.replace('title','main-title') */ 31 | 32 | /* console.log(title.innerHTML) 33 | console.log(title.textContent) */ 34 | console.log(name.value) 35 | /* console.log(title) 36 | console.log(name) */ 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Clase 26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Eventos en JavaScript 6 | 7 | 8 | 9 | 10 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Clase 26/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Eventos de ratón: 3 | click - cuando pulsamos el botón izquierdo del ratón 4 | dblclick - cuando pulsamos dos veces seguidas el botón izquierdo del ratón 5 | mouseenter - cuando entramos en la zona que tiene el evento 6 | mouseleave - cuando salimos de la zona que tiene el evento 7 | mousedown - cuando pulsamos el boton izquierdo del ratón 8 | mouseup - cuando soltamos el boton izquierdo del ratón 9 | mousemove - cuando movemos el ratón 10 | 11 | Eventos de teclado: 12 | keydown - cuando pulsamos una tecla 13 | keyup - cuando soltamos una tecla 14 | keypress - cuando pulsamos una tecla y no la soltamos 15 | */ 16 | 17 | const button = document.getElementById('button') 18 | const input = document.getElementById('input') 19 | const box = document.getElementById('box') 20 | 21 | /* button.addEventListener('click', () => { 22 | console.log('CLICK') 23 | }) */ 24 | 25 | /* button.addEventListener('dblclick',()=> { 26 | console.log('DOBLE CLICK') 27 | }) */ 28 | 29 | /* box.addEventListener('mouseenter', () => { 30 | box.classList.replace('red', 'green') 31 | 32 | }) 33 | 34 | box.addEventListener('mouseleave', () => { 35 | box.classList.replace('green', 'red') 36 | }) */ 37 | 38 | /* box.addEventListener('mousedown', () => { 39 | console.log('HAS PULSADO EN LA CAJA'); 40 | }) 41 | 42 | box.addEventListener('mouseup', () => { 43 | console.log('HAS SOLTADO EL BOTON IZQUIERDO EN LA CAJA') 44 | }) */ 45 | 46 | /* box.addEventListener('mousemove', () => { 47 | console.log('ESTAS MOVIENDO EL RATON EN LA CAJA'); 48 | }) */ 49 | 50 | /* input.addEventListener('keydown', () => { 51 | console.log('HAS PULSADO UNA TECLA'); 52 | }) 53 | 54 | input.addEventListener('keyup', () => { 55 | console.log('HAS SOLTADO UNA TECLA') 56 | }) 57 | 58 | input.addEventListener('keypress', () => { 59 | console.log('ESTÁS PULSANDO UNA TECLA') 60 | }) */ 61 | 62 | -------------------------------------------------------------------------------- /Clase 26/styles.css: -------------------------------------------------------------------------------- 1 | a, button { 2 | display: block; 3 | } 4 | 5 | .box { 6 | width: 100px; 7 | height: 100px; 8 | background: red; 9 | } 10 | 11 | .red { 12 | background: red; 13 | } 14 | 15 | .green{ 16 | background: green; 17 | } -------------------------------------------------------------------------------- /Clase 27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Objeto evento 6 | 7 | 8 | 9 |
10 | 11 | 12 |
13 | Ir a Google 14 | 15 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Clase 27/scripts.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById('form') 2 | const input = document.getElementById('input') 3 | const button = document.getElementById('button') 4 | 5 | /* input.addEventListener('keyup', (e) => { 6 | console.log(e); 7 | }) */ 8 | 9 | /* button.addEventListener('click', (e)=> { 10 | console.log(e.target) 11 | }) */ 12 | 13 | /* const gallery = document.getElementById('gallery') 14 | 15 | gallery.addEventListener('click', (e) => { 16 | e.target.classList.add('red') 17 | }) */ 18 | 19 | const link = document.getElementById('link') 20 | 21 | link.addEventListener('click', (e) => { 22 | e.preventDefault() 23 | 24 | }) 25 | 26 | form.addEventListener('submit', (e) => { 27 | e.preventDefault() 28 | console.log('El formulario se ha enviado'); 29 | }) 30 | 31 | button.addEventListener('click', () => { 32 | input.value = 'Has hecho click' 33 | }) 34 | 35 | button.click() 36 | 37 | 38 | -------------------------------------------------------------------------------- /Clase 27/styles.css: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: grid; 3 | grid-template-columns: repeat(3, 1fr); 4 | grid-gap: 10px; 5 | } 6 | 7 | .gallery__item { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | border: 1px solid black; 12 | cursor: pointer; 13 | } 14 | 15 | .red { 16 | background: red; 17 | } -------------------------------------------------------------------------------- /Clase 28/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DOM - Crear e insertar elementos 6 | 7 | 8 |

DOM - Crear e insertar elementos I

9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Clase 28/scripts.js: -------------------------------------------------------------------------------- 1 | //DOM - Crear e insertar elementos 2 | 3 | /* 4 | Crear un elemento: document.createElement(element) 5 | Escribir texto en un elemento: element.textContent = texto 6 | Escribir HTML en un elemento: element.innerHTML = código HTML 7 | 8 | Añadir un elemento al DOM: parent.appendChild(element) 9 | 10 | Fragmentos de código: document.createDocumentFragment() 11 | */ 12 | 13 | const days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'] 14 | 15 | const title = document.getElementById('title') 16 | const daysList = document.getElementById('daysList') 17 | const selectDays = document.getElementById('daysSelect') 18 | 19 | /* const itemList = document.createElement('LI') 20 | itemList.textContent = 'Lunes' 21 | 22 | daysList.appendChild(itemList) */ 23 | 24 | title.innerHTML = 'DOM - Crear e insertar elementos I' 25 | 26 | const fragment = document.createDocumentFragment() 27 | 28 | /* for (const day of days) { 29 | const itemList = document.createElement('LI') 30 | itemList.textContent = day 31 | fragment.appendChild(itemList) 32 | } */ 33 | 34 | for (const day of days) { 35 | const selectItem = document.createElement('OPTION') 36 | selectItem.setAttribute('value', day.toLowerCase()) 37 | selectItem.textContent = day 38 | fragment.appendChild(selectItem) 39 | } 40 | 41 | /* daysList.appendChild(fragment) */ 42 | selectDays.appendChild(fragment) 43 | -------------------------------------------------------------------------------- /Clase 29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DOM - Recorrerlo (DOM traversing) 6 | 7 | 8 |

DOM - Recorrerlo (DOM Traversing)

9 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Clase 29/scripts.js: -------------------------------------------------------------------------------- 1 | //Recorrer el DOM (DOM Traversing) 2 | 3 | /* 4 | Padre - parent (Nodo del que desciende) 5 | - parentNode - Devuelve el nodo padre (que puede no ser un elemento) 6 | - parentElement - Devuelve el nodo elemento padre 7 | 8 | NOTA 9 | Los nodos del tipo Document y DocumentFragment nunca van a tener un elemento padre, parentNode y parentElement devolverá siempre null. 10 | 11 | Hijos - child (Nodo que desciende de un padre) 12 | - childNodes - Devuelve todos los nodos hijos 13 | - children - Devuelve todos los nodos elementos hijos 14 | - firstChild - Devueleve el primer nodo hijo 15 | - firstElementChild - Devueleve el primer nodo elemento hijo 16 | - lastChild - Devueleve el último nodo hijo 17 | - lastElementChild - Devueleve el último nodo elemento hijo 18 | - hasChildNodes() - Devueleve true si el nodo tiene hijos y false si no tiene 19 | 20 | Hermanos - siblings (Nodo al mismo nivel) 21 | - nextSibling - Devuelve el siguiente nodo hermano 22 | - nextElementSibling - Devuelve el siguiente nodo elemento hermano 23 | - previousSibling - Devuelve el anterior nodo hermano 24 | - previousElementSibling - Devuelve el anterior nodo elemento hermano 25 | 26 | Cercano 27 | - closest(selector) - Selecciona el nodo más cercano que cumpla con el selector, aún es experimental. 28 | */ 29 | 30 | const parent = document.getElementById('parent') 31 | 32 | //console.log(parent.parentElement) 33 | 34 | //console.log(parent.childNodes) 35 | //console.log(parent.children) 36 | //console.log(parent.firstChild) 37 | //console.log(parent.firstElementChild) 38 | //console.log(parent.lastChild) 39 | //console.log(parent.lastElementChild) 40 | //console.log(parent.firstChild.hasChildNodes()) 41 | 42 | //console.log(parent.nextSibling) 43 | //console.log(parent.parentElement.nextElementSibling) 44 | //console.log(parent.parentElement.previousSibling) 45 | //console.log(parent.parentElement.previousElementSibling) -------------------------------------------------------------------------------- /Clase 30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Insertar y eliminar elementos II 6 | 7 | 8 |

Insertar y eliminar elementos II

9 | 10 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Clase 30/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Insertar y eliminar elementos II 3 | 4 | parent.insertBefore(newElement, referenceElement) - Insertar un elemento antes del elemento de referencia 5 | 6 | SOPORTE TOTAL 7 | parent.insertAdjacentElement(position, element) 8 | 9 | parent.insertAdjacentHTML(position, HTML) 10 | parent.insertAdjacentText(position, text) 11 | 12 | positions: 13 | beforebegin - Antes de que empiece (hermano anterior) 14 | afterbegin - después de que empiece (primer hijo) 15 | beforeend - antes de que acabe (último hijo) 16 | afterend - después de que acabe (hermano siguiente) 17 | 18 | parent.replaceChild(newChild, oldChild) - Reemplaza un hijo por otro 19 | */ 20 | const list = document.getElementById('list') 21 | const newElement = document.createElement('li') 22 | newElement.textContent = "I'm a new element" 23 | 24 | // list.insertBefore(newElement, list.children[1]) 25 | 26 | //list.children[0].insertAdjacentElement('beforebegin',newElement) 27 | // list.insertAdjacentElement('afterbegin',newElement) 28 | // list.insertAdjacentElement('beforeend',newElement) 29 | //list.children[1].insertAdjacentElement('afterend',newElement) 30 | 31 | // list.children[1].insertAdjacentHTML('afterend', '
  • Elemento con HTML
    • ') 32 | // list.children[1].insertAdjacentText('afterend', '
  • Elemento con HTML
    • ') 33 | 34 | //list.replaceChild(newElement,list.children[0]) 35 | 36 | 37 | 38 | /* 39 | DOM manipulation convenience methods - JQuery Like 40 | https://caniuse.com/#search=jQuery-like 41 | 42 | positions: 43 | parent.before() - Antes de que empiece (hermano anterior) 44 | parent.prepend() - después de que empiece (primer hijo) 45 | parent.append() - antes de que acabe (último hijo) 46 | parent.after() - después de que acabe (hermano siguiente) 47 | 48 | child.replaceWith(newChild) 49 | */ 50 | 51 | //list.children[0].before(newElement) 52 | //list.prepend(newElement) 53 | // list.append(newElement) 54 | // list.children[1].after(newElement) 55 | 56 | //document.getElementById('child-to-replace').replaceWith(newElement) 57 | 58 | /* 59 | Clonar y eliminar elementos 60 | element.cloneNode(true|false) - Clona el nodo. Si le pasamos true clona todo el elemento con los hijos, si le pasamos false clona solo el elemento sin hijos 61 | 62 | element.remove() - Elimina el nodo del DOM 63 | element.removeChild(child) - Elimina el nodo hijo del DOM 64 | */ 65 | 66 | //list.after(list.cloneNode(true)) 67 | 68 | //list.remove() 69 | 70 | list.removeChild(list.children[1]) -------------------------------------------------------------------------------- /Clase 31/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Objetos nativos 6 | 7 | 8 |

    Objetos nativos

    9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Clase 31/scripts.js: -------------------------------------------------------------------------------- 1 | const button = document.getElementById('button') 2 | 3 | /* 4 | Objeto window - Es el objeto global, de él descienden todos los objetos 5 | alert() 6 | prompt() 7 | confirm() 8 | */ 9 | 10 | /* if (confirm('Acepta?')) { 11 | console.log('El usuario acepto'); 12 | } else { 13 | console.log('El usuario no acepto'); 14 | } */ 15 | 16 | 17 | /* Objeto console - Es el objeto que contiene la consola del navegador 18 | https://developer.mozilla.org/es/docs/Web/API/Console 19 | console.log() 20 | console.dir() 21 | console.error() 22 | console.table() 23 | */ 24 | 25 | const person = { 26 | name: 'Dorian', 27 | age: 30, 28 | email: 'dorian@gmail.com' 29 | } 30 | 31 | //console.table([1,2,3,4]) 32 | 33 | /* Objeto location - Es el objeto que contiene la barra de direcciones 34 | https://developer.mozilla.org/es/docs/Web/API/Location 35 | location.href 36 | location.protocol 37 | location.host 38 | location.pathname 39 | location.hash 40 | location.reload() 41 | */ 42 | 43 | // console.log(location.href) 44 | // console.log(location.protocol) 45 | // console.log(location.host) 46 | // console.log(location.pathname) 47 | // console.log(location.hash) 48 | //location.reload() 49 | 50 | //location.href = 'https://google.com' 51 | 52 | /* Objeto history 53 | https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador 54 | 55 | back() 56 | forward() 57 | go(n|-n) 58 | 59 | length 60 | */ 61 | 62 | /* Objeto date 63 | https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date 64 | https://www.w3schools.com/jsref/jsref_obj_date.asp 65 | */ 66 | 67 | /* const date = new Date() 68 | 69 | console.log(date) */ 70 | 71 | /* 72 | Timers 73 | Timeout: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout 74 | 75 | setTimeout(()=>{code}, delay-in-miliseconds) - Hace que se ejecute la función despues de delay. Si lo referenciamos mediante una variable/constante podemos pararlo con clearTimeout(referencia) 76 | 77 | Interval: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval 78 | 79 | setInterval(()=>{code}, delay-in-miliseconds) - Hace que se ejecute la función cada delay milisegundos. Si lo referenciamos mediante una variable/constante podemos pararlo con clearInterval(referencia) 80 | */ 81 | 82 | 83 | /* button.addEventListener('click', () => { 84 | //setTimeout(saludar,3000) 85 | const timeout = setTimeout(() => { 86 | console.log('ADIOS'); 87 | }, 3000) 88 | 89 | clearTimeout(timeout) 90 | }) */ 91 | 92 | /* const timeout = setTimeout(() => { 93 | console.log('ADIOS'); 94 | }, 3000) 95 | 96 | button.addEventListener('click', () => { 97 | clearTimeout(timeout) 98 | }) */ 99 | 100 | 101 | const saludar = () => { 102 | console.log('Hola') 103 | } 104 | 105 | let cont = 0 106 | 107 | //const interval = setInterval(saludar, 3000) 108 | 109 | const interval = setInterval(() => { 110 | console.log(cont) 111 | cont++ 112 | }, 1000) 113 | 114 | button.addEventListener('click', () => { 115 | clearInterval(interval) 116 | }) -------------------------------------------------------------------------------- /Clase 32/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AJAX 6 | 7 | 8 |

    AJAX

    9 | 10 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Clase 32/scripts.js: -------------------------------------------------------------------------------- 1 | /* Protocolo HTTP: https://es.wikipedia.org/wiki/Protocolo_de_transferencia_de_hipertexto */ 2 | /* Códigos de estado de respuesta HTTP: https://developer.mozilla.org/es/docs/Web/HTTP/Status */ 3 | 4 | const button = document.getElementById('button') 5 | 6 | button.addEventListener('click', () => { 7 | let xhr 8 | if (window.XMLHttpRequest) xhr = new XMLHttpRequest() 9 | else xhr = new ActiveXObject("Microsoft.XMLHTTP") 10 | 11 | xhr.open('GET', 'https://jsonplaceholder.typicode.com/users') 12 | 13 | xhr.addEventListener('load', (data) => { 14 | const dataJSON = JSON.parse(data.target.response) 15 | 16 | const list = document.getElementById('list') 17 | for (const userInfo of dataJSON) { 18 | const listItem = document.createElement('LI') 19 | listItem.textContent = `${userInfo.id} - ${userInfo.name}` 20 | list.appendChild(listItem) 21 | } 22 | }) 23 | 24 | xhr.send() 25 | }) -------------------------------------------------------------------------------- /Clase 33/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AJAX II 6 | 7 | 8 | 9 |

    AJAX II

    10 |
    11 | 12 | 13 |
    14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
    NameAlignmentHometownGenderFighting Skills
    24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Clase 33/marvel.php: -------------------------------------------------------------------------------- 1 | prepare($sql); 15 | 16 | $stm->execute(); 17 | 18 | $resultSet = $stm->fetchAll(PDO::FETCH_ASSOC); 19 | 20 | echo json_encode($resultSet); 21 | 22 | }catch (PDOException $e){ 23 | echo "Error ".$e->getMessage(); 24 | } 25 | 26 | 27 | -------------------------------------------------------------------------------- /Clase 33/marvel.sql: -------------------------------------------------------------------------------- 1 | -- phpMyAdmin SQL Dump 2 | -- version 4.8.3 3 | -- https://www.phpmyadmin.net/ 4 | -- 5 | -- Servidor: 127.0.0.1:3306 6 | -- Tiempo de generación: 26-01-2019 a las 01:22:40 7 | -- Versión del servidor: 5.7.23 8 | -- Versión de PHP: 7.2.10 9 | 10 | SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; 11 | SET AUTOCOMMIT = 0; 12 | START TRANSACTION; 13 | SET time_zone = "+00:00"; 14 | 15 | 16 | /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; 17 | /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; 18 | /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 19 | /*!40101 SET NAMES utf8mb4 */; 20 | 21 | -- 22 | -- Base de datos: `marvel` 23 | -- 24 | CREATE DATABASE IF NOT EXISTS `marvel` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci; 25 | USE `marvel`; 26 | 27 | -- -------------------------------------------------------- 28 | 29 | -- 30 | -- Estructura de tabla para la tabla `characters` 31 | -- 32 | 33 | DROP TABLE IF EXISTS `characters`; 34 | CREATE TABLE IF NOT EXISTS `characters` ( 35 | `ID` int(11) NOT NULL, 36 | `Name` text, 37 | `Alignment` text, 38 | `Gender` text, 39 | `Hometown` text, 40 | `Fighting_Skills` int(11) DEFAULT NULL, 41 | PRIMARY KEY (`ID`) 42 | ) ENGINE=MyISAM DEFAULT CHARSET=latin1; 43 | 44 | -- 45 | -- Volcado de datos para la tabla `characters` 46 | -- 47 | 48 | INSERT INTO `characters` (`ID`, `Name`, `Alignment`, `Gender`, `Hometown`, `Fighting_Skills`) VALUES 49 | (1, 'Spider Man', 'Good', 'Male', 'USA', 4), 50 | (2, 'Iron Man', 'Neutral', 'Male', 'USA', 4), 51 | (3, 'Hulk', 'Neutral', 'Male', 'USA', 4), 52 | (4, 'Wolverine', 'Good', 'Male', 'Canada', 7), 53 | (5, 'Thor', 'Good', 'Male', 'Norway', 4), 54 | (6, 'Green Goblin', 'Bad', 'Male', 'USA', 3), 55 | (7, 'Magneto', 'Neutral', 'Male', 'Germany', 4), 56 | (8, 'Thanos', 'Bad', 'Male', 'Titan', 4), 57 | (9, 'Loki', 'Bad', 'Male', 'Jotunheim', 3), 58 | (10, 'Doctor Doom', 'Bad', 'Male', 'Latveria', 4), 59 | (11, 'Jean Greay', 'Good', 'Female', 'USA', 4), 60 | (12, 'Rogue', 'Good', 'Female', 'USA', 7), 61 | (13, 'Storm', 'Good', 'Female', 'Kenya', 4), 62 | (14, 'Nightcrawler', 'Good', 'Male', 'Germany', 3), 63 | (15, 'Gambit', 'Good', 'Male', 'USA', 4), 64 | (16, 'Captain America', 'Good', 'Male', 'USA', 6), 65 | (17, 'Cyclops', 'Good', 'Male', 'USA', 4), 66 | (18, 'Emma Frost', 'Neutral', 'Female', 'USA', 3), 67 | (19, 'Kitty Pryde', 'Good', 'Female', 'USA', 5), 68 | (20, 'Daredevil', 'Good', 'Male', 'USA', 5), 69 | (21, 'Punisher', 'Neutral', 'Male', 'USA', 6), 70 | (22, 'Silver Surfer', 'Good', 'Male', 'Zenn-La', 2), 71 | (23, 'Ghost Rider', 'Good', 'Male', 'USA', 2), 72 | (24, 'Venon', 'Neutral', 'Male', 'USA', 4), 73 | (25, 'Juggernaut', 'Neutral', 'Male', 'USA', 4), 74 | (26, 'Professor X', 'Good', 'Male', 'USA', 3); 75 | COMMIT; 76 | 77 | /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; 78 | /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; 79 | /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 80 | -------------------------------------------------------------------------------- /Clase 33/scripts.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById('form') 2 | const characters = document.getElementById('characters') 3 | const table = document.getElementById('table') 4 | 5 | form.addEventListener('submit', (e) => { 6 | e.preventDefault() 7 | getData(characters.children[characters.selectedIndex].value) 8 | }) 9 | 10 | const getData = (id) => { 11 | let xhr 12 | if (window.XMLHttpRequest) xhr = new XMLHttpRequest() 13 | else xhr = new ActiveXObject("Microsoft.XMLHTTP") 14 | 15 | if (id == undefined) { 16 | xhr.open('GET', 'marvel.php') 17 | 18 | xhr.addEventListener('load', (data) => { 19 | const dataJSON = JSON.parse(data.target.response) 20 | console.log(dataJSON) 21 | 22 | const fragment = document.createDocumentFragment() 23 | 24 | for (const heroes of dataJSON) { 25 | const option = document.createElement('OPTION') 26 | option.setAttribute('value', heroes.ID) 27 | option.textContent = heroes.Name 28 | fragment.appendChild(option) 29 | } 30 | 31 | characters.appendChild(fragment) 32 | }) 33 | } else { 34 | xhr.open('GET', `marvel.php?id=${id}`) 35 | 36 | xhr.addEventListener('load', (data) => { 37 | const dataJSON = JSON.parse(data.target.response) 38 | console.log(dataJSON) 39 | 40 | const fragment = document.createDocumentFragment() 41 | 42 | for (const heroe of dataJSON) { 43 | const row = document.createElement('TR') 44 | const dataName = document.createElement('TD') 45 | const dataAlignment = document.createElement('TD') 46 | const dataHometown = document.createElement('TD') 47 | const dataGender = document.createElement('TD') 48 | const dataFighting = document.createElement('TD') 49 | dataName.textContent = heroe.Name 50 | dataAlignment.textContent = heroe.Alignment 51 | dataHometown.textContent = heroe.Hometown 52 | dataGender.textContent = heroe.Gender 53 | dataFighting.textContent = heroe.Fighting_Skills 54 | 55 | row.append(dataName) 56 | row.append(dataAlignment) 57 | row.append(dataHometown) 58 | row.append(dataGender) 59 | row.append(dataFighting) 60 | 61 | fragment.append(row) 62 | } 63 | 64 | if (table.children[1]) { 65 | table.removeChild(table.children[1]) 66 | } 67 | table.append(fragment) 68 | }) 69 | } 70 | 71 | xhr.send() 72 | } 73 | 74 | getData() -------------------------------------------------------------------------------- /Clase 33/styles.css: -------------------------------------------------------------------------------- 1 | /* NO SE DEBE SELECCIONAR CON ETIQUETAS, ESTO ES PARA AGILIZAR EL VÍDEO */ 2 | 3 | table { 4 | margin-top: 2em; 5 | border-collapse: collapse; 6 | } 7 | 8 | th, td, tr { 9 | border: 1px solid black; 10 | text-align: center; 11 | } -------------------------------------------------------------------------------- /Clase 34/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | AJAX II 7 | 8 | 9 | 10 | 11 |

    AJAX III

    12 |
    13 | 16 | 19 | 22 | 25 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Clase 34/marvel.php: -------------------------------------------------------------------------------- 1 | { 6 | e.preventDefault() 7 | sendData(form) 8 | }) 9 | 10 | const sendData = (data) => { 11 | let xhr 12 | if (window.XMLHttpRequest) xhr = new XMLHttpRequest() 13 | else xhr = new ActiveXObject("Microsoft.XMLHTTP") 14 | 15 | xhr.open('POST', 'marvel.php') 16 | const formData = new FormData(data) 17 | 18 | xhr.send(formData) 19 | } -------------------------------------------------------------------------------- /Clase 34/styles.css: -------------------------------------------------------------------------------- 1 | /* NO SE DEBE SELECCIONAR CON ETIQUETAS, ESTO ES PARA AGILIZAR EL VÍDEO */ 2 | 3 | table { 4 | margin-top: 2em; 5 | border-collapse: collapse; 6 | } 7 | 8 | th, td, tr { 9 | border: 1px solid black; 10 | text-align: center; 11 | } -------------------------------------------------------------------------------- /Clase 35/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Entendiendo los callbacks 7 | 8 | 9 | 10 |

    Callbacks

    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Clase 35/scripts.js: -------------------------------------------------------------------------------- 1 | //Un callback es una función que se ejecuta a través de otra función 2 | //Los callbacks no son asíncronos 3 | 4 | /* const getUser = (id, cb) => { 5 | const user = { 6 | name: 'Dorian', 7 | id: id 8 | } 9 | 10 | if (id == 2) cb('User not exist') 11 | else cb(null, user) 12 | } 13 | 14 | getUser(1, (err, user) => { 15 | if (err) return console.log(err) 16 | console.log(`User name is ${user.name}`); 17 | }) */ 18 | 19 | const users = [ 20 | { 21 | id: 1, 22 | name: 'Dorian' 23 | 24 | }, 25 | { 26 | id: 2, 27 | name: 'Laura' 28 | }, 29 | { 30 | id: 3, 31 | name: 'Carlos' 32 | } 33 | ] 34 | 35 | const emails = [ 36 | { 37 | id: 1, 38 | email: 'dorian@gmail.com' 39 | }, 40 | { 41 | id: 2, 42 | email: 'laura@gmail.com' 43 | } 44 | ] 45 | 46 | const getUser = (id, cb) => { 47 | const user = users.find(user => user.id == id) 48 | if (!user) cb(`Not exist a user with id ${id}`) 49 | else cb(null, user) 50 | } 51 | 52 | const getEmail = (user, cb) => { 53 | const email = emails.find(email => email.id == user.id) 54 | if (!email) cb(`${user.name} hasn't email`) 55 | else cb(null, { 56 | id: user.id, 57 | name: user.name, 58 | email: email.email 59 | }) 60 | } 61 | 62 | getUser(3, (err, user) => { 63 | if (err) return console.log(err) 64 | 65 | getEmail(user, (err, res) => { 66 | if (err) return console.log(err) 67 | getEmail(user, (err, res) => { 68 | if (err) return console.log(err) 69 | getEmail(user, (err, res) => { 70 | if (err) return console.log(err) 71 | getEmail(user, (err, res) => { 72 | if (err) return console.log(err) 73 | console.log(res); 74 | }) 75 | }) 76 | }) 77 | }) 78 | }) -------------------------------------------------------------------------------- /Clase 36/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promesas I 7 | 8 | 9 | 10 |

    Promesas I

    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Clase 36/scripts.js: -------------------------------------------------------------------------------- 1 | //Una promesa es un objeto con 2 callbacks internos 2 | const users = [{ id: 1, name: 'Dorian' }, { id: 2, name: 'Laura' }, { id: 3, name: 'Carlos' }] 3 | const emails = [{ id: 1, email: 'dorian@gmail.com' }, { id: 2, email: 'laura@gmail.com' }] 4 | 5 | const getUser = (id) => { 6 | const user = users.find(user => user.id == id) 7 | return promise = new Promise((resolve, reject) => { 8 | if (!user) reject(`Doesn't exist an user with id ${id}`) 9 | else resolve(user) 10 | }) 11 | } 12 | 13 | const getEmail = (user) => { 14 | const email = emails.find(email => email.id == user.id) 15 | return promise = new Promise((resolve, reject) => { 16 | if (!email) reject(`${user.name} hasn't email`) 17 | else resolve({ 18 | id: user.id, 19 | name: user.name, 20 | email: email.email 21 | }) 22 | }) 23 | } 24 | 25 | /* getUser(2) 26 | .then(user => getEmail(user)) 27 | .then(res => console.log(res)) 28 | .catch(err => console.log(err)) 29 | */ 30 | 31 | getUser(2) 32 | .then(getEmail) 33 | .then(console.log) 34 | .catch(console.log) -------------------------------------------------------------------------------- /Clase 37/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fetch I 7 | 8 | 9 | 10 |

    Fetch I

    11 | 12 |
      13 | 14 |
    15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Clase 37/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Fetch API 3 | Proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, como peticiones y respuestas. 4 | También provee un método global fetch() que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red. 5 | Está basado en promesas, por lo cual tiene un response y un reject internos 6 | Response tiene varios métodos 7 | array​Buffer(): Archivos binarios en bruto (mp3, pdf, jpg, etc). Se utiliza cuando se necesita manipular el contenido del archivo. 8 | blob(): Archivos binarios en bruto (mp3, pdf, jpg, etc). Se utiliza cuando no se necesita manipular el contenido y se va a trabajar con el archivo directamente 9 | clone(): crea un clon de un objeto de respuesta, idéntico en todos los sentidos, pero almacenado en una variable diferente. 10 | form​Data(): Se utiliza para leer los objetos formData 11 | json(): Convierte los archivos json en un objeto de JavaScript 12 | text(): Se utiliza cuando queremos leer un archivo de texto. Siempre se codifica en UTF-8 13 | 14 | //Comprobación de soporte FETCH 15 | if (window.fetch != undefined) console.log('FETCH OK') 16 | else console.log('FETCH NOT WORKS!') 17 | */ 18 | 19 | const button = document.getElementById('button') 20 | 21 | //res = response = respuesta 22 | button.addEventListener('click', () => { 23 | fetch('https://jsonplaceholder.typicode.com/users') 24 | .then(res => res.ok ? Promise.resolve(res) : Promise.reject(res)) 25 | 26 | .then(res => res.json()) 27 | .then(res => { 28 | const list = document.getElementById('list') 29 | const fragment = document.createDocumentFragment() 30 | for (const userInfo of res) { 31 | const listItem = document.createElement('LI') 32 | listItem.textContent = `${userInfo.id} - ${userInfo.name}` 33 | fragment.appendChild(listItem) 34 | } 35 | list.appendChild(fragment) 36 | }) 37 | }) 38 | 39 | /* 40 | button.addEventListener('click', () => { 41 | let xhr 42 | if (window.XMLHttpRequest) xhr = new XMLHttpRequest() 43 | else xhr = new ActiveXObject("Microsoft.XMLHTTP") 44 | 45 | xhr.open('GET', 'https://jsonplaceholder.typicode.com/users') 46 | 47 | xhr.addEventListener('load', (data) => { 48 | const dataJSON = JSON.parse(data.target.response) 49 | 50 | const list = document.getElementById('list') 51 | for (const userInfo of dataJSON) { 52 | const listItem = document.createElement('LI') 53 | listItem.textContent = `${userInfo.id} - ${userInfo.name}` 54 | list.appendChild(listItem) 55 | } 56 | }) 57 | 58 | xhr.send() 59 | }) */ -------------------------------------------------------------------------------- /Clase 38/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fetch II - Post 7 | 8 | 9 | 10 |

    Fetch II - Post

    11 | 12 |
      13 |
    14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Clase 38/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Fetch API 3 | Para hacer peticiones POST, fetch admite un segundo parámetro. 4 | fetch(url, { 5 | method: 'POST', 6 | body: Los datos que enviamos. Si es un objeto hay que convertirlo con JSON.stringify(datos), 7 | headers: { 8 | cabeceras de información sobre lo que estamos enviando 9 | https://developer.mozilla.org/es/docs/Web/HTTP/Headers 10 | } 11 | }) 12 | 13 | console.log(newPost) 14 | console.log(JSON.stringify(newPost)) 15 | */ 16 | 17 | const button = document.getElementById('button') 18 | 19 | button.addEventListener('click', () => { 20 | const newPost = { 21 | title: 'A new post', 22 | body: ' Lorem ipsum dolor sit amet consectetur adipisicing elit.', 23 | userId: 1 24 | } 25 | 26 | fetch('https://jsonplaceholder.typicode.com/posts', { 27 | method: 'POST', 28 | body: JSON.stringify(newPost), 29 | headers: { 30 | "Content-type": "application/json" 31 | } 32 | }) 33 | .then(res => res.json()) 34 | .then(data => console.log(data)) 35 | }) -------------------------------------------------------------------------------- /Clase 39/demo.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DorianDesings/js2018/d79de46300cf3e00a5b5c436acf149875b02eb37/Clase 39/demo.pdf -------------------------------------------------------------------------------- /Clase 39/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DorianDesings/js2018/d79de46300cf3e00a5b5c436acf149875b02eb37/Clase 39/dog.jpg -------------------------------------------------------------------------------- /Clase 39/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fetch III 7 | 8 | 9 | 10 | 11 |

    Fetch III

    12 | 13 | 14 | 15 | Descargar 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Clase 39/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Fetch API 3 | blob(): Binary Long OBject 4 | Si ponemos la ruta hacia el archivo podemos leer ese archivo y renderizarlo en pantalla 5 | 6 | URL: Con el objeto URL usando el método createObjectURL(archivo) podemos crear una ruta válida para ver ese archivo 7 | https://developer.mozilla.org/es/docs/Web/API/URL 8 | */ 9 | 10 | const buttonImg = document.getElementById('button-img') 11 | const buttonPDF = document.getElementById('button-pdf') 12 | 13 | buttonImg.addEventListener('click', () => { 14 | fetch('dog.jpg') 15 | .then(res => res.blob()) 16 | .then(img => { 17 | document.getElementById('img').src = URL.createObjectURL(img) 18 | }) 19 | }) 20 | 21 | buttonImg.addEventListener('click', () => { 22 | fetch('demo.pdf') 23 | .then(res => res.blob()) 24 | .then(pdf => { 25 | document.getElementById('pdf').href = URL.createObjectURL(pdf) 26 | }) 27 | }) -------------------------------------------------------------------------------- /Clase 39/styles.css: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | } -------------------------------------------------------------------------------- /Clase 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Objeto Math 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Clase 4/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Objeto Math 4 | 5 | Objeto estático 6 | 7 | Tenemos que usar su nombre para utilizarlo 8 | 9 | Propiedades: 10 | Math.E - Math.Pi 11 | Métodos: 12 | Math.abs(x) Devuelve el valor absoluto de x 13 | Math.ceil(x) Devuelve el entero más grande mayor o igual que un número. 14 | Math.floor(x) Devuelve el entero más pequeño menor o igual que un número. 15 | Math.pow(x, y) Devuelve la potencia de x elevado a y 16 | Math.sqrt(x) Devuelve la raiz cuadrada de x 17 | Math.random() Genera un número pseudoaleatorio entre 0 y 1 18 | Math.round(x) Devuelve el valor de un número redondeado al entero más cercano. 19 | Math.sign(x) Devuelve el signo de la x, que indica si x es positivo, negativo o cero. 20 | */ 21 | 22 | console.log(Math.E); 23 | console.log(Math.PI); 24 | 25 | let num = 5.9; 26 | 27 | console.log(Math.abs(num)); 28 | 29 | console.log(Math.ceil(num)); 30 | 31 | console.log(Math.floor(num)); 32 | 33 | console.log(Math.pow(3,3)); 34 | 35 | console.log(Math.round(Math.random()*100)); 36 | 37 | //console.log(Math.random() * (max - min)+min); 38 | 39 | console.log(Math.round(Math.random() * (100 - 50)+50)); 40 | 41 | console.log(Math.sign(0)); // -1 | 0 | 1 42 | 43 | console.log(Math.sqrt(2)); 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Clase 40/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Async / await 7 | 8 | 9 | 10 |

    Async / await

    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Clase 40/scripts.js: -------------------------------------------------------------------------------- 1 | /* const getName = async () => { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(() => { 4 | resolve('Dorian') 5 | }, 1500) 6 | }) 7 | } 8 | 9 | const sayHello = async () => { 10 | const name = await getName() 11 | return `Hello ${name}` 12 | } 13 | 14 | sayHello().then(res=>console.log(res)) */ 15 | 16 | const users = [{ id: 1, name: 'Dorian' }, { id: 2, name: 'Laura' }, { id: 3, name: 'Carlos' }] 17 | const emails = [{ id: 1, email: 'dorian@gmail.com' }, { id: 2, email: 'laura@gmail.com' }] 18 | 19 | const getUser = async (id) => { 20 | const user = users.find(user => user.id == id) 21 | if (!user) throw new Error(`Doesn't exist an user with id ${id}`) 22 | else return user 23 | } 24 | 25 | const getEmail = async (user) => { 26 | const email = emails.find(email => email.id == user.id) 27 | if (!email) throw new Error(`${user.name} hasn't email`) 28 | else return ({ 29 | id: user.id, 30 | name: user.name, 31 | email: email.email 32 | }) 33 | } 34 | 35 | const getInfo = async (id) => { 36 | try { 37 | const user = await getUser(id) 38 | const res = await getEmail(user) 39 | return `${user.name} email is ${res.email}` 40 | } catch (error) { 41 | console.log(error) 42 | } 43 | } 44 | 45 | getInfo(3).then(res => console.log(res)) -------------------------------------------------------------------------------- /Clase 41/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | axios 7 | 8 | 9 | 10 |

    Axios - Get

    11 | 12 |
      13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Clase 41/scripts.js: -------------------------------------------------------------------------------- 1 | const button = document.getElementById('button') 2 | 3 | //res = response = respuesta 4 | /* button.addEventListener('click', () => { 5 | fetch('https://jsonplaceholder.typicode.com/users') 6 | .then(res => res.ok ? Promise.resolve(res) : Promise.reject(res)) 7 | 8 | .then(res => res.json()) 9 | .then(res => { 10 | const list = document.getElementById('list') 11 | const fragment = document.createDocumentFragment() 12 | for (const userInfo of res) { 13 | const listItem = document.createElement('LI') 14 | listItem.textContent = `${userInfo.id} - ${userInfo.name}` 15 | fragment.appendChild(listItem) 16 | } 17 | list.appendChild(fragment) 18 | }) 19 | }) */ 20 | 21 | button.addEventListener('click', () => { 22 | axios({ 23 | method: 'GET', 24 | url: 'https://jsonplaceholder.typicode.com/users' 25 | }).then(res => { 26 | const list = document.getElementById('list') 27 | const fragment = document.createDocumentFragment() 28 | for (const userInfo of res.data) { 29 | const listItem = document.createElement('LI') 30 | listItem.textContent = `${userInfo.id} - ${userInfo.name}` 31 | fragment.appendChild(listItem) 32 | } 33 | list.appendChild(fragment) 34 | }).catch(err => console.log(err)) 35 | }) 36 | -------------------------------------------------------------------------------- /Clase 42/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | axios - post 7 | 8 | 9 | 10 |

      Axios - POST

      11 | 12 |
        13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Clase 42/scripts.js: -------------------------------------------------------------------------------- 1 | const button = document.getElementById('button') 2 | 3 | //res = response = respuesta 4 | /* button.addEventListener('click', () => { 5 | const newPost = { 6 | title: 'A new post', 7 | body: ' Lorem ipsum dolor sit amet consectetur adipisicing elit.', 8 | userId: 1 9 | } 10 | 11 | fetch('https://jsonplaceholder.typicode.com/posts', { 12 | method: 'POST', 13 | body: JSON.stringify(newPost), 14 | headers: { 15 | "Content-type": "application/json" 16 | } 17 | }) 18 | .then(res => res.json()) 19 | .then(data => console.log(data)) 20 | }) */ 21 | 22 | button.addEventListener('click', () => { 23 | axios({ 24 | method: 'POST', 25 | url: 'https://jsonplaceholder.typicode.com/post', 26 | data: { 27 | title: 'A new post', 28 | body: ' Lorem ipsum dolor sit amet consectetur adipisicing elit.', 29 | userId: 1 30 | } 31 | }).then(res => console.log(res.data)) 32 | .catch(err => console.log(err)) 33 | }) -------------------------------------------------------------------------------- /Clase 43/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Forms I 7 | 8 | 9 | 10 | 11 |

        Forms I

        12 | 13 |
        14 | 15 | 16 |
        17 |
        18 | 19 | 20 |
        21 |
        22 | 23 | 24 | 25 | 26 |
        27 |
        28 | 29 | 30 |
        31 | 32 |
        33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Clase 43/scripts.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById('form') 2 | const button = document.getElementById('submitButton') 3 | 4 | const name = document.getElementById('name') 5 | const email = document.getElementById('email') 6 | const gender = document.getElementById('gender') 7 | const terms = document.getElementById('terms') 8 | 9 | const formIsValid = { 10 | name: false, 11 | email: false, 12 | gender: false, 13 | terms: false 14 | } 15 | 16 | form.addEventListener('submit', (e) => { 17 | e.preventDefault() 18 | validateForm() 19 | }) 20 | 21 | name.addEventListener('change', (e) => { 22 | if(e.target.value.trim().length > 0) formIsValid.name = true 23 | }) 24 | 25 | email.addEventListener('change', (e) => { 26 | if(e.target.value.trim().length > 0) formIsValid.email = true 27 | }) 28 | 29 | gender.addEventListener('change', (e) => { 30 | console.log(e.target.checked) 31 | if(e.target.checked == true) formIsValid.gender = true 32 | }) 33 | 34 | terms.addEventListener('change', (e) => { 35 | formIsValid.terms = e.target.checked 36 | e.target.checked ? button.removeAttribute('disabled') : button.setAttribute('disabled', true) 37 | }) 38 | 39 | const validateForm = () => { 40 | const formValues = Object.values(formIsValid) 41 | const valid = formValues.findIndex(value => value == false) 42 | if(valid == -1) form.submit() 43 | else alert('Form invalid') 44 | } -------------------------------------------------------------------------------- /Clase 43/styles.css: -------------------------------------------------------------------------------- 1 | .form { 2 | width: 90%; 3 | text-align: center; 4 | } 5 | 6 | .form__field { 7 | width: 100%; 8 | display: flex; 9 | justify-content: space-between; 10 | align-items: center; 11 | margin-bottom: 1rem; 12 | } -------------------------------------------------------------------------------- /Clase 44-45-46-47/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Expresiones regulares 7 | 8 | 9 | 10 |

        11 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa tempore provident vero facilis soluta dolore in nobis numquam, a nesciunt est, itaque deleniti minima maxime assumenda exercitationem perferendis amet quo. 12 |

        13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Clase 44-45-46-47/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Expresiones regulares: 3 | Son una secuencia de caracteres que forma un patrón de búsqueda, principalmente utilizada para la búsqueda de patrones de cadenas de caracteres u operaciones de sustituciones. 4 | https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Regular_Expressions 5 | 6 | Página para evaluar expresiones regulares: https://regex101.com/ 7 | 8 | sintaxis: 9 | /patron/ 10 | Banderas: 11 | i: ignore case. No diferencia entre mayusculas y minúsculas 12 | g: global. Busca de forma global, es decir, no se para después de la primera coincidencia 13 | 14 | Comodines: 15 | -Sustitución: Define un comodín dentro del patron. El símbolo es el "." 16 | 17 | -Listado de caracteres válidos: Entre corchetes se pone una lista de los caracteres válidos. 18 | [aeiou] Con esto cogeríamos todas las vocales 19 | 20 | -Rangos: Entre corchetes si ponemos un guión entre dos caracteres establecemos un rango. [a-z] Todas las letras minúsculas. 21 | Tabla ASCII https://ascii.cl/es/ 22 | 23 | -Mezcla entre rangos y listas: 24 | Podemos unir los dos anteriores en una sola expresión. [0-5ou] Serían números del 0 al 5, la letra "o" y la letra "u" 25 | 26 | -Cadenas completas: 27 | Para establecer una cadena completa debe ir entre paréntesis, si queremos más palabras irán separadas por un pipe. (lorem|amet) es válida la palabra "lorem" y la palabra "amet" 28 | 29 | Delimitadores: 30 | ^ Antes de este símbolo no puede haber nada 31 | $ Después de este símbolo no puede haber nada 32 | ^hola$ 33 | Cantidad: 34 | - llaves: lo que está antes tiene que aparecer la cantidad exacta de veces. Hay tres combinaciones posibles. 35 | {n} Se tiene que repetir n veces 36 | {n,m} Se tiene que repetir entre n y m veces, ambas incluidas. 37 | {n,} Se tiene que repetir como mínimo n veces y sin máximo 38 | ^[a-zA-Z]{1,3}@{1}$ 39 | -asterisco: Lo que está antes del asterisco puede estar, puede no estar y se puede repetir. .*@.*\..* 40 | -interrogación: Lo que está antes de la interrogación puede no estar, pero si está solo puede aparecer una vez. 41 | ^[ae]?$ 42 | - operador +: lo que está antes del + tiene que estár una vez como mínimo 43 | A-[0-9]+ 44 | 45 | Caracteres: 46 | \s: Coincide con un carácter de espacio, entre ellos incluidos espacio, tab, salto de página, salto de linea y retorno de carro. ^[a-zA-Z]+\s[a-zA-Z]+$ 47 | \S: Coincide con todo menos caracteres de espacio ^\S{5}$ 48 | \d: Coincide con un carácter de número. Equivalente a [0-9] ^\d{5}$ 49 | \D: Coincide con cualquier carácter no numérico. Equivalente a [^0-9] ^\D{5}$ 50 | \w: Coincide con cualquier carácter alfanumérico, incluyendo el guión bajo. Equivalente a [A-Za-z0-9_] ^\w+@$ 51 | \W: Coincide con todo menos caracteres de palabra. ^\W+$ 52 | 53 | 54 | */ 55 | 56 | const text = document.getElementById('text').textContent 57 | const regEx = /lorem/gi 58 | const regEx2 = new RegExp('lorem', 'gi') 59 | const regEx3 = new RegExp('/lorem/', 'gi') 60 | 61 | console.log(regEx.test(text)) 62 | console.log(text.includes('Lorem')) -------------------------------------------------------------------------------- /Clase 48/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Librería validaciones 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Clase 48/validate.js: -------------------------------------------------------------------------------- 1 | const validateDni = (dni) => { 2 | const validChars = 'TRWAGMYFPDXBNJZSQVHLCKET' 3 | const nifRexp = /^[0-9]{8}[TRWAGMYFPDXBNJZSQVHLCKET]{1}$/i 4 | const nieRexp = /^[XYZ]{1}[0-9]{7}[TRWAGMYFPDXBNJZSQVHLCKET]{1}$/i 5 | const str = dni.toString().toUpperCase() 6 | 7 | if(!nifRexp.test(str) && !nieRexp.test(str)) console.log('DNI incorrecto') 8 | 9 | const nie = str 10 | .replace(/^[X]/, '0') 11 | .replace(/^[Y]/, '1') 12 | .replace(/^[Z]/, '2') 13 | 14 | const letter = str.substr(-1) 15 | const charIndex = parseInt(nie.substr(0, 8)) % 23 16 | 17 | if(validChars.charAt(charIndex) === letter) console.log('DNI válido') 18 | 19 | console.log('DNI incorrecto') 20 | } 21 | 22 | const validateEmail = (email) => { 23 | const emailRegex = /^(([^<>()\[\]\\.,:\s@"]+(\.[^<>()\[\]\\.,:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ 24 | 25 | if(emailRegex.test(email)) console.log('email válido') 26 | else console.log('email incorrecto') 27 | } 28 | 29 | const validateIban = (iban) => { 30 | const ibanRegex = /([A-Z]{2})\s*\t*(\d\d)\s*\t*(\d\d\d\d)\s*\t*(\d\d\d\d)\s*\t*(\d\d)\s*\t*(\d\d\d\d\d\d\d\d\d\d)/g 31 | 32 | if(ibanRegex.test(iban)) console.log('iban válido') 33 | else console.log('iban incorrecto') 34 | } 35 | 36 | const validatePasswordComplex = (password) => { 37 | //Should have 1 lowercase letter, 1 uppercase letter, 1 number, 1 special character and be at least 8 characters long 38 | const passwordRegex = /(?=(.*[0-9]))(?=.*[\!@#$%^&*()\\[\]{}\-_+=~`|:"'<>,./?])(?=.*[a-z])(?=(.*[A-Z]))(?=(.*)).{8,}/ 39 | if(passwordRegex.test(password)) console.log('password válido') 40 | else console.log('password incorrecto') 41 | } 42 | 43 | const validatePasswordModerate = (password) => { 44 | //Should have 1 lowercase letter, 1 uppercase letter, 1 number, and be at least 8 characters long 45 | const passwordRegex = /(?=(.*[0-9]))((?=.*[A-Za-z0-9])(?=.*[A-Z])(?=.*[a-z]))^.{8,}$/ 46 | if(passwordRegex.test(password)) console.log('password válido') 47 | else console.log('password incorrecto') 48 | } 49 | 50 | const validateUsername = (username) => { 51 | //Alphanumeric string that may include _ and – having a length of 3 to 16 characters – 52 | const usernameRegex = /^[a-z0-9_-]{3,16}$/ 53 | if(usernameRegex.test(username)) console.log('username válido') 54 | else console.log('username incorrecto') 55 | } 56 | 57 | const validateUrl = (url) => { 58 | const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#()?&//=]*)/ 59 | if(urlRegex.test(url)) console.log('url válida') 60 | else console.log('url incorrecta') 61 | } 62 | 63 | const validateIP = (ip) => { 64 | const ipRegex = /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))/g 65 | if(ipRegex.test(ip)) console.log('ip válida') 66 | else console.log('ip incorrecta') 67 | } 68 | 69 | const validateHexadecimal = (hexadecimal) => { 70 | const hexadecimalRegex = /^#?([a-f0-9]{6}|[a-f0-9]{3})$/ 71 | if(hexadecimalRegex.test(hexadecimal)) console.log('hexadecimal válido') 72 | else console.log('hexadecimal incorrecto') 73 | } 74 | 75 | const validateCreditCard = (card) => { 76 | const creditCardRegex = /^(?:4[0-9]{12}(?:[0-9]{3})?|[25][1-7][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/ 77 | if(creditCardRegex.test(card)) console.log('card válido') 78 | else console.log('card incorrecto') 79 | } 80 | 81 | validateEmail('dorian@gmail.com') -------------------------------------------------------------------------------- /Clase 49/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | API Web Storage 7 | 8 | 9 | 10 | 11 |
        12 |
        13 | 14 | 15 |
        16 |
        17 | 18 | 19 |
        20 | 21 |
        22 | 23 |
        24 | 27 |

        28 |
        29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Clase 49/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | API webStorage: 3 | Los dos mecanismos en el almacenamiento web son los siguientes: 4 | 5 | sessionStorage mantiene un área de almacenamiento separada para cada origen que está disponible mientras dure la sesión de la página (mientras el navegador esté abierto, incluyendo recargas de página y restablecimientos). 6 | 7 | localStorage hace lo mismo, pero persiste incluso cuando el navegador se cierre y se reabra. 8 | 9 | Ambos funcionan con clave:valor y tienen dos métodos fundamentales setItem() para asignar una clave:valor y getItem() que recibe como parámetro la clave de la que quieremos obtener el valor 10 | */ 11 | 12 | const form = document.getElementById('form') 13 | const keys = document.getElementById('keys') 14 | 15 | form.addEventListener('submit', (e) => { 16 | e.preventDefault() 17 | 18 | // const person = { 19 | // name: 'Dorian', 20 | // email: 'dorian@gmail.com' 21 | // } 22 | 23 | // sessionStorage.setItem('person', JSON.stringify(person)) 24 | // sessionStorage.setItem('name', 'Dorian') 25 | 26 | localStorage.setItem(form.key.value, form.value.value) 27 | 28 | keys.innerHTML += `` 29 | 30 | form.reset() 31 | }) 32 | 33 | keys.addEventListener('change', () => { 34 | document.getElementById('infoValue').textContent = 35 | localStorage.getItem(keys[ keys.selectedIndex ].textContent) 36 | }) 37 | 38 | // localStorage.clear() 39 | localStorage.removeItem('name') -------------------------------------------------------------------------------- /Clase 49/styles.css: -------------------------------------------------------------------------------- 1 | .form { 2 | margin-bottom: 1rem; 3 | } 4 | .form__field { 5 | display: flex; 6 | justify-content: space-between; 7 | width: 200px; 8 | margin-bottom: 1rem; 9 | } 10 | 11 | .info { 12 | display: flex; 13 | align-items: center; 14 | } 15 | 16 | .info p { 17 | margin: 0 1rem; 18 | } 19 | -------------------------------------------------------------------------------- /Clase 5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Condicional if 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Clase 5/scripts.js: -------------------------------------------------------------------------------- 1 | /* Condicional simple */ 2 | let num = 3; 3 | 4 | if(num>0){ 5 | console.log(`${num} es mayor que 0`); 6 | console.log(`${num} es mayor que 0`); 7 | } 8 | 9 | /* Condicional compuesto */ 10 | if(num>0){ 11 | console.log(`${num} es mayor que 0`); 12 | 13 | }else{ 14 | console.log(`${num} es menor que 0`); 15 | } 16 | 17 | /* Condicional múltiple */ 18 | 19 | if(num>0){ 20 | console.log(`${num} es mayor que 0`); 21 | 22 | }else if(num<0){ 23 | console.log(`${num} es menor que 0`); 24 | }else{ 25 | console.log(`${num} es igual a 0`); 26 | } 27 | 28 | 29 | let num1 = 0; 30 | let num2 = 0; 31 | /* Operadores lógicos */ 32 | 33 | /* && and */ 34 | /* || o */ 35 | 36 | if(num1>0){ 37 | if(num2>0){ 38 | console.log(`${num1} y ${num2} son mayores que 0`); 39 | }else if(num2<0){ 40 | console.log(`${num1} es mayor que 0 y num 2 es menor que 0`); 41 | }else{ 42 | console.log(`${num1} es mayor que 0 y num 2 es igual a 0`); 43 | } 44 | }else if(num1<0){ 45 | if(num2>0){ 46 | console.log(`${num1} no es mayor que 0 y ${num2} es mayor que 0`); 47 | }else if(num2<0){ 48 | console.log(`${num1} y ${num2} son menores que 0`); 49 | }else{ 50 | console.log(`${num1} es menor que 0 y num 2 es igual a 0`); 51 | } 52 | }else{ 53 | if(num2>0){ 54 | console.log(`${num1} es igual a 0 y ${num2} es mayor que 0`); 55 | }else if(num2<0){ 56 | console.log(`${num1} es igual a 0 y ${num2} es menor que 0`); 57 | }else{ 58 | console.log(`${num1} y ${num2} son iguales a 0`); 59 | } 60 | } 61 | 62 | let word = 'Hola'; 63 | 64 | if(word.length>4){ 65 | console.log(`${word} tiene más de 4 letras`); 66 | }else if(word.length<4){ 67 | console.log(`${word} tiene menos de 4 letras`); 68 | }else{ 69 | console.log(`${word} tiene 4 letras`); 70 | } 71 | 72 | let respuesta = true; 73 | 74 | if(respuesta==true) console.log(`Respuesta tiene el valor true`); 75 | if(respuesta==false) console.log(`Respuesta tiene el valor false`); 76 | 77 | if(respuesta) console.log(`Respuesta tiene el valor true`); 78 | if(!respuesta) console.log(`Respuesta tiene el valor false`); 79 | -------------------------------------------------------------------------------- /Clase 50/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | API Drag & Drop 7 | 8 | 9 | 10 | 11 | smile face 12 |
        Drop Zone
        13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Clase 50/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | API drag & drop: 3 | 4 | Existen dos partes principales en esta API, el objeto a arrastrar y la zona donde vamos a dejarlo 5 | 6 | Para controlar estas acciones tenemos varios eventos de cada una de las partes 7 | Objeto a arrastrar: 8 | dragstart: Se dispara al comenzar a arrastrar 9 | drag: Se dispara mientras arrastramos 10 | dragend: Se dispara cuando soltamos el objeto 11 | 12 | Zona de destino: 13 | dragenter: Se dispara cuando el objeto entra en la zona de destino 14 | dragover: Se dispara cuando el objeto se mueve sobre la zona de destino 15 | drop: Se dispara cuando soltamos el objeto en la zona de destino 16 | dragleave: Se dispara cuando el objeto sale de la zona de destino 17 | */ 18 | 19 | const smile = document.getElementById('smile') 20 | const dropZone = document.getElementById('drop-zone') 21 | 22 | smile.addEventListener('dragend', () => { 23 | console.log('Drag End') 24 | }) 25 | 26 | dropZone.addEventListener('dragover', (e) => { 27 | e.preventDefault() 28 | console.log('Drag Over') 29 | }) 30 | 31 | dropZone.addEventListener('drop', (e) => { 32 | e.preventDefault() 33 | console.log('Drop') 34 | }) 35 | 36 | dropZone.addEventListener('dragleave', (e) => { 37 | e.preventDefault() 38 | console.log('Drag Leave') 39 | }) 40 | 41 | 42 | -------------------------------------------------------------------------------- /Clase 50/smile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 9 | 12 | 13 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Clase 50/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #26ff0085; 4 | font-family: sans-serif; 5 | } 6 | 7 | .smile { 8 | width: 50px; 9 | } 10 | 11 | .drop-zone { 12 | height: 100px; 13 | border: 2px dotted black; 14 | width: 100px; 15 | margin-top: 3rem; 16 | } 17 | -------------------------------------------------------------------------------- /Clase 51/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | API Drag & Drop 7 | 8 | 9 | 10 | 11 |
        12 |
        13 |

        Pending Tasks

        14 |
        Task 1
        15 |
        Task 2
        16 |
        Task 3
        17 |
        Task 4
        18 |
        Task 5
        19 |
        20 |
        21 |

        Finished Tasks

        22 |
        23 |
        24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Clase 51/scripts.js: -------------------------------------------------------------------------------- 1 | const pendingTasks = document.getElementById('pending-tasks') 2 | const finishedTasks = document.getElementById('finished-tasks') 3 | //dataTransfer 4 | //setData: Establece la información que queremos compartir 5 | //getData: Establece la información que queremos obtener 6 | pendingTasks.addEventListener('dragstart', (e) => { 7 | e.dataTransfer.setData('text/plain', e.target.id) 8 | }) 9 | 10 | pendingTasks.addEventListener('drag', (e) => { 11 | e.target.classList.add('active') 12 | }) 13 | 14 | pendingTasks.addEventListener('dragend', (e) => { 15 | e.target.classList.remove('active') 16 | }) 17 | 18 | //OBLIGATORIO, SI NO, NO FUNCIONA 19 | finishedTasks.addEventListener('dragover', (e) => { 20 | e.preventDefault() 21 | }) 22 | 23 | finishedTasks.addEventListener('drop', (e) => { 24 | e.preventDefault() 25 | const element = document.getElementById(e.dataTransfer.getData('text')) 26 | element.classList.remove('active') 27 | finishedTasks.appendChild(pendingTasks.removeChild(element)) 28 | }) -------------------------------------------------------------------------------- /Clase 51/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #ec407a; 4 | font-family: sans-serif; 5 | color: #fff; 6 | user-select: none; 7 | } 8 | 9 | .container { 10 | margin-top: 1rem; 11 | display: flex; 12 | justify-content: center; 13 | align-items: flex-start; 14 | } 15 | 16 | .title { 17 | margin: 0 0 1rem; 18 | padding: 1rem; 19 | border-bottom: 1px solid black; 20 | background-color: #7e57c2; 21 | } 22 | 23 | .tasks { 24 | width: 30%; 25 | text-align: center; 26 | background: rgb(48, 166, 221); 27 | border: 1px solid black; 28 | min-height: 130px; 29 | } 30 | 31 | .tasks:first-child { 32 | margin-right: 1rem; 33 | } 34 | 35 | .task { 36 | background-color: #7e57c2; 37 | padding: 1rem; 38 | border-bottom: 1px solid #000; 39 | cursor: move; 40 | } 41 | 42 | .task:first-child { 43 | border-top: 1px solid #000; 44 | } 45 | 46 | .task:last-child { 47 | border-bottom: none; 48 | } 49 | 50 | .active { 51 | background-color: #fff; 52 | color: #000; 53 | } -------------------------------------------------------------------------------- /Clase 52/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | API file 7 | 8 | 9 | 10 | 11 | 12 |
        13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Clase 52/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | API File 3 | Esta API nos sirve para leer archivos que el usuario cargue en la web. Se pueden cargar archivos desde un input de tipo file o desde el objeto DataTransfer de la API Drag&Drop. 4 | 5 | La interfaz más utilizada para interactuar con ella es FileReader 6 | https://developer.mozilla.org/es/docs/Web/API/FileReader 7 | */ 8 | 9 | const fileInput = document.getElementById('file') 10 | const img = document.getElementById('img') 11 | const images = document.getElementById('images') 12 | const text = document.getElementById('text') 13 | 14 | // fileInput.addEventListener('change', (e) => { 15 | // const file = e.target.files[0] 16 | // const fileReader = new FileReader() 17 | // fileReader.readAsText(file) 18 | // fileReader.addEventListener('load', (e) => { 19 | // text.textContent = e.target.result 20 | // }) 21 | // }) 22 | 23 | //Carga simple de imagen 24 | // fileInput.addEventListener('change', (e) => { 25 | // const file = e.target.files[0] 26 | // const fileReader = new FileReader() 27 | // fileReader.readAsDataURL(file) 28 | // fileReader.addEventListener('load', (e) => { 29 | // img.setAttribute('src', e.target.result) 30 | // }) 31 | // }) 32 | 33 | //Carga múltiple de imágenes 34 | fileInput.addEventListener('change', (e) => { 35 | const files = e.target.files 36 | const fragment = document.createDocumentFragment() 37 | for (const file of files) { 38 | const fileReader = new FileReader() 39 | const img = document.createElement('IMG') 40 | fileReader.readAsDataURL(file) 41 | fileReader.addEventListener('load', (e) => { 42 | img.setAttribute('src', e.target.result) 43 | }) 44 | fragment.appendChild(img) 45 | } 46 | images.appendChild(fragment) 47 | }) -------------------------------------------------------------------------------- /Clase 52/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #ec407a; 4 | font-family: sans-serif; 5 | color: #fff; 6 | user-select: none; 7 | } 8 | 9 | img { 10 | max-width: 100%; 11 | } 12 | -------------------------------------------------------------------------------- /Clase 53/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | API file II 7 | 8 | 9 | 10 | 11 | 12 | 13 |
        14 | 15 |
        16 | 17 |
        18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Clase 53/scripts.js: -------------------------------------------------------------------------------- 1 | const fileInput = document.getElementById('file') 2 | const progress = document.getElementById('progress') 3 | 4 | // fileInput.addEventListener('change', (e) => { 5 | // const file = e.target.files[0] 6 | // const fileReader = new FileReader() 7 | // fileReader.readAsDataURL(file) 8 | 9 | // fileReader.addEventListener('progress', (e) => { 10 | // progress.style.width = Number.parseInt(e.loaded * 100 / e.total) + '%' 11 | // }) 12 | 13 | // fileReader.addEventListener('loadend', () => { 14 | // progress.style.width = '100%' 15 | // }) 16 | // }) 17 | 18 | const root = document.documentElement 19 | 20 | fileInput.addEventListener('change', (e) => { 21 | const file = e.target.files[0] 22 | const fileReader = new FileReader() 23 | fileReader.readAsDataURL(file) 24 | 25 | fileReader.addEventListener('progress', (e) => { 26 | root.style.setProperty('--bar-width', Number.parseInt(e.loaded * 100 / e.total) + '%') 27 | }) 28 | 29 | fileReader.addEventListener('loadend', () => { 30 | root.style.setProperty('--bar-width', '100%') 31 | }) 32 | }) -------------------------------------------------------------------------------- /Clase 53/styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bar-width: 0; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | background-color: #ec407a; 8 | font-family: sans-serif; 9 | color: #fff; 10 | user-select: none; 11 | } 12 | 13 | img { 14 | max-width: 100%; 15 | } 16 | 17 | .load-bar { 18 | width: 50%; 19 | background-color: #ccc; 20 | height: 10px; 21 | position: relative; 22 | margin: 1rem 0; 23 | } 24 | 25 | .load-bar::after { 26 | content: ""; 27 | display: block; 28 | position: absolute; 29 | top: 0; 30 | left: 0; 31 | background: royalblue; 32 | width: var(--bar-width); 33 | height: 10px; 34 | } 35 | 36 | .progress { 37 | display: block; 38 | background-color: royalblue; 39 | height: 10px; 40 | width: 0; 41 | } 42 | -------------------------------------------------------------------------------- /Clase 54/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | API file + API Drag & Drop 7 | 8 | 9 | 10 | 11 | 12 |
        13 |
        14 | 15 | 16 |
        17 | 18 |

        19 | Drop file or click to upload file 20 |

        21 |
        22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Clase 54/scripts.js: -------------------------------------------------------------------------------- 1 | const fileInput = document.getElementById('file') 2 | const dropZone = document.getElementById('drop-zone') 3 | 4 | dropZone.addEventListener('click', () => fileInput.click()) 5 | 6 | dropZone.addEventListener('dragover', (e) => { 7 | e.preventDefault() 8 | dropZone.classList.add('drop-zone--active') 9 | }) 10 | 11 | dropZone.addEventListener('dragleave', (e) => { 12 | e.preventDefault() 13 | dropZone.classList.remove('drop-zone--active') 14 | }) 15 | 16 | dropZone.addEventListener('drop', (e) => { 17 | e.preventDefault() 18 | fileInput.files = e.dataTransfer.files 19 | // console.log(fileInput.files); 20 | }) 21 | 22 | fileInput.addEventListener('change', (e) => { 23 | console.log(fileInput.files); 24 | }) -------------------------------------------------------------------------------- /Clase 54/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #2f3238; 4 | font-family: sans-serif; 5 | color: #222; 6 | user-select: none; 7 | } 8 | 9 | .drop-zone { 10 | width: 80%; 11 | margin: 1rem auto; 12 | height: 300px; 13 | background-color: #838383; 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | font-size: 1.5rem; 19 | border: 5px dashed #caced6; 20 | } 21 | 22 | .drop-zone--active { 23 | border: 5px solid #caced6; 24 | background-color: #414141; 25 | color: #caced6; 26 | } 27 | 28 | .form { 29 | width: 100%; 30 | text-align: center; 31 | } 32 | 33 | .form__button { 34 | background: orangered; 35 | border: none; 36 | padding: 0.2rem 0.8rem; 37 | border-radius: 15px; 38 | color: #414141; 39 | cursor: pointer; 40 | } 41 | 42 | .hide { 43 | display: none; 44 | } 45 | -------------------------------------------------------------------------------- /Clase 55/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IndexedDB 7 | 8 | 9 | 10 | 11 |
        12 | 13 | 14 | 19 | 20 |
        21 |
        22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Clase 55/scripts.js: -------------------------------------------------------------------------------- 1 | const indexedDB = window.indexedDB 2 | 3 | if (indexedDB) { 4 | let db 5 | const request = indexedDB.open('tasksList', 1) 6 | 7 | request.onsuccess = () => { 8 | db = request.result 9 | console.log('OPEN', db) 10 | } 11 | 12 | request.onupgradeneeded = () => { 13 | db = request.result 14 | console.log('Create', db) 15 | const objectStore = db.createObjectStore('tasks') 16 | } 17 | 18 | request.onerror = (error) => { 19 | console.log('Error', error) 20 | } 21 | } -------------------------------------------------------------------------------- /Clase 55/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #2f3238; 4 | font-family: sans-serif; 5 | color: #ccc; 6 | user-select: none; 7 | } 8 | 9 | .form { 10 | width: 100%; 11 | margin-top: 2rem; 12 | text-align: center; 13 | } 14 | 15 | .button { 16 | background: orangered; 17 | border: none; 18 | padding: 0.2rem 0.8rem; 19 | border-radius: 15px; 20 | color: #ccc; 21 | cursor: pointer; 22 | } 23 | -------------------------------------------------------------------------------- /Clase 56/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IndexedDB 7 | 8 | 9 | 10 | 11 |
        12 | 13 | 14 | 19 | 20 |
        21 |
        22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Clase 56/scripts.js: -------------------------------------------------------------------------------- 1 | //Especificación oficial: https://developer.mozilla.org/es/docs/IndexedDB-840092-dup 2 | 3 | const indexedDB = window.indexedDB 4 | const form = document.getElementById('form') 5 | 6 | if (indexedDB && form) { 7 | let db 8 | const request = indexedDB.open('tasksList', 1) 9 | 10 | request.onsuccess = () => { 11 | db = request.result 12 | console.log('OPEN', db) 13 | } 14 | 15 | request.onupgradeneeded = (e) => { 16 | db = e.target.result 17 | console.log('Create', db) 18 | const objectStore = db.createObjectStore('tasks', { 19 | autoIncrement: true 20 | }) 21 | } 22 | 23 | request.onerror = (error) => { 24 | console.log('Error', error) 25 | } 26 | 27 | const addData = (data) => { 28 | const transaction = db.transaction(['tasks'], 'readwrite') 29 | const objectStore = transaction.objectStore('tasks') 30 | const request = objectStore.add(data) 31 | } 32 | 33 | form.addEventListener('submit', (e) => { 34 | e.preventDefault() 35 | const data = { 36 | taskTitle: e.target.task.value, 37 | taskPriority: e.target.priority.value 38 | } 39 | addData(data) 40 | }) 41 | } -------------------------------------------------------------------------------- /Clase 56/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #2f3238; 4 | font-family: sans-serif; 5 | color: #ccc; 6 | user-select: none; 7 | } 8 | 9 | .form { 10 | width: 100%; 11 | margin-top: 2rem; 12 | text-align: center; 13 | } 14 | 15 | .button { 16 | background: orangered; 17 | border: none; 18 | padding: 0.2rem 0.8rem; 19 | border-radius: 15px; 20 | color: #ccc; 21 | cursor: pointer; 22 | } 23 | -------------------------------------------------------------------------------- /Clase 57/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IndexedDB 7 | 8 | 9 | 10 | 11 |
        12 | 13 | 14 | 19 | 20 |
        21 |
        22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Clase 57/scripts.js: -------------------------------------------------------------------------------- 1 | //Especificación oficial: https://developer.mozilla.org/es/docs/IndexedDB-840092-dup 2 | 3 | const indexedDB = window.indexedDB 4 | const form = document.getElementById('form') 5 | const tasks = document.getElementById('tasks') 6 | 7 | if (indexedDB && form) { 8 | let db 9 | const request = indexedDB.open('tasksList', 1) 10 | 11 | request.onsuccess = () => { 12 | db = request.result 13 | console.log('OPEN', db) 14 | readData() 15 | } 16 | 17 | request.onupgradeneeded = (e) => { 18 | db = e.target.result 19 | console.log('Create', db) 20 | const objectStore = db.createObjectStore('tasks', { 21 | autoIncrement: true 22 | }) 23 | } 24 | 25 | request.onerror = (error) => { 26 | console.log('Error', error) 27 | } 28 | 29 | const addData = (data) => { 30 | const transaction = db.transaction(['tasks'], 'readwrite') 31 | const objectStore = transaction.objectStore('tasks') 32 | const request = objectStore.add(data) 33 | readData() 34 | } 35 | 36 | const readData = () => { 37 | const transaction = db.transaction(['tasks'], 'readonly') 38 | const objectStore = transaction.objectStore('tasks') 39 | const request = objectStore.openCursor() 40 | const fragment = document.createDocumentFragment() 41 | 42 | request.onsuccess = (e) => { 43 | const cursor = e.target.result 44 | if (cursor) { 45 | const taskTitle = document.createElement('P') 46 | taskTitle.textContent = cursor.value.taskTitle 47 | fragment.appendChild(taskTitle) 48 | const taskPriority = document.createElement('P') 49 | taskPriority.textContent = cursor.value.taskPriority 50 | fragment.appendChild(taskPriority) 51 | cursor.continue() 52 | } else { 53 | tasks.textContent = '' 54 | tasks.appendChild(fragment) 55 | } 56 | } 57 | } 58 | 59 | form.addEventListener('submit', (e) => { 60 | e.preventDefault() 61 | const data = { 62 | taskTitle: e.target.task.value, 63 | taskPriority: e.target.priority.value 64 | } 65 | addData(data) 66 | }) 67 | } -------------------------------------------------------------------------------- /Clase 57/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #2f3238; 4 | font-family: sans-serif; 5 | color: #ccc; 6 | user-select: none; 7 | } 8 | 9 | .form { 10 | width: 100%; 11 | margin-top: 2rem; 12 | text-align: center; 13 | } 14 | 15 | .button { 16 | background: orangered; 17 | border: none; 18 | padding: 0.2rem 0.8rem; 19 | border-radius: 15px; 20 | color: #ccc; 21 | cursor: pointer; 22 | margin: 1rem 0; 23 | } 24 | 25 | .tasks { 26 | display: grid; 27 | grid-template-columns: repeat(2, 1fr); 28 | justify-items: center; 29 | } 30 | -------------------------------------------------------------------------------- /Clase 58/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IndexedDB 7 | 8 | 9 | 10 | 11 |
        12 | 13 | 14 | 19 | 20 |
        21 |
        22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Clase 58/scripts.js: -------------------------------------------------------------------------------- 1 | //Especificación oficial: https://developer.mozilla.org/es/docs/IndexedDB-840092-dup 2 | 3 | const indexedDB = window.indexedDB 4 | const form = document.getElementById('form') 5 | const tasks = document.getElementById('tasks') 6 | 7 | if (indexedDB && form) { 8 | let db 9 | const request = indexedDB.open('tasksList', 1) 10 | 11 | request.onsuccess = () => { 12 | db = request.result 13 | console.log('OPEN', db) 14 | readData() 15 | } 16 | 17 | request.onupgradeneeded = (e) => { 18 | db = e.target.result 19 | console.log('Create', db) 20 | const objectStore = db.createObjectStore('tasks', { 21 | keyPath: 'taskTitle' 22 | }) 23 | } 24 | 25 | request.onerror = (error) => { 26 | console.log('Error', error) 27 | } 28 | 29 | const addData = (data) => { 30 | const transaction = db.transaction(['tasks'], 'readwrite') 31 | const objectStore = transaction.objectStore('tasks') 32 | const request = objectStore.add(data) 33 | readData() 34 | } 35 | 36 | const getData = (key) => { 37 | const transaction = db.transaction(['tasks'], 'readwrite') 38 | const objectStore = transaction.objectStore('tasks') 39 | const request = objectStore.get(key) 40 | 41 | request.onsuccess = (e) => { 42 | form.task.value = request.result.taskTitle 43 | form.priority.value = request.result.taskPriority 44 | form.button.dataset.action = 'update' 45 | form.button.textContent = 'Update Task' 46 | } 47 | } 48 | 49 | const updateData = (data) => { 50 | const transaction = db.transaction(['tasks'], 'readwrite') 51 | const objectStore = transaction.objectStore('tasks') 52 | const request = objectStore.put(data) 53 | request.onsuccess = () => { 54 | form.button.dataset.action = 'add' 55 | form.button.textContent = 'Add Task' 56 | readData() 57 | } 58 | } 59 | 60 | const readData = () => { 61 | const transaction = db.transaction(['tasks'], 'readonly') 62 | const objectStore = transaction.objectStore('tasks') 63 | const request = objectStore.openCursor() 64 | const fragment = document.createDocumentFragment() 65 | 66 | request.onsuccess = (e) => { 67 | const cursor = e.target.result 68 | if (cursor) { 69 | 70 | const taskTitle = document.createElement('P') 71 | taskTitle.textContent = cursor.value.taskTitle 72 | fragment.appendChild(taskTitle) 73 | 74 | const taskPriority = document.createElement('P') 75 | taskPriority.textContent = cursor.value.taskPriority 76 | fragment.appendChild(taskPriority) 77 | 78 | const taskUpdate = document.createElement('BUTTON') 79 | taskUpdate.dataset.type = 'update' 80 | taskUpdate.dataset.key = cursor.key 81 | taskUpdate.textContent = 'Update' 82 | fragment.appendChild(taskUpdate) 83 | 84 | const taskDelete = document.createElement('BUTTON') 85 | taskDelete.textContent = 'Delete' 86 | fragment.appendChild(taskDelete) 87 | 88 | cursor.continue() 89 | } else { 90 | tasks.textContent = '' 91 | tasks.appendChild(fragment) 92 | } 93 | } 94 | } 95 | 96 | form.addEventListener('submit', (e) => { 97 | e.preventDefault() 98 | const data = { 99 | taskTitle: e.target.task.value, 100 | taskPriority: e.target.priority.value 101 | } 102 | 103 | 104 | if (e.target.button.dataset.action == 'add') { 105 | addData(data) 106 | } else if (e.target.button.dataset.action == 'update') { 107 | updateData(data) 108 | } 109 | 110 | form.reset() 111 | }) 112 | 113 | tasks.addEventListener('click', (e) => { 114 | if (e.target.dataset.type == 'update') { 115 | getData(e.target.dataset.key) 116 | } 117 | }) 118 | } -------------------------------------------------------------------------------- /Clase 58/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #2f3238; 4 | font-family: sans-serif; 5 | color: #ccc; 6 | user-select: none; 7 | } 8 | 9 | .form { 10 | width: 100%; 11 | margin-top: 2rem; 12 | text-align: center; 13 | } 14 | 15 | .button { 16 | background: orangered; 17 | border: none; 18 | padding: 0.2rem 0.8rem; 19 | border-radius: 15px; 20 | color: #ccc; 21 | cursor: pointer; 22 | margin: 1rem 0; 23 | } 24 | 25 | .tasks { 26 | display: grid; 27 | grid-template-columns: repeat(4, 1fr); 28 | justify-items: center; 29 | align-items: center; 30 | } 31 | -------------------------------------------------------------------------------- /Clase 59/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IndexedDB 7 | 8 | 9 | 10 | 11 |
        12 | 13 | 14 | 19 | 20 |
        21 |
        22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Clase 59/scripts.js: -------------------------------------------------------------------------------- 1 | //Especificación oficial: https://developer.mozilla.org/es/docs/IndexedDB-840092-dup 2 | 3 | /* 4 | Contenido extra para buscar: 5 | Método getAll() para obtener todos los registros de la base de datos 6 | Método clear() para borrar objetos del almacen 7 | Método deleteDatabase() para borrar la base de datos 8 | Metodo onBlocked() para bloquear bases de datos en los cambios de version 9 | Objeto IDBKeyRange para búsquedas en la base de datos 10 | Método createIndex() para la creación de índices en la base de datos 11 | Versionado de bases de datos 12 | 13 | Libreria indexedDB 14 | https://dexie.org/ 15 | */ 16 | const indexedDB = window.indexedDB 17 | const form = document.getElementById('form') 18 | const tasks = document.getElementById('tasks') 19 | 20 | if (indexedDB && form) { 21 | let db 22 | const request = indexedDB.open('tasksList', 1) 23 | 24 | request.onsuccess = () => { 25 | db = request.result 26 | console.log('OPEN', db) 27 | readData() 28 | } 29 | 30 | request.onupgradeneeded = (e) => { 31 | db = e.target.result 32 | console.log('Create', db) 33 | const objectStore = db.createObjectStore('tasks', { 34 | keyPath: 'taskTitle' 35 | }) 36 | } 37 | 38 | request.onerror = (error) => { 39 | console.log('Error', error) 40 | } 41 | 42 | const addData = (data) => { 43 | const transaction = db.transaction(['tasks'], 'readwrite') 44 | const objectStore = transaction.objectStore('tasks') 45 | const request = objectStore.add(data) 46 | readData() 47 | } 48 | 49 | const getData = (key) => { 50 | const transaction = db.transaction(['tasks'], 'readwrite') 51 | const objectStore = transaction.objectStore('tasks') 52 | const request = objectStore.get(key) 53 | 54 | request.onsuccess = (e) => { 55 | form.task.value = request.result.taskTitle 56 | form.priority.value = request.result.taskPriority 57 | form.button.dataset.action = 'update' 58 | form.button.textContent = 'Update Task' 59 | } 60 | } 61 | 62 | const updateData = (data) => { 63 | const transaction = db.transaction(['tasks'], 'readwrite') 64 | const objectStore = transaction.objectStore('tasks') 65 | const request = objectStore.put(data) 66 | request.onsuccess = () => { 67 | form.button.dataset.action = 'add' 68 | form.button.textContent = 'Add Task' 69 | readData() 70 | } 71 | } 72 | 73 | const deleteData = (key) => { 74 | const transaction = db.transaction(['tasks'], 'readwrite') 75 | const objectStore = transaction.objectStore('tasks') 76 | const request = objectStore.delete(key) 77 | request.onsuccess = () => { 78 | readData() 79 | } 80 | } 81 | 82 | const readData = () => { 83 | const transaction = db.transaction(['tasks'], 'readonly') 84 | const objectStore = transaction.objectStore('tasks') 85 | const request = objectStore.openCursor() 86 | const fragment = document.createDocumentFragment() 87 | 88 | request.onsuccess = (e) => { 89 | const cursor = e.target.result 90 | if (cursor) { 91 | 92 | const taskTitle = document.createElement('P') 93 | taskTitle.textContent = cursor.value.taskTitle 94 | fragment.appendChild(taskTitle) 95 | 96 | const taskPriority = document.createElement('P') 97 | taskPriority.textContent = cursor.value.taskPriority 98 | fragment.appendChild(taskPriority) 99 | 100 | const taskUpdate = document.createElement('BUTTON') 101 | taskUpdate.dataset.type = 'update' 102 | taskUpdate.dataset.key = cursor.key 103 | taskUpdate.textContent = 'Update' 104 | fragment.appendChild(taskUpdate) 105 | 106 | const taskDelete = document.createElement('BUTTON') 107 | taskDelete.textContent = 'Delete' 108 | taskDelete.dataset.type = 'delete' 109 | taskDelete.dataset.key = cursor.key 110 | fragment.appendChild(taskDelete) 111 | 112 | cursor.continue() 113 | } else { 114 | tasks.textContent = '' 115 | tasks.appendChild(fragment) 116 | } 117 | } 118 | } 119 | 120 | form.addEventListener('submit', (e) => { 121 | e.preventDefault() 122 | const data = { 123 | taskTitle: e.target.task.value, 124 | taskPriority: e.target.priority.value 125 | } 126 | 127 | 128 | if (e.target.button.dataset.action == 'add') { 129 | addData(data) 130 | } else if (e.target.button.dataset.action == 'update') { 131 | updateData(data) 132 | } 133 | 134 | form.reset() 135 | }) 136 | 137 | tasks.addEventListener('click', (e) => { 138 | if (e.target.dataset.type == 'update') { 139 | getData(e.target.dataset.key) 140 | } else if (e.target.dataset.type == 'delete') { 141 | deleteData(e.target.dataset.key) 142 | } 143 | }) 144 | } -------------------------------------------------------------------------------- /Clase 59/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #2f3238; 4 | font-family: sans-serif; 5 | color: #ccc; 6 | user-select: none; 7 | } 8 | 9 | .form { 10 | width: 100%; 11 | margin-top: 2rem; 12 | text-align: center; 13 | } 14 | 15 | .button { 16 | background: orangered; 17 | border: none; 18 | padding: 0.2rem 0.8rem; 19 | border-radius: 15px; 20 | color: #ccc; 21 | cursor: pointer; 22 | margin: 1rem 0; 23 | } 24 | 25 | .tasks { 26 | display: grid; 27 | grid-template-columns: repeat(4, 1fr); 28 | justify-items: center; 29 | align-items: center; 30 | } 31 | -------------------------------------------------------------------------------- /Clase 6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ordenar 3 números 6 | 7 | 8 |
        9 |
        10 | 11 | 12 | -------------------------------------------------------------------------------- /Clase 6/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Ordena 3 números de mayor a menor 3 | Permutaciones con 3 elementos 4 | Posibilidades 3! = 3*2*1 = 6 5 | abc - 321 6 | acb - 312 7 | bac - 231 8 | bca - 132 9 | cab - 213 10 | cba - 123 11 | */ 12 | 13 | const numbers = document.getElementById('numbers'); 14 | const result = document.getElementById('result'); 15 | 16 | let a=prompt('Introduzca el primer número'); 17 | let b=prompt('Introduzca el segundo número'); 18 | let c=prompt('Introduzca el tercer número'); 19 | 20 | numbers.textContent = `Los numeros introducidos son ${a}, ${b}, ${c}` 21 | 22 | /* Ejercicio */ 23 | 24 | if(a>=b && a>=c){ 25 | if(b>c){ 26 | result.textContent = `El orden es: ${a}, ${b}, ${c}` 27 | }else{ 28 | result.textContent = `El orden es: ${a}, ${c}, ${b}` 29 | } 30 | }else if(b>=a && b>=c){ 31 | if(a>c){ 32 | result.textContent = `El orden es: ${b}, ${a}, ${c}` 33 | }else{ 34 | result.textContent = `El orden es: ${b}, ${c}, ${a}` 35 | } 36 | }else if(c>=a && c>=b){ 37 | if(a>b){ 38 | result.textContent = `El orden es: ${c}, ${a}, ${b}` 39 | }else{ 40 | result.textContent = `El orden es: ${c}, ${b}, ${a}` 41 | } 42 | } 43 | 44 | 45 | -------------------------------------------------------------------------------- /Clase 60/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Visibility 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Clase 60/scripts.js: -------------------------------------------------------------------------------- 1 | /* Vídeo: https://www.pexels.com/es-es/video/2869107/ */ 2 | const video = document.getElementById('video') 3 | 4 | // addEventListener('visibilitychange', (e) => { 5 | // if (document.visibilityState === 'visible') { 6 | // console.log('PLAY') 7 | // video.play() 8 | // } else if (document.visibilityState === 'hidden') { 9 | // console.log('PAUSE') 10 | // video.pause() 11 | // } 12 | // }) 13 | 14 | addEventListener('visibilitychange', () => document.visibilityState === 'visible' ? video.play() : video.pause()) -------------------------------------------------------------------------------- /Clase 60/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #2f3238; 4 | color: #ccc; 5 | } 6 | 7 | .video { 8 | width: 100vw; 9 | } 10 | -------------------------------------------------------------------------------- /Clase 60/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DorianDesings/js2018/d79de46300cf3e00a5b5c436acf149875b02eb37/Clase 60/video.mp4 -------------------------------------------------------------------------------- /Clase 61/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Online/Offline 7 | 8 | 9 | 10 | 11 |

        Ups, it seems you're offline

        12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Clase 61/scripts.js: -------------------------------------------------------------------------------- 1 | const alert = document.getElementById('alert') 2 | 3 | addEventListener('online', (e) => { 4 | setAlert(1) 5 | }) 6 | 7 | addEventListener('offline', (e) => { 8 | setAlert(0) 9 | }) 10 | 11 | const setAlert = (status) => { 12 | alert.classList.remove('alert--online') 13 | alert.classList.remove('alert--offline') 14 | 15 | status === 0 ? 16 | setTimeout(() => { 17 | alert.textContent = "Ups, it seems you're offline" 18 | alert.classList.add('alert--offline') 19 | }, 100) : 20 | setTimeout(() => { 21 | alert.textContent = "Great! You're online again!" 22 | alert.classList.add('alert--online') 23 | }, 100) 24 | } -------------------------------------------------------------------------------- /Clase 61/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #2f3238; 4 | color: #fff; 5 | font-family: sans-serif; 6 | } 7 | 8 | .alert { 9 | position: fixed; 10 | width: 100%; 11 | top: 0; 12 | left: 0; 13 | margin: 0; 14 | padding: 0.5rem; 15 | text-align: center; 16 | transform: translateY(-100%); 17 | } 18 | 19 | .alert--online { 20 | background-color: rgba(0, 255, 0, 0.6); 21 | animation: reveal 4s ease; 22 | } 23 | 24 | .alert--offline { 25 | background-color: rgba(255, 0, 0, 0.6); 26 | animation: reveal 4s ease; 27 | } 28 | 29 | @keyframes reveal { 30 | 0% { 31 | transform: translateY(-100%); 32 | } 33 | 15%, 34 | 85% { 35 | transform: translateY(0); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /Clase 62/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Notifications 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Clase 62/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | https://developer.mozilla.org/es/docs/Web/API/notification 3 | 4 | icono: 5 | https://www.flaticon.es/icono-gratis/en-todo-el-mundo_814513?term=world&page=1&position=18 6 | */ 7 | 8 | const permissions = document.getElementById('permissions') 9 | 10 | permissions.addEventListener('click', () => { 11 | if (Notification.permission !== 'granted') { 12 | getPermissions() 13 | } else { 14 | notify() 15 | } 16 | }) 17 | 18 | const getPermissions = () => { 19 | Notification.requestPermission() 20 | .then(res => console.log(res)) 21 | .catch(err => console.log(err)) 22 | } 23 | 24 | const notify = () => { 25 | const options = { 26 | body: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.', 27 | icon: 'world.png', 28 | data: 'Extra data', 29 | tag: 'notification demo' 30 | } 31 | const notification = new Notification('Hello World', options) 32 | 33 | notification.addEventListener('close', () => console.log('CLOSE')) 34 | notification.addEventListener('show', () => console.log('SHOW')) 35 | 36 | console.log(notification) 37 | } -------------------------------------------------------------------------------- /Clase 62/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background-color: #2f3238; 4 | color: #fff; 5 | font-family: sans-serif; 6 | } 7 | -------------------------------------------------------------------------------- /Clase 62/world.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DorianDesings/js2018/d79de46300cf3e00a5b5c436acf149875b02eb37/Clase 62/world.png -------------------------------------------------------------------------------- /Clase 63/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 |
        box-1
        14 |
        box-2
        15 |
        box-3
        16 |
        box-4
        17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Clase 63/scripts.js: -------------------------------------------------------------------------------- 1 | const boxes = document.querySelectorAll('.box') 2 | 3 | const callback = (entries) => { 4 | entries.forEach(entry => { 5 | if (entry.isIntersecting) { 6 | console.log(entry.target.id, 'is intersecting') 7 | } 8 | }) 9 | } 10 | 11 | const options = { 12 | // root: 13 | // rootMargin: '-200px' 14 | threshold: 0.25 15 | } 16 | 17 | const observer = new IntersectionObserver(callback, options) 18 | boxes.forEach(element => observer.observe(element)) -------------------------------------------------------------------------------- /Clase 63/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #2a2a2a; 3 | text-align: center; 4 | font-family: sans-serif; 5 | margin: 0; 6 | overflow: auto; 7 | } 8 | 9 | .box { 10 | background-color: rgb(81, 0, 128); 11 | color: #fff; 12 | font-size: 2rem; 13 | margin-bottom: 100vh; 14 | padding: 1.5rem 0; 15 | position: relative; 16 | } 17 | 18 | /* .box::after { 19 | content: "50%"; 20 | position: absolute; 21 | top: 0; 22 | display: block; 23 | width: 100%; 24 | background-color: peru; 25 | height: 50%; 26 | font-size: 1rem; 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | } */ 31 | 32 | img { 33 | max-width: 100%; 34 | } 35 | -------------------------------------------------------------------------------- /Clase 64/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 |
        14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Clase 64/scripts.js: -------------------------------------------------------------------------------- 1 | const images = document.getElementById('images') 2 | const getImages = () => { 3 | axios('https://picsum.photos/v2/list?page=3&limit=5') 4 | .then(res => { 5 | const fragment = document.createDocumentFragment() 6 | res.data.forEach(element => { 7 | const newImage = document.createElement('IMG') 8 | newImage.src = element.download_url 9 | fragment.appendChild(newImage) 10 | }) 11 | images.appendChild(fragment) 12 | setObserver() 13 | }) 14 | } 15 | 16 | const callback = (entries) => { 17 | entries.forEach(entry => { 18 | if (entry.isIntersecting) { 19 | getImages() 20 | } else { 21 | //quitar animación 22 | } 23 | }) 24 | } 25 | 26 | const setObserver = () => { 27 | const options = { 28 | threshold: 0.5 29 | } 30 | 31 | const observer = new IntersectionObserver(callback, options) 32 | observer.observe(images.lastElementChild) 33 | } 34 | 35 | getImages() -------------------------------------------------------------------------------- /Clase 64/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #2a2a2a; 3 | text-align: center; 4 | font-family: sans-serif; 5 | margin: 0; 6 | overflow: auto; 7 | } 8 | 9 | img { 10 | max-width: 100%; 11 | } 12 | -------------------------------------------------------------------------------- /Clase 65/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Clase 65/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | https://developer.mozilla.org/es/docs/Web/API/NavigatorGeolocation/geolocation 3 | */ 4 | 5 | 6 | const button = document.getElementById('button') 7 | 8 | button.addEventListener('click', () => { 9 | const geolocation = navigator.geolocation 10 | 11 | geolocation.getCurrentPosition(getPosition, error, options) 12 | }) 13 | 14 | const options = { 15 | enableHightAccuracy: true, 16 | timeout: 5000, 17 | maximunAge: 0 18 | } 19 | 20 | const getPosition = (position) => { 21 | console.log(object) 22 | 23 | } 24 | 25 | const error = (error) => console.log(error) -------------------------------------------------------------------------------- /Clase 65/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #2a2a2a; 3 | font-family: sans-serif; 4 | margin: 0; 5 | overflow: auto; 6 | } 7 | 8 | img { 9 | max-width: 100%; 10 | } 11 | -------------------------------------------------------------------------------- /Clase 66/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | MatchMedia 10 | 11 | 12 | 13 |

        MatchMedia

        14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Clase 66/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | https://developer.mozilla.org/es/docs/Web/API/Window/matchMedia 3 | 4 | mql = window.matchMedia(mediaQueryString) 5 | 6 | mql viene de media query list, que es el objeto que se crea con el método matchMedia() 7 | mediaQueryString es cualquier media query válida en CSS 8 | */ 9 | 10 | const title = document.getElementById('title') 11 | 12 | const mql = matchMedia('(min-width:400px) and (orientation: landscape)') 13 | 14 | const applyMatchMedia = mql => { 15 | mql.matches ? 16 | //NO HACER ESTO NUNCA 17 | document.body.style.backgroundColor = 'red' 18 | //ESTO SI 19 | // title.classList.add('clase que sea') 20 | : 21 | //NO HACER ESTO NUNCA 22 | document.body.style.backgroundColor = 'royalblue' 23 | } 24 | 25 | addEventListener('resize', () => applyMatchMedia(mql)) 26 | addEventListener('DOMContentLoaded', () => applyMatchMedia(mql)) 27 | 28 | -------------------------------------------------------------------------------- /Clase 66/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #2a2a2a; 3 | font-family: sans-serif; 4 | margin: 0; 5 | padding-bottom: 100rem; 6 | } 7 | 8 | .title{ 9 | color:#fff; 10 | text-align: center; 11 | } 12 | 13 | @media screen and (min-width:400px){ 14 | body{ 15 | background-color: #fff; 16 | } 17 | .title{ 18 | color:#2a2a2a 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Clase 67/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Destructuring 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Clase 67/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment 3 | 4 | La destructuración es una expresión de JavaScript que hace posible la extracción de datos de arreglos u objetos 5 | */ 6 | 7 | const person = { 8 | name: 'Dorian', 9 | age: 20, 10 | email: 'dorian@gmail.com' 11 | } 12 | 13 | //FORMA TRADICIONAL 14 | // const name = person.name 15 | // const age = person.age 16 | // const email = person.email 17 | 18 | //DESTRUCTURING 19 | // const { name: nombre, age: edad, email } = person 20 | // const { name, age, email } = person 21 | 22 | // console.log(nombre, edad, email) 23 | 24 | // console.log(name, age, email) 25 | 26 | // const numbers = [1, 2, 3, 4] 27 | 28 | // const [a, b, terceraPosicion] = numbers 29 | 30 | // console.log(terceraPosicion) 31 | 32 | // const printPerson = ({ name }) => { 33 | // console.log(name) 34 | // } 35 | 36 | // const printPerson = ({ name: nombre }) => { 37 | // console.log(nombre) 38 | // } 39 | 40 | // printPerson(person) 41 | 42 | const getUsers = async () => { 43 | const { data: users } = await axios.get('https://jsonplaceholder.typicode.com/users') 44 | 45 | console.log(users) 46 | } 47 | 48 | getUsers() 49 | -------------------------------------------------------------------------------- /Clase 68/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Debugging 9 | 10 | 11 | 12 |
        13 | 14 | 15 | 16 | 17 | 18 |
        19 |

        20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Clase 68/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Tutorial chrome https://developers.google.com/web/tools/chrome-devtools/javascript?hl=es 3 | */ 4 | 5 | const form = document.getElementById('form') 6 | const resultElement = document.getElementById('result') 7 | 8 | form.addEventListener('submit', (e) => { 9 | e.preventDefault() 10 | if (e.target.number1.value != '' && e.target.number2.value != '') { 11 | const number1 = parseInt(e.target.number1.value) 12 | const number2 = parseInt(e.target.number2.value) 13 | const result = number1 + number2 14 | resultElement.textContent = `${number1} + ${number2} = ${result}` 15 | e.target.reset() 16 | } 17 | }) -------------------------------------------------------------------------------- /Clase 7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Condicional Switch 6 | 7 | 8 |
        9 |
        10 | 11 | 12 | -------------------------------------------------------------------------------- /Clase 7/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Sintaxis Simple 3 | 4 | switch(evaluación) { 5 | case n1: 6 | //código 7 | break; 8 | 9 | case n2: 10 | //código 11 | break; 12 | default: 13 | //código 14 | } 15 | 16 | Sintaxis Múltiple 17 | 18 | switch(evaluación) { 19 | case n1: 20 | case n2: 21 | case n3: 22 | case n4: 23 | //código 24 | break; 25 | 26 | case n5: 27 | case n6: 28 | //código 29 | break; 30 | default: 31 | //código 32 | } 33 | */ 34 | 35 | let num = 2; 36 | 37 | switch (num) { 38 | case 1: 39 | console.log(`${num} tiene el valor 1`); 40 | break; 41 | case 2: 42 | console.log(`${num} tiene el valor 2`); 43 | break; 44 | default: 45 | console.log(`${num} no vale ni 1 ni 2`); 46 | } 47 | 48 | switch (num) { 49 | case 1: 50 | case 3: 51 | case 5: 52 | console.log(`${num} es impar`); 53 | break; 54 | case 2: 55 | case 4: 56 | console.log(`${num} es par`); 57 | break; 58 | default: 59 | console.log(`${num} no está contemplado en los casos`); 60 | } 61 | 62 | /* Switch múltiple encadenado */ -------------------------------------------------------------------------------- /Clase 8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Operador Ternario 6 | 7 | 8 |
        9 |
        10 | 11 | 12 | -------------------------------------------------------------------------------- /Clase 8/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | Operador ternario 3 | (condición) ? true : false 4 | 5 | (condición) ? 6 | (primera sentencia, 7 | segunda sentencia) 8 | : 9 | (primera sentencia, 10 | segunda sentencia) 11 | */ 12 | 13 | let num = 3; 14 | 15 | /* if(num % 2 == 0) console.log(`${num} es par`); 16 | else console.log(`${num} es impar`); */ 17 | 18 | (num % 2 == 0) ? console.log(`${num} es par`) : console.log(`${num} es impar`); 19 | 20 | (num % 2 == 0) ? 21 | ( 22 | console.log(`${num} es par`), 23 | console.log(`${num} es par 2`) 24 | ) 25 | : 26 | ( 27 | console.log(`${num} es impar`), 28 | console.log(`${num} es impar`) 29 | ) -------------------------------------------------------------------------------- /Clase 9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Arrays - Introducción 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Clase 9/scripts.js: -------------------------------------------------------------------------------- 1 | /* 2 | - Son estructuras que nos permiten almacenar varios datos y agruparlos. 3 | - Se pueden llenar con cualquier tipo de dato válido en JavaScript y deben ir separados por comas 4 | - Se pueden mezclar tipos de datos, pero no es recomendable. 5 | - Se declaran con llaves cuadradas o corchetes [] 6 | - Pueden declararse vacíos o con un contenido ya establecido 7 | - Pueden añadirse o eliminarse elementos en el momento que queramos 8 | 9 | let array = [] //Array vacío 10 | let numeros = [1,2,3,4,5] //Array con contenido inicial 11 | */ 12 | 13 | let numeros=[1,2,3,4,5,6]; 14 | 15 | let palabras=['hola', 'estamos', 'en', 'YouTube']; 16 | 17 | let booleans=[true, true, false]; 18 | 19 | console.log(numeros[0]+numeros[1]); 20 | 21 | console.log(`La palabra "${palabras[3]}" tiene ${palabras[3].length} letras`); 22 | 23 | console.log(numeros); -------------------------------------------------------------------------------- /clase 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Strings I 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /clase 3/scripts.js: -------------------------------------------------------------------------------- 1 | /*Strings*/ 2 | 3 | let cadena = "Hola Mundo"; 4 | 5 | /*PROPIEDADES 6 | length -> Devuelve la longitud de la cadena 7 | */ 8 | 9 | /*console.log(cadena.length);*/ 10 | 11 | /*Métodos 12 | 13 | Todos los métodos devuelven una cadena nueva, la cadena original no será modificada. 14 | 15 | toUpperCase() -> Devuleve la cadena a mayúsculas 16 | */ 17 | 18 | /*console.log(cadena.toUpperCase()); 19 | 20 | let cadenaMayus = cadena.toUpperCase(); 21 | console.log(cadenaMayus);*/ 22 | 23 | /* 24 | toLowerCase() -> Devuelve la cadena a minúsculas 25 | */ 26 | 27 | /*console.log(cadena.toLowerCase());*/ 28 | 29 | /* 30 | indexOf(string) -> Devuelve la posición en la que se encuentra el string, si no lo encuentra devuelve -1 31 | */ 32 | 33 | /*console.log(cadena.indexOf('o')); 34 | console.log(cadena.indexOf('Hola'));*/ 35 | 36 | /* 37 | replace(valor a buscar, valor nuevo) -> Remplaza el fragmento de la cadena que le digamos y pone el valor nuevo 38 | */ 39 | 40 | /*console.log(cadena.replace('Mundo','Youtube'));*/ 41 | 42 | /* 43 | substring(inicio [,fin]) -> Extrae los caracteres desde inicio hasta fin (el final no se incluye) 44 | 45 | Si no se incluye el fin extrae hasta el final. 46 | */ 47 | 48 | /*console.log(cadena.substring(3)); 49 | console.log(cadena.substring(3, 7));*/ 50 | 51 | /* 52 | slice(inicio [,fin]) -> Igual que substring pero admite valores negativos, si ponemos valores negativos empezará desde atrás 53 | 54 | Si no se incluye el final extrae hasta el final 55 | 56 | (2,-4) -> Empieza a contar en el tercer caracter y los 4 últimos no los considera 57 | */ 58 | 59 | /*console.log(cadena.slice(-3)); 60 | console.log(cadena.slice(2)); 61 | console.log(cadena.slice(0,-2));*/ 62 | 63 | /* 64 | trim()-> Elimina los espacios al inicio y al final de la cadena 65 | */ 66 | 67 | /*let cadena2 = 'Hola youtube, estamos trabajando con cadenas'; 68 | 69 | console.log(cadena2.trim());*/ 70 | 71 | /* 72 | --ES6-- 73 | 74 | startsWith(valor [,inicio]) -> Sirve para saber si la cadena empieza con ese valor. Devuleve true o false 75 | */ 76 | 77 | /*console.log(cadena.startsWith('H')); 78 | console.log(cadena.startsWith('h')); 79 | 80 | console.log(cadena.startsWith('M',5));*/ 81 | 82 | /* 83 | endsWith(valor [,longitud]) -> Sirve para saber si la cadena termina con ese valor. Devuleve true o false 84 | */ 85 | 86 | /*console.log(cadena.endsWith('o')); 87 | console.log(cadena.endsWith('a',4)); 88 | console.log(cadena.endsWith('n',8)); 89 | console.log(cadena.endsWith('Mundo'));*/ 90 | 91 | /* 92 | includes(valor[,inicio]) -> Igual que indexOf pero devuelve true o false 93 | */ 94 | 95 | /*console.log(cadena.includes('n')); 96 | console.log(cadena.includes('a',5)); 97 | console.log(cadena.includes('a',2));*/ 98 | 99 | /* 100 | repeat(valor) -> Repite el string el número de veces que le indiquemos. 101 | */ 102 | 103 | /*let cadena3 = 'Hola'; 104 | 105 | console.log(cadena3.repeat(3)); 106 | console.log('r'.repeat(10));*/ 107 | 108 | /*Template Strings*/ 109 | 110 | let nombre = 'Juan'; 111 | let apellido = 'Gómez'; 112 | let edad = 20; 113 | 114 | console.log("Hola " + nombre + " " + apellido + ". Tienes " + (edad+1) + " años."); 115 | 116 | console.log(`Hola ${nombre} ${apellido}. Tienes ${edad} años.`); 117 | 118 | console.log(`Hola ${nombre} ${apellido}. El año que viene tendrás ${edad+1} años.`); 119 | -------------------------------------------------------------------------------- /clase69/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ] 5 | } -------------------------------------------------------------------------------- /clase69/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /clase69/dev/js/scripts.js: -------------------------------------------------------------------------------- 1 | //npm install @babel/cli @babel/core @babel/polyfill @babel/preset-env @babel/register gulp gulp-babel gulp-concat gulp-plumber gulp-uglify --save-dev 2 | 3 | const numbers = [1, 2, 3, 4] 4 | 5 | const printNumbers = () => { 6 | console.log(...numbers) 7 | } -------------------------------------------------------------------------------- /clase69/gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | import gulp from "gulp" 2 | import babel from "gulp-babel" 3 | import concat from "gulp-concat" 4 | import uglify from "gulp-uglify" 5 | import plumber from "gulp-plumber" 6 | 7 | gulp.task("babel", () => { 8 | return gulp 9 | .src("dev/js/*.js") 10 | .pipe(plumber()) 11 | .pipe( 12 | babel({ 13 | presets: ["@babel/preset-env"], 14 | }), 15 | ) 16 | .pipe(concat("scripts-min.js")) 17 | .pipe(uglify()) 18 | .pipe(gulp.dest("public/js")) 19 | }) 20 | 21 | gulp.task("default", () => { 22 | gulp.watch("dev/js/*.js", gulp.series("babel")) 23 | }) -------------------------------------------------------------------------------- /clase69/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "clase69", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@babel/cli": "^7.7.7", 14 | "@babel/core": "^7.7.7", 15 | "@babel/polyfill": "^7.7.0", 16 | "@babel/preset-env": "^7.7.7", 17 | "@babel/register": "^7.7.7", 18 | "gulp": "^4.0.2", 19 | "gulp-babel": "^8.0.0", 20 | "gulp-concat": "^2.6.1", 21 | "gulp-plumber": "^1.2.1", 22 | "gulp-uglify": "^3.0.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /clase69/public/js/scripts-min.js: -------------------------------------------------------------------------------- 1 | "use strict";var numbers=[1,2,3,4],printNumbers=function(){var r;(r=console).log.apply(r,numbers)}; --------------------------------------------------------------------------------