├── .gitignore ├── 00_indice_modulo ├── JS - Contenidos.pdf └── portada.jpg ├── 01_clases ├── AMA │ └── ama20240302 │ │ └── mi-primer-carrusel │ │ ├── .gitignore │ │ ├── counter.js │ │ ├── index.html │ │ ├── javascript.svg │ │ ├── main.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ └── style.css ├── JS Clase 01 - Introducción a JS │ └── JS Clase 01 - Introducción a JS.pdf ├── JS Clase 02 - Conceptos básicos del lenguaje │ └── Clase 02 - Conceptos básicos del lenguaje.pdf ├── JS Clase 03 - Operadores y funciones en Javascript │ ├── Clase 03- Operadores y funciones en Javascript.pdf │ └── ejercicios │ │ ├── bck_ejercicios-variables.md │ │ ├── ejercicios-variables.md │ │ ├── variables-4.png │ │ └── variables-8.png ├── JS Clase 03-1 - Resolución de ejercicios de variables y operadores │ ├── ejercicios-resueltos │ │ ├── LICENSE.txt │ │ ├── css │ │ │ ├── normalize.css │ │ │ └── style.css │ │ ├── ej1.html │ │ ├── ej10.html │ │ ├── ej2.html │ │ ├── ej3.html │ │ ├── ej4.html │ │ ├── ej5.html │ │ ├── ej6.html │ │ ├── ej7.html │ │ ├── ej8.html │ │ ├── ej9.html │ │ ├── favicon.ico │ │ ├── icon.png │ │ ├── icon.svg │ │ ├── img │ │ │ ├── .gitignore │ │ │ ├── blog │ │ │ │ ├── fullstack-roadmap.jpeg │ │ │ │ └── que-es-fullstack.jpeg │ │ │ ├── common │ │ │ │ └── logotipo-conquer-crypto.png │ │ │ ├── home │ │ │ │ └── banner-home.png │ │ │ └── quienes-somos │ │ │ │ ├── alexis.jpeg │ │ │ │ ├── bienvenido.jpeg │ │ │ │ └── yolanda.jpeg │ │ ├── index.html │ │ ├── js │ │ │ ├── app.js │ │ │ └── vendor │ │ │ │ └── modernizr-3.12.0.min.js │ │ ├── package.json │ │ ├── robots.txt │ │ ├── site.webmanifest │ │ ├── tile-wide.png │ │ └── tile.png │ └── ejercicios │ │ ├── ejercicios-variables.md │ │ ├── variables-4.png │ │ └── variables-8.png ├── JS Clase 04 - Funciones en Javascript │ ├── JS Clase 04 - Funciones en Javascript.pdf │ └── code │ │ └── funciones.js ├── JS Clase 05 - Sentencias de control de flujo, number y string │ ├── JS Clase 05 - Sentencias de control de flujo, number y string.pdf │ └── code │ │ └── ejemplos.js ├── JS Clase 06 - Clousures, Hoisting y Scope │ ├── JS Clase 06 - Clousures, Hoisting y Scope.pdf │ └── code │ │ ├── contador.js │ │ └── scopes.js ├── JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación │ ├── Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación.pdf │ └── ejercicios-resueltos-operadores-logicos-y-comparacion │ │ ├── LICENSE.txt │ │ ├── css │ │ ├── normalize.css │ │ └── style.css │ │ ├── ej1.html │ │ ├── ej2.html │ │ ├── ej3.html │ │ ├── ej6.html │ │ ├── ej7.html │ │ ├── favicon.ico │ │ ├── icon.png │ │ ├── icon.svg │ │ ├── img │ │ ├── .gitignore │ │ ├── blog │ │ │ ├── fullstack-roadmap.jpeg │ │ │ └── que-es-fullstack.jpeg │ │ ├── common │ │ │ └── logotipo-conquer-crypto.png │ │ ├── home │ │ │ └── banner-home.png │ │ └── quienes-somos │ │ │ ├── alexis.jpeg │ │ │ ├── bienvenido.jpeg │ │ │ └── yolanda.jpeg │ │ ├── index.html │ │ ├── js │ │ ├── app.js │ │ └── vendor │ │ │ └── modernizr-3.12.0.min.js │ │ ├── package.json │ │ ├── robots.txt │ │ ├── site.webmanifest │ │ ├── tile-wide.png │ │ └── tile.png ├── JS Clase 08 - Introducción a Arrays y Objetos │ ├── JS Clase 08 - Introducción a Arrays y Objetos.pdf │ └── tmp_code │ │ ├── arrays.js │ │ ├── index-arrays.html │ │ ├── index-objetos.html │ │ ├── objetos.js │ │ ├── tmp_arrays-for-of.js │ │ ├── tmp_arrays.js │ │ ├── tmp_continue-break.js │ │ ├── tmp_objetos-for-in.js │ │ └── tmp_objetos.js ├── JS Clase 09 - Arrow Functions │ ├── JS Clase 09 - Arrow Functions - Archivos.zip │ ├── JS Clase 09 - Arrow Functions - Diapositivas.pdf │ └── code │ │ ├── arrow-functions-ejercicios-solucionados.js │ │ ├── arrow-functions-ejercicios.js │ │ ├── arrow-functions.js │ │ └── index.html ├── JS Clase 10 - Funciones útiles para Arrays 1 │ ├── JS Clase 10 - Funciones útiles para Arrays 1 - Archivos.zip │ ├── JS Clase 10 - Funciones útiles para Arrays 1 - Diapositivas.pdf │ └── code │ │ ├── index-arrays.html │ │ └── metodos-arrays-1.js ├── JS Clase 11 - Funciones útiles para Arrays 2 │ ├── JS Clase 11 - Funciones útiles para Arrays 2.pdf │ └── code │ │ ├── index-arrays.html │ │ └── metodos-arrays-2.js ├── JS Clase 12 - Funciones útiles para Arrays 3 │ ├── JS Clase 12 - Funciones útiles para Arrays 3.pdf │ └── code │ │ ├── index-arrays.html │ │ └── metodos-arrays-3.js ├── JS Clase 13 - Resolución de ejercicios de Arrays 1 │ ├── JS Clase 13 - Resolución de ejercicios de Arrays 1.pdf │ └── code │ │ ├── ejercios-arrays-1-enunciados.js │ │ ├── ejercios-arrays-1.js │ │ └── index.html ├── JS Clase 14 - Prototipos │ ├── JS Clase 14 - Prototipos.pdf │ └── code │ │ ├── index.html │ │ └── prototipos.js ├── JS Clase 15 - Resolución de ejercicios de Arrays 2 │ ├── JS Clase 15 - Resolución de ejercicios 2 de arrays.pdf │ └── code │ │ ├── ejercios-arrays-2-enunciados.js │ │ ├── ejercios-arrays-2.js │ │ └── index.html ├── JS Clase 16 - Clases en JS │ ├── JS Clase 16 - Clases en Javascript.pdf │ └── code │ │ ├── clases.js │ │ └── index-clases.html ├── JS Clase 17 - Ejercicios con Clases Javascript 1 │ ├── JS Clase 17 - Ejercicios con Clases Javascript 1.pdf │ └── code │ │ ├── ejercicio-auto.html │ │ ├── ejercicio-auto.js │ │ ├── ejercicio-calculadora.html │ │ ├── ejercicio-calculadora.js │ │ ├── ejercicio-television.html │ │ ├── ejercicio-television.js │ │ └── index.html ├── JS Clase 18 - Ejercicios con Clases Javascript 2 │ ├── JS Clase 18 - Ejercicios con Clases en Javascript 2.pdf │ └── code │ │ ├── ejercicio-anotador.html │ │ ├── ejercicio-anotador.js │ │ ├── ejercicio-wallet.html │ │ ├── ejercicio-wallet.js │ │ └── index.html ├── JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite │ ├── JS Clase 19 Modulos en ECMAScript 6 y primer proyecto con Vite.pdf │ └── code │ │ ├── .nvmrc │ │ ├── ejemplo-modulo-js │ │ ├── .gitignore │ │ ├── counter.js │ │ ├── index.html │ │ ├── javascript.svg │ │ ├── main.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ └── pruebasmodulos.js │ │ └── style.css │ │ └── old │ │ ├── index.html │ │ └── utiles.js ├── JS Clase 20 - Manipulacion del Dom - Selectores │ ├── JS Clase 20 - Manipulacion del Dom - Selectores.pdf │ └── code │ │ └── code │ │ ├── index.html │ │ └── selectores.js ├── JS Clase 21 - Creacion de elementos del DOM │ ├── JS Clase 21 - Creacion de elementos del DOM.pdf │ └── code │ │ ├── creacion-de-elementos.js │ │ └── index.html ├── JS Clase 22 - Gestión de atributos del DOM │ ├── JS Clase 22 - Gestion de atributos del DOM.pdf │ └── code │ │ ├── atributos.js │ │ └── index.html ├── JS Clase 23 - classList y Dataset │ ├── JS Clase 23 - classList y Dataset.pdf │ └── code │ │ ├── classlist-dataset.js │ │ └── index.html ├── JS Clase 24 - Manipulacion del DOM │ ├── JS Clase 24 - Insertar y movernos por el DOM.pdf │ └── code │ │ ├── index.html │ │ └── manipulacion-dom.js ├── JS Clase 25 - Corrección de ejercicios de Selectores en JS │ ├── JS Clase 25 - Correccion de ejercicios de Selectores en JS.pdf │ └── code │ │ ├── correccion-ejercicios.js │ │ └── index.html ├── JS Clase 26 - Gestión de eventos en JS │ ├── JS Clase 26 - Gestión de eventos en JS.pdf │ └── code │ │ ├── eventos.js │ │ ├── index.html │ │ └── utiles.js ├── JS Clase 27 - Tipos de eventos mas relevantes │ ├── JS Clase 27 - Tipos de eventos mas relevantes.pdf │ └── code │ │ ├── document-load.html │ │ ├── validacion-correo.html │ │ ├── validacion-correo.js │ │ └── validacion-edad.html ├── JS Clase 27-2 - Corrección de ejercicios │ ├── JS Clase 27-2 Tipos de eventos mas relevantes - ejercicios.pdf │ └── code │ │ ├── correccion-ejercicios.js │ │ └── index.html ├── JS Clase 28 - Corrección de ejercicios de Selectores en JS II │ ├── JS Clase 28 - Correccion de ejercicios de Selectores en JS II.pdf │ └── code │ │ ├── correccion-ejercicios.js │ │ └── index.html ├── JS Clase 29 - Emisión y propagación de eventos │ ├── JS Clase 29 - Emision y propagacion de eventos.pdf │ └── code │ │ ├── eventos.js │ │ └── index.html ├── JS Clase 30 - Ejercicios sobre eventos │ ├── JS Clase 30 - Ejercicios sobre eventos.pdf │ └── code │ │ ├── correccion-ejercicios.js │ │ ├── eje1.html │ │ ├── eje2.html │ │ ├── eje3.html │ │ ├── eje4.html │ │ ├── eje5.html │ │ ├── eje6.html │ │ ├── eje7.html │ │ ├── eje8.html │ │ └── index.html ├── JS Clase 31 - Ejercicios sobre eventos II │ ├── JS Clase 31 - Ejercicios sobre eventos II.pdf │ └── code │ │ ├── correccion-ejercicios.js │ │ ├── eje1.html │ │ ├── eje2.html │ │ ├── eje3.html │ │ ├── eje4.html │ │ ├── eje5.html │ │ ├── eje6.html │ │ ├── eje7.html │ │ ├── eje8.html │ │ └── index.html ├── JS Clase 32 - Ejercicios sobre eventos III │ ├── JS Clase 32 - Ejercicios sobre eventos III.pdf │ └── code │ │ ├── correccion-ejercicios.js │ │ ├── eje1.html │ │ ├── eje2.html │ │ ├── eje3.html │ │ ├── eje4.html │ │ ├── eje5.html │ │ ├── eje6.html │ │ ├── eje7.html │ │ ├── eje8.html │ │ └── index.html ├── JS Clase 33 - LocalStorage, SessionStorage y Cookies │ └── JS Clase 33 - LocalStorage, SessionStorage y Cookies.pdf ├── JS Clase 34 - Primer proyecto con Vite │ ├── JS Clase 34 Nuestro primer proyecto con Vite en JS.pdf │ └── code │ │ ├── base_pairs.zip │ │ └── pairs │ │ ├── .gitignore │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── sass │ │ ├── components │ │ │ └── game.scss │ │ └── main.scss │ │ └── src │ │ ├── class │ │ ├── Box.js │ │ └── Game.js │ │ ├── main.js │ │ └── utils │ │ └── utils.js ├── JS Clase 35 - Terminando nuestro primer proyecto con Vite │ ├── JS Clase 35 - Terminando nuestro proyecto con Vite en JS.pdf │ └── code │ │ └── pairs │ │ ├── .gitignore │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── sass │ │ ├── components │ │ │ └── game.scss │ │ └── main.scss │ │ └── src │ │ ├── class │ │ ├── Box.js │ │ └── Game.js │ │ ├── main.js │ │ └── utils │ │ └── utils.js ├── JS Clase 36 - Guardando en LocaStorage nuestro juego │ ├── JS Clase 36 - Guardando en LocaStorage nuestro juego.pdf │ └── code │ │ └── pairs │ │ ├── .gitignore │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── sass │ │ ├── components │ │ │ └── game.scss │ │ └── main.scss │ │ └── src │ │ ├── class │ │ ├── Box.js │ │ ├── Game.js │ │ └── Timer.js │ │ ├── main.js │ │ └── utils │ │ └── utils.js ├── JS Clase 37 - Promesas y asincronía │ ├── JS Clase 37 - Promesas y asincronía.pdf │ └── code │ │ ├── index.html │ │ └── promises.js ├── JS Clase 38 - Asincronía, funciones de carrera │ ├── JS Clase 38 - Asincronia funciones de carrera.pdf │ └── code │ │ ├── clase38.js │ │ └── index.html ├── JS Clase 39 - Nuestro primer Fetch, async y await │ ├── JS Clase 39 - Nuestro primer Fetch, async y await.pdf │ └── code │ │ ├── clase39.js │ │ ├── index.html │ │ └── utiles.js ├── JS Clase 40 - Nuestro primer Post │ ├── JS Clase 40 - Nuestro primer Post con Fetch.pdf │ └── code │ │ ├── clase40.js │ │ ├── index.html │ │ └── utiles.js ├── JS Clase 41 - Que es JWT │ └── JS Clase 41 - Que es JWT.pdf └── JS Clase 42 - Crud en Vanila JS │ └── code │ ├── index.html │ ├── javascript.svg │ ├── package.json │ └── public │ ├── src │ ├── api.js │ ├── crud.js │ ├── main.js │ └── styles.css │ └── vite.svg ├── 02_ejercicios ├── 01-variables-y-tipos-de-datos.md ├── 02-operadores-logicos-y-de-comparacion.md ├── 03-estructuras-de-control-condicionales.md ├── 04-estructuras-de-control-bucles.md ├── 05-estructuras-de-datos-arrays.md ├── 06-funciones.md ├── 07-funciones-buenas-practicas.md ├── 15-clases.md ├── 16-eventos.md ├── 16-oop.md └── 17-manipulacion-dom.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /00_indice_modulo/JS - Contenidos.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/00_indice_modulo/JS - Contenidos.pdf -------------------------------------------------------------------------------- /00_indice_modulo/portada.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/00_indice_modulo/portada.jpg -------------------------------------------------------------------------------- /01_clases/AMA/ama20240302/mi-primer-carrusel/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /01_clases/AMA/ama20240302/mi-primer-carrusel/counter.js: -------------------------------------------------------------------------------- 1 | export function setupCounter(element) { 2 | let counter = 0 3 | const setCounter = (count) => { 4 | counter = count 5 | element.innerHTML = `count is ${counter}` 6 | } 7 | element.addEventListener('click', () => setCounter(counter + 1)) 8 | setCounter(0) 9 | } 10 | -------------------------------------------------------------------------------- /01_clases/AMA/ama20240302/mi-primer-carrusel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |

Ejemplo de carrusel con Swipper

11 |

Visítalo en: aquí y los demos están en aquí

