From 6982143950a23a1cdd02f3c9dfb119e0cc43b3bb Mon Sep 17 00:00:00 2001 From: Bulmaro Arellano Date: Fri, 6 Aug 2021 19:14:41 -0500 Subject: [PATCH] =?UTF-8?q?Sugerencias=20de=20cambios=20en=20notas=20del?= =?UTF-8?q?=20curso=20de=20JS=20B=C3=A1sico?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1-valores.js | 25 ++++++++++----------- 10-switch.js | 16 +++++++------- 12-arrays.js | 21 +++++++++--------- 13-arr-methods.js | 51 +++++++++++++++++++++--------------------- 14-objects.js | 21 +++++++++--------- 2-var.js | 4 ++-- 3-function.js | 24 ++++++++++---------- 4-scope.js | 31 +++++++++++++------------- 5-hoisting.js | 9 ++++---- 6-coercion.js | 23 ++++++++++--------- 7-truthy-falsy.js | 20 ++++++++--------- 8-conditionals.js | 56 +++++++++++++++++++++++------------------------ 12 files changed, 148 insertions(+), 153 deletions(-) diff --git a/1-valores.js b/1-valores.js index a61e89b..4ef5e26 100644 --- a/1-valores.js +++ b/1-valores.js @@ -1,24 +1,23 @@ // Tipos primitivos -40 // Numeros +40 // Números 3.14 - "Diego De Granda" // Strings (cadenas de texto), Esto es la forma en la que puedo crear algo que se pueda imprimir en la pantalla, o escribir información, que el usuario pueda entender y leer. utilizar palabras, o frases. + "Diego De Granda" // Strings (cadenas de texto), Esto es la forma en la que puedo crear algo que se pueda imprimir en la pantalla, o escribir información, que el usuario pueda entender y leer, utilizar palabras, o frases. - 'Diego De Granda' +'Diego De Granda' - true // Booleanos, estos fueron inventados por George Boole, un Matemático británico. y esto hace referencia a cosas que podamos validar. - false +true // Booleanos, estos fueron inventados por George Boole, un matemático británico. y esto hace referencia a cosas que podamos validar. +false - null // Valores vacios (Empty values), es como un placeholder (espacio reservado para algun valor) de algún valor faltante. - - undefined +null // Valores vacíos (Empty values), es como un placeholder (espacio reservado para algun valor) de algún valor faltante. +undefined - /* ================================================================ */ - - // Tipos de objetos o no primitivos - [1, 2, 3, 4] // corchetes // arrays - { nombre: 'Diego' } // llaves // objetos +/* ================================================================ */ +// Tipos de objetos o no primitivos + + [1, 2, 3, 4] // corchetes // arrays + { nombre: 'Diego' } // llaves // objetos \ No newline at end of file diff --git a/10-switch.js b/10-switch.js index a400050..c9e6ab7 100644 --- a/10-switch.js +++ b/10-switch.js @@ -1,22 +1,22 @@ // Switch es una forma diferente de validar, está depende del caso que sea verdad. -var numero = 1; -var resultado; +var numero = 1; +var resultado; -/* Switch compara con un === por esa razón los elementos tiene que ser idénticos */ +/* ¡IMPORTANTE! Switch compara con un === por esa razón los elementos tiene que ser idénticos */ switch (numero) { - case 1: + case 1: resultado = "Sí es uno"; break; - case 10: + case 10: resultado = "Sí es diez"; break; case 100: resultado = "Sí es cien"; break; - default: - resultado = "No match"; + default: + resultado = "No match"; } -console.log(resultado); \ No newline at end of file +console.log(resultado); \ No newline at end of file diff --git a/12-arrays.js b/12-arrays.js index de46d5e..fcfb672 100644 --- a/12-arrays.js +++ b/12-arrays.js @@ -4,12 +4,12 @@ var frutas = []; // Array Literal Syntax -var frutas = ["Manzana", "Platano", "Cereza", "Fresa"]; -console.log(frutas); -console.log(frutas.length); // length es una propiedad del array +var frutas = ["Manzana", "Platano", "Cereza", "Fresa"]; +console.log(frutas); +console.log(frutas.length); // length es una propiedad del array que nos indica la cantidad de elementos que contiene dicho array // Acceder (por índice) a un elemento del Array -console.log(frutas[0]); // Los arrays iician en "0" +console.log(frutas[0]); // Los arrays inician en el índice "0" // === Metodos para mutar arrays === @@ -17,13 +17,13 @@ console.log(frutas[0]); // Los arrays iician en "0" // .push(); - var masFrutas = frutas.push("Uvas"); // Esté metodo añadirá "Uvas" añ final del array - console.log(frutas); +var masFrutas = frutas.push("Uvas"); // Esté metodo añadirá "Uvas" añ final del array +console.log(frutas); // .pop(); - var utlimo = frutas.pop("Uvas"); // Eliminará "Uvas" del final - console.log(frutas); +var utlimo = frutas.pop("Uvas"); // Eliminará "Uvas" del final +console.log(frutas); // unshift() @@ -37,6 +37,5 @@ console.log(frutas); // .indexOf(); -var posicion = frutas.indexOf("Platano"); // te dará la posición de ese item en el array -console.log(frutas); - +var posicion = frutas.indexOf("Platano"); // Te dará la posición de ese ítem en el array +console.log(frutas); \ No newline at end of file diff --git a/13-arr-methods.js b/13-arr-methods.js index 476ee77..40444ea 100644 --- a/13-arr-methods.js +++ b/13-arr-methods.js @@ -9,74 +9,73 @@ var articulos = [ ] -// Metodos para recorrer arrays +// Métodos para recorrer arrays -// Metodo Filter -/* Válida si es un true o false para poder meterlos al nuevo array, y éste método no modifica el array original */ +// Método Filter +/* Válida si es un true o false para poder meterlos al nuevo array. Este método no modifica el array original */ -var articulosFiltrados = articulos.filter(function(articulo){ - return articulo.costo <= 500 /* Menor o igual a 100 */ +var articulosFiltrados = articulos.filter(function(articulo) { + return articulo.costo <= 500 /* Menor o igual a 500 */ }); console.log(articulosFiltrados); - // Metodo Map +// Método Map -var nombreArticulos = articulos.map(function(articulo){ - return articulo.nombre +var nombreArticulos = articulos.map(function(articulo) { + return articulo.nombre }); console.log(nombreArticulos); - // Metodo Find - /* De igual forma, con este método se valida un true o false para encontrar un elemento y si está lo regresa y si no, no pasa nada */ +// Método Find +/* De igual forma, con este método se valida con un true o false para encontrar un elemento y si está lo regresa y si no, no pasa nada */ -var encuentraArticulos = articulos.find(function(articulo){ +var encuentraArticulos = articulos.find(function(articulo) { return articulo.nombre === 'laptop'; }); console.log(encuentraArticulos); -// Metodo forEach +// Método forEach -articulos.forEach(function(articulo){ +articulos.forEach(function(articulo) { console.log(articulo.nombre); }); -// Metodo Some +// Método Some /* Este método nos regresa un false o un true para validar si hay o no artículos que cumplan la validación */ -var articulosBaratos = articulos.some(function(articulo){ +var articulosBaratos = articulos.some(function(articulo) { return articulo.costo <= 700; }); -console.log(articulosBaratos); +console.log(articulosBaratos); -// Metodo Every +// Método Every /* Este método checa que todos los elementos en el array cumplan con la validación que ponemos, y al final nos regresa un true o un false */ -var articulosBaratos = articulos.every(function(articulo){ +var articulosBaratos = articulos.every(function(articulo) { return articulo.costo <= 700; }); -console.log(articulosBaratos); +console.log(articulosBaratos); // Metodo Reduce -/* Este método corre una función en cada elemento del array, para comenzar a sumar los costos de cada elemento. */ +/* Este método corre una función en cada elemento del array para comenzar a sumar los costos de cada elemento. */ -var costoTotal = articulos.reduce(function(totalActual, articulo){ +var costoTotal = articulos.reduce(function(totalActual, articulo) { return articulo.costo + totalActual; }, 0); // El 0 será la cantidad inicial con la que comenzará el totalActual -console.log(costoTotal); +console.log(costoTotal); -// Metodo Includes +// Método Includes var numeros = [1, 2, 3, 4, 5, 6]; -var incluyeNumero = numeros.includes(2); - -console.log(incluyeNumero); +var incluyeNumero = numeros.includes(2); +console.log(incluyeNumero); \ No newline at end of file diff --git a/14-objects.js b/14-objects.js index 878f16c..79b7321 100644 --- a/14-objects.js +++ b/14-objects.js @@ -3,27 +3,26 @@ var objecto = {}; // Object Literal Syntax var miAuto = { - marca: "Toyota", // key - value + marca: "Toyota", // key - value modelo: "Corolla", annio: 2020, - detallesDelAuto: function() { // Metodo de un objeto (una función dentro de un objeto) - return `Auto ${this.modelo} ${this.annio}`; - } + detallesDelAuto: function() { // Método de un objeto (una función dentro de un objeto) + return `Auto ${this.modelo} ${this.annio}`; + } }; -miAuto.annio -miAuto.modelo +miAuto.annio +miAuto.modelo -miAuto.detallesDelAuto(); +miAuto.detallesDelAuto(); // Función constructora -function auto(marca, modelo, annio) { // Creas una función con los parametros que va a recibir, - this.marca = marca; // Utilizamos el "this" para asignar valores a las propiedades del objeto +function auto(marca, modelo, annio) { // Creas una función con los parametros que va a recibir, + this.marca = marca; // Utilizamos el "this" para asignar valores a las propiedades del objeto this.modelo = modelo; this.annio = annio; } -var newAuto = new auto("Tesla", "Model 3", 2020); - +var newAuto = new auto("Tesla", "Model 3", 2020); \ No newline at end of file diff --git a/2-var.js b/2-var.js index 347017b..fe96a66 100644 --- a/2-var.js +++ b/2-var.js @@ -2,7 +2,7 @@ Es una representación de algún lugar en la memoria para guardar datos */ -var nombre = "Diego"; // Nombre apuntará en algún lugar en la memoria (nosotros no sabemos donde, pero eso no es importante), pero dirá la señal de = tomará ese string y lo guardará en ese lugar. y después si queremos utilizar ese valor, utilizaremos la variable Nombre para pedir que nos traigan ese string de memoria. +var nombre = "Diego"; // Donde nombre apuntará en algún lugar en la memoria (nosotros no sabemos donde, pero eso no es importante), pero dirá la señal de = tomará ese string y lo guardará en ese lugar, y después si queremos utilizar ese valor, utilizaremos la variable nombre para pedir que nos traigan ese string de memoria. // = es igual a operador de asignación @@ -11,7 +11,7 @@ edad = 30; // Inicializar var elementos = ['Computadora', 'Celular']; // Aquí la variable seleccionará toda una sección para los elementos del array, y después tendremos acceso a toda la sección destinada en memoria. -var persona = { // de igual forma para el objeto +var persona = { // de igual forma para el objeto nombre: "Diego", edad: 30 } diff --git a/3-function.js b/3-function.js index ad275b4..572fadd 100644 --- a/3-function.js +++ b/3-function.js @@ -2,44 +2,44 @@ // Tenemos dos tipo de funciones en js, function Declaration y function Expression -// el nombre reservado de function y parametros que recibira esa function +// el nombre reservado de function y parámetros que recibirá esa function function miFuncion() { // function declaration Declarativas expresión - return 3; + return 3; } miFuncion(); // mandamos llamar la funcion -var miFuncion = function(a,b) { // function Expression (también conocidas como funciones anónimas) +var miFuncion = function(a, b) { // function Expression (también conocidas como funciones anónimas) return a + b; } -miFuncion(); // mandamos llamar la variable como funcion +miFuncion(); // mandamos llamar la variable como si lo hiciéramos con una función de tipo declarativa /* ============================= */ function saludarEstudiante(estudiante) { - console.log(`Hola ${estudiante}`); // template strings (Plantillas de cadena de texto) + console.log(`Hola ${estudiante}`); // template strings (Plantillas de cadena de texto) } -function suma(a,b) { // está funcion recibe 2 parámetros, que se convierten en un placeholder de valores que se pueden utilizar dentro de la función. - var resultado = a + b; +function suma(a, b) { // está funcion recibe 2 parámetros, que se convierten en un placeholder de valores que se pueden utilizar dentro de la función. + var resultado = a + b; } // Return, cómo regresamos un valor con una function. -function suma(a,b) { - var resultado = a + b; +function suma(a, b) { + var resultado = a + b; return resultado; } -function suma(a,b) { - return a + b; +function suma(a, b) { + return a + b; } -suma(20, 30); \ No newline at end of file +suma(20, 30); \ No newline at end of file diff --git a/4-scope.js b/4-scope.js index 4142dd8..7f409ff 100644 --- a/4-scope.js +++ b/4-scope.js @@ -1,7 +1,7 @@ -/* Ejemplo del universo, un sistema solar, y un planeta. */ +/* Ejemplo del universo, un sistema solar, y un planeta. */ -// Scope es igual a, donde buscar por cosas (estás cosas son las variables), el Scope es el alcance que tienen las variables, depende de donde las declaremos y las mandamos llamar si tendremos acceso a ellas o no. +// Scope es igual a, donde buscar por cosas (estás cosas son las variables), el Scope es el alcance que tienen las variables. Si tendremos acceso a ellas o no dependerá de dónde las declaremos y las mandemos llamar. // Tenemos dos tipos de Scope, Scope Global y Scope Local. @@ -9,7 +9,7 @@ // Ejemplo de lo que es un Scope Global -var miNombre = "Diego"; +var miNombre = "Diego"; function nombre() { miNombre = "Alonso"; @@ -20,13 +20,13 @@ nombre(); console.log(miNombre); -// Ejemplo de lo que es un Scope Local, el Scope local pasa al momento de crear una funcion, esto genera un ámbito diferente al global, al cual no se podrá tener acceso desde el ámbito global +// Ejemplo de lo que es un Scope Local, el Scope local pasa al momento de crear una función, esto genera un ámbito diferente al global, al cual no se podrá tener acceso desde el ámbito global. var miNombre = "Diego" function nombre() { - var miApellido = "De Granda"; - return miNombre + " " + miApellido + var miApellido = "De Granda"; + return miNombre + " " + miApellido } nombre(); @@ -34,14 +34,14 @@ nombre(); console.log(miNombre); console.log(miApellido); -// Ejemplos de como puede ayuar o crear error el tema del scope. +// Ejemplos de cómo puede ayudar o crear error el tema del scope. -// Ejemplo 1, cómo con una funcion podemos vambiar el valor de la variable global +// Ejemplo 1. Cómo con una funcion podemos cambiar el valor de la variable global var miNombre = "Diego" function nombre(usuario) { miNombre = usuario; - console.log(miNombre); + console.log(miNombre); } nombre("Oscar"); @@ -49,27 +49,26 @@ nombre("Oscar"); console.log(`Hola ${miNombre}, cómo estás?`); -// Ejemplo 2, cómo podemos evitar reescribir el valor de una variable gracias al scope, +// Ejemplo 2. Cómo podemos evitar reescribir el valor de una variable gracias al scope. + var miNombre = "Diego" function nombre(usuario) { var miNombre = usuario; - console.log(miNombre); + console.log(miNombre); } nombre("Oscar"); console.log(`Hola ${miNombre}, cómo estás?`); -// Ejemplo 3, cómo si creamos un scope local, y mandamos llamar la variable fuera de la funcion, nos puede crear un problema. +// Ejemplo 3. Cómo si creamos un scope local y mandamos llamar la variable fuera de la función nos puede crear un problema. function nombre(usuario) { var miNombre = usuario; - console.log(miNombre); + console.log(miNombre); } nombre("Oscar"); -console.log(`Hola ${miNombre}, cómo estás?`); - - +console.log(`Hola ${miNombre}, cómo estás?`); \ No newline at end of file diff --git a/5-hoisting.js b/5-hoisting.js index 1108922..f94a977 100644 --- a/5-hoisting.js +++ b/5-hoisting.js @@ -1,7 +1,8 @@ -// Hoisting es cuando las declaraciones de variables y funciones se procesan antes de ejecutar cualquier código, al momento de qe se genere el hosting, las funciones se declarán primero, y despues las variables. +// Hoisting es cuando la declaración de las variables y funciones se procesan antes de ejecutar cualquier código, al momento de qe se genere el hosting, las funciones se declararán primero y después las variables. -// Qué resultado esperas que nos aparezca si corremos este ejemplo? "undefined" +// ¿Qué resultado esperas que nos aparezca si ejecutamos este código de ejemplo? "undefined" + console.log(miNombre); var miNombre = "Diego"; @@ -15,7 +16,7 @@ console.log(miNombre + "soy hoisting"); miNombre = "Diego"; -// === Hoisting con funcionts === +// === Hoisting con functions === hey(); @@ -27,7 +28,7 @@ var miNombre = 'Diego'; // Lo que sucede con hoisting -function hey() { //La función se declara hasta arriba, y después se declaran las variables. +function hey() { //La función se declara hasta arriba y después se declaran las variables. console.log('Hola ' + miNombre); }; diff --git a/6-coercion.js b/6-coercion.js index 982cdf2..2d4d049 100644 --- a/6-coercion.js +++ b/6-coercion.js @@ -4,33 +4,33 @@ var a = 20; -var b = a + ""; +var b = a + ""; // más ejemplos -var a = [1,2]; -var b = [3,4]; +var a = [1, 2]; +var b = [3, 4]; -a + b // En este ejemplo, por la concatenación, ambos arrays son obligados a convertirse en strings, y luego se juntan. +a + b // En este ejemplo, por la concatenación, ambos arrays son obligados a convertirse en strings, y luego se concantenan. // === Explicit coercion === -var c = String( a ); +var c = String(a); -var d = Number( c ); +var d = Number(c); // Otro ejemplo -var a = 30; +var a = 30; var b = a.toString(); -var c = "100"; +var c = "100"; var d = +c; // Unary operator '+' de forma explícita convierte a número // más ejemplos -var num1 = "3.14"; -var num2 = 5 + +num1; +var num1 = "3.14"; +var num2 = 5 + +num1; /* @@ -42,5 +42,4 @@ String + String = String */ -// Todos las propiedades de valor, son strings - +// Todos las propiedades de valor son strings \ No newline at end of file diff --git a/7-truthy-falsy.js b/7-truthy-falsy.js index e199b39..9e7a38f 100644 --- a/7-truthy-falsy.js +++ b/7-truthy-falsy.js @@ -5,7 +5,7 @@ // Falsy (False) "" // un string vacío -0 -0 +0 - 0 null NaN false @@ -13,16 +13,16 @@ undefined //Truthy (true) -"hola" -30 -{a:1} -[1,3] + "hola" +30 { a: 1 } +[1, 3] true -function a(){} -más -// Para que podemos utilizar esto, para generar condiciones segun el valor que demos. +function a() {} +más -if(InputEvent.value) { +// ¿Para qué podemos utilizar esto? Para generar condiciones según el valor que demos. + +if (InputEvent.value) { ... -} +} \ No newline at end of file diff --git a/8-conditionals.js b/8-conditionals.js index ab0b8ac..ec8ae50 100644 --- a/8-conditionals.js +++ b/8-conditionals.js @@ -1,27 +1,27 @@ -// Esto nos ayudará para poder hacer decisiones. +// Esto nos ayudará para poder tomar decisiones. -var esUsuario = true; +var esUsuario = true; -if(esUsuario) { // con el if validamos que la condición sea true - console.log('Tiene acceso al contenido'); +if (esUsuario) { // con el if validamos que la variable esUsuario sea true + console.log('Tiene acceso al contenido'); } // Presentamos el else -var esUsuario = false; +var esUsuario = false; -if(esUsuario) { - console.log('Tiene acceso al contenido'); +if (esUsuario) { + console.log('Tiene acceso al contenido'); } else { console.log('Tienes que crear una cuenta para poder acceder al contenido'); } // Ejemplo de cómo haríamos una validación -var edad = 18; -var accion; +var edad = 18; +var accion; -if(edad >= 18) { +if (edad >= 18) { accion = 'Puede votar' } else { // call back accion = 'No puede votar' @@ -31,12 +31,12 @@ console.log(accion); // Ejemplo de cómo utilizaremos el else if -var edad = 18; -var accion; +var edad = 18; +var accion; -if(edad === 18) { +if (edad === 18) { accion = 'Puede votar, será su 1ra votación' -} else if(edad > 18) { +} else if (edad > 18) { accion = 'Puede votar' } else { // call back accion = 'Aun no puede votar' @@ -46,23 +46,23 @@ console.log(accion); -/* ================================================================ */ +/* ================================================================ */ // Operador ternario -var numero = 1; -var resultado; +var numero = 1; +var resultado; -if(numero === 1) { - resultado = 'Sí son un 1'; +if (numero === 1) { + resultado = 'Sí soy un 1'; } else { - resultado = 'No soy un 1'; + resultado = 'No soy un 1'; } -condition ? true : false; +condition ? true : false; -var numero = 1; -var resultado = numero === 1 ? 'Sí son un 1' : 'No soy un 1'; +var numero = 1; +var resultado = numero === 1 ? 'Sí soy un 1' : 'No soy un 1'; console.log(resultado); @@ -70,13 +70,13 @@ console.log(resultado); // ============================== -// Ejercicio, reaizar un piedra, papel o tijeras, utilizando condicionales, una funcion que reciba el parametro con el que vamos a jugar, y me regrese si gane o perdí. +// Ejercicio, reaizar un piedra, papel o tijeras, utilizando condicionales, una función que reciba el parámetro con el que vamos a jugar, y me regrese si gane o perdí. /* -Variables piedra, papel y tiejeras -una funcion que utilice cindicionales para validar si el parametro que le estoy pasando gana o pierde. +Variables: piedra, papel y tiejeras. +Una funcion que utilice condicionales para validar si el parámetro que le estoy pasando gana o pierde. -y que la funcion al final me regrese el resultado de si gané, o perdí. +Y que la función al final me regrese el resultado de si gané o perdí. -*/ \ No newline at end of file +*/ \ No newline at end of file