Curso Básico de JavaScript
Instruido por el gran: Diego De Granda
1. ¿Qué es JavaScript?
0:19 ¿Qué es Javascript?
1:40 Es un lenguaje: Interpretado, Orientado a objetos, Débilmente tipado y Dinámico.
1:57 ¿Por que es Orientado a Objetos?
3:02 ¿Por qué es débilmente tipado?
5:32 ¿Por qué es dinámico?
5:49 ¿A qué nos referimos con Compilación?
7:27 ¿Realmente JS es un lenguaje interpretado? Aquí explica porque se considera Compilado
10:42 ¿Qué significa Backwards & Forwards? específicamente en relación a JS. Todos los módulos de JS son Backwards.
11:58 BABEL: Es un compilador de JS que permite usar nuevas versiones o módulos de JS (cómo EMACScript 6, 7, 8 o 9). Babel traduce la versión nueva de JS a una versión vieja de js que el navegador puede entender.
2. ¿Por qué JavaScript?
Marcadores a los puntos claves de la presentación:
0:40 Introducción de WebAssembly cómo estándar en la W3C.
1:15 ¿Por qué aprender JavaScript? 1) Para Desarrollo Web.
1:30 2) Posee un ecosistema inmenso de FrameWorks y librerías que te ayudarán a hacer productos Web de forma más rápida y eficiente.
1:50 3) React Native para crear aplicaciones nativas de Android e iOS.
2:05 4) Electron aplicaciones para escritorio que puedan correr en mac y windows.
2:15 5) Backend y IOT.
3. Elementos de un Lenguaje de Programación: Variables, Funciones y Sintaxis
0:03 Elementos de un lenguaje de programación. Dos componentes principales: 1) Data que guardamos en memoria. 2) Tareas (funciones) que haremos con esa data.
0:56 Instalación de VSCode.
2:34 Creando carpeta para archivos.
4:11 Valores primitivos y sus tipos: 1) Número
4:32 Valores primitivos y sus tipos: 2) Texto o cadenas de texto “” (String)
5:27 Valores primitivos y sus tipos: 3) Booleanos (true or false). Creados por George Boole.
6:08 Valores primitivos y sus tipos: 4) Empty values: null, undefined. Conocidos como valores place holder, reservados para algún tipo de valor faltante.
7:22 Valores NO primitivos o de tipo Objetos: 5) Tipo Array [1,2,3] casi siempre valores primitivos. 6) Tipo Objeto {nombre: “Diego”}. Ambos son tipo Objetos.
8:46 Comprobando los tipos de valores en el inspector de elementos o Dev Tools.
11:19 De las cosas raras que tiene JS: El valor null es de tipo objeto.
12:14 Resumen de la clase.
Comentarios valiosos de la comunidad: 1, 2
4. Variables
0:22 ¿Qué es una Variable? Es la representación en memoria de un valor.
0:50 Ejemplos de var
3:02 Declarando una Variable.
3:58 Inicializando la Variable.
5:31 Generando Variables de Array. Declarando e inicializando la variable en la misma sentencia.
6:30 El símbolo de = es el operador que se usa para asignar un valor.
6:59 Generando una Variable tipo Objeto. La estructura se asemeja a la de CSS.
Comentarios valiosos de la comunidad: 1, 2, 3
5. Funciones
0:04 ¿Qué son las funciones y cómo las podemos utilizar? Son un conjunto de sentencias que se pueden utilizar para generar acciones con los Valores que ya hemos guardado en Variables.
0:46 ¿Cómo las vamos a utilizar? Funciones Declarativas. Se declara con la palabra reservada de “funtion”.
2:30 Funciones de Expresión. Se inicializan directamente en una Variable. Se guarda todo el Valor de una función en una Variable.
3:48 Parámetros para funciones.
5:10 Resumen de cómo se generan las funciones Declarativas vs. las de Expresión.
5:16 Las de Expresión también se conocen como funciones Anónimas ¿por qué?, porque la función no tiene nombre, sino que se genera una Variable que contiene como valor a una función.
5:30 Las Declarativas no pueden ser anónimas porque a la función se le está colocando un nombre.
6:35 Ejemplos de funciones un poco más complejas. Directamente en la consola Dev Tools.
10:47 Obteniendo resultados de una función sin el console.log. Creando una variable con el resultado de la operación que queremos hacer. O usando return.
13:53 Resumen de la clase.
Comentarios valiosos de la comunidad: 1, 2, 3. 4
6. ¿Cuándo utilizar una función declarativa y una expresiva?
Marcadores a los puntos claves de la presentación:
Cuando hablamos de funciones en JavaScript, tenemos dos tipos de funciones: Funciones Declarativas (function declaration / function statement) y Expresiones de función (function expression / funciones anónimas).
Funciones Declarativas:
En las funciones declarativas, utilizamos la palabra reservada function al inicio para poder declarar la función:
function saludar(nombre) {
console.log(`Hola ${nombre}`);
}
saludar('Diego');
Expresión de función:
En la expresión de función, la declaración se inicia con la palabra reservada var, donde se generará una variable que guardará una función anónima.
var nombre = function(nombre){
console.log(`Hola ${nombre}`)
}
nombre(‘Diego’);
En la expresión de función, la función podría o no llevar nombre, aunque es más común que se hagan anónimas.
Diferencias:
A las funciones declarativas se les aplica hoisting, y a la expresión de función, no. Ya que el hoisting solo se aplica en las palabras reservadas var y function.
Lo que quiere decir que con las funciones declarativas, podemos mandar llamar la función antes de que ésta sea declarada, y con la expresión de función, no, tendríamos que declararla primero, y después mandarla llamar.
Comentarios valiosos de la comunidad: 1, 2, 3, 4
7. Scope
Marcadores a los puntos claves de la presentación:
0:19 ¿Qué es el Scope? Es el alcance que tienen las variables.
0:49 Ejemplos en Slides.
1:02 Tipos de Scope: Global y Local.
3:30 Ejemplos en la Consola de Dev Tools.
5:45 La Metáfora de la hormiga.
6:45 Resumen de la clase.
Comentarios valiosos de la comunidad: 1, 2, 3, 4
8. Hoisting
Marcadores a los puntos claves de la presentación:
0:25 ¿Qué es Hoisting? Es cuando las variables y funciones se declaran antes de cualquier tipo de código. Hoisting solo aplica para var y funtion. Esto solo ocurre de ECMAScript 5 y anteriores. De la 6 en adelante ya no sucede debido a la introducción de 2 nuevas variables Const y Let
1:36 Ejemplo de cómo se genera un Hoisting y cómo aprender a evitarlo si estamos usando ECMAScript 5 o anteriores.
1:45 Diferencia de Hoisting vs Hosting.
5:31 jit Compiler se refiere a esta parte de la clase 1 (¿Qué es JavaScript?) 5:32
8:20 Hoisting con las funciones.
Comentarios valiosos de la comunidad: 1, 2, 3
9. Coerción
Marcadores a los puntos claves de la presentación:
0:43 Hay 2 tipos de Coerción: Implicitas y Explicitas.
0:49 Coerción Implícita: es cuando el lenguaje nos ayuda y cambia un valor de un tipo a otro valor de otro tipo.
1:17 Coerción Explícita: es la forma en que nosotros obligamos a que un valor de un tipo cambie a otro tipo. (string a number o viceversa)
1:31 Ejemplo Coerción Implícita
3:21 Ejemplo de Coerción Explícita
4:41 Ejemplo de Coerción Explícita. Usando el método String() para convertir un número en texto.
6:52 Ejemplo de Coerción Explícita. Usando el método Number() para convertir un texto a número.
7:27 Caso de uso en la vida real: cuando usamos las etiquetas de <input> en html. JS regresa esos valores como strings. Si queremos tratarlos cómo números toca transformarlos con number().
8:28 Resumen
Comentarios valiosos de la comunidad: 1
10. Valores: Truthy y Falsy
Marcadores a los puntos claves de la presentación:
0:11 Truthy y Falsy los vamos a ocupar cuando comencemos a generar condiciones en JS para validar si algo es verdadero o falso.
0:25 Primero entenderemos que valores por default son falsos y cuales son verdaderos.
0:34 Ejemplos de Boolean que devuelve Falso:
Boolean(); //false
Boolean(0); //false
Boolean(null); //false
Boolean(NaN); //false
Boolean(undefined); //false
Boolean(false); //false
Boolean(""); //false
3:33 Ejemplos de Boolean que devuelve Verdadero:
Boolean(1); //true o cualquier número diferente de cero (0)
Boolean("a"); //true para cualquier caracter o espacio en blanco
Boolean([]); //true array aunque esté vacío
Boolean({}); //true objeto aunque esté vacío
Boolean(function(){}); //true para cualquier función es verdadera también
4:39 Resumen
Comentarios valiosos de la comunidad: 1
11. Operadores: Asignación, Comparación y Aritméticos.
Marcadores a los puntos claves de la presentación:
0:42 Operadores de Operación (+, -, *, /), que nos ayudan a realizar operaciones matemáticas. También conocidos como operadores Binarios.
1:37 Usando el operador + para concatenar strings.
2:31 Operador unitario (!). Se usa para negar un valor.
3:06 Operadores de Asignación (=). Asigna un valor a una variable.
3:34 Operador Comparativo (== y ===).
== compara valores, ej: 3 == “3”; true.
=== compara tipos de datos, ej: 3 === “3”; false.
5:07 Operador Comparativo (>, <, >=, <=)
6:13 Operador Comparativo (&&, ||).
&& equivale a una compuerta AND, solo valida si ambas condiciones se cumplen.
|| equivale a una compuerta OR, y valida si una de las condiciones se cumple.
7:55 Caracteres para usar con Variables: ++ para incrementar valores en 1. +=2 incrementa el valor en 2.
8:57 Resumen.
Comentarios valiosos de la comunidad: 1, 2
12. Condicionales: If, Else, else if
Marcadores a los puntos claves de la presentación:
0:37 ¿Qué son las Condicionales?. Son reglas para validar si algo es verdadero o falso. if valida por defecto si la condición es verdadera.
2:20 else si la condición del if no es verdadera entonces salta a else.
3:35 else if cuando queremos evaluar más de una condición.
4:29 Ejemplo de validación de edad para votar en elecciones.
9:23 Operador Ternario. Equivale a generar un if y else en una sola línea. condition ? true : false;
12:34 Resumen
12:48 Reto: hacer juego de Piedra, Papel o Tijera.
Comentarios valiosos de la comunidad: 1, 2, 3, 3
13. Switch
Marcadores a los puntos claves de la presentación:
0:06 ¿Qué es el Switch?
0:31 El Switch genera condiciones igual que un if pero con casos (case).
1:01 Sintaxis del Switch:
switch (condición a validar) {
case 1ra-condición-a-comparar:
acción-si-se-valida
break
case 2da-condición-a-comparar:
acción-si-se-valida
break
default:
acción-si-ningún-caso-anterior-es-validado
}
5:41 ¿Qué sucede al no colocar el break? El break sirve de freno en las validaciones. Si no se coloca el break todas las validaciones pasan y se imprimen.
6:25 Resumen de la clase.
6:33 Nuevo reto de Piedra, Papel o Tijera, pero usando el swicth.
Comentarios valiosos de la comunidad: 1, 2, 3
14. Arrays
Marcadores a los puntos claves de la presentación:
0:26 ¿Qué es una Array? es un objeto que guarda más de un valor dentro de si. Genera una estructura de datos y puede contener todos los tipos de datos: números, strings, objetos e incluso otros arrays.
1:10 Ejemplos de Arrays:
1:51 ¿Cómo se crea un Array?. Forma sintáctica literal para escribir un array: var nombre-variable = [];
4:25 ¿Cómo saber cuantos elementos hay en un array?. nombre-variable.length
5:09 ¿Cómo acceder a cada elemento dentro del array?. nombre-variable[número-de-posición]
6:35 Métodos para mutar el array: Introducción al tema.
7:24 Método push() para agregar más elementos al array: nombre-variable.push() Empuja un nuevo elemento dentro del array. Al final del mismo.
9:07 Método pop() para eliminar elementos del array: nombre-variable.pop() Extare el elemento y lo elimina.
10:21 Método unshift() para agregar un elemento al principio del array: nombre-variable.unshift()
12:14 Método shift() para eliminar el primer elemento de un array: nombre-variable.shift()
13:55 Método indexOf() para saber la posición de un elemento dentro del array: nombre-variable.inexOf() Retorna el número de la posición que ocupa.
15:21 Resumen de la clase
15. Loops: For y For…of
Marcadores a los puntos claves de la presentación:
0:09 ¿Qué es un Ciclo?. Es una manera rápida y sencilla de poder hacer que una tarea pueda repetirse sin que tengamos que hacerlo de forma manual.
0:39 Comenzando ejemplos de loops de los tipos existentes.
1:53 Antes de comenzar el loop debemos hacer la tarea (función) que queremos invocar desde el loop.
3:03 Iniciando el loop for. Su sintaxis casi siempre ocupa una variable inicial de valor cero (0) for(var i = 0; validación; incrementador de variable) {lo que se desea ejecutar mientras se cumpla la validación}
9:19 Otra forma de hacerlo, loop for…of: Sintaxis for(var nombre-singular of nombre-plural) {función(nombre-singular)}
11:22 Resumen de la clase
Comentarios valiosos de la comunidad: 1
16. Loop: While
Marcadores a los puntos claves de la presentación:
0:15 Generando el array para luego ejecutar el while
0:46 Generando la función que se va a ejecutar dentro del while
1:34 Creando el while. Sintaxis while(a) {b}. Mientras a sea true el loop seguirá ejecutando b, y se detendrá cuando la condicón a ya no se cumpla, es decir sea falso.
3:46 Creando un console.log() para que se aprecie cómo el array esta siendo modificado por el método .shift
4:55 Resumen de la clase
Comentarios valiosos de la comunidad: 1
17. Objetos
Marcadores a los puntos claves de la presentación:
0:05 Entendiendo que es un Objeto de JS. Llevando un objeto del mundo físico al paradigma de objetos de JS.
1:34 Sintaxis de un Objeto en JS. Lo primero es definir una variable: var objeto = {};
2:21 Agregando propiedades al objeto. Es una combinación entre palabras clave y valores. Las propiedades de un objeto se separan con coma “,”.
4:15 ¿Cómo podemos acceder a un valor específico de un Objeto?: nombre-variable.palabra-clave
5:36 Agregando una Función como propiedad de un Objeto
7:37 Forma de acceder al método que esta dentro de nuestro Objeto: nombre-variable.palabra-clave-que-contiene-la-función();
8:07 ¿Qué es el this?: Es una variable que hace referencia a su objeto padre. this en otros contextos puede tener valores diferentes.
9:36 Resumen de la clase
Comentarios valiosos de la comunidad: 1, 2, 3, 4, 4
18. Objects: Función constructora
Marcadores a los puntos claves de la presentación:
2:01 Creando template de nuestra función constructora.
4:56 Creando un nuevo Objeto a partir de nuestro template. var nombre-variable = new nombreFunción(propiedades-del-objeto);
9:29 Reto: Usando los conocimientos adquiridos hasta ahora, genera una función constructora + un loop para crear una lista de objetos de 30 autos que se construya sola.
Comentarios valiosos de la comunidad: 1
19. Métodos de recorridos de Arrays
Marcadores a los puntos claves de la presentación:
0:51 Primero lo primero, generando el array de objetos.
3:59 Métodos para recorrer el contenido del array: Método filter. nombre-variable.filter(funtion(variable-que-contiene-array){return nombre-variable.nombre-palabra-clave operador valor-a-validar}). Regresa 1 array con los objetos que cumplen la validación(Todo el objeto)
6:24 Metodo Map: nombre-variable.map(funtion(variable-que-contiene-array){return nombre-variable.nombre-palabra-clave}). Regresa un array con solo la lista de elementos asociados a la palabra clave.
8:25 Resumen de la clase Método filter: nos ayuda a filtrar objetos de un array. Y el método map nos ayuda a extraer elementos dentro de los objetos y generar un nuevo array sin objetos adentro.
20. Recorriendo Arrays con .find(), .forEach() y .some()
Marcadores a los puntos claves de la presentación:
0:13 Método find() este método valida un true o un false. Si un artículo existe o no existe dentro del array de objetos.
3:02 Método forEach() no genera un nuevo array, solo filtra los elementos de un array de objetos sin modificar el array. var nombre-variable._forEach(funtion(nombre-variable){función-a-ejecutar});
5:27 Método some(): Regresa una validación de true o false. Genera un nuevo array. Y solo retorna el valor true o false.
8:24 Resumen de la clase
Comentarios valiosos de la comunidad: 1, 2, 3, 4, 5
21. Despedida
Marcadores a los puntos claves de la presentación:
0:12 Los cursos que recomienda para continuar:
-Fundamentos de JavaScript
-V8 y el navegador
-ECMAScript 6+
- Puedes acceder al resumen de marcadores de todo el curso en este Tutorial
Cuéntame en los comentarios del Tutorial si te ha gustado este formato de resumen, y dale 💚 si quieres más de estos para la comunidad 😁🙌
Curso Básico de JavaScript
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