12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /01_clases/AMA/ama20240302/mi-primer-carrusel/javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01_clases/AMA/ama20240302/mi-primer-carrusel/main.js: -------------------------------------------------------------------------------- 1 | // import Swiper JS 2 | import Swiper from 'swiper'; 3 | import { Navigation, Pagination } from 'swiper/modules'; 4 | import 'swiper/css'; 5 | import 'swiper/css/navigation'; 6 | import 'swiper/css/pagination'; 7 | import './style.css'; 8 | 9 | var swiper = new Swiper( 10 | ".miPrimerCarrusel", 11 | { 12 | modules: [Navigation, Pagination], 13 | slidesPerView: 3, 14 | spaceBetween: 30, 15 | pagination: { 16 | el: ".swiper-pagination", 17 | type: "bullets", 18 | }, 19 | navigation: { 20 | nextEl: ".swiper-button-next", 21 | prevEl: ".swiper-button-prev", 22 | }, 23 | breakpoints: { 24 | // when window width is >= 320px 25 | 320: { 26 | slidesPerView: 1, 27 | spaceBetween: 0 28 | }, 29 | // when window width is >= 480px 30 | 480: { 31 | slidesPerView: 2, 32 | spaceBetween: 15 33 | }, 34 | // when window width is >= 640px 35 | 640: { 36 | slidesPerView: 3, 37 | spaceBetween: 30 38 | } 39 | } 40 | } 41 | ); 42 | -------------------------------------------------------------------------------- /01_clases/AMA/ama20240302/mi-primer-carrusel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mi-primer-carrusel", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "vite": "^5.1.4" 13 | }, 14 | "dependencies": { 15 | "swiper": "^11.0.7" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_clases/AMA/ama20240302/mi-primer-carrusel/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01_clases/AMA/ama20240302/mi-primer-carrusel/style.css: -------------------------------------------------------------------------------- 1 | .swipperContainer{ 2 | width: 100%; 3 | } 4 | 5 | .swiper-slide img { 6 | width: 100%; 7 | object-fit: cover; 8 | } 9 | 10 | .miPrimerCarrusel{ 11 | padding-bottom: 20px; 12 | } 13 | 14 | .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{ 15 | bottom: 0px; 16 | } 17 | -------------------------------------------------------------------------------- /01_clases/JS Clase 01 - Introducción a JS/JS Clase 01 - Introducción a JS.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 01 - Introducción a JS/JS Clase 01 - Introducción a JS.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 02 - Conceptos básicos del lenguaje/Clase 02 - Conceptos básicos del lenguaje.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 02 - Conceptos básicos del lenguaje/Clase 02 - Conceptos básicos del lenguaje.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 03 - Operadores y funciones en Javascript/Clase 03- Operadores y funciones en Javascript.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03 - Operadores y funciones en Javascript/Clase 03- Operadores y funciones en Javascript.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 03 - Operadores y funciones en Javascript/ejercicios/ejercicios-variables.md: -------------------------------------------------------------------------------- 1 | # Ejercicios Javascript sobre variables 2 | 3 | ## Ejercicio 1 4 | Escribir un programa que muestre por pantalla la cadena ¡Hola Mundo!. 5 | 6 | ## Ejercicio 2 7 | Escribir un programa que almacene la cadena ¡Hola Mundo! en una variable y luego muestre por pantalla el contenido de la variable. 8 | 9 | ## Ejercicio 3 10 | Escribir un programa que pregunte el nombre del usuario usando "promt" y después de que el usuario lo introduzca muestre por pantalla la cadena ¡Hola \!, donde \ es el nombre que el usuario haya introducido. 11 | 12 | ## Ejercicio 4 13 | Escribir un programa que realice la siguiente operación aritmética: 14 | 15 | ![Ejercicio 4](variables-4.png) 16 | 17 | ## Ejercicio 5 18 | Escribir un programa que pregunte al usuario por el número de horas trabajadas y el coste por hora. Después debe mostrar por pantalla la paga que le corresponde. 19 | 20 | ## Ejercicio 6 21 | Escribir un programa que pida al usuario su peso (en kg) y estatura (en metros), calcule el índice de masa corporal y lo almacene en una variable, y muestre por pantalla la frase Tu índice de masa corporal es \ donde \ es el índice de masa corporal calculado redondeado con dos decimales. 22 | 23 | ## Ejercicio 7 24 | Escribir un programa que pida al usuario dos números enteros y muestre por pantalla: La división resultande de dividir \ entre \ da un cociente \ y un resto \ donde \ y \ son los números introducidos por el usuario, y \ y \ son el cociente y el resto de la división entera respectivamente. 25 | 26 | ## Ejercicio 8 27 | Escribir un programa que pregunte al usuario una cantidad a invertir, el interés anual y el número de años, y muestre por pantalla el capital obtenido en la inversión. 28 | 29 | ## Ejercicio 9 30 | Una juguetería tiene mucho éxito en dos de sus productos: payasos y muñecas. Suele hacer venta por correo y la empresa de logística les cobra por peso de cada paquete así que deben calcular el peso de los payasos y muñecas que saldrán en cada paquete a demanda. Cada payaso pesa 112 g y cada muñeca 75 g. Escribir un programa que lea el número de payasos y muñecas vendidos en el último pedido y calcule el peso total del paquete que será enviado. 31 | 32 | ## Ejercicio 10 33 | Una panadería vende barras de pan a 3.49€ cada una. El pan que no es el día tiene un descuento del 60%. Escribir un programa que comience leyendo el número de barras vendidas que no son del día. Después el programa debe mostrar el precio habitual de una barra de pan, el descuento que se le hace por no ser fresca y el coste final total. 34 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03 - Operadores y funciones en Javascript/ejercicios/variables-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03 - Operadores y funciones en Javascript/ejercicios/variables-4.png -------------------------------------------------------------------------------- /01_clases/JS Clase 03 - Operadores y funciones en Javascript/ejercicios/variables-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03 - Operadores y funciones en Javascript/ejercicios/variables-8.png -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) HTML5 Boilerplate 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/ej1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resolución de ejericios de la clase 3 de JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 |

Resolución de ejercicios de la Clase 3 de JS

27 |

Ejercicio 1

28 |

Volver al índice

29 | 30 | 31 | 32 | 33 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/ej10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resolución de ejericios de la clase 3 de JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 33 | 34 | 35 | 36 |

Resolución de ejercicios de la Clase 3 de JS

37 |

Ejercicio 9

38 |

Volver al índice

39 | 40 | 41 | 42 | 43 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/ej2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resolución de ejericios de la clase 3 de JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | 27 |

Resolución de ejercicios de la Clase 3 de JS

28 |

Ejercicio 2

29 |

Volver al índice

30 | 31 | 32 | 33 | 34 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/ej3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resolución de ejericios de la clase 3 de JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | 27 |

Resolución de ejercicios de la Clase 3 de JS

28 |

Ejercicio 3

29 |

Volver al índice

30 | 31 | 32 | 33 | 34 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/ej4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resolución de ejericios de la clase 3 de JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | 27 |

Resolución de ejercicios de la Clase 3 de JS

28 |

Ejercicio 4

29 |

Volver al índice

30 | 31 | 32 | 33 | 34 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/ej5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resolución de ejericios de la clase 3 de JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 26 | 27 | 28 | 29 |

Resolución de ejercicios de la Clase 3 de JS

30 |

Ejercicio 5

31 |

Volver al índice

32 | 33 | 34 | 35 | 36 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/ej6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resolución de ejericios de la clase 3 de JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 26 | 27 | 28 | 29 |

Resolución de ejercicios de la Clase 3 de JS

30 |

Ejercicio 6

31 |

Volver al índice

32 | 33 | 34 | 35 | 36 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/ej7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resolución de ejericios de la clase 3 de JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 30 | 31 | 32 | 33 |

Resolución de ejercicios de la Clase 3 de JS

34 |

Ejercicio 7

35 |

Volver al índice

36 | 37 | 38 | 39 | 40 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/ej8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resolución de ejericios de la clase 3 de JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 31 | 32 | 33 | 34 |

Resolución de ejercicios de la Clase 3 de JS

35 |

Ejercicio 8

36 |

Volver al índice

37 | 38 | 39 | 40 | 41 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/ej9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resolución de ejericios de la clase 3 de JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 31 | 32 | 33 | 34 |

Resolución de ejercicios de la Clase 3 de JS

35 |

Ejercicio 9

36 |

Volver al índice

37 | 38 | 39 | 40 | 41 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/favicon.ico -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/icon.png -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/.gitignore -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/blog/fullstack-roadmap.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/blog/fullstack-roadmap.jpeg -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/blog/que-es-fullstack.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/blog/que-es-fullstack.jpeg -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/common/logotipo-conquer-crypto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/common/logotipo-conquer-crypto.png -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/home/banner-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/home/banner-home.png -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/quienes-somos/alexis.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/quienes-somos/alexis.jpeg -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/quienes-somos/bienvenido.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/quienes-somos/bienvenido.jpeg -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/quienes-somos/yolanda.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/img/quienes-somos/yolanda.jpeg -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resolución de ejericios de la clase 3 de JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

Resolución de ejercicios de la Clase 3 de JS

