├── .github ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md └── FUNDING.yml ├── .vscode └── settings.json ├── 01-introduccion ├── 01-que-es-javascript.md └── 02-historia-javascript.md ├── 02-fundamentos ├── 01-variables.md ├── 02-tipos-de-datos.md ├── 03-coercion-de-datos.md ├── 04-operadores.md └── 05-ejercicios.md ├── 03-estructuras-de-control ├── 01-condicionales.md ├── 02-bucles.md └── 03-ejercicios.md ├── 04-funciones ├── 01-funciones.md └── 02-ejercicios.md ├── 05-arrays ├── 01-arrays.md ├── 02-agregar-y-eliminar-elementos.md ├── 03-iterando-arrays.md ├── 04-arrow-functions.md ├── 05-arrow-functions-con-arrays.md └── 06-ejercicios.md ├── 06-objetos-y-clases ├── 01-ecmascript-6.md ├── 02-declaracion-con-let-y-const.md ├── 03-string-templates.md ├── 04-objetos.md ├── 05-iterando-objetos.md ├── 06-desestructuracion-de-objetos.md ├── 07-desestructuracion-de-arrays.md ├── 08-clases.md └── 09-ejercicios.md ├── 07-poo ├── 01-programacion-orientada-a-objetos.md ├── 02-declaracion-de-clases.md ├── 03-abstract-classes.md ├── 04-herencia.md ├── 05-encapsulamiento.md ├── 06-polimorfismo.md └── 07-ejercicios.md ├── 08-dom ├── 01-dom.md ├── 02-eventos.md ├── 03-seleccion-del-dom.md ├── 04-crear-elementos.md ├── 05-eventos-del-dom.md ├── 06-agregar-eventos-a-elementos.md ├── 07-manipulacion-de-atributos.md ├── 08-localstorage.md ├── 09-elementos-dinamicos.md └── 10-ejercicios.md ├── LICENSE ├── README.md └── proyectos ├── conversor-monedas.md └── conversor-monedas ├── 01-conversor-monedas-variables.js ├── 02-conversor-monedas-inputs.js ├── 03-conversor-monedas-condicionales.js ├── 04-conversor-monedas-ciclos.js └── 05-conversor-monedas-funciones.js /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # .github/CODE_OF_CONDUCT.md 2 | 3 | # 📜 Código de Conducta 4 | 5 | Este proyecto adopta el [Contributor Covenant](https://www.contributor-covenant.org/es/version/2/1/code_of_conduct/) versión 2.1 como base para fomentar una comunidad abierta y acogedora. 6 | 7 | ## 📌 Nuestra promesa 8 | 9 | Nos comprometemos a hacer que la participación en nuestro proyecto sea una experiencia libre de acoso para todos, sin importar edad, tamaño corporal, discapacidad, etnia, características sexuales, identidad y expresión de género, nivel de experiencia, educación, estatus socioeconómico, nacionalidad, apariencia personal, raza, religión o identidad u orientación sexual. 10 | 11 | ## 🧭 Nuestro estándar 12 | 13 | Ejemplos de comportamiento que contribuyen a crear un entorno positivo: 14 | 15 | - Uso de un lenguaje amable e inclusivo 16 | - Respeto a diferentes puntos de vista y experiencias 17 | - Aceptación de críticas constructivas con gracia 18 | 19 | Comportamientos inaceptables: 20 | 21 | - Uso de lenguaje o imágenes sexualizadas 22 | - Comentarios insultantes o despectivos 23 | - Acoso público o privado 24 | 25 | ## 🛠 Aplicación 26 | 27 | Los casos de comportamiento abusivo o inaceptable pueden ser reportados al equipo del proyecto. Todas las quejas serán revisadas e investigadas de manera apropiada. 28 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # 🖇️ Guía de Contribución 2 | 3 | ¡Gracias por considerar contribuir a este proyecto! 4 | 5 | ## 🚀 Cómo empezar 6 | 7 | 1. **Haz un fork del repositorio** 8 | 2. **Clona tu fork** en tu máquina local: 9 | ```bash 10 | git clone https://github.com/tu-usuario/tu-repo.git 11 | cd tu-repo 12 | ``` 13 | 3. **Crea una rama para tu cambio**: 14 | ```bash 15 | git checkout -b feature/nombre-de-tu-cambio 16 | ``` 17 | 4. **Realiza tus cambios** y haz commit: 18 | ```bash 19 | git commit -m "Agrega nueva funcionalidad" 20 | ``` 21 | 5. **Haz push a tu rama**: 22 | ```bash 23 | git push origin feature/nombre-de-tu-cambio 24 | ``` 25 | 6. **Abre un Pull Request** 26 | 27 | ## ✅ Requisitos del código 28 | 29 | - Sigue el estilo de código definido en el proyecto (`black`, `flake8`) 30 | - Escribe pruebas si agregas o modificas funciones 31 | - Asegúrate de que las pruebas pasen antes de hacer PR: 32 | 33 | ```bash 34 | pytest 35 | ``` 36 | 37 | ## 🤝 Buenas prácticas 38 | 39 | - Mantén tus cambios enfocados (una sola funcionalidad por PR) 40 | - Describe claramente qué haces en tus commits y PRs 41 | - Sé respetuoso con los comentarios y sugerencias del equipo 42 | 43 | ¡Tu ayuda es bienvenida! 🙌 44 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: brayandiazc 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": [ 3 | "algun", 4 | "Conversor", 5 | "dolares", 6 | "numeros", 7 | "opcion", 8 | "unshift" 9 | ] 10 | } -------------------------------------------------------------------------------- /01-introduccion/01-que-es-javascript.md: -------------------------------------------------------------------------------- 1 | # ¿Qué es JavaScript? 2 | 3 | JavaScript es un lenguaje de programación ampliamente utilizado que permite agregar interactividad, dinamismo y características avanzadas a sitios web y aplicaciones web. Fue desarrollado por Brendan Eich en 1995 y se ha convertido en uno de los lenguajes de programación más populares y esenciales en el mundo del desarrollo web. 4 | 5 | ## Características principales 6 | 7 | - **Interpretado**: JavaScript es un lenguaje interpretado, lo que significa que no es necesario compilar el código antes de ejecutarlo. Los navegadores web pueden leer y ejecutar el código JavaScript directamente. 8 | 9 | - **Orientado a objetos**: JavaScript es un lenguaje orientado a objetos, lo que facilita la organización y estructuración del código mediante el uso de objetos y clases. 10 | 11 | - **Multiplataforma**: JavaScript es compatible con todos los principales navegadores web y sistemas operativos, lo que lo convierte en una excelente opción para el desarrollo de aplicaciones web y móviles. 12 | 13 | - **Event-driven**: JavaScript permite la creación de aplicaciones interactivas utilizando eventos, como clics de ratón y pulsaciones de teclas, para controlar el flujo de la ejecución del código. 14 | 15 | - **Dinámico**: JavaScript permite a los desarrolladores modificar el contenido y la estructura de una página web en tiempo real, sin necesidad de recargar la página completa. 16 | 17 | ## Usos comunes de JavaScript 18 | 19 | - Crear y controlar animaciones y efectos visuales en sitios web. 20 | - Validación de formularios y entrada de datos en tiempo real. 21 | - Crear aplicaciones web interactivas y de alto rendimiento, como juegos y aplicaciones de colaboración. 22 | - Desarrollo de aplicaciones móviles y de escritorio utilizando tecnologías basadas en JavaScript, como React Native y Electron. 23 | - Desarrollo del lado del servidor con tecnologías como Node.js. 24 | 25 | En resumen, JavaScript es un lenguaje de programación versátil y poderoso que es fundamental en el desarrollo web moderno. Aprender JavaScript te permitirá crear sitios web y aplicaciones interactivas y de alto rendimiento. En las siguientes secciones, exploraremos los fundamentos de JavaScript y cómo utilizarlo para mejorar tus proyectos. 26 | -------------------------------------------------------------------------------- /01-introduccion/02-historia-javascript.md: -------------------------------------------------------------------------------- 1 | # 02 - Historia de JavaScript 2 | 3 | JavaScript fue creado por Brendan Eich en 1995, mientras trabajaba en Netscape Communications Corporation. Originalmente se llamó Mocha, luego se renombró a LiveScript y finalmente a JavaScript. A pesar del nombre, no tiene relación directa con el lenguaje de programación Java. 4 | 5 | Netscape y Sun Microsystems decidieron unir fuerzas y promocionar JavaScript como un lenguaje de scripting complementario a Java. En 1996, Microsoft lanzó su propio dialecto de JavaScript llamado JScript, que se incluyó en Internet Explorer 3.0. 6 | 7 | En 1997, se presentó la propuesta de estandarizar JavaScript al organismo de estandarización ECMA International. La primera edición del estándar, conocida como ECMAScript, se publicó en 1998. Desde entonces, ECMAScript ha pasado por varias revisiones y actualizaciones, siendo la versión más reciente ECMAScript 2022 (ES2022). 8 | 9 | JavaScript ha crecido significativamente desde sus inicios y ahora se utiliza en una amplia variedad de aplicaciones, desde navegadores web hasta servidores, dispositivos móviles y más. La evolución de JavaScript ha sido impulsada en gran medida por la comunidad de desarrolladores y las mejoras en los motores de JavaScript de los navegadores web. 10 | -------------------------------------------------------------------------------- /02-fundamentos/01-variables.md: -------------------------------------------------------------------------------- 1 | # Variables en JavaScript 2 | 3 | Las variables son elementos esenciales en cualquier lenguaje de programación. En JavaScript, las variables se utilizan para almacenar valores y hacer referencia a ellos en nuestro código. 4 | 5 | ## Declaración de variables 6 | 7 | En JavaScript, podemos declarar variables usando las palabras clave `var`, `let`, o `const`. La diferencia entre estas tres es cómo manejan el alcance y la asignación de valores. 8 | 9 | ### `var` 10 | 11 | La palabra clave `var` se utiliza para declarar variables globales o locales en una función sin importar el bloque en el que se declare. 12 | 13 | ```js 14 | var miVariable = "Hola mundo"; 15 | ``` 16 | 17 | En el ejemplo anterior, la variable `miVariable` es declarada en el ámbito global. Esto significa que la variable `miVariable` puede ser accedida desde cualquier parte del código. También es posible declarar variables e inicializarlas o asignarle valores más adelante. 18 | 19 | ```js 20 | // Declaración de variables 21 | var nombre; 22 | 23 | // Asignación de valores 24 | nombre = "Juan"; 25 | 26 | // Declaración de variables 27 | var edad, programas, numeroIdentificacion; 28 | 29 | // Asignación de valores 30 | edad = 30; 31 | programas = true; 32 | numeroIdentificacion = 123456789; 33 | ``` 34 | 35 | ### `let` 36 | 37 | La palabra clave `let` se utiliza para declarar variables locales en un bloque, declaración o expresión, y solo está disponible dentro del bloque en el que se declara. 38 | 39 | ```js 40 | let miVariable = "Hola mundo"; 41 | ``` 42 | 43 | ### `const` 44 | 45 | La palabra clave `const` se utiliza para declarar variables de solo lectura que no pueden ser reasignadas. El valor de una variable `const` no puede cambiar a lo largo de la ejecución del programa. 46 | 47 | ```js 48 | const miVariable = "Hola mundo"; 49 | ``` 50 | 51 | ### Ejemplo 52 | 53 | Cuando usar `var`, `let` o `const`? 54 | 55 | Depende de la situación. Si deseas declarar una variable global, usa `var`. Si deseas declarar una variable local, usa `let`. Si deseas declarar una variable de solo lectura, usa `const`. 56 | 57 | ```javascript 58 | // Declaración de variables 59 | var nombre = "Juan"; 60 | let paisDeResidencia = "España"; 61 | const edad = 30; 62 | var programas = true; 63 | const numeroIdentificacion = 123456789; 64 | let bandasFavoritas = ["The Beatles", "Led Zeppelin", "Queen"]; 65 | 66 | // Creación de objeto 67 | const persona = { 68 | nombre: nombre, 69 | paisDeResidencia: paisDeResidencia, 70 | edad: edad, 71 | programas: programas, 72 | numeroIdentificacion: numeroIdentificacion, 73 | bandasFavoritas: bandasFavoritas, 74 | }; 75 | 76 | console.log(persona); 77 | ``` 78 | 79 | ## Buenas prácticas 80 | 81 | 1. Utiliza nombres descriptivos para tus variables. Por ejemplo, `nombre` es mejor que `n`. 82 | 2. Utiliza nombres que sean cortos y concisos. 83 | 3. Utiliza nombres que sean fáciles de escribir, leer, pronunciar, recordar y fáciles de buscar en el código. 84 | 4. Utiliza nombres en inglés en lo posible. 85 | 5. Las variables no deben contener espacios y no pueden contener caracteres especiales. 86 | 6. Las variables no deben contener palabras reservadas de JavaScript. 87 | 7. Las variables no deben contener nombres de funciones, métodos, clases, objetos, etc. 88 | 8. Las variables no deben iniciar con números, pero pueden contenerlos. 89 | 9. Los nombres de las variables deben ser en minúsculas, a menos que sean constantes. 90 | 10. Los tipos de escritura de las variables deben ser camelCase o snake_case. 91 | -------------------------------------------------------------------------------- /02-fundamentos/02-tipos-de-datos.md: -------------------------------------------------------------------------------- 1 | # Tipos de datos en JavaScript 2 | 3 | En JavaScript, existen varios tipos de datos que se pueden utilizar para almacenar información en variables. 4 | 5 | * `string` 6 | * `number` 7 | * `boolean` 8 | * `undefined` 9 | * `null` 10 | * `symbol` 11 | * `bigint` 12 | * `array` 13 | * `object` 14 | 15 | ## Tipo de dato `string` 16 | 17 | El tipo de datos `string` o cadena de caracteres se utiliza para representar texto. 18 | 19 | ```js 20 | var nombre = "Juan"; 21 | var apellido = "Pérez"; 22 | var nombreCompleto = nombre + " " + apellido; 23 | ``` 24 | 25 | También se pueden utilizar caracteres especiales en las cadenas de texto, como saltos de línea y tabulaciones, utilizando secuencias de escape. 26 | 27 | ```js 28 | var mensaje = "Este es un mensaje\nen dos líneas."; 29 | var titulo = "Página principal\t\tMi sitio web"; 30 | ``` 31 | 32 | ## Tipo de dato `number` 33 | 34 | El tipo de datos `number` o numérico se utiliza para representar números enteros y decimales. 35 | 36 | ```js 37 | var numeroEntero = 42; 38 | var numeroDecimal = 3.14; 39 | ``` 40 | 41 | ## Tipo de dato `boolean` 42 | 43 | El tipo de datos `boolean` o booleano se utiliza para representar valores lógicos, es decir, verdadero o falso. 44 | 45 | ```js 46 | var esMayorDeEdad = true; 47 | var tieneLicencia = false; 48 | ``` 49 | 50 | ## Tipo de dato `undefined` 51 | 52 | El tipo de datos `undefined` se utiliza para representar un valor no definido. 53 | 54 | ```js 55 | var valorNoDefinido; 56 | ``` 57 | 58 | ## Tipo de dato `null` 59 | 60 | El tipo de datos `null` se utiliza para representar un valor nulo o vacío. 61 | 62 | ```js 63 | var valorNulo = null; 64 | ``` 65 | 66 | ## Tipo de dato `symbol` 67 | 68 | El tipo de datos `symbol` se utiliza para representar un valor único e inmutable. 69 | 70 | ```js 71 | var simbolo = Symbol("mi-simbolo"); 72 | ``` 73 | 74 | ## Tipo de dato `bigint` 75 | 76 | El tipo de datos `bigint` se utiliza para representar números enteros de gran tamaño. 77 | 78 | ```js 79 | var numeroEnteroGrande = 9007199254740991n; 80 | ``` 81 | 82 | ## Tipo de dato `Array` 83 | 84 | El tipo de datos `Array` o arreglo se utiliza para representar una colección de datos ordenados. 85 | 86 | ```js 87 | var frutas = ["manzana", "naranja", "plátano"]; 88 | var numeros = [1, 2, 3, 4, 5]; 89 | ``` 90 | 91 | ## Tipo de dato `object` 92 | 93 | El tipo de datos `object` o objeto se utiliza para representar una colección de datos. 94 | 95 | ```js 96 | var persona = { 97 | nombre: "Juan", 98 | apellido: "Pérez", 99 | edad: 30, 100 | programas: true, 101 | numeroIdentificacion: 123456789, 102 | bandasFavoritas: ["The Beatles", "Led Zeppelin", "Queen"], 103 | }; 104 | ``` 105 | 106 | ## Buenas prácticas 107 | 108 | Para saber cual es el tipo de dato de una variable, podemos utilizar el operador `typeof`. 109 | 110 | ```javascript 111 | var nombre = "Juan"; 112 | console.log(typeof nombre); // string 113 | 114 | var edad = 30; 115 | console.log(typeof edad); // number 116 | 117 | var programas = true; 118 | console.log(typeof programas); // boolean 119 | 120 | var valorNoDefinido; 121 | console.log(typeof valorNoDefinido); // undefined 122 | 123 | var valorNulo = null; 124 | console.log(typeof valorNulo); // object 125 | 126 | var simbolo = Symbol("mi-simbolo"); 127 | console.log(typeof simbolo); // symbol 128 | 129 | var numeroEnteroGrande = 9007199254740991n; 130 | console.log(typeof numeroEnteroGrande); // bigint 131 | 132 | var frutas = ["manzana", "naranja", "plátano"]; 133 | console.log(typeof frutas); // object 134 | 135 | var persona = { 136 | nombre: "Juan", 137 | apellido: "Pérez", 138 | edad: 30, 139 | programas: true, 140 | numeroIdentificacion: 123456789, 141 | bandasFavoritas: ["The Beatles", "Led Zeppelin", "Queen"], 142 | }; 143 | console.log(typeof persona); // object 144 | ``` 145 | -------------------------------------------------------------------------------- /02-fundamentos/03-coercion-de-datos.md: -------------------------------------------------------------------------------- 1 | # Coerción de datos en JavaScript 2 | 3 | La coerción de datos en JavaScript se refiere a la conversión automática que realiza el lenguaje de un tipo de dato a otro. A continuación, se presentan algunos ejemplos de coerción de datos en JavaScript. 4 | 5 | ## Coerción implícita 6 | 7 | La coerción implícita es cuando JavaScript convierte un tipo de dato automáticamente en otro. Por ejemplo, cuando se suman un número y una cadena de texto, JavaScript convierte automáticamente la cadena de texto en un número antes de realizar la suma. 8 | 9 | ```javascript 10 | var edad = 30; 11 | var mensaje = "Tengo " + edad + " años."; // Coerción implícita de edad a cadena de texto 12 | console.log(mensaje); // salida: "Tengo 30 años." 13 | ``` 14 | 15 | ## Coerción explícita 16 | 17 | La coerción explícita es cuando se realiza una conversión de un tipo de dato a otro de forma explícita utilizando funciones o métodos específicos. Por ejemplo, se puede convertir una cadena de texto a un número utilizando la función `Number()`. 18 | 19 | ```javascript 20 | var numeroComoCadena = "42"; 21 | var numeroComoNumero = Number(numeroComoCadena); // Coerción explícita de cadena de texto a número 22 | console.log(typeof numeroComoCadena); // salida: "string" 23 | console.log(typeof numeroComoNumero); // salida: "number" 24 | ``` 25 | 26 | ## Coerción de datos: `string` 27 | 28 | En JavaScript, cualquier tipo de dato puede ser convertido a una cadena de texto utilizando el método `toString()`. Este método devuelve una cadena de texto que representa el valor original. 29 | 30 | ```javascript 31 | var numero = 42; 32 | var cadenaDeTexto = numero.toString(); // Conversión a cadena de texto 33 | console.log(typeof numero); // salida: "number" 34 | console.log(typeof cadenaDeTexto); // salida: "string" 35 | ``` 36 | 37 | ## Coerción de datos: `number` 38 | 39 | En JavaScript, cualquier tipo de dato puede ser convertido a un número utilizando las funciones `Number()` y `parseInt()`. La función `Number()` devuelve un número de punto flotante, mientras que la función parseInt() devuelve un número entero. 40 | 41 | ```javascript 42 | var cadenaDeTexto1 = "42"; 43 | var cadenaDeTexto2 = "3.14"; 44 | var numero1 = Number(cadenaDeTexto1); // Conversión a número de punto flotante 45 | var numero2 = parseInt(cadenaDeTexto2); // Conversión a número entero 46 | console.log(typeof cadenaDeTexto1); // salida: "string" 47 | console.log(typeof cadenaDeTexto2); // salida: "string" 48 | console.log(typeof numero1); // salida: "number" 49 | console.log(typeof numero2); // salida: "number" 50 | ``` 51 | 52 | ## Coerción de datos: `boolean` 53 | 54 | En JavaScript, cualquier tipo de dato puede ser convertido a un valor booleano. Los valores que se consideran `false` en JavaScript son `false`, `0`, `""`, `null`, `undefined` y `NaN`. Cualquier otro valor se considera `true`. 55 | 56 | ```javascript 57 | var valor1 = 1; 58 | var valor2 = ""; 59 | var valor3 = undefined; 60 | var valor4 = null; 61 | console.log(Boolean(valor1)); // salida: true 62 | console.log(Boolean(valor2)); // salida: false 63 | console.log(Boolean(valor3)); // salida: false 64 | console.log(Boolean(valor4)); // salida: false 65 | ``` 66 | 67 | ¡Y eso es todo por ahora! La coerción de datos en JavaScript es una herramienta muy útil para convertir valores de un tipo de dato a otro cuando sea necesario, ya sea de forma implícita o explícita. Es importante tener en cuenta que la coerción implícita puede llevar a resultados inesperados o errores en nuestro código si no se maneja adecuadamente. Por eso es recomendable ser conscientes de las conversiones de datos que están ocurriendo en nuestro código y utilizar la coerción explícita cuando sea necesario para evitar confusiones o errores. Con un buen conocimiento de la coerción de datos en JavaScript, podemos escribir código más claro y efectivo para nuestras aplicaciones. 68 | 69 | ## Buenas prácticas 70 | 71 | - Evitar el uso de operadores de igualdad débil (==) y desigualdad débil (!=) ya que pueden provocar resultados inesperados debido a la coerción automática de tipos de datos. En su lugar, se recomienda utilizar los operadores de igualdad estricta (===) y desigualdad estricta (!==) que comparan tanto el valor como el tipo de dato. 72 | - Utilizar los métodos nativos de conversión de tipos de datos, como parseInt(), parseFloat() y Number(), en lugar de usar conversiones implícitas. Esto ayuda a evitar errores y asegura una conversión precisa. 73 | - Ser explícitos al convertir valores, en lugar de confiar en la coerción implícita. Por ejemplo, usar parseInt("10", 10) en lugar de solo parseInt("10"). 74 | - Entender cómo funciona la coerción de tipos de datos en JavaScript. Por ejemplo, tener en cuenta que una cadena vacía ("") se convierte en 0 cuando se usa en una operación aritmética. 75 | - Usar isNaN() para verificar si un valor es NaN (Not a Number) en lugar de compararlo directamente con NaN. 76 | - Usar typeof para verificar el tipo de dato de un valor en lugar de compararlo directamente con un tipo de dato. 77 | -------------------------------------------------------------------------------- /02-fundamentos/04-operadores.md: -------------------------------------------------------------------------------- 1 | # Operadores en JavaScript 2 | 3 | Los operadores en JavaScript son símbolos que nos permiten realizar operaciones con uno o más valores. A continuación, se presentan algunos ejemplos de operadores en JavaScript. 4 | 5 | ## Operadores aritméticos 6 | 7 | Los operadores aritméticos en JavaScript nos permiten realizar operaciones matemáticas básicas como suma, resta, multiplicación y división. 8 | 9 | ```javascript 10 | var x = 10; 11 | var y = 5; 12 | 13 | var suma = x + y; // Suma 14 | var resta = x - y; // Resta 15 | var multiplicacion = x * y; // Multiplicación 16 | var division = x / y; // División 17 | 18 | console.log(suma); // salida: 15 19 | console.log(resta); // salida: 5 20 | console.log(multiplicacion); // salida: 50 21 | console.log(division); // salida: 2 22 | ``` 23 | 24 | ## Operadores de asignación 25 | 26 | Los operadores de asignación en JavaScript nos permiten asignar un valor a una variable. 27 | 28 | ```javascript 29 | var x = 10; 30 | 31 | x += 5; // Equivalente a x = x + 5 32 | console.log(x); // salida: 15 33 | 34 | x -= 3; // Equivalente a x = x - 3 35 | console.log(x); // salida: 12 36 | 37 | x *= 2; // Equivalente a x = x * 2 38 | console.log(x); // salida: 24 39 | 40 | x /= 4; // Equivalente a x = x / 4 41 | console.log(x); // salida: 6 42 | ``` 43 | 44 | ## Operadores de comparación 45 | 46 | Los operadores de comparación en JavaScript nos permiten comparar dos valores y devolver un valor booleano (`true` o `false`) que indica si la comparación es verdadera o falsa. 47 | 48 | | Operador | Descripción | 49 | | -------- | ------------------------------------------------------------------------------------------ | 50 | | `==` | Compara si dos valores son iguales, realizando una conversión de tipos si es necesario. | 51 | | `===` | Compara si dos valores son iguales en tipo y valor, sin realizar una conversión de tipos. | 52 | | `!=` | Compara si dos valores son diferentes, realizando una conversión de tipos si es necesario. | 53 | | `>` | Compara si el primer valor es mayor que el segundo valor. | 54 | | `<` | Compara si el primer valor es menor que el segundo valor. | 55 | | `>=` | Compara si el primer valor es mayor o igual que el segundo valor. | 56 | | `<=` | Compara si el primer valor es menor o igual que el segundo valor. | 57 | 58 | ```javascript 59 | var x = 10; 60 | var y = 5; 61 | 62 | console.log(x > y); // salida: true 63 | console.log(x < y); // salida: false 64 | console.log(x >= y); // salida: true 65 | console.log(x <= y); // salida: false 66 | console.log(x == y); // salida: false 67 | console.log(x != y); // salida: true 68 | console.log(5 === "5"); // salida: false 69 | ``` 70 | 71 | ## Operador de igualdad estricta 72 | 73 | En JavaScript, el operador de igualdad estricta (`===`) se utiliza para comparar si dos valores son iguales en tipo y valor. A diferencia del operador de igualdad (`==`), el operador de igualdad estricta no realiza una conversión de tipos antes de la comparación. 74 | 75 | ```javascript 76 | console.log(5 === 5); // salida: true 77 | console.log(5 === "5"); // salida: false 78 | console.log(true === 1); // salida: false 79 | console.log(null === undefined); // salida: false 80 | console.log("hello" === "hello"); // salida: true 81 | console.log({} === {}); // salida: false 82 | ``` 83 | 84 | En el primer ejemplo, se comparan dos números iguales y de igual tipo, por lo que el resultado es `true`. En el segundo ejemplo, se comparan un número y una cadena de texto, que son de tipos diferentes, por lo que el resultado es `false`. En el tercer ejemplo, se comparan un booleano y un número, que son de tipos diferentes, por lo que el resultado es `false`. En el cuarto ejemplo, se comparan dos valores nulos, que son de igual tipo y valor, por lo que el resultado es `true`. En el quinto ejemplo, se comparan dos cadenas de texto iguales y de igual tipo, por lo que el resultado es `true`. En el último ejemplo, se comparan dos objetos distintos, por lo que el resultado es `false`. 85 | 86 | Es importante tener en cuenta que el operador de igualdad estricta evalúa también el tipo de dato de los valores a comparar. Esto puede ser útil en ciertos casos para evitar errores de comparación por conversiones de tipos inesperadas. 87 | 88 | ## Operadores lógicos 89 | 90 | Los operadores lógicos en JavaScript nos permiten combinar expresiones booleanas y devolver un valor booleano (`true` o `false`) que indica si la combinación es verdadera o falsa. 91 | 92 | ```javascript 93 | var x = 10; 94 | var y = 5; 95 | 96 | console.log(x > 5 && y < 10); // salida: true 97 | console.log(x > 5 || y > 10); // salida: true 98 | console.log(!(x > y)); // salida: false 99 | ``` 100 | 101 | ## Operador ternario 102 | 103 | El operador ternario en JavaScript nos permite realizar una evaluación condicional y asignar un valor a una variable según el resultado de la evaluación. 104 | 105 | ```javascript 106 | var edad = 20; 107 | var esMayorDeEdad = edad >= 18 ? "Sí" : "No"; 108 | 109 | console.log(esMayorDeEdad); // salida: "Sí" 110 | ``` 111 | 112 | En este ejemplo, la variable `esMayorDeEdad` se asigna con el valor "Sí" si la `edad` es mayor o igual a 18, y con el valor "No" en caso contrario. 113 | 114 | ## Buenas prácticas 115 | 116 | - Evita utilizar el operador de igualdad estricta (`===`) para comparar valores nulos o indefinidos. En estos casos, es mejor utilizar el operador de igualdad (`==`). 117 | - Evitar el uso de operadores de igualdad débil (`==`) y desigualdad débil (`!=`) ya que pueden provocar resultados inesperados debido a la coerción automática de tipos de datos. En su lugar, se recomienda utilizar los operadores de igualdad estricta (`===`) y desigualdad estricta (`!==`) que comparan tanto el valor como el tipo de dato. 118 | - Utilizar operadores bit a bit solo cuando sea necesario, ya que pueden hacer que el código sea difícil de entender. En su lugar, usar los operadores lógicos (`&&`, `||`) y los operadores de comparación (`===`, `!==`) cuando sea posible. 119 | - Evitar el uso de operadores de incremento (`++`) y decremento (`--`), ya que pueden hacer que el código sea difícil de entender y llevar a errores sutiles. En su lugar, utilizar operaciones aritméticas simples. 120 | - Ser conscientes de la precedencia y la asociatividad de los operadores. Si no estamos seguros de cómo se evaluará una expresión, utilizar paréntesis para asegurarnos de que se evalúe de la manera que queremos. 121 | - Utilizar operadores lógicos cortocircuitados (`&&` y `||`) en lugar de los operadores ternarios cuando sea posible. Por ejemplo, en lugar de escribir: 122 | 123 | ```javascript 124 | var resultado = (condicion) ? valor1 : valor2; 125 | ``` 126 | 127 | Podemos escribir: 128 | 129 | ```javascript 130 | var resultado = condicion && valor1 || valor2; 131 | ``` 132 | 133 | Esto hace que el código sea más conciso y legible. 134 | -------------------------------------------------------------------------------- /02-fundamentos/05-ejercicios.md: -------------------------------------------------------------------------------- 1 | # Ejercicios fundamentos de programación 2 | 3 | Esta sección contiene ejercicios para practicar los conceptos fundamentales de programación en JavaScript. 4 | 5 | ## Variables, tipos de datos y operadores 6 | 7 | Los ejercicios de esta sección se basan en la declaración de variables, tipos de datos y operadores. 8 | 9 | ### Ejercicio 1 10 | 11 | Crea una variable llamada carName y asígnale el valor “Volvo”. 12 | 13 | ```javascript 14 | var carName = "Volvo"; 15 | ``` 16 | 17 | ### Ejercicio 2 18 | 19 | Crea una variable llamada x y asígnale el valor 50. 20 | 21 | ```javascript 22 | var x = 50; 23 | ``` 24 | 25 | ### Ejercicio 3 26 | 27 | Crea la suma de 5 + 10, utilizando dos variables: a y b 28 | 29 | ```javascript 30 | var a = 5; 31 | var b = 10; 32 | 33 | var suma = a + b; 34 | ``` 35 | 36 | ### Ejercicio 4 37 | 38 | Crea una variable llamada z, asígnale x + y y muestra el resultado en un cuadro de alerta. 39 | 40 | ```javascript 41 | var y = 20; 42 | var z = x + y; 43 | 44 | alert(z); 45 | ``` 46 | -------------------------------------------------------------------------------- /03-estructuras-de-control/01-condicionales.md: -------------------------------------------------------------------------------- 1 | # Condicionales en JavaScript 2 | 3 | Los condicionales en JavaScript nos permiten controlar el flujo de ejecución de nuestro código según ciertas condiciones. Los condicionales más comunes en JavaScript son `if`, `else if` y `else`. 4 | 5 | ## `if` 6 | 7 | La sentencia `if` se utiliza para ejecutar un bloque de código si se cumple una condición determinada. 8 | 9 | ```javascript 10 | var edad = 18; 11 | 12 | if (edad >= 18) { 13 | console.log("Eres mayor de edad"); 14 | } 15 | ``` 16 | 17 | ## `else` 18 | 19 | La sentencia `else` se utiliza para ejecutar un bloque de código si no se cumple la condición del `if`. 20 | 21 | ```javascript 22 | var dia = "domingo"; 23 | 24 | if (dia === "sábado" || dia === "domingo") { 25 | console.log("¡Es fin de semana!"); 26 | } else { 27 | console.log("¡A trabajar!"); 28 | } 29 | ``` 30 | 31 | En este ejemplo, la sentencia `if` evalúa si la variable `dia` es igual a "sábado" o "domingo". Si se cumple la condición, se muestra el mensaje "¡Es fin de semana!". Si no se cumple la condición del `if`, se ejecuta el bloque de código dentro del `else` y se muestra el mensaje "¡A trabajar!". 32 | 33 | ## `else if` 34 | 35 | La sentencia `else if` se utiliza para evaluar múltiples condiciones. Si la primera condición no se cumple, se evalúa la siguiente condición. Si ninguna de las condiciones se cumple, se ejecuta el bloque de código dentro del `else`. 36 | 37 | ```javascript 38 | var hora = 14; 39 | 40 | if (hora < 12) { 41 | console.log("Buenos días"); 42 | } else if (hora < 20) { 43 | console.log("Buenas tardes"); 44 | } else { 45 | console.log("Buenas noches"); 46 | } 47 | ``` 48 | 49 | En este ejemplo, la sentencia `if` evalúa si la variable `hora` es menor que 12. Si se cumple la condición, se muestra el mensaje "Buenos días". Si no se cumple la condición del `if`, la sentencia `else if` evalúa si la variable `hora` es menor que 20. Si se cumple esta condición, se muestra el mensaje "Buenas tardes". Si no se cumple ninguna de las dos condiciones anteriores, se ejecuta el bloque de código dentro del else y se muestra el mensaje "Buenas noches". 50 | 51 | ## Operador ternario 52 | 53 | El operador ternario es una forma abreviada de escribir una sentencia `if` en una sola línea. 54 | 55 | ```javascript 56 | var edad = 20; 57 | var esMayorDeEdad = edad >= 18 ? "Sí" : "No"; 58 | 59 | console.log(esMayorDeEdad); // salida: "Sí" 60 | ``` 61 | 62 | En este ejemplo, se evalúa si la variable `edad` es mayor o igual a 18. Si se cumple la condición, la variable `esMayorDeEdad` se asigna con el valor "Sí". Si no se cumple la condición, se asigna con el valor "No". El resultado se muestra en la consola con la función `console.log()`. 63 | 64 | ## switch 65 | 66 | La sentencia `switch` en JavaScript nos permite ejecutar diferentes bloques de código según el valor de una variable o expresión. La estructura básica de una sentencia `switch` es la siguiente: 67 | 68 | ```javascript 69 | switch (expresión) { 70 | case valor1: 71 | // bloque de código para el valor1 72 | break; 73 | case valor2: 74 | // bloque de código para el valor2 75 | break; 76 | ... 77 | default: 78 | // bloque de código por defecto 79 | } 80 | ``` 81 | 82 | En este ejemplo, la sentencia `switch` evalúa la expresión y ejecuta el bloque de código correspondiente al caso que coincida con el valor de la expresión. Si no se cumple ningún caso, se ejecuta el bloque de código por defecto. 83 | 84 | ```javascript 85 | var dia = 5; 86 | var mensaje; 87 | 88 | switch (dia) { 89 | case 1: 90 | mensaje = "Lunes"; 91 | break; 92 | case 2: 93 | mensaje = "Martes"; 94 | break; 95 | case 3: 96 | mensaje = "Miércoles"; 97 | break; 98 | case 4: 99 | mensaje = "Jueves"; 100 | break; 101 | case 5: 102 | mensaje = "Viernes"; 103 | break; 104 | case 6: 105 | mensaje = "Sábado"; 106 | break; 107 | case 7: 108 | mensaje = "Domingo"; 109 | break; 110 | default: 111 | mensaje = "Día inválido"; 112 | } 113 | 114 | console.log(mensaje); // salida: "Viernes" 115 | ``` 116 | 117 | En este ejemplo, se evalúa la variable `dia` y se ejecuta el bloque de código correspondiente al caso que coincide con el valor de `dia`. Como `dia` tiene un valor de 5, se ejecuta el bloque de código correspondiente al caso `case 5`, que asigna el mensaje "Viernes" a la variable `mensaje`. El resultado se muestra en la consola con la función `console.log()`. 118 | 119 | ## Buenas prácticas 120 | 121 | - Evita anidar condicionales. Si tienes que anidar más de dos condicionales, es mejor utilizar una estructura de control diferente. 122 | - Evita utilizar la sentencia `switch` cuando se pueda utilizar una sentencia `if` o `else if`. 123 | - Siempre utiliza llaves para los bloques de código, incluso si solo hay una sentencia. 124 | - Ser explícito con la comparación de valores y tipos de datos. En lugar de utilizar el operador de igualdad débil (`==`) que puede provocar la conversión implícita de tipos de datos, se recomienda utilizar el operador de igualdad estricta (`===`) que compara tanto el valor como el tipo de dato. 125 | - Evitar las condiciones anidadas o en cascada. Si es posible, se recomienda utilizar operadores lógicos (`&&`, `||`) para simplificar y mejorar la legibilidad del código. 126 | - Evitar la negación doble (`!!`) para convertir un valor en un valor booleano. En su lugar, utilizar los operadores `Boolean()` o `!!` para convertir un valor en un valor booleano. 127 | - Ser cuidadoso al utilizar la negación (`!`). Asegurarse de que el resultado de la negación sea lo que se espera. En algunos casos, puede ser más claro y legible utilizar una comparación explícita en lugar de la negación. 128 | - Utilizar variables descriptivas y legibles para los valores de las condiciones y los resultados de las operaciones. Esto hace que el código sea más fácil de entender y depurar. 129 | - Asegurarse de que todas las posibles condiciones sean evaluadas. Incluir una condición else para manejar los casos en los que ninguna de las condiciones anteriores es verdadera. 130 | - Asegurarse de que las condiciones sean lo más específicas posible. Si hay varias condiciones que pueden ser verdaderas, se recomienda evaluar la condición más específica primero. 131 | 132 | Siguiendo estas buenas prácticas en las condicionales en JavaScript, podemos escribir código más legible, fácil de entender y menos propenso a errores sutiles. 133 | -------------------------------------------------------------------------------- /03-estructuras-de-control/02-bucles.md: -------------------------------------------------------------------------------- 1 | # Bucles en JavaScript 2 | 3 | Los bucles en JavaScript nos permiten ejecutar un bloque de código repetidamente mientras se cumpla una condición determinada. Los bucles más comunes en JavaScript son `for`, `for-in`, `while` y `do-while`. 4 | 5 | ## `for` 6 | 7 | La sentencia `for` se utiliza para repetir un bloque de código un número determinado de veces. 8 | 9 | ```javascript 10 | for (var i = 0; i < 5; i++) { 11 | console.log("El valor de i es: " + i); 12 | } 13 | ``` 14 | 15 | En este ejemplo, la variable `i` se utiliza para llevar un registro del número de veces que se ha ejecutado el bloque de código dentro del `for`. La sentencia `for` inicializa `i` con un valor de 0. Mientras que `i` sea menor que 5, se ejecutará el bloque de código, mostrando en la consola el valor actual de `i` con el mensaje "El valor de i es: " y aumentando el valor de `i` en cada iteración. 16 | 17 | ## `for-in` 18 | 19 | La sentencia `for-in` se utiliza para recorrer las propiedades de un objeto. 20 | 21 | ```javascript 22 | var persona = { 23 | nombre: "Ana", 24 | edad: 28, 25 | pais: "España" 26 | }; 27 | 28 | for (var propiedad in persona) { 29 | console.log("La propiedad " + propiedad + " tiene el valor " + persona[propiedad]); 30 | } 31 | ``` 32 | 33 | En este ejemplo, la variable `propiedad` se utiliza para llevar un registro del nombre de la propiedad que se está recorriendo en cada iteración. La sentencia `for-in` recorre las propiedades del objeto `persona` y, en cada iteración, muestra en la consola el nombre de la propiedad junto con su valor correspondiente, utilizando la sintaxis `persona[propiedad]`. 34 | 35 | ## `while` 36 | 37 | La sentencia `while` se utiliza para repetir un bloque de código mientras se cumpla una condición determinada. 38 | 39 | ```javascript 40 | var contador = 0; 41 | 42 | while (contador < 5) { 43 | console.log("El contador es: " + contador); 44 | contador++; 45 | } 46 | ``` 47 | 48 | En este ejemplo, la variable `contador` se utiliza para llevar un registro del número de veces que se ha ejecutado el bloque de código dentro del `while`. Mientras que el valor de `contador` sea menor que 5, el bloque de código se seguirá ejecutando, mostrando en la consola el valor actual de `contador` con el mensaje "El contador es: " y aumentando el valor de `contador` en cada iteración. 49 | 50 | ## `do-while` 51 | 52 | La sentencia `do-while` se utiliza para repetir un bloque de código al menos una vez y luego mientras se cumpla una condición determinada. 53 | 54 | ```javascript 55 | var numero = 0; 56 | 57 | do { 58 | console.log("El número es: " + numero); 59 | numero++; 60 | } while (numero < 5); 61 | ``` 62 | 63 | En este ejemplo, la variable `numero` se utiliza para llevar un registro del número de veces que se ha ejecutado el bloque de código dentro del `do`. El bloque de código se ejecutará al menos una vez, mostrando en la consola el valor actual de `numero` con el mensaje "El número es: " y aumentando el valor de `numero` en cada iteración. La sentencia `while` evalúa si el valor de `numero` es menor que 5 y, mientras que esto sea cierto, se seguirá repitiendo el bloque de código dentro del `do`. 64 | 65 | ## Buenas prácticas 66 | 67 | - Utilizar el bucle más apropiado para la tarea. Los bucles `for` son útiles para iterar sobre un rango de números, mientras que los bucles `while` son útiles para iterar mientras se cumpla una condición. 68 | - Ser consciente del número de iteraciones que se realizarán. En algunos casos, puede ser más eficiente utilizar un bucle `for` en lugar de un bucle `while`, ya que se conoce de antemano el número de iteraciones. 69 | - Evitar bucles infinitos. Asegurarse de que la condición de finalización del bucle sea alcanzable. Si no se cumple la condición de finalización, el bucle se ejecutará indefinidamente y puede causar problemas de rendimiento o errores en la aplicación. 70 | - Utilizar nombres descriptivos y legibles para las variables de los bucles. Esto hace que el código sea más fácil de entender y depurar. 71 | - No modificar la variable de control dentro del bucle. Si es necesario modificar la variable de control, asegurarse de que la condición de finalización del bucle siga siendo alcanzable. 72 | - Evitar las operaciones costosas dentro del bucle. Si es posible, realizar las operaciones costosas fuera del bucle o en una iteración separada. 73 | 74 | Siguiendo estas buenas prácticas en los bucles en JavaScript, podemos escribir código más legible, eficiente y menos propenso a errores sutiles. 75 | -------------------------------------------------------------------------------- /03-estructuras-de-control/03-ejercicios.md: -------------------------------------------------------------------------------- 1 | # Ejercicios estructuras de control 2 | 3 | Esta sección contiene ejercicios para practicar los conceptos de estructuras de control en JavaScript. 4 | 5 | ## Condicionales 6 | 7 | Los ejercicios de esta sección se basan en la declaración de condicionales. 8 | 9 | ### Ejercicio 1 10 | 11 | Crea una variable llamada `edad` y asígnale el valor `18`. Crea una condicional que muestre un mensaje de alerta si la edad es mayor o igual a 18. 12 | 13 | ```javascript 14 | var edad = 18; 15 | 16 | if (edad >= 18) { 17 | alert("Eres mayor de edad"); 18 | } 19 | ``` 20 | 21 | ### Ejercicio 2 22 | 23 | Crea una variable llamada `edad` y asígnale el valor `18`. Crea una condicional que muestre un mensaje de alerta si la edad es mayor o igual a 18, y otro mensaje de alerta si la edad es menor a 18. 24 | 25 | ```javascript 26 | var edad = 18; 27 | 28 | if (edad >= 18) { 29 | alert("Eres mayor de edad"); 30 | } else { 31 | alert("Eres menor de edad"); 32 | } 33 | ``` 34 | 35 | ### Ejercicio 3 36 | 37 | Crea una variable llamada `edad` y asígnale el valor `18`. Crea una condicional que muestre un mensaje de alerta si la edad es mayor o igual a 18, otro mensaje de alerta si la edad es menor a 18, y otro mensaje de alerta si la edad es igual a 18. 38 | 39 | ```javascript 40 | var edad = 18; 41 | 42 | if (edad >= 18) { 43 | alert("Eres mayor de edad"); 44 | } else if (edad < 18) { 45 | alert("Eres menor de edad"); 46 | } else { 47 | alert("Tienes 18 años"); 48 | } 49 | ``` 50 | 51 | 52 | ### Ejercicio 4 53 | 54 | Crea una variable llamada `edad` y asígnale el valor `18`. Crea una condicional que muestre un mensaje de alerta si la edad es mayor o igual a 18, otro mensaje de alerta si la edad es menor a 18, y otro mensaje de alerta si la edad es igual a 18. Utiliza el operador ternario. 55 | 56 | ```javascript 57 | var edad = 18; 58 | 59 | var mensaje = edad >= 18 ? "Eres mayor de edad" : "Eres menor de edad"; 60 | 61 | alert(mensaje); 62 | ``` 63 | 64 | ### Ejercicio 5 65 | 66 | Crea una variable llamada `edad` y asígnale el valor `18`. Crea una condicional que muestre un mensaje de alerta si la edad es mayor o igual a 18, otro mensaje de alerta si la edad es menor a 18, y otro mensaje de alerta si la edad es igual a 18. Utiliza el operador ternario y el operador lógico `&&`. 67 | 68 | ```javascript 69 | var edad = 18; 70 | 71 | var mensaje = edad >= 18 ? "Eres mayor de edad" : edad < 18 && edad > 0 ? "Eres menor de edad" : "No has nacido"; 72 | 73 | alert(mensaje); 74 | ``` 75 | 76 | ### Ejercicio 6 77 | 78 | Crea una variable llamada `edad` y asígnale el valor `18`. Crea una condicional que muestre un mensaje de alerta si la edad es mayor o igual a 18, otro mensaje de alerta si la edad es menor a 18, y otro mensaje de alerta si la edad es igual a 18. Utiliza el operador ternario y el operador lógico `||`. 79 | 80 | ```javascript 81 | var edad = 18; 82 | 83 | var mensaje = edad >= 18 ? "Eres mayor de edad" : edad < 18 || edad > 0 ? "Eres menor de edad" : "No has nacido"; 84 | 85 | alert(mensaje); 86 | ``` 87 | 88 | ### Ejercicio 7 89 | 90 | Escribe un programa que solicite al usuario que ingrese un número y determine si es par o impar. Si el número es par, el programa debe imprimir "El número ingresado es par". De lo contrario, el programa debe imprimir "El número ingresado es impar". 91 | 92 | ```javascript 93 | const numero = parseInt(prompt("Ingrese un número")); 94 | 95 | if (numero % 2 === 0) { 96 | console.log("El número ingresado es par"); 97 | } else { 98 | console.log("El número ingresado es impar"); 99 | } 100 | ``` 101 | 102 | ### Ejercicio 8 103 | 104 | Escribe un programa que solicite al usuario que ingrese un número del 1 al 7 y determine a qué día de la semana corresponde. Si el número es 1, el programa debe imprimir "Lunes", si es 2, debe imprimir "Martes", y así sucesivamente hasta llegar a 7, que corresponde a "Domingo". Si el usuario ingresa un número fuera del rango válido, el programa debe imprimir "Número inválido". 105 | 106 | ```javascript 107 | const numero = parseInt(prompt("Ingrese un número del 1 al 7")); 108 | 109 | switch (numero) { 110 | case 1: 111 | console.log("Lunes"); 112 | break; 113 | case 2: 114 | console.log("Martes"); 115 | break; 116 | case 3: 117 | console.log("Miércoles"); 118 | break; 119 | case 4: 120 | console.log("Jueves"); 121 | break; 122 | case 5: 123 | console.log("Viernes"); 124 | break; 125 | case 6: 126 | console.log("Sábado"); 127 | break; 128 | case 7: 129 | console.log("Domingo"); 130 | break; 131 | default: 132 | console.log("Número inválido"); 133 | break; 134 | } 135 | ``` 136 | 137 | ### Ejercicio 9 138 | 139 | Escribe un programa que imprima la tabla de multiplicar del número 5, del 1 al 10. El programa debe utilizar un bucle `for` para realizar la multiplicación y luego imprimir el resultado en cada iteración. 140 | 141 | ```javascript 142 | const numero = 5; 143 | 144 | for (let i = 1; i <= 10; i++) { 145 | const resultado = numero * i; 146 | console.log(`${numero} x ${i} = ${resultado}`); 147 | } 148 | ``` 149 | 150 | ### Ejercicio 10 151 | 152 | Escribe un programa que solicite al usuario que adivine un número secreto entre 1 y 10. El programa debe generar un número aleatorio y luego solicitar al usuario que ingrese un número hasta que adivine el número secreto. El programa debe imprimir "¡Adivinaste!" y salir del bucle `while` cuando el usuario adivine el número. 153 | 154 | ```javascript 155 | const numeroSecreto = Math.floor(Math.random() * 10) + 1; 156 | let numeroAdivinado = parseInt(prompt("Adivina el número secreto entre 1 y 10")); 157 | 158 | while (numeroAdivinado !== numeroSecreto) { 159 | numeroAdivinado = parseInt(prompt("Intenta de nuevo. Adivina el número secreto entre 1 y 10")); 160 | } 161 | 162 | console.log("¡Adivinaste!"); 163 | ``` 164 | -------------------------------------------------------------------------------- /04-funciones/01-funciones.md: -------------------------------------------------------------------------------- 1 | # Funciones en JavaScript 2 | 3 | Las funciones son bloques de código reutilizable que se pueden llamar en cualquier momento durante la ejecución del programa. En JavaScript, puedes definir funciones de varias maneras, pero la más común es utilizando la palabra clave `function`. 4 | 5 | ```javascript 6 | // Función que imprime un mensaje en la consola 7 | function saludar() { 8 | console.log("Hola, bienvenido!"); 9 | } 10 | 11 | // Llamada a la función 12 | saludar(); // Hola, bienvenido! 13 | ``` 14 | 15 | En este ejemplo, hemos definido una función llamada `saludar` que no recibe parámetros. Cuando se llama a la función, se muestra en la consola "Hola, bienvenido!". 16 | 17 | ```javascript 18 | // Definición de una función con un solo parámetro 19 | function saludar(nombre) { 20 | console.log("Hola, " + nombre + "!"); 21 | } 22 | 23 | // Llamada a la función 24 | saludar("Juan"); // Hola, Juan! 25 | ``` 26 | 27 | En este ejemplo, hemos definido una función llamada `saludar` que acepta un parámetro `nombre`. Cuando se llama a la función, el valor del parámetro se concatena con el mensaje "Hola, " y se muestra en la consola. 28 | 29 | ## Parámetros y argumentos 30 | 31 | Una función puede recibir cero o más parámetros. Los parámetros son variables que se utilizan dentro de la función para realizar algún tipo de operación. 32 | 33 | ```javascript 34 | // Definición de una función con dos parámetros 35 | function saludar(nombre, apellido) { 36 | console.log("Hola, " + nombre + " " + apellido + "!"); 37 | } 38 | 39 | // Llamada a la función 40 | saludar("Juan", "Pérez"); // Hola, Juan Pérez! 41 | ``` 42 | 43 | La función `saludar` definida en el ejemplo es una función que acepta dos parámetros: `nombre` y `apellido`. Cuando se llama a la función con los valores "Juan" y "Pérez", se concatena el valor de `nombre` con el valor de `apellido` y se muestra el mensaje "Hola, Juan Pérez!" en la consola. 44 | 45 | ```javascript 46 | // Definición de una función con dos parámetros 47 | function sumar(a, b) { 48 | var resultado = a + b; 49 | console.log("El resultado de la suma es: " + resultado); 50 | } 51 | 52 | // Llamada a la función 53 | sumar(5, 7); // El resultado de la suma es: 12 54 | ``` 55 | 56 | En este ejemplo, hemos definido una función llamada `sumar` que acepta dos parámetros `a` y `b`. Cuando se llama a la función, los valores de `a` y `b` se suman y se muestra el resultado en la consola. 57 | 58 | ## Retorno de valores 59 | 60 | Una función puede devolver un valor utilizando la palabra clave `return`. Cuando una función devuelve un valor, se puede asignar a una variable o utilizar como parte de una expresión. 61 | 62 | ```javascript 63 | // Definición de una función que devuelve un valor 64 | function sumar(a, b) { 65 | return a + b; 66 | } 67 | 68 | // Llamada a la función 69 | var resultado = sumar(5, 7); 70 | console.log("El resultado de la suma es: " + resultado); // El resultado de la suma es: 12 71 | ``` 72 | 73 | En este ejemplo, hemos definido una función llamada `sumar` que acepta dos parámetros `a` y `b`. Cuando se llama a la función, los valores de `a` y `b` se suman y se devuelve el resultado. 74 | 75 | ```javascript 76 | // Definición de una función que devuelve un valor 77 | function sumar(a, b) { 78 | return a + b; 79 | } 80 | 81 | // Llamada a la función 82 | console.log("El resultado de la suma es: " + sumar(5, 7)); // El resultado de la suma es: 12 83 | ``` 84 | 85 | En este ejemplo, hemos definido una función llamada `sumar` que acepta dos parámetros `a` y `b`. Cuando se llama a la función, los valores de `a` y `b` se suman y se devuelve el resultado. En este caso, el resultado se muestra en la consola utilizando la función `console.log`. 86 | 87 | ```javascript 88 | // Definición de una función que devuelve un valor 89 | function multiplicar(a, b) { 90 | return a * b; 91 | } 92 | 93 | // Llamada a la función y asignación del valor de retorno a una variable 94 | var resultado = multiplicar(3, 4); 95 | console.log("El resultado de la multiplicación es: " + resultado); // El resultado de la multiplicación es: 12 96 | ``` 97 | 98 | En este ejemplo, hemos definido una función llamada `multiplicar` que acepta dos parámetros `a` y `b`. Cuando se llama a la función, los valores de `a` y `b` se multiplican y se devuelve el resultado. Luego, el valor de retorno se asigna a una variable llamada `resultado` y se muestra en la consola. 99 | 100 | ## Funciones anónimas 101 | 102 | Una función anónima es una función que no tiene un nombre. En JavaScript, las funciones anónimas se utilizan principalmente como argumentos de otras funciones. 103 | 104 | ```javascript 105 | // Definición de una función anónima como parámetro de otra función 106 | setTimeout(function() { 107 | console.log("Han pasado 5 segundos"); 108 | }, 5000); 109 | ``` 110 | 111 | En este ejemplo, hemos utilizado la función `setTimeout` para ejecutar una función anónima después de 5 segundos. La función anónima no tiene nombre, pero se define dentro de la llamada a `setTimeout` y muestra un mensaje en la consola después de que han pasado los 5 segundos. 112 | 113 | Espero que esta guía te haya sido útil para entender cómo trabajar con funciones en JavaScript. ¡A programar! 114 | -------------------------------------------------------------------------------- /04-funciones/02-ejercicios.md: -------------------------------------------------------------------------------- 1 | # Ejercicios funciones 2 | 3 | Esta sección contiene ejercicios para practicar los conceptos de funciones en JavaScript. 4 | 5 | ## Funciones 6 | 7 | Los ejercicios de esta sección se basan en la declaración de funciones. 8 | 9 | ### Ejercicio 1 10 | 11 | Crear una función de JS que imprima los primeros “n” números pares 12 | pares(6) //2, 4, 6, 8, 10, 12 13 | pares(3) //2, 4, 6 14 | pares(10) //2, 4, 6, 8, 10, 12, 14, 16, 18, 20 15 | 16 | ```javascript 17 | // Funciòn que imprime los primeros n números pares 18 | function pares(n) { 19 | var contador = 0; // Inicializamos una variable contador en 0 para contar el número de pares impresos 20 | var numero = 2; // Inicializamos una variable numero en 2 para empezar a imprimir los números pares 21 | 22 | while (contador < n) { 23 | // Creamos un bucle while que se ejecutará mientras el contador sea menor que n 24 | console.log(numero); // Imprimimos el número par en la consola 25 | numero += 2; // Incrementamos el valor de numero en 2 para imprimir el siguiente número par en la siguiente iteración 26 | contador++; // Incrementamos el contador en 1 para llevar la cuenta de los números pares que hemos impreso 27 | } 28 | } 29 | 30 | // Ejemplo de uso 31 | pares(6); //2, 4, 6, 8, 10, 12 32 | pares(3); //2, 4, 6 33 | pares(10); //2, 4, 6, 8, 10, 12, 14, 16, 18, 20 34 | ``` 35 | 36 | ### Ejercicio 2 37 | 38 | Crear un método que reciba nombre y apellido y en un alert regrese la concatenación del nombre completo. 39 | nombreCompleto(“Pedro”, “Gonzalez”) 40 | 41 | ```javascript 42 | // Función que recibe nombre y apellido y muestra un alert con el nombre completo 43 | function nombreCompleto(nombre, apellido) { 44 | alert(nombre + " " + apellido); // Mostramos un alert con el nombre y el apellido concatenados 45 | } 46 | 47 | // Ejemplo de uso 48 | nombreCompleto("Pedro", "Gonzalez"); 49 | ``` 50 | 51 | ### Ejercicio 3 52 | 53 | Crear un método que reciba tu nombre y tu edad y determine si eres mayor de edad para solicitar un permiso de conducir. 54 | permiso(“Roberto”, 15) // “Roberto, no puedes solicitar el permiso” 55 | permiso(“Mario”, 36) // “Mario, puedes solicitar el permiso” 56 | 57 | ```javascript 58 | // Función que recibe nombre y edad y muestra un alert diciendo si el usuario puede solicitar el permiso de conducir 59 | function permiso(nombre, edad) { 60 | if (edad >= 18) { 61 | // Si la edad es mayor o igual a 18 62 | alert(nombre + ", puedes solicitar el permiso"); // Mostramos un alert diciendo que el usuario puede solicitar el permiso 63 | } else { 64 | // Si la edad es menor a 18 65 | alert(nombre + ", no puedes solicitar el permiso"); // Mostramos un alert diciendo que el usuario no puede solicitar el permiso 66 | } 67 | } 68 | 69 | // Ejemplo de uso 70 | permiso("Roberto", 15); // “Roberto, no puedes solicitar el permiso” 71 | permiso("Mario", 36); // “Mario, puedes solicitar el permiso” 72 | ``` 73 | 74 | ### Ejercicio 4 75 | 76 | Crear un método que reciba 5 calificaciones y retorne el promedio. Y si es mayor ó igual a 70 imprima que aprobó si es menor, que no aprobó. 77 | promedio(70, 80, 80, 90, 60) // Aprobado: 76. 78 | promedio(70, 50, 75, 70, 60) // No Aprobado: 65. 79 | 80 | ```javascript 81 | // Función que recibe 5 calificaciones y muestra un alert con el promedio y si el usuario aprobó o no 82 | function promedio(calificacion1, calificacion2, calificacion3, calificacion4, calificacion5) { 83 | var promedio = (calificacion1 + calificacion2 + calificacion3 + calificacion4 + calificacion5) / 5; // Calculamos el promedio de las 5 calificaciones 84 | if (promedio >= 70) { 85 | // Si el promedio es mayor o igual a 70 86 | alert("Aprobado: " + promedio); // Mostramos un alert diciendo que el usuario aprobó 87 | } else { 88 | // Si el promedio es menor a 70 89 | alert("No aprobado: " + promedio); // Mostramos un alert diciendo que el usuario no aprobó 90 | } 91 | } 92 | 93 | // Ejemplo de uso 94 | promedio(70, 80, 80, 90, 60); // Aprobado: 76. 95 | promedio(70, 50, 75, 70, 60); // No Aprobado: 65. 96 | ``` 97 | -------------------------------------------------------------------------------- /05-arrays/01-arrays.md: -------------------------------------------------------------------------------- 1 | # Arrays 2 | 3 | Un array en JavaScript es una estructura de datos que se utiliza para almacenar una colección de elementos, como números, cadenas de texto u objetos. Los elementos de un array están indexados numéricamente, comenzando desde cero. Es decir, el primer elemento se encuentra en la posición 0, el segundo en la posición 1, y así sucesivamente. 4 | 5 | Para crear un array en JavaScript, se puede utilizar la siguiente sintaxis: 6 | 7 | ```javascript 8 | var miArray = []; // Crea un array vacío 9 | ``` 10 | 11 | O bien: 12 | 13 | ```javascript 14 | var miArray = new Array(); // Crea un array vacío 15 | ``` 16 | 17 | Para crear un array con elementos, se puede utilizar la siguiente sintaxis: 18 | 19 | ```javascript 20 | var miArray = [1, 'Hola', [3], true]; // Crea un array con tres elementos 21 | ``` 22 | 23 | O bien: 24 | 25 | ```javascript 26 | var miArray = new Array(1, 2, 3); // Crea un array con tres elementos 27 | ``` 28 | 29 | Es posible usar las palabras reservadas `var`, `let` o `const` para declarar un array. Por ejemplo: 30 | 31 | ```javascript 32 | var miArray = [1, 2, 3]; // Crea un array con tres elementos 33 | let miArray = [1, 2, 3]; // Crea un array con tres elementos 34 | const miArray = [1, 2, 3]; // Crea un array con tres elementos 35 | ``` 36 | 37 | Para acceder a un elemento de un array, se puede utilizar la siguiente sintaxis: 38 | 39 | ```javascript 40 | var miArray = [1, 2, 3]; // Crea un array con tres elementos 41 | console.log(miArray[0]); // Muestra el primer elemento del array en la consola 42 | ``` 43 | 44 | Para modificar un elemento de un array, se puede utilizar la siguiente sintaxis: 45 | 46 | ```javascript 47 | var miArray = [1, 2, 3]; // Crea un array con tres elementos 48 | miArray[0] = 4; // Modifica el primer elemento del array 49 | console.log(miArray[0]); // Muestra el primer elemento del array en la consola 50 | ``` 51 | 52 | ## Buenas prácticas 53 | 54 | - Utilizar `const` en lugar de `let` para declarar arrays que no serán modificados. De esta manera, se evita que el array sea reasignado accidentalmente y se hace más claro que el array no será modificado. 55 | - Evitar la mutación directa de los elementos del array, especialmente cuando se trata de arrays anidados. En su lugar, utilizar métodos de array que no mutan el array original, como `map()`, `filter()`, `reduce()`, etc. 56 | - Evitar el uso de bucles `for` para recorrer arrays. En su lugar, utilizar métodos de array como `forEach()`, `map()`, `filter()`, `reduce()`, etc. Estos métodos son más legibles y menos propensos a errores. 57 | - Utilizar nombres descriptivos y legibles para los arrays y las variables que contienen arrays. Esto hace que el código sea más fácil de entender y depurar. 58 | - Utilizar el método `Array.isArray()` para verificar si un valor es un array. Esto es más seguro que utilizar la comprobación de tipo `typeof`. 59 | - Ser consciente de las operaciones costosas en términos de rendimiento en los arrays, como la reordenación y la eliminación de elementos. En su lugar, utilizar operaciones que sean más eficientes, como el método `splice()`. 60 | 61 | Siguiendo estas buenas prácticas con los arrays en JavaScript, podemos escribir código más legible, eficiente y menos propenso a errores sutiles. 62 | -------------------------------------------------------------------------------- /05-arrays/02-agregar-y-eliminar-elementos.md: -------------------------------------------------------------------------------- 1 | # Agregar y eliminar datos de un arreglo 2 | 3 | En JavaScript, un arreglo es una estructura de datos que nos permite almacenar una colección de elementos en una sola variable. Una vez que hemos creado un arreglo, podemos agregar nuevos elementos, eliminar elementos existentes y modificar elementos ya existentes en el arreglo. 4 | 5 | ## Agregar elementos a un arreglo 6 | 7 | Hay varias formas de agregar elementos a un arreglo en JavaScript: 8 | 9 | ### Método push() 10 | 11 | El método `push()` nos permite agregar uno o más elementos al final de un arreglo. El método devuelve la nueva longitud del arreglo. 12 | 13 | ```javascript 14 | // Definición de un arreglo 15 | let miArreglo = ['manzana', 'banana', 'cereza']; 16 | miArreglo.push('durazno'); 17 | console.log(miArreglo); // ['manzana', 'banana', 'cereza', 'durazno'] 18 | ``` 19 | 20 | También podemos agregar varios elementos a la vez utilizando el método `push()`: 21 | 22 | ```javascript 23 | let miArreglo = ['manzana', 'banana', 'cereza']; 24 | miArreglo.push('durazno', 'fresa', 'uva'); 25 | console.log(miArreglo); // ['manzana', 'banana', 'cereza', 'durazno', 'fresa', 'uva'] 26 | ``` 27 | 28 | ### Método unshift() 29 | 30 | El método `unshift()` nos permite agregar uno o más elementos al inicio de un arreglo. El método devuelve la nueva longitud del arreglo. 31 | 32 | ```javascript 33 | let miArreglo = ['manzana', 'banana', 'cereza']; 34 | miArreglo.unshift('durazno'); 35 | console.log(miArreglo); // ['durazno', 'manzana', 'banana', 'cereza'] 36 | ``` 37 | 38 | También podemos agregar varios elementos a la vez utilizando el método `unshift()`: 39 | 40 | ```javascript 41 | let miArreglo = ['manzana', 'banana', 'cereza']; 42 | miArreglo.unshift('durazno', 'fresa', 'uva'); 43 | console.log(miArreglo); // ['durazno', 'fresa', 'uva', 'manzana', 'banana', 'cereza'] 44 | ``` 45 | 46 | ### Operador spread (ES6) 47 | 48 | El operador spread `...` nos permite agregar elementos de otro arreglo al final de nuestro arreglo actual: 49 | 50 | ```javascript 51 | let miArreglo = ['manzana', 'banana', 'cereza']; 52 | let otrosFrutos = ['durazno', 'fresa', 'uva']; 53 | miArreglo = [...miArreglo, ...otrosFrutos]; 54 | console.log(miArreglo); // ['manzana', 'banana', 'cereza', 'durazno', 'fresa', 'uva'] 55 | ``` 56 | 57 | ### Agregar con el método splice() 58 | 59 | El método `splice()` nos permite agregar elementos a un array en cualquier posición. Para hacerlo, debemos indicar la posición en la que queremos agregar los elementos, la cantidad de elementos que queremos eliminar (en este caso 0, ya que no queremos eliminar nada) y los elementos que queremos agregar. 60 | 61 | ```javascript 62 | let numeros = [1, 2, 3, 4, 5]; 63 | numeros.splice(2, 0, 6, 7); 64 | console.log(numeros); // [1, 2, 6, 7, 3, 4, 5] 65 | ``` 66 | 67 | En este ejemplo, hemos agregado los números 6 y 7 en la posición 2 del array numeros. Como segundo argumento, pasamos el valor 0 ya que no queremos eliminar ningún elemento. 68 | 69 | ## Eliminar elementos de un arreglo 70 | 71 | Hay varias formas de eliminar elementos de un arreglo en JavaScript: 72 | 73 | ### Método pop() 74 | 75 | El método `pop()` nos permite eliminar el último elemento de un arreglo. El método devuelve el elemento eliminado. 76 | 77 | ```javascript 78 | let miArreglo = ['manzana', 'banana', 'cereza']; 79 | let frutaEliminada = miArreglo.pop(); 80 | console.log(miArreglo); // ['manzana', 'banana'] 81 | console.log(frutaEliminada); // 'cereza' 82 | ``` 83 | 84 | ### Método shift() 85 | 86 | El método `shift()` nos permite eliminar el primer elemento de un arreglo. El método devuelve el elemento eliminado. 87 | 88 | ```javascript 89 | let miArreglo = ['manzana', 'banana', 'cereza']; 90 | let frutaEliminada = miArreglo.shift(); 91 | console.log(miArreglo); // ['banana', 'cereza'] 92 | console.log(frutaEliminada); // 'manzana' 93 | ``` 94 | 95 | ## Eliminar con el método splice() 96 | 97 | El método `splice()` también nos permite eliminar elementos de un array. Para hacerlo, debemos indicar la posición inicial de los elementos a eliminar y la cantidad de elementos a eliminar. 98 | 99 | ```javascript 100 | let numeros = [1, 2, 3, 4, 5]; 101 | numeros.splice(2, 2); 102 | console.log(numeros); // [1, 2, 5] 103 | ``` 104 | 105 | En este ejemplo, hemos eliminado los elementos en las posiciones 2 y 3 del array numeros (el número 3 y 4), ya que hemos indicado que queremos eliminar 2 elementos a partir de la posición 2. 106 | 107 | También podemos guardar los elementos eliminados en una variable: 108 | 109 | ```javascript 110 | let numeros = [1, 2, 3, 4, 5]; 111 | let numerosEliminados = numeros.splice(2, 2); 112 | console.log(numeros); // [1, 2, 5] 113 | console.log(numerosEliminados); // [3, 4] 114 | ``` 115 | 116 | En este caso, hemos eliminado los elementos en las posiciones 2 y 3 del array `numeros` y los hemos guardado en la variable `numerosEliminados`. 117 | 118 | ## Buenas prácticas 119 | 120 | - Utilizar métodos de array que no mutan el array original, como `concat()`, `slice()`, `map()`, `filter()`, `reduce()`, etc. Esto es especialmente importante si se está trabajando con un array que no se debe modificar directamente. 121 | - Utilizar el método `push()` para agregar elementos al final del array. Este método es más eficiente que utilizar la asignación de índice (`array[i] = value`) para agregar elementos al final. 122 | - Utilizar el método `unshift()` para agregar elementos al inicio del array. Este método es más eficiente que utilizar la asignación de índice (`array[i] = value`) para agregar elementos al inicio. 123 | - Utilizar el método `pop()` para eliminar el último elemento del array. Este método es más eficiente que utilizar la asignación de índice (`delete array[i]`) para eliminar el último elemento. 124 | - Utilizar el método `shift()` para eliminar el primer elemento del array. Este método es más eficiente que utilizar la asignación de índice (`delete array[0]`) para eliminar el primer elemento. 125 | - Evitar la eliminación de elementos del medio del array, ya que esto puede provocar la reorganización del resto de los elementos y afectar el rendimiento. En su lugar, utilizar el método `splice()` para eliminar elementos del medio del array. 126 | - Ser cuidadoso al utilizar métodos de array que modifican el array original, como `sort()`, `reverse()`, `splice()`, etc. Asegurarse de que la mutación del array sea necesaria y de que se comprenda completamente su impacto. 127 | 128 | Siguiendo estas buenas prácticas al agregar y eliminar elementos de un array en JavaScript, podemos escribir código más legible, eficiente y menos propenso a errores sutiles. 129 | -------------------------------------------------------------------------------- /05-arrays/03-iterando-arrays.md: -------------------------------------------------------------------------------- 1 | # Iterando arreglos en JavaScript 2 | 3 | Iterando arreglos en JavaScript 4 | En JavaScript, es muy común trabajar con arreglos y recorrerlos para realizar alguna tarea específica, como mostrar su contenido en la pantalla, realizar cálculos, filtrar elementos, etc. 5 | 6 | Para iterar un arreglo en JavaScript, podemos usar varios métodos, como `for`, `for...of`, `forEach`, `map`, `filter`, `reduce`, etc. En este tutorial, veremos algunos ejemplos de cómo utilizar estos métodos. 7 | 8 | ## Iterando un arreglo con `for` 9 | 10 | El método `for` es el más básico y común para iterar un arreglo en JavaScript. La sintaxis es la siguiente: 11 | 12 | ```javascript 13 | for (var i = 0; i < arreglo.length; i++) { 14 | // código a ejecutar en cada iteración 15 | } 16 | ``` 17 | 18 | Aquí, `i` es el índice del arreglo que se va a iterar, `arreglo.length` es la cantidad de elementos del arreglo, y `código a ejecutar en cada iteración` es el bloque de código que se ejecutará en cada vuelta del ciclo. 19 | 20 | Por ejemplo, supongamos que tenemos un arreglo de números y queremos sumarlos todos. Podemos utilizar el método `for` de la siguiente manera: 21 | 22 | ```javascript 23 | var numeros = [1, 2, 3, 4, 5]; 24 | var suma = 0; 25 | 26 | for (var i = 0; i < numeros.length; i++) { 27 | suma += numeros[i]; 28 | } 29 | 30 | console.log("La suma de los números es:", suma); 31 | ``` 32 | 33 | En este ejemplo, el ciclo itera el arreglo numeros y va sumando cada uno de los elementos. La variable suma guarda el resultado final, que se muestra en la consola con console.log(). 34 | 35 | ## Iterando un arreglo con `for...of` 36 | 37 | El método `for...of` es una forma más moderna y sencilla de iterar un arreglo en JavaScript. La sintaxis es la siguiente: 38 | 39 | ```javascript 40 | for (var elemento of arreglo) { 41 | // código a ejecutar en cada iteración 42 | } 43 | ``` 44 | 45 | Aquí, `elemento` es el valor de cada elemento del arreglo, y `código a ejecutar en cada iteración` es el bloque de código que se ejecutará en cada vuelta del ciclo. 46 | 47 | Por ejemplo, supongamos que queremos mostrar en la consola todos los nombres de un arreglo. Podemos utilizar el método `for...of` de la siguiente manera: 48 | 49 | ```javascript 50 | var nombres = ["Juan", "María", "Pedro", "Ana"]; 51 | 52 | for (var nombre of nombres) { 53 | console.log(nombre); 54 | } 55 | ``` 56 | 57 | En este ejemplo, el ciclo itera el arreglo nombres y muestra cada uno de los elementos en la consola con console.log(). 58 | 59 | ## Iterando un arreglo con `forEach` 60 | 61 | El método `forEach` es otro método común para iterar un arreglo en JavaScript. La sintaxis es la siguiente: 62 | 63 | ```javascript 64 | arreglo.forEach(function(elemento, indice) { 65 | // código a ejecutar en cada iteración 66 | }); 67 | ``` 68 | 69 | Aquí, `elemento` es el valor de cada elemento del arreglo, `indice` es el índice de cada elemento, y `código a ejecutar en cada iteración` es el bloque de código que se ejecutará en cada vuelta del ciclo. 70 | 71 | Por ejemplo, supongamos que queremos mostrar en la consola todos los nombres de un arreglo, junto con su índice. Podemos utilizar el método `forEach` de la siguiente manera: 72 | 73 | ```javascript 74 | var nombres = ["Juan", "María", "Pedro", "Ana"]; 75 | 76 | nombres.forEach(function(nombre, indice) { 77 | console.log(indice, nombre); 78 | }); 79 | ``` 80 | 81 | En este ejemplo, el ciclo itera el arreglo nombres y muestra cada uno de los elementos en la consola con console.log(). 82 | 83 | ## Iterando un arreglo con `map` 84 | 85 | El método `map()` es similar al método `forEach()`, pero en lugar de realizar una acción en cada elemento del arreglo, el método `map()` crea un nuevo arreglo con los resultados de aplicar una función a cada elemento del arreglo original. 86 | 87 | La sintaxis del método `map()` es la siguiente: 88 | 89 | ```javascript 90 | var nuevoArreglo = array.map(function(elemento) { 91 | // Función que devuelve un nuevo valor para el elemento 92 | }); 93 | ``` 94 | 95 | Este método llama a la función especificada para cada elemento del arreglo `array`. La función especificada debe tomar un parámetro, que representa el valor actual del elemento del arreglo, y debe devolver un nuevo valor para ese elemento. 96 | 97 | Por ejemplo, si queremos crear un nuevo arreglo `dobleNumeros` que contenga los valores del arreglo `numeros` multiplicados por dos, podemos hacer lo siguiente: 98 | 99 | ```javascript 100 | var numeros = [1, 2, 3, 4, 5]; 101 | 102 | var dobleNumeros = numeros.map(function(numero) { 103 | return numero * 2; 104 | }); 105 | 106 | console.log(dobleNumeros); // [2, 4, 6, 8, 10] 107 | ``` 108 | 109 | En este ejemplo, el método `map()` llama a la función especificada para cada elemento del arreglo `numeros`. La función especificada multiplica el valor del elemento por dos y devuelve el resultado. 110 | 111 | ## Iterando un arreglo con `filter` 112 | 113 | El método `filter()` crea un nuevo arreglo con todos los elementos que cumplan con la condición implementada por la función dada. 114 | 115 | La sintaxis del método `filter()` es la siguiente: 116 | 117 | ```javascript 118 | var nuevoArreglo = array.filter(function(elemento) { 119 | // Función que devuelve true o false 120 | }); 121 | ``` 122 | 123 | Este método llama a la función especificada para cada elemento del arreglo `array`. La función especificada debe tomar un parámetro, que representa el valor actual del elemento del arreglo, y debe devolver un valor booleano que indica si el elemento debe incluirse en el nuevo arreglo. 124 | 125 | Por ejemplo, si queremos crear un nuevo arreglo `pares` que contenga solo los números pares del arreglo `numeros`, podemos hacer lo siguiente: 126 | 127 | ```javascript 128 | var numeros = [1, 2, 3, 4, 5]; 129 | 130 | var pares = numeros.filter(function(numero) { 131 | return numero % 2 === 0; 132 | }); 133 | 134 | console.log(pares); // [2, 4] 135 | ``` 136 | 137 | En este ejemplo, el método `filter()` llama a la función especificada para cada elemento del arreglo `numeros`. La función especificada verifica si el valor del elemento es par, y devuelve true o false según corresponda. 138 | 139 | ## Iterando un arreglo con `find` 140 | 141 | El método `find()` devuelve el primer elemento del arreglo que cumpla con la condición implementada por la función dada. 142 | 143 | La sintaxis del método `find()` es la siguiente: 144 | 145 | ```javascript 146 | var elemento = array.find(function(elemento) { 147 | // Función que devuelve true o false 148 | }); 149 | ``` 150 | 151 | Este método llama a la función especificada para cada elemento del arreglo `array`. La función especificada debe tomar un parámetro, que representa el valor actual del elemento del arreglo, y debe devolver un valor booleano que indica si el elemento cumple con la condición. 152 | 153 | Por ejemplo, si queremos encontrar el primer número par del arreglo `numeros`, podemos hacer lo siguiente: 154 | 155 | ```javascript 156 | var numeros = [1, 2, 3, 4, 5]; 157 | 158 | var primerPar = numeros.find(function(numero) { 159 | return numero % 2 === 0; 160 | }); 161 | 162 | console.log(primerPar); // 2 163 | ``` 164 | 165 | En este ejemplo, el método `find()` llama a la función especificada para cada elemento del arreglo `numeros`. La función especificada verifica si el valor del elemento es par, y devuelve true o false según corresponda. 166 | 167 | ## Iterando un arreglo con `reduce` 168 | 169 | El método `reduce()` aplica una función a un acumulador y a cada valor de un arreglo (de izquierda a derecha) para reducirlo a un único valor. 170 | 171 | La sintaxis del método `reduce()` es la siguiente: 172 | 173 | ```javascript 174 | var valorFinal = array.reduce(function(acumulador, elemento) { 175 | // Función que devuelve el nuevo valor del acumulador 176 | }, valorInicial); 177 | ``` 178 | 179 | Este método llama a la función especificada para cada elemento del arreglo `array`. La función especificada debe tomar dos parámetros, que representan el valor actual del acumulador y el valor actual del elemento del arreglo, y debe devolver el nuevo valor del acumulador. 180 | 181 | Por ejemplo, si queremos sumar todos los números del arreglo `numeros`, podemos hacer lo siguiente: 182 | 183 | ```javascript 184 | var numeros = [1, 2, 3, 4, 5]; 185 | 186 | var suma = numeros.reduce(function(acumulador, numero) { 187 | return acumulador + numero; 188 | }, 0); 189 | 190 | console.log(suma); // 15 191 | ``` 192 | 193 | En este ejemplo, el método `reduce()` llama a la función especificada para cada elemento del arreglo `numeros`. La función especificada suma el valor del elemento al valor del acumulador, y devuelve el nuevo valor del acumulador. 194 | 195 | ## Iterando un arreglo con `every` 196 | 197 | El método `every()` comprueba si todos los elementos del arreglo cumplen con la condición implementada por la función dada. 198 | 199 | La sintaxis del método `every()` es la siguiente: 200 | 201 | ```javascript 202 | var resultado = array.every(function(elemento) { 203 | // Función que devuelve true o false 204 | }); 205 | ``` 206 | 207 | Este método llama a la función especificada para cada elemento del arreglo `array`. La función especificada debe tomar un parámetro, que representa el valor actual del elemento del arreglo, y debe devolver un valor booleano que indica si el elemento cumple con la condición. 208 | 209 | Por ejemplo, si queremos verificar si todos los números del arreglo `numeros` son pares, podemos hacer lo siguiente: 210 | 211 | ```javascript 212 | var numeros = [2, 4, 6, 8, 10]; 213 | 214 | var todosPares = numeros.every(function(numero) { 215 | return numero % 2 === 0; 216 | }); 217 | 218 | console.log(todosPares); // true 219 | ``` 220 | 221 | En este ejemplo, el método `every()` llama a la función especificada para cada elemento del arreglo `numeros`. La función especificada verifica si el valor del elemento es par, y devuelve true o false según corresponda. 222 | 223 | ## Iterando un arreglo con `some` 224 | 225 | El método `some()` comprueba si al menos un elemento del arreglo cumple con la condición implementada por la función dada. 226 | 227 | La sintaxis del método `some()` es la siguiente: 228 | 229 | ```javascript 230 | var resultado = array.some(function(elemento) { 231 | // Función que devuelve true o false 232 | }); 233 | ``` 234 | 235 | Este método llama a la función especificada para cada elemento del arreglo `array`. La función especificada debe tomar un parámetro, que representa el valor actual del elemento del arreglo, y debe devolver un valor booleano que indica si el elemento cumple con la condición. 236 | 237 | Por ejemplo, si queremos verificar si al menos un número del arreglo `numeros` es par, podemos hacer lo siguiente: 238 | 239 | ```javascript 240 | var numeros = [1, 3, 5, 7, 9]; 241 | 242 | var algunPar = numeros.some(function(numero) { 243 | return numero % 2 === 0; 244 | }); 245 | 246 | console.log(algunPar); // false 247 | ``` 248 | 249 | En este ejemplo, el método `some()` llama a la función especificada para cada elemento del arreglo `numeros`. La función especificada verifica si el valor del elemento es par, y devuelve true o false según corresponda. 250 | 251 | En conclusión, los métodos `map()`, `filter()`, `find()`, `reduce()`, `every()`, `some()` son muy útiles para iterar un arreglo y realizar operaciones sobre sus elementos. Si bien no son los únicos métodos que nos permiten iterar un arreglo, son los métodos más utilizados. 252 | 253 | 254 | ## Buenas prácticas 255 | 256 | - Utilizar métodos de array como `forEach()`, `map()`, `filter()`, `reduce()`, etc. en lugar de bucles `for`. Estos métodos son más legibles y menos propensos a errores. 257 | - Ser cuidadoso al utilizar la indexación de array (`array[i]`) dentro de un bucle. Asegurarse de que el índice sea válido y de que no se produzca un desbordamiento o subdesbordamiento. 258 | - Utilizar nombres descriptivos y legibles para las variables del bucle y para los elementos del array. Esto hace que el código sea más fácil de entender y depurar. 259 | - Utilizar el método `Array.isArray()` para verificar si un valor es un array antes de iterar sobre él. Esto es más seguro que utilizar la comprobación de tipo `typeof`. 260 | - Utilizar la sintaxis de desestructuración para acceder a los elementos de un array en lugar de utilizar la indexación de array. Esto hace que el código sea más legible y menos propenso a errores. 261 | - Evitar la mutación directa de los elementos del array dentro del bucle, especialmente cuando se trata de arrays anidados. En su lugar, utilizar métodos de array que no mutan el array original, como `map()`, `filter()`, `reduce()`, etc. 262 | - Utilizar la declaración de const en lugar de let para declarar la variable del bucle si no se va a modificar dentro del bucle. 263 | 264 | Siguiendo estas buenas prácticas al iterar con arrays en JavaScript, podemos escribir código más legible, eficiente y menos propenso a errores sutiles. 265 | -------------------------------------------------------------------------------- /05-arrays/04-arrow-functions.md: -------------------------------------------------------------------------------- 1 | # Arrow Functions 2 | 3 | Las arrow functions son una forma más concisa de definir funciones en JavaScript. En lugar de usar la palabra clave `function`, se usan flechas `=>`. 4 | 5 | La sintaxis general es la siguiente: 6 | 7 | ```javascript 8 | (param1, param2, …, paramN) => { sentencias } 9 | ``` 10 | 11 | - Los parámetros se escriben dentro de los paréntesis y están separados por comas. 12 | - La flecha `=>` separa los parámetros de las sentencias de la función. 13 | - Si la función no recibe parámetros, se escriben los paréntesis vacíos `()`. 14 | - Si la función solo tiene una sentencia, no es necesario usar llaves `{}` y se puede omitir el `return`. 15 | - Si la función tiene múltiples sentencias, es necesario usar llaves `{}` y también incluir el `return` explícitamente. 16 | 17 | Si la función tiene un solo parámetro, los paréntesis pueden ser omitidos: 18 | 19 | ```javascript 20 | param => { sentencias } 21 | ``` 22 | 23 | Si la función tiene un solo parámetro y una sola sentencia, los paréntesis pueden ser omitidos y la sentencia puede ser omitida: 24 | 25 | ```javascript 26 | param => sentencia 27 | ``` 28 | 29 | Si la función no tiene parámetros, los paréntesis deben ser omitidos: 30 | 31 | ```javascript 32 | () => { sentencias } 33 | ``` 34 | 35 | Si la función no tiene parámetros y una sola sentencia, los paréntesis pueden ser omitidos y la sentencia puede ser omitida: 36 | 37 | ```javascript 38 | () => sentencia 39 | ``` 40 | 41 | ## Ejemplos de Arrow Functions 42 | 43 | A continuación, algunos ejemplos de arrow functions: 44 | 45 | ```javascript 46 | // Función que suma dos números 47 | const suma = (a, b) => a + b; 48 | 49 | // Función que eleva un número al cuadrado 50 | const cuadrado = num => num ** 2; 51 | 52 | // Función que devuelve el doble de un número 53 | const doble = num => { 54 | const resultado = num * 2; 55 | return resultado; 56 | }; 57 | ``` 58 | 59 | En el primer ejemplo, se define una función que recibe dos parámetros y devuelve la suma de ambos. Como la función solo tiene una sentencia, se puede omitir las llaves `{}` y el `return`. 60 | 61 | En el segundo ejemplo, se define una función que recibe un número y devuelve su cuadrado. Como la función solo tiene una sentencia, se pueden omitir las llaves `{}` y el `return`. 62 | 63 | En el tercer ejemplo, se define una función que recibe un número y devuelve su doble. Como la función tiene múltiples sentencias, se deben usar llaves `{}` y se debe incluir el `return` explícitamente. 64 | 65 | ## Ventajas de las Arrow Functions 66 | 67 | - Son más concisas y fáciles de leer que las funciones tradicionales. 68 | - Tienen un contexto léxico this más claro y predecible que las funciones tradicionales. 69 | - Permiten crear funciones anónimas de manera más simple y elegante. 70 | 71 | ## Desventajas de las Arrow Functions 72 | 73 | - No pueden ser usadas como constructores (no tienen un objeto `prototype`). 74 | - No tienen un `arguments` propio, por lo que si se desea acceder a los argumentos de la función, se deben usar argumentos predeterminados o rest parameters. 75 | 76 | 77 | ## Buenas Prácticas 78 | 79 | - Utilizar arrow functions en lugar de funciones anónimas en callbacks. Las arrow functions son más cortas, legibles y evitan el uso de la palabra clave `this`. 80 | - Utilizar paréntesis alrededor de los parámetros de la función si hay más de uno. Esto hace que el código sea más legible y evita errores sutiles. 81 | - Utilizar la sintaxis de una sola línea (`=>`) para arrow functions que tienen una sola expresión en el cuerpo. En su lugar, utilizar la sintaxis de bloque (`{}`) para arrow functions que tienen varias líneas de código en el cuerpo. 82 | - Utilizar la declaración de const en lugar de let para asignar arrow functions a variables. Esto evita que la variable sea reasignada accidentalmente. 83 | - Utilizar nombres descriptivos y legibles para las variables que contienen arrow functions. Esto hace que el código sea más fácil de entender y depurar. 84 | - Evitar el uso excesivo de arrow functions. Las arrow functions son útiles para funciones simples y para callbacks, pero pueden hacer que el código sea más difícil de leer si se utilizan en exceso. 85 | - Asegurarse de que el contexto de `this` sea el deseado dentro de la arrow function. En algunos casos, puede ser necesario utilizar la función `bind()` para establecer explícitamente el contexto de `this`. 86 | 87 | Siguiendo estas buenas prácticas al utilizar arrow functions en JavaScript, podemos escribir código más legible, eficiente y menos propenso a errores sutiles. 88 | -------------------------------------------------------------------------------- /05-arrays/05-arrow-functions-con-arrays.md: -------------------------------------------------------------------------------- 1 | # Como usar arrow functions con arreglos 2 | 3 | Las arrow functions son una forma de escribir funciones de una manera más corta y con un comportamiento diferente al de las funciones normales. En este caso, vamos a ver cómo podemos usarlas con arreglos. 4 | 5 | **Ejercicio 1:** Usando una arrow function y un ciclo for, imprime cada elemento de un arreglo de números multiplicado por 2. 6 | 7 | ```javascript 8 | const numeros = [1, 2, 3, 4, 5]; 9 | 10 | const multiplicarPor2 = (arr) => { 11 | for (let i = 0; i < arr.length; i++) { 12 | console.log(arr[i] * 2); 13 | } 14 | } 15 | 16 | multiplicarPor2(numeros); 17 | ``` 18 | 19 | **Ejercicio 2:** Usando una arrow function y el método forEach, suma todos los elementos de un arreglo de números y muestra el resultado. 20 | 21 | ```javascript 22 | const numeros = [1, 2, 3, 4, 5]; 23 | 24 | const sumar = (arr) => { 25 | let suma = 0; 26 | arr.forEach(num => suma += num); 27 | console.log(suma); 28 | } 29 | 30 | sumar(numeros); 31 | ``` 32 | 33 | **Ejercicio 3:** Usando una arrow function y el método map, devuelve un nuevo arreglo de números que son el doble de los números de un arreglo original. 34 | 35 | ```javascript 36 | const numeros = [1, 2, 3, 4, 5]; 37 | 38 | const doble = (arr) => { 39 | const nuevoArr = arr.map(num => num * 2); 40 | console.log(nuevoArr); 41 | } 42 | 43 | doble(numeros); 44 | ``` 45 | 46 | **Ejercicio 4:** Usando una arrow function y el método filter, devuelve un nuevo arreglo de números que son mayores a 3 de un arreglo original. 47 | 48 | ```javascript 49 | const numeros = [1, 2, 3, 4, 5]; 50 | 51 | const mayoresA3 = (arr) => { 52 | const nuevoArr = arr.filter(num => num > 3); 53 | console.log(nuevoArr); 54 | } 55 | 56 | mayoresA3(numeros); 57 | ``` 58 | 59 | **Ejercicio 5:** Usando una arrow function y el método find, encuentra el primer número par en un arreglo de números y muestra su valor. 60 | 61 | ```javascript 62 | const numeros = [1, 3, 5, 4, 7, 9, 6]; 63 | 64 | const encontrarPar = (arr) => { 65 | const primerPar = arr.find(num => num % 2 === 0); 66 | console.log(primerPar); 67 | } 68 | 69 | encontrarPar(numeros); 70 | ``` 71 | 72 | **Ejercicio 6**: Usando una arrow function y el método reduce, calcula la suma de un arreglo de números. 73 | 74 | ```javascript 75 | const numeros = [1, 2, 3, 4, 5]; 76 | 77 | const suma = (arr) => { 78 | const total = arr.reduce((acc, num) => acc + num, 0); 79 | console.log(total); 80 | } 81 | 82 | suma(numeros); 83 | ``` 84 | 85 | ## Buenas prácticas 86 | 87 | - Las arrow functions son una forma más concisa de definir funciones en JavaScript. En lugar de usar la palabra clave `function`, se usan flechas `=>`. 88 | - Utilizar métodos de array como `map()`, `filter()`, `reduce()`, etc. en lugar de bucles for con arrow functions. Estos métodos son más legibles y menos propensos a errores. 89 | - Utilizar la sintaxis de una sola línea (`=>`) para arrow functions que tienen una sola expresión en el cuerpo. En su lugar, utilizar la sintaxis de bloque (`{}`) para arrow functions que tienen varias líneas de código en el cuerpo. 90 | - Utilizar la declaración de `const` en lugar de `let` para asignar arrow functions a variables. Esto evita que la variable sea reasignada accidentalmente. 91 | - Utilizar nombres descriptivos y legibles para las variables que contienen arrow functions. Esto hace que el código sea más fácil de entender y depurar. 92 | - Utilizar la sintaxis de desestructuración para acceder a los elementos del array dentro de la arrow function. Esto hace que el código sea más legible y menos propenso a errores. 93 | - Evitar la mutación directa de los elementos del array dentro de la arrow function, especialmente cuando se trata de arrays anidados. En su lugar, utilizar métodos de array que no mutan el array original, como `map()`, `filter()`, `reduce()`, etc. 94 | - Utilizar el método `Array.isArray()` para verificar si un valor es un array antes de utilizar una arrow function. Esto es más seguro que utilizar la comprobación de tipo `typeof`. 95 | 96 | Siguiendo estas buenas prácticas al utilizar arrow functions con arrays en JavaScript, podemos escribir código más legible, eficiente y menos propenso a errores sutiles. 97 | -------------------------------------------------------------------------------- /05-arrays/06-ejercicios.md: -------------------------------------------------------------------------------- 1 | # Ejercicios de arrays 2 | 3 | Esta sección contiene ejercicios para practicar los conceptos de arrays en JavaScript. 4 | 5 | ## Arrays 6 | 7 | Los ejercicios de esta sección se basan en la declaración de arrays. 8 | 9 | ## Ejercicio 1 10 | 11 | Crear un método que reciba un array de calificaciones y obtenga el promedio con el uso de los métodos de arrays. Si el promedio es mayor a 70 imprima que aprobó / si es menor, que no aprobó. 12 | 13 | promedio([70, 80, 80, 90, 60]) // Aprobado: 76. 14 | promedio([70, 50, 75, 70, 60]) // No Aprobado: 65. 15 | 16 | ```javascript 17 | // Función que recibe un array de calificaciones y obtiene el promedio 18 | function promedio(calificaciones) { 19 | var suma = 0; // Inicializamos una variable suma en 0 20 | 21 | for (var i = 0; i < calificaciones.length; i++) { 22 | // Creamos un bucle for que se ejecutará mientras i sea menor que la longitud del array 23 | suma += calificaciones[i]; // Sumamos a la variable suma el elemento en la posición i del array 24 | } 25 | 26 | var promedio = suma / calificaciones.length; // Calculamos el promedio dividiendo la suma entre la longitud del array 27 | 28 | if (promedio > 70) { 29 | // Si el promedio es mayor a 70 30 | console.log("Aprobado: " + promedio); // Imprimimos en consola que aprobó 31 | } else { 32 | // Si el promedio es menor o igual a 70 33 | console.log("No Aprobado: " + promedio); // Imprimimos en consola que no aprobó 34 | } 35 | } 36 | 37 | promedio([70, 80, 80, 90, 60]); // Aprobado: 76 38 | promedio([70, 50, 75, 70, 60]); // No Aprobado: 65 39 | ``` 40 | 41 | ## Ejercicio 2 42 | 43 | Método que reciba un array e imprima en la consola cada uno de sus elementos. 44 | imprimeArray([‘uno’, 2, null, 0]); 45 | uno 46 | 2 47 | null 48 | 0 49 | 50 | ```javascript 51 | // Función que recibe un array e imprime en consola cada uno de sus elementos 52 | function imprimeArray(array) { 53 | for (var i = 0; i < array.length; i++) { 54 | // Creamos un bucle for que se ejecutará mientras i sea menor que la longitud del array 55 | console.log(array[i]); // Imprimimos en consola el elemento en la posición i del array 56 | } 57 | } 58 | 59 | imprimeArray(["uno", 2, null, 0]); // Imprimimos en consola cada uno de los elementos del array 60 | ``` 61 | 62 | ## Ejercicio 3 63 | 64 | Crear un método que a partir de un array de calificaciones, filtre las notas aprobatorias y retorne el nuevo array. 65 | aprobadas([50, 80, 100, 69, 70, 10]) // [80, 100, 70] 66 | aprobadas([90, 90, 50, 45, 100, 80]) // [90, 90, 100, 80] 67 | 68 | ```javascript 69 | // Función que recibe un array de calificaciones y retorna un nuevo array con las notas aprobatorias 70 | function aprobadas(calificaciones) { 71 | var aprobadas = []; // Inicializamos un array vacío 72 | 73 | for (var i = 0; i < calificaciones.length; i++) { 74 | // Creamos un bucle for que se ejecutará mientras i sea menor que la longitud del array 75 | if (calificaciones[i] >= 70) { 76 | // Si el elemento en la posición i del array es mayor o igual a 70 77 | aprobadas.push(calificaciones[i]); // Agregamos el elemento en la posición i del array al array aprobadas 78 | } 79 | } 80 | 81 | return aprobadas; // Retornamos el array aprobadas 82 | } 83 | 84 | console.log(aprobadas([50, 80, 100, 69, 70, 10])); // [80, 100, 70] 85 | console.log(aprobadas([90, 90, 50, 45, 100, 80])); // [90, 90, 100, 80] 86 | ``` 87 | 88 | ## Ejercicio 4 89 | 90 | Crear un método que reciba un array de nacionalidades y cuente las diferentes nacionalidades que existen. 91 | (México/Argentina/Venezuela/Perú) 92 | contar(["mexicano", "argentino", "argentino", "venezolano", "peruano", "mexicano", "argentino", "peruano", "venezolano"]); 93 | // Mexicanos: 2 94 | // Venezolanos: 2 95 | // Argentinos: 3 96 | // Peruanos: 2 97 | 98 | ```javascript 99 | // Función que recibe un array de nacionalidades y cuenta las diferentes nacionalidades que existen 100 | function contar(nacionalidades) { 101 | var nacionalidadesContadas = {}; // Inicializamos un objeto vacío 102 | 103 | for (var i = 0; i < nacionalidades.length; i++) { 104 | // Creamos un bucle for que se ejecutará mientras i sea menor que la longitud del array 105 | if (nacionalidadesContadas[nacionalidades[i]]) { 106 | // Si el elemento en la posición i del array existe como propiedad del objeto nacionalidadesContadas 107 | nacionalidadesContadas[nacionalidades[i]]++; // Incrementamos en 1 el valor de la propiedad del objeto nacionalidadesContadas 108 | } else { 109 | // Si el elemento en la posición i del array no existe como propiedad del objeto nacionalidadesContadas 110 | nacionalidadesContadas[nacionalidades[i]] = 1; // Agregamos una propiedad al objeto nacionalidadesContadas con el nombre del elemento en la posición i del array y le asignamos el valor 1 111 | } 112 | } 113 | 114 | for (var nacionalidad in nacionalidadesContadas) { 115 | // Creamos un bucle for in para recorrer las propiedades del objeto nacionalidadesContadas 116 | console.log( 117 | nacionalidad + ": " + nacionalidadesContadas[nacionalidad] // Imprimimos en consola el nombre de la propiedad y su valor 118 | ); 119 | } 120 | } 121 | 122 | contar([ 123 | "mexicano", 124 | "argentino", 125 | "argentino", 126 | "venezolano", 127 | "peruano", 128 | "mexicano", 129 | "argentino", 130 | "peruano", 131 | "venezolano", 132 | ]); // Mexicanos: 2, Venezolanos: 2, Argentinos: 3, Peruanos: 2 133 | ``` 134 | 135 | ## Ejercicio 5 136 | 137 | Crear un array con el nombre de tus compañeros de clase y posteriormente realizar una función que reciba un nombre y muestre en un alert si se encuentra en la clase o no. 138 | 139 | ```javascript 140 | // Función que recibe un nombre y muestra un alert diciendo si el nombre se encuentra en el array de compañeros de clase 141 | function estaEnClase(nombre) { 142 | var clase = ["Cristina", "María", "Javier", "Miguel", "Sergio"]; // Creamos un array con los nombres de los compañeros de clase 143 | var encontrado = false; // Inicializamos una variable encontrado en false para indicar que no hemos encontrado el nombre en el array 144 | 145 | for (var i = 0; i < clase.length; i++) { 146 | // Creamos un bucle for que se ejecutará mientras i sea menor que la longitud del array 147 | if (clase[i] === nombre) { 148 | // Si el elemento en la posición i del array es igual al nombre que hemos recibido como parámetro 149 | encontrado = true; // Cambiamos el valor de encontrado a true 150 | } 151 | } 152 | 153 | if (encontrado) { 154 | // Si encontrado es true 155 | alert("El nombre " + nombre + " se encuentra en la clase"); // Mostramos un alert indicando que el nombre se encuentra en la clase 156 | } else { 157 | // Si encontrado es false 158 | alert("El nombre " + nombre + " no se encuentra en la clase"); // Mostramos un alert indicando que el nombre no se encuentra en la clase 159 | } 160 | } 161 | 162 | estaEnClase("Cristina"); // Llamamos a la función pasando como parámetro el nombre de un compañero 163 | ``` 164 | -------------------------------------------------------------------------------- /06-objetos-y-clases/01-ecmascript-6.md: -------------------------------------------------------------------------------- 1 | # EcmaScript 6 2 | 3 | El estándar ECMAScript 6 (también conocido como ES6 o ECMAScript 2015) es una versión importante de JavaScript que se lanzó en 2015. Esta versión agregó muchas características nuevas y útiles al lenguaje, lo que lo hace más poderoso y fácil de usar. 4 | 5 | Aquí hay algunas de las características más importantes de ECMAScript 6: 6 | 7 | ## Variables 8 | 9 | En ES6, se introdujeron dos nuevas formas de declarar variables: `let` y `const`. A diferencia de `var`, `let` y `const` tienen alcances de bloque, lo que significa que solo están disponibles dentro del bloque en el que se declaran. 10 | 11 | Ejemplo: 12 | 13 | ```javascript 14 | // Declaración de variables con let y const 15 | let nombre = "Juan"; 16 | const PI = 3.1416; 17 | 18 | // Cambio de valor de una variable 19 | nombre = "Pedro"; // Válido 20 | PI = 3.14; // Inválido 21 | ``` 22 | 23 | ## Arrow Functions 24 | 25 | Las funciones de flecha (también conocidas como funciones lambda) son una forma más concisa de escribir funciones en ES6. Se definen utilizando la sintaxis `() => {}`. 26 | 27 | Ejemlo: 28 | 29 | ```javascript 30 | // Función normal 31 | function sumar(a, b) { 32 | return a + b; 33 | } 34 | 35 | // Función de flecha 36 | const sumar = (a, b) => { 37 | return a + b; 38 | } 39 | ``` 40 | 41 | ## Template Strings (Template Literals) 42 | 43 | Las plantillas de cadena (template strings) son una forma más conveniente de crear cadenas de texto en JavaScript. Permiten la interpolación de variables y expresiones dentro de una cadena utilizando la sintaxis `${}`. 44 | 45 | Ejemplo: 46 | 47 | ```javascript 48 | const nombre = "Juan"; 49 | const edad = 25; 50 | 51 | const mensaje = `Mi nombre es ${nombre} y tengo ${edad} años.`; 52 | console.log(mensaje); // Resultado: "Mi nombre es Juan y tengo 25 años." 53 | ``` 54 | 55 | ## Desestructuración 56 | 57 | La desestructuración es una forma de extraer datos de matrices y objetos en variables separadas. Esto puede ser útil cuando se trabaja con funciones que devuelven matrices u objetos grandes. 58 | 59 | Ejemplo: 60 | 61 | ```javascript 62 | // Desestructuración de objetos 63 | const persona = {nombre: "Juan", edad: 25}; 64 | const {nombre, edad} = persona; 65 | 66 | console.log(nombre); // Resultado: "Juan" 67 | console.log(edad); // Resultado: 25 68 | 69 | // Desestructuración de matrices 70 | const numeros = [1, 2, 3]; 71 | const [a, b, c] = numeros; 72 | 73 | console.log(a); // Resultado: 1 74 | console.log(b); // Resultado: 2 75 | console.log(c); // Resultado: 3 76 | ``` 77 | 78 | ## Clases 79 | 80 | ES6 introdujo una nueva sintaxis para definir clases en JavaScript. Las clases permiten crear objetos que tienen propiedades y métodos. 81 | 82 | Ejemplo: 83 | 84 | ```javascript 85 | class Persona { 86 | constructor(nombre, edad) { 87 | this.nombre = nombre; 88 | this.edad = edad; 89 | } 90 | 91 | saludar() { 92 | console.log(`Hola, mi nombre es ${this.nombre}.`); 93 | } 94 | } 95 | 96 | const juan = new Persona("Juan", 25); 97 | juan.saludar(); // Resultado: "Hola, mi nombre es Juan." 98 | ``` 99 | 100 | ## Promesas 101 | 102 | Las promesas son una forma de manejar tareas asíncronas en JavaScript. Permiten realizar tareas que pueden tardar en completarse, como la obtención de datos de un servidor, y luego realizar una acción cuando se complete la tarea. 103 | 104 | Ejemplo: 105 | 106 | ```javascript 107 | const obtenerDatos = () => { 108 | return new Promise((resolve, reject) => { 109 | setTimeout(() => { 110 | const datos = {nombre: "Juan", edad: 25}; 111 | if(datos) { 112 | resolve(datos); 113 | } else { 114 | reject("Error al obtener los datos."); 115 | } 116 | }, 2000); 117 | }); 118 | } 119 | 120 | obtenerDatos() 121 | .then((datos) => { 122 | console.log(datos); // Resultado: {nombre: "Juan", edad: 25} 123 | }) 124 | .catch((error) => { 125 | console.error(error); // Resultado: "Error al obtener los datos." 126 | }); 127 | ``` 128 | 129 | En este ejemplo, la función obtenerDatos devuelve una promesa que se resuelve después de 2 segundos y devuelve un objeto con datos simulados. Si la promesa se resuelve correctamente, el método then se llama con los datos obtenidos. Si la promesa se rechaza, el método catch se llama con un mensaje de error. 130 | 131 | ## Buenas prácticas 132 | 133 | - Utiliza `const` para declarar variables que no cambiarán su valor y `let` para las que sí lo harán. 134 | - Utiliza funciones de flecha en lugar de funciones normales. 135 | - Utiliza plantillas de cadena en lugar de concatenación de cadenas. 136 | - Utiliza la desestructuración para extraer datos de matrices y objetos. 137 | - Utiliza clases para crear objetos con propiedades y métodos. 138 | - Utiliza promesas para manejar tareas asíncronas. 139 | 140 | Siguiendo estas buenas prácticas, podrás escribir un código más limpio y fácil de mantener. 141 | -------------------------------------------------------------------------------- /06-objetos-y-clases/02-declaracion-con-let-y-const.md: -------------------------------------------------------------------------------- 1 | # Declaración con let y const 2 | 3 | La declaración de variables con `let` y `const` es una característica importante de ECMAScript 6 que ayuda a mejorar la claridad y seguridad de nuestro código. Aquí te explico en detalle cómo funcionan `let` y `const`: 4 | 5 | ## `let` 6 | 7 | `let` es una palabra clave que se utiliza para declarar variables en JavaScript. A diferencia de `var`, las variables declaradas con `let` tienen alcance de bloque. Esto significa que solo están disponibles dentro del bloque en el que se declaran. 8 | 9 | Ejemplo: 10 | 11 | ```javascript 12 | function ejemplo() { 13 | let x = 10; // Variable disponible solo dentro de la función ejemplo 14 | if(true) { 15 | let y = 20; // Variable disponible solo dentro del bloque if 16 | console.log(y); // Resultado: 20 17 | } 18 | console.log(x); // Resultado: 10 19 | console.log(y); // Error: la variable y no está definida 20 | } 21 | ``` 22 | 23 | ## const 24 | 25 | `const` es una palabra clave que se utiliza para declarar constantes en JavaScript. Al igual que `let`, las constantes declaradas con `const` tienen alcance de bloque. Sin embargo, a diferencia de las variables declaradas con `let`, las constantes no se pueden reasignar. 26 | 27 | Ejemplo: 28 | 29 | ```javascript 30 | const PI = 3.1416; // Constante disponible en todo el código 31 | PI = 3.14; // Error: no se puede reasignar una constante 32 | ``` 33 | 34 | Las constantes deben inicializarse con un valor en el momento de la declaración. No se les puede asignar un valor posteriormente. 35 | 36 | Ejemplo: 37 | 38 | ```javascript 39 | const nombre; // Error: las constantes deben inicializarse con un valor 40 | const edad = 25; // Correcto 41 | edad = 30; // Error: no se puede reasignar una constante 42 | ``` 43 | 44 | ## Buenas prácticas 45 | 46 | - Utiliza `const` para declarar variables que no se reasignarán. 47 | - Utiliza `let` para declarar variables que se reasignarán. 48 | - Evita utilizar `var` para declarar variables. 49 | 50 | La declaración de variables con `let` y `const` es una característica importante de ECMAScript 6 que ayuda a mejorar la claridad y seguridad de nuestro código. 51 | -------------------------------------------------------------------------------- /06-objetos-y-clases/03-string-templates.md: -------------------------------------------------------------------------------- 1 | # String templates (Template Literals) 2 | 3 | Los string templates son una característica de ECMAScript 6 que nos permiten crear cadenas de texto de forma más legible y fácil de mantener. Aquí te explico en detalle cómo funcionan los string templates: 4 | 5 | ## Sintaxis 6 | 7 | Los string templates se definen con comillas graves (```) en lugar de comillas simples o dobles. Dentro de un string template, podemos incluir variables, expresiones y otros strings utilizando la sintaxis `${}`. 8 | 9 | Ejemplo: 10 | 11 | ```javascript 12 | const nombre = "Juan"; 13 | const edad = 25; 14 | 15 | const mensaje = `Mi nombre es ${nombre} y tengo ${edad} años.`; 16 | console.log(mensaje); // Resultado: "Mi nombre es Juan y tengo 25 años." 17 | ``` 18 | 19 | En este ejemplo, creamos una cadena de texto que incluye variables `nombre` y `edad`. Utilizamos la sintaxis `${}` para incluir las variables dentro del string. 20 | 21 | ## Multilínea 22 | 23 | Los string templates también nos permiten crear cadenas de texto multilínea. Esto significa que podemos crear cadenas de texto que contienen saltos de línea sin tener que utilizar caracteres especiales como `\n`. 24 | 25 | Ejemplo: 26 | 27 | ```javascript 28 | const mensaje = ` 29 | Hola, 30 | Bienvenido al sitio web. 31 | Gracias por visitarnos. 32 | `; 33 | console.log(mensaje); 34 | // Resultado: 35 | // "Hola, 36 | // Bienvenido al sitio web. 37 | // Gracias por visitarnos." 38 | ``` 39 | 40 | En este ejemplo, creamos una cadena de texto multilínea utilizando comillas graves. No es necesario utilizar caracteres de escape o concatenación para crear una cadena de texto multilínea. 41 | 42 | ## Tagged Templates 43 | 44 | Además de los string templates regulares, ECMAScript 6 también introdujo los tagged templates. Los tagged templates son una forma de personalizar el procesamiento de una cadena de texto. 45 | 46 | Ejemplo: 47 | 48 | ```javascript 49 | function etiqueta(strings, ...expresiones) { 50 | console.log(strings); // Resultado: ["Mi nombre es ", " y tengo ", " años."] 51 | console.log(expresiones); // Resultado: ["Juan", 25] 52 | return "Mensaje personalizado"; 53 | } 54 | 55 | const nombre = "Juan"; 56 | const edad = 25; 57 | 58 | const mensaje = etiqueta`Mi nombre es ${nombre} y tengo ${edad} años.`; 59 | console.log(mensaje); // Resultado: "Mensaje personalizado" 60 | ``` 61 | 62 | En este ejemplo, creamos una función `etiqueta` que toma una cadena de texto y una serie de expresiones. La función muestra los strings y expresiones en la consola y devuelve un mensaje personalizado. Luego, utilizamos el string template con la función `etiqueta` para procesar la cadena de texto. 63 | 64 | Espero que esta explicación te haya sido útil. Los string templates son una característica muy útil de ECMAScript 6 que nos permite crear cadenas de texto de forma más legible y fácil de mantener. 65 | 66 | ## Buenas prácticas 67 | 68 | - Utiliza string templates para crear cadenas de texto de forma más legible y fácil de mantener. 69 | - Utiliza tagged templates para personalizar el procesamiento de una cadena de texto. 70 | -------------------------------------------------------------------------------- /06-objetos-y-clases/04-objetos.md: -------------------------------------------------------------------------------- 1 | # Objetos 2 | 3 | Los objetos son una estructura de datos importante en JavaScript que nos permiten almacenar datos y funciones relacionadas en una sola entidad. En ECMAScript 6, se introdujeron algunas características nuevas y útiles para trabajar con objetos. Aquí te explico en detalle cómo funcionan los objetos en JavaScript: 4 | 5 | ## Creación de objetos 6 | 7 | En JavaScript, podemos crear objetos utilizando la sintaxis de llaves (`{}`). Los objetos pueden contener propiedades y métodos. 8 | 9 | Ejemplo: 10 | 11 | ```javascript 12 | const persona = { 13 | nombre: "Juan", 14 | edad: 25, 15 | saludar: function() { 16 | console.log(`Hola, mi nombre es ${this.nombre}.`); 17 | } 18 | }; 19 | 20 | console.log(persona.nombre); // Resultado: "Juan" 21 | console.log(persona.edad); // Resultado: 25 22 | persona.saludar(); // Resultado: "Hola, mi nombre es Juan." 23 | ``` 24 | 25 | En este ejemplo, creamos un objeto `persona` con dos propiedades (`nombre` y `edad`) y un método (saludar). 26 | 27 | ## Propiedades de objetos 28 | 29 | Podemos acceder a las propiedades de un objeto utilizando la notación de puntos (`objeto.propiedad`) o la notación de corchetes (`objeto["propiedad"]`). 30 | 31 | Ejemplo: 32 | 33 | ```javascript 34 | const persona = { 35 | nombre: "Juan", 36 | edad: 25 37 | }; 38 | 39 | console.log(persona.nombre); // Resultado: "Juan" 40 | console.log(persona["edad"]); // Resultado: 25 41 | ``` 42 | 43 | ## Métodos de objetos 44 | 45 | Los métodos de objetos son funciones que están asociadas con el objeto. Se definen de la misma manera que las funciones normales, pero se agregan al objeto como una propiedad. 46 | 47 | Ejemplo: 48 | 49 | ```javascript 50 | const persona = { 51 | nombre: "Juan", 52 | edad: 25, 53 | saludar: function() { 54 | console.log(`Hola, mi nombre es ${this.nombre}.`); 55 | } 56 | }; 57 | 58 | persona.saludar(); // Resultado: "Hola, mi nombre es Juan." 59 | ``` 60 | 61 | ## Shorthand Properties 62 | 63 | ECMAScript 6 introdujo una sintaxis abreviada para la definición de propiedades de objeto. Si el nombre de la propiedad y el nombre de la variable que contiene su valor son iguales, podemos omitir el nombre de la propiedad. 64 | 65 | Ejemplo: 66 | 67 | ```javascript 68 | const nombre = "Juan"; 69 | const edad = 25; 70 | 71 | const persona = {nombre, edad}; 72 | 73 | console.log(persona.nombre); // Resultado: "Juan" 74 | console.log(persona.edad); // Resultado: 25 75 | ``` 76 | 77 | ## Object Destructuring 78 | 79 | ECMAScript 6 también introdujo la desestructuración de objetos, que nos permite extraer propiedades de un objeto y asignarlas a variables individuales. 80 | 81 | Ejemplo: 82 | 83 | ```javascript 84 | const persona = {nombre: "Juan", edad: 25}; 85 | 86 | const {nombre, edad} = persona; 87 | 88 | console.log(nombre); // Resultado: "Juan" 89 | console.log(edad); // Resultado: 25 90 | ``` 91 | 92 | Espero que esta explicación te haya sido útil. Los objetos son una estructura de datos importante en JavaScript que nos permite almacenar datos y funciones relacionadas en una sola entidad. Con las características de ECMAScript 6, podemos trabajar con objetos de una manera más eficiente y legible. 93 | 94 | ## Buenas prácticas 95 | 96 | - Utiliza la sintaxis de llaves (`{}`) para crear objetos. 97 | - Utiliza la notación de puntos (`objeto.propiedad`) o la notación de corchetes (`objeto["propiedad"]`) para acceder a las propiedades de un objeto. 98 | - Utiliza la notación de puntos (`objeto.metodo()`) para llamar a los métodos de un objeto. 99 | - Utiliza la sintaxis abreviada para definir propiedades de objeto cuando el nombre de la propiedad y el nombre de la variable que contiene su valor son iguales. 100 | - Utiliza la desestructuración de objetos para extraer propiedades de un objeto y asignarlas a variables individuales. 101 | -------------------------------------------------------------------------------- /06-objetos-y-clases/05-iterando-objetos.md: -------------------------------------------------------------------------------- 1 | # Iterando objetos 2 | 3 | Iterar sobre los objetos es una tarea común en JavaScript y ECMAScript 6 nos ofrece algunas formas nuevas y convenientes de hacerlo. Aquí te explico en detalle cómo puedes iterar sobre objetos en ECMAScript 6: 4 | 5 | ## for...in 6 | 7 | La forma tradicional de iterar sobre los objetos en JavaScript es mediante el uso de la instrucción `for...in`. Esta instrucción recorre todas las propiedades enumerables de un objeto y ejecuta un bloque de código para cada propiedad. 8 | 9 | Ejemplo: 10 | 11 | ```javascript 12 | const persona = {nombre: "Juan", edad: 25}; 13 | 14 | for(let propiedad in persona) { 15 | console.log(`${propiedad}: ${persona[propiedad]}`); 16 | } 17 | // Resultado: "nombre: Juan" 18 | // "edad: 25" 19 | ``` 20 | 21 | En este ejemplo, utilizamos la instrucción `for...in` para recorrer las propiedades del objeto `persona`. En cada iteración, mostramos el nombre de la propiedad y su valor utilizando la notación de corchetes. 22 | 23 | ## Object.keys() 24 | 25 | ECMAScript 6 introdujo el método `Object.keys()` que devuelve un array con los nombres de todas las propiedades enumerables de un objeto. Podemos utilizar este método para iterar sobre un objeto de forma más conveniente. 26 | 27 | Ejemplo: 28 | 29 | ```javascript 30 | const persona = {nombre: "Juan", edad: 25}; 31 | 32 | for(let propiedad of Object.keys(persona)) { 33 | console.log(`${propiedad}: ${persona[propiedad]}`); 34 | } 35 | // Resultado: "nombre: Juan" 36 | // "edad: 25" 37 | ``` 38 | 39 | En este ejemplo, utilizamos el método `Object.keys()` para obtener un array con los nombres de las propiedades del objeto `persona`. Luego, utilizamos un `for...of` loop para iterar sobre el array y mostrar el nombre de la propiedad y su valor. 40 | ` 41 | 42 | ## Object.entries() 43 | 44 | ECMAScript 6 también introdujo el método `Object.entries()` que devuelve un array de arrays con el nombre y el valor de todas las propiedades enumerables de un objeto. Podemos utilizar este método para iterar sobre un objeto de forma aún más conveniente. 45 | 46 | Ejemplo: 47 | 48 | ```javascript 49 | const persona = {nombre: "Juan", edad: 25}; 50 | 51 | for(let [propiedad, valor] of Object.entries(persona)) { 52 | console.log(`${propiedad}: ${valor}`); 53 | } 54 | // Resultado: "nombre: Juan" 55 | // "edad: 25" 56 | ``` 57 | 58 | En este ejemplo, utilizamos el método Object.entries() para obtener un array de arrays con los nombres y valores de las propiedades del objeto persona. Luego, utilizamos un for...of loop para iterar sobre el array de arrays y mostrar el nombre de la propiedad y su valor. 59 | 60 | ## Buenas prácticas 61 | 62 | - Cuando iteramos sobre los objetos, es una buena práctica utilizar el método `hasOwnProperty()` para asegurarnos de que la propiedad que estamos iterando pertenece al objeto y no a su prototipo. 63 | - Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción `break` para detener el bucle después de encontrar la propiedad que estamos buscando. 64 | - Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción `continue` para omitir la propiedad que no nos interesa. 65 | - Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción `return` para detener la función después de encontrar la propiedad que estamos buscando. 66 | - Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción `throw` para lanzar una excepción después de encontrar la propiedad que estamos buscando. 67 | - Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción `yield` para devolver la propiedad que estamos buscando. 68 | - Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción `await` para esperar a que se resuelva la propiedad que estamos buscando. 69 | - Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción `async` para ejecutar la propiedad que estamos buscando de forma asíncrona. 70 | - Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción `async*` para ejecutar la propiedad que estamos buscando de forma asíncrona y devolver un iterador. 71 | - Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción `for await...of` para iterar sobre los objetos asíncronos. 72 | - Cuando iteramos sobre los objetos, es una buena práctica utilizar la instrucción `for await...in` para iterar sobre los objetos asíncronos. 73 | -------------------------------------------------------------------------------- /06-objetos-y-clases/06-desestructuracion-de-objetos.md: -------------------------------------------------------------------------------- 1 | # Desestructuración de objetos 2 | 3 | La desestructuración de objetos es una característica de ECMAScript 6 que nos permite extraer valores de un objeto y asignarlos a variables individuales en una sola línea de código. Aquí te explico en detalle cómo funciona la desestructuración de objetos en JavaScript: 4 | 5 | ## Sintaxis básica 6 | 7 | La sintaxis básica de la desestructuración de objetos implica crear una variable para cada propiedad del objeto que se desea extraer. Las variables se crean dentro de un objeto literal con el mismo nombre que la propiedad. 8 | 9 | Ejemplo: 10 | 11 | ```javascript 12 | const persona = {nombre: "Juan", edad: 25}; 13 | 14 | const {nombre, edad} = persona; 15 | 16 | console.log(nombre); // Resultado: "Juan" 17 | console.log(edad); // Resultado: 25 18 | ``` 19 | 20 | En este ejemplo, utilizamos la sintaxis de desestructuración para extraer las propiedades `nombre` y `edad` del objeto `persona`. Las variables se crean automáticamente con el mismo nombre que las propiedades, lo que nos permite acceder a ellas directamente. 21 | 22 | ## Asignación de alias 23 | 24 | Podemos asignar un nombre de variable diferente al nombre de la propiedad utilizando la sintaxis de alias. 25 | 26 | Ejemplo: 27 | 28 | ```javascript 29 | const persona = {nombre: "Juan", edad: 25}; 30 | 31 | const {nombre: primerNombre, edad: años} = persona; 32 | 33 | console.log(primerNombre); // Resultado: "Juan" 34 | console.log(años); // Resultado: 25 35 | ``` 36 | 37 | En este ejemplo, utilizamos la sintaxis de alias para asignar el nombre `primerNombre` a la propiedad `nombre` y el nombre `años` a la propiedad `edad`. 38 | 39 | ## Valores por defecto 40 | 41 | Podemos proporcionar valores por defecto para las propiedades que no existen en el objeto utilizando la sintaxis de valores por defecto. 42 | 43 | Ejemplo: 44 | 45 | ```javascript 46 | const persona = {nombre: "Juan"}; 47 | 48 | const {nombre, edad = 25} = persona; 49 | 50 | console.log(nombre); // Resultado: "Juan" 51 | console.log(edad); // Resultado: 25 (por defecto) 52 | ``` 53 | 54 | En este ejemplo, utilizamos la sintaxis de valores por defecto para asignar un valor por defecto de `25` a la propiedad `edad`. Como la propiedad `edad` no existe en el objeto persona, se asigna automáticamente el valor por defecto. 55 | 56 | ## Desestructuración de objetos anidados 57 | 58 | También podemos utilizar la desestructuración de objetos para extraer propiedades de objetos anidados. 59 | 60 | Ejemplo: 61 | 62 | ```javascript 63 | const persona = {nombre: "Juan", edad: 25, dirección: {calle: "Av. Principal", número: 123}}; 64 | 65 | const {nombre, edad, dirección: {calle, número}} = persona; 66 | 67 | console.log(nombre); // Resultado: "Juan" 68 | console.log(edad); // Resultado: 25 69 | console.log(calle); // Resultado: "Av. Principal" 70 | console.log(número); // Resultado: 123 71 | ``` 72 | 73 | En este ejemplo, utilizamos la desestructuración de objetos para extraer las propiedades `nombre`, `edad`, `calle` y `número` del objeto `persona`. La propiedad `dirección` se desestructura automáticamente y se extraen sus propias propiedades. 74 | 75 | ## Buenas prácticas 76 | 77 | - La desestructuración de objetos es una característica muy útil de ECMAScript 6, pero debemos utilizarla con moderación. 78 | - Si utilizamos la desestructuración de objetos en exceso, nuestro código puede volverse difícil de leer y mantener. 79 | - La desestructuración de objetos es especialmente útil cuando trabajamos con funciones que devuelven objetos grandes con muchas propiedades. 80 | - La desestructuración de objetos también es útil cuando trabajamos con funciones que reciben objetos grandes con muchas propiedades. 81 | -------------------------------------------------------------------------------- /06-objetos-y-clases/07-desestructuracion-de-arrays.md: -------------------------------------------------------------------------------- 1 | # Desestructuración de arrays 2 | 3 | La desestructuración de arrays es una característica de ECMAScript 6 que nos permite extraer valores de un array y asignarlos a variables individuales en una sola línea de código. Aquí te explico en detalle cómo funciona la desestructuración de arrays en JavaScript: 4 | 5 | ## Sintaxis básica 6 | 7 | La sintaxis básica de la desestructuración de arrays implica crear una variable para cada elemento del array que se desea extraer. Las variables se crean dentro de un array literal utilizando la sintaxis de corchetes. 8 | 9 | Ejemplo: 10 | 11 | ```javascript 12 | const [primero, segundo] = ["uno", "dos", "tres"]; 13 | 14 | console.log(primero); // Resultado: "uno" 15 | console.log(segundo); // Resultado: "dos" 16 | ``` 17 | 18 | En este ejemplo, utilizamos la sintaxis de desestructuración para extraer los primeros dos elementos del array. Las variables `primero` y `segundo` se crean automáticamente con los valores correspondientes. 19 | 20 | ## Saltos de elementos 21 | 22 | Podemos saltar elementos del array que no deseamos extraer utilizando la sintaxis de comas. 23 | 24 | Ejemplo: 25 | 26 | ```javascript 27 | const [primero, , tercero] = ["uno", "dos", "tres"]; 28 | 29 | console.log(primero); // Resultado: "uno" 30 | console.log(tercero); // Resultado: "tres" 31 | ``` 32 | 33 | En este ejemplo, utilizamos la sintaxis de comas para saltar el segundo elemento del array y extraer solamente los elementos `primero` y `tercero`. 34 | 35 | ## Asignación de valores por defecto 36 | 37 | Podemos proporcionar valores por defecto para los elementos que no existen en el array utilizando la sintaxis de valores por defecto. 38 | 39 | Ejemplo: 40 | 41 | ```javascript 42 | const [primero, segundo, tercero = "tres"] = ["uno", "dos"]; 43 | 44 | console.log(primero); // Resultado: "uno" 45 | console.log(segundo); // Resultado: "dos" 46 | console.log(tercero); // Resultado: "tres" (por defecto) 47 | ``` 48 | 49 | En este ejemplo, utilizamos la sintaxis de valores por defecto para asignar un valor por defecto de `"tres"` al elemento `tercero`. Como el elemento `tercero` no existe en el array, se asigna automáticamente el valor por defecto. 50 | 51 | ## Desestructuración de arrays anidados 52 | 53 | También podemos utilizar la desestructuración de arrays para extraer elementos de arrays anidados. 54 | 55 | Ejemplo: 56 | 57 | ```javascript 58 | const [primero, segundo, [tercero, cuarto]] = ["uno", "dos", ["tres", "cuatro"]]; 59 | 60 | console.log(primero); // Resultado: "uno" 61 | console.log(segundo); // Resultado: "dos" 62 | console.log(tercero); // Resultado: "tres" 63 | console.log(cuarto); // Resultado: "cuatro" 64 | ``` 65 | 66 | En este ejemplo, utilizamos la desestructuración de arrays para extraer los elementos `primero`, `segundo`, `tercero` y `cuarto`. El tercer elemento es otro array que se desestructura automáticamente. 67 | 68 | ## Buenas prácticas 69 | 70 | - La desestructuración de arrays es una característica muy útil de ECMAScript 6, pero debemos utilizarla con moderación. Si utilizamos la desestructuración de arrays en exceso, nuestro código puede volverse difícil de leer y mantener. 71 | - La desestructuración de arrays es especialmente útil cuando trabajamos con funciones que devuelven arrays. En lugar de asignar el valor de retorno de la función a una variable y luego extraer los elementos del array, podemos hacerlo en una sola línea de código. 72 | - La desestructuración de arrays es una característica de ECMAScript 6, por lo que no es compatible con versiones anteriores de JavaScript. Si utilizamos la desestructuración de arrays en nuestro código, debemos compilarlo con Babel para que sea compatible con todos los navegadores. 73 | -------------------------------------------------------------------------------- /06-objetos-y-clases/08-clases.md: -------------------------------------------------------------------------------- 1 | # Clases 2 | 3 | Las clases son una característica importante de ECMAScript 6 que nos permiten crear objetos y definir comportamientos relacionados en una sola entidad. Aquí te explico en detalle cómo funcionan las clases en JavaScript: 4 | 5 | ## Declaración de clases 6 | 7 | La declaración de una clase en ECMAScript 6 utiliza la palabra clave `class`. El cuerpo de la clase contiene propiedades y métodos. 8 | 9 | Ejemplo: 10 | 11 | ```javascript 12 | class Persona { 13 | constructor(nombre, edad) { 14 | this.nombre = nombre; 15 | this.edad = edad; 16 | } 17 | 18 | saludar() { 19 | console.log(`Hola, mi nombre es ${this.nombre}.`); 20 | } 21 | } 22 | 23 | const persona = new Persona("Juan", 25); 24 | console.log(persona.nombre); // Resultado: "Juan" 25 | console.log(persona.edad); // Resultado: 25 26 | persona.saludar(); // Resultado: "Hola, mi nombre es Juan." 27 | ``` 28 | 29 | En este ejemplo, creamos una clase `Persona` con un constructor que define las propiedades `nombre` y `edad`, y un método `saludar` que imprime un mensaje en la consola. Luego, creamos un objeto `persona` de la clase `Persona` utilizando el constructor y accedemos a sus propiedades y método. 30 | 31 | ## Herencia de clases 32 | 33 | Las clases en ECMAScript 6 también admiten la herencia, lo que nos permite crear una nueva clase basada en una clase existente. 34 | 35 | **Ejemplo:** 36 | 37 | ```javascript 38 | class Empleado extends Persona { 39 | constructor(nombre, edad, trabajo) { 40 | super(nombre, edad); 41 | this.trabajo = trabajo; 42 | } 43 | 44 | presentarse() { 45 | console.log(`Hola, mi nombre es ${this.nombre} y trabajo como ${this.trabajo}.`); 46 | } 47 | } 48 | 49 | const empleado = new Empleado("Ana", 30, "desarrollador"); 50 | console.log(empleado.nombre); // Resultado: "Ana" 51 | console.log(empleado.edad); // Resultado: 30 52 | console.log(empleado.trabajo); // Resultado: "desarrollador" 53 | empleado.saludar(); // Resultado: "Hola, mi nombre es Ana." 54 | empleado.presentarse(); // Resultado: "Hola, mi nombre es Ana y trabajo como desarrollador." 55 | ``` 56 | 57 | En este ejemplo, creamos una clase `Empleado` que hereda de la clase `Persona`. El constructor de la clase `Empleado` llama al constructor de la clase `Persona` utilizando la palabra clave `super`, y define una nueva propiedad trabajo. Además, la clase `Empleado` tiene un método `presentarse` que utiliza las propiedades de `Persona` y `Empleado`. Luego, creamos un objeto `empleado` de la clase `Empleado` utilizando el constructor y accedemos a sus propiedades y métodos. 58 | 59 | ## Métodos estáticos 60 | 61 | ECMAScript 6 también nos permite definir métodos estáticos en las clases. Los métodos estáticos son métodos que pertenecen a la clase en sí y no a sus instancias. 62 | 63 | Ejemplo: 64 | 65 | ```javascript 66 | class Utilidades { 67 | static sumar(a, b) { 68 | return a + b; 69 | } 70 | } 71 | 72 | console.log(Utilidades.sumar(2, 3)); // Resultado: 5 73 | ``` 74 | 75 | En este ejemplo, creamos una clase `Utilidades` con un método estático `sumar`. El método `sumar` no utiliza la palabra clave `this`, ya que no pertenece a ninguna instancia de la clase. En su lugar, se llama al método utilizando el nombre de la clase. 76 | 77 | ## Buenas prácticas 78 | 79 | - Utiliza la palabra clave `class` para declarar una clase. 80 | - Utiliza el método `constructor` para inicializar las propiedades de una clase. 81 | - Utiliza la palabra clave `extends` para crear una clase que herede de otra clase. 82 | - Utiliza la palabra clave `super` para llamar al constructor de la clase padre. 83 | - Utiliza la palabra clave `static` para definir métodos estáticos. 84 | - Utiliza la palabra clave `this` para acceder a las propiedades y métodos de una clase. 85 | - Utiliza la palabra clave `new` para crear un objeto de una clase. 86 | - Utiliza la palabra clave `instanceof` para comprobar si un objeto es una instancia de una clase. 87 | -------------------------------------------------------------------------------- /06-objetos-y-clases/09-ejercicios.md: -------------------------------------------------------------------------------- 1 | # Ejercicios Objeto y Clases 2 | 3 | Esta sección contiene ejercicios para practicar los conceptos aprendidos en la sección de Objetos y Clases. 4 | 5 | ## Objeto y Clases 6 | 7 | Los ejercicios de esta sección se basan en el uso de objetos y clases. 8 | 9 | ### Ejercicio 1 - EcmaScript 6 10 | 11 | Crea una función que reciba un array de números y utilice la sintaxis de arrow functions para filtrar solo los números pares y retornar un nuevo array con los resultados. 12 | 13 | **Solución:** 14 | 15 | ```javascript 16 | const filtrarNumerosPares = numeros => numeros.filter(num => num % 2 === 0); 17 | 18 | const numeros = [1, 2, 3, 4, 5, 6]; 19 | console.log(filtrarNumerosPares(numeros)); // Resultado: [2, 4, 6] 20 | ``` 21 | 22 | En esta solución, utilizamos la sintaxis de arrow functions para crear una función `filtrarNumerosPares` que toma un array de `numeros` y utiliza el método `filter` para filtrar solo los números pares. Luego, llamamos a la función con el array `[1, 2, 3, 4, 5, 6]` y mostramos el resultado en la consola. 23 | 24 | **Desafío adicional:** 25 | 26 | Modifica la función para que también reciba un segundo parámetro que indique si se deben filtrar los números impares en lugar de los pares. 27 | 28 | ### Ejercicio 2 - Declaración con let y const 29 | 30 | Crea una función que utilice la sintaxis de `let` y `const` para almacenar un objeto con los datos de una persona, incluyendo su nombre, edad y profesión. Luego, utiliza la sintaxis de string templates para crear un mensaje personalizado que incluya la información de la persona. 31 | 32 | **Solución:** 33 | 34 | ```javascript 35 | const crearMensaje = (nombre, edad, profesion) => { 36 | const persona = { 37 | nombre, 38 | edad, 39 | profesion 40 | }; 41 | 42 | const mensaje = `Hola, mi nombre es ${persona.nombre}, tengo ${persona.edad} años y soy ${persona.profesion}.`; 43 | 44 | return mensaje; 45 | }; 46 | 47 | console.log(crearMensaje("Juan", 25, "Desarrollador")); // Resultado: "Hola, mi nombre es Juan, tengo 25 años y soy Desarrollador." 48 | ``` 49 | 50 | En esta solución, creamos una función `crearMensaje` que toma tres parámetros `nombre`, `edad` y `profesion` y utiliza la sintaxis de `let` y `const` para almacenar un objeto `persona` con los datos. Luego, utiliza la sintaxis de string templates para crear un mensaje personalizado que incluya la información de la persona. Finalmente, llamamos a la función con los valores `"Juan"`, `25` y `"Desarrollador"` y mostramos el resultado en la consola. 51 | 52 | **Desafío adicional:** 53 | 54 | Modifica la función para que permita que los valores de `nombre`, `edad` y profesion sean opcionales y proporciona valores por defecto en caso de que no se proporcionen. 55 | 56 | ### Ejercicio 3 - String templates 57 | 58 | Crea una función que utilice la sintaxis de string templates para crear un mensaje personalizado que incluya la información de una persona, incluyendo su nombre, edad y profesión. 59 | 60 | **Solución:** 61 | 62 | ```javascript 63 | const crearMensaje = (nombre, edad, profesion) => `Hola, mi nombre es ${nombre}, tengo ${edad} años y soy ${profesion}.`; 64 | 65 | console.log(crearMensaje("Juan", 25, "Desarrollador")); // Resultado: "Hola, mi nombre es Juan, tengo 25 años y soy Desarrollador." 66 | ``` 67 | 68 | En esta solución, creamos una función `crearMensaje` que toma tres parámetros nombre, `edad` y `profesion` y utiliza la sintaxis de string templates para crear un mensaje personalizado que incluya la información de la persona. Luego, llamamos a la función con los valores `"Juan"`, `25` y `"Desarrollador"` y mostramos el resultado en la consola. 69 | 70 | **Desafío adicional:** 71 | 72 | Modifica la función para que también incluya la información del país de origen de la persona. Si la persona no tiene un país de origen definido, muestra un mensaje genérico que indique que no se dispone de esta información. 73 | 74 | ### Ejercicio 4 - Objetos 75 | 76 | Crea una función que utilice la sintaxis de objetos para almacenar la información de una persona, incluyendo su nombre, edad y profesión. Luego, utiliza la notación de punto para mostrar cada propiedad del objeto en la consola. 77 | 78 | **Solución:** 79 | 80 | ```javascript 81 | const crearPersona = (nombre, edad, profesion) => { 82 | const persona = { 83 | nombre, 84 | edad, 85 | profesion 86 | }; 87 | 88 | console.log(persona.nombre); 89 | console.log(persona.edad); 90 | console.log(persona.profesion); 91 | }; 92 | 93 | crearPersona("Juan", 25, "Desarrollador"); // Resultado: "Juan", 25, "Desarrollador" 94 | ``` 95 | 96 | En esta solución, creamos una función `crearPersona` que toma tres parámetros `nombre`, `edad` y `profesion` y utiliza la sintaxis de objetos para almacenar la información en un objeto `persona`. Luego, utilizamos la notación de punto para mostrar cada propiedad del objeto en la consola. Finalmente, llamamos a la función con los valores `"Juan"`, `25` y `"Desarrollador"`. 97 | 98 | **Desafío adicional:** 99 | 100 | Modifica la función para que la información de la persona sea ingresada por el usuario a través de una ventana de diálogo. 101 | 102 | ### Ejercicio 5 - Iterando objetos 103 | 104 | Crea una función que utilice la sintaxis de `for...in` para recorrer las propiedades de un objeto y mostrar cada propiedad y su valor en la consola. 105 | 106 | **Solución:** 107 | 108 | ```javascript 109 | const mostrarPropiedades = objeto => { 110 | for(let propiedad in objeto) { 111 | console.log(`${propiedad}: ${objeto[propiedad]}`); 112 | } 113 | }; 114 | 115 | const persona = {nombre: "Juan", edad: 25, profesion: "Desarrollador"}; 116 | mostrarPropiedades(persona); // Resultado: "nombre: Juan", "edad: 25", "profesion: Desarrollador" 117 | ``` 118 | 119 | En esta solución, creamos una función `mostrarPropiedades` que utiliza la sintaxis de `for...in` para recorrer las propiedades de un objeto y mostrar cada propiedad y su valor en la consola. Luego, creamos un objeto `persona` con las propiedades `nombre`, `edad` y `profesion`, y llamamos a la función `mostrarPropiedades` con el objeto `persona`. 120 | 121 | **Desafío adicional:** 122 | 123 | Modifica la función para que también pueda recorrer las propiedades de un objeto anidado y mostrar su valor en la consola. 124 | 125 | ### Ejercicio 6 - Desestructuración de objetos 126 | 127 | Crea una función que utilice la sintaxis de desestructuración de objetos para tomar un objeto con las propiedades `nombre` y `edad`, y mostrar cada propiedad en la consola. 128 | 129 | **Solución:** 130 | 131 | ```javascript 132 | const mostrarPropiedades = ({nombre, edad}) => { 133 | console.log(nombre); 134 | console.log(edad); 135 | }; 136 | 137 | const persona = {nombre: "Juan", edad: 25}; 138 | mostrarPropiedades(persona); // Resultado: "Juan", 25 139 | ``` 140 | 141 | En esta solución, creamos una función `mostrarPropiedades` que utiliza la sintaxis de desestructuración de objetos para tomar un objeto con las propiedades `nombre y edad`, y mostrar cada propiedad en la consola. Luego, creamos un objeto `persona` con las propiedades `nombre y edad`, y llamamos a la función `mostrarPropiedades` con el objeto `persona`. 142 | 143 | **Desafío adicional:** 144 | 145 | Modifica la función para que tenga un segundo parámetro que indique cuál propiedad se debe mostrar en la consola. 146 | 147 | ### Ejercicio 7 - Desestructuración de arrays 148 | 149 | Crea una función que utilice la sintaxis de desestructuración de arrays para tomar un array con tres elementos y mostrar cada elemento en la consola. 150 | 151 | **Solución:** 152 | 153 | ```javascript 154 | const mostrarElementos = ([elemento1, elemento2, elemento3]) => { 155 | console.log(elemento1); 156 | console.log(elemento2); 157 | console.log(elemento3); 158 | }; 159 | 160 | const miArray = ["Manzana", "Banana", "Naranja"]; 161 | mostrarElementos(miArray); // Resultado: "Manzana", "Banana", "Naranja" 162 | ``` 163 | 164 | En esta solución, creamos una función `mostrarElementos` que utiliza la sintaxis de desestructuración de arrays para tomar un array con tres elementos y mostrar cada elemento en la consola. Luego, creamos un array `miArray` con tres elementos y llamamos a la función `mostrarElementos` con el array `miArray`. 165 | 166 | **Desafío adicional:** 167 | 168 | Modifica la función para que tenga un segundo parámetro que indique el número de elementos que se deben mostrar en la consola. 169 | 170 | ### Ejercicio 8 - Clases 171 | 172 | Crea una clase `Persona` con las propiedades `nombre` y `edad`, y un método saludar que muestre un mensaje personalizado en la consola. 173 | 174 | **Solución:** 175 | 176 | ```javascript 177 | class Persona { 178 | constructor(nombre, edad) { 179 | this.nombre = nombre; 180 | this.edad = edad; 181 | } 182 | 183 | saludar() { 184 | console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`); 185 | } 186 | } 187 | 188 | const juan = new Persona("Juan", 25); 189 | juan.saludar(); // Resultado: "Hola, mi nombre es Juan y tengo 25 años." 190 | ``` 191 | 192 | En esta solución, creamos una clase Persona con un constructor que recibe los parámetros nombre y edad y los asigna a las propiedades nombre y edad de la instancia. Luego, creamos un método saludar que muestra un mensaje personalizado en la consola utilizando las propiedades nombre y edad. Finalmente, creamos una instancia de la clase Persona con el nombre juan y la edad 25, y llamamos al método saludar de la instancia. 193 | 194 | **Desafío adicional:** 195 | 196 | Modifica la clase `Persona` para que también tenga una propiedad `profesion`, y modifica el método `saludar` para que incluya la información de la profesión de la persona. 197 | -------------------------------------------------------------------------------- /07-poo/01-programacion-orientada-a-objetos.md: -------------------------------------------------------------------------------- 1 | # Programación orientada a objetos (POO) 2 | 3 | La programación orientada a objetos es un paradigma de programación que se basa en el uso de objetos que interactúan entre sí para resolver un problema. Los objetos pueden tener propiedades y métodos que los definen, y se pueden crear nuevas instancias de un objeto a partir de una clase que lo define. 4 | 5 | **Ejemplo:** 6 | 7 | Supongamos que queremos crear una aplicación que permita almacenar información sobre estudiantes de una escuela. Cada estudiante tendrá un nombre, una edad y una nota promedio. Para ello, podemos crear una clase `Estudiante` que defina las propiedades y métodos que tendrá cada estudiante: 8 | 9 | ```javascript 10 | // Definir la clase Estudiante 11 | class Estudiante { 12 | // Constructor que toma nombre, edad y notaPromedio como argumentos 13 | constructor(nombre, edad, notaPromedio) { 14 | // Asignar los argumentos a las propiedades correspondientes 15 | this.nombre = nombre; 16 | this.edad = edad; 17 | this.notaPromedio = notaPromedio; 18 | } 19 | 20 | // Método para obtener el nombre del estudiante 21 | obtenerNombre() { 22 | return this.nombre; 23 | } 24 | 25 | // Método para obtener la edad del estudiante 26 | obtenerEdad() { 27 | return this.edad; 28 | } 29 | 30 | // Método para obtener la nota promedio del estudiante 31 | obtenerNotaPromedio() { 32 | return this.notaPromedio; 33 | } 34 | 35 | // Método para establecer la nota promedio del estudiante 36 | establecerNotaPromedio(notaPromedio) { 37 | this.notaPromedio = notaPromedio; 38 | } 39 | } 40 | ``` 41 | 42 | En esta clase, creamos un constructor que recibe los parámetros `nombre`, `edad` y `notaPromedio` y los asigna a las propiedades `nombre`, `edad` y `notaPromedio` de la instancia. Luego, creamos métodos que nos permiten obtener y establecer las propiedades de la instancia. 43 | 44 | Para crear un nuevo estudiante, podemos crear una nueva instancia de la clase `Estudiante` y asignarle los valores correspondientes: 45 | 46 | ```javascript 47 | const juan = new Estudiante("Juan", 15, 8.5); 48 | ``` 49 | 50 | En este ejemplo, creamos una instancia de la clase `Estudiante` con el nombre `"Juan"`, la edad `15` y la nota promedio `8.5`. 51 | 52 | Luego, podemos utilizar los métodos de la instancia para obtener o establecer sus propiedades: 53 | 54 | ```javascript 55 | console.log(juan.obtenerNombre()); // Resultado: "Juan" 56 | console.log(juan.obtenerEdad()); // Resultado: 15 57 | console.log(juan.obtenerNotaPromedio()); // Resultado: 8.5 58 | 59 | juan.establecerNotaPromedio(9); 60 | console.log(juan.obtenerNotaPromedio()); // Resultado: 9 61 | ``` 62 | 63 | En este ejemplo, utilizamos los métodos `obtenerNombre`, `obtenerEdad` y `obtenerNotaPromedio` para obtener las propiedades de la instancia `juan`. Luego, utilizamos el método `establecerNotaPromedio` para cambiar la nota promedio de juan y mostramos el resultado en la consola. 64 | 65 | Con la programación orientada a objetos, podemos crear clases y objetos que nos permiten modelar situaciones de la vida real y resolver problemas de manera más eficiente y organizada. 66 | 67 | ## Buenas prácticas 68 | 69 | - Utiliza `const` para declarar variables que no cambiarán su valor y `let` para las que sí lo harán. 70 | - Utiliza `class` para definir clases y `new` para crear nuevas instancias de una clase. 71 | - Utiliza `this` para referirte a la instancia actual de una clase. 72 | - Utiliza `constructor` para definir el constructor de una clase. 73 | - Utiliza `extends` para crear una clase que herede de otra clase. 74 | - Utiliza `super` para llamar al constructor de la clase padre. 75 | - Utiliza `extends` para crear una clase que herede de otra clase. 76 | -------------------------------------------------------------------------------- /07-poo/02-declaracion-de-clases.md: -------------------------------------------------------------------------------- 1 | # Declaración de clases 2 | 3 | La declaración de clases en JavaScript se introdujo en ECMAScript 6 como una forma de definir objetos que contienen propiedades y métodos relacionados. Una clase es una plantilla que se utiliza para crear objetos y define cómo se deben crear y manipular esos objetos. Las clases pueden heredar propiedades y métodos de otras clases, lo que las hace muy útiles para modelar situaciones complejas. 4 | 5 | **Ejemplo:** 6 | 7 | Supongamos que queremos crear una clase `Persona` que defina las propiedades y métodos básicos de una persona, como su nombre y edad. Podemos crear una `clase` utilizando la sintaxis class de la siguiente manera: 8 | 9 | ```javascript 10 | // Definir la clase Persona 11 | class Persona { 12 | // Constructor que toma nombre y edad como argumentos 13 | constructor(nombre, edad) { 14 | // Asignar los argumentos a las propiedades correspondientes 15 | this.nombre = nombre; 16 | this.edad = edad; 17 | } 18 | 19 | // Método para presentarse 20 | presentarse() { 21 | // Imprimir un mensaje en la consola que incluye el nombre y la edad de la persona 22 | console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`); 23 | } 24 | } 25 | ``` 26 | 27 | En esta clase, creamos un constructor que recibe los parámetros `nombre` y `edad` y los asigna a las propiedades `nombre` y `edad` de la instancia. Luego, creamos un método `presentarse` que muestra un mensaje personalizado en la consola utilizando las propiedades `nombre` y `edad`. 28 | 29 | Para crear una nueva instancia de la clase Persona, podemos utilizar la sintaxis new Persona: 30 | 31 | ```javascript 32 | // Crear una nueva instancia de la clase Persona con nombre "Juan" y edad 25 33 | const juan = new Persona("Juan", 25); 34 | ``` 35 | 36 | En este ejemplo, creamos una nueva instancia de la clase `Persona` con el nombre `"Juan"` y la edad `25`. 37 | 38 | Luego, podemos utilizar los métodos de la instancia para acceder y modificar sus propiedades: 39 | 40 | ```javascript 41 | console.log(juan.nombre); // Resultado: "Juan" 42 | console.log(juan.edad); // Resultado: 25 43 | 44 | juan.edad = 26; 45 | console.log(juan.edad); // Resultado: 26 46 | 47 | juan.presentarse(); // Resultado: "Hola, mi nombre es Juan y tengo 26 años." 48 | ``` 49 | 50 | En este ejemplo, utilizamos la notación de punto para acceder a las propiedades `nombre` y `edad` de la instancia `juan`. Luego, utilizamos la misma notación para modificar la propiedad `edad` de `juan` y mostrar el resultado en la consola. Finalmente, llamamos al método `presentarse` de la instancia para mostrar un mensaje personalizado en la consola. 51 | 52 | La declaración de clases en JavaScript nos permite crear objetos complejos con facilidad y organizar nuestro código de una manera clara y estructurada. 53 | 54 | ## Buenas prácticas 55 | 56 | - Las clases deben tener nombres en singular y en mayúscula. 57 | - Las clases deben tener un constructor que reciba los parámetros necesarios para crear una nueva instancia. 58 | - Las clases deben tener métodos que permitan acceder y modificar sus propiedades. 59 | - Las clases deben tener métodos que permitan realizar acciones con sus propiedades. 60 | - Las clases deben tener métodos que permitan acceder y modificar sus propiedades. 61 | - Las clases deben tener métodos que permitan realizar acciones con sus propiedades. 62 | -------------------------------------------------------------------------------- /07-poo/03-abstract-classes.md: -------------------------------------------------------------------------------- 1 | # Abstracción en clases 2 | 3 | La abstracción en clases se refiere a la capacidad de una clase para definir propiedades y métodos que no están relacionados directamente con su funcionalidad principal. Esto puede ayudar a simplificar el código y hacerlo más fácil de mantener y modificar en el futuro. En JavaScript, la abstracción se puede lograr utilizando clases abstractas y herencia. 4 | 5 | **Ejemplo:** 6 | 7 | Supongamos que queremos crear una clase `Animal` que defina las propiedades y métodos básicos de un animal, como su especie y su hábitat. Podemos crear una clase abstracta `Animal` utilizando la sintaxis `class` y la palabra clave `abstract` de la siguiente manera: 8 | 9 | ```javascript 10 | // Definir la clase abstracta Animal 11 | abstract class Animal { 12 | // Constructor que toma especie y habitat como argumentos 13 | constructor(especie, habitat) { 14 | // Asignar los argumentos a las propiedades correspondientes 15 | this.especie = especie; 16 | this.habitat = habitat; 17 | } 18 | 19 | // Método abstracto hacerSonido, que debe ser implementado en subclases de Animal 20 | abstract hacerSonido(); 21 | } 22 | ``` 23 | 24 | En esta clase, creamos un constructor que recibe los parámetros `especie` y `habitat` y los asigna a las propiedades `especie` y `habitat` de la instancia. Luego, creamos un método abstracto `hacerSonido` que no tiene implementación. Esta es la abstracción: la clase define un comportamiento que no está relacionado directamente con su funcionalidad principal. 25 | 26 | Podemos crear clases hijas que extiendan la clase abstracta `Animal` y definan la implementación del método `hacerSonido`. Por ejemplo, podemos crear una clase `Perro` que defina el sonido que hace un perro: 27 | 28 | ```javascript 29 | // Definir la subclase Perro de la clase Animal 30 | class Perro extends Animal { 31 | // Constructor que toma especie y habitat como argumentos y los pasa a super() 32 | constructor(especie, habitat) { 33 | super(especie, habitat); 34 | } 35 | 36 | // Implementar el método abstracto hacerSonido() de la clase Animal 37 | hacerSonido() { 38 | console.log("¡Guau!"); 39 | } 40 | } 41 | ``` 42 | 43 | En esta clase, utilizamos la palabra clave `extends` para indicar que `Perro` es una clase hija de `Animal`. Luego, creamos un constructor que llama al constructor de la clase `Animal` utilizando la palabra clave `super`. Finalmente, definimos la implementación del método `hacerSonido` para que muestre `"¡Guau!"` en la consola. 44 | 45 | Podemos crear una nueva instancia de la clase `Perro` y llamar al método `hacerSonido` para verificar su implementación: 46 | 47 | ```javascript 48 | // Crear una nueva instancia de la subclase Perro con especie "Canis lupus familiaris" y hábitat "Doméstico" 49 | const miPerro = new Perro("Canis lupus familiaris", "Doméstico"); 50 | 51 | // Llamar al método hacerSonido() en miPerro 52 | miPerro.hacerSonido(); // Resultado: "¡Guau!" 53 | ``` 54 | 55 | En este ejemplo, creamos una nueva instancia de la clase `Perro` con la especie `"Canis lupus familiaris"` y el hábitat `"Doméstico"`. Luego, llamamos al método `hacerSonido` de la instancia para mostrar el mensaje `"¡Guau!"` en la consola. 56 | 57 | La abstracción en clases nos permite definir comportamientos abstractos que no están directamente relacionados con la funcionalidad principal de una clase y crear clases hijas que extiendan esta funcionalidad para cumplir con requisitos específicos. Esto hace que nuestro código sea más modular y fácil de mantener en el futuro. 58 | -------------------------------------------------------------------------------- /07-poo/04-herencia.md: -------------------------------------------------------------------------------- 1 | # Herencia en clases 2 | 3 | La herencia en JavaScript se refiere a la capacidad de una clase de heredar propiedades y métodos de otra clase. Esto nos permite definir una clase base que contenga la funcionalidad común a varias clases y luego crear clases hijas que extiendan esta funcionalidad para cumplir con requisitos específicos. 4 | 5 | **Ejemplo:** 6 | 7 | Supongamos que queremos crear una clase `Persona` que defina las propiedades y métodos básicos de una persona, como su nombre y edad. Podemos crear una clase `Persona` utilizando la sintaxis `class` de la siguiente manera: 8 | 9 | ```javascript 10 | // Definir la clase Persona 11 | class Persona { 12 | // Constructor que toma nombre y edad como argumentos 13 | constructor(nombre, edad) { 14 | // Asignar los argumentos a las propiedades correspondientes 15 | this.nombre = nombre; 16 | this.edad = edad; 17 | } 18 | 19 | // Método para presentarse 20 | presentarse() { 21 | // Imprimir un mensaje en la consola que incluye el nombre y la edad de la persona 22 | console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`); 23 | } 24 | } 25 | ``` 26 | 27 | En esta clase, creamos un constructor que recibe los parámetros `nombre` y `edad` y los asigna a las propiedades `nombre` y `edad` de la instancia. Luego, creamos un método `presentarse` que muestra un mensaje personalizado en la consola utilizando las propiedades `nombre` y `edad`. 28 | 29 | Podemos crear una nueva instancia de la clase `Persona` y llamar al método `presentarse` para verificar su implementación: 30 | 31 | ```javascript 32 | // Crear una nueva instancia de la clase Persona con nombre "Juan" y edad 25 33 | const juan = new Persona("Juan", 25); 34 | 35 | // Llamar al método presentarse() en juan 36 | juan.presentarse(); // Resultado: "Hola, mi nombre es Juan y tengo 25 años." 37 | ``` 38 | 39 | En este ejemplo, creamos una nueva instancia de la clase `Persona` con el nombre `"Juan"` y la edad `25`. Luego, llamamos al método `presentarse` de la instancia para mostrar el mensaje personalizado en la consola. 40 | 41 | Supongamos ahora que queremos crear una clase `Estudiante` que extienda la clase `Persona` y defina una propiedad adicional, como su nota promedio. Podemos crear una clase hija `Estudiante` utilizando la sintaxis `extends` de la siguiente manera: 42 | 43 | ```javascript 44 | // Definir la subclase Estudiante de la clase Persona 45 | class Estudiante extends Persona { 46 | // Constructor que toma nombre, edad y notaPromedio como argumentos y los pasa a super() 47 | constructor(nombre, edad, notaPromedio) { 48 | super(nombre, edad); 49 | this.notaPromedio = notaPromedio; 50 | } 51 | 52 | // Método para mostrar la nota promedio del estudiante 53 | mostrarNota() { 54 | console.log(`Mi nota promedio es ${this.notaPromedio}.`); 55 | } 56 | } 57 | ``` 58 | 59 | En esta clase, utilizamos la palabra clave `extends` para indicar que `Estudiante` es una clase hija de `Persona`. Luego, creamos un constructor que llama al constructor de la clase `Persona` utilizando la palabra clave `super` y asigna la propiedad `notaPromedio` a la instancia. Finalmente, creamos un método `mostrarNota` que muestra un mensaje personalizado en la consola utilizando la propiedad `notaPromedio`. 60 | 61 | Podemos crear una nueva instancia de la clase `Estudiante` y llamar a los métodos de ambas clases para verificar su implementación: 62 | 63 | ```javascript 64 | // Crear una nueva instancia de la subclase Estudiante con nombre "Maria", edad 20 y nota promedio 9.5 65 | const maria = new Estudiante("Maria", 20, 9.5); 66 | 67 | // Llamar al método presentarse() en maria 68 | maria.presentarse(); // Resultado: "Hola, mi nombre es Maria y tengo 20 años." 69 | 70 | // Llamar al método mostrarNota() en maria 71 | maria.mostrarNota(); // Resultado: "Mi nota promedio es 9.5." 72 | ``` 73 | 74 | En este ejemplo, creamos una nueva instancia de la clase `Estudiante` con el nombre `"Maria"`, la edad `20` y la nota promedio `9.5`. Luego, llamamos a los métodos presentarse y mostrarNota de la instancia para mostrar los mensajes personalizados en la consola. 75 | 76 | ## Buenas prácticas 77 | 78 | - Utilizar la palabra clave `extends` para definir una clase hija. 79 | - Utilizar la palabra clave `super` para llamar al constructor de la clase padre. 80 | - Utilizar la palabra clave `super` para llamar a los métodos de la clase padre. 81 | -------------------------------------------------------------------------------- /07-poo/05-encapsulamiento.md: -------------------------------------------------------------------------------- 1 | # Encapsulamiento en clases 2 | 3 | El encapsulamiento en JavaScript se refiere a la capacidad de una clase de ocultar sus propiedades y métodos internos y exponer solo los que se necesitan externamente. Esto puede ayudar a proteger la integridad del objeto y evitar que se acceda y modifique sus propiedades y métodos de manera inadecuada. En JavaScript, el encapsulamiento se puede lograr utilizando los modificadores de acceso `public`, `private` y `protected`. 4 | 5 | **Ejemplo:** 6 | 7 | Supongamos que queremos crear una clase `CuentaBancaria` que defina las propiedades y métodos básicos de una cuenta bancaria, como su saldo y su número de cuenta. Sin embargo, queremos proteger el saldo de la cuenta de ser accedido y modificado directamente. Podemos crear una clase `CuentaBancaria` utilizando la sintaxis `class` y la palabra clave `private` para proteger el saldo de la cuenta: 8 | 9 | ```javascript 10 | // Definir la clase CuentaBancaria 11 | class CuentaBancaria { 12 | #saldo = 0; 13 | 14 | // Constructor que toma numeroCuenta como argumento 15 | constructor(numeroCuenta) { 16 | // Asignar el argumento a la propiedad numeroCuenta 17 | this.numeroCuenta = numeroCuenta; 18 | } 19 | 20 | // Getter para la propiedad privada #saldo 21 | get saldo() { 22 | return this.#saldo; 23 | } 24 | 25 | // Método para depositar una cantidad en la cuenta 26 | depositar(cantidad) { 27 | this.#saldo += cantidad; 28 | console.log(`Se han depositado $${cantidad} en la cuenta.`); 29 | } 30 | 31 | // Método para retirar una cantidad de la cuenta 32 | retirar(cantidad) { 33 | if (cantidad > this.#saldo) { 34 | console.log("No hay suficiente saldo para realizar la operación."); 35 | } else { 36 | this.#saldo -= cantidad; 37 | console.log(`Se han retirado $${cantidad} de la cuenta.`); 38 | } 39 | } 40 | } 41 | ``` 42 | 43 | En esta clase, creamos una propiedad `#saldo` utilizando la sintaxis `#nombrePropiedad` y la palabra clave `private`.Esto hace que la propiedad `#saldo` sea inaccesible desde fuera de la clase. Luego, creamos un método `get` llamado `saldo`que devuelve el valor de la propiedad `#saldo`. 44 | 45 | También creamos dos métodos `depositar` y `retirar` que modifican la propiedad `#saldo` de la instancia. Si la cantidad a retirar es mayor que el saldo disponible, se muestra un mensaje de error en la consola. 46 | 47 | Para crear una nueva instancia de la clase `CuentaBancaria`, podemos utilizar la sintaxis `new CuentaBancaria`: 48 | 49 | ```javascript 50 | // Crear una nueva instancia de la clase CuentaBancaria con numeroCuenta "123456789" 51 | const miCuenta = new CuentaBancaria("123456789"); 52 | ``` 53 | 54 | En este ejemplo, creamos una nueva instancia de la clase `CuentaBancaria` con el número de cuenta `"123456789"`. 55 | 56 | Podemos utilizar los métodos de la instancia para depositar y retirar fondos: 57 | 58 | ```javascript 59 | // Depositar 1000 en miCuenta 60 | miCuenta.depositar(1000); // Resultado: "Se han depositado $1000 en la cuenta." 61 | 62 | // Mostrar el saldo actualizado de miCuenta 63 | console.log(miCuenta.saldo); // Resultado: 1000 64 | 65 | // Retirar 500 de miCuenta 66 | miCuenta.retirar(500); // Resultado: "Se han retirado $500 de la cuenta." 67 | 68 | // Mostrar el saldo actualizado de miCuenta 69 | console.log(miCuenta.saldo); // Resultado: 500 70 | 71 | // Intentar retirar 1000 de miCuenta, que no es posible debido al saldo insuficiente 72 | miCuenta.retirar(1000); // Resultado: "No hay suficiente saldo para realizar la operación." 73 | ``` 74 | 75 | En este ejemplo, utilizamos los métodos `depositar` y `retirar` de la instancia para modificar su propiedad `#saldo`. Luego, utilizamos el método `get` para obtener el valor actual del saldo y lo mostramos en la consola. Finalmente, intentamos retirar más dinero del que hay disponible en la cuenta y se muestra un mensaje de error en la consola. 76 | 77 | El encapsulamiento en JavaScript nos permite proteger las propiedades y métodos internos de una clase y exponer solo los que necesitamos externamente. Esto ayuda a mantener la integridad del objeto y evitar que se acceda y modifique sus propiedades y métodos de manera inadecuada. 78 | 79 | ## Buenas prácticas 80 | 81 | - Utiliza la palabra clave `private` para proteger las propiedades y métodos internos de una clase. 82 | - Utiliza la palabra clave `public` para exponer las propiedades y métodos externamente. 83 | - Utiliza la palabra clave `protected` para exponer las propiedades y métodos a las clases hijas. 84 | -------------------------------------------------------------------------------- /07-poo/06-polimorfismo.md: -------------------------------------------------------------------------------- 1 | # Polimorfismo en clases 2 | 3 | El polimorfismo en JavaScript se refiere a la capacidad de un objeto de tomar varias formas y comportarse de manera diferente según el contexto en el que se utilice. Esto nos permite escribir código más flexible y reutilizable, ya que un objeto puede ser utilizado en diferentes contextos sin necesidad de conocer su tipo específico. 4 | 5 | **Ejemplo:** 6 | 7 | Supongamos que queremos crear una clase `Figura` que defina las propiedades y métodos básicos de una figura geométrica, como su área y su perímetro. Podemos crear una clase `Figura` utilizando la sintaxis `class` de la siguiente manera: 8 | 9 | ```javascript 10 | // Definir la clase Figura 11 | class Figura { 12 | constructor() {} 13 | 14 | // Métodos abstractos que deben ser implementados por cualquier subclase 15 | calcularArea() {} 16 | calcularPerimetro() {} 17 | } 18 | ``` 19 | 20 | En esta clase, creamos un constructor vacío y dos métodos `calcularArea` y `calcularPerimetro` que no tienen implementación. 21 | 22 | Podemos crear dos clases hijas `Rectangulo` y `Circulo` que extiendan la clase `Figura` y definan la implementación de estos métodos para calcular el área y el perímetro de un rectángulo y un círculo respectivamente: 23 | 24 | ```javascript 25 | // Definir la subclase Rectangulo de la clase Figura 26 | class Rectangulo extends Figura { 27 | constructor(base, altura) { 28 | super(); 29 | this.base = base; 30 | this.altura = altura; 31 | } 32 | 33 | calcularArea() { 34 | return this.base * this.altura; 35 | } 36 | 37 | calcularPerimetro() { 38 | return 2 * this.base + 2 * this.altura; 39 | } 40 | } 41 | 42 | // Definir la subclase Circulo de la clase Figura 43 | class Circulo extends Figura { 44 | constructor(radio) { 45 | super(); 46 | this.radio = radio; 47 | } 48 | 49 | calcularArea() { 50 | return Math.PI * this.radio ** 2; 51 | } 52 | 53 | calcularPerimetro() { 54 | return 2 * Math.PI * this.radio; 55 | } 56 | } 57 | ``` 58 | 59 | En estas clases, utilizamos la palabra clave `extends` para indicar que `Rectangulo` y `Circulo` son clases hijas de `Figura`. Luego, creamos un constructor en cada clase que llama al constructor de la clase `Figura` utilizando la palabra clave `super` y asigna las propiedades necesarias a la instancia. 60 | 61 | Finalmente, definimos la implementación de los métodos `calcularArea` y `calcularPerimetro` de cada clase para calcular el área y el perímetro de un rectángulo o un círculo respectivamente. 62 | 63 | Podemos crear una instancia de cada clase y llamar a sus métodos para verificar su implementación: 64 | 65 | ```javascript 66 | // Crear una instancia de la subclase Rectangulo 67 | const miRectangulo = new Rectangulo(5, 10); 68 | // Mostrar el área y el perímetro de miRectangulo 69 | console.log(miRectangulo.calcularArea()); // Resultado: 50 70 | console.log(miRectangulo.calcularPerimetro()); // Resultado: 30 71 | 72 | // Crear una instancia de la subclase Circulo 73 | const miCirculo = new Circulo(4); 74 | // Mostrar el área y el perímetro de miCirculo 75 | console.log(miCirculo.calcularArea()); // Resultado: 50.26548245743669 76 | console.log(miCirculo.calcularPerimetro()); // Resultado: 25.132741228718345 77 | ``` 78 | 79 | En este ejemplo, creamos una instancia de la clase `Rectangulo` con una base de `5` y una altura de `10`. Luego, llamamos a los métodos `calcularArea` y `calcularPerimetro` de la instancia para mostrar el área y el perímetro del rectángulo en la consola. 80 | 81 | También creamos una instancia de la clase `Circulo` con un radio de `4` y llamamos a los métodos `calcularArea` y `calcularPerimetro` de la instancia para mostrar el área y el perímetro del círculo en la consola. 82 | 83 | En este ejemplo, utilizamos el polimorfismo para crear dos clases hijas que extienden la funcionalidad de la clase `Figura` y definen su propia implementación de los métodos `calcularArea` y `calcularPerimetro`. Esto nos permite utilizar estas clases hijas en diferentes contextos, como en una aplicación de dibujo o en un programa de cálculo de geometría, sin necesidad de conocer su tipo específico. 84 | 85 | ## Buenas prácticas 86 | 87 | - Utiliza el polimorfismo para crear clases hijas que extiendan la funcionalidad de una clase padre. 88 | - Utiliza el polimorfismo para crear clases hijas que implementen su propia versión de los métodos de una clase padre. 89 | -------------------------------------------------------------------------------- /07-poo/07-ejercicios.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brayandiazc/aprendiendo-javaScript/b63ab5b6ee4b3c6aadd8d14afa9f8f7661980add/07-poo/07-ejercicios.md -------------------------------------------------------------------------------- /08-dom/01-dom.md: -------------------------------------------------------------------------------- 1 | # Dom 2 | 3 | El DOM (Document Object Model) es una representación en forma de árbol de la estructura de un documento HTML (o XML). El DOM proporciona una interfaz que permite acceder y manipular los elementos y contenido de un documento web. 4 | 5 | En JavaScript, podemos interactuar con el DOM para realizar diversas tareas, como acceder a elementos HTML, modificar su contenido, agregar o eliminar elementos, cambiar estilos y manejar eventos. 6 | 7 | A continuación, te mostraré un ejemplo básico de cómo acceder y manipular el DOM utilizando JavaScript: 8 | 9 | ```html 10 | 11 | 12 | 13 | 14 | DOM 15 | 16 | 17 | 18 |

