diff --git a/Spanish/dia_02_tipos_de_datos.md b/Spanish/dia_02_tipos_de_datos.md index 544afc23..b8679670 100644 --- a/Spanish/dia_02_tipos_de_datos.md +++ b/Spanish/dia_02_tipos_de_datos.md @@ -7,42 +7,43 @@ Twitter Follow - Author: - Asabeneh Yetayeh
- January, 2020 - +Author: +Asabeneh Yetayeh
+ January, 2020 + + -[<< Día 1](../readMe.md) +[<< Día 1](./readme.md) | [Day 3 >>](./dia_03_Booleanos_Operadores_Date/dia_03_Boleanos_Operadores_Date.md) ![Thirty Days Of JavaScript](../images/banners/day_1_2.png) - [📔 Día 2](#-Día-2) - - [Tipos de Datos](#tipos-de-datos) - - [Tipos de datos primitivos](#tipos-de-datos-primitivos) - - [Tipos de datos no primitivos](#tipos-de-datos-no-primitivos) - - [Números](#números) - - [Declaración de tipos de datos numéricos](#declaración-de-tipos-de-datos-numéricos) - - [Objeto matemático](#objeto-matemático) - - [Generador de números aleatorios](#generador-de-números-aleatorios) - - [Cadenas](#cadenas) - - [Concatenación de cadenas](#concatenación-de-cadenas) - - [Concatenar usando el operador de suma](#concatenar-usando-el-operador-de-suma) - - [Cadenas literales largas](#cadenas-literales-largas) - - [Secuencias de escape en cadenas](#secuencias-de-escape-en-cadenas) - - [Literales de plantilla](#literales-de-plantilla) - - [Métodos de cadena](#métodos-de-cadena) - - [Comprobación de tipos de datos y conversión](#comprobación-de-tipos-de-datos-y-conversión) - - [Comprobación de tipos de datos](#comprobación-de-tipos-de-datos) - - [Cambio del tipo de datos](#cambio-del-tipo-de-datos) - - [Cadena a Int](#cadena-a-int) - - [Cadena a Floatante](#cadena-a-floatante) - - [Flotante a Int](#flotante-a-int) - - [💻 Día 2: Ejercicios](#-día-2-ejercicios) - - [Ejercicio: Nivel 1](#ejercicio-nivel-1) - - [Ejercicio: Nivel 2](#ejercicio-nivel-2) - - [Ejercicios: Nivel 3](#ejercicios-nivel-3) + - [Tipos de Datos](#tipos-de-datos) + - [Tipos de datos primitivos](#tipos-de-datos-primitivos) + - [Tipos de datos no primitivos](#tipos-de-datos-no-primitivos) + - [Números](#números) + - [Declaración de tipos de datos numéricos](#declaración-de-tipos-de-datos-numéricos) + - [Objeto matemático](#objeto-matemático) + - [Generador de números aleatorios](#generador-de-números-aleatorios) + - [Cadenas](#cadenas) + - [Concatenación de cadenas](#concatenación-de-cadenas) + - [Concatenar usando el operador de suma](#concatenar-usando-el-operador-de-suma) + - [Cadenas literales largas](#cadenas-literales-largas) + - [Secuencias de escape en cadenas](#secuencias-de-escape-en-cadenas) + - [Literales de plantilla](#literales-de-plantilla) + - [Métodos de cadena](#métodos-de-cadena) + - [Comprobación de tipos de datos y conversión](#comprobación-de-tipos-de-datos-y-conversión) + - [Comprobación de tipos de datos](#comprobación-de-tipos-de-datos) + - [Cambio del tipo de datos](#cambio-del-tipo-de-datos) + - [Cadena a Int](#cadena-a-int) + - [Cadena a Floatante](#cadena-a-floatante) + - [Flotante a Int](#flotante-a-int) + - [💻 Día 2: Ejercicios](#-día-2-ejercicios) + - [Ejercicio: Nivel 1](#ejercicio-nivel-1) + - [Ejercicio: Nivel 2](#ejercicio-nivel-2) + - [Ejercicios: Nivel 3](#ejercicios-nivel-3) # 📔 Día 2 @@ -57,11 +58,11 @@ En la sección anterior, mencionamos un poco sobre los tipos de datos. Los datos Los tipos de datos primitivos en JavaScript incluyen: - 1. Números: enteros, flotantes - 2. Cadenas: cualquier dato entre comillas simples, comillas dobles o comillas invertidas - 3. Booleanos: valor verdadero o falso - 4. Nulo - valor vacío o sin valor - 5. Indefinido - una variable declarada sin un valor +1. Números: enteros, flotantes +2. Cadenas: cualquier dato entre comillas simples, comillas dobles o comillas invertidas +3. Booleanos: valor verdadero o falso +4. Nulo - valor vacío o sin valor +5. Indefinido - una variable declarada sin un valor Los tipos de datos que no son primitivos en JavaScript incluyen: @@ -70,92 +71,92 @@ Los tipos de datos que no son primitivos en JavaScript incluyen: 3. Matrices Ahora, veamos qué significan exactamente los tipos de datos primitivos y no primitivos. -Los tipos de datos *primitivos* son tipos de datos inmutables (no modificables). Una vez que se crea un tipo de datos primitivo, no podemos modificarlo. +Los tipos de datos _primitivos_ son tipos de datos inmutables (no modificables). Una vez que se crea un tipo de datos primitivo, no podemos modificarlo. **Ejemplo:** ```js -let word = 'JavaScript' +let word = "JavaScript"; ``` -Si intentamos modificar la cadena almacenada en la variable *word*, JavaScript debería generar un error. Cualquier tipo de datos bajo comillas simples, comillas dobles o comillas invertidas son un tipo de datos de cadena. +Si intentamos modificar la cadena almacenada en la variable _word_, JavaScript debería generar un error. Cualquier tipo de datos bajo comillas simples, comillas dobles o comillas invertidas son un tipo de datos de cadena. ```js -word[0] = 'Y' +word[0] = "Y"; ``` -Esta expresión no cambia la cadena almacenada en la variable *word*. Entonces, podemos decir que las cadenas no son modificables o, en otras palabras, inmutables. Los tipos de datos primitivos se comparan por sus valores. Comparemos diferentes valores de datos. Vea el ejemplo a continuación: +Esta expresión no cambia la cadena almacenada en la variable _word_. Entonces, podemos decir que las cadenas no son modificables o, en otras palabras, inmutables. Los tipos de datos primitivos se comparan por sus valores. Comparemos diferentes valores de datos. Vea el ejemplo a continuación: ```js -let numOne = 3 -let numTwo = 3 +let numOne = 3; +let numTwo = 3; -console.log(numOne == numTwo) // Verdadero +console.log(numOne == numTwo); // Verdadero -let js = 'JavaScript' -let py = 'Python' +let js = "JavaScript"; +let py = "Python"; -console.log(js == py) // Falso +console.log(js == py); // Falso -let lightOn = true -let lightOff = false +let lightOn = true; +let lightOff = false; -console.log(lightOn == lightOff) // Falso +console.log(lightOn == lightOff); // Falso ``` ### Tipos de datos no primitivos -Los tipos de datos *no primitivos* son modificables o mutables. Podemos modificar el valor de los tipos de datos no primitivos después de su creación. +Los tipos de datos _no primitivos_ son modificables o mutables. Podemos modificar el valor de los tipos de datos no primitivos después de su creación. Veamos creando una matriz. Una matriz es una lista de valores de datos entre corchetes. Las matrices pueden contener tipos de datos iguales o diferentes. Los valores de matriz están referenciados por su índice. En el índice de matriz de JavaScript comienza en cero. Es decir, el primer elemento de una matriz se encuentra en el índice cero, el segundo elemento en el índice uno y el tercer elemento en el índice dos, etc. ```js -let nums = [1, 2, 3] -nums[0] = 10 +let nums = [1, 2, 3]; +nums[0] = 10; -console.log(nums) // [10, 2, 3] +console.log(nums); // [10, 2, 3] ``` Como puede ver, una matriz, que es un tipo de datos no primitivo, es mutable. Los tipos de datos no primitivos no se pueden comparar por valor. Incluso si dos tipos de datos no primitivos tienen las mismas propiedades y valores, no son estrictamente iguales. ```js -let nums = [1, 2, 3] -let numberos = [1, 2, 3] +let nums = [1, 2, 3]; +let numberos = [1, 2, 3]; -console.log(nums == numbers) // Falso +console.log(nums == numbers); // Falso let usuarioUno = { -nombre:'Asabeneh', -papel:'teaching', -pais:'Finland' -} + nombre: "Asabeneh", + papel: "teaching", + pais: "Finland", +}; let usuarioDos = { -nombre:'Asabeneh', -papel:'teaching', -pais:'Finland' -} + nombre: "Asabeneh", + papel: "teaching", + pais: "Finland", +}; -console.log(usuarioUno == usuarioDos) // Falso +console.log(usuarioUno == usuarioDos); // Falso ``` Como regla general, no comparamos tipos de datos no primitivos. No compare matrices, funciones u objetos. Los valores no primitivos se conocen como tipos de referencia, porque se comparan por referencia en lugar de por valor. Dos objetos solo son estrictamente iguales si se refieren al mismo objeto subyacente. ```js -let nums = [1, 2, 3] -let numberos = nums +let nums = [1, 2, 3]; +let numberos = nums; -console.log(nums == numbers) // Verdadero +console.log(nums == numbers); // Verdadero let usuarioUno = { -nombre:'Asabeneh', -papel:'teaching', -pais:'Finland' -} + nombre: "Asabeneh", + papel: "teaching", + pais: "Finland", +}; -let userTwo = userOne +let userTwo = userOne; -console.log(usuarioUno == usuarioDos) // Verdadero +console.log(usuarioUno == usuarioDos); // Verdadero ``` Si tiene dificultades comprendiendo la diferencia entre los tipos de datos primitivos y los tipos de datos no primitivos, no es el único. Cálmate y ve a la siguiente sección e intenta volver después de un tiempo. Ahora comencemos los tipos de datos por tipo de número. @@ -168,16 +169,16 @@ Veamos algunos ejemplos de Números. ### Declaración de tipos de datos numéricos ```js -let edad = 35 -const gravedad = 9.81 // usamos const para valores que no cambian, constante gravitacional en m/s2 -let masa = 72 // masa en Kilogramo -const PI = 3.14 // pi una constante geométrica +let edad = 35; +const gravedad = 9.81; // usamos const para valores que no cambian, constante gravitacional en m/s2 +let masa = 72; // masa en Kilogramo +const PI = 3.14; // pi una constante geométrica // Más ejemplos -const boilingPoint = 100 // temperatura en oC, punto de ebullición del agua que es una constante -const bodyTemp = 37 // oC la temperatura corporal promedio del ser humano, que es una constante +const boilingPoint = 100; // temperatura en oC, punto de ebullición del agua que es una constante +const bodyTemp = 37; // oC la temperatura corporal promedio del ser humano, que es una constante -console.log(edad, gravedad, masa, PI, boilingPoint, bodyTemp) +console.log(edad, gravedad, masa, PI, boilingPoint, bodyTemp); ``` ### Objeto matemático @@ -185,61 +186,61 @@ console.log(edad, gravedad, masa, PI, boilingPoint, bodyTemp) En JavaScript, el objeto matemático proporciona muchos métodos para trabajar con números. ```js -const PI = Math.PI +const PI = Math.PI; -console.log(PI) // 3.141592653589793 +console.log(PI); // 3.141592653589793 // Redondeo al número más cercano // si es superior a 0,5 hacia arriba si es inferior a 0,5 redondeo hacia abajo -console.log(Math.round(PI)) // 3 para redondear valores al número más cercano +console.log(Math.round(PI)); // 3 para redondear valores al número más cercano -console.log(Math.round(9.81)) // 10 +console.log(Math.round(9.81)); // 10 -console.log(Math.floor(PI)) // 3 redondeando hacia abajo +console.log(Math.floor(PI)); // 3 redondeando hacia abajo -console.log(Math.ceil(PI)) // 4 redondeando hacia arriba +console.log(Math.ceil(PI)); // 4 redondeando hacia arriba -console.log(Math.min(-5, 3, 20, 4, 5, 10)) // -5, devuelve el valor mínimo +console.log(Math.min(-5, 3, 20, 4, 5, 10)); // -5, devuelve el valor mínimo -console.log(Math.max(-5, 3, 20, 4, 5, 10)) // 20, devuelve el valor máximo +console.log(Math.max(-5, 3, 20, 4, 5, 10)); // 20, devuelve el valor máximo -const randNum = Math.random() // crea un número aleatorio entre 0 y 0,999999 -console.log(randNum) +const randNum = Math.random(); // crea un número aleatorio entre 0 y 0,999999 +console.log(randNum); // Vamos a crear un número aleatorio entre 0 y 10 -const num = Math.floor(Math.random () * 11) // crea un número aleatorio entre 0 y 10 -console.log(num) +const num = Math.floor(Math.random() * 11); // crea un número aleatorio entre 0 y 10 +console.log(num); //Valor absoluto -console.log(Math.abs(-10)) // 10 +console.log(Math.abs(-10)); // 10 //Raíz cuadrada -console.log(Math.sqrt(100)) // 10 +console.log(Math.sqrt(100)); // 10 -console.log(Math.sqrt(2)) // 1.4142135623730951 +console.log(Math.sqrt(2)); // 1.4142135623730951 // Poder -console.log(Math.pow(3, 2)) // 9 +console.log(Math.pow(3, 2)); // 9 -console.log(Math.E) // 2.718 +console.log(Math.E); // 2.718 // Logaritmo // Devuelve el logaritmo natural con base E de x, Math.log(x) -console.log(Math.log(2)) // 0.6931471805599453 -console.log(Math.log(10)) // 2.302585092994046 +console.log(Math.log(2)); // 0.6931471805599453 +console.log(Math.log(10)); // 2.302585092994046 // Devuelve el logaritmo natural de 2 y 10 respectivamente -console.log(Math.LN2) // 0.6931471805599453 -console.log(Math.LN10) // 2.302585092994046 +console.log(Math.LN2); // 0.6931471805599453 +console.log(Math.LN10); // 2.302585092994046 // Trigonometría -Math.sin(0) -Math.sin(60) +Math.sin(0); +Math.sin(60); -Math.cos(0) -Math.cos(60) +Math.cos(0); +Math.cos(60); ``` #### Generador de números aleatorios @@ -247,19 +248,19 @@ Math.cos(60) El objeto matemático de JavaScript tiene un generador de números de método random() que genera un número de 0 a 0.999999999... ```js -let randomNum = Math.random() // genera 0 a 0.999... +let randomNum = Math.random(); // genera 0 a 0.999... ``` Ahora, veamos cómo podemos usar el método random() para generar un número aleatorio entre 0 y 10: ```js -let randomNum = Math.random() // 0 a 0.999 -let numBtnZeroAndTen = randomNum * 11 +let randomNum = Math.random(); // 0 a 0.999 +let numBtnZeroAndTen = randomNum * 11; -console.log(numBtnZeroAndTen) // esto da: min 0 y max 10.99 +console.log(numBtnZeroAndTen); // esto da: min 0 y max 10.99 -let randomNumRoundToFloor = Math.floor(numBtnZeroAndTen) -console.log(randomNumRoundToFloor) // esto da entre 0 y 10 +let randomNumRoundToFloor = Math.floor(numBtnZeroAndTen); +console.log(randomNumRoundToFloor); // esto da entre 0 y 10 ``` ## Cadenas @@ -268,15 +269,15 @@ Las cadenas son textos, que están debajo de **_single_** , **_double_**, **_bac Veamos algunos ejemplos de cadenas: ```js -let espacio = ' ' // una cadena de espacio vacío -let primerNombre = 'Asabeneh' -let apellido = 'Yetayeh' -let pais = 'Finland' -let ciudad = 'Helsinki' -let idioma = 'JavaScript' -let trabajo = 'teacher' -let cita = "The saying,'Seeing is Believing' is not correct in 2020." -let quotConBackTick = `The saying,'Seeing is Believing' is not correct in 2020.` +let espacio = " "; // una cadena de espacio vacío +let primerNombre = "Asabeneh"; +let apellido = "Yetayeh"; +let pais = "Finland"; +let ciudad = "Helsinki"; +let idioma = "JavaScript"; +let trabajo = "teacher"; +let cita = "The saying,'Seeing is Believing' is not correct in 2020."; +let quotConBackTick = `The saying,'Seeing is Believing' is not correct in 2020.`; ``` ### Concatenación de cadenas @@ -301,20 +302,20 @@ Concatenar usando el operador de suma es una forma antigua. Esta forma de concat ```js // Declarar diferentes variables de diferentes tipos de datos -let espacio = ' ' -let primerNombre = 'Asabeneh' -let apellido = 'Yetayeh' -let pais = 'Finland' -let ciudad = 'Helsinki' -let idioma = 'JavaScript' -let trabajo = 'teacher' -let edad = 250 - +let espacio = " "; +let primerNombre = "Asabeneh"; +let apellido = "Yetayeh"; +let pais = "Finland"; +let ciudad = "Helsinki"; +let idioma = "JavaScript"; +let trabajo = "teacher"; +let edad = 250; let nombreCompleto = primerNombre + espacio + apellido; -let datosPersonaUno = nombreCompleto + '. Yo tengo ' + edad + '. Vivo en' + pais; // Adición de cadena ES5 +let datosPersonaUno = + nombreCompleto + ". Yo tengo " + edad + ". Vivo en" + pais; // Adición de cadena ES5 -console.log(personInfoOne) +console.log(personInfoOne); ``` ```sh @@ -324,19 +325,20 @@ Asabeneh Yetayeh. Yo tengo 250v Finland #### Cadenas literales largas Una cadena puede ser un solo carácter, un párrafo o una página. Si la longitud de la cadena es demasiado grande, no cabe en una línea. Podemos usar el carácter de barra invertida (\\) al final de cada línea para indicar que la cadena continuará en la línea siguiente. -**Ejemplo:** +**Ejemplo:** ```js -const parrafo = "Mi nombre es Asabeneh Yetayeh. Vivo en Finlandia, Helsinki.\ +const parrafo = + "Mi nombre es Asabeneh Yetayeh. Vivo en Finlandia, Helsinki.\ Soy profesora y me encanta enseñar. Enseño HTML, CSS, JavaScript, React, Redux, \ Node.js, Python, Data Analysis y D3.js para cualquier persona interesada en aprender. \ A fines de 2019, estaba pensando en expandir mi enseñanza y llegar a \ a la audiencia global y comencé un desafío de Python del 20 de noviembre al 19 de diciembre.\ Fue una de las experiencias más gratificantes e inspiradoras.\ Ahora, estamos en 2020. Disfruto preparando el desafío 30DaysOfJavaScript y \ -Espero que tú también estés disfrutando." +Espero que tú también estés disfrutando."; -console.log(parrafo) +console.log(parrafo); ``` #### Secuencias de escape en cadenas @@ -344,22 +346,29 @@ console.log(parrafo) En JavaScript y otros lenguajes de programación \ seguido de algunos caracteres es una secuencia de escape. Veamos los caracteres de escape más comunes: -\n: nueva linea + - \t: Tabulador, significa 8 espacios - \\\\: barra invertida - \\': Una frase (') - \\": comillas dobles (") - + ```js -console.log('Espero que todos estén disfrutando el desafío de 30 días de JavaScript.\¿Y tú?') // salto de línea -console.log('Días\temas\Ejercicios') -console.log('Día 1\t3\t5') -console.log('Día 2\t3\t5') -console.log('Día 3\t3\t5') -console.log('Día 4\t3\t5') -console.log('Este es un símbolo de barra invertida (\\)') // Para escribir una barra invertida -console.log('En todos los lenguajes de programación comienza con \"¡Hola, mundo!\"') -console.log("En todos los lenguajes de programación comienza con \'¡Hola, mundo!\'") -console.log('El dicho \'Ver para creer\' no es correcto en 2022') +console.log( + "Espero que todos estén disfrutando el desafío de 30 días de JavaScript.¿Y tú?" +); // salto de línea +console.log("Días\temasEjercicios"); +console.log("Día 1\t3\t5"); +console.log("Día 2\t3\t5"); +console.log("Día 3\t3\t5"); +console.log("Día 4\t3\t5"); +console.log("Este es un símbolo de barra invertida (\\)"); // Para escribir una barra invertida +console.log( + 'En todos los lenguajes de programación comienza con "¡Hola, mundo!"' +); +console.log( + "En todos los lenguajes de programación comienza con '¡Hola, mundo!'" +); +console.log("El dicho 'Ver para creer' no es correcto en 2022"); ``` Salida en consola: @@ -379,43 +388,41 @@ En todos los lenguajes de programación comienza con"¡Hola, mundo!" El dicho 'Ver para creer' no es correcto en 2022 ``` -#### Literales de plantilla +#### Literales de plantilla Para crear una plantilla de cadenas(cadenas de plantilla), usamos dos tildes de retroceso. Podemos inyectar datos como expresiones dentro de una cadena de plantilla. Para inyectar datos, encerramos la expresión con un corchete ({}) precedido por un signo $. Consulte la sintaxis a continuación. ```js //Sintaxis -`Texto literal de cadena` -`Cadena de texto literal ${expresión}` +`Texto literal de cadena``Cadena de texto literal ${expresión}`; ``` **Ejemplo: 1** ```js -console.log(`La suma de 2 y 3 es 5`) // escribiendo estáticamente los datos -let a = 2 -let b = 3 -console.log(`La suma de ${a} y ${b} es ${a + b}`) // inyectando los datos dinámicamente +console.log(`La suma de 2 y 3 es 5`); // escribiendo estáticamente los datos +let a = 2; +let b = 3; +console.log(`La suma de ${a} y ${b} es ${a + b}`); // inyectando los datos dinámicamente ``` **Ejemplo:2** ```js -let espacio = ' ' -let primerNombre = 'Asabeneh' -let apellido = 'Yetayeh' -let pais = 'Finland' -let ciudad = 'Helsinki' -let idioma = 'JavaScript' -let trabajo = 'profesora' -let edad = 250 +let espacio = " "; +let primerNombre = "Asabeneh"; +let apellido = "Yetayeh"; +let pais = "Finland"; +let ciudad = "Helsinki"; +let idioma = "JavaScript"; +let trabajo = "profesora"; +let edad = 250; let nombreCompleto = primerNombre + espacio + apellido; - -let personaInfoDos = `Soy ${nombreCompleto}. Tengo ${edad} años. Vivo en ${pais}.` //ES6 - Método de interpolación de cadenas -let personaInfoTres = `Soy ${nombreCompleto}. Vivo en ${ciudad}, ${pais}. Soy una ${trabajo}. Enseño ${idioma}.` -console.log(personaInfoDos) -console.log(personaInfoTres) +let personaInfoDos = `Soy ${nombreCompleto}. Tengo ${edad} años. Vivo en ${pais}.`; //ES6 - Método de interpolación de cadenas +let personaInfoTres = `Soy ${nombreCompleto}. Vivo en ${ciudad}, ${pais}. Soy una ${trabajo}. Enseño ${idioma}.`; +console.log(personaInfoDos); +console.log(personaInfoTres); ``` ```sh @@ -426,332 +433,335 @@ Soy Asabeneh Yetayeh. Vivo en Helsinki, Finland. Soy una profesora. Enseño Java Usando una plantilla de cadena o un método de interpolación de cadena, podemos agregar expresiones, que podrían ser un valor, o algunas operaciones (comparación, operaciones aritméticas, operación ternaria). ```js -let a = 2 -let b = 3 -console.log(`${a} es mayor que ${b}: ${a > b}`) +let a = 2; +let b = 3; +console.log(`${a} es mayor que ${b}: ${a > b}`); ``` ```sh -2 es mayor que 3: false +2 es mayor que 3: false ``` ### Métodos de cadena Todo en JavaScript es un objeto. Una cadena es un tipo de datos primitivo, lo que significa que no podemos modificarla una vez que se crea. El objeto de cadena tiene muchos métodos de cadena. Existen diferentes métodos de cadenas que nos pueden ayudar a trabajar con cadenas. -1. *longitud*: el método de cadena *longitud* devuelve el número de caracteres en una cadena incluido el espacio vacío. +1. _longitud_: el método de cadena _longitud_ devuelve el número de caracteres en una cadena incluido el espacio vacío. **Example:** ```js -let js = 'JavaScript' -console.log(js.length) // 10 -let primerNombre = 'Asabeneh' -console.log(primerNombre.length) // 8 +let js = "JavaScript"; +console.log(js.length); // 10 +let primerNombre = "Asabeneh"; +console.log(primerNombre.length); // 8 ``` -2. *Acceder a los caracteres de una cadena*: Podemos acceder a cada carácter de una cadena usando su índice. En programación, el conteo comienza desde 0. El primer índice de la cadena es cero y el último índice es la longitud de la cadena menos uno. +2. _Acceder a los caracteres de una cadena_: Podemos acceder a cada carácter de una cadena usando su índice. En programación, el conteo comienza desde 0. El primer índice de la cadena es cero y el último índice es la longitud de la cadena menos uno. + +![Accessing sting by index](../images/string_indexes.png) - ![Accessing sting by index](../images/string_indexes.png) - Accedamos a diferentes caracteres en la cadena 'JavaScript'. ```js -let string = 'JavaScript' -let firstLetter = string[0] +let string = "JavaScript"; +let firstLetter = string[0]; -console.log(firstLetter) // J +console.log(firstLetter); // J -let secondLetter = string[1] // a -let thirdLetter = string[2] -let lastLetter = string[9] +let secondLetter = string[1]; // a +let thirdLetter = string[2]; +let lastLetter = string[9]; -console.log(lastLetter) // t +console.log(lastLetter); // t -let lastIndex = string.length - 1 +let lastIndex = string.length - 1; -console.log(lastIndex) // 9 -console.log(string[lastIndex]) // t +console.log(lastIndex); // 9 +console.log(string[lastIndex]); // t ``` -3. *toUpperCase()*: este método cambia la cadena a letras mayúsculas. +3. _toUpperCase()_: este método cambia la cadena a letras mayúsculas. ```js -let string = 'JavaScript' +let string = "JavaScript"; -console.log(string.toUpperCase()) // JAVASCRIPT +console.log(string.toUpperCase()); // JAVASCRIPT -let firstName = 'Asabeneh' +let firstName = "Asabeneh"; -console.log(firstName.toUpperCase()) // ASABENEH +console.log(firstName.toUpperCase()); // ASABENEH -let country = 'Finland' +let country = "Finland"; -console.log(country.toUpperCase()) // FINLAND +console.log(country.toUpperCase()); // FINLAND ``` -4. *toLowerCase()*: este método cambia la cadena a letras minúsculas. +4. _toLowerCase()_: este método cambia la cadena a letras minúsculas. ```js -let string = 'JavasCript' +let string = "JavasCript"; -console.log(string.toLowerCase()) // javascript +console.log(string.toLowerCase()); // javascript -let firstName = 'Asabeneh' +let firstName = "Asabeneh"; -console.log(firstName.toLowerCase()) // asabeneh +console.log(firstName.toLowerCase()); // asabeneh -let country = 'Finland' +let country = "Finland"; -console.log(country.toLowerCase()) // finland +console.log(country.toLowerCase()); // finland ``` -5. *substr()*: Se necesitan dos argumentos, el índice inicial y el número de caracteres para dividir. +5. _substr()_: Se necesitan dos argumentos, el índice inicial y el número de caracteres para dividir. ```js -let string = 'JavaScript' -console.log(string.substr(4,6)) // Script +let string = "JavaScript"; +console.log(string.substr(4, 6)); // Script -let country = 'Finland' -console.log(country.substr(3, 4)) // land +let country = "Finland"; +console.log(country.substr(3, 4)); // land ``` -6. *substring()*: Toma dos argumentos, el índice inicial y el índice final, pero no incluye el carácter en el índice final. +6. _substring()_: Toma dos argumentos, el índice inicial y el índice final, pero no incluye el carácter en el índice final. ```js -let string = 'JavaScript' +let string = "JavaScript"; -console.log(string.substring(0,4)) // Java -console.log(string.substring(4,10)) // Script -console.log(string.substring(4)) // Script +console.log(string.substring(0, 4)); // Java +console.log(string.substring(4, 10)); // Script +console.log(string.substring(4)); // Script -let country = 'Finland' +let country = "Finland"; -console.log(country.substring(0, 3)) // Fin -console.log(country.substring(3, 7)) // land -console.log(country.substring(3)) // land +console.log(country.substring(0, 3)); // Fin +console.log(country.substring(3, 7)); // land +console.log(country.substring(3)); // land ``` -7. *split()*: El método split divide una cadena en un lugar específico. +7. _split()_: El método split divide una cadena en un lugar específico. ```js -let string = '30 Days Of JavaScript' +let string = "30 Days Of JavaScript"; -console.log(string.split()) // Cambios en una matriz -> ["30 Days Of JavaScript"] -console.log(string.split(' ')) // Dividir a una matriz en el espacio -> ["30", "Days", "Of", "JavaScript"] +console.log(string.split()); // Cambios en una matriz -> ["30 Days Of JavaScript"] +console.log(string.split(" ")); // Dividir a una matriz en el espacio -> ["30", "Days", "Of", "JavaScript"] -let firstName = 'Asabeneh' +let firstName = "Asabeneh"; -console.log(firstName.split()) // Cambiar a una matriz - > ["Asabeneh"] -console.log(firstName.split('')) // Dividir en una matriz en cada letra -> ["A", "s", "a", "b", "e", "n", "e", "h"] +console.log(firstName.split()); // Cambiar a una matriz - > ["Asabeneh"] +console.log(firstName.split("")); // Dividir en una matriz en cada letra -> ["A", "s", "a", "b", "e", "n", "e", "h"] -let countries = 'Finland, Sweden, Norway, Denmark, and Iceland' +let countries = "Finland, Sweden, Norway, Denmark, and Iceland"; -console.log(countries.split(',')) // Dividir en cualquier matriz en coma -> ["Finland", " Sweden", " Norway", " Denmark", " and Iceland"] -console.log(countries.split(', ')) //  ["Finland", "Sweden", "Norway", "Denmark", "and Iceland"] +console.log(countries.split(",")); // Dividir en cualquier matriz en coma -> ["Finland", " Sweden", " Norway", " Denmark", " and Iceland"] +console.log(countries.split(", ")); //  ["Finland", "Sweden", "Norway", "Denmark", "and Iceland"] ``` -8. *trim()*: Elimina el espacio final al principio o al final de una cadena. +8. _trim()_: Elimina el espacio final al principio o al final de una cadena. ```js -let string = ' 30 Days Of JavaScript ' +let string = " 30 Days Of JavaScript "; -console.log(string) -console.log(string.trim(' ')) +console.log(string); +console.log(string.trim(" ")); -let firstName = ' Asabeneh ' +let firstName = " Asabeneh "; -console.log(firstName) -console.log(firstName.trim()) // todavía elimina espacios al principio y al final de la cadena +console.log(firstName); +console.log(firstName.trim()); // todavía elimina espacios al principio y al final de la cadena ``` ```sh - 30 Days Of JavasCript + 30 Days Of JavasCript 30 Days Of JavasCript - Asabeneh + Asabeneh Asabeneh ``` -9. *includes()*: Toma un argumento de subcadena y verifica si existe un argumento de subcadena en la cadena. *includes()* devuelve un valor booleano. Si existe una subcadena en una cadena, devuelve verdadero; de lo contrario, devuelve falso. +9. _includes()_: Toma un argumento de subcadena y verifica si existe un argumento de subcadena en la cadena. _includes()_ devuelve un valor booleano. Si existe una subcadena en una cadena, devuelve verdadero; de lo contrario, devuelve falso. ```js -let string = '30 Days Of JavaScript' +let string = "30 Days Of JavaScript"; -console.log(string.includes('Days')) // verdadero -console.log(string.includes('days')) // falso: ¡se distingue entre mayúsculas y minúsculas! -console.log(string.includes('Script')) // verdadero -console.log(string.includes('script')) // falso -console.log(string.includes('java')) // falso -console.log(string.includes('Java')) // verdadero +console.log(string.includes("Days")); // verdadero +console.log(string.includes("days")); // falso: ¡se distingue entre mayúsculas y minúsculas! +console.log(string.includes("Script")); // verdadero +console.log(string.includes("script")); // falso +console.log(string.includes("java")); // falso +console.log(string.includes("Java")); // verdadero -let country = 'Finland' +let country = "Finland"; -console.log(country.includes('fin')) // falso -console.log(country.includes('Fin')) // verdadero -console.log(country.includes('land')) // verdadero -console.log(country.includes('Land')) // falso +console.log(country.includes("fin")); // falso +console.log(country.includes("Fin")); // verdadero +console.log(country.includes("land")); // verdadero +console.log(country.includes("Land")); // falso ``` -10. *replace()*: toma como parámetro la subcadena antigua y una nueva subcadena. +10. _replace()_: toma como parámetro la subcadena antigua y una nueva subcadena. ```js -string.replace(oldsubstring, newsubstring) +string.replace(oldsubstring, newsubstring); ``` ```js -let string = '30 Days Of JavaScript' -console.log(string.replace('JavaScript', 'Python')) // 30 Days Of Python +let string = "30 Days Of JavaScript"; +console.log(string.replace("JavaScript", "Python")); // 30 Days Of Python -let country = 'Finland' -console.log(country.replace('Fin', 'Noman')) // Nomanland +let country = "Finland"; +console.log(country.replace("Fin", "Noman")); // Nomanland ``` -11. *charAt()*: Toma índice y devuelve el valor en ese índice +11. _charAt()_: Toma índice y devuelve el valor en ese índice ```js -string.charAt(index) +string.charAt(index); ``` ```js -let string = '30 Days Of JavaScript' -console.log(string.charAt(0)) // 3 +let string = "30 Days Of JavaScript"; +console.log(string.charAt(0)); // 3 -let lastIndex = string.length - 1 -console.log(string.charAt(lastIndex)) // t +let lastIndex = string.length - 1; +console.log(string.charAt(lastIndex)); // t ``` -12. *charCodeAt()*: Toma el índice y devuelve el código char (número ASCII) del valor en ese índice +12. _charCodeAt()_: Toma el índice y devuelve el código char (número ASCII) del valor en ese índice ```js -string.charCodeAt(index) +string.charCodeAt(index); ``` ```js -let string = '30 Days Of JavaScript' -console.log(string.charCodeAt(3)) // D ASCII numbero es 68 - -let lastIndex = string.length - 1 -console.log(string.charCodeAt(lastIndex)) // t ASCII es 116 +let string = "30 Days Of JavaScript"; +console.log(string.charCodeAt(3)); // D ASCII numbero es 68 +let lastIndex = string.length - 1; +console.log(string.charCodeAt(lastIndex)); // t ASCII es 116 ``` -13. *indexOf()*: Toma una subcadena y si la subcadena existe en una cadena, devuelve la primera posición de la subcadena; si no existe, devuelve -1 +13. _indexOf()_: Toma una subcadena y si la subcadena existe en una cadena, devuelve la primera posición de la subcadena; si no existe, devuelve -1 ```js -string.indexOf(substring) +string.indexOf(substring); ``` ```js -let string = '30 Days Of JavaScript' +let string = "30 Days Of JavaScript"; -console.log(string.indexOf('D')) // 3 -console.log(string.indexOf('Days')) // 3 -console.log(string.indexOf('days')) // -1 -console.log(string.indexOf('a')) // 4 -console.log(string.indexOf('JavaScript')) // 11 -console.log(string.indexOf('Script')) //15 -console.log(string.indexOf('script')) // -1 +console.log(string.indexOf("D")); // 3 +console.log(string.indexOf("Days")); // 3 +console.log(string.indexOf("days")); // -1 +console.log(string.indexOf("a")); // 4 +console.log(string.indexOf("JavaScript")); // 11 +console.log(string.indexOf("Script")); //15 +console.log(string.indexOf("script")); // -1 ``` -14. *lastIndexOf()*: Toma una subcadena y si la subcadena existe en una cadena, devuelve la última posición de la subcadena; si no existe, devuelve -1 +14. _lastIndexOf()_: Toma una subcadena y si la subcadena existe en una cadena, devuelve la última posición de la subcadena; si no existe, devuelve -1 ```js //syntax -string.lastIndexOf(substring) +string.lastIndexOf(substring); ``` ```js -let string = 'I love JavaScript. If you do not love JavaScript what else can you love.' +let string = + "I love JavaScript. If you do not love JavaScript what else can you love."; -console.log(string.lastIndexOf('love')) // 67 -console.log(string.lastIndexOf('you')) // 63 -console.log(string.lastIndexOf('JavaScript')) // 38 +console.log(string.lastIndexOf("love")); // 67 +console.log(string.lastIndexOf("you")); // 63 +console.log(string.lastIndexOf("JavaScript")); // 38 ``` -15. *concat()*: toma muchas subcadenas y las une. +15. _concat()_: toma muchas subcadenas y las une. ```js -string.concat(substring, substring, substring) +string.concat(substring, substring, substring); ``` ```js -let string = '30' -console.log(string.concat("Days", "Of", "JavaScript")) // 30DaysOfJavaScript +let string = "30"; +console.log(string.concat("Days", "Of", "JavaScript")); // 30DaysOfJavaScript -let country = 'Fin' -console.log(country.concat("land")) // Finland +let country = "Fin"; +console.log(country.concat("land")); // Finland ``` -16. *startsWith*: toma una subcadena como argumento y verifica si la cadena comienza con esa subcadena especificada. Devuelve un valor booleano (verdadero o falso). +16. _startsWith_: toma una subcadena como argumento y verifica si la cadena comienza con esa subcadena especificada. Devuelve un valor booleano (verdadero o falso). + ```js //syntax -string.startsWith(substring) +string.startsWith(substring); ``` ```js -let string = 'Love is the best to in this world' +let string = "Love is the best to in this world"; -console.log(string.startsWith('Love')) // verdadero -console.log(string.startsWith('love')) // falso -console.log(string.startsWith('world')) // falso +console.log(string.startsWith("Love")); // verdadero +console.log(string.startsWith("love")); // falso +console.log(string.startsWith("world")); // falso -let country = 'Finland' +let country = "Finland"; -console.log(country.startsWith('Fin')) // verdadero -console.log(country.startsWith('fin')) // falso -console.log(country.startsWith('land')) // falso +console.log(country.startsWith("Fin")); // verdadero +console.log(country.startsWith("fin")); // falso +console.log(country.startsWith("land")); // falso ``` -17. *endsWith*: toma una subcadena como argumento y verifica si la cadena termina con esa subcadena especificada. Devuelve un valor booleano (verdadero o falso). +17. _endsWith_: toma una subcadena como argumento y verifica si la cadena termina con esa subcadena especificada. Devuelve un valor booleano (verdadero o falso). ```js -string.endsWith(substring) +string.endsWith(substring); ``` ```js -let string = 'Love is the most powerful feeling in the world' +let string = "Love is the most powerful feeling in the world"; -console.log(string.endsWith('world')) // verdadero -console.log(string.endsWith('love')) // falso -console.log(string.endsWith('in the world')) // verdadero +console.log(string.endsWith("world")); // verdadero +console.log(string.endsWith("love")); // falso +console.log(string.endsWith("in the world")); // verdadero -let country = 'Finland' +let country = "Finland"; -console.log(country.endsWith('land')) // verdadero -console.log(country.endsWith('fin')) // falso -console.log(country.endsWith('Fin')) // falso +console.log(country.endsWith("land")); // verdadero +console.log(country.endsWith("fin")); // falso +console.log(country.endsWith("Fin")); // falso ``` -18. *search*: toma una subcadena como argumento y devuelve el índice de la primera coincidencia. El valor de búsqueda puede ser una cadena o un patrón de expresión regular. +18. _search_: toma una subcadena como argumento y devuelve el índice de la primera coincidencia. El valor de búsqueda puede ser una cadena o un patrón de expresión regular. ```js -string.search(substring) +string.search(substring); ``` ```js -let string = 'I love JavaScript. If you do not love JavaScript what else can you love.' -console.log(string.search('love')) // 2 -console.log(string.search(/javascript/gi)) // 7 +let string = + "I love JavaScript. If you do not love JavaScript what else can you love."; +console.log(string.search("love")); // 2 +console.log(string.search(/javascript/gi)); // 7 ``` -19. *match*: toma una subcadena o un patrón de expresión regular como argumento y devuelve una matriz si hay una coincidencia; de lo contrario, devuelve un valor nulo. Veamos cómo se ve un patrón de expresión regular. Comienza con /signo y termina con /signo. +19. _match_: toma una subcadena o un patrón de expresión regular como argumento y devuelve una matriz si hay una coincidencia; de lo contrario, devuelve un valor nulo. Veamos cómo se ve un patrón de expresión regular. Comienza con /signo y termina con /signo. ```js -let string = 'love' -let patternOne = /love/ // sin ninguna bandera -let patternTwo = /love/gi // g-significa buscar en todo el texto, i - no distingue entre mayúsculas y minúsculas +let string = "love"; +let patternOne = /love/; // sin ninguna bandera +let patternTwo = /love/gi; // g-significa buscar en todo el texto, i - no distingue entre mayúsculas y minúsculas ``` Coincidencia de sintaxis ```js // sintaxis -string.match(substring) +string.match(substring); ``` ```js -let string = 'I love JavaScript. If you do not love JavaScript what else can you love.' -console.log(string.match('love')) +let string = + "I love JavaScript. If you do not love JavaScript what else can you love."; +console.log(string.match("love")); ``` ```sh @@ -759,33 +769,34 @@ console.log(string.match('love')) ``` ```js -let pattern = /love/gi -console.log(string.match(pattern)) // ["love", "love", "love"] +let pattern = /love/gi; +console.log(string.match(pattern)); // ["love", "love", "love"] ``` Extraigamos números del texto usando una expresión regular. Esta no es la sección de expresiones regulares, ¡no se asuste! Cubriremos las expresiones regulares más adelante. ```js -let txt = 'In 2019, I ran 30 Days of Python. Now, in 2020 I am super exited to start this challenge' -let regEx = /\d+/ +let txt = + "In 2019, I ran 30 Days of Python. Now, in 2020 I am super exited to start this challenge"; +let regEx = /\d+/; // d con carácter de escape significa que d no es una d normal sino que actúa como un dígito // + significa uno o más dígitos, // si hay g después de eso, significa global, busque en todas partes. -console.log(txt.match(regEx)) // ["2", "0", "1", "9", "3", "0", "2", "0", "2", "0"] -console.log(txt.match(/\d+/g)) // ["2019", "30", "2020"] +console.log(txt.match(regEx)); // ["2", "0", "1", "9", "3", "0", "2", "0", "2", "0"] +console.log(txt.match(/\d+/g)); // ["2019", "30", "2020"] ``` -20. *repeat()*: toma un número como argumento y devuelve la versión repetida de la cadena. +20. _repeat()_: toma un número como argumento y devuelve la versión repetida de la cadena. ```js -string.repeat(n) +string.repeat(n); ``` ```js -let string = 'love' -console.log(string.repeat(10)) // lovelovelovelovelovelovelovelovelovelove +let string = "love"; +console.log(string.repeat(10)); // lovelovelovelovelovelovelovelovelovelove ``` ## Comprobación de tipos de datos y conversión @@ -819,10 +830,10 @@ console.log(typeof undefined) // indefinido console.log(typeof null) // objeto ``` -### Cambio del tipo de datos +### Cambio del tipo de datos - Casting: Conversión de un tipo de datos a otro tipo de datos. Usamos _parseInt()_, _parseFloat()_, _Number()_, _+ sign_, _str()_ - Cuando hacemos operaciones aritméticas, los números de cadena deben convertirse primero en enteros o flotantes; de lo contrario, devuelve un error. + Cuando hacemos operaciones aritméticas, los números de cadena deben convertirse primero en enteros o flotantes; de lo contrario, devuelve un error. #### Cadena a Int @@ -834,23 +845,23 @@ Podemos convertir cadena a número usando los siguientes métodos: - Signo más (+) ```js -let num = '10' -let numInt = parseInt(num) -console.log(numInt) // 10 +let num = "10"; +let numInt = parseInt(num); +console.log(numInt); // 10 ``` ```js -let num = '10' -let numInt = Number(num) +let num = "10"; +let numInt = Number(num); -console.log(numInt) // 10 +console.log(numInt); // 10 ``` ```js -let num = '10' -let numInt = +num +let num = "10"; +let numInt = +num; -console.log(numInt) // 10 +console.log(numInt); // 10 ``` #### Cadena a Floatante @@ -863,24 +874,24 @@ Podemos convertir cadenas flotantes en números usando los siguientes métodos: - Signo más (+) ```js -let num = '9.81' -let numFloat = parseFloat(num) +let num = "9.81"; +let numFloat = parseFloat(num); -console.log(numFloat) // 9.81 +console.log(numFloat); // 9.81 ``` ```js -let num = '9.81' -let numFloat = Number(num) +let num = "9.81"; +let numFloat = Number(num); -console.log(numFloat) // 9.81 +console.log(numFloat); // 9.81 ``` ```js -let num = '9.81' -let numFloat = +num +let num = "9.81"; +let numFloat = +num; -console.log(numFloat) // 9.81 +console.log(numFloat); // 9.81 ``` #### Flotante a Int @@ -889,59 +900,59 @@ Podemos convertir números flotantes a enteros. Usamos el siguiente método para convertir float a int: - parseInt() - + ```js -let num = 9.81 -let numInt = parseInt(num) +let num = 9.81; +let numInt = parseInt(num); -console.log(numInt) // 9 +console.log(numInt); // 9 ``` -🌕 Usted es maravilloso. Acabas de completar los desafíos del día 2 y estás dos pasos adelante en tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y tus músculos. +🌕 Usted es maravilloso. Acabas de completar los desafíos del día 2 y estás dos pasos adelante en tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y tus músculos. ## 💻 Día 2: Ejercicios ### Ejercicio: Nivel 1 1. Declare una variable llamada desafío y asígnele un valor inicial **'30 días de JavaScript'**. -2. Imprima la cadena en la consola del navegador usando __console.log()__ -3. Imprima la __longitud__ de la cadena en la consola del navegador usando _console.log()_ -4. Cambie todos los caracteres de cadena a letras mayúsculas usando el método __toUpperCase()__ -5. Cambie todos los caracteres de la cadena a letras minúsculas usando el método __toLowerCase()__ -6. Corta (segmenta) la primera palabra de la cadena usando el método __substr()__ o __substring()__ -7. Corta la frase *Days Of JavaScript* de *30 Days Of JavaScript*. -8. Verifique si la cadena contiene una palabra __Script__ usando el método __includes()__ -9. Divide la __cadena__ en un __array__ usando el método __split()__ -10. Divida la cadena 30 días de JavaScript en el espacio usando el método __split()__ -11. 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon' __divide__ la cadena en la coma y cámbiala a una matriz. -12. Cambie 30 días de JavaScript a 30 días de Python usando el método __replace()__. -13. ¿Qué es el carácter en el índice 15 en la cadena '30 días de JavaScript'? Utilice el método __charAt()__. -14. ¿Cuál es el código de carácter de J en la cadena '30 días de JavaScript' usando __charCodeAt()__ -15. Use __indexOf__ para determinar la posición de la primera aparición de __a__ en 30 días de JavaScript -16. Utilice __lastIndexOf__ para determinar la posición de la última aparición de __a__ en 30 días de JavaScript. -17. Usa __indexOf__ para encontrar la posición de la primera aparición de la palabra __porque__ en la siguiente oración:__'No puedes terminar una oración con porque porque porque es una conjunción'__ -18. Usa __lastIndexOf__ para encontrar la posición de la última aparición de la palabra __porque__ en la siguiente oración:__'No puedes terminar una oración con porque porque porque es una conjunción'__ -19. Usa __buscar__ para encontrar la posición de la primera aparición de la palabra __porque__ en la siguiente oración:__'No puedes terminar una oración con porque porque porque es una conjunción'__ -20. Use __trim()__ para eliminar cualquier espacio en blanco final al principio y al final de una cadena. Por ejemplo, '30 días de JavaScript'. -21. Use el método __startsWith()__ con la cadena *30 días de JavaScript* y haga que el resultado sea verdadero -22. Use el método __endsWith()__ con la cadena *30 días de JavaScript* y haga que el resultado sea verdadero -23. Usa el método __match()__ para encontrar todos los __a__ en 30 días de JavaScript -24. Use __concat()__ y fusione '30 días de' y 'JavaScript' en una sola cadena, '30 días de JavaScript' -25. Use el método __repeat()__ para imprimir 30 días de JavaScript 2 veces +2. Imprima la cadena en la consola del navegador usando **console.log()** +3. Imprima la **longitud** de la cadena en la consola del navegador usando _console.log()_ +4. Cambie todos los caracteres de cadena a letras mayúsculas usando el método **toUpperCase()** +5. Cambie todos los caracteres de la cadena a letras minúsculas usando el método **toLowerCase()** +6. Corta (segmenta) la primera palabra de la cadena usando el método **substr()** o **substring()** +7. Corta la frase _Days Of JavaScript_ de _30 Days Of JavaScript_. +8. Verifique si la cadena contiene una palabra **Script** usando el método **includes()** +9. Divide la **cadena** en un **array** usando el método **split()** +10. Divida la cadena 30 días de JavaScript en el espacio usando el método **split()** +11. 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon' **divide** la cadena en la coma y cámbiala a una matriz. +12. Cambie 30 días de JavaScript a 30 días de Python usando el método **replace()**. +13. ¿Qué es el carácter en el índice 15 en la cadena '30 días de JavaScript'? Utilice el método **charAt()**. +14. ¿Cuál es el código de carácter de J en la cadena '30 días de JavaScript' usando **charCodeAt()** +15. Use **indexOf** para determinar la posición de la primera aparición de **a** en 30 días de JavaScript +16. Utilice **lastIndexOf** para determinar la posición de la última aparición de **a** en 30 días de JavaScript. +17. Usa **indexOf** para encontrar la posición de la primera aparición de la palabra **porque** en la siguiente oración:**'No puedes terminar una oración con porque porque porque es una conjunción'** +18. Usa **lastIndexOf** para encontrar la posición de la última aparición de la palabra **porque** en la siguiente oración:**'No puedes terminar una oración con porque porque porque es una conjunción'** +19. Usa **buscar** para encontrar la posición de la primera aparición de la palabra **porque** en la siguiente oración:**'No puedes terminar una oración con porque porque porque es una conjunción'** +20. Use **trim()** para eliminar cualquier espacio en blanco final al principio y al final de una cadena. Por ejemplo, '30 días de JavaScript'. +21. Use el método **startsWith()** con la cadena _30 días de JavaScript_ y haga que el resultado sea verdadero +22. Use el método **endsWith()** con la cadena _30 días de JavaScript_ y haga que el resultado sea verdadero +23. Usa el método **match()** para encontrar todos los **a** en 30 días de JavaScript +24. Use **concat()** y fusione '30 días de' y 'JavaScript' en una sola cadena, '30 días de JavaScript' +25. Use el método **repeat()** para imprimir 30 días de JavaScript 2 veces ### Ejercicio: Nivel 2 1. Usando console.log() imprima la siguiente declaración: - ```sh - The quote 'There is no exercise better for the heart than reaching down and lifting people up.' by John Holmes teaches us to help one another. - ``` + ```sh + The quote 'There is no exercise better for the heart than reaching down and lifting people up.' by John Holmes teaches us to help one another. + ``` 2. Usando console.log() imprima la siguiente cita de la Madre Teresa: - ```sh - "Love is not patronizing and charity isn't about pity, it is about love. Charity and love are the same -- with charity you give love, so don't just give money but reach out your hand instead." - ``` + ```sh + "Love is not patronizing and charity isn't about pity, it is about love. Charity and love are the same -- with charity you give love, so don't just give money but reach out your hand instead." + ``` 3. Compruebe si typeof '10' es exactamente igual a 10. Si no, hágalo exactamente igual. 4. Compruebe si parseFloat('9.8') es igual a 10, si no, hágalo exactamente igual a 10. @@ -961,19 +972,21 @@ console.log(numInt) // 9 5 1 5 25 125 ``` -12. Usa __substr__ para separar la frase __porque porque porque__ de la siguiente oración:__'No puedes terminar una oración con porque porque porque es una conjunción'__ +12. Usa **substr** para separar la frase **porque porque porque** de la siguiente oración:**'No puedes terminar una oración con porque porque porque es una conjunción'** ### Ejercicios: Nivel 3 -1. 'El amor es lo mejor que hay en este mundo. Algunos encontraron su amor y algunos todavía están buscando su amor. Cuente el número de palabras __amor__ en esta oración. -2. Usa __match()__ para contar el número de todos los __porque__ en la siguiente oración:__'No puedes terminar una oración con porque porque porque es una conjunción'__ +1. 'El amor es lo mejor que hay en este mundo. Algunos encontraron su amor y algunos todavía están buscando su amor. Cuente el número de palabras **amor** en esta oración. +2. Usa **match()** para contar el número de todos los **porque** en la siguiente oración:**'No puedes terminar una oración con porque porque porque es una conjunción'** 3. Limpia el siguiente texto y encuentra la palabra más frecuente (pista, usa replace y expresiones regulares). - ```js - const sentence = '%I $am@% a %tea@cher%, &and& I lo%#ve %te@a@ching%;. The@re $is no@th@ing; &as& mo@re rewarding as educa@ting &and& @emp%o@weri@ng peo@ple. ;I found tea@ching m%o@re interesting tha@n any ot#her %jo@bs. %Do@es thi%s mo@tiv#ate yo@u to be a tea@cher!? %Th#is 30#Days&OfJavaScript &is al@so $the $resu@lt of &love& of tea&ching' - ``` + ```js + const sentence = + "%I $am@% a %tea@cher%, &and& I lo%#ve %te@a@ching%;. The@re $is no@th@ing; &as& mo@re rewarding as educa@ting &and& @emp%o@weri@ng peo@ple. ;I found tea@ching m%o@re interesting tha@n any ot#her %jo@bs. %Do@es thi%s mo@tiv#ate yo@u to be a tea@cher!? %Th#is 30#Days&OfJavaScript &is al@so $the $resu@lt of &love& of tea&ching"; + ``` + 4. Calcula el ingreso anual total de la persona extrayendo los números del siguiente texto. 'Él gana 5000 euros de salario por mes, bono anual de 10000 euros, cursos en línea de 15000 euros por mes.' 🎉 ¡FELICITACIONES! 🎉 -[<< Día 1](../readMe.md) | +[<< Día 1](./readme.md) | [Day 3 >>](./dia_03_Booleanos_Operadores_Date/dia_03_Boleanos_Operadores_Date.md) diff --git a/Spanish/dia_03_Booleanos_Operadores_Date/dia_03_Boleanos_Operadores_Date.md b/Spanish/dia_03_Booleanos_Operadores_Date/dia_03_Boleanos_Operadores_Date.md new file mode 100644 index 00000000..6fb7a6fa --- /dev/null +++ b/Spanish/dia_03_Booleanos_Operadores_Date/dia_03_Boleanos_Operadores_Date.md @@ -0,0 +1,632 @@ +
+

30 Días De JavaScript: Booleanos, Operadores, Date

+ + + + + Twitter Follow + + +Autor: +Asabeneh Yetayeh
+ Enero, 2020 + + +
+ +[<< Day 2](../dia_02_tipos_de_datos.md) | [Day 4 >>](../dia_04_Condicionales/dia_04_Condicionales.md) + +![Thirty Days Of JavaScript](../images/banners/day_1_3.png) + +- [📔 Día 3](#-day-3) + - [Booleanos](#booleanos) + - [Valores verdaderos](#valores-verdaderos) + - [Valores falsos](#valores-falsos) + - [Undefined](#undefined) + - [Null](#null) + - [Operadores](#operadores) + - [Operadores de Asignación](#operadores-de-asignación) + - [Operadores Aritméticos](#operadores-aritméticos) + - [Operadores de Comparación](#operadores-de-comparación) + - [Operadores Lógicos](#operadores-lógicos) + - [Operadores de Incremento](#operadores-de-incremento) + - [Operadores de Decremento](#operadores-de-decremento) + - [Operadores Ternarios](#operadores-ternarios) + - [Precedencia de Operadores](#precedencia-de-operadores) + - [Métodos Window](#métodos-window) + - [Método Window alert()](#método-window-alert) + - [Método Window prompt() ](#método-window-prompt) + - [Método Window confirm() ](#método-window-confirm) + - [Objeto Date](#objeto-date) + - [Crear un objeto de tiempo](#crear-un-objeto-de-tiempo) + - [Obtener el año completo](#obtener-el-año-completo) + - [Obtener mes](#obtener-mes) + - [Obtener fecha](#obtener-fecha) + - [Obtener día](#obtener-día) + - [Obtener horas](#obtener-horas) + - [Obtener minutos](#obtener-minutos) + - [Obtener segundos](#obtener-segundos) + - [Obtener tiempo](#obtener-tiempo) + - [💻 Día 3: Ejercicios](#💻-día-3-ejercicios) + - [Ejercicios: Nivel 1](#ejercicios-nivel-1) + - [Ejercicios: Nivel 2](#ejercicios-nivel-2) + - [Ejercicios: Nivel 3](#ejercicios-nivel-3) + +# 📔 Day 3 + +## Booleanos + +Un tipo de dato booleano representa uno de los dos valores: _true_ o _false_. El valor booleano es true (verdadero) o false (falso) El uso de estos tipos de datos quedará claro cuando veas operadores de comparación. Cualquier comparación devuelve un valor booleano que es true o false. + +**Ejemplos: Valores Booleanos** + +```js +let isLightOn = true; +let isRaining = false; +let isHungry = false; +let isMarried = true; +let truValue = 4 > 3; // true +let falseValue = 4 < 3; // false +``` + +Acordamos que los valores booleanos son true o false. + +### Valores verdaderos + +- Todos los números (positivos y negativos) son verdaderos excepto cero +- Todos las string (cadenas) son verdaderos excepto un string vacío ('') +- El booleano true + +### Valores falsos + +- 0 +- 0n +- null +- undefined +- NaN +- El booleano false +- '', "", ``, string vacío + +Es bueno recordar esos valores verdaderos y falsos. En una sección posterior, los usaremos con condiciones para tomar decisiones. + +## Undefined + +Si declaramos una variable y no le asignamos un valor, el valor será undefined (indefinido). Además de esto, si una función no devuelve el valor, será undefined. + +```js +let firstName; +console.log(firstName); //no definido, porque aún no está asignado un valor +``` + +## Null + +```js +let empty = null; +console.log(empty); // -> null (nulo) , significa que no tiene valor +``` + +## Operadores + +### Operadores de Asignación + +Un signo igual en JavaScript es un operador de asignación. Se utiliza para asignar una variable. + +```js +let firstName = "Asabeneh"; +let country = "Finland"; +``` + +Operadores de asignación + +![Assignment operators](../images/assignment_operators.png) + +### Operadores Aritméticos + +Los operadores aritméticos son operadores matemáticos. + +- Suma(+): a + b +- Resta(-): a - b +- Multiplicación(_): a _ b +- División(/): a / b +- Módulo(%): a % b +- Exponencial(**): a ** b + +```js +let numOne = 4; +let numTwo = 3; +let sum = numOne + numTwo; +let diff = numOne - numTwo; +let mult = numOne * numTwo; +let div = numOne / numTwo; +let remainder = numOne % numTwo; +let powerOf = numOne ** numTwo; + +console.log(sum, diff, mult, div, remainder, powerOf); // 7,1,12,1.33,1, 64 +``` + +```js +const PI = 3.14; +let radius = 100; // longitud en metros + +//Calculemos el área de un circulo +const areaOfCircle = PI * radius * radius; +console.log(areaOfCircle); // 314 m + +const gravity = 9.81; // en m/s2 +let mass = 72; // en Kilogram + +// Calculemos el peso de un objeto. +const weight = mass * gravity; +console.log(weight); // 706.32 N(Newton) + +const boilingPoint = 100; // temperatura en °C, punto de ebullición del agua +const bodyTemp = 37; // temperatura corporal en °C + +// Concatenación de string con números usando interpolación de strings +/* + El punto de ebullición del agua es de 100 °C. + La temperatura del cuerpo humano es de 37 oC. + La gravedad de la tierra es de 9.81 m/s2. + */ +console.log( + `El punto de ebullición del agua es de ${boilingPoint} °C.\nLa temperatura del cuerpo humano es de ${bodyTemp} °C.\nLa gravedad de la tierra es de ${gravity} m / s2.` +); +``` + +### Operadores de Comparación + +En programación comparamos valores, usamos operadores de comparación para comparar dos valores. Comprobamos si un valor es mayor, menor o igual a otro valor. + +![Operadores de Comparación](../images/comparison_operators.png) +**Ejemplos: Operadores de Comparación** + +```js +console.log(3 > 2); // true, porque 3 es mayor que 2 +console.log(3 >= 2); // true, porque 3 es mayor que 2 +console.log(3 < 2); // false, porque 3 es mayor que 2 +console.log(2 < 3); // true, porque 2 es menor que 3 +console.log(2 <= 3); // true, porque 2 es menor que 3 +console.log(3 == 2); // false, porque 3 no es igual a 2 +console.log(3 != 2); // true, porque 3 no es igual a 2 +console.log(3 == "3"); // true, compara solamente el valor +console.log(3 === "3"); // false, compara tanto el valor como el tipo de dato +console.log(3 !== "3"); // true, compara tanto el valor como el tipo de dato +console.log(3 != 3); // false, compara solo valor +console.log(3 !== 3); // false, compara tanto el valor como el tipo de dato +console.log(0 == false); // true, equivalente +console.log(0 === false); // false, No exactamente igual +console.log(0 == ""); // true, equivalente +console.log(0 == " "); // true, equivalente +console.log(0 === ""); // false, No exactamente igual +console.log(1 == true); // true, equivalente +console.log(1 === true); // false, No exactamente igual +console.log(undefined == null); // true +console.log(undefined === null); // false +console.log(NaN == NaN); // false, diferente +console.log(NaN === NaN); // false +console.log(typeof NaN); // tipo número + +console.log("mango".length == "avocado".length); // false +console.log("mango".length != "avocado".length); // true +console.log("mango".length < "avocado".length); // true +console.log("milk".length == "meat".length); // true +console.log("milk".length != "meat".length); // false +console.log("tomato".length == "potato".length); // true +console.log("python".length > "dragon".length); // false +``` + +Trate de entender las comparaciones anteriores con algo de lógica. Recuerde que ninguna lógica puede ser difícil. +JavaScript es de alguna manera un lenguaje extraño de programación. El código JavaScript se ejecuta y le da un resultado, pero a menos que sea bueno en él, puede que no sea el resultado deseado. + +Como regla general, si un valor no es verdadero con == no será igual con ===. Usar === es más seguro que usar ==. El siguiente [link](https://dorey.github.io/JavaScript-Equality-Table/) tiene una lista exhaustiva de comparaciones de tipos de datos. + +### Operadores Lógicos + +Los siguientes símbolos son los operadores lógicos más comunes: +&&(ampersand) , ||(pipe) and !(negation). +El operador && se vuelve verdadero sólo si los dos operandos son verdaderos. +El operador || se vuelve verdadero cualquiera de los operandos es verdadero. +El operador ! niega true a false y false a true. + +```js +// && ejemplo de operador ampersand + +const check = 4 > 3 && 10 > 5; // true && true -> true +const check = 4 > 3 && 10 < 5; // true && false -> false +const check = 4 < 3 && 10 < 5; // false && false -> false + +// || ejemplo de operador pipe + +const check = 4 > 3 || 10 > 5; // true || true -> true +const check = 4 > 3 || 10 < 5; // true || false -> true +const check = 4 < 3 || 10 < 5; // false || false -> false + +//! ejemplos de negación + +let check = 4 > 3; // true +let check = !(4 > 3); // false +let isLightOn = true; +let isLightOff = !isLightOn; // false +let isMarried = !false; // true +``` + +### Operadores de Incremento + +En JavaScript usamos el operador de incremento para aumentar un valor almacenado en una variable. El incremento podría ser antes o después del incremento. Veamos cada uno de ellos: + +1. Pre-incremento + +```js +let count = 0; +console.log(++count); // 1 +console.log(count); // 1 +``` + +1. Post-incremento + +```js +let count = 0; +console.log(count++); // 0 +console.log(count); // 1 +``` + +Usamos la mayor parte del tiempo post-incremento. Pero debes recordar cómo usar el operador de incremento posterior. + +### Operadores de Decremento + +En JavaScript usamos el operador de decremento para disminuir un valor almacenado en una variable. El decremento puede ser previo o posterior al decremento. Veamos cada uno de ellos: + +1. Pre-decremento + +```js +let count = 0; +console.log(--count); // -1 +console.log(count); // -1 +``` + +2. Post-decremento + +```js +let count = 0; +console.log(count--); // 0 +console.log(count); // -1 +``` + +### Operadores Ternarios + +El operador ternario permite escribir una condición. +Otra forma de escribir condicionales es usando operadores ternarios. Mira los siguientes ejemplos: + +```js +let isRaining = true; +isRaining + ? console.log("Necesitas un impermeable.") + : console.log("No necesitas un impermeable."); +isRaining = false; + +isRaining + ? console.log("Necesitas un impermeable.") + : console.log("No necesitas un impermeable."); +``` + +```sh +Necesitas un impermeable. +No necesitas un impermeable. +``` + +```js +let number = 5; +number > 0 + ? console.log(`${number} is a positive number`) + : console.log(`${number} is a negative number`); +number = -5; + +number > 0 + ? console.log(`${number} is a positive number`) + : console.log(`${number} is a negative number`); +``` + +```sh +5 es un número positivo +-5 es un número negativo +``` + +### Precedencia de Operadores + +Me gustaría recomendarle que lea sobre la precedencia de operadores en el siguiente [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) + +## Métodos Window + +### Método Window alert() + +Cómo ha visto al principio, el método alert() muestra un cuadro de alerta con un mensaje específico y un botón Aceptar. Es un método incorporado y toma un argumento. + +```js +alert(message); +``` + +```js +alert("Bienvenido a 30DaysOfJavaScript"); +``` + +No uses demasiada alert (alertas) porque molesta, úsala solo para probar. + +### Método Window prompt() + +Los métodos window prompt (entrada) muestran un cuadro de solicitud con una entrada en su navegador para tomar valores de entrada y los datos de entrada se pueden almacenar en una variable. El método prompt() toma dos argumentos. El segundo argumento es opcional. + +```js +prompt("texto requerido", "texto opcional"); +``` + +```js +let number = prompt("Ingrese un número", "El número va aquí"); +console.log(number); +``` + +### Método Window confirm() + +El método confirm() muestra un cuadro de diálogo con un mensaje específico, junto con un botón Aceptar y Cancelar. Un cuadro de confirmación se usa a menudo para pedir permiso a un usuario para ejecutar algo. Window confirm() toma una cadena como argumento. Al hacer clic en Aceptar se obtiene un valor true, mientras que al hacer clic en el botón Cancelar se obtiene un valor false. + +```js +const agree = confirm("¿Estás seguro de que quieres eliminar? "); +console.log(agree); // el resultado será true o false según el click en el cuadro de diálogo +``` + +Estos no son todos los métodos de window, tendremos una sección separada para profundizar en los métodos de window. + +## Objeto Date + +El tiempo es una cosa importante. Nos gusta saber la hora de una determinada actividad o evento. En JavaScript, la hora y la fecha actuales se crean utilizando el objeto Date de JavaScript. El objeto que creamos usando el objeto Date proporciona muchos métodos para trabajar con fecha y hora. Los métodos que usamos para obtener información de fecha y hora de los valores de un objeto Date comienzan con una palabra _get_ porque proporciona la información. +_getFullYear(), getMonth(), getDate(), getDay(), getHours(), getMinutes, getSeconds(), getMilliseconds(), getTime(), getDay()_ + +![Date time Object](../images/date_time_object.png) + +### Crear un objeto de tiempo + +Una vez que creamos el objeto de tiempo. El objeto de tiempo proporcionará información sobre el tiempo. Vamos a crear un objeto de tiempo + +```js +const now = new Date(); +console.log(now); // Sáb 04 de enero de 2020 00:56:41 GMT+0200 (hora estándar de Europa del Este +``` + +Hemos creado un objeto de tiempo y podemos acceder a cualquier información de fecha y hora del objeto utilizando los métodos de obtención que hemos mencionado en la tabla. + +### Obtener el año completo + +Extraigamos u obtengamos el año completo de un objeto de tiempo. + +```js +const now = new Date(); +console.log(now.getFullYear()); // 2020 +``` + +### Obtener mes + +Extraigamos u obtengamos el mes de un objeto de tiempo. + +```js +const now = new Date(); +console.log(now.getMonth()); // 0, porque el mes es enero, meses(0-11) +``` + +### Obtener fecha + +Extraigamos u obtengamos la fecha del mes de un objeto de tiempo. + +```js +const now = new Date(); +console.log(now.getDate()); // 4, porque es el 4to dia del mes, día (1-31) +``` + +### Obtener día + +Extraigamos u obtengamos el día de la semana de un objeto de tiempo. + +```js +const now = new Date(); +console.log(now.getDay()); // 6, porque el día es sábado que es el día 7 +// El domingo es 0, el lunes es 1 y el sábado es 6 +// Obtener el día de la semana como un número (0-6) +``` + +### Obtener horas + +Extraigamos u obtengamos las horas de un objeto de tiempo. + +```js +const now = new Date(); +console.log(now.getHours()); // 0, porque el tiempo es 00:56:41 +``` + +### Obtener minutos + +Extraigamos u obtengamos los minutos de un objeto de tiempo. + +```js +const now = new Date(); +console.log(now.getMinutes()); // 56, porque el tiempo es 00:56:41 +``` + +### Obtener segundos + +Extraigamos u obtengamos los segundos de un objeto de tiempo. + +```js +const now = new Date(); +console.log(now.getSeconds()); // 41, porque el tiempo es 00:56:41 +``` + +### Obtener tiempo + +Este método da tiempo en milisegundos a partir del 1 de enero de 1970. También se conoce como tiempo Unix. Podemos obtener el tiempo de Unix de dos maneras: + +1. Usando _getTime()_ + +```js +const now = new Date(); // +console.log(now.getTime()); // 1578092201341, este es el número de segundos que han pasado desde el 1ero de Enero de 1970 al 4 de Enero del 2020 00:56:41 +``` + +2. Usando _Date.now()_ + +```js +const allSeconds = Date.now(); // +console.log(allSeconds); // 1578092201341, este es el número de segundos que han pasado desde el 1ero de Enero de 1970 al 4 de Enero del 2020 00:56:41 + +const timeInSeconds = new Date().getTime(); +console.log(allSeconds == timeInSeconds); // true +``` + +Vamos a formatear estos valores a un formato de tiempo legible por humanos. +**Ejemplo:** + +```js +const now = new Date(); +const year = now.getFullYear(); // return años +const month = now.getMonth() + 1; // return meses(0 - 11) +const date = now.getDate(); // return días (1 - 31) +const hours = now.getHours(); // return horas (0 - 23) +const minutes = now.getMinutes(); // return minutos (0 -59) + +console.log(`${date}/${month}/${year} ${hours}:${minutes}`); // 4/1/2020 0:56 +``` + +🌕 Tienes una energía ilimitada. Acabas de completar los desafíos del día 3 y estás a tres pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y tus músculos. + +## 💻 Día 3: Ejercicios + +### Ejercicios: Nivel 1 + +1. Declare las siguientes variables; firstName, lastName, country, city, age, isMarried, year y asignar un valor, use el operador typeof para verificar diferentes tipos de datos. +2. Verifique si typeof '10' es igual a 10 +3. Verifique si parseInt('9.8') es igual a 10 +4. Verifique cualquier valor booleano true o false. + + 1. Escriba tres declaraciones de JavaScript que proporcionen un valor verdadero. + 2. Escriba tres declaraciones de JavaScript que proporcionen un valor falso. + +5. Calcule primero el resultado de la siguiente expresión de comparación sin usar console.log(). Después de decidir el resultado, confirmelo usando console.log() + + 1. 4 > 3 + 2. 4 >= 3 + 3. 4 < 3 + 4. 4 <= 3 + 5. 4 == 4 + 6. 4 === 4 + 7. 4 != 4 + 8. 4 !== 4 + 9. 4 != '4' + 10. 4 == '4' + 11. 4 === '4' + 12. Encuentre la longitud de Python y jargon y haga una declaración de comparación falsa. + +6. Calcule primero el resultado de las siguientes expresiones sin usar console.log(). Después de decidir el resultado, confirmelo usando console.log() + + 1. 4 > 3 && 10 < 12 + 2. 4 > 3 && 10 > 12 + 3. 4 > 3 || 10 < 12 + 4. 4 > 3 || 10 > 12 + 5. !(4 > 3) + 6. !(4 < 3) + 7. !(false) + 8. !(4 > 3 && 10 < 12) + 9. !(4 > 3 && 10 > 12) + 10. !(4 === '4') + 11. No hay 'on' tanto en dragon como en python + +7. Utilice el objeto Date para realizar las siguientes actividades + 1. ¿Qué año es hoy? + 2. ¿Qué mes es hoy con un número? + 3. ¿Qué fecha es hoy? + 4. ¿Qué día es hoy con un número? + 5. ¿Cuál es la hora actual? + 6. ¿Cuántos minutos hay actualmente? + 7. Averigüe el número de segundos transcurridos desde el 1 de enero de 1970 hasta ahora. + +### Ejercicios: Nivel 2 + +1. Escriba un script que solicite al usuario que ingrese la base y la altura del triángulo y calcule el área de un triángulo (área = 0,5 x b x h). + + ```sh + Ingrese base: 20 + Ingrese altura: 10 + El área del triángulo es: 100 + ``` + +1. Escriba un script que solicite al usuario que ingrese el lado a, el lado b y el lado c del triángulo y calcule el perímetro del triángulo (perímetro = a + b + c) + + ```sh + Ingrese lado a: 5 + Ingrese lado b: 4 + Ingrese lado c: 3 + El perimetro del triangulo es: 12 + ``` + +1. Obtenga el largo y el ancho usando prompt y calcule el área del rectángulo (área = largo x ancho y el perímetro del rectángulo (perímetro = 2 x (largo + ancho)) +1. Obtenga el radio usando prompt y calcule el área de un círculo (área = pi x r x r) y la circunferencia de un círculo (c = 2 x pi x r) donde pi = 3.14. +1. Calcule la pendiente, la intersección X y la intersección Y de y = 2x -2 +1. La pendiente es m = (y2-y1)/(x2-x1). Encuentra la pendiente entre el punto (2, 2) y el punto (6,10) +1. Compare la pendiente de las dos preguntas anteriores. +1. Calcula el valor de y (y = x2 + 6x + 9). Trate de usar diferentes valores de x y averigüe en qué valor de x y es 0. +1. Escriba un script con prompt que solicite al usuario que ingrese las horas y la tarifa por hora. ¿Calcular el salario de la persona? + + ```sh + Ingrese horas: 40 + Introduce la tarifa por hora: 28 + Su ganancia semanal es 1120 + ``` + +1. Si la longitud de su nombre es mayor que 7, diga que su nombre es largo; de lo contrario, diga que su nombre es corto. +1. Compare la longitud de su nombre y la longitud de su apellido y debería obtener este resultado. + + ```js + let firstName = "Asabeneh"; + let lastName = "Yetayeh"; + ``` + + ```sh + Tu primer nombre, Asabeneh, es más largo que tu apellido, Yetayeh. + ``` + +1. Declare dos variables _myAge_ y _yourAge_ y asignarles los valores iniciales y myAge y yourAge. + + ```js + let myAge = 250; + let yourAge = 25; + ``` + + ```sh + Soy 225 años mayor que tú. + ``` + +1. Usando prompt, obtenga el año en que nació el usuario y, si el usuario tiene 18 años o más, permita que el usuario conduzca, si no dígale que espere una cierta cantidad de años. + + ```sh + + Introduzca el año de nacimiento: 1995 + Tienes 25 años. Tienes la edad suficiente para conducir. + + Introduzca el año de nacimiento: 2005 + Tienes 15 años. Podrás conducir después de 3 años. + ``` + +1. Escriba un script que solicite por prompt al usuario que ingrese el número de años. Calcular el número de segundos que puede vivir una persona. Supongamos que alguien vive solo cien años + + ```sh + Ingrese el número de años de vida: 100 + Viviste 3153600000 segundos. + ``` + +1. Cree un formato de hora legible por humanos usando el objeto Date. + 1. YYYY-MM-DD HH:mm + 2. DD-MM-YYYY HH:mm + 3. DD/MM/YYYY HH:mm + +### Ejercicios: Nivel 3 + +1. Cree un formato de hora legible por humanos usando el objeto Date. La hora y el minuto deben ser siempre dos dígitos (7 horas deben ser 07 y 5 minutos deben ser 05) + 1. YYY-MM-DD HH:mm eg. 20120-01-02 07:05 + +[<< Day 2](../dia_02_tipos_de_datos.md) | [Day 4 >>](../dia_04_Condicionales/dia_04_Condicionales.md) diff --git a/Spanish/dia_04_Condicionales/dia_04_Condicionales.md b/Spanish/dia_04_Condicionales/dia_04_Condicionales.md new file mode 100644 index 00000000..57131824 --- /dev/null +++ b/Spanish/dia_04_Condicionales/dia_04_Condicionales.md @@ -0,0 +1,376 @@ +
+

30 Días de JavaScript: Condicionales

+ + + + + Twitter Follow + + +Autor: +Asabeneh Yetayeh
+ Enero, 2020 + + +
+ +[<< Día 3](../dia_03_Booleanos_Operadores_Date/dia_03_Boleanos_Operadores_Date.md) | [Día 5 >>](../dia_05_Arreglos/dia_05_arreglos.md) + +![Thirty Days Of JavaScript](../images/banners/day_1_4.png) + +- [📔 Día 4](#📔-día-4) + - [Condicionales](#condicionales) + - [If](#if) + - [If Else](#if-else) + - [If Else if Else](#if-else-if-else) + - [Switch](#switch) + - [Operadores Ternarios](#operadores-ternarios) + - [💻 Ejercicios](#💻-ejercicios) + - [Ejercicios: Nivel 1](#ejercicios-nivel-1) + - [Ejercicios: Nivel 2](#ejercicios-nivel-2) + - [Ejercicios: Nivel 3](#ejercicios-nivel-3) + +# 📔 Día 4 + +## Condicionales + +Las declaraciones condicionales se utilizan para tomar decisiones basadas en diferentes condiciones. De forma predeterminada, las declaraciones en el script de JavaScript se ejecutan secuencialmente de arriba a abajo. Si la lógica de procesamiento lo requiere, el flujo secuencial de ejecución se puede alterar de dos formas: + +- Ejecución condicional: se ejecutará un bloque de una o más sentencias si cierta expresión es true +- Ejecución repetitiva: un bloque de una o más sentencias se ejecutará de forma repetitiva siempre que cierta expresión sea verdadera. En esta sección, cubriremos las declaraciones _if_, _else_ y _else if_. Los operadores lógicos y de comparación que aprendimos en las secciones anteriores serán útiles aquí. + +Las condiciones se pueden implementar de las siguientes maneras: + +- if +- if else +- if else if else +- switch +- operador ternario + +### If + +En JavaScript y otros lenguajes de programación, la palabra clave _if_ se usa para verificar si una condición es true y ejecutar el bloque de código. Para crear una condición if, necesitamos la palabra clave _if_, la condición va dentro de paréntesis y el bloque de código va dentro de llaves ({}). + +```js +// sintaxis +if (condition) { + //esta parte del código se ejecuta cuando es true +} +``` + +**Example:** + +```js +let num = 3; +if (num > 0) { + console.log(`${num} es un número positivo`); +} +// 3 es un número positivo +``` + +Como puede ver en el ejemplo de condición anterior, 3 es mayor que 0, por lo que es un número positivo. La condición era true y se ejecutó el bloque de código. Sin embargo, si la condición es falsa, no veremos ningún resultado. + +```js +let isRaining = true; +if (isRaining) { + console.log("Recuerda llevar tu impermeable."); +} +``` + +Lo mismo ocurre con la segunda condición, si isRaining es false, el bloque if no se ejecutará y no veremos ninguna respuesta. Para ver el resultado de una condición false, debemos tener otro bloque, que será _else_. + +### If Else + +Si la condición es true, se ejecutará el primer bloque, si no, se ejecutará la condición else. + +```js +// sintaxis +if (condition) { + // esta parte del código se ejecuta para la condición de verdad +} else { + // esta parte del código se ejecuta para una condición falsa +} +``` + +```js +let num = 3; +if (num > 0) { + console.log(`${num} es un número positivo`); +} else { + console.log(`${num} es un número negativo`); +} +// 3 es un número positivo + +num = -3; +if (num > 0) { + console.log(`${num} es un número positivo`); +} else { + console.log(`${num} es un número negativo`); +} +// -3 es un número negativo +``` + +```js +let isRaining = true; +if (isRaining) { + console.log("Necesitas un impermeable."); +} else { + console.log("No hay necesidad de un impermeable."); +} +// Necesitas un impermeable. + +isRaining = false; +if (isRaining) { + console.log("Necesitas un impermeable."); +} else { + console.log("No hay necesidad de un impermeable."); +} +// No hay necesidad de un impermeable. +``` + +La última condición es falsa, por lo que se ejecutó el bloque else. ¿Qué pasa si tenemos más de dos condiciones? En ese caso, usaremos las condiciones _else if_. + +### If Else if Else + +En nuestra vida, tomamos decisiones diariamente. Tomamos decisiones no comprobando una o dos condiciones, sino que tomamos decisiones basadas en múltiples condiciones. Al igual que nuestra vida diaria, la programación también está llena de condiciones. Usamos _else if_ cuando tenemos múltiples condiciones. + +```js +// sintaxis +if (condition) { + // código +} else if (condition) { + // código +} else { + // código +} +``` + +**Ejemplo:** + +```js +let a = 0; +if (a > 0) { + console.log(`${a} es un número positivo`); +} else if (a < 0) { + console.log(`${a} es un número negativo`); +} else if (a == 0) { + console.log(`${a} es cero`); +} else { + console.log(`${a} no es un número`); +} +``` + +```js +// if else if else +let weather = "sunny"; +if (weather === "rainy") { + console.log("Necesitas un impermeable."); +} else if (weather === "cloudy") { + console.log("Puede que haga frío, necesitas una chaqueta."); +} else if (weather === "sunny") { + console.log("Sal tranquilo."); +} else { + console.log("No hay necesidad de un impermeable."); +} +``` + +### Switch + +Switch es una alternativa para **if else if else else**. +La instrucción switch comienza con una palabra clave _switch_ seguida de un paréntesis y un bloque de código. Dentro del bloque de código tendremos diferentes casos. El bloque de casos se ejecuta si el valor en el paréntesis de la declaración de cambio coincide con el valor del caso. La declaración de break es para terminar la ejecución. Esto para que la ejecución del código se detenga después de que se cumpla la condición. El bloque default se ejecuta si todos los casos no cumplen la condición. + +```js +switch (caseValue) { + case 1: + // código + break; + case 2: + // código + break; + case 3: + // código + break; + default: + // código +} +``` + +```js +let weather = "cloudy"; +switch (weather) { + case "rainy": + console.log("Necesitas un impermeable."); + break; + case "cloudy": + console.log("Puede que haga frío, necesitas una chaqueta."); + break; + case "sunny": + console.log("Sal tranquilo."); + break; + default: + console.log("No hay necesidad de un impermeable."); +} + +// Más Ejemplos switch +let dayUserInput = prompt("¿Qué día es hoy?"); +let day = dayUserInput.toLowerCase(); + +switch (day) { + case "lunes": + console.log("Hoy es Lunes"); + break; + case "martes": + console.log("Hoy es Martes"); + break; + case "miércoles": + console.log("Hoy es Miércoles"); + break; + case "jueves": + console.log("Hoy es Jueves"); + break; + case "viernes": + console.log("Hoy es Viernes"); + break; + case "sábado": + console.log("Hoy es Sábado"); + break; + case "domingo": + console.log("Hoy es Domingo"); + break; + default: + console.log("No es un día de semana."); +} +``` + +// Ejemplos de condiciones en los casos + +```js +let num = prompt("Ingrese un número"); +switch (true) { + case num > 0: + console.log("El número es positivo"); + break; + case num == 0: + console.log("El número es cero"); + break; + case num < 0: + console.log("El número es negativo"); + break; + default: + console.log("El valor ingresado no era un número"); +} +``` + +### Operadores Ternarios + +Otra forma de escribir condicionales es usando operadores ternarios. Hemos cubierto esto en otras secciones, pero también deberíamos mencionarlo aquí. + +```js +let isRaining = true; +isRaining + ? console.log("Necesitas un impermeable.") + : console.log("No hay necesidad de un impermeable."); +``` + +🌕 Tienes una energía ilimitada. Acabas de completar los desafíos del día 4 y llevas cuatro pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y tus músculos. + +## 💻 Ejercicios + +### Ejercicios: Nivel 1 + +1. Obtenga la entrada del usuario usando el aviso ("Ingrese su edad:"). Si el usuario tiene 18 años o más, muestre el mensaje: 'Tiene la edad suficiente para conducir', pero si no tiene 18 años, brinde otro mensaje que indique que debe esperar la cantidad de años que necesita para cumplir 18. + + ```sh + Ingrese su edad: 30 + Tiene la edad suficiente para conducir. + + Ingrese su edad:15 + Te faltan 3 años para conducir. + ``` + +1. Compara los valores de myAge y yourAge usando if... else. Según la comparación, registre el resultado en la consola indicando quién es mayor (tú o yo). Utilice prompt(“Ingrese su edad:”) para obtener la edad como entrada. + + ```sh + Ingrese su edad: 30 + Eres 5 años mayor que yo. + ``` + +1. Si a es mayor que b, devuelve 'a es mayor que b'; de lo contrario, 'a es menor que b'. Trate de implementarlo de maneras diferentes + + - Usando if else + - operador ternario. + + ```js + let a = 4; + let b = 3; + ``` + + ```sh + 4 es mayor que 3 + ``` + +1. Los números pares son divisibles por 2 y el resto es cero. ¿Cómo verificar si un número es par o no usando JavaScript? + + ```sh + Ingrese un número: 2 + 2 es un número par + + Ingrese un número: 9 + 9 es un número impar + ``` + +### Ejercicios: Nivel 2 + +1. Escriba un código que pueda calificar a los estudiantes de acuerdo con sus puntajes: + - 80-100, A + - 70-89, B + - 60-69, C + - 50-59, D + - 0-49, F +1. Consulta si la temporada es Otoño, Invierno, Primavera o Verano. + Si la entrada del usuario es : + + - Septiembre, Octubre o Noviembre, la temporada es Otoño. + - Diciembre, Enero o Febrero, la temporada es Invierno. + - Marzo, Abril o Mayo, la temporada es Primavera + - Junio, Julio o Agosto, la temporada es Verano + +1. Compruebe si un día es un día de fin de semana o un día laborable. Su script tomará el día como entrada. + +```sh + ¿Qué día es hoy? Sábado + El sábado es fin de semana. + + ¿Qué día es hoy? sábAdo + El sábado es fin de semana. + + ¿Qué día es hoy? Viernes + El viernes es un día laborable. + + ¿Qué día es hoy? ViErNes + El viernes es un día laborable. +``` + +### Ejercicios: Nivel 3 + +1. Escribe un programa que diga el número de días en un mes. + +```sh + Introduce un mes: Enero + Enero tiene 31 días. + + Introduce un mes: ENERO + enero tiene 31 dias + + Introduce un mes: Febrero + Febrero tiene 28 días. + + Introduce un mes: FEbrero + Febrero tiene 28 días. +``` + +1. Escribe un programa que diga el número de días en un mes, ahora considera un año bisiesto. + +🎉 FELICITACIONES ! 🎉 + +[<< Día 3](../dia_03_Booleanos_Operadores_Date/dia_03_Boleanos_Operadores_Date.md) | [Día 5 >>](../dia_05_Arreglos/dia_05_arreglos.md) diff --git a/Spanish/dia_05_Arreglos/dia_05_arreglos.md b/Spanish/dia_05_Arreglos/dia_05_arreglos.md new file mode 100644 index 00000000..5cc9ec72 --- /dev/null +++ b/Spanish/dia_05_Arreglos/dia_05_arreglos.md @@ -0,0 +1,781 @@ +
+

30 Días de JavaScript: Arrays

+ + + + + Twitter Follow + + +Autor: +Asabeneh Yetayeh
+ January, 2020 + + +
+ +[<< Día 4](../dia_04_Condicionales/dia_04_Condicionales.md) | [Día 6 >>](../06_Day_Loops/06_day_loops.md) + +![Day 5](../images/banners/day_1_5.png) + +- [📔 Día 5](#📔-día-5) + - [Arrays](#arrays) + - [Como crear un array vacío](#como-crear-un-array-vacío) + - [Como crear un array con valores](#como-crear-un-array-con-valores) + - [Creando un array usando split](#creando-un-array-usando-split) + - [Acceder a los elementos de un array usando el index](#acceder-a-los-elementos-de-un-array-usando-el-index) + - [Modificar elementos de array](#modificar-elementos-de-array) + - [Métodos para manipular arrays](#métodos-para-manipular-arrays) + - [Constructor de arrays](#constructor-de-arrays) + - [Creando valores estáticos con fill](#creando-valores-estáticos-con-fill) + - [Concatenación de arrays usando concat](#concatenación-de-arrays-usando-concat) + - [Obtener la longitud de array](#obtener-la-longitud-de-array) + - [Obtener el index de un elemento en un array](#obtener-el-index-de-un-elemento-en-un-array) + - [Obtener el último index de un elemento en un array](#obtener-el-último-index-de-un-elemento-en-un-array) + - [Comprobar un array](#comprobar-un-array) + - [Convertir array a string](#convertir-array-a-string) + - [Unir elementos de un array](#unir-elementos-de-un-array) + - [Cortar elementos de un array](#cortar-elementos-de-un-array) + - [Método splice en un array](#método-splice-en-un-array) + - [Agregar elementos a un array usando push](#agregar-elementos-a-un-array-usando-push) + - [Eliminar el último elemento usando pop](#eliminar-el-último-elemento-usando-pop) + - [Eliminar elemento al principio](#eliminar-elemento-al-principio) + - [Añade un elemento al inicio](#añade-un-elemento-al-inicio) + - [Invertir orden de un array](#invertir-orden-de-un-array) + - [Ordenar elementos en un array](#ordenar-elementos-en-un-array) + - [Array de arrays](#array-de-arrays) + - [💻 Ejercicios](#💻-ejercicios) + - [Ejercicios: Nivel 1](#ejercicios-nivel-1) + - [Ejercicios: Nivel 2](#ejercicios-nivel-2) + - [Ejercicios: Nivel 3](#ejercicios-nivel-3) + +# 📔 Día 5 + +## Arrays + +A diferencia de las variables, un array (matriz ó arreglo) puede almacenar _múltiples valores_.Cada valor en un array tiene un _index_ y cada index (índice) tiene _una referencia en una dirección de memoria_. Se puede acceder a cada valor usando sus _index_. El index de un array comienza desde _cero_, y el index del último elemento es menor a uno desde la longitud del array. + +Un array es una colección de diferentes tipos de datos que están ordenados y son cambiables (modificables). Un array permite almacenar elementos duplicados y diferentes tipos de datos. Un array puede estar vacío o puede tener diferentes valores de diferentes tipos de datos. + +### Como crear un array vacío + +En JavaScript, podemos crear una array de diferentes maneras. Veamos diferentes formas de crear un array. +Es muy común usar _const_ en lugar de _let_ para declarar una variable array. Si está utilizando const, significa que no volverás a utilizar ese nombre de variable. + +- Usando el constructor de arrays + +```js +// sintaxis +const arr = Array(); +// or +// let arr = new Array() +console.log(arr); // [] +``` + +- Usando corchetes([]) + +```js +// sintaxis +// Esto es lo más recomendable para crear una lista vacía +const arr = []; +console.log(arr); +``` + +### Como crear un array con valores + +Array con valores iniciales. Usamos _length_ para encontrar la longitud del array. + +```js +const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // array de números +const fruits = ["banana", "orange", "mango", "lemon"]; // array de strings, Fruits +const vegetables = ["Tomato", "Potato", "Cabbage", "Onion", "Carrot"]; // array de strings, vegetables +const animalProducts = ["milk", "meat", "butter", "yoghurt"]; // array de strings, products +const webTechs = ["HTML", "CSS", "JS", "React", "Redux", "Node", "MongDB"]; // array web, technology +const countries = ["Finland", "Denmark", "Sweden", "Norway", "Iceland"]; // array de strings, country + +// Imprimimos el array y su longitud + +console.log("Numbers:", numbers); +console.log("Number of numbers:", numbers.length); + +console.log("Fruits:", fruits); +console.log("Number of fruits:", fruits.length); + +console.log("Vegetables:", vegetables); +console.log("Number of vegetables:", vegetables.length); + +console.log("Animal products:", animalProducts); +console.log("Number of animal products:", animalProducts.length); + +console.log("Web technologies:", webTechs); +console.log("Number of web technologies:", webTechs.length); + +console.log("Countries:", countries); +console.log("Number of countries:", countries.length); +``` + +```sh +Numbers: [0, 3.14, 9.81, 37, 98.6, 100] +Number of numbers: 6 +Fruits: ['banana', 'orange', 'mango', 'lemon'] +Number of fruits: 4 +Vegetables: ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] +Number of vegetables: 5 +Animal products: ['milk', 'meat', 'butter', 'yoghurt'] +Number of animal products: 4 +Web technologies: ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] +Number of web technologies: 7 +Countries: ['Finland', 'Estonia', 'Denmark', 'Sweden', 'Norway'] +Number of countries: 5 +``` + +- Array puede tener elementos de diferentes tipos de datos + +```js +const arr = [ + "Asabeneh", + 250, + true, + { country: "Finland", city: "Helsinki" }, + { skills: ["HTML", "CSS", "JS", "React", "Python"] }, +]; // arr contiene diferentes tipos de datos +console.log(arr); +``` + +### Creando un array usando split + +Como hemos visto en la sección anterior, podemos dividir un string en diferentes posiciones y podemos cambiar a un array. Veamos los ejemplos a continuación + +```js +let js = "JavaScript"; +const charsInJavaScript = js.split(""); + +console.log(charsInJavaScript); // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"] + +let companiesString = "Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon"; +const companies = companiesString.split(","); + +console.log(companies); // ["Facebook", " Google", " Microsoft", " Apple", " IBM", " Oracle", " Amazon"] +let txt = + "I love teaching and empowering people. I teach HTML, CSS, JS, React, Python."; +const words = txt.split(" "); + +console.log(words); +// el texto tiene caracteres especiales piensa cómo puedes obtener solo las palabras +// ["I", "love", "teaching", "and", "empowering", "people.", "I", "teach", "HTML,", "CSS,", "JS,", "React,", "Python"] +``` + +### Acceder a los elementos de un array usando el index + +Accedemos a cada elemento en un array usando su index. El index de un array comienza desde 0. La siguiente imagen muestra claramente el index de cada elemento en un array + +![arr index](../images/array_index.png) + +```js +const fruits = ["banana", "orange", "mango", "lemon"]; +let firstFruit = fruits[0]; // estamos accediendo al primer elemento usando su index + +console.log(firstFruit); // banana + +secondFruit = fruits[1]; +console.log(secondFruit); // orange + +let lastFruit = fruits[3]; +console.log(lastFruit); // lemon +// El último index se puede calcular de la siguiente manera + +let lastIndex = fruits.length - 1; +lastFruit = fruits[lastIndex]; + +console.log(lastFruit); // lemon +``` + +```js +const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // set of numbers + +console.log(numbers.length); // => para saber el tamaño de la array, que es 6 +console.log(numbers); // -> [0, 3.14, 9.81, 37, 98.6, 100] +console.log(numbers[0]); // -> 0 +console.log(numbers[5]); // -> 100 + +let lastIndex = numbers.length - 1; +console.log(numbers[lastIndex]); // -> 100 +``` + +```js +const webTechs = [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB", +]; // Lista de tecnologías web + +console.log(webTechs); // Todos los elementos del array +console.log(webTechs.length); // => para saber el tamaño de la array, que es 7 +console.log(webTechs[0]); // -> HTML +console.log(webTechs[6]); // -> MongoDB + +let lastIndex = webTechs.length - 1; +console.log(webTechs[lastIndex]); // -> MongoDB +``` + +```js +const countries = [ + "Albania", + "Bolivia", + "Canada", + "Denmark", + "Ethiopia", + "Finland", + "Germany", + "Hungary", + "Ireland", + "Japan", + "Kenya", +]; // Lista de países + +console.log(countries); // -> Todas los países del array +console.log(countries[0]); // -> Albania +console.log(countries[10]); // -> Kenya + +let lastIndex = countries.length - 1; +console.log(countries[lastIndex]); // -> Kenya +``` + +```js +const shoppingCart = [ + "Milk", + "Mango", + "Tomato", + "Potato", + "Avocado", + "Meat", + "Eggs", + "Sugar", +]; // Lista de productos alimenticios + +console.log(shoppingCart); // -> todo el carrito de compras en array +console.log(shoppingCart[0]); // -> Milk +console.log(shoppingCart[7]); // -> Sugar + +let lastIndex = shoppingCart.length - 1; +console.log(shoppingCart[lastIndex]); // -> Sugar +``` + +### Modificar elementos de array + +Un array es mutable (modificable). Una vez que un array es creado, podemos modificar el contenido de los elementos del array. + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers[0] = 10; // cambiando 1 en el índice 0 a 10 +numbers[1] = 20; // cambiando 2 en el índice 1 a 20 + +console.log(numbers); // [10, 20, 3, 4, 5] + +const countries = [ + "Albania", + "Bolivia", + "Canada", + "Denmark", + "Ethiopia", + "Finland", + "Germany", + "Hungary", + "Ireland", + "Japan", + "Kenya", +]; + +countries[0] = "Afghanistan"; // Sustitución de Albania por Afganistán +let lastIndex = countries.length - 1; +countries[lastIndex] = "Korea"; // Sustitución de Kenia por Corea +console.log(countries); +``` + +```sh +["Afghanistan", "Bolivia", "Canada", "Denmark", "Ethiopia", "Finland", "Germany", "Hungary", "Ireland", "Japan", "Korea"] +``` + +### Métodos para manipular arrays + +Existen diferentes métodos para manipular un array. Estos son algunos de los métodos disponibles para manejar arrays:_Array, length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift_ + +#### Constructor de arrays + +Array:Para crear un array. + +```js +const arr = Array(); // crea un array vacío +console.log(arr); + +const eightEmptyValues = Array(8); // crea ocho valores vacíos +console.log(eightEmptyValues); // [empty x 8] +``` + +#### Creando valores estáticos con fill + +fill: Rellena todos los elementos del array con un valor estático. + +```js +const arr = Array(); // crea un array vacío +console.log(arr); + +const eightXvalues = Array(8).fill("X"); // crea ocho valores de elementos llenos de 'X' +console.log(eightXvalues); // ['X', 'X','X','X','X','X','X','X'] + +const eight0values = Array(8).fill(0); // crea ocho valores de elementos llenos de '0' +console.log(eight0values); // [0, 0, 0, 0, 0, 0, 0, 0] + +const four4values = Array(4).fill(4); // crea 4 valores de elementos llenos de '4' +console.log(four4values); // [4, 4, 4, 4] +``` + +#### Concatenación de arrays usando concat + +concat:Para concatenar dos arrays. + +```js +const firstList = [1, 2, 3]; +const secondList = [4, 5, 6]; +const thirdList = firstList.concat(secondList); + +console.log(thirdList); // [1, 2, 3, 4, 5, 6] +``` + +```js +const fruits = ["banana", "orange", "mango", "lemon"]; // array de fruits +const vegetables = ["Tomato", "Potato", "Cabbage", "Onion", "Carrot"]; // array de vegetables +const fruitsAndVegetables = fruits.concat(vegetables); // concatena los dos arrays + +console.log(fruitsAndVegetables); +``` + +```sh +["banana", "orange", "mango", "lemon", "Tomato", "Potato", "Cabbage", "Onion", "Carrot"] +``` + +#### Obtener la longitud de array + +Length:Para saber el tamaño del array + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(numbers.length); // -> 5 es el tamaño del array +``` + +#### Obtener el index de un elemento en un array + +indexOf:Para verificar si un elemento existe en un array. Si existe, devuelve el index, de lo contrario devuelve -1. + +```js +const numbers = [1, 2, 3, 4, 5]; + +console.log(numbers.indexOf(5)); // -> 4 +console.log(numbers.indexOf(0)); // -> -1 +console.log(numbers.indexOf(1)); // -> 0 +console.log(numbers.indexOf(6)); // -> -1 +``` + +Comprobar si un elemento existe en un array. + +- Comprobar elementos en una lista + +```js +// vamos a comprobar si existe banana en el array + +const fruits = ["banana", "orange", "mango", "lemon"]; +let index = fruits.indexOf("banana"); // 0 + +if (index === -1) { + console.log("Esta fruta no existe en el array."); +} else { + console.log("Esta fruta existe en el array."); +} +// Esta fruta existe en el array. + +// we can use also ternary here +index === -1 + ? console.log("Esta fruta no existe en el array.") + : console.log("Esta fruta existe en el array."); + +// let us check if an avocado exist in the array +let indexOfAvocado = fruits.indexOf("avocado"); // -1, if the element not found index is -1 +if (indexOfAvocado === -1) { + console.log("Esta fruta no existe en el array."); +} else { + console.log("Esta fruta existe en el array."); +} +// Esta fruta no existe en el array. +``` + +#### Obtener el último index de un elemento en un array + +lastIndexOf: Da la posición del último elemento en el array. Si existe, devuelve el index, de lo contrario, devuelve -1. + +```js +const numbers = [1, 2, 3, 4, 5, 3, 1, 2]; + +console.log(numbers.lastIndexOf(2)); // 7 +console.log(numbers.lastIndexOf(0)); // -1 +console.log(numbers.lastIndexOf(1)); // 6 +console.log(numbers.lastIndexOf(4)); // 3 +console.log(numbers.lastIndexOf(6)); // -1 +``` + +includes:Para verificar si un elemento existe en un array. Si existe, devuelve true, de lo contrario devuelve false. + +```js +const numbers = [1, 2, 3, 4, 5]; + +console.log(numbers.includes(5)); // true +console.log(numbers.includes(0)); // false +console.log(numbers.includes(1)); // true +console.log(numbers.includes(6)); // false + +const webTechs = [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB", +]; // Lista de tecnologías web + +console.log(webTechs.includes("Node")); // true +console.log(webTechs.includes("C")); // false +``` + +#### Comprobar un array + +Array.isArray:Para verificar si el tipo de dato en un array + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(Array.isArray(numbers)); // true + +const number = 100; +console.log(Array.isArray(number)); // false +``` + +#### Convertir array a string + +toString:Convierte un array a string + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(numbers.toString()); // 1,2,3,4,5 + +const names = ["Asabeneh", "Mathias", "Elias", "Brook"]; +console.log(names.toString()); // Asabeneh,Mathias,Elias,Brook +``` + +#### Unir elementos de un array + +join: Se usa para unir los elementos del array, el argumento que pasamos en el método join se unirá en array y regresará como una cadena. De forma predeterminada, se une con una coma, pero podemos pasar diferentes parámetros de string que se pueden unir entre los elementos. + +```js +const numbers = [1, 2, 3, 4, 5]; +console.log(numbers.join()); // 1,2,3,4,5 + +const names = ["Asabeneh", "Mathias", "Elias", "Brook"]; + +console.log(names.join()); // Asabeneh,Mathias,Elias,Brook +console.log(names.join("")); //AsabenehMathiasEliasBrook +console.log(names.join(" ")); //Asabeneh Mathias Elias Brook +console.log(names.join(", ")); //Asabeneh, Mathias, Elias, Brook +console.log(names.join(" # ")); //Asabeneh # Mathias # Elias # Brook + +const webTechs = [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB", +]; // Lista de tecnologías web + +console.log(webTechs.join()); // "HTML,CSS,JavaScript,React,Redux,Node,MongoDB" +console.log(webTechs.join(" # ")); // "HTML # CSS # JavaScript # React # Redux # Node # MongoDB" +``` + +#### Cortar elementos de un array + +Slice: Para cortar varios elementos en el rango. Toma dos parámetros: posición inicial y final. Puede no incluir la posición final + +```js +const numbers = [1, 2, 3, 4, 5]; + +console.log(numbers.slice()); // -> copia todos los elementos +console.log(numbers.slice(0)); // -> copia todos los elementos +console.log(numbers.slice(0, numbers.length)); // copia todos los elementos +console.log(numbers.slice(1, 4)); // -> [2,3,4] // no incluye la posición final +``` + +#### Método splice en un array + +Splice: Toma tres parámetros: posición inicial, número de elementos a eliminar y cantidad de elementos que se agregarán. + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.splice(); +console.log(numbers); // -> elimina todos los elementos +``` + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.splice(0, 1); +console.log(numbers); // elimina el primer elemento +``` + +```js +const numbers = [1, 2, 3, 4, 5, 6]; +numbers.splice(3, 3, 7, 8, 9); +console.log(numbers.splice(3, 3, 7, 8, 9)); // -> [1, 2, 3, 7, 8, 9] //elimina tres elementos y reemplaza tres elementos +``` + +#### Agregar elementos a un array usando push + +Push: agrega elementos al final. Para agregar un elemento al final de un array existente, usamos el método push. + +```js +// syntax +const arr = ["item1", "item2", "item3"]; +arr.push("new item"); +console.log(arr); +// ['item1', 'item2','item3','new item'] +``` + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.push(6); +console.log(numbers); // -> [1,2,3,4,5,6] + +numbers.pop(); // -> eliminar un elemento del final +console.log(numbers); // -> [1,2,3,4,5] +``` + +```js +let fruits = ["banana", "orange", "mango", "lemon"]; +fruits.push("apple"); +console.log(fruits); // ['banana', 'orange', 'mango', 'lemon', 'apple'] + +fruits.push("lime"); +console.log(fruits); // ['banana', 'orange', 'mango', 'lemon', 'apple', 'lime'] +``` + +#### Eliminar el último elemento usando pop + +pop: Elimina el elemento final. + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.pop(); // -> eliminar un elemento del final +console.log(numbers); // -> [1,2,3,4] +``` + +#### Eliminar elemento al principio + +shift: Eliminación de un elemento de un array al comienzo de un array. + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.shift(); // -> elimina un elemento del principio +console.log(numbers); // -> [2,3,4,5] +``` + +#### Añade un elemento al inicio + +unshift: Agrega un elemento al inicio del array + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.unshift(0); // -> Añadir un elemento al inicio +console.log(numbers); // -> [0,1,2,3,4,5] +``` + +#### Invertir orden de un array + +reverse: invertir el orden de un array. + +```js +const numbers = [1, 2, 3, 4, 5]; +numbers.reverse(); // -> reverse array order +console.log(numbers); // [5, 4, 3, 2, 1] + +numbers.reverse(); +console.log(numbers); // [1, 2, 3, 4, 5] +``` + +#### Ordenar elementos en un array + +sort: Ordena los elementos de un array en orden ascendente. Sort toma una función call back, Veremos cómo usamos sort con una función call back en las próximas secciones. + +```js +const webTechs = [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB", +]; + +webTechs.sort(); +console.log(webTechs); // ["CSS", "HTML", "JavaScript", "MongoDB", "Node", "React", "Redux"] + +webTechs.reverse(); // after sorting we can reverse it +console.log(webTechs); // ["Redux", "React", "Node", "MongoDB", "JavaScript", "HTML", "CSS"] +``` + +### Array de arrays + +Un array puede almacenar diferentes tipos de datos, incluido un array en sí mismo. Vamos a crear un array de arrays + +```js +const firstNums = [1, 2, 3]; +const secondNums = [1, 4, 9]; + +const arrayOfArray = [ + [1, 2, 3], + [1, 2, 3], +]; +console.log(arrayOfArray[0]); // [1, 2, 3] + +const frontEnd = ["HTML", "CSS", "JS", "React", "Redux"]; +const backEnd = ["Node", "Express", "MongoDB"]; +const fullStack = [frontEnd, backEnd]; +console.log(fullStack); // [["HTML", "CSS", "JS", "React", "Redux"], ["Node", "Express", "MongoDB"]] +console.log(fullStack.length); // 2 +console.log(fullStack[0]); // ["HTML", "CSS", "JS", "React", "Redux"] +console.log(fullStack[1]); // ["Node", "Express", "MongoDB"] +``` + +🌕 Tienes una energía ilimitada. Acabas de completar los desafíos del día 5 y llevas cinco pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y tus músculos. + +## 💻 Ejercicios + +### Ejercicios: Nivel 1 + +```js +const countries = [ + "Albania", + "Bolivia", + "Canada", + "Denmark", + "Ethiopia", + "Finland", + "Germany", + "Hungary", + "Ireland", + "Japan", + "Kenya", +]; + +const webTechs = [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB", +]; +``` + +1. Declara un array _vacío_. +2. Declara un array com mas de 5 elementos. +3. Encuentra la longitud de tu array. +4. Obtenga el primer elemento, el elemento del medio y el último elemento de un array. +5. Declara un array llamado _mixedDataTypes_, coloque diferentes tipos de datos en el array y encuentre la longitud del array. El tamaño del array debe ser mayor que 5. +6. Declare un variable array de nombre _itCompanies_ y asignarles valores iniciales Facebook, Google, Microsoft, Apple, IBM, Oracle y Amazon. +7. Imprima el array usando _console.log()_. +8. Imprima el número de empresas en el array. +9. Imprime la primer empresa , la intermedia y la última empresa +10. Imprime cada empresa. +11. Cambie el nombre de cada empresa a mayúsculas uno por uno e imprímalos. +12. Imprime el array como una oración: Facebook, Google, Microsoft, Apple, IBM, Oracle y Amazon son grandes empresas de TI. +13. Compruebe si existe una determinada empresa en el array itCompanies. Si existe, retorna la empresa; de lo contrario, retorna la empresa _no existe_ +14. Filtre las empresas que tienen más de una 'o' sin el método _filter()_ +15. Ordene el array usando el método _sort()_ +16. Invierte la array usando el método _reverse()_ +17. Cortar las primeras 3 empresas del array +18. Cortar las últimas 3 empresas del array +19. Cortar la empresa o empresas intermedias de TI del array +20. Eliminar la primera empresa de TI del array +21. Eliminar la empresa o empresas intermedias de TI del array +22. Elimine la última empresa de TI del array +23. Eliminar todas las empresas de TI + +### Ejercicios: Nivel 2 + +1. Cree un archivo de countries.js separado y almacene el array de países en este archivo, cree un archivo separado web_techs.js y almacene el array de webTechs en este archivo. Acceda a ambos archivos en el archivo main.js +1. Primero elimine todos los signos de puntuación y cambie de string a array y cuente el número de palabras en el array + + ```js + let text = + "I love teaching and empowering people. I teach HTML, CSS, JS, React, Python."; + console.log(words); + console.log(words.length); + ``` + + ```sh + ["I", "love", "teaching", "and", "empowering", "people", "I", "teach", "HTML", "CSS", "JS", "React", "Python"] + + 13 + ``` + +1. En el siguiente carrito de compras agregue, elimine, edite artículos + + ```js + const shoppingCart = ["Milk", "Coffee", "Tea", "Honey"]; + ``` + + - Agregue 'Meat' al comienzo de su carrito de compras si aún no se ha agregado + - Agregue 'Sugar' al final de su carrito de compras si aún no se ha agregado + - Elimine 'Honey' si es alérgico a la miel (honey) + - Modificar Tea a 'Green Tea' + +1. En el array de países, verifique si 'Ethiopia' existe en el array si existe, imprima 'ETHIOPIA'. Si no existe agregar a la lista de países. +1. En el array webTechs, verifique si Sass existe en el array y si existe, imprima 'Sass es un preproceso de CSS'. Si no existe, agregue Sass al array e imprima el array. +1. Concatene las siguientes dos variables y guardelas en una variable fullStack. + + ```js + const frontEnd = ["HTML", "CSS", "JS", "React", "Redux"]; + const backEnd = ["Node", "Express", "MongoDB"]; + + console.log(fullStack); + ``` + + ```sh + ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"] + ``` + +### Ejercicios: Nivel 3 + +1. El siguiente es un array de 10 edades de estudiantes: + + ```js + const ages = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24] + ``` + + - Ordene el array y encuentre la edad mínima y máxima + - Encuentre la edad media (un elemento intermedio o dos elementos intermedios divididos por dos) + - Encuentre la edad promedio (todos los elementos divididos por el número de elementos) + - Encuentre el rango de las edades (max menos min) + - Compare el valor de (mín - promedio) y (máx - promedio), use el método _abs()_ + + 1.Cortar los diez primeros países de la [array de países](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) + +1. Encuentre el país o países de en medio en el [array de países](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) +1. Divide el array de países en dos arrays iguales si es par. Si el array de países no es par, agregue un país más para la primera mitad. + +🎉 ¡Felicitaciones! 🎉 + +[<< Day 4](../dia_04_Condicionales/dia_04_Condicionales.md) | [Day 6 >>](../06_Day_Loops/06_day_loops.md) diff --git a/Spanish/readme.md b/Spanish/readme.md index c65ab320..6c06ece8 100644 --- a/Spanish/readme.md +++ b/Spanish/readme.md @@ -1,4 +1,3 @@ -

30 Días de JavaScript

@@ -8,25 +7,24 @@ Twitter Follow - Autor: - Asabeneh Yetayeh
- Enero de 2020 - +Autor: +Asabeneh Yetayeh
+ Enero de 2020 +
- 🇬🇧 [English](../readMe.md) - 🇪🇸 [Spanish](./readme.md) - 🇷🇺 [Russian](../RU/README.md) +🇬🇧 [English](../readMe.md) +🇪🇸 [Spanish](./readme.md) +🇷🇺 [Russian](../RU/README.md)
- ![Thirty Days Of JavaScript](./images/day_1_1.png) - [📔Día 1](#día-1) + - [📔Día 1](#día-1) - [Introducción](#introducción) - [Requerimientos](#requerimientos) @@ -92,7 +90,7 @@ Tal vez no lo necesites ahora pero si más adelante. Asi que instala [node.js](h Luego de que se descargue, haz doble click e instálalo - ![Install node](./images/install_node.png) +![Install node](./images/install_node.png) Puedes comprobar si se ha instalado correctamente abriendo la terminal del ordenador @@ -249,7 +247,7 @@ JavaScript puede ser añadido a una página web de tres maneras diferentes: Las siguientes secciones muestran diferentes formas de añadir código JavaScript a nuestra página web. -### Script en línea +### Script en línea Crea una carpeta en tu escritorio y llámala 30DíasDeJS o en cualquier lugar y crea un archivo **_index.html_** en la carpeta del proyecto. Luego pega el siguiente código y ábrelo en un navegador, ya sea en [Chrome](https://www.google.com/chrome/). @@ -372,7 +370,7 @@ En JavaScript y también en otros lenguajes de programación, hay diferentes tip Una colección de uno o más carácteres entre comillas. **Ejemplo:** "Asabeneh" - "Finlandia" + "Finlandia" 'JavaScript es un hermoso lenguaje de programación'. "Me encanta enseñar" "Espero que estés disfrutando del primer día" @@ -548,3 +546,5 @@ Cuando ejecutas los archivos en la carpeta Día_1 deberías obtener esto: Tú tienes 30 años. 🎉 ¡FELICIDADES! 🎉 + +[Day 2 >>](./dia_02_tipos_de_datos.md)