23 | 35 | 36 | 37 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/js/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/js/app.js -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": " ", 3 | "version": "0.0.1", 4 | "description": "", 5 | "private": true, 6 | "keywords": [ 7 | "" 8 | ], 9 | "license": "", 10 | "author": "", 11 | "scripts": { 12 | "test": "echo \"Error: no test specified\" && exit 1", 13 | "start": "webpack serve --open --config webpack.config.dev.js", 14 | "build": "webpack --config webpack.config.prod.js" 15 | }, 16 | "devDependencies": { 17 | "copy-webpack-plugin": "^11.0.0", 18 | "html-webpack-plugin": "^5.5.0", 19 | "webpack": "^5.74.0", 20 | "webpack-cli": "^4.10.0", 21 | "webpack-dev-server": "^4.11.1", 22 | "webpack-merge": "^5.8.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/robots.txt: -------------------------------------------------------------------------------- 1 | # www.robotstxt.org/ 2 | 3 | # Allow crawling of all content 4 | User-agent: * 5 | Disallow: 6 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "", 3 | "name": "", 4 | "icons": [{ 5 | "src": "icon.png", 6 | "type": "image/png", 7 | "sizes": "192x192" 8 | }], 9 | "start_url": "/?utm_source=homescreen", 10 | "background_color": "#fafafa", 11 | "theme_color": "#fafafa" 12 | } 13 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/tile-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/tile-wide.png -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios-resueltos/tile.png -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios/ejercicios-variables.md: -------------------------------------------------------------------------------- 1 | # Ejercicios Javascript sobre variables 2 | 3 | ## Ejercicio 1 4 | Escribir un programa que muestre por pantalla la cadena ¡Hola Mundo!. 5 | 6 | ## Ejercicio 2 7 | Escribir un programa que almacene la cadena ¡Hola Mundo! en una variable y luego muestre por pantalla el contenido de la variable. 8 | 9 | ## Ejercicio 3 10 | Escribir un programa que pregunte el nombre del usuario usando "promt" y después de que el usuario lo introduzca muestre por pantalla la cadena ¡Hola \!, donde \ es el nombre que el usuario haya introducido. 11 | 12 | ## Ejercicio 4 13 | Escribir un programa que realice la siguiente operación aritmética: 14 | 15 | ![Ejercicio 4](variables-4.png) 16 | 17 | ## Ejercicio 5 18 | Escribir un programa que pregunte al usuario por el número de horas trabajadas y el coste por hora. Después debe mostrar por pantalla la paga que le corresponde. 19 | 20 | ## Ejercicio 6 21 | Escribir un programa que pida al usuario su peso (en kg) y estatura (en metros), calcule el índice de masa corporal y lo almacene en una variable, y muestre por pantalla la frase Tu índice de masa corporal es \ donde \ es el índice de masa corporal calculado redondeado con dos decimales. 22 | 23 | ## Ejercicio 7 24 | Escribir un programa que pida al usuario dos números enteros y muestre por pantalla: La división resultande de dividir \ entre \ da un cociente \ y un resto \ donde \ y \ son los números introducidos por el usuario, y \ y \ son el cociente y el resto de la división entera respectivamente. 25 | 26 | ## Ejercicio 8 27 | Escribir un programa que pregunte al usuario una cantidad a invertir, el interés anual y el número de años, y muestre por pantalla el capital obtenido en la inversión. 28 | 29 | ## Ejercicio 9 30 | Una juguetería tiene mucho éxito en dos de sus productos: payasos y muñecas. Suele hacer venta por correo y la empresa de logística les cobra por peso de cada paquete así que deben calcular el peso de los payasos y muñecas que saldrán en cada paquete a demanda. Cada payaso pesa 112 g y cada muñeca 75 g. Escribir un programa que lea el número de payasos y muñecas vendidos en el último pedido y calcule el peso total del paquete que será enviado. 31 | 32 | ## Ejercicio 10 33 | Una panadería vende barras de pan a 3.49€ cada una. El pan que no es el día tiene un descuento del 60%. Escribir un programa que comience leyendo el número de barras vendidas que no son del día. Después el programa debe mostrar el precio habitual de una barra de pan, el descuento que se le hace por no ser fresca y el coste final total. 34 | -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios/variables-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios/variables-4.png -------------------------------------------------------------------------------- /01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios/variables-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 03-1 - Resolución de ejercicios de variables y operadores/ejercicios/variables-8.png -------------------------------------------------------------------------------- /01_clases/JS Clase 04 - Funciones en Javascript/JS Clase 04 - Funciones en Javascript.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 04 - Funciones en Javascript/JS Clase 04 - Funciones en Javascript.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 05 - Sentencias de control de flujo, number y string/JS Clase 05 - Sentencias de control de flujo, number y string.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 05 - Sentencias de control de flujo, number y string/JS Clase 05 - Sentencias de control de flujo, number y string.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 06 - Clousures, Hoisting y Scope/JS Clase 06 - Clousures, Hoisting y Scope.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 06 - Clousures, Hoisting y Scope/JS Clase 06 - Clousures, Hoisting y Scope.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 06 - Clousures, Hoisting y Scope/code/contador.js: -------------------------------------------------------------------------------- 1 | function crearContador(contador = 0) { 2 | 3 | function incrementar() { 4 | contador++; 5 | } 6 | 7 | function decrementar() { 8 | contador--; 9 | } 10 | 11 | function valor() { 12 | return contador; 13 | } 14 | 15 | return { 16 | incrementar: incrementar, 17 | decrementar: decrementar, 18 | valor: valor 19 | } 20 | } 21 | 22 | const c1 = crearContador(5); 23 | const c2 = crearContador(100); 24 | c1.incrementar(); 25 | c1.incrementar(); 26 | c2.decrementar(); 27 | console.log(c1.valor()); 28 | console.log(c2.valor()); 29 | -------------------------------------------------------------------------------- /01_clases/JS Clase 06 - Clousures, Hoisting y Scope/code/scopes.js: -------------------------------------------------------------------------------- 1 | var fruta = 'manzana'; 2 | 3 | function comer() { 4 | var fruta = 'banana'; 5 | 6 | function lavar() { 7 | console.log(`Lavando ${window.fruta}`) 8 | } 9 | 10 | lavar(); 11 | console.log(`Comiendo ${fruta}`) 12 | } 13 | 14 | comer(); 15 | -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) HTML5 Boilerplate 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/ej1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Operadores lógicos y de comparación 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 34 | 35 | 36 | 37 |

Operadores lógicos y de comparación 38 |

39 |

Ejercicio 1

40 |

Volver al índice

41 | 42 | 43 | 44 | 45 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/ej2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Operadores lógicos y de comparación 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 31 | 32 | 33 | 34 |

Operadores lógicos y de comparación 35 |

36 |

Ejercicio 2

37 |

Volver al índice

38 | 39 | 40 | 41 | 42 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/ej3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Operadores lógicos y de comparación 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 43 | 44 | 45 | 46 |

Operadores lógicos y de comparación 47 |

48 |

Ejercicio 3

49 |

Volver al índice

50 | 51 | 52 | 53 | 54 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/ej6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Operadores lógicos y de comparación 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 38 | 39 | 40 | 41 |

Operadores lógicos y de comparación 42 |

43 |

Ejercicio 3

44 |

Volver al índice

45 | 46 | 47 | 48 | 49 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/ej7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Operadores lógicos y de comparación 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 41 | 42 | 43 | 44 |

Operadores lógicos y de comparación 45 |

46 |

Ejercicio 3

47 |

Volver al índice

48 | 49 | 50 | 51 | 52 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/favicon.ico -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/icon.png -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/.gitignore -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/blog/fullstack-roadmap.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/blog/fullstack-roadmap.jpeg -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/blog/que-es-fullstack.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/blog/que-es-fullstack.jpeg -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/common/logotipo-conquer-crypto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/common/logotipo-conquer-crypto.png -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/home/banner-home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/home/banner-home.png -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/quienes-somos/alexis.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/quienes-somos/alexis.jpeg -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/quienes-somos/bienvenido.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/quienes-somos/bienvenido.jpeg -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/quienes-somos/yolanda.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/img/quienes-somos/yolanda.jpeg -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Resolución de ejericios de la clase 3 de JS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

Resolución de ejercicios de Operadores lógicos y de comparación 23 |

24 | 31 | 32 | 33 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/js/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/js/app.js -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": " ", 3 | "version": "0.0.1", 4 | "description": "", 5 | "private": true, 6 | "keywords": [ 7 | "" 8 | ], 9 | "license": "", 10 | "author": "", 11 | "scripts": { 12 | "test": "echo \"Error: no test specified\" && exit 1", 13 | "start": "webpack serve --open --config webpack.config.dev.js", 14 | "build": "webpack --config webpack.config.prod.js" 15 | }, 16 | "devDependencies": { 17 | "copy-webpack-plugin": "^11.0.0", 18 | "html-webpack-plugin": "^5.5.0", 19 | "webpack": "^5.74.0", 20 | "webpack-cli": "^4.10.0", 21 | "webpack-dev-server": "^4.11.1", 22 | "webpack-merge": "^5.8.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/robots.txt: -------------------------------------------------------------------------------- 1 | # www.robotstxt.org/ 2 | 3 | # Allow crawling of all content 4 | User-agent: * 5 | Disallow: 6 | -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "", 3 | "name": "", 4 | "icons": [{ 5 | "src": "icon.png", 6 | "type": "image/png", 7 | "sizes": "192x192" 8 | }], 9 | "start_url": "/?utm_source=homescreen", 10 | "background_color": "#fafafa", 11 | "theme_color": "#fafafa" 12 | } 13 | -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/tile-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/tile-wide.png -------------------------------------------------------------------------------- /01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 07 - Resolución de ejercicios sobre operadores lógicos y de comparación/ejercicios-resueltos-operadores-logicos-y-comparacion/tile.png -------------------------------------------------------------------------------- /01_clases/JS Clase 08 - Introducción a Arrays y Objetos/JS Clase 08 - Introducción a Arrays y Objetos.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 08 - Introducción a Arrays y Objetos/JS Clase 08 - Introducción a Arrays y Objetos.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 08 - Introducción a Arrays y Objetos/tmp_code/arrays.js: -------------------------------------------------------------------------------- 1 | const nombres = ['Jose', 'Luis', 'Pedro', 'Lucía']; 2 | 3 | // let longitud = nombres.length; 4 | // for (let i = 0; i < longitud; i++){ 5 | // console.log(`En la posición ${i} hay: ${nombres[i]}`); 6 | // } 7 | 8 | for (let nombre of nombres) { 9 | console.log(nombre); 10 | } 11 | -------------------------------------------------------------------------------- /01_clases/JS Clase 08 - Introducción a Arrays y Objetos/tmp_code/index-arrays.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrays 7 | 8 | 9 | 10 |

Ejemplos con arrays

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 08 - Introducción a Arrays y Objetos/tmp_code/index-objetos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Objetos 7 | 8 | 9 | 10 |

Objetos

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 08 - Introducción a Arrays y Objetos/tmp_code/objetos.js: -------------------------------------------------------------------------------- 1 | const miPrimerObjeto = {}; 2 | console.log(miPrimerObjeto); 3 | 4 | let firstName = 'Bienvenido'; 5 | let lastName = 'Sáez' 6 | let age = 39; 7 | let occupation = 'Developer'; 8 | 9 | const person = { 10 | firstName: 'Bienvenido', 11 | lastName: 'Sáez', 12 | age: 39, 13 | occupation: 'Developer', 14 | city: 'Motril', 15 | } 16 | 17 | for (const atributo in person) { 18 | console.log(`${atributo}: ${person[atributo]}`); 19 | } 20 | -------------------------------------------------------------------------------- /01_clases/JS Clase 08 - Introducción a Arrays y Objetos/tmp_code/tmp_arrays-for-of.js: -------------------------------------------------------------------------------- 1 | let nombresConValores = ['Jose', 'Luis', 'Ana', 'María']; 2 | 3 | for (let i = 0; i < nombresConValores.length; i++){ 4 | console.log(nombre); 5 | } 6 | 7 | for (let nombre of nombresConValores){ 8 | console.log(nombre); 9 | } 10 | 11 | let contador = 0; 12 | while(contador < nombresConValores.length){ 13 | console.log(nombresConValores[contador]); 14 | contador++; 15 | } 16 | -------------------------------------------------------------------------------- /01_clases/JS Clase 08 - Introducción a Arrays y Objetos/tmp_code/tmp_arrays.js: -------------------------------------------------------------------------------- 1 | // Declaración de arrays 2 | 3 | // Declaración normal 4 | let nuevoArray = new Array(); 5 | // Declaración resumida 6 | let nuevoArray[]; 7 | // Otra forma resumida 8 | let nuevoArray = []; 9 | 10 | // Nos gusta 11 | let nombres = []; 12 | 13 | // Declaración de arrays con valores 14 | let nombresConValores = ['Jose', 'Luis']; 15 | 16 | // Cómo muestra esto la consola 17 | 18 | // Cómo accedo a las posiciones del array para obtener su valor 19 | 20 | // Cómo sobreescribo una posición de un array 21 | 22 | // ¿Qué pasa cuando accedo a una posición en la que previamente no he guardado nada? 23 | 24 | // ¿Qué pasa cuando agrego un elemento en la posición 10, ¿Cuantos elementos tiene ahora el array? ¿Qué hay en las posiciones intermedias? (empty) 25 | 26 | // ¿Qué pasa si intento acceder a una posición intermedia? 27 | 28 | // ¿Qué tipo de dato es un array? typeof 29 | 30 | // En Javascript los arrays son objetos, y tienen métodos y atributos, ya los veremos... 31 | 32 | // Vamos a acceder a una propiedad para saber el tamaño (cuidado con length y lenght) 33 | 34 | // Ya veremos cómo añadir elementos, quitar, buscar y un sin fin de métodos que nos proveen los arrays 35 | -------------------------------------------------------------------------------- /01_clases/JS Clase 08 - Introducción a Arrays y Objetos/tmp_code/tmp_continue-break.js: -------------------------------------------------------------------------------- 1 | // Hacer un programa que imprima únicamente los valores impares entre 1 y 100 2 | 3 | for (let i = 1; i <= 100; i++) { 4 | if (i % 2 === 0) { 5 | continue; 6 | } 7 | console.log(i); 8 | } 9 | 10 | 11 | // Hacer un programa que imprima los primeros 10 números pares 12 | 13 | let contador = 0; 14 | let encontrados = 0; 15 | 16 | while (true) { 17 | contador++; 18 | if(contador%2 === 0){ 19 | encontrados++; 20 | console.log(contador); 21 | } 22 | if (encontrados === 10) { 23 | break; 24 | } 25 | } 26 | console.log('Fin del programa'); 27 | -------------------------------------------------------------------------------- /01_clases/JS Clase 08 - Introducción a Arrays y Objetos/tmp_code/tmp_objetos-for-in.js: -------------------------------------------------------------------------------- 1 | // Objetos con propiedades 2 | let person = { 3 | firstName: 'Bienvenido', 4 | lastName: 'Sáez', 5 | age: 39, 6 | occupation: 'Developer', 7 | } 8 | 9 | // Imprimir las llaves del objeto 10 | for (let key in person){ 11 | console.log(key); 12 | } 13 | 14 | // Imprimir los valores del objeto 15 | for (let key in person){ 16 | console.log(person[key]); 17 | } 18 | 19 | // Imprimir los valores del objeto 20 | for (let key in person){ 21 | console.log(key, person[key]); 22 | } 23 | -------------------------------------------------------------------------------- /01_clases/JS Clase 08 - Introducción a Arrays y Objetos/tmp_code/tmp_objetos.js: -------------------------------------------------------------------------------- 1 | // ¿Qué son los objetos? 2 | 3 | // En JS no es necesario que haya una clase definida para que exista un objeto ya que se basa en propotipos. Ya lo veremos en profundidad 4 | 5 | // Son tipo de referencia, se almacena una dirección de memoria 6 | 7 | // ¿Para qué sirven y por qué son más intuitivos que los arrays? 8 | 9 | // Vamos a definir propiedades de una persona 10 | let firstName = 'Bienvenido'; 11 | let lastName = 'Sáez' 12 | let age = 39; 13 | let occupation = 'Developer'; 14 | 15 | // Imagina que tienes que crear 20 personas, ¿cuántas variables necesitas? 16 | 17 | // Objetos al rescate 18 | let myFirstObject = {}; 19 | 20 | // Cómo se imprime en pantalla 21 | 22 | // Objetos con propiedades 23 | let person = { 24 | firstName: 'Bienvenido', 25 | lastName: 'Sáez', 26 | age: 39, 27 | occupation: 'Developer', 28 | } 29 | 30 | // Explicar qué es un par llave-valor => Qué es la llave y qué es el valor. A la llave en Javascript se le llaman propiedades o atributos 31 | // Explicar que son dos puntos y no = a la hora de darle valor a las propiedades 32 | // La última coma es opcional, te la recomiendo 33 | 34 | // ¿Cómo muestra nuestro objeto en la consola? 35 | // No hay orden de propiedades tal y como lo hemos escrito 36 | 37 | // Operador . 38 | // Cómo accedo a las propiedades de un objeto 39 | // Cómo modifico el valor de las propiedades de un objeto 40 | 41 | // Acceder con [''] (String) de las dos formas 42 | // ¿Cual es mejor? Si conoces el nombre de la propiedad . si lo que vas a hacer es iterar sobre el nombre de las propiedades, usa []. Hacer ejemplo con llave en un string para acceder 43 | 44 | // ¿Cómo eliminar una propiedad? => delete => delete person.occupation 45 | -------------------------------------------------------------------------------- /01_clases/JS Clase 09 - Arrow Functions/JS Clase 09 - Arrow Functions - Archivos.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 09 - Arrow Functions/JS Clase 09 - Arrow Functions - Archivos.zip -------------------------------------------------------------------------------- /01_clases/JS Clase 09 - Arrow Functions/JS Clase 09 - Arrow Functions - Diapositivas.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 09 - Arrow Functions/JS Clase 09 - Arrow Functions - Diapositivas.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 09 - Arrow Functions/code/arrow-functions-ejercicios-solucionados.js: -------------------------------------------------------------------------------- 1 | // Para cada una de las funciones que tenemos aquí, pásalas a Arrow Functions 2 | 3 | // Función 1 4 | const sumar = (a, b) => a + b; 5 | 6 | // Función 2 7 | const cuadrado = numero => numero * numero; 8 | 9 | // Función 3 10 | const obtenerUsuario = id => ({ id: id, nombre: "Usuario" + id }); 11 | 12 | // Función 4 13 | const procesarLista = lista => { 14 | let resultado = []; 15 | for (let i = 0; i < lista.length; i++) { 16 | resultado.push(lista[i] * 2); 17 | } 18 | return resultado; 19 | }; 20 | 21 | //Función 5 22 | (() => console.log("Ejecutando una IIFE"))(); 23 | 24 | // Función 6 25 | const objeto = { 26 | id: 10, 27 | obtenerId: () => this.id 28 | }; 29 | 30 | // Función 7 31 | const temporizador = { 32 | mensaje: "Listo!", 33 | iniciar: function() { 34 | setTimeout(() => console.log(this.mensaje), 1000); 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /01_clases/JS Clase 09 - Arrow Functions/code/arrow-functions-ejercicios.js: -------------------------------------------------------------------------------- 1 | // Para cada una de las funciones que tenemos aquí, pásalas a Arrow Functions 2 | 3 | // Función 1 4 | function sumar(a, b) { 5 | return a + b; 6 | } 7 | 8 | // Función 2 9 | function cuadrado(numero) { 10 | return numero * numero; 11 | } 12 | 13 | // Función 3 14 | function obtenerUsuario(id) { 15 | return { id: id, nombre: "Usuario" + id }; 16 | } 17 | 18 | // Función 4 19 | function procesarLista(lista) { 20 | let resultado = []; 21 | for (let i = 0; i < lista.length; i++) { 22 | resultado.push(lista[i] * 2); 23 | } 24 | return resultado; 25 | } 26 | 27 | //Función 5 28 | (function() { 29 | console.log("Ejecutando una IIFE"); 30 | })(); 31 | 32 | 33 | // Función 6 34 | const objeto = { 35 | id: 10, 36 | obtenerId: function() { 37 | return this.id; 38 | } 39 | }; 40 | 41 | 42 | // Función 7 43 | const temporizador = { 44 | mensaje: "Listo!", 45 | iniciar: function() { 46 | setTimeout(function() { 47 | console.log(this.mensaje); 48 | }, 1000); 49 | } 50 | }; 51 | -------------------------------------------------------------------------------- /01_clases/JS Clase 09 - Arrow Functions/code/arrow-functions.js: -------------------------------------------------------------------------------- 1 | // function saludo() { 2 | // return 'Hola qué tal estás'; 3 | // } 4 | 5 | // function saludo2(nombre) { 6 | // return `Hola qué tal estás ${nombre}`; 7 | // } 8 | 9 | // function saludo3(nombre, apellido) { 10 | // return `Hola qué tal estás ${nombre} ${apellido}`; 11 | // } 12 | 13 | // Diferencias 14 | // - No tiene la palabra function 15 | // - No tiene acceso a this (ya hablaremos más adelante sobre this) 16 | // - No tiene el objeto arguments como en las funciones tradicionales 17 | // - Siempre son anónimas 18 | // - No son afectadas por el Hoisting, es decir, no pueden llamarse antes de declararse 19 | 20 | // Definición de nuestra primera Arrow Function 21 | // function saludo() { 22 | // return 'Hola qué tal estás'; 23 | // } 24 | 25 | // const saludo = () => { 26 | // return 'Hola qué tal estás'; 27 | // } 28 | 29 | // console.log(saludo()); 30 | 31 | 32 | // Return implícito (sin llaves) 33 | // const saludo = () => 'Hola qué tal estás'; 34 | 35 | // console.log(saludo()); 36 | 37 | // Parámetros 38 | // function saludo2(nombre) { 39 | // return `Hola qué tal estás ${nombre}`; 40 | // } 41 | 42 | // const saludo2 = (nombre) => `Hola qué tal estás ${nombre}`; 43 | // const saludo3 = (nombre, apellido) => `Hola qué tal estás ${nombre} ${apellido}`; 44 | 45 | // console.log(saludo2('Bienve')); 46 | // console.log(saludo3('Bienve', 'Sáez')); 47 | 48 | // Único parámetro, omitiendo paréntesis 49 | // const saludo2 = nombre => `Hola qué tal estás ${nombre}`; 50 | 51 | // console.log(saludo2('Juan')); 52 | -------------------------------------------------------------------------------- /01_clases/JS Clase 09 - Arrow Functions/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrays 7 | 8 | 9 | 10 |

Arrow Functions

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 10 - Funciones útiles para Arrays 1/JS Clase 10 - Funciones útiles para Arrays 1 - Archivos.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 10 - Funciones útiles para Arrays 1/JS Clase 10 - Funciones útiles para Arrays 1 - Archivos.zip -------------------------------------------------------------------------------- /01_clases/JS Clase 10 - Funciones útiles para Arrays 1/JS Clase 10 - Funciones útiles para Arrays 1 - Diapositivas.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 10 - Funciones útiles para Arrays 1/JS Clase 10 - Funciones útiles para Arrays 1 - Diapositivas.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 10 - Funciones útiles para Arrays 1/code/index-arrays.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrays 7 | 8 | 9 | 10 |

Funciones útiles para Arrays I

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 11 - Funciones útiles para Arrays 2/JS Clase 11 - Funciones útiles para Arrays 2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 11 - Funciones útiles para Arrays 2/JS Clase 11 - Funciones útiles para Arrays 2.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 11 - Funciones útiles para Arrays 2/code/index-arrays.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrays 7 | 8 | 9 | 10 |

Funciones útiles para Arrays II

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 11 - Funciones útiles para Arrays 2/code/metodos-arrays-2.js: -------------------------------------------------------------------------------- 1 | const edades = [4, 7, 8, 9, 5, 3]; 2 | 3 | const alumnos = [ 4 | { 5 | id: 99, 6 | nombre: 'Zamora', 7 | edad: 35 8 | }, 9 | { 10 | id: 1, 11 | nombre: 'Jose Luís', 12 | edad: 22 13 | }, 14 | { 15 | id: 2, 16 | nombre: 'Lucía', 17 | edad: 19 18 | }, 19 | { 20 | id: 3, 21 | nombre: 'Felipe', 22 | edad: 49 23 | } 24 | ]; 25 | 26 | /** 27 | * Debe devolver un número negativo si a va antes que b 28 | * Debe devolver un número positivo si b va antes que a 29 | * Debe devolver 0 si a y b son iguales 30 | */ 31 | // return a.edad - b.edad; 32 | // alumnos.sort((a1, a2) => { 33 | // if (a1.edad > a2.edad) { 34 | // return -1; 35 | // } else if (a1.edad < a2.edad) { 36 | // return 1; 37 | // } else { 38 | // return 0; 39 | // } 40 | // }); 41 | 42 | // console.log(alumnos); 43 | 44 | // const vecinos = ['María', 'Jose', 'Luís', 'María', 'Antonio']; 45 | 46 | // console.log(vecinos.indexOf('María')); 47 | // console.log(vecinos.lastIndexOf('María')); 48 | // console.log(vecinos.indexOf('María', 1)); 49 | // console.log(vecinos.includes('Antonio')); 50 | 51 | 52 | // Búsqueda de elementos por referencia 53 | // console.log(alumnos.find((alumno) => { 54 | // return alumno.nombre === 'Lucía'; 55 | // })); 56 | 57 | 58 | // console.log(alumnos.findIndex((alumno) => { 59 | // return alumno.nombre === 'Lucía'; 60 | // })); 61 | // const hombres = ['Juan', 'Felipe', 'Antonio']; 62 | // const mujeres = ['María', 'Lucía']; 63 | 64 | // const todos = [...hombres, 'Nicasio', ...mujeres]; 65 | // const hombres2 = [...hombres]; 66 | // hombres2[0] = 5; 67 | 68 | 69 | // const nombres = ['Felipe', 'María', 'felipe', 'maria']; 70 | // nombres.sort((a, b) => { 71 | // if (a.toUpperCase() < b.toUpperCase()) { 72 | // return 1; 73 | // } else if (a.toUpperCase() > b.toUpperCase()){ 74 | // return -1; 75 | // }else { 76 | // return 0; 77 | // } 78 | // }) 79 | -------------------------------------------------------------------------------- /01_clases/JS Clase 12 - Funciones útiles para Arrays 3/JS Clase 12 - Funciones útiles para Arrays 3.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 12 - Funciones útiles para Arrays 3/JS Clase 12 - Funciones útiles para Arrays 3.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 12 - Funciones útiles para Arrays 3/code/index-arrays.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrays 7 | 8 | 9 | 10 |

Funciones útiles para Arrays III

11 |

Every, Some, Map, Filter y Reduce

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01_clases/JS Clase 13 - Resolución de ejercicios de Arrays 1/JS Clase 13 - Resolución de ejercicios de Arrays 1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 13 - Resolución de ejercicios de Arrays 1/JS Clase 13 - Resolución de ejercicios de Arrays 1.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 13 - Resolución de ejercicios de Arrays 1/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrays 7 | 8 | 9 | 10 |

Ejercicios con arrays 1

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 14 - Prototipos/JS Clase 14 - Prototipos.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 14 - Prototipos/JS Clase 14 - Prototipos.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 14 - Prototipos/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrays 7 | 8 | 9 | 10 |

Prototipos

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 14 - Prototipos/code/prototipos.js: -------------------------------------------------------------------------------- 1 | const persona = { 2 | profesion: 'Sin profesión', 3 | saludar: function (nombre) { 4 | console.log(`Hola ${nombre} ¿qué tal estás?`) 5 | } 6 | } 7 | 8 | const alumno = { 9 | id: 1, 10 | nombre: 'Bienve', 11 | edad: 39, 12 | master: 'FullStack', 13 | profesion: 'Estudiante', 14 | toString: function () { 15 | console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años`); 16 | } 17 | } 18 | 19 | // alumno.__proto__ = persona; 20 | // Object.setPrototypeOf(alumno, persona); 21 | 22 | // persona.despedirse = function () { 23 | // console.log('Adiós'); 24 | // } 25 | 26 | // console.log(persona.isPrototypeOf(alumno)); 27 | 28 | // let a = Object.create(persona); 29 | // let alumno1 = new Object(alumno); 30 | -------------------------------------------------------------------------------- /01_clases/JS Clase 15 - Resolución de ejercicios de Arrays 2/JS Clase 15 - Resolución de ejercicios 2 de arrays.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 15 - Resolución de ejercicios de Arrays 2/JS Clase 15 - Resolución de ejercicios 2 de arrays.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 15 - Resolución de ejercicios de Arrays 2/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrays 7 | 8 | 9 | 10 |

Ejercicios con arrays 2

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 16 - Clases en JS/JS Clase 16 - Clases en Javascript.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 16 - Clases en JS/JS Clase 16 - Clases en Javascript.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 16 - Clases en JS/code/index-clases.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrays 7 | 8 | 9 | 10 |

Clases en Javacript

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 17 - Ejercicios con Clases Javascript 1/JS Clase 17 - Ejercicios con Clases Javascript 1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 17 - Ejercicios con Clases Javascript 1/JS Clase 17 - Ejercicios con Clases Javascript 1.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 17 - Ejercicios con Clases Javascript 1/code/ejercicio-auto.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ejercicio Auto 7 | 8 | 9 | 10 |

Ejercicio Auto

11 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /01_clases/JS Clase 17 - Ejercicios con Clases Javascript 1/code/ejercicio-auto.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | class Auto { 4 | #encendido; 5 | #velocidad; 6 | #marca; 7 | #modelo; 8 | #patente; 9 | 10 | constructor(marca, modelo, patente) { 11 | this.#marca = marca; 12 | this.#modelo = modelo; 13 | this.#patente = patente; 14 | this.#velocidad = 0; 15 | this.#encendido = false; 16 | } 17 | 18 | arrancar() { 19 | this.#encendido = true; 20 | } 21 | 22 | apagar() { 23 | if (this.#velocidad === 0) { 24 | this.#encendido = false; 25 | } else { 26 | console.info('El vehículo va una velocidad mayor a 0'); 27 | } 28 | } 29 | 30 | acelerar() { 31 | if (this.#encendido) { 32 | this.#velocidad = this.#velocidad + 10; 33 | } else { 34 | console.info('El coche no está encendido'); 35 | } 36 | } 37 | 38 | desacelerar() { 39 | if (this.#encendido) { 40 | if (this.#velocidad > 0) { 41 | this.#velocidad = this.#velocidad - 10; 42 | if (this.#velocidad < 0) { 43 | this.#velocidad = 0; 44 | } 45 | } else { 46 | console.info('El coche no puede desacelerar porque no está andando'); 47 | } 48 | } else { 49 | console.info('El coche no está encendido'); 50 | } 51 | } 52 | 53 | toString() { 54 | return `${this.#marca} ${this.#modelo}, patente ${this.#patente}`; 55 | } 56 | } 57 | 58 | 59 | // let coche = new Auto('Audi', 'Q3', 'ZZ'); 60 | // console.log(coche.toString()); 61 | 62 | // coche.arrancar() 63 | // coche.acelerar(); 64 | // coche.apagar(); 65 | // coche.desacelerar(); 66 | // console.log(coche); 67 | // coche.desacelerar(); 68 | // console.log(coche); 69 | -------------------------------------------------------------------------------- /01_clases/JS Clase 17 - Ejercicios con Clases Javascript 1/code/ejercicio-calculadora.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ejercicio Calculadora 7 | 8 | 9 | 10 |

Ejercicio Calculadora

11 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /01_clases/JS Clase 17 - Ejercicios con Clases Javascript 1/code/ejercicio-calculadora.js: -------------------------------------------------------------------------------- 1 | console.log('Ejercicio Calculadora'); 2 | 3 | class Calculadora { 4 | #resultado; 5 | 6 | constructor() { 7 | this.#resultado = 0; 8 | } 9 | 10 | obtenerResultado() { 11 | return this.#resultado; 12 | } 13 | 14 | reiniciar() { 15 | this.#resultado = 0; 16 | } 17 | 18 | sumar(numero) { 19 | try { 20 | if (isNaN(numero)) { 21 | throw Error('No se ha introducido un número válido') 22 | } else { 23 | this.#resultado = this.#resultado + numero 24 | } 25 | } catch (err) { 26 | console.error(err.message); 27 | } 28 | } 29 | 30 | restar(numero) { 31 | this.#resultado = this.#resultado - numero; 32 | } 33 | 34 | multiplicar(numero) { 35 | this.#resultado = this.#resultado * numero; 36 | } 37 | 38 | dividir(numero) { 39 | try { 40 | if (numero === 0 || isNaN(numero)) { 41 | throw Error('Se ha introducido un 0 o no se ha introducido un número válido') 42 | } else { 43 | this.#resultado = this.#resultado / numero; 44 | } 45 | } catch (error) { 46 | console.error(error.message); 47 | } 48 | } 49 | 50 | } 51 | 52 | 53 | // let calc = new Calculadora(); 54 | // console.log(calc.obtenerResultado()); 55 | // calc.sumar(5); 56 | // console.log(calc.obtenerResultado()); 57 | // calc.dividir(2); 58 | // console.log(calc.obtenerResultado()); 59 | 60 | // console.log(calc.obtenerResultado()); 61 | // calc.restar(2); 62 | // console.log(calc.obtenerResultado()); 63 | // calc.multiplicar(5); 64 | // console.log(calc.obtenerResultado()); 65 | // calc.dividir(2); 66 | // console.log(calc.obtenerResultado()); 67 | // calc.sumar('hola'); 68 | // console.log(calc.obtenerResultado()); 69 | -------------------------------------------------------------------------------- /01_clases/JS Clase 17 - Ejercicios con Clases Javascript 1/code/ejercicio-television.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ejercicio Televisión 7 | 8 | 9 | 10 |

Ejercicio Televisión

11 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /01_clases/JS Clase 17 - Ejercicios con Clases Javascript 1/code/ejercicio-television.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | class Television { 4 | #encendido = false; 5 | #canal = 100; 6 | #canales; 7 | #volumen = 0; 8 | #marca; 9 | 10 | constructor(marca, canales) { 11 | this.#marca = marca; 12 | this.#canales = canales; 13 | } 14 | 15 | prender() { 16 | this.#encendido = true; 17 | } 18 | 19 | apagar() { 20 | this.#encendido = false; 21 | } 22 | 23 | verCanalSiguiente() { 24 | if (this.#encendido) { 25 | if (this.#canal === 100) { 26 | this.#canal = 0; 27 | } else { 28 | this.#canal = this.#canal + 1; 29 | } 30 | } else { 31 | console.log('El televisor no está encendido'); 32 | } 33 | } 34 | 35 | verCanalanterior() { 36 | if (this.#encendido) { 37 | if (this.#canal === 0) { 38 | this.#canal = 100; 39 | } else { 40 | this.#canal = this.#canal - 1; 41 | } 42 | } else { 43 | console.log('El televisor no está encendido'); 44 | } 45 | } 46 | 47 | cambiarCanal(canal) { 48 | if (this.#encendido) { 49 | if (canal <= 100 && canal >= 0) { 50 | this.#canal = canal; 51 | } else { 52 | console.log('El canal no existe'); 53 | } 54 | } else { 55 | console.log('El televisor no está encendido'); 56 | } 57 | } 58 | 59 | subirVolumen() { 60 | if (this.#encendido) { 61 | if (this.#volumen === 100) { 62 | console.log('Ya está al máximo'); 63 | } else { 64 | this.#volumen = this.#volumen + 1; 65 | } 66 | } else { 67 | console.log('El televisor no está encendido'); 68 | } 69 | } 70 | 71 | bajarVolumen() { 72 | if (this.#encendido) { 73 | if (this.#volumen === 0) { 74 | console.log('Ya está al mínimo'); 75 | } else { 76 | this.#volumen = this.#volumen - 1; 77 | } 78 | } else { 79 | console.log('El televisor no está encendido'); 80 | } 81 | } 82 | 83 | toString() { 84 | return `Televisor ${this.#marca} \n - Canales: ${this.#canales} \n - Canal actual: ${this.#canal} \n - Volumen actual: ${this.#volumen}`; 85 | } 86 | } 87 | 88 | 89 | let tele = new Television('Samsung', 23); 90 | console.log(tele.toString()); 91 | tele.prender(); 92 | tele.verCanalSiguiente(); 93 | tele.verCanalanterior(); 94 | tele.verCanalanterior(); 95 | tele.subirVolumen(); 96 | tele.cambiarCanal(90); 97 | console.log(tele.toString()); 98 | -------------------------------------------------------------------------------- /01_clases/JS Clase 17 - Ejercicios con Clases Javascript 1/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ejercicios con Clases en Javacript 7 | 8 | 9 |

Ejercicios con Clases en Javacript

10 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /01_clases/JS Clase 18 - Ejercicios con Clases Javascript 2/JS Clase 18 - Ejercicios con Clases en Javascript 2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 18 - Ejercicios con Clases Javascript 2/JS Clase 18 - Ejercicios con Clases en Javascript 2.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 18 - Ejercicios con Clases Javascript 2/code/ejercicio-anotador.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ejercicio Calculadora 7 | 8 | 9 | 10 |

Ejercicio Anotador

11 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /01_clases/JS Clase 18 - Ejercicios con Clases Javascript 2/code/ejercicio-anotador.js: -------------------------------------------------------------------------------- 1 | console.log('Ejercicio Anotador'); 2 | 3 | class Anotador { 4 | #titulo; 5 | #notas; 6 | 7 | constructor(titulo) { 8 | this.#notas = []; 9 | this.#titulo = titulo; 10 | } 11 | 12 | // agregarNota(nota) agrega nota al array de notas 13 | agregarNota(nota) { 14 | this.#notas.push(nota); 15 | } 16 | 17 | // actualizarNota(id, nota) actualiza el ítem con índice id, reemplazándolo por nota 18 | actualizarNota(id, nota) { 19 | this.#notas[id] = nota; 20 | } 21 | 22 | // obtenerNota(id) devuelve el ítem del array notas con índice id 23 | obtenerNota(id) { 24 | return this.#notas[id]; 25 | } 26 | 27 | // eliminarNota(id) elimina de notas el ítem con índice id 28 | eliminarNota(id) { 29 | this.#notas.splice(id, 1); 30 | } 31 | 32 | // eliminarNotas() borra todos los ítems de notas 33 | eliminarNotas() { 34 | this.#notas = []; 35 | } 36 | 37 | // listarNotas() devuelve un string con todas las notas y sus respectivos ids, por ejemplo 38 | listarNotas() { 39 | return this.#notas.reduce( 40 | (salida, nota, index) => { 41 | return `${salida} \n ${index+1}. ${nota}` 42 | } 43 | , `${this.#titulo} \n----------------\n`); 44 | } 45 | } 46 | 47 | let lista = new Anotador('Lista de la compra'); 48 | lista.agregarNota('Leche'); 49 | lista.agregarNota('Pan'); 50 | lista.agregarNota('Refrescos'); 51 | lista.agregarNota('Lentejas'); 52 | console.log(lista.listarNotas()); 53 | 54 | lista.actualizarNota(0, 'Leche desnatada'); 55 | console.log(lista.listarNotas()); 56 | console.log(lista.obtenerNota(1)); 57 | lista.eliminarNota(1); 58 | console.log(lista.listarNotas()); 59 | lista.eliminarNotas(); 60 | console.log(lista.listarNotas()); 61 | -------------------------------------------------------------------------------- /01_clases/JS Clase 18 - Ejercicios con Clases Javascript 2/code/ejercicio-wallet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ejercicio Wallet 7 | 8 | 9 | 10 |

Ejercicio Wallet

11 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /01_clases/JS Clase 18 - Ejercicios con Clases Javascript 2/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ejercicios con Clases en Javacript 2 7 | 8 | 9 |

Ejercicios con Clases en Javacript 2

10 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/JS Clase 19 Modulos en ECMAScript 6 y primer proyecto con Vite.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/JS Clase 19 Modulos en ECMAScript 6 y primer proyecto con Vite.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/code/.nvmrc: -------------------------------------------------------------------------------- 1 | v20.10.0 2 | -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/code/ejemplo-modulo-js/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/code/ejemplo-modulo-js/counter.js: -------------------------------------------------------------------------------- 1 | export function setupCounter(element) { 2 | let counter = 0 3 | const setCounter = (count) => { 4 | counter = count 5 | element.innerHTML = `count is ${counter}` 6 | } 7 | element.addEventListener('click', () => setCounter(counter + 1)) 8 | setCounter(0) 9 | } 10 | -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/code/ejemplo-modulo-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |

Probando módulos en JS

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/code/ejemplo-modulo-js/javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/code/ejemplo-modulo-js/main.js: -------------------------------------------------------------------------------- 1 | import paraExportar from "./src/pruebasmodulos"; 2 | 3 | 4 | console.log('Iniciando main.js'); 5 | console.log(paraExportar.miConstante); 6 | paraExportar.miFuncion(); 7 | -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/code/ejemplo-modulo-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ejemplo-modulo-js", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "vite": "^5.1.4" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/code/ejemplo-modulo-js/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/code/ejemplo-modulo-js/src/pruebasmodulos.js: -------------------------------------------------------------------------------- 1 | const MICONSTANTE = 5; 2 | 3 | let pruebavariable = 'Hola esto es una prueba'; 4 | 5 | let pruebafuncion = () => { 6 | console.log('Desde pruebafunción'); 7 | } 8 | 9 | let paraExportar = { 10 | miFuncion: pruebafuncion, 11 | miConstante: MICONSTANTE 12 | } 13 | 14 | export default paraExportar; 15 | -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/code/ejemplo-modulo-js/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | #app { 39 | max-width: 1280px; 40 | margin: 0 auto; 41 | padding: 2rem; 42 | text-align: center; 43 | } 44 | 45 | .logo { 46 | height: 6em; 47 | padding: 1.5em; 48 | will-change: filter; 49 | transition: filter 300ms; 50 | } 51 | .logo:hover { 52 | filter: drop-shadow(0 0 2em #646cffaa); 53 | } 54 | .logo.vanilla:hover { 55 | filter: drop-shadow(0 0 2em #f7df1eaa); 56 | } 57 | 58 | .card { 59 | padding: 2em; 60 | } 61 | 62 | .read-the-docs { 63 | color: #888; 64 | } 65 | 66 | button { 67 | border-radius: 8px; 68 | border: 1px solid transparent; 69 | padding: 0.6em 1.2em; 70 | font-size: 1em; 71 | font-weight: 500; 72 | font-family: inherit; 73 | background-color: #1a1a1a; 74 | cursor: pointer; 75 | transition: border-color 0.25s; 76 | } 77 | button:hover { 78 | border-color: #646cff; 79 | } 80 | button:focus, 81 | button:focus-visible { 82 | outline: 4px auto -webkit-focus-ring-color; 83 | } 84 | 85 | @media (prefers-color-scheme: light) { 86 | :root { 87 | color: #213547; 88 | background-color: #ffffff; 89 | } 90 | a:hover { 91 | color: #747bff; 92 | } 93 | button { 94 | background-color: #f9f9f9; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/code/old/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Primera prueba con módulos de JS 7 | 8 | 9 | 10 |

Primera prueba con módulos de JS

11 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /01_clases/JS Clase 19 Módulos en ECMAScript 6 y primer proyecto con Vite/code/old/utiles.js: -------------------------------------------------------------------------------- 1 | const MICONSTANTE = 5; 2 | 3 | export { 4 | MICONSTANTE 5 | } 6 | -------------------------------------------------------------------------------- /01_clases/JS Clase 20 - Manipulacion del Dom - Selectores/JS Clase 20 - Manipulacion del Dom - Selectores.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 20 - Manipulacion del Dom - Selectores/JS Clase 20 - Manipulacion del Dom - Selectores.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 20 - Manipulacion del Dom - Selectores/code/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Primeras pruebas con selectores 7 | 8 | 9 |

Primeras pruebas con selectores

10 |

Párrafo con id establecido

11 |

Párrafo con clase importante

12 |

Párrafo con clase importante

13 |
14 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia doloremque voluptas aliquam aut possimus ipsa eveniet soluta sunt incidunt! Distinctio nesciunt quo blanditiis ducimus et voluptates cumque consequatur libero perspiciatis.

15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /01_clases/JS Clase 20 - Manipulacion del Dom - Selectores/code/code/selectores.js: -------------------------------------------------------------------------------- 1 | // Devuelve un HTMLElement o null 2 | let pConId = document.getElementById('p1'); 3 | 4 | // Devuelve siempre un HTMLCollection 5 | let pConClass = document.getElementsByClassName('importante'); 6 | 7 | // Devuelve siempre un HTMLCollection 8 | let parrafos = document.getElementsByTagName('p'); 9 | 10 | // Devuelve siempre un NodeList 11 | let withName = document.getElementsByName('nombreimportante'); 12 | 13 | // Devuelve el primer elemento que cumpla la condición 14 | let parrafo = document.querySelector('p'); 15 | 16 | // Devuelve NodeList 17 | let parrafos2 = document.querySelectorAll('p'); 18 | -------------------------------------------------------------------------------- /01_clases/JS Clase 21 - Creacion de elementos del DOM/JS Clase 21 - Creacion de elementos del DOM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 21 - Creacion de elementos del DOM/JS Clase 21 - Creacion de elementos del DOM.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 21 - Creacion de elementos del DOM/code/creacion-de-elementos.js: -------------------------------------------------------------------------------- 1 | let divConId = document.getElementById("divimportante"); 2 | 3 | const primerParrafo = document.createElement("p"); 4 | primerParrafo.textContent = 5 | "Hola soy el contenido del párrafo"; 6 | 7 | const segundoParrafo = document.createElement("p"); 8 | segundoParrafo.innerHTML = "Hola soy el contenido del párrafo"; 9 | 10 | const tercerParrafo = document.createElement("p"); 11 | const contenido = document.createTextNode( 12 | "Contenido de tipo texto del tercer párrafo" 13 | ); 14 | tercerParrafo.appendChild(contenido); 15 | 16 | divConId.appendChild(primerParrafo); 17 | divConId.appendChild(segundoParrafo); 18 | divConId.appendChild(tercerParrafo); 19 | 20 | console.log(primerParrafo.isConnected); 21 | 22 | const primerDiv = document.createElement("div"); 23 | const miPrimerComentario = document.createComment("Estos son mis comentarios"); 24 | const miPrimerNodoDeTexto = document.createTextNode( 25 | "Este es el contenido de mi nodo de tipo texto" 26 | ); 27 | -------------------------------------------------------------------------------- /01_clases/JS Clase 21 - Creacion de elementos del DOM/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creación de elementos 7 | 8 | 9 |

Creación de elementos

10 |

Párrafo con id establecido

11 |

Párrafo con clase importante

12 |

Párrafo con clase importante

13 |
14 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia doloremque voluptas aliquam aut possimus ipsa eveniet soluta sunt incidunt! Distinctio nesciunt quo blanditiis ducimus et voluptates cumque consequatur libero perspiciatis.

15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /01_clases/JS Clase 22 - Gestión de atributos del DOM/JS Clase 22 - Gestion de atributos del DOM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 22 - Gestión de atributos del DOM/JS Clase 22 - Gestion de atributos del DOM.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 22 - Gestión de atributos del DOM/code/atributos.js: -------------------------------------------------------------------------------- 1 | let primerDiv = document.querySelector("div"); 2 | 3 | console.log(`Contenido del atributo ID: ${primerDiv.id}`); 4 | primerDiv.id = "divconID"; 5 | console.log(`Contenido del atributo ID: ${primerDiv.id}`); 6 | primerDiv.className = "importante negrita"; 7 | primerDiv.style = "color: blue;"; 8 | 9 | primerDiv.setAttribute("pepito", ""); 10 | 11 | let input = document.getElementById("name"); 12 | 13 | input.toggleAttribute("required"); 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 22 - Gestión de atributos del DOM/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Atributos 7 | 8 | 9 |
10 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil non porro eveniet architecto officiis commodi perferendis perspiciatis dolorem, dolorum quisquam autem tempore at similique cum quasi corporis eligendi numquam voluptatem! 11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /01_clases/JS Clase 23 - classList y Dataset/JS Clase 23 - classList y Dataset.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 23 - classList y Dataset/JS Clase 23 - classList y Dataset.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 23 - classList y Dataset/code/classlist-dataset.js: -------------------------------------------------------------------------------- 1 | let primerDiv = document.querySelector("div"); 2 | 3 | let primerProducto = document.querySelector('.producto'); 4 | 5 | console.log(primerProducto.getAttribute('data-price')); 6 | -------------------------------------------------------------------------------- /01_clases/JS Clase 23 - classList y Dataset/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | classList y Dataset 7 | 8 | 9 |
10 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil non porro eveniet architecto officiis commodi perferendis perspiciatis dolorem, dolorum quisquam autem tempore at similique cum quasi corporis eligendi numquam voluptatem! 11 |
12 |
13 |
14 |

Rueda de tacos

15 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur repellat, earum modi quia qui, voluptates velit cum harum distinctio vitae odit aliquid quidem esse reiciendis sequi quam iusto porro molestias.

16 |
17 | 18 |
19 |

Sillín anatómico

20 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur repellat, earum modi quia qui, voluptates velit cum harum distinctio vitae odit aliquid quidem esse reiciendis sequi quam iusto porro molestias.

21 |
22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /01_clases/JS Clase 24 - Manipulacion del DOM/JS Clase 24 - Insertar y movernos por el DOM.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 24 - Manipulacion del DOM/JS Clase 24 - Insertar y movernos por el DOM.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 24 - Manipulacion del DOM/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | classList y Dataset 7 | 12 | 13 | 14 |
15 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil non porro eveniet architecto officiis commodi perferendis perspiciatis dolorem, dolorum quisquam autem tempore at similique cum quasi corporis eligendi numquam voluptatem! 16 |
17 |
18 |

Rueda de tacos

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur repellat, earum modi quia qui, voluptates velit cum harum distinctio vitae odit aliquid quidem esse reiciendis sequi quam iusto porro molestias.

19 | 20 |
21 |

Sillín anatómico

22 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur repellat, earum modi quia qui, voluptates velit cum harum distinctio vitae odit aliquid quidem esse reiciendis sequi quam iusto porro molestias.

23 |
24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /01_clases/JS Clase 24 - Manipulacion del DOM/code/manipulacion-dom.js: -------------------------------------------------------------------------------- 1 | let primerProducto = document.querySelector(".producto"); 2 | 3 | let newP = document.createElement("p"); 4 | newP.textContent = "Este párrafo es nuevo"; 5 | 6 | // console.log(primerProducto.textContent); 7 | // console.log(primerProducto.innerText); 8 | // console.log(primerProducto.innerHTML); 9 | // console.log(primerProducto.outerHTML); 10 | 11 | primerProducto.appendChild(newP); 12 | primerProducto.removeChild(newP); 13 | 14 | let newH2 = document.createElement("h2"); 15 | newH2.textContent = "Soy un nuevo H2"; 16 | 17 | let actualH3 = primerProducto.querySelector("h3"); 18 | 19 | console.log(primerProducto.childNodes); 20 | 21 | // primerProducto.replaceChild(newH2, actualH3); 22 | // actualH3.before(newH2); 23 | // actualH3.replaceWith(newH2); 24 | // actualH3.remove(); 25 | -------------------------------------------------------------------------------- /01_clases/JS Clase 25 - Corrección de ejercicios de Selectores en JS/JS Clase 25 - Correccion de ejercicios de Selectores en JS.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 25 - Corrección de ejercicios de Selectores en JS/JS Clase 25 - Correccion de ejercicios de Selectores en JS.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 25 - Corrección de ejercicios de Selectores en JS/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Corrección de los ejercicios de selectores de JS 7 | 8 | 9 |

Corrección de los ejercicios de selectores de JS

10 | 11 |

Primer párrafo con un primer enlace y este que es el segundo enlace

12 |

Segundo párrafo

13 |

Tercer párrafo

14 | 15 |
16 |
    17 |
  • Elemento 1
    • 18 |
  • Elemento 2
    • 19 |
  • Elemento 3
    • 20 |
  • Elemento 4
    • 21 |
  • Elemento 5
    • 22 |
23 |
24 | 25 |
26 |
    27 |
  • Elemento 1
    • 28 |
  • Elemento 2
    • 29 |
30 |
31 | 32 |

Este es un p con id Text

33 | 34 | 35 | 36 | 37 |
38 |

Primer párrafo con un primer enlace y este que es el segundo enlace

39 |

Segundo párrafo

40 |

Tercer párrafo

41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /01_clases/JS Clase 26 - Gestión de eventos en JS/JS Clase 26 - Gestión de eventos en JS.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 26 - Gestión de eventos en JS/JS Clase 26 - Gestión de eventos en JS.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 26 - Gestión de eventos en JS/code/eventos.js: -------------------------------------------------------------------------------- 1 | console.log("Clase 26 - Empezamos con los eventos"); 2 | -------------------------------------------------------------------------------- /01_clases/JS Clase 26 - Gestión de eventos en JS/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Corrección de los ejercicios de selectores de JS 7 | 8 | 9 |

Corrección de los ejercicios de selectores de JS

10 | 11 |

Primer párrafo con un primer enlace y este que es el segundo enlace

12 |

Segundo párrafo

13 |

Tercer párrafo

14 | 15 | 16 | 17 | 18 | 19 | 20 |

21 | 22 |

23 | 24 | 25 |
26 |
    27 |
  • Elemento 1
    • 28 |
  • Elemento 2
    • 29 |
  • Elemento 3
    • 30 |
  • Elemento 4
    • 31 |
  • Elemento 5
    • 32 |
33 |
34 | 35 |
36 |

Primer párrafo con un primer enlace y este que es el segundo enlace

37 |

Segundo párrafo

38 |

Tercer párrafo

39 |
40 | 41 | 42 | 43 | 44 |
45 |
    46 |
  • Elemento 1
    • 47 |
  • Elemento 2
    • 48 |
  • Elemento 3
    • 49 |
  • Elemento 4
    • 50 |
  • Elemento 5
    • 51 |
52 |
53 | 54 |
55 |

Primer párrafo con un primer enlace y este que es el segundo enlace

56 |

Segundo párrafo

57 |

Tercer párrafo

58 |
59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /01_clases/JS Clase 26 - Gestión de eventos en JS/code/utiles.js: -------------------------------------------------------------------------------- 1 | function mostrarAlert() { 2 | alert("Botón pulsado"); 3 | } 4 | 5 | let segundoBoton = document.getElementById("segundoBoton"); 6 | segundoBoton.setAttribute("onClick", "mostrarAlert()"); 7 | 8 | function mostrarConsole() { 9 | console.log("Escribiendo algo por consola"); 10 | } 11 | 12 | let tercerBoton = document.getElementById("tercerBoton"); 13 | tercerBoton.addEventListener("click", function () { 14 | alert("Botón pulsado"); 15 | }); 16 | tercerBoton.addEventListener("click", mostrarConsole); 17 | 18 | tercerBoton.removeEventListener("click", function () { 19 | alert("Botón pulsado"); 20 | }); 21 | 22 | let cuartoBoton = document.getElementById("cuartoBoton"); 23 | cuartoBoton.addEventListener("click", function (event) { 24 | console.log("He pulsado el cuarto botón."); 25 | console.log(event); 26 | }); 27 | 28 | let botones = document.getElementsByTagName("button"); 29 | for (let boton of botones) { 30 | boton.addEventListener("click", (event) => 31 | console.log("He pulsado el botón", event.target) 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /01_clases/JS Clase 27 - Tipos de eventos mas relevantes/JS Clase 27 - Tipos de eventos mas relevantes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 27 - Tipos de eventos mas relevantes/JS Clase 27 - Tipos de eventos mas relevantes.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 27 - Tipos de eventos mas relevantes/code/document-load.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Clase 27 Javascript 8 | 9 | 10 |

Clase 27 Javascript - Document Load

11 | 12 | 13 | 18 | 19 |

Hola este párrafo es una prueba

20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /01_clases/JS Clase 27 - Tipos de eventos mas relevantes/code/validacion-correo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Clase 27 Javascript 7 | 8 | 9 |

Clase 27 Javascript - Validación de correo

10 | 11 |
12 | 13 |

14 | Enviar 15 | Resetear 16 |

17 | 18 |
19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /01_clases/JS Clase 27 - Tipos de eventos mas relevantes/code/validacion-correo.js: -------------------------------------------------------------------------------- 1 | console.log("Empieza el ejercicio"); 2 | 3 | let buttonSubmit = document.getElementById("buttonSubmit"); 4 | let buttonReset = document.getElementById("buttonReset"); 5 | let primerForm = document.forms[0]; 6 | 7 | buttonSubmit.addEventListener("click", (event) => { 8 | event.preventDefault(); 9 | console.log("Botón de envío pulsado"); 10 | debugger; 11 | // comprobamos que el email tiene una @ 12 | if (primerForm.elements[0].value.includes("@")) { 13 | primerForm.submit(); 14 | } else { 15 | alert("Debe añadir una @ en el campo de texto"); 16 | } 17 | }); 18 | 19 | buttonReset.addEventListener("click", (event) => { 20 | event.preventDefault(); 21 | console.log("Botón de reset pulsado"); 22 | primerForm.reset(); 23 | }); 24 | -------------------------------------------------------------------------------- /01_clases/JS Clase 27 - Tipos de eventos mas relevantes/code/validacion-edad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Clase 27 Javascript 7 | 8 | 9 |

Clase 27 Javascript - Validación de edad

10 | 11 |
12 |

13 |

14 | 15 | 16 |

17 | 18 | 19 | 20 |
21 | 22 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /01_clases/JS Clase 27-2 - Corrección de ejercicios/JS Clase 27-2 Tipos de eventos mas relevantes - ejercicios.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 27-2 - Corrección de ejercicios/JS Clase 27-2 Tipos de eventos mas relevantes - ejercicios.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 27-2 - Corrección de ejercicios/code/correccion-ejercicios.js: -------------------------------------------------------------------------------- 1 | console.log("Empezamos con la corrección"); 2 | 3 | function colorAleatorio() { 4 | let red = Math.floor(Math.random() * 255); 5 | let green = Math.floor(Math.random() * 255); 6 | let blue = Math.floor(Math.random() * 255); 7 | return `rgb(${red}, ${green}, ${blue}`; 8 | } 9 | 10 | let elementos = document.body.getElementsByTagName("*"); 11 | 12 | for (let elemento of elementos) { 13 | elemento.addEventListener("mouseenter", (event) => { 14 | event.target.style.backgroundColor = colorAleatorio(); 15 | }); 16 | 17 | elemento.addEventListener("mouseout", (event) => { 18 | event.target.style.backgroundColor = "white"; 19 | }); 20 | 21 | elemento.addEventListener("contextmenu", (event) => { 22 | event.preventDefault(); 23 | }); 24 | } 25 | -------------------------------------------------------------------------------- /01_clases/JS Clase 27-2 - Corrección de ejercicios/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Corrección de los ejercicios de selectores de JS 7 | 8 | 9 |

Corrección de los ejercicios de selectores de JS

10 | 11 |

Primer párrafo con un primer enlace y este que es el segundo enlace

12 |

Segundo párrafo

13 |

Tercer párrafo

14 | 15 |
16 |
    17 |
  • Elemento 1
    • 18 |
  • Elemento 2
    • 19 |
  • Elemento 3
    • 20 |
  • Elemento 4
    • 21 |
  • Elemento 5
    • 22 |
23 |
24 | 25 |
26 |
    27 |
  1. Elemento 1
    2. 28 |
  2. Elemento 2
    3. 29 |
30 |
31 | 32 |

Este es un p con id Text

33 | 34 |
35 |

Párrafo 1

36 |

Párrafo 2

37 |

Párrafo 3

38 |
39 | 40 |
41 |
42 | Este es el article con la clase oferta 43 |
44 |
45 | 46 |
47 |

Primer párrafo con un primer enlace y este que es el segundo enlace

48 |

Segundo párrafo

49 |

Tercer párrafo

50 |
51 | 52 |

53 | Hola 54 |

55 | 56 |
57 |

hola soy el uno

58 |

hola soy el dos

59 |
60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /01_clases/JS Clase 28 - Corrección de ejercicios de Selectores en JS II/JS Clase 28 - Correccion de ejercicios de Selectores en JS II.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 28 - Corrección de ejercicios de Selectores en JS II/JS Clase 28 - Correccion de ejercicios de Selectores en JS II.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 28 - Corrección de ejercicios de Selectores en JS II/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Corrección de los ejercicios de selectores de JS 7 | 8 | 9 |

Corrección de los ejercicios de selectores de JS

10 | 11 |

Primer párrafo con un primer enlace y este que es el segundo enlace

12 |

Segundo párrafo

13 |

Tercer párrafo

14 | 15 |
16 |
    17 |
  • Elemento 1
    • 18 |
  • Elemento 2
    • 19 |
  • Elemento 3
    • 20 |
  • Elemento 4
    • 21 |
  • Elemento 5
    • 22 |
23 |
24 | 25 |
26 |
    27 |
  1. Elemento 1
    2. 28 |
  2. Elemento 2
    3. 29 |
30 |
31 | 32 |

Este es un p con id Text

33 | 34 |
35 |

Párrafo 1

36 |

Párrafo 2

37 |

Párrafo 3

38 |
39 | 40 |
41 |
42 | Este es el article con la clase oferta 43 |
44 |
45 | 46 |
47 |

Primer párrafo con un primer enlace y este que es el segundo enlace

48 |

Segundo párrafo

49 |

Tercer párrafo

50 |
51 | 52 |

53 | Hola 54 |

55 | 56 |
57 |

hola soy el uno

58 |

hola soy el dos

59 |
60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /01_clases/JS Clase 29 - Emisión y propagación de eventos/JS Clase 29 - Emision y propagacion de eventos.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 29 - Emisión y propagación de eventos/JS Clase 29 - Emision y propagacion de eventos.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 29 - Emisión y propagación de eventos/code/eventos.js: -------------------------------------------------------------------------------- 1 | let h1 = document.querySelector("h1"); 2 | let boton = document.querySelector("button"); 3 | 4 | boton.addEventListener("click", () => console.log("Has pulsado el botón")); 5 | 6 | h1.addEventListener("mouseenter", () => { 7 | let newClick = new Event("click"); 8 | boton.dispatchEvent(newClick); 9 | }); 10 | 11 | let padre = document.querySelector(".padre"); 12 | let hijo = document.querySelector(".hijo"); 13 | 14 | document.body.addEventListener("click", () => { 15 | console.log("Evento lanzado desde el body"); 16 | }); 17 | 18 | padre.addEventListener("click", () => { 19 | console.log("Evento lanzado desde el padre"); 20 | }); 21 | 22 | hijo.addEventListener("click", (event) => { 23 | event.stopPropagation(); 24 | console.log("Evento lanzado desde el hijo"); 25 | }); 26 | -------------------------------------------------------------------------------- /01_clases/JS Clase 29 - Emisión y propagación de eventos/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Eventos 7 | 8 | 9 |

Eventos

10 | 11 | 12 | 13 |
14 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione amet fugiat natus dolorem suscipit optio, ea sit quis officiis ducimus deserunt hic? Tenetur, blanditiis necessitatibus quos recusandae ea ut repudiandae.

15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /01_clases/JS Clase 30 - Ejercicios sobre eventos/JS Clase 30 - Ejercicios sobre eventos.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 30 - Ejercicios sobre eventos/JS Clase 30 - Ejercicios sobre eventos.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 30 - Ejercicios sobre eventos/code/eje1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 9 | 10 | 11 |

Corrección de los ejercicios de selectores de JS

12 |

Ejercicio 1

13 |

Atrás

14 |

Crea una página HTML con un contenedor de una imagen. Debes tener preparadas diez imágenes y en función de la tecla numérica que se pulse (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) debe aparecer esa imagen en el contenedor. Cuando se pulse otro número, debe vaciarse el contenedor y cargarse de nuevo su imagen correspondiente.

15 | 16 |
17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /01_clases/JS Clase 30 - Ejercicios sobre eventos/code/eje2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 17 | 18 | 19 | 20 |

Corrección de los ejercicios de selectores de JS

21 |

Ejercicio 2

22 |

Atrás

23 |

Crea una aplicación cuyo código HTML contenga únicamente una caja roja. Cada vez que el usuario pulse algunas de las teclas de los cursores (flecha arriba, flecha abajo, flecha a derecha, flecha a izquierda) la caja debe desplazarse 10px en la dirección establecida por el cursor.

24 | 25 |
26 |
27 |
28 | 29 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /01_clases/JS Clase 30 - Ejercicios sobre eventos/code/eje4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 11 | 12 | 13 | 14 |

Corrección de los ejercicios de selectores de JS

15 |

Ejercicio 4

16 |

Atrás

17 |

Elabora un programa que vaya rellenando un párrafo de forma dinámica con todas las letras que vaya pulsando el usuario sobre cualquier elemento de la página. Al final del párrafo debes incluir un botón para limpiar el contenido del párrafo.

18 | 19 |
20 |
Párrafo dinamico
21 |

22 |
23 | 24 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /01_clases/JS Clase 30 - Ejercicios sobre eventos/code/eje5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 19 | 20 | 21 | 22 |

Corrección de los ejercicios de selectores de JS

23 |

Ejercicio 5

24 |

Atrás

25 |

Crea una rutina que no permita que el ratón se coloque encima de una caja azul de 100 x 100 px. Cada vez que el ratón intente colocarse encima, la posición de la caja debe cam- biar aleatoriamente por la página.

26 | 27 |
28 |
Caja loca
29 |

30 |
31 | 32 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /01_clases/JS Clase 30 - Ejercicios sobre eventos/code/eje6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 11 | 12 | 13 | 14 |

Corrección de los ejercicios de selectores de JS

15 |

Ejercicio 6

16 |

Atrás

17 |

Crea una aplicación que contenga un párrafo con mucho texto. Debajo del párrafo debe aparecer un botón por cada vocal. Al pulsar sobre una vocal, esa vocal desaparecerá del texto.

18 | 19 |
20 |
21 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, architecto ab quasi accusamus nulla quos consequuntur atque? Quos, voluptatem? Doloribus expedita at odio minima labore, vitae praesentium voluptate repudiandae ipsa.

22 |
23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /01_clases/JS Clase 30 - Ejercicios sobre eventos/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Corrección de los ejercicios de selectores de JS 7 | 8 | 9 |

Corrección de los ejercicios de selectores de JS

10 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /01_clases/JS Clase 31 - Ejercicios sobre eventos II/JS Clase 31 - Ejercicios sobre eventos II.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 31 - Ejercicios sobre eventos II/JS Clase 31 - Ejercicios sobre eventos II.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 31 - Ejercicios sobre eventos II/code/eje1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 9 | 10 | 11 |

Corrección de los ejercicios de selectores de JS

12 |

Ejercicio 1

13 |

Atrás

14 |

Crea una página HTML con un contenedor de una imagen. Debes tener preparadas diez imágenes y en función de la tecla numérica que se pulse (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) debe aparecer esa imagen en el contenedor. Cuando se pulse otro número, debe vaciarse el contenedor y cargarse de nuevo su imagen correspondiente.

15 | 16 |
17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /01_clases/JS Clase 31 - Ejercicios sobre eventos II/code/eje2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 17 | 18 | 19 | 20 |

Corrección de los ejercicios de selectores de JS

21 |

Ejercicio 2

22 |

Atrás

23 |

Crea una aplicación cuyo código HTML contenga únicamente una caja roja. Cada vez que el usuario pulse algunas de las teclas de los cursores (flecha arriba, flecha abajo, flecha a derecha, flecha a izquierda) la caja debe desplazarse 10px en la dirección establecida por el cursor.

24 | 25 |
26 |
27 |
28 | 29 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /01_clases/JS Clase 31 - Ejercicios sobre eventos II/code/eje4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 11 | 12 | 13 | 14 |

Corrección de los ejercicios de selectores de JS

15 |

Ejercicio 4

16 |

Atrás

17 |

Elabora un programa que vaya rellenando un párrafo de forma dinámica con todas las letras que vaya pulsando el usuario sobre cualquier elemento de la página. Al final del párrafo debes incluir un botón para limpiar el contenido del párrafo.

18 | 19 |
20 |
Párrafo dinamico
21 |

22 |
23 | 24 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /01_clases/JS Clase 31 - Ejercicios sobre eventos II/code/eje5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 19 | 20 | 21 | 22 |

Corrección de los ejercicios de selectores de JS

23 |

Ejercicio 5

24 |

Atrás

25 |

Crea una rutina que no permita que el ratón se coloque encima de una caja azul de 100 x 100 px. Cada vez que el ratón intente colocarse encima, la posición de la caja debe cam- biar aleatoriamente por la página.

26 | 27 |
28 |
Caja loca
29 |

30 |
31 | 32 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /01_clases/JS Clase 31 - Ejercicios sobre eventos II/code/eje6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 11 | 12 | 13 | 14 |

Corrección de los ejercicios de selectores de JS

15 |

Ejercicio 6

16 |

Atrás

17 |

Crea una aplicación que contenga un párrafo con mucho texto. Debajo del párrafo debe aparecer un botón por cada vocal. Al pulsar sobre una vocal, esa vocal desaparecerá del texto.

18 | 19 |
20 |
21 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, architecto ab quasi accusamus nulla quos consequuntur atque? Quos, voluptatem? Doloribus expedita at odio minima labore, vitae praesentium voluptate repudiandae ipsa.

22 |
23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /01_clases/JS Clase 31 - Ejercicios sobre eventos II/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Corrección de los ejercicios de selectores de JS 7 | 8 | 9 |

Corrección de los ejercicios de selectores de JS

10 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /01_clases/JS Clase 32 - Ejercicios sobre eventos III/JS Clase 32 - Ejercicios sobre eventos III.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 32 - Ejercicios sobre eventos III/JS Clase 32 - Ejercicios sobre eventos III.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 32 - Ejercicios sobre eventos III/code/eje1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 9 | 10 | 11 |

Corrección de los ejercicios de selectores de JS

12 |

Ejercicio 1

13 |

Atrás

14 |

Crea una página HTML con un contenedor de una imagen. Debes tener preparadas diez imágenes y en función de la tecla numérica que se pulse (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) debe aparecer esa imagen en el contenedor. Cuando se pulse otro número, debe vaciarse el contenedor y cargarse de nuevo su imagen correspondiente.

15 | 16 |
17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /01_clases/JS Clase 32 - Ejercicios sobre eventos III/code/eje2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 17 | 18 | 19 | 20 |

Corrección de los ejercicios de selectores de JS

21 |

Ejercicio 2

22 |

Atrás

23 |

Crea una aplicación cuyo código HTML contenga únicamente una caja roja. Cada vez que el usuario pulse algunas de las teclas de los cursores (flecha arriba, flecha abajo, flecha a derecha, flecha a izquierda) la caja debe desplazarse 10px en la dirección establecida por el cursor.

24 | 25 |
26 |
27 |
28 | 29 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /01_clases/JS Clase 32 - Ejercicios sobre eventos III/code/eje4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 11 | 12 | 13 | 14 |

Corrección de los ejercicios de selectores de JS

15 |

Ejercicio 4

16 |

Atrás

17 |

Elabora un programa que vaya rellenando un párrafo de forma dinámica con todas las letras que vaya pulsando el usuario sobre cualquier elemento de la página. Al final del párrafo debes incluir un botón para limpiar el contenido del párrafo.

18 | 19 |
20 |
Párrafo dinamico
21 |

22 |
23 | 24 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /01_clases/JS Clase 32 - Ejercicios sobre eventos III/code/eje5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 19 | 20 | 21 | 22 |

Corrección de los ejercicios de selectores de JS

23 |

Ejercicio 5

24 |

Atrás

25 |

Crea una rutina que no permita que el ratón se coloque encima de una caja azul de 100 x 100 px. Cada vez que el ratón intente colocarse encima, la posición de la caja debe cam- biar aleatoriamente por la página.

26 | 27 |
28 |
Caja loca
29 |

30 |
31 | 32 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /01_clases/JS Clase 32 - Ejercicios sobre eventos III/code/eje6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Corrección de los ejercicios de selectores de JS 8 | 11 | 12 | 13 | 14 |

Corrección de los ejercicios de selectores de JS

15 |

Ejercicio 6

16 |

Atrás

17 |

Crea una aplicación que contenga un párrafo con mucho texto. Debajo del párrafo debe aparecer un botón por cada vocal. Al pulsar sobre una vocal, esa vocal desaparecerá del texto.

18 | 19 |
20 |
21 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, architecto ab quasi accusamus nulla quos consequuntur atque? Quos, voluptatem? Doloribus expedita at odio minima labore, vitae praesentium voluptate repudiandae ipsa.

22 |
23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /01_clases/JS Clase 32 - Ejercicios sobre eventos III/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Corrección de los ejercicios de selectores de JS 7 | 8 | 9 |

Corrección de los ejercicios de selectores de JS

10 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /01_clases/JS Clase 33 - LocalStorage, SessionStorage y Cookies/JS Clase 33 - LocalStorage, SessionStorage y Cookies.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 33 - LocalStorage, SessionStorage y Cookies/JS Clase 33 - LocalStorage, SessionStorage y Cookies.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 34 - Primer proyecto con Vite/JS Clase 34 Nuestro primer proyecto con Vite en JS.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 34 - Primer proyecto con Vite/JS Clase 34 Nuestro primer proyecto con Vite en JS.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 34 - Primer proyecto con Vite/code/base_pairs.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 34 - Primer proyecto con Vite/code/base_pairs.zip -------------------------------------------------------------------------------- /01_clases/JS Clase 34 - Primer proyecto con Vite/code/pairs/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /01_clases/JS Clase 34 - Primer proyecto con Vite/code/pairs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 |

Corrección de los ejercicios de selectores de JS

12 |

Ejercicio 8

13 |

Atrás

14 |

Juguemos a adivinar las parejas. Debes distribuir en la página una cuadrícula de 6 x 5 cajas. De las 30 cajas habrá 15 distintas. Cada par de cajas será de un color distinto. Inicialmente todas las cajas aparecerán negras. Cuando el usuario pinche sobre una caja, se revelará su auténtico color. En ese momento debes arrastrar la caja al lugar donde creas que se encuentra su pareja. Si aciertas, ambas cajas permanecerán boca arriba y ya no se podrá interactuar con ellas. Si fallas, las dos cajas volverán a su estado inicial. El programa debe detectar cuándo están todas las cajas emparejadas y cuánto tiempo has tar- dado en resolverlo.

15 |
16 |
17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /01_clases/JS Clase 34 - Primer proyecto con Vite/code/pairs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pairs", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "vite": "^5.2.0" 13 | }, 14 | "dependencies": { 15 | "sass": "^1.75.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_clases/JS Clase 34 - Primer proyecto con Vite/code/pairs/sass/components/game.scss: -------------------------------------------------------------------------------- 1 | #game { 2 | display: grid; 3 | // grid-template-columns: repeat(6, 1fr); 4 | // grid-template-rows: repeat(5, 1fr); 5 | gap: 5px; 6 | } 7 | 8 | .box { 9 | width: 100%; 10 | height: 40px; 11 | border: 1px solid black; 12 | background-color: black; 13 | } 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 34 - Primer proyecto con Vite/code/pairs/sass/main.scss: -------------------------------------------------------------------------------- 1 | @import "./components/game.scss"; 2 | -------------------------------------------------------------------------------- /01_clases/JS Clase 34 - Primer proyecto con Vite/code/pairs/src/class/Box.js: -------------------------------------------------------------------------------- 1 | class Box { 2 | #col; 3 | #row; 4 | #color; 5 | #free; 6 | #open; 7 | 8 | constructor(row, col, color) { 9 | this.#col = col; 10 | this.#row = row; 11 | this.#color = color; 12 | this.#free = true; 13 | this.#open = false; 14 | } 15 | 16 | get col() { 17 | return this.#col; 18 | } 19 | 20 | get row() { 21 | return this.#row; 22 | } 23 | } 24 | 25 | export default Box; 26 | -------------------------------------------------------------------------------- /01_clases/JS Clase 34 - Primer proyecto con Vite/code/pairs/src/class/Game.js: -------------------------------------------------------------------------------- 1 | import { shuffleArray } from "../utils/utils"; 2 | 3 | import Box from "./Box"; 4 | 5 | class Game { 6 | #rows; 7 | #cols; 8 | #idElement; 9 | #boxes; 10 | element; 11 | 12 | constructor(rows, cols, idElement = "game") { 13 | this.#rows = rows; 14 | this.#cols = cols; 15 | this.#idElement = idElement; 16 | this.element = document.getElementById(idElement); 17 | this.#boxes = []; 18 | this.createBoxes(); 19 | this.paintBoxes(); 20 | console.log("Se ha creado un objeto de tipo Game"); 21 | } 22 | 23 | get cols() { 24 | return this.#cols; 25 | } 26 | 27 | get rows() { 28 | return this.#rows; 29 | } 30 | 31 | createRandomColors() { 32 | let randomColors = []; 33 | for (let index = 0; index < (this.#cols * this.#rows) / 2; index++) { 34 | let red = Math.floor(Math.random() * 256); 35 | let green = Math.floor(Math.random() * 256); 36 | let blue = Math.floor(Math.random() * 256); 37 | let color = `rgb(${red}, ${green}, ${blue})`; 38 | randomColors.push(color); 39 | } 40 | randomColors = [...randomColors, ...randomColors]; 41 | shuffleArray(randomColors); 42 | return randomColors; 43 | } 44 | 45 | createBoxes() { 46 | let randomColors = this.createRandomColors(); 47 | for (let row = 0; row < this.#rows; row++) { 48 | for (let col = 0; col < this.#cols; col++) { 49 | let color = randomColors.shift(); 50 | let newBox = new Box(row, col, color); 51 | this.#boxes.push(newBox); 52 | } 53 | } 54 | } 55 | 56 | paintBoxes() { 57 | this.setCSSBoxTemplates(); 58 | this.#boxes.map((box) => { 59 | let newBoxDiv = document.createElement("div"); 60 | newBoxDiv.classList.add("box"); 61 | newBoxDiv.dataset.col = box.col; 62 | newBoxDiv.dataset.row = box.row; 63 | this.element.appendChild(newBoxDiv); 64 | }); 65 | } 66 | 67 | setCSSBoxTemplates() { 68 | this.element.style.gridTemplateColumns = `repeat(${this.cols}, 1fr)`; 69 | this.element.style.gridTemplateRows = `repeat(${this.rows}, 1fr)`; 70 | } 71 | } 72 | 73 | export default Game; 74 | -------------------------------------------------------------------------------- /01_clases/JS Clase 34 - Primer proyecto con Vite/code/pairs/src/main.js: -------------------------------------------------------------------------------- 1 | import "../sass/main.scss"; 2 | 3 | import Game from "./class/Game"; 4 | import Box from "./class/Box"; 5 | 6 | let rows = parseInt(prompt("Introduzca el número de filas")); 7 | let cols = parseInt(prompt("Introduzca el número de columnas")); 8 | 9 | let game = new Game(rows, cols, "game"); 10 | let box = new Box(); 11 | -------------------------------------------------------------------------------- /01_clases/JS Clase 34 - Primer proyecto con Vite/code/pairs/src/utils/utils.js: -------------------------------------------------------------------------------- 1 | // Función de baraja o desordena un array que se pasa por parámetro 2 | function shuffleArray(array) { 3 | let currentIndex = array.length; 4 | 5 | // While there remain elements to shuffle... 6 | while (currentIndex != 0) { 7 | // Pick a remaining element... 8 | let randomIndex = Math.floor(Math.random() * currentIndex); 9 | currentIndex--; 10 | 11 | // And swap it with the current element. 12 | [array[currentIndex], array[randomIndex]] = [ 13 | array[randomIndex], 14 | array[currentIndex], 15 | ]; 16 | } 17 | } 18 | 19 | export { shuffleArray }; 20 | -------------------------------------------------------------------------------- /01_clases/JS Clase 35 - Terminando nuestro primer proyecto con Vite/JS Clase 35 - Terminando nuestro proyecto con Vite en JS.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 35 - Terminando nuestro primer proyecto con Vite/JS Clase 35 - Terminando nuestro proyecto con Vite en JS.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 35 - Terminando nuestro primer proyecto con Vite/code/pairs/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /01_clases/JS Clase 35 - Terminando nuestro primer proyecto con Vite/code/pairs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 |

Corrección de los ejercicios de selectores de JS

12 |

Ejercicio 8

13 |

Atrás

14 |

Juguemos a adivinar las parejas. El programa preguntará cuantas filas y columnas quieres y a partir de ahí creará el tablero.

15 |

16 | 17 |

18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /01_clases/JS Clase 35 - Terminando nuestro primer proyecto con Vite/code/pairs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pairs", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "vite": "^5.2.0" 13 | }, 14 | "dependencies": { 15 | "sass": "^1.75.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_clases/JS Clase 35 - Terminando nuestro primer proyecto con Vite/code/pairs/sass/components/game.scss: -------------------------------------------------------------------------------- 1 | #game { 2 | display: grid; 3 | // grid-template-columns: repeat(6, 1fr); 4 | // grid-template-rows: repeat(5, 1fr); 5 | gap: 5px; 6 | } 7 | 8 | .box { 9 | width: 100%; 10 | height: 40px; 11 | border: 1px solid black; 12 | background-color: black; 13 | } 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 35 - Terminando nuestro primer proyecto con Vite/code/pairs/sass/main.scss: -------------------------------------------------------------------------------- 1 | @import "./components/game.scss"; 2 | -------------------------------------------------------------------------------- /01_clases/JS Clase 35 - Terminando nuestro primer proyecto con Vite/code/pairs/src/class/Box.js: -------------------------------------------------------------------------------- 1 | class Box { 2 | #col; 3 | #row; 4 | #color; 5 | #free; 6 | #open; 7 | #element; 8 | 9 | constructor(row, col, color) { 10 | this.#col = col; 11 | this.#row = row; 12 | this.#color = color; 13 | this.#free = true; 14 | this.#open = false; 15 | } 16 | 17 | get col() { 18 | return this.#col; 19 | } 20 | 21 | get row() { 22 | return this.#row; 23 | } 24 | 25 | get open() { 26 | return this.#open; 27 | } 28 | 29 | get free() { 30 | return this.#free; 31 | } 32 | 33 | get color() { 34 | return this.#color; 35 | } 36 | 37 | set element(element) { 38 | this.#element = element; 39 | } 40 | 41 | set free(newValue) { 42 | this.#free = newValue; 43 | } 44 | 45 | addEventClick() { 46 | if (this.#element) { 47 | this.#element.addEventListener("click", (e) => { 48 | if (!this.#open) { 49 | this.#element.style.backgroundColor = this.#color; 50 | this.#open = true; 51 | console.log("Haz hecho click en una tarjeta"); 52 | } 53 | return false; 54 | }); 55 | } 56 | } 57 | 58 | resetColor() { 59 | this.#element.style.backgroundColor = "black"; 60 | this.#open = false; 61 | } 62 | } 63 | 64 | export default Box; 65 | -------------------------------------------------------------------------------- /01_clases/JS Clase 35 - Terminando nuestro primer proyecto con Vite/code/pairs/src/main.js: -------------------------------------------------------------------------------- 1 | import "../sass/main.scss"; 2 | 3 | import Game from "./class/Game"; 4 | import Box from "./class/Box"; 5 | 6 | let resetButton = document.getElementById("reset"); 7 | resetButton.addEventListener("click", () => { 8 | Game.resetGame(); 9 | }); 10 | 11 | let data = Game.getRowsCols(); 12 | let game = new Game(data.rows, data.cols, "game"); 13 | -------------------------------------------------------------------------------- /01_clases/JS Clase 35 - Terminando nuestro primer proyecto con Vite/code/pairs/src/utils/utils.js: -------------------------------------------------------------------------------- 1 | // Función de baraja o desordena un array que se pasa por parámetro 2 | function shuffleArray(array) { 3 | let currentIndex = array.length; 4 | 5 | // While there remain elements to shuffle... 6 | while (currentIndex != 0) { 7 | // Pick a remaining element... 8 | let randomIndex = Math.floor(Math.random() * currentIndex); 9 | currentIndex--; 10 | 11 | // And swap it with the current element. 12 | [array[currentIndex], array[randomIndex]] = [ 13 | array[randomIndex], 14 | array[currentIndex], 15 | ]; 16 | } 17 | } 18 | 19 | export { shuffleArray }; 20 | -------------------------------------------------------------------------------- /01_clases/JS Clase 36 - Guardando en LocaStorage nuestro juego/JS Clase 36 - Guardando en LocaStorage nuestro juego.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 36 - Guardando en LocaStorage nuestro juego/JS Clase 36 - Guardando en LocaStorage nuestro juego.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 36 - Guardando en LocaStorage nuestro juego/code/pairs/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /01_clases/JS Clase 36 - Guardando en LocaStorage nuestro juego/code/pairs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 |

Corrección de los ejercicios de selectores de JS

12 |

Ejercicio 8

13 |

Atrás

14 |

Juguemos a adivinar las parejas. El programa preguntará cuantas filas y columnas quieres y a partir de ahí creará el tablero.

15 |

16 | 17 |

18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /01_clases/JS Clase 36 - Guardando en LocaStorage nuestro juego/code/pairs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pairs", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "vite": "^5.2.0" 13 | }, 14 | "dependencies": { 15 | "sass": "^1.75.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /01_clases/JS Clase 36 - Guardando en LocaStorage nuestro juego/code/pairs/sass/components/game.scss: -------------------------------------------------------------------------------- 1 | #boxContainer { 2 | display: grid; 3 | // grid-template-columns: repeat(6, 1fr); 4 | // grid-template-rows: repeat(5, 1fr); 5 | gap: 5px; 6 | } 7 | 8 | .box { 9 | width: 100%; 10 | height: 40px; 11 | border: 1px solid black; 12 | background-color: black; 13 | } 14 | -------------------------------------------------------------------------------- /01_clases/JS Clase 36 - Guardando en LocaStorage nuestro juego/code/pairs/sass/main.scss: -------------------------------------------------------------------------------- 1 | @import "./components/game.scss"; 2 | -------------------------------------------------------------------------------- /01_clases/JS Clase 36 - Guardando en LocaStorage nuestro juego/code/pairs/src/class/Box.js: -------------------------------------------------------------------------------- 1 | class Box { 2 | #col; 3 | #row; 4 | #color; 5 | #free; 6 | #open; 7 | #element; 8 | 9 | constructor(row, col, color, free = true, open = false) { 10 | this.#col = col; 11 | this.#row = row; 12 | this.#color = color; 13 | this.#free = free; 14 | this.#open = open; 15 | } 16 | 17 | get col() { 18 | return this.#col; 19 | } 20 | 21 | get row() { 22 | return this.#row; 23 | } 24 | 25 | get open() { 26 | return this.#open; 27 | } 28 | 29 | get free() { 30 | return this.#free; 31 | } 32 | 33 | get color() { 34 | return this.#color; 35 | } 36 | 37 | set element(element) { 38 | this.#element = element; 39 | } 40 | 41 | set free(newValue) { 42 | this.#free = newValue; 43 | } 44 | 45 | addEventClick() { 46 | if (this.#element) { 47 | this.#element.addEventListener("click", (e) => { 48 | if (!this.#open) { 49 | this.#element.style.backgroundColor = this.#color; 50 | this.#open = true; 51 | console.log("Haz hecho click en una tarjeta"); 52 | } 53 | return false; 54 | }); 55 | } 56 | } 57 | 58 | resetColor() { 59 | this.#element.style.backgroundColor = "black"; 60 | this.#open = false; 61 | } 62 | } 63 | 64 | export default Box; 65 | -------------------------------------------------------------------------------- /01_clases/JS Clase 36 - Guardando en LocaStorage nuestro juego/code/pairs/src/class/Timer.js: -------------------------------------------------------------------------------- 1 | class Timer { 2 | min; 3 | sec; 4 | ms; 5 | count; 6 | malt; 7 | salt; 8 | msalt; 9 | idElement; 10 | 11 | constructor(idElement = "timer") { 12 | console.log("Creamos un Timer"); 13 | this.idElement = idElement; 14 | 15 | if (localStorage.getItem("timer") !== null) { 16 | let timerFromLocalStorage = JSON.parse(localStorage.getItem("timer")); 17 | this.sec = parseInt(timerFromLocalStorage.sec); 18 | this.min = 0; 19 | this.ms = parseInt(timerFromLocalStorage.ms); 20 | } else { 21 | this.ms = 0; 22 | this.min = 0; 23 | this.sec = 0; 24 | } 25 | } 26 | 27 | start() { 28 | this.count = setInterval(() => { 29 | if (this.ms == 100) { 30 | this.ms = 0; 31 | if (this.sec == 60) { 32 | this.sec = 0; 33 | this.min++; 34 | } else { 35 | if (this.sec % 2 == 0) { 36 | let timerObject = { 37 | sec: this.sec, 38 | ms: this.ms, 39 | min: this.min, 40 | }; 41 | localStorage.setItem("timer", JSON.stringify(timerObject)); 42 | } 43 | this.sec++; 44 | } 45 | } else { 46 | this.ms++; 47 | } 48 | 49 | this.malt = this.pad(this.min); 50 | this.salt = this.pad(this.sec); 51 | this.msalt = this.pad(this.ms); 52 | 53 | this.update(this.malt + ":" + this.salt + ":" + this.msalt); 54 | }, 10); 55 | } 56 | 57 | stop() { 58 | clearInterval(this.count); 59 | } 60 | 61 | update(txt) { 62 | let temp = document.getElementById(this.idElement); 63 | temp.firstChild.nodeValue = txt; 64 | } 65 | 66 | pad(time) { 67 | let temp; 68 | if (time < 10) { 69 | temp = "0" + time; 70 | } else { 71 | temp = time; 72 | } 73 | return temp; 74 | } 75 | } 76 | 77 | export default Timer; 78 | -------------------------------------------------------------------------------- /01_clases/JS Clase 36 - Guardando en LocaStorage nuestro juego/code/pairs/src/main.js: -------------------------------------------------------------------------------- 1 | import "../sass/main.scss"; 2 | 3 | import Game from "./class/Game"; 4 | 5 | let resetButton = document.getElementById("reset"); 6 | resetButton.addEventListener("click", () => { 7 | Game.resetGame(); 8 | }); 9 | 10 | let data = Game.getRowsCols(); 11 | let game = new Game(data.rows, data.cols, "game"); 12 | -------------------------------------------------------------------------------- /01_clases/JS Clase 36 - Guardando en LocaStorage nuestro juego/code/pairs/src/utils/utils.js: -------------------------------------------------------------------------------- 1 | // Función de baraja o desordena un array que se pasa por parámetro 2 | function shuffleArray(array) { 3 | let currentIndex = array.length; 4 | 5 | // While there remain elements to shuffle... 6 | while (currentIndex != 0) { 7 | // Pick a remaining element... 8 | let randomIndex = Math.floor(Math.random() * currentIndex); 9 | currentIndex--; 10 | 11 | // And swap it with the current element. 12 | [array[currentIndex], array[randomIndex]] = [ 13 | array[randomIndex], 14 | array[currentIndex], 15 | ]; 16 | } 17 | } 18 | 19 | export { shuffleArray }; 20 | -------------------------------------------------------------------------------- /01_clases/JS Clase 37 - Promesas y asincronía/JS Clase 37 - Promesas y asincronía.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 37 - Promesas y asincronía/JS Clase 37 - Promesas y asincronía.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 37 - Promesas y asincronía/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Ejemplo con promesas

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /01_clases/JS Clase 37 - Promesas y asincronía/code/promises.js: -------------------------------------------------------------------------------- 1 | // console.log("Empezando la clase de promesas"); 2 | 3 | // Cómo declaramos una promesa 4 | // let p1 = new Promise((resolve, reject) => { 5 | // resolve(5); 6 | // }); 7 | 8 | // let p2 = new Promise((resolve, reject) => { 9 | // setTimeout(() => { 10 | // resolve("La promesa se ha resuelto de forma correcta"); 11 | // }, 5000); 12 | // }); 13 | 14 | // let p3 = new Promise((resolve, reject) => { 15 | // resolve(27); 16 | // }); 17 | 18 | // let p3 = new Promise((resolve, reject) => { 19 | // reject("La promesa NO se ha resuelto de forma correcta"); 20 | // }); 21 | 22 | // Veamos qué métodos tienen las promesas para poder capturar sus estados 23 | // then: se ejecuta cuando la promesa se resuelve 24 | // catch: se ejecuta cuando la promesa es rechazada 25 | // finally: se ejecuta siempre, tanto si la promesa se resuelve como si es rechazada 26 | 27 | // p2.then( 28 | // (valordevuelvo) => { 29 | // console.log("OK: ", valordevuelvo); 30 | // }, 31 | // (valorsierror) => console.log("Error: ", valorsierror) 32 | // ); 33 | 34 | // p1.then((valor) => { 35 | // console.log("P1 me ha devuelto: ", valor); 36 | // return p2; 37 | // }) 38 | // .then((valor2) => { 39 | // console.log("Segundo then: ", valor2); 40 | // return p3; 41 | // }) 42 | // .then((valor3) => { 43 | // console.log("Tercer valor: ", valor3); 44 | // return valor3; 45 | // }) 46 | // .catch((error) => { 47 | // console.log("Ha ocurrido un error", error); 48 | // }) 49 | // .finally(() => { 50 | // console.log("Ejecutando finally"); 51 | // }); 52 | 53 | // Métodos estáticos 54 | // ¿Qué pasa cuando queremos rechazar una promesa manualmente? 55 | 56 | // let pp1 = new Promise((resolve, reject) => { 57 | // resolve(18); 58 | // }); 59 | 60 | // let pp2 = new Promise((resolve, reject) => { 61 | // console.log("Generando clave"); 62 | // setTimeout(() => { 63 | // resolve("aklhdgsi4"); 64 | // }, 5000); 65 | // }); 66 | 67 | // pp1 68 | // .then((edad) => { 69 | // if (edad >= 18) { 70 | // console.log("Acceso autorizado"); 71 | // return pp2; 72 | // } else { 73 | // return Promise.reject("Edad menor que 18"); 74 | // } 75 | // }) 76 | // .then((clave) => { 77 | // console.log("Tu clave es: ", clave); 78 | // }) 79 | // .catch((e) => { 80 | // console.log("Ha ocurrido un error: ", e); 81 | // }) 82 | // .finally(() => { 83 | // console.log("Cerrando la conexión"); 84 | // }); 85 | -------------------------------------------------------------------------------- /01_clases/JS Clase 38 - Asincronía, funciones de carrera/JS Clase 38 - Asincronia funciones de carrera.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 38 - Asincronía, funciones de carrera/JS Clase 38 - Asincronia funciones de carrera.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 38 - Asincronía, funciones de carrera/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /01_clases/JS Clase 39 - Nuestro primer Fetch, async y await/JS Clase 39 - Nuestro primer Fetch, async y await.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 39 - Nuestro primer Fetch, async y await/JS Clase 39 - Nuestro primer Fetch, async y await.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 39 - Nuestro primer Fetch, async y await/code/clase39.js: -------------------------------------------------------------------------------- 1 | console.log("Empezamos la clase 39"); 2 | 3 | // const URL = "https://jsonplaceholder.typicode.com/users/1"; 4 | 5 | // fetch(URL) 6 | // .then((response) => { 7 | // if (response.ok) { 8 | // console.log(response); 9 | // return response.json(); 10 | // } 11 | 12 | // return Promise.reject( 13 | // "No se ha encontrado el usuario con ese identificador" 14 | // ); 15 | // }) 16 | // .then((user) => console.log(user)) 17 | // .catch((error) => console.log(error)); 18 | 19 | const URLCARS = "https://myfakeapi.com/api/cars/"; 20 | const URLUNIQUECAR = "https://myfakeapi.com/api/cars/5"; 21 | 22 | // const getCars = async (year = 2010) => { 23 | // const cars = await fetch(URLCARS) 24 | // .then((response) => response.json()) 25 | // .then((cars) => cars["cars"].filter((car) => car.car_model_year == year)); 26 | // console.log(cars); 27 | // }; 28 | 29 | // getCars(2011); 30 | 31 | // const getCarsFromFirtCarYear = async () => { 32 | // const firstCarYear = await fetch(URLCARS) 33 | // .then((response) => response.json()) 34 | // .then((cars) => cars["cars"][0].car_model_year); 35 | 36 | // const allCarsFilterByYear = await fetch(URLCARS) 37 | // .then((response) => response.json()) 38 | // .then((cars) => 39 | // cars["cars"].filter((car) => car.car_model_year == firstCarYear) 40 | // ); 41 | // console.log(allCarsFilterByYear); 42 | // }; 43 | 44 | // getCarsFromFirtCarYear(); 45 | -------------------------------------------------------------------------------- /01_clases/JS Clase 39 - Nuestro primer Fetch, async y await/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

Nuestro primer fetch

11 | 12 | 13 | -------------------------------------------------------------------------------- /01_clases/JS Clase 40 - Nuestro primer Post/JS Clase 40 - Nuestro primer Post con Fetch.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 40 - Nuestro primer Post/JS Clase 40 - Nuestro primer Post con Fetch.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 40 - Nuestro primer Post/code/clase40.js: -------------------------------------------------------------------------------- 1 | console.log("Empieza la clase 40 de JS"); 2 | 3 | // https://jsonplaceholder.typicode.com/ 4 | 5 | // Qué es una API 6 | // Listar => GET /todos/1 7 | // Crear => POST /todos 8 | // Modificar => PUT /todos/1 9 | // Borrar => DELETE /todos/1 10 | 11 | const URL_TODOS = "https://jsonplaceholder.typicode.com/todos"; 12 | 13 | // fetch(URL_TODOS, { 14 | // method: "POST", // GET, POST, PUT, DELETE, 15 | // headers: { 16 | // "Content-Type": "application/json", 17 | // }, 18 | // body: JSON.stringify({ 19 | // userId: 1, 20 | // title: "Esta es mi nueva tarea", 21 | // }), 22 | // }) 23 | // .then((response) => response.json()) 24 | // .then((json) => { 25 | // console.log(json); 26 | // fetch(`${URL_TODOS}/10`) 27 | // .then((response) => response.json()) 28 | // .then((todo) => console.log(todo)); 29 | // }) 30 | // .catch((error) => console.log(error)); 31 | 32 | let form = document.getElementById("createTodo"); 33 | 34 | form.addEventListener("submit", (event) => { 35 | event.preventDefault(); 36 | let todoName = document.getElementById("todoName"); 37 | let todoCompleted = document.getElementById("todoCompleted").checked; 38 | let todoUser = document.getElementById("userTodo"); 39 | let saveTodo = document.getElementById("saveTodo"); 40 | 41 | saveTodo.disable = true; 42 | saveTodo.textContent = "Enviando..."; 43 | fetch(URL_TODOS, { 44 | method: "POST", 45 | headers: { 46 | "Content-Type": "application/json", 47 | }, 48 | body: JSON.stringify({ 49 | userId: todoUser.value, 50 | title: todoName.value, 51 | completed: todoCompleted, 52 | }), 53 | }) 54 | .then((response) => response.json()) 55 | .then((todo) => { 56 | console.log(todo); 57 | todoName.value = ""; 58 | todoCompleted.checked = false; 59 | saveTodo.disabled = false; 60 | saveTodo.textContent = "Guardar"; 61 | todoUser.value = ""; 62 | }) 63 | .catch((error) => console.log(error)); 64 | }); 65 | 66 | const getUsers = async () => { 67 | const users = await fetch("https://jsonplaceholder.typicode.com/users/") 68 | .then((response) => response.json()) 69 | .then((users) => users); 70 | 71 | let userTodo = document.getElementById("userTodo"); 72 | 73 | users.map((user) => { 74 | let newOption = document.createElement("option"); 75 | newOption.value = user.id; 76 | newOption.textContent = user.name; 77 | userTodo.appendChild(newOption); 78 | }); 79 | }; 80 | 81 | getUsers(); 82 | -------------------------------------------------------------------------------- /01_clases/JS Clase 40 - Nuestro primer Post/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

Nuestro primer Post

11 |
12 |

13 | 14 | 17 |

18 |

19 | 20 | 21 |

22 |

23 | 24 | 25 |

26 | 27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /01_clases/JS Clase 40 - Nuestro primer Post/code/utiles.js: -------------------------------------------------------------------------------- 1 | // https://jsonplaceholder.typicode.com/ 2 | 3 | // Qué es una API 4 | // Listar => GET /todos/1 5 | // Crear => POST /todos 6 | // Modificar => PUT /todos/1 7 | // Borrar => DELETE /todos/1 8 | 9 | const URLAPIBASE = 'https://jsonplaceholder.typicode.com/todos/'; 10 | 11 | // Veamos qué dos devuelve nuestro primer fetch 12 | fetch(URL, { 13 | method: 'POST', // GET, POST, PUT, DELETE 14 | // Sirve para enviar credenciales y para indicar que estamos enviando un JSON 15 | headers: { 16 | 'Content-Type': 'application/json', 17 | // Authorization: 'api key' 18 | }, 19 | cache: 'no-cache', // default, no-cache, reload, force-cache, only-if-cached 20 | body: JSON.stringify({ 21 | title: 'Mi tarea de prueba', 22 | }) 23 | }) 24 | .then(response => { 25 | console.log(response) 26 | }); 27 | 28 | 29 | // https://jsonplaceholder.typicode.com/guide/ 30 | 31 | 32 | // Formulario para crear un Todo primero estático 33 | // formulario para crear un Todo seleccionando un usuario 34 | -------------------------------------------------------------------------------- /01_clases/JS Clase 41 - Que es JWT/JS Clase 41 - Que es JWT.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ConquerBlocks/conquerblocks-js/1bd2514d23bf1ef2adbe4ebbf5df0f54b11e90ea/01_clases/JS Clase 41 - Que es JWT/JS Clase 41 - Que es JWT.pdf -------------------------------------------------------------------------------- /01_clases/JS Clase 42 - Crud en Vanila JS/code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Javascript Crud Bigotón 8 | 9 | 10 | 11 | 12 |
13 |

Javascript Crud Bigotón

14 | 15 |
16 | 23 | 30 | 31 | 32 |
33 | 34 |
    35 |
    36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /01_clases/JS Clase 42 - Crud en Vanila JS/code/javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /01_clases/JS Clase 42 - Crud en Vanila JS/code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascriptcrud", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "vite": "^5.3.1" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /01_clases/JS Clase 42 - Crud en Vanila JS/code/public/src/api.js: -------------------------------------------------------------------------------- 1 | const API_URL = "https://jsonplaceholder.typicode.com/users"; 2 | 3 | export const getUsers = async () => { 4 | const response = await fetch(API_URL); 5 | 6 | return await response.json(); 7 | }; 8 | 9 | export const deleteUser = async (id) => { 10 | const responser = await fetch(`${API_URL}/${id}`, { 11 | method: "DELETE", 12 | }); 13 | 14 | return await responser.json(); 15 | }; 16 | 17 | export const updateUser = async (user) => { 18 | const url = user.id ? `${API_URL}/${user.id}` : API_URL; 19 | const method = user.id ? "PUT" : "POST"; 20 | 21 | const response = await fetch(url, { 22 | method: method, 23 | headers: { 24 | "Content-Type": "application/json", 25 | }, 26 | body: JSON.stringify(user), 27 | }); 28 | 29 | return await response.json(); 30 | }; 31 | -------------------------------------------------------------------------------- /01_clases/JS Clase 42 - Crud en Vanila JS/code/public/src/crud.js: -------------------------------------------------------------------------------- 1 | import { getUsers, deleteUser, updateUser } from "./api.js"; 2 | 3 | let editUser = null; 4 | const form = document.getElementById("form"); 5 | const userList = document.getElementById("user-list"); 6 | 7 | // render de usuarios 8 | const renderUsers = async () => { 9 | const users = await getUsers(); 10 | 11 | users.forEach((user) => { 12 | const element = document.createElement("li"); 13 | 14 | element.innerHTML = ` 15 | ${user.name} (${user.email}) 16 | 17 | 18 | `; 19 | 20 | userList.appendChild(element); 21 | }); 22 | }; 23 | 24 | // manejar el submit 25 | const handleSubmit = async (event) => { 26 | event.preventDefault(); 27 | 28 | const name = document.getElementById("name").value; 29 | const email = document.getElementById("email").value; 30 | 31 | await updateUser({ name, email, id: editUser ? editUser.id : null }); 32 | 33 | form.reset(); 34 | 35 | renderUsers(); 36 | }; 37 | 38 | // manejar el edit 39 | 40 | const handleEdit = async (id, name, email) => { 41 | editUser = { id, name, email }; 42 | 43 | document.getElementById("name").value = name; 44 | document.getElementById("email").value = email; 45 | }; 46 | 47 | // manejar el delete 48 | const handleDelete = async (id) => { 49 | await deleteUser(id); 50 | 51 | renderUsers(); 52 | }; 53 | 54 | // agregar eventos al html 55 | 56 | form.addEventListener("submit", handleSubmit); 57 | 58 | userList.addEventListener("click", (event) => { 59 | const target = event.target; 60 | 61 | if (target.classList.contains("edit")) { 62 | const id = target.getAttribute("data-id"); 63 | const user = Array.from(target.parentNode.children)[0].innerText.split( 64 | " (", 65 | ); 66 | 67 | const name = user[0]; 68 | const email = user[1].replace(")", ""); 69 | 70 | handleEdit(id, name, email); 71 | } else if (target.classList.contains("delete")) { 72 | const id = target.getAttribute("data-id"); 73 | handleDelete(id); 74 | } 75 | }); 76 | 77 | renderUsers(); 78 | -------------------------------------------------------------------------------- /01_clases/JS Clase 42 - Crud en Vanila JS/code/public/src/main.js: -------------------------------------------------------------------------------- 1 | import "./crud.js"; 2 | -------------------------------------------------------------------------------- /01_clases/JS Clase 42 - Crud en Vanila JS/code/public/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | height: 100vh; 7 | margin: 0; 8 | } 9 | 10 | #app { 11 | max-width: 400px; 12 | width: 100%; 13 | } 14 | 15 | form { 16 | display: flex; 17 | flex-direction: column; 18 | } 19 | 20 | form input, 21 | form button { 22 | margin-bottom: 10px; 23 | padding: 10px; 24 | } 25 | 26 | ul { 27 | list-style: none; 28 | padding: 0; 29 | } 30 | 31 | li { 32 | display: flex; 33 | justify-content: space-between; 34 | align-items: center; 35 | margin-bottom: 10px; 36 | } 37 | -------------------------------------------------------------------------------- /01_clases/JS Clase 42 - Crud en Vanila JS/code/public/vite.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------