Clase 1 (introducción)
Este tutorial estará basado en mi aprendizaje de este curso, escribiré mis notas y lo que yo considero importante después de haber reflexionado sobre el tema y entendido al 100% los conceptos y acerca de que es lo que hace cada código que Sacha nos enseña.
Soy 100% nuevo en JavaScript (y en programación en general) asi que espero que le sirva a otros novatos a entender como al igual que yo este hermoso lenguaje. 😄
Clase 2 (Calcula el área de un triángulo. Creando funciones)
Para abrir la consola en Google Chrome con atajos de teclado:
Windows: Ctrl+Mayus+i, en Mac: ⌘ + Opción + i
Necesitamos que la consola este en blanco, para ello antes de abrir la consola dejamos la pestaña de Google Chrome en blanco escribiendo “about:blank” en la barra de direcciones.
Mas atajos en Google Chrome: aquí
Nota: Las comillas simples y las comillas dobles se usan para escribir cadenas de texto en el código, y la comilla invertida (``) sirve para lo mismo con la ventaja de poder concatenar código de JS dentro del string con: ${ 5 * 7 / 2 } signo de pesos y llaves.
Las comillas invertidas deben ser las que caen hacia la derecha.
Nota: La consola se refresca (borra) con Ctrl + r en Windows, y ⌘ + r en Mac.
A una variable se le puede asignar una función escribiendola como Arrow Function:
Ejemplo Arrow Function:
// Función tradicional:let suma = function(n1, n2){
return n1 + n2;
};
// Que sería lo mismo que hacer esto:let suma = (n1, n2) => n1 + n2;
Clase 3 (¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos)
Nota: El atajo de teclado para seleccionar palabra por palabra en SublimeText es:
[ Ctrl + Shift-izq. + flecha izquierda o derecha]
Mas atajos de teclado de SublimeText aquí
Nota: “True” significa “Verdadero” Esto quiere decir que sin condiciones (tales como: “Si la edad es mayor a 26”) el código es ejecutado directamente y viceversa con “False”
En el siguiente código es importante recordar que no hace falta poner una condición de “==true” para que se ejecute el código una vez evaluado como verdadero, aunque funcionaria igualmente si es añadido siguiendo la lógica.
elseif (isWithAdult ==true) {
alert(`${name} puede pasar a ver ${starWars7}.
Aunque su edad es ${age}, se encuentra acompañada/o por un adulto`)
}
Clase 4 (Inventar un idioma manipulando strings)
Nota: El método que usó Sacha ** “toUpperCase”** sirve para devolver las letras en mayúsculas de un String (Linea de texto), existen muchos métodos para diversas tareas.
La sintaxis del método es: Objeto.nombreMetodo = nombreFuncion
Más métodos aqui
Un método es un conjunto de funcionalidades que dependen de un objeto
El método .slice toma dos parametros 1= desde que letra 2 = hasta que letra cortaremos el string.
Si ponemos .slice(0, 6) al texto: “Hola mundo”, El resultado será: “Hola m” (los espacios cuentan).
Si no le ponemos el segundo parámetro a .slice lo toma por defecto como “hasta el último carácter”
.slice(7) al texto: “Hola mundo”, El resultado será: “ndo”
Nota: El valor -2 (o cualquier valor negativo) se refiere a los últimos caracteres (en este caso los últimos 2) y este valor solo se podrá usar como segundo parámetro (hasta que letra) ya que si lo ponemos al principio no devolverá nada.
Todo acerca de .slice
El operador de asignación que utiliza Sacha para concatenar el texto (+=) es una manera de acortar el tradicional “x = x + y” a "x += y"
Operadores de asignación
Math es un objeto incorporado por JavaScript que posee propiedades y métodos creados por constantes y funciones matemáticas. No es un objeto de función.
Math.round(x) Devuelve el valor de un número redondeado al número entero más cercano.
El método split() divide un objeto de tipo String en un arreglo.
El parámetro de .split es el carácter con el que queremos que sea separado el string en el array y es representado con una coma.
Acerca de los Arrays o Arreglos aquí
Más sobre:
Los bucles ofrecen una manera rápida y sencilla de hacer algo repetidamente.
Sobre el bucle for aquí.
Sobre .charAtaquí
La última condición de nuestro idioma Platzom para hacer que un palíndomo este escrito con mayúsculas y minúsculas es algo compleja especialmente en la parte del ciclo for el cual viene siendo el siguiente:
functionminMay(str){
const length = str.length
let translation = ''
let capitalize = truefor (let i = 0; i < length; i++) {
constchar = str.charAt(i)
translation += capitalize ? char.toUpperCase() : char.toLowerCase()
capitalize = !capitalize
}
La variable translation es un string vació donde se ira almacenando la palabra según el iterador vaya corriendo.
La variable capitalize es claramente la que usamos para que en cada iteración cambie de valor switcheando de True a False en cada iteración (como podemos ver al final “capitalize = !capitalize”) se deja con distinto valor y esto nos sirve para que nuestra alternativa de if elija un código distinto de UpperCase o LowerCase cada vez que itere.
Nota: != operador de desigualdad
La forma de Sacha de poner la alternativa de if es:
“translation += capitalize ? char.toUpperCase() : char.toLowerCase()”
Que en pocas palabras nos pregunta si capitalize es True (verdadero) entonces “char.toUpperCase()” y nuestro char es el carácter en el que va iterando (i) gracias al método charAt el cual nos indexa cada carácter en un string, después el código al final deja a nuestro capitalize en False a lo cual en la siguiente iteración nuestro if seleccionará “char.toLowerCase()”
El código se podría escribir de la siguiente manera aun que no estaríamos ahorrando nada código:
functionminMay(str){
const length = str.length
let translation = ''
let capitalize = truefor (let i = 0; i < length; i++) {
constchar = str.charAt(i)
if (capitalize == true) {
translation += char.toUpperCase()
}else {
translation += char.toLowerCase()
}
capitalize = !capitalize
}
return translation
}
Clase 5 (¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for)
Nota: El atajo de teclado para selecciones múltiples iguales es ⌘ + D ó Ctrl + D con el que podemos editarlo todo al mismo tiempo.
Mas atajos de teclado de SublimeText aquí
Para nuestro ciclo for de esta clase una duda que me surgió es por que mientras (i) sea menor a dias.length (menor 7) esto quiere decir hasta el #6 de igual manera el ciclo for itera hasta el día #7 ya que (i) comienza desde el 0 y el 0 cuenta como el primer día y esto funciona por que en un arreglo los elementos son indexados desde el #0 (que seria el primer elemento del arreglo) hasta el último que pongamos.
La razón por la que Sacha pone dias [i] en el string “El día ${dias[i]}” es por que los elementos de los arrays son indexados desde el 0 y podemos simplemente llamar a un elemento del Array poniendo: “nomreDelArray[Numero del valor]” Ejemplo:
let arr = [2,8,3,7] <-- Definimos el array
arr[2] <-- llamamos al elemento #2 del Array (o sea el tercero = 0,1,2)
Resultado: 3
Entonces nos aprovechamos ya que nuestro (i) de nuestro ciclo for comienza desde el 0 a iterar agregándole + 1 en cada iteración y de esa manera el string nos muestra un dia diferente de la semana en cada iteración.
La razón por la que Sacha define una variable totalKms fuera del for y le asigna valores dentro del for es una cuestión del Scope más bien explicado en este post.
Acerca de toFixed()
Clase 6 (¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while)
Comenzando esta clase vemos un nuevo operador lógico “&&”
La fórmula para calcular el golpe aleatoreo de cada personaje es:
Número aleatorio entre 0 y 1 multiplicado por 7 (que es la diferencia entre el min y max) sumado al ataque mínimo (que es 5).
0.0 * 7 = 0.0 + 5 = 5
0.3 * 7 = 2.1 + 5 = 7.1
0.5 * 7 = 3.5 + 5 = 8.5
1.0 * 7 = 7.0 + 5 = 12
Analizando esta fórmula básica vemos que es ideal para calcular el ataque.
Clase 7 (¿Cuánto tiempo pasó desde tu fecha de nacimiento?)
Acerca de New
Para entender a “new” debemos de recordar que la programación orientada a objetos en JavaScript esta basada en prototipos y no en clases.
Prototipo:Primer ejemplar que se fabrica de una figura, un invento u otra cosa, y que sirve de modelo para fabricar otras iguales, o molde original con el que se fabrica.
En JavaScript un prototipo es un objeto del cual otros objetos heredan propiedades.
Acerca de Date.
Date tiene bastantes métodos que deberíamos estudiar y tener siempre presentes (algunos memorizados)
Nota: Si analizamos bien el código para sacar el próximo cumpleaños de Sacha esto es verdadero en cuanto su cumpleaños No haya sido ya celebrado, ya que arrojará el cumpleaños de Este año y no el del año siguiente (si estamos en Septiembre u otro mes posterior), para sacar el verdadero próximo cumpleaños dependiendo de la fecha en la que estamos hace falta un poquito mas de código y condicionales con if.
Sacha nos quiso mostrar en esta clase que asignándole un número a una variable (let i = 3) y también podríamos llamar a la función de la siguiente manera:
diasSemana[i] pero se le escapó por error poner diasSemana[3].
Posteriormente para llamar a la función:
diasSemana [proximo.getDay()] La razón por la que funciona este código es que getDay() en una fecha toma el Número de día justamente como lo declaró Sacha (Desde Domingo = 0 hasta Sábado = 6) Me refiero a que JavaScript tiene indexados de esa manera los días y no por que Sacha los haya indexado en su Array (ya que el código hace la petición del Número de día Estandar para una fecha con getDay), entonces el resultado es que:
getDay() hace la petición del Número de día a la fecha de nacimiento de Sacha y JavaScript le dice que es #6, Luego se lo pasa como:
diasSemana [6], a lo cual el Array de Sacha devuelve el valor #6 de su contenido (Sábado).
Mi fecha de nacimiento: let Nacimiento = new Date(1991, 07, 27)
Nacimiento.getDay() = 2 (Lunes).
Clase 8 (Calcular la distancia entre dos puntos - Objetos en JavaScript)
Tema interesante que todos debemos de saber: Teorema de Pitágoras
Ahora Sacha nos enseña que en las constantes podemos almacenar un bloque que contenga mas constantes, además de un valor simple como: "const a = 1"
El valor de las constantes que son almacenadas en el bloque de const se asignan con dos puntos “:”
En esta clase hay que estar atento a como Sacha juega con las matemáticas y los resultados que arrojan las operaciones por ejemplo:
const x = p1.x - p2.x
const y = p1.y - p2.y
return Math.sqrt(x * x + y * y)
}
En el Código anterior los const X y Y tienen la mision de sacar la longitud de los lados del triangulo (aun que ya la sabemos).
El resultado deconst x es igual a (-3) y es confuso por que los valores tendrian que estar en negativo no? a lo que Sacha obvia que en la ecuación:
Math.sqrt(x * x + y * y) al multiplicarse los dos negativos resultará un positivo y no afectará el resultado aun que de igual manera el código hubiera funcionado con: const x = p1.x + p2.x.
Hay que entender bien de donde proviene todo y que es lo que Sacha quiere enseñarnos mas que matemáticas básicas son nuevas formas de poner código y resolverlo de distintas maneras.
Y después de todo claro que para llegar a ese ese resultado no hubiera tomado mas de 1 linea de código.
Por último nos enseña Sacha quese puede pasar un bloque como parámetro a una función sin importar las variables o constantes que haya declarado para ese fin dela siguiente manera:
console.log(distancia(p1, {x: 20, y: -7})) <-- Importante comprenderlo
Ahora nuestra función tomará del bloque pasado como parámetro los valores de X y Y cuando se los pide el bloque de la función:
const x = p1.x + p2.x
const y = p1.y - p2.y
**Clase 9 (Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript)**ins>
En el siguiente código Sacha nos enseña el this.
const p1 = {
x: 0,
y: 4,
moverEnX(x) {
this.x += x
},
moverEnY(y) {
this.y += y
}
}
Y lo importante entender aquí es ¿quien es this. y por que?.
Esta palabra clave es definida por como se llama a la función, en este caso this. se ha pasado como un método y todos los métodos se ejecutan en el contexto de un objeto ahora bien, siguiendo esta jerarquía this. hará referencia al objeto o al propietario de la función, entonces nuestro propietari ode función es p1 o p2 por lo tanto this. es uno de sus métodos, pero puede variar cuando vamos jugando con el scope y depende de como llamemos la función de quien sera this.
Supongo que this. es suma mente importante en JavaScript y es un tema al que le debemos de dedicar su tiempo para entender y lo que buscamos conocer es siempre: quien es this.
Más sobre this.
Clase 10 (Definiendo la clase Punto - Prototipos en JavaScript)
En esta clase Sacha nos explica que es un prototipo en JavaScript.
JavaScript no tiene una notación formal de clase y recurre a las funciones constructoras para este fin. Hay que mencionar también que JavaScript utiliza los prototipos de los objetos para propagar la herencia, algo que cuesta entender al principio.
Función constructora
Una función constructora es una función normal y corriente de JavaScript que se utiliza para definir una especie de plantilla para nuestros objetos personalizados. Veamos un ejemplo:
functionCliente(nombre, fecha, direccion){
this.nombre = nombre;
this.fechaNacimiento = fecha;
this.direccion = direccion;
}
Como podemos ver, se trata de una típica función de JavaScript que admite una serie de parámetros de entrada aunque estos no son obligatorios. La única particularidad de esta función es que se utiliza la palabra reservada .this de JavaScript para definir una serie de propiedades (también podrán ser métodos) que formarán parte de nuestros objetos.
El operador new utilizado junto a una función de JavaScript es lo que nos permite obtener un objeto constructor o función constructora. Lo que sucede por debajo es que new primeramente crea un objeto sin propiedades y posteriormente llama a la función pasándole el nuevo objeto como valor de this. Finalmente, la función nos devuelve un nuevo objeto con las propiedades y métodos definidos dentro de la constructora.
Ejemplo:
//Constructor vacío
functionCliente() {
this.nombre;
this.fechaNacimiento;
this.direccion;
}
//Creamos el objeto y le asignamos valores
var cliente = new Cliente();
cliente.nombre = "Cristina Rodriguez";
cliente.fechaNacimiento = newDate(1991, 7, 27);
cliente.direccion = "Calle Reforma Num. 248";Métodos y prototipos: La mejor forma de crear métodos en los prototipos, para que sean heredados por los objetos, no es dentro de la función Prototipo. La mejor forma es haciendo uso de “.prototype.” de la siguiente forma :
Prototipo.prototype.changeA = functionchangeA(newA){
this.atributo = newA;
}
Clase 11 (Definiendo la clase Punto - Object.create en JavaScript)
Como vimos en la clase anterior nuestro prototipo era una función y le podíamos agregarle métodos mediante .prototype por fuera de la función.
Esta vez nuestro prototipo es un método con atributos.
Más sobre Object.create
Clase 12 (Definiendo la clase Punto - Class en JavaScript)
La manera de hacer clases en JavaScript es la siguiente:
classPunto{
constructor(x, y) {
this.x = x
this.y = y
}
moverEnX(x) {
this.x += x
}
moverEnY(y) {
this.y += y
}
distancia(p) {
const x = this.x - p.x
const y = this.y - p.y
returnMath.sqrt(x * x + y * y)
}
}
Es importante definir el constructor con la palabra “constructor”.
Clase 13 (Entiende el scope de las variables)
En esta clase Sacha nos muestra con diferentes ejemplos como funciona el Scope el cual tenemos que entender bien y tener presente para que funcione bien nuestro código y la importancia de tener bien definidas nuestras variables con las palabras clave let, var y const.
_let _ permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
Clase 14 (Operaciones con arrays)
En esta clase aprendemos como elaborar de la manera correcta una función donde sus argumentos sean sumados. Lo que hace la magia es el método .reduce el cual debemos de entender a la perfección, por ello es bueno tener siempre esta pequeña guía del método .reduce
Creo que lo más importante que se debe entender es como es ejecutada la función paso a paso:
[0,1,2,3,4].reduce(function(valorAnterior, valorActual, indice, vector){
return valorAnterior + valorActual;
});
// Primera llamada
valorAnterior = 0, valorActual = 1, indice = 1
// Segunda llamada
valorAnterior = 1, valorActual = 2, indice = 2
// Tercera llamada
valorAnterior = 3, valorActual = 3, indice = 3
// Cuarta llamada
valorAnterior = 6, valorActual = 4, indice = 4
// el array sobre el que se llama a reduce siempre es el objeto [0,1,2,3,4]
// Valor Devuelto: 10Como vemos, el método -reduce siempre esta recordando 2 valores que son el anterior y el actual por ello también tenemos la opción de agregar un valor inicial o valor anterior en la función para iniciar desde ese valor la suma de los números. En el siguiente ejemplo se le agrega el numero 10 a la función como valor anterior:
[0,1,2,3,4].reduce(function(valorAnterior, valorActual, indice, vector){
return valorAnterior + valorActual;
}, 10);
// Primera llamada
valorAnterior = 10, valorActual = 0, indice = 0
// Segunda llamada
valorAnterior = 10, valorActual = 1, indice = 1
// Tercera llamada
valorAnterior = 11, valorActual = 2, indice = 2
// Cuarta llamada
valorAnterior = 13, valorActual = 3, indice = 3
// Quinta llamada
valorAnterior = 16, valorActual = 4, indice = 4
// el array sobre el que se llama a reduce siempre es el objeto [0,1,2,3,4]
// Valor Devuelto: 20Ahora Sacha nos muestra como realizar un código que nos duplique los argumentos que le pasemos a una función con el método .map
Lo más importante a entender aquí es .map llama a una función (llamada callback) que recibe los siguientes argumentos:
currentValue
El elemento actual del array que se está procesando.
index
El índice del elemento actual dentro del array.
array
El array sobre el que se llama map.
Sobre el método push
Sobre el método filter
Clase 15 (Entiende los closures de JavaScript)
.
.
.
En construcción…