Título

19 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.

20 | 21 | 22 | 36 | 37 | 38 | ``` 39 | 40 | En este ejemplo, accedemos a un elemento HTML utilizando el método `getElementById` y lo almacenamos en una variable llamada `titulo`. Luego, modificamos el contenido del elemento utilizando la propiedad `textContent`. Finalmente, agregamos un evento al botón utilizando el método `addEventListener`. 41 | 42 | Aqui podemos ver otro ejemplo de como acceder y manipular el DOM utilizando JavaScript: 43 | 44 | ```html 45 | 46 | 47 | 48 | Manipulación del DOM 49 | 50 | 51 |

¡Hola, Mundo!

52 |

Este es un párrafo de ejemplo.

53 | 54 | 77 | 78 | 79 | ``` 80 | 81 | En este ejemplo, utilizamos JavaScript dentro de la etiqueta ` 27 | 28 | 29 | ``` 30 | 31 | En este ejemplo, utilizamos JavaScript dentro de la etiqueta ` 90 | 91 | 92 | ``` 93 | 94 | En este ejemplo, utilizamos diferentes métodos para seleccionar elementos del DOM: 95 | 96 | - `getElementById`: Utilizamos `document.getElementById('titulo')` para seleccionar el elemento `

` con el id "titulo". El elemento seleccionado se almacena en la variable `titulo`. 97 | 98 | - `getElementsByClassName`: Utilizamos `document.getElementsByClassName('parrafo')` para seleccionar todos los elementos con la clase "parrafo". Los elementos seleccionados se almacenan en la variable `parrafos`. 99 | 100 | - `getElementsByTagName`: Utilizamos `document.getElementsByTagName('li')` para seleccionar todos los elementos `
  • `. Los elementos seleccionados se almacenan en la variable `elementosLista`. 101 | 102 | - `querySelector`: Utilizamos `document.querySelector('div p')` para seleccionar el primer elemento `

    ` que se encuentra dentro de un elemento `

    `. El elemento seleccionado se almacena en la variable `texto1`. 103 | 104 | - `querySelectorAll`: Utilizamos `document.querySelectorAll('p')` para seleccionar todos los elementos `

    ` en el documento. Los elementos seleccionados se almacenan en la variable `todosLosParrafos`. 105 | 106 | En cada caso, utilizamos `console.log` para mostrar los elementos seleccionados en la consola del navegador. 107 | 108 | Ten en cuenta que estos métodos de selección de elementos te permiten interactuar y manipular los elementos del DOM de diferentes formas. Puedes acceder a sus propiedades, modificar su contenido, aplicar estilos, agregar o eliminar elementos, y mucho más. 109 | 110 | Estos son solo algunos ejemplos de cómo seleccionar elementos del DOM en JavaScript. Además de los métodos mencionados, existen otros métodos y selectores más avanzados que permiten una selección más precisa y flexible. 111 | 112 | Recuerda que al seleccionar elementos del DOM, es importante tener en cuenta la estructura del documento HTML y utilizar selectores adecuados para acceder a los elementos deseados. También puedes utilizar las referencias almacenadas en variables para acceder a los elementos seleccionados y manipularlos de manera más eficiente. 113 | -------------------------------------------------------------------------------- /08-dom/04-crear-elementos.md: -------------------------------------------------------------------------------- 1 | # Crear elementos 2 | 3 | Para crear elementos en el DOM utilizando JavaScript, podemos utilizar el método `createElement`. Este método nos permite crear un nuevo elemento HTML con la etiqueta especificada y luego podemos agregarlo al DOM utilizando métodos como `appendChild` o `insertBefore`. 4 | 5 | A continuación, te mostraré un ejemplo de cómo crear elementos en el DOM: 6 | 7 | ```html 8 | 9 | 10 | 11 | Creación de elementos en JavaScript 12 | 13 | 14 |

    15 | 16 | 29 | 30 | 31 | ``` 32 | 33 | En este ejemplo, utilizamos JavaScript dentro de la etiqueta ` 116 | ``` 117 | 118 | En este caso, se utiliza `addEventListener` para adjuntar el evento `click` al botón y ejecutar la función `miFuncion()` cuando se hace clic en el botón. 119 | 120 | En el siguiente ejemplo utilizaremos algunos de los eventos del DOM que hemos visto hasta ahora: 121 | 122 | ```html 123 | 124 | 125 | 126 | Eventos del DOM 127 | 128 | 129 |

    Eventos del DOM

    130 | 131 | 132 |

    Pasa el mouse aquí

    133 | 134 | 135 | 152 | 153 | 154 | ``` 155 | 156 | En este ejemplo, se utilizan diferentes eventos del DOM: 157 | 158 | - `onchange`: Se utiliza en un campo de entrada de texto (``) con el atributo `onchange="mostrarMensaje()"`. Cuando el valor del campo de entrada cambia y se pierde el enfoque del campo, se ejecuta la función `mostrarMensaje()`. En este caso, la función muestra un mensaje en la consola indicando que el valor del input ha cambiado. 159 | 160 | - `onclick`: Se utiliza en un botón (` 15 | 16 | 26 | 27 | 28 | ``` 29 | 30 | En este ejemplo, utilizamos JavaScript dentro de la etiqueta ` 100 | 101 | 102 | ``` 103 | 104 | En este ejemplo, utilizamos diferentes métodos para manipular atributos de elementos del DOM: 105 | 106 | - `getAttribute`: En la función `mostrarAtributo()`, utilizamos `getAttribute('src')` para obtener el valor del atributo `src` de la imagen. Luego, mostramos el valor del atributo en la consola. 107 | 108 | - `setAttribute`: En la función `cambiarAtributo()`, utilizamos `setAttribute('src', 'nueva-imagen.jpg')` para cambiar el valor del atributo `src` de la imagen por "nueva-imagen.jpg". También utilizamos `setAttribute('alt', 'Nueva Imagen')` para cambiar el valor del atributo `alt` de la imagen. Luego, mostramos un mensaje en la consola indicando que los atributos han sido cambiados. 109 | 110 | - `hasAttribute`: En la función `verificarAtributo()`, utilizamos `hasAttribute('alt')` para verificar si la imagen tiene el atributo `alt`. Mostramos un mensaje en la consola indicando si la imagen tiene o no el atributo. 111 | 112 | - `removeAttribute`: En la función `eliminarAtributo()`, utilizamos `removeAttribute('width')` y `removeAttribute('height')` para eliminar los atributos `width` y `height` de la imagen. Mostramos un mensaje en la consola indicando que los atributos han sido eliminados. 113 | 114 | Puedes utilizar estos métodos para acceder, modificar, verificar y eliminar atributos de elementos del DOM según tus necesidades. Recuerda que los nombres de los atributos deben coincidir exactamente con los nombres utilizados en el código HTML. 115 | 116 | Recuerda que los atributos también pueden tener eventos asociados. Si deseas agregar o eliminar eventos específicos, puedes utilizar los métodos `addEventListener` y `removeEventListener`, respectivamente. 117 | 118 | La manipulación de atributos en JavaScript es útil cuando necesitas cambiar dinámicamente los valores de los atributos de los elementos del DOM. Esto puede ser útil para actualizar imágenes, cambiar textos alternativos, actualizar enlaces, etc. 119 | 120 | Es importante tener en cuenta que algunos atributos, como `id` y `class`, también tienen propiedades correspondientes en los elementos del DOM. Puedes acceder y modificar estas propiedades directamente en lugar de utilizar los métodos `getAttribute` y `setAttribute`. 121 | 122 | Recuerda que al manipular atributos, debes tener en cuenta la estructura y la semántica adecuada de tu documento HTML y asegurarte de seguir las buenas prácticas para mantener un código limpio y mantenible. 123 | -------------------------------------------------------------------------------- /08-dom/08-localstorage.md: -------------------------------------------------------------------------------- 1 | # LocalStorage 2 | 3 | El Local Storage es una característica del navegador web que permite almacenar datos en el dispositivo del usuario de forma persistente. Es una forma de almacenamiento de datos clave-valor similar a las cookies, pero con una mayor capacidad y sin enviar los datos al servidor con cada solicitud. 4 | 5 | En JavaScript, puedes utilizar el objeto `localStorage` para interactuar con el Local Storage y almacenar y recuperar datos en él. A continuación, te muestro algunos ejemplos de cómo utilizar el Local Storage: 6 | 7 | ## Almacenar datos en el Local Storage 8 | 9 | Para almacenar datos en el Local Storage, utilizamos la propiedad `localStorage` seguida del método `setItem`. Este método recibe dos argumentos: la clave (key) y el valor (value) que deseamos almacenar. 10 | 11 | ```javascript 12 | localStorage.setItem('nombre', 'John'); 13 | localStorage.setItem('edad', '30'); 14 | ``` 15 | 16 | En este ejemplo, almacenamos dos pares clave-valor en el Local Storage. La clave `'nombre'` tiene el valor `'John'` y la clave `'edad'` tiene el valor `'30'`. 17 | 18 | ## Recuperar datos del Local Storage 19 | 20 | Para recuperar datos del Local Storage, utilizamos el método `getItem`, que recibe la clave del dato que queremos obtener y devuelve su valor. 21 | 22 | ```javascript 23 | const nombre = localStorage.getItem('nombre'); 24 | const edad = localStorage.getItem('edad'); 25 | 26 | console.log(nombre); // Resultado: 'John' 27 | console.log(edad); // Resultado: '30' 28 | ``` 29 | 30 | En este ejemplo, recuperamos los valores almacenados en el Local Storage utilizando las claves `'nombre'` y `'edad'`. 31 | 32 | ## Eliminar datos del Local Storage 33 | 34 | Para eliminar datos del Local Storage, utilizamos el método `removeItem`, que recibe la clave del dato que queremos eliminar. 35 | 36 | ```javascript 37 | localStorage.removeItem('nombre'); 38 | ``` 39 | 40 | En este ejemplo, eliminamos el dato almacenado en el Local Storage con la clave `'nombre'`. 41 | 42 | ## Borrar todos los datos del Local Storage 43 | 44 | Si deseas eliminar todos los datos almacenados en el Local Storage, puedes utilizar el método `clear`. 45 | 46 | ```javascript 47 | localStorage.clear(); 48 | ``` 49 | 50 | Este método eliminará todos los datos almacenados en el Local Storage. 51 | 52 | Es importante tener en cuenta que los datos almacenados en el Local Storage están disponibles incluso después de cerrar y volver a abrir el navegador. Sin embargo, los datos del Local Storage son específicos del dominio y solo pueden ser accedidos por el mismo dominio que los almacenó. 53 | 54 | ```html 55 | 56 | 57 | 58 | Ejemplo de Local Storage 59 | 60 | 61 |

    Local Storage Example

    62 | 63 | 64 |

    65 | 66 | 81 | 82 | 83 | ``` 84 | 85 | En este ejemplo, se muestra una página web simple que tiene un campo de entrada de texto para ingresar un nombre, un botón para guardar el nombre en el Local Storage y un párrafo donde se muestra un mensaje relacionado con el uso del Local Storage. 86 | 87 | - Cuando se hace clic en el botón "Guardar", se obtiene el valor del campo de entrada de texto y se almacena en el Local Storage utilizando `localStorage.setItem`. 88 | - Cuando la página se carga por primera vez (utilizando el evento `DOMContentLoaded`), se verifica si hay un nombre guardado en el Local Storage utilizando `localStorage.getItem`. Si hay un nombre guardado, se muestra en el campo de entrada de texto y se muestra un mensaje en el párrafo indicando que se cargó desde el Local Storage. 89 | 90 | De esta manera, cada vez que se ingrese un nombre y se haga clic en el botón "Guardar", el nombre se almacenará en el Local Storage y se mantendrá incluso si la página se actualiza o se cierra y se vuelve a abrir. 91 | 92 | El Local Storage es útil para almacenar datos de forma persistente en el navegador, como preferencias del usuario, estado de la aplicación, datos de inicio de sesión, entre otros. Sin embargo, ten en cuenta que el Local Storage tiene una capacidad limitada y no debe ser utilizado para almacenar información sensible o excesivamente grande. 93 | 94 | Recuerda utilizar el Local Storage de manera responsable y limpiar los datos innecesarios para mantener un buen rendimiento y una experiencia de usuario satisfactoria. 95 | -------------------------------------------------------------------------------- /08-dom/09-elementos-dinamicos.md: -------------------------------------------------------------------------------- 1 | # Elementos dinámicos 2 | 3 | Elementos dinámicos se refiere a la creación y manipulación de elementos HTML de forma dinámica utilizando JavaScript. En lugar de tener todos los elementos HTML predefinidos en el archivo HTML, podemos utilizar JavaScript para crear, agregar, modificar y eliminar elementos HTML en tiempo de ejecución, según las necesidades de nuestra aplicación. 4 | 5 | Aquí tienes un ejemplo que muestra cómo crear dinámicamente un elemento `

    ` y agregarlo al documento: 6 | 7 | ```html 8 | 9 | 10 | 11 | Elementos Dinámicos 12 | 13 | 14 |

    Elementos Dinámicos

    15 | 16 | 17 | 24 | 25 | 26 | ``` 27 | 28 | En este ejemplo, tenemos un botón "Agregar Párrafo" que, al hacer clic, ejecuta la función `agregarParrafo()`. Esta función utiliza el método `createElement` para crear dinámicamente un elemento `

    `. Luego, establece el contenido de texto del párrafo utilizando la propiedad `textContent`. Finalmente, utilizamos `appendChild` para agregar el nuevo párrafo como un hijo del elemento ``, lo que resulta en la visualización del párrafo en la página. 29 | 30 | Este es solo un ejemplo básico, pero en JavaScript puedes realizar muchas más operaciones dinámicas con elementos HTML. Puedes agregar atributos, aplicar estilos, adjuntar eventos, modificar clases y estructuras, y mucho más. La manipulación dinámica de elementos HTML es especialmente útil cuando necesitas crear contenido de forma dinámica, actualizar la interfaz de usuario en respuesta a acciones del usuario o datos cambiantes, y crear aplicaciones interactivas y dinámicas. 31 | -------------------------------------------------------------------------------- /08-dom/10-ejercicios.md: -------------------------------------------------------------------------------- 1 | # Ejercicios DOM 2 | 3 | Esta sección contiene ejercicios para practicar los conceptos aprendidos en la sección de DOM. 4 | 5 | ## DOM 6 | 7 | Los ejercicios de esta sección se basan en el uso de DOM. 8 | 9 | ### Ejercicio 1 - Crear elementos 10 | 11 | Crea una función que reciba un array de strings como parámetro y utilice la función `map` y la sintaxis de string templates para devolver un nuevo array donde cada elemento corresponda a la siguiente cadena: "El elemento `n` es `nombre`", donde `n` es la posición del elemento en el array y `nombre` es el valor del elemento. 12 | 13 | **Solución:** 14 | 15 | ```javascript 16 | const crearCadenas = nombres => nombres.map((nombre, index) => `El elemento ${index} es ${nombre}`); 17 | 18 | const nombres = ["Pedro", "Pablo", "María", "Juan"]; 19 | 20 | console.log(crearCadenas(nombres)); // Resultado: ["El elemento 0 es Pedro", "El elemento 1 es Pablo", "El elemento 2 es María", "El elemento 3 es Juan"] 21 | ``` 22 | 23 | En esta solución, creamos una función `crearCadenas` que toma un array de `nombres` y utiliza la función `map` y la sintaxis de string templates para devolver un nuevo array donde cada elemento corresponda a la siguiente cadena: "El elemento `n` es `nombre`", donde `n` es la posición del elemento en el array y `nombre` es el valor del elemento. Luego, llamamos a la función con el array `["Pedro", "Pablo", "María", "Juan"]` y mostramos el resultado en la consola. 24 | 25 | **Desafío adicional:** 26 | 27 | Modifica la función para que también reciba un segundo parámetro que indique el nombre de la etiqueta HTML que se utilizará para crear los elementos. 28 | 29 | ### Ejercicio 2 - Crear elementos 30 | 31 | Crea una función que reciba un array de strings como parámetro y utilice la función `map` y la sintaxis de string templates para devolver un nuevo array donde cada elemento corresponda a la siguiente cadena: "El elemento `n` es `nombre`", donde `n` es la posición del elemento en el array y `nombre` es el valor del elemento. El array devuelto debe contener elementos `

  • ` con las cadenas correspondientes como contenido. 32 | 33 | **Solución:** 34 | 35 | ```javascript 36 | const crearCadenas = nombres => nombres.map((nombre, index) => `
  • El elemento ${index} es ${nombre}
    • `); 37 | 38 | const nombres = ["Pedro", "Pablo", "María", "Juan"]; 39 | 40 | console.log(crearCadenas(nombres)); // Resultado: ["
  • El elemento 0 es Pedro
    • ", "
  • El elemento 1 es Pablo
    • ", "
  • El elemento 2 es María
    • ", "
  • El elemento 3 es Juan
    • "] 41 | ``` 42 | 43 | En esta solución, creamos una función `crearCadenas` que toma un array de `nombres` y utiliza la función `map` y la sintaxis de string templates para devolver un nuevo array donde cada elemento corresponda a la siguiente cadena: "El elemento `n` es `nombre`", donde `n` es la posición del elemento en el array y `nombre` es el valor del elemento. Luego, llamamos a la función con el array `["Pedro", "Pablo", "María", "Juan"]` y mostramos el resultado en la consola. 44 | 45 | **Desafío adicional:** 46 | 47 | Modifica la función para que también reciba un segundo parámetro que indique el nombre de la etiqueta HTML que se utilizará para crear los elementos. 48 | 49 | ### Ejercicio 3 - Botones con acciones 50 | 51 | Agregar 3 botones en el HTML que permitan hacer lo siguiente: 52 | 53 | - El primero agrega un encabezado (H1) en el documento. 54 | - En ambos casos tanto al h1 como a la etiqueta p agrega un id único. 55 | - El segundo agrega un párrafo (P) en el documento. 56 | - El tercero ejecutará un alert con un mensaje. 57 | 58 | **Solución:** 59 | 60 | ```html 61 | 62 | 63 | 64 | Botones con acciones 65 | 66 | 67 |

    68 |

    69 | 70 | 71 | 72 | 73 | 74 | 91 | 92 | 93 | ``` 94 | 95 | En este ejemplo, hemos agregado los 3 botones requeridos: 96 | 97 | 1. El primer botón, al hacer clic en él, ejecuta la función `agregarEncabezado()`. Esta función obtiene la referencia al elemento `

    ` utilizando `getElementById` y establece el contenido de texto y un id único. En este caso, establecimos el texto del encabezado como "Este es un encabezado" y el id como "encabezado". 98 | 2. El segundo botón, al hacer clic en él, ejecuta la función `agregarParrafo()`. Esta función obtiene la referencia al elemento `

    ` utilizando `getElementById` y establece el contenido de texto y un id único. En este caso, establecimos el texto del párrafo como "Este es un párrafo" y el id como "contenido". 99 | 3. El tercer botón, al hacer clic en él, ejecuta la función `mostrarAlerta()`. Esta función simplemente muestra un mensaje de alerta con el texto "Este es un mensaje de alerta". 100 | 101 | Espero que este ejemplo te ayude a comprender cómo agregar botones en HTML con acciones específicas utilizando JavaScript. 102 | 103 | ### Ejercicio 4 - Manipulación de div con botones 104 | 105 | Agregar un div de tamaño 300 x 300 px y 3 botones al HTML y cada botón tendrá un evento que realizará lo siguiente: 106 | 107 | - El primero cambiará el fondo del div a color rojo. 108 | - El segundo le cambiará el tamaño al div a 500 x 500 px. 109 | - El tercero le asignará un borde al div 110 | 111 | **Solución:** 112 | 113 | ```html 114 | 115 | 116 | 117 | Manipulación de div con botones 118 | 125 | 126 | 127 |

    128 | 129 | 130 | 131 | 132 | 133 | 149 | 150 | 151 | ``` 152 | 153 | En este ejemplo, hemos agregado un div con un tamaño inicial de 300x300 px y un color de fondo gris. Luego, hemos agregado los 3 botones con eventos asociados: 154 | 155 | 1. El primer botón, al hacer clic en él, ejecuta la función `cambiarColor()`. Esta función cambia el color de fondo del div a rojo mediante la modificación de la propiedad `backgroundColor`. 156 | 2. El segundo botón, al hacer clic en él, ejecuta la función `cambiarTamaño()`. Esta función cambia el tamaño del div a 500x500 px mediante la modificación de las propiedades `width` y `height`. 157 | 3. El tercer botón, al hacer clic en él, ejecuta la función `agregarBorde()`. Esta función agrega un borde de 2px de ancho y color negro al div mediante la modificación de la propiedad `border`. 158 | 159 | Puedes personalizar el código CSS y los estilos según tus preferencias para adaptarlo a tu diseño y necesidades. 160 | 161 | ### Ejercicio 5 - Guardar y mostrar lista de nombres 162 | 163 | Agregar un input y un botón para guardar una lista de nombres en el local storage. A su vez, cada nombre que se agregue se deberá mostrar en una lista en el documento. Cargar la lista de nombres al recargar la página (Si existen datos guardados). Agregar un botón de eliminar a cada elemento de la lista de nombres y que actualice el la interfaz y el local storage. 164 | 165 | **Solución:** 166 | 167 | ```html 168 | 169 | 170 | 171 | Guardar y mostrar lista de nombres 172 | 173 | 174 |

    Lista de Nombres

    175 | 176 | 177 | 178 | 179 | 237 | 238 | 239 | ``` 240 | 241 | En este ejemplo, hemos agregado un campo de entrada de texto (`input`), un botón para guardar el nombre en el Local Storage y una lista (`ul`) donde se mostrarán los nombres guardados. 242 | 243 | - Al hacer clic en el botón "Guardar", se ejecuta la función `agregarNombre()`. Esta función obtiene el valor del campo de entrada de texto, lo agrega a la lista de nombres en el Local Storage y luego llama a la función `mostrarNombres()` para actualizar la lista en el documento. 244 | - La función `mostrarNombres()` se encarga de obtener los nombres guardados del Local Storage, iterar sobre ellos y crear elementos de lista (`li`) para mostrarlos en el documento. Además, agrega un botón "Eliminar" a cada nombre, que al hacer clic ejecuta la función `eliminarNombre()` para eliminar el nombre correspondiente de la lista. 245 | - La función `eliminarNombre(nombre)` se encarga de buscar y eliminar el nombre de la lista de nombres en el Local Storage y luego llama a la función `mostrarNombres()` para actualizar la lista en el documento. 246 | - Al cargar la página, se llama a la función `mostrarNombres()` para mostrar la lista de nombres guardados en el Local Storage. 247 | - Para guardar los nombres en el Local Storage, se utiliza el método `setItem()` y para obtenerlos se utiliza el método `getItem()`. Ambos métodos reciben como primer parámetro el nombre de la clave y como segundo parámetro el valor a guardar o el valor obtenido. 248 | 249 | ### Ejercicio 6 - Guardar y mostrar lista de tareas 250 | 251 | Retomando el ejercicio anterior, agregar un botón de eliminar a cada elemento de la lista de nombres y que actualice la interfaz y el local storage 252 | 253 | **Solución:** 254 | 255 | ```html 256 | 257 | 258 | 259 | Guardar y mostrar lista de nombres 260 | 261 | 262 |

    Lista de Nombres

    263 | 264 | 265 | 266 | 267 | 325 | 326 | 327 | ``` 328 | 329 | En esta actualización del código, hemos agregado el botón de eliminar en cada elemento de la lista de nombres: 330 | 331 | - Dentro de la función `mostrarNombres()`, creamos el botón "Eliminar" para cada nombre en la lista. Al hacer clic en este botón, se ejecuta la función `eliminarNombre(nombre)` para eliminar el nombre correspondiente de la lista. 332 | - La función `eliminarNombre(nombre)` obtiene los nombres guardados del Local Storage, busca el índice del nombre especificado y lo elimina del array. Luego, guarda la lista actualizada en el Local Storage y llama a la función `mostrarNombres()` para actualizar la lista en el documento. 333 | 334 | De esta manera, cada vez que se agrega un nombre a la lista, se muestra en la interfaz junto con un botón de eliminar que permite eliminar ese nombre de la lista y actualizar tanto la interfaz como el Local Storage. 335 | 336 | Espero que este ejercicio sea útil para comprender cómo agregar un botón de eliminar a cada elemento de una lista y actualizar la interfaz y el Local Storage en consecuencia. 337 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Brayan Diaz C 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Aprendiendo JavaScript 2 | 3 | Guía completa para aprender JavaScript desde cero. 4 | 5 | ## Descripción 6 | 7 | Esta guía está diseñada para ayudar a principiantes a aprender los conceptos fundamentales de JavaScript y a adquirir habilidades de programación en este lenguaje. La guía cubre temas desde la configuración del entorno de desarrollo hasta la introducción a librerías y frameworks populares. 8 | 9 | ## Índice 10 | 11 | 1. Introducción 12 | 1. [Que es JavaScript](./01-introduccion/01-que-es-javascript.md) 13 | 2. [Historia de JavaScript](./01-introduccion/02-historia-javascript.md) 14 | 2. Fundamentos 15 | 1. [Variables](./02-fundamentos/01-variables.md) 16 | 2. [Tipos de datos](./02-fundamentos/02-tipos-de-datos.md) 17 | 3. [Coercion de datos](./02-fundamentos/03-coercion-de-datos.md) 18 | 4. [Operadores](./02-fundamentos/04-operadores.md) 19 | 5. [Ejercicios](./02-fundamentos/05-ejercicios.md) 20 | 3. Estructuras de control 21 | 1. [Condicionales](./03-estructuras-de-control/01-condicionales.md) 22 | 2. [Bucles](./03-estructuras-de-control/02-bucles.md) 23 | 3. [Ejercicios](./03-estructuras-de-control/03-ejercicios.md) 24 | 4. Funciones 25 | 1. [Funciones](./04-funciones/01-funciones.md) 26 | 2. [Ejercicios](./04-funciones/02-ejercicios.md) 27 | 5. Arrays 28 | 1. [Arrays](./05-arrays/01-arrays.md) 29 | 2. [Agregar y eliminar elementos](./05-arrays/02-agregar-y-eliminar-elementos.md) 30 | 3. [Iterando arrays](./05-arrays/03-iterando-arrays.md) 31 | 4. [Arrow functions](./05-arrays/04-arrow-functions.md) 32 | 5. [Arrow functions con arrays](./05-arrays/05-arrow-functions-con-arrays.md) 33 | 6. [Ejercicios](./05-arrays/06-ejercicios.md) 34 | 6. Objetos y clases 35 | 1. [EcmaScript 6](./06-objetos-y-clases/01-ecmascript-6.md) 36 | 2. [Declaración con let y const](./06-objetos-y-clases/02-declaracion-con-let-y-const.md) 37 | 3. [String templates](./06-objetos-y-clases/03-string-templates.md) 38 | 4. [Objetos](./06-objetos-y-clases/04-objetos.md) 39 | 5. [Iterando objetos](./06-objetos-y-clases/05-iterando-objetos.md) 40 | 6. [Desestructuración de objetos](./06-objetos-y-clases/06-desestructuracion-de-objetos.md) 41 | 7. [Desestructuración de arrays](./06-objetos-y-clases/07-desestructuracion-de-arrays.md) 42 | 8. [Clases](./06-objetos-y-clases/08-clases.md) 43 | 9. [Ejercicios](./06-objetos-y-clases/09-ejercicios.md) 44 | 7. Programación orientada a objetos 45 | 1. [Programación orientada a objetos](./07-poo/01-programacion-orientada-a-objetos.md) 46 | 2. [Declaración de clases](./07-poo/02-declaracion-de-clases.md) 47 | 3. [Abstract classes](./07-poo/03-abstract-classes.md) 48 | 4. [Herencia](./07-poo/04-herencia.md) 49 | 5. [Encapsulamiento](./07-poo/05-encapsulamiento.md) 50 | 6. [Polimorfismo](./07-poo/06-polimorfismo.md) 51 | 7. [Ejercicios](./07-poo/07-ejercicios.md) 52 | 8. DOM y eventos 53 | 1. [DOM](./08-dom/01-dom.md) 54 | 2. [Eventos](./08-dom/02-eventos.md) 55 | 3. [Selección del DOM](./08-dom/03-seleccion-del-dom.md) 56 | 4. [Crear elementos](./08-dom/04-crear-elementos.md) 57 | 5. [Eventos del dom](./08-dom/05-eventos-del-dom.md) 58 | 6. [Agregar eventos a elementos](./08-dom/06-agregar-eventos-a-elementos.md) 59 | 7. [Manipulación de atributos](./08-dom/07-manipulacion-de-atributos.md) 60 | 8. [LocalStorage](./08-dom/08-localstorage.md) 61 | 9. [Elementos dinámicos](./08-dom/09-elementos-dinamicos.md) 62 | 10. [Ejercicios](./08-dom/10-ejercicios.md) 63 | 9. Proyectos 64 | 1. [Conversor de monedas](./proyectos/conversor-monedas.md) 65 | 66 | ## Empezando 🚀 67 | 68 | Para comenzar a trabajar con esta guía, es necesario tener un navegador web moderno (como Google Chrome, Mozilla Firefox, Edge o Safari) y un editor de código (como Visual Studio Code, Sublime Text o Atom). 69 | 70 | ### Pre-requisitos 📋 71 | 72 | * Navegador web actualizado (Google Chrome, Mozilla Firefox, Safari, etc.) 73 | * Editor de código (Visual Studio Code, Sublime Text, Atom, etc.) 74 | 75 | ### Instalación 🔧 76 | 77 | 1. Instalar el editor de código preferido. 78 | 2. Crear una carpeta para guardar los archivos del proyecto. 79 | 3. Crear un archivo HTML y otro JavaScript en la carpeta del proyecto. 80 | 4. Agregar una referencia al archivo JavaScript en el archivo HTML. 81 | 5. Abrir el archivo HTML en el navegador y usar la consola de desarrollador para ver el resultado de tu código. 82 | 83 | ## Ejecución de ejemplos ⚙️ 84 | 85 | A medida que avanzas en la guía, es recomendable practicar los conceptos aprendidos creando ejemplos y modificando el código. 86 | 87 | ```javascript 88 | console.log("Hola, mundo!"); 89 | ``` 90 | 91 | ## Contribuir 🖇️ 92 | 93 | Si deseas contribuir a esta guía, por favor lee [CONTRIBUTING.md](https://gist.github.com/tu_usuario_github/xxxxxx) para obtener detalles sobre nuestro código de conducta y el proceso para enviar pull requests. 94 | 95 | ## Recursos adicionales 📖 96 | 97 | Consulta la sección "Recursos adicionales y siguientes pasos" en la guía para obtener más información sobre tutoriales en línea, libros recomendados y comunidades de desarrolladores. 98 | 99 | ## Autores ✒️ 100 | 101 | * **Brayan Diaz C** - [brayandiazc](https://github.com/brayandiazc) 102 | 103 | ## Licencia 📄 104 | 105 | Este proyecto está bajo la licencia MIT License (MIT) - consulta el archivo [LICENSE.md](LICENSE.md) para obtener detalles o visita [MIT License](https://opensource.org/licenses/MIT) para más información. 106 | 107 | ## Agradecimientos 🎁 108 | 109 | * Comenta a otros sobre este proyecto 📢 110 | * Dale una estrella a este proyecto ⭐️. 111 | * Haz un fork y contribuye con el proyecto 🤓. 112 | * Da las gracias públicamente 🤓. 113 | * Invita una cerveza 🍺 o un café ☕. 114 | * etc. 115 | 116 | --- 117 | ⌨️ con ❤️ por [Brayan Diaz C](https://github.com/brayandiazc) 😊 118 | -------------------------------------------------------------------------------- /proyectos/conversor-monedas.md: -------------------------------------------------------------------------------- 1 | # Proyecto Conversor de Monedas 2 | 3 | Este proyectos es un conjunto de ejercicios que te permitirán practicar los conceptos vistos en las secciones. 4 | 5 | ## Objetivo 6 | 7 | El objetivo de este proyecto es crear una aplicación web que permita convertir una cantidad de dinero de una moneda a otra. 8 | 9 | ## Requisitos 10 | 11 | - El usuario debe poder introducir una cantidad de dinero en una moneda y ver el resultado de la conversión a otra moneda. 12 | - El usuario debe poder seleccionar las monedas de origen y destino. 13 | - El usuario debe poder ver el historial de conversiones que ha realizado (no se necesita almacenar el historial, basta con mostrarlo en la misma sesión). 14 | 15 | ## Indice 16 | 17 | El proyecto está dividido en varios ejercicios que te permitirán ir avanzando poco a poco. 18 | 19 | 1. [Conversor de monedas con variables](./conversor-monedas/01-conversor-monedas-variables.js) 20 | 2. [Conversor de monedas con inputs](./conversor-monedas/02-conversor-monedas-inputs.js) 21 | 3. [Conversor de monedas con condicionales](./conversor-monedas/03-conversor-monedas-condicionales.js) 22 | 4. [Conversor de monedas con ciclos](./conversor-monedas/04-conversor-monedas-ciclos.js) 23 | 5. [conversor de monedas con funciones](./conversor-monedas/05-conversor-monedas-funciones.js) 24 | -------------------------------------------------------------------------------- /proyectos/conversor-monedas/01-conversor-monedas-variables.js: -------------------------------------------------------------------------------- 1 | // Conversor de monedas haciendo uso de variables 2 | 3 | // En esta primera etapa, vamos a definir las tasas de cambio fijas para cada moneda y el monto en dólares que queremos convertir. Luego, vamos a imprimir en la consola el resultado de la conversión. 4 | 5 | // Definimos las tasas de cambio fijas 6 | var cop = 4500; // 1 dólar = 4500 pesos colombianos 7 | var clp = 794; // 1 dólar = 794 pesos chilenos 8 | var mxn = 18; // 1 dólar = 18 pesos mexicanos 9 | 10 | // Definimos el monto en dólares que queremos convertir 11 | var dolares = 100; 12 | 13 | // Calculamos el equivalente en cada moneda 14 | const pesosColombianos = dolares * cop; 15 | const pesosChilenos = dolares * clp 16 | const pesosMexicanos = dolares * mxn ; 17 | 18 | // Imprimimos los resultados en la consola 19 | console.log(dolares + " dólares son equivalentes a " + pesosColombianos + " pesos colombianos, " + pesosChilenos + " pesos chilenos y " + pesosMexicanos + " pesos mexicanos."); 20 | -------------------------------------------------------------------------------- /proyectos/conversor-monedas/02-conversor-monedas-inputs.js: -------------------------------------------------------------------------------- 1 | // Conversor de monedas haciendo uso de inputs 2 | 3 | // En esta etapa, vamos a solicitar al usuario que ingrese el monto en dólares y vamos a guardar la información en una variable. Luego, vamos a imprimir en la consola el resultado de la conversión. 4 | 5 | // Solicitamos al usuario que ingrese el monto en dólares 6 | var dolares = prompt("Ingrese el monto en dólares:"); 7 | 8 | // Definimos las tasas de cambio fijas 9 | var cop = 4500; // 1 dólar = 4500 pesos colombianos 10 | var clp = 794; // 1 dólar = 794 pesos chilenos 11 | var mxn = 18; // 1 dólar = 18 pesos mexicanos 12 | 13 | // Calculamos el equivalente en cada moneda 14 | const pesosColombianos = dolares * cop; 15 | const pesosChilenos = dolares * clp 16 | const pesosMexicanos = dolares * mxn; 17 | 18 | // Imprimimos los resultados en la consola 19 | console.log(dolares + " dólares son equivalentes a " + pesosColombianos + " pesos colombianos, " + pesosChilenos + " pesos chilenos y " + pesosMexicanos + " pesos mexicanos."); 20 | -------------------------------------------------------------------------------- /proyectos/conversor-monedas/03-conversor-monedas-condicionales.js: -------------------------------------------------------------------------------- 1 | // Conversor de monedas haciendo uso de ciclos 2 | 3 | // En esta etapa, vamos a solicitar al usuario que ingrese el monto en dólares y vamos a guardar la información en una variable. Además haremos uso de las condiciones para verificar la opción elegida por el usuario y realizar la conversión correspondiente. 4 | 5 | // Obtenemos el valor en dólares a convertir 6 | var dolares = prompt("Ingresa el valor en dólares a convertir:"); 7 | 8 | // Obtenemos la opción de conversión deseada 9 | var opcion = prompt("Ingresa la opción de conversión: \n1 - Peso Colombiano \n2 - Peso Chileno \n3 - Peso Mexicano"); 10 | 11 | var cop = 4500; // 1 dólar = 4500 pesos colombianos 12 | var clp = 794; // 1 dólar = 794 pesos chilenos 13 | var mxn = 18; // 1 dólar = 18 pesos mexicanos 14 | 15 | // Verificamos la opción elegida y realizamos la conversión correspondiente 16 | if (opcion == 1) { 17 | const pesosColombianos = dolares * cop; 18 | alert(dolares + " dólares equivalen a " + pesosColombianos.toFixed(2) + " pesos colombianos"); 19 | } else if (opcion == 2) { 20 | const pesosChilenos = dolares * clp; 21 | alert(dolares + " dólares equivalen a " + pesosChilenos.toFixed(2) + " pesos chilenos"); 22 | } else if (opcion == 3) { 23 | const pesosMexicanos = dolares * mxn; 24 | alert(dolares + " dólares equivalen a " + pesosMexicanos.toFixed(2) + " pesos mexicanos"); 25 | } else { 26 | alert("Opción inválida"); 27 | } 28 | -------------------------------------------------------------------------------- /proyectos/conversor-monedas/04-conversor-monedas-ciclos.js: -------------------------------------------------------------------------------- 1 | // Conversor de monedas haciendo uso de ciclos 2 | 3 | // Definimos las tasas de cambio 4 | var cop = 4500; // 1 dólar = 4500 pesos colombianos 5 | var clp = 794; // 1 dólar = 794 pesos chilenos 6 | var mxn = 18; // 1 dólar = 18 pesos mexicanos 7 | 8 | // Obtenemos el valor en dólares a convertir 9 | var dolares = parseFloat(prompt("Ingresa el valor en dólares a convertir:")); 10 | 11 | // Definimos una variable para guardar la opción elegida por el usuario 12 | var opcion = 0; 13 | 14 | // Ciclo para solicitar una opción válida de conversión 15 | while (opcion < 1 || opcion > 3) { 16 | opcion = parseInt(prompt("Ingresa la opción de conversión: \n1 - Peso Colombiano \n2 - Peso Chileno \n3 - Peso Mexicano")); 17 | } 18 | 19 | // Realizamos la conversión correspondiente 20 | switch (opcion) { 21 | case 1: 22 | const pesosColombianos = dolares * cop; 23 | alert(dolares + " dólares equivalen a " + pesosColombianos.toFixed(2) + " pesos colombianos"); 24 | break; 25 | case 2: 26 | const pesosChilenos = dolares * clp; 27 | alert(dolares + " dólares equivalen a " + pesosChilenos.toFixed(2) + " pesos chilenos"); 28 | break; 29 | case 3: 30 | const pesosMexicanos = dolares * mxn; 31 | alert(dolares + " dólares equivalen a " + pesosMexicanos.toFixed(2) + " pesos mexicanos"); 32 | break; 33 | } 34 | -------------------------------------------------------------------------------- /proyectos/conversor-monedas/05-conversor-monedas-funciones.js: -------------------------------------------------------------------------------- 1 | // Esta función convierte un valor en dólares a la moneda especificada por el usuario. 2 | function convertirDolares(valorDolares, monedaDestino) { 3 | var factorConversion; // Declaración de una variable factorConversion para almacenar el factor de conversión. 4 | 5 | switch (monedaDestino) { // Inicio de un bloque switch para evaluar el valor de la variable monedaDestino. 6 | case 'COP': 7 | factorConversion = 4500; // Si monedaDestino es igual a 'COP', factorConversion se establece en 4500. 8 | break; // Fin del bloque de caso. 9 | case 'CLP': 10 | factorConversion = 794; // Si monedaDestino es igual a 'CLP', factorConversion se establece en 794. 11 | break; // Fin del bloque de caso. 12 | case 'MXN': 13 | factorConversion = 18; // Si monedaDestino es igual a 'MXN', factorConversion se establece en 18. 14 | break; // Fin del bloque de caso. 15 | default: // Si monedaDestino no coincide con ninguno de los casos anteriores, se ejecuta el bloque predeterminado. 16 | return 'Moneda no soportada'; // Devuelve el mensaje "Moneda no soportada". 17 | } 18 | 19 | var resultado = valorDolares * factorConversion; // Multiplica el valor en dólares por el factor de conversión y lo almacena en la variable resultado. 20 | return resultado.toFixed(2); // Devuelve el resultado con dos decimales. 21 | } 22 | 23 | // Esta función solicita al usuario que ingrese el valor en dólares a convertir y la moneda de destino. 24 | function obtenerEntradaUsuario() { 25 | var valorDolares = parseFloat(prompt('Ingresa el valor en dólares a convertir:')); // Pide al usuario que ingrese un valor en dólares y lo convierte en un número de punto flotante. 26 | 27 | if (isNaN(valorDolares)) { // Verifica si valorDolares no es un número. 28 | return null; // Devuelve nulo si valorDolares no es un número. 29 | } 30 | 31 | var monedaDestino = prompt('Ingresa la moneda de destino (COP, CLP, MXN):').toUpperCase(); // Pide al usuario que ingrese la moneda de destino y convierte el texto en mayúsculas. 32 | 33 | return { // Devuelve un objeto con dos propiedades, valorDolares y monedaDestino. 34 | valorDolares: valorDolares, 35 | monedaDestino: monedaDestino 36 | }; 37 | } 38 | 39 | var entrada = obtenerEntradaUsuario(); // Llama a la función obtenerEntradaUsuario y almacena el resultado en la variable entrada. 40 | if (entrada) { // Verifica si entrada es verdadero. 41 | var resultado = convertirDolares(entrada.valorDolares, entrada.monedaDestino); // Llama a la función convertirDolares y almacena el resultado en la variable resultado. 42 | alert(entrada.valorDolares + ' dólares equivalen a ' + resultado + ' ' + entrada.monedaDestino); // Muestra un mensaje en una ventana emergente con el resultado de la conversión. 43 | } else { // Si entrada es nulo. 44 | alert('Entrada no válida'); // Muestra un mensaje en una ventana emergente que indica que la entrada no es válida. 45 | } 46 | --------------------------------------------------------------------------------