Introducción al curso

1

¡Alto! Tenemos una nueva versión de este curso para ti

2

Bienvenidos al Curso de Fundamentos de JavaScript

3

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

4

Variables

5

Variables: Strings

6

Variables: Números

7

Funciones

8

El alcance de las funciones

9

Objetos

10

Desestructurar objetos

11

Parámetros como referencia o como valor

12

Comparaciones en JavaScript

Estructuras de Control y Funciones

13

Condicionales

14

Funciones que retornan valores

15

Arrow functions

16

Estructuras repetitivas: for

17

Estructuras repetitivas: while

18

Estructuras repetitivas: do-while

19

Condicional múltiple: switch

Arrays

20

Introducción a arrays

21

Filtrar un array

22

Transformar un array

23

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

24

Cómo funcionan las clases en JavaScript

25

Modificando un prototipo

26

El contexto de las funciones: quién es this

27

La verdad oculta sobre las clases en JavaScript

28

Clases en JavaScript

Asincronismo

29

Funciones como parámetros

30

Cómo funciona el asincronismo en JavaScript

31

Cómo funciona el tiempo en JavaScript

32

¿Qué pasó con swapi.co?

33

Callbacks

34

Haciendo múltiples requests

35

Manejando el Orden y el Asincronismo en JavaScript

36

Manejo de errores con callbacks

37

Promesas

38

Promesas Encadenadas

39

Múltiples promesas en paralelo

40

Async-await: lo último en asincronismo

Juego de HTML

41

Comenzando el juego

42

Generando una secuencia de números

43

Iluminando la secuencia de colores

44

Obteniendo el input del usuario

45

Agregando la verificación del color elegido

46

Agregando los estados finales del juego

47

Conclusiones del curso

Complementos

48

Diferencias entre var, let y const

49

Memoización: ahorrando cómputo

50

¿Hace cuántos días naciste?

51

Funciones recursivas

52

Entiende los closures de JavaScript

53

Estructuras de datos inmutables

54

Cambiando de contexto al llamar a una función

55

¿Cuándo hace falta poner el punto y coma al final de la línea?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Iluminando la secuencia de colores

43/55
Recursos

En esta clase se observa la diferencia entre el uso de let y var para la declaración de variables y cómo esta diferencia afecta el alcance de la variable dentro de un ciclo for. Se recomienda siempre el uso de let cuando se trata de estructuras for, ya que al usar var, el valor de dicha variable se va a remplazar cada vez con la última asignación que se haga, mientras que con let, conservará su valor dentro de cada iteración.
Siempre que sea posible debemos usar const sobre let, y let sobre var.

Aportes 206

Preguntas 90

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Estuvo pensandolo por un tiempo y después me di cuenta… El problema de var y let es la asincronicidad en su máxima expresión!
El setTimeout solo se ejecuta cuando se haya terminado de ejecutar el código principal. Entonces, estamos poniendo en la pila de tareas 7 veces la funncion () => this.iluminarColor(color), pero solo cuando ya haya terminado el ciclo for entero. Entonces cada uno de esas llamadas se fijará… Cual es el valor de la variable color? Y al terminar el ciclo, digamos que fue verde el ultimo color. Todas las llamadas van a usar el color verde porque solo se guardo ese!

si nosotros tenemos un ciclo for:

    for(var i = 0; i < this.nivel; i++){
      var num = i;
      setTimeout(() => console.log(num), 1000 * i)
    }

la pila de tareas se va a ver así finalizado el código principal:

1: console.log(num). cuanto vale num? 9
2: console.log(num). cuanto vale num? 9
3: console.log(num). cuanto vale num? 9
4: console.log(num). cuanto vale num? 9
5: console.log(num). cuanto vale num? 9
6: console.log(num). cuanto vale num? 9
7: console.log(num). cuanto vale num? 9

Porque 9? porque el ciclo for ya finalizo, y var num quedo con ese valor, porque es global.

No se si fui el único pero estuvo un poco enredado el tener un método detrás de otro y así, para ello cree un tipo de diagrama de flujo donde me fui lentamente paso a paso analizando cada parte, aquí les comparto mi diagrama si alguno se quiere apoyar de el para entender mejor 😄

https://app.lucidchart.com/invitations/accept/b0a43763-0a99-4732-9b02-94561eff9cd0

supongo que muchos están así ahorita mismo jajajajaj :v

script de la clase de hoy

const celeste = document.getElementById('celeste')
const violeta = document.getElementById('violeta')
const naranja = document.getElementById('naranja')
const verde = document.getElementById('verde')
const btnEmpezar=document.getElementById('btnEmpezar')

class Juego{
    constructor(){
        this.inicializar()
        this.generarSecuencia()
        this.siguienteNivel()
    } 
    
    inicializar(){     
        btnEmpezar.classList.add('hide')
        this.nivel = 1 
        this.colores = {
            celeste, 
            violeta,
            naranja,
            verde
        }    
    }  

    generarSecuencia(){
        this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random()*4))
    }

    siguienteNivel(){
        this.iluminarSecuencia()
    }

    transformarNumeroAColor(numero){
        switch (numero){
            case 0: 
                return 'celeste'
            case 1:
                return 'violeta'
            case 2:
                return 'naranja'
            case 3:
                return 'verde'
        }
    }

    iluminarSecuencia(){ // let mantiene la variable a diferencia de var que siempre pisa la misma variable, usar siempre conts antes que let y usar siepre let antes de var.
        for (let i = 0; i < this.nivel; i++){
            const color = this.transformarNumeroAColor(this.secuencia[i]) 
            setTimeout(() => this.iluminarColor(color), 1000*i)
        }
    }

    iluminarColor(color){
        this.colores[color].classList.add('light')
        setTimeout(() => this.apagarColor(color), 350)
    }

    apagarColor(color){
        this.colores[color].classList.remove('light')
    }
}    

function empezarJuego(){    
    window.juego = new Juego()
}

Vamos muy bien! de verdad confieso que por mi nivel, se me hace imposible preever como se hace el juego, imagino que eso vendra con el tiempo… asi que seguire avanzando!

No entiendo nada pero estoy haciendo todo como lo están haciendo en el video y me funciona. Algún dia lo entenderé

Estoy totalmente segura de que si intento hacer este juego por m cuenta, desde 0, solo lograré llegar hasta definición de las variables 😢
Obviamente se que con práctica y el tiempo iré mejorando, pero por ahora, me siento abrumada con tanta información. Emocionada, pero abrumada :la

Hola compañeros!
Para poder comprender de mejor manera lo que ocurre dentro del ciclo for trataré de explicarlo como yo lo comprendí, espero me puedan entender y si me equivoco en algo, por favor corríjanme.

Primero, vamos a poner un ejemplo como el siguiente:

for (var i = 0; i < 10; i++){
    setTimeout( () => console.log(i), 1000*i)
    console.log(i)
}

Si ejecutamos el código anterior en la consola saldrá lo siguiente:
0
1
2
3
4
5
6
7
8
9
(10) 10 -------> Sale como resultado 10 veces el 10.
.
Como sabemos, la función “setTimeout” es una función que se puede ejecutar asíncronamente, por lo que JavaScript delegará esa función al navegador diciéndole “Ejecuta esta función con una variable i en tantos segundos”. Entonces el navegador recibe la función y queda como registrada que la variable i será el argumento de esa función y los segundos en que se ejecutará ya están definidos. Esto ocurre en cada iteración del for. Es decir, ocurre que JS delega esta tarea 10 veces al navegador.

.

Debemos tomar en cuenta que cada iteración del bucle for es como si fuera un bloque de código nuevo. Entonces, debido a las características de las variables “var”, en cada ciclo la variable i se sobrescribirá (o se “pisa” como dice sacha).
.
Entonces, al llegar el último ciclo, el valor de “i” es 10. Y es en este momento cuando JS terminó de realizar todas las tareas y ahora si recibe las del navegador, pero estas funciones que recibe, cada una esta buscando el valor registrado de la variable “i” que se le paso como argumento en su respectiva iteración. Pero como “i” se sobreescribió al final con el valor de 10, entonces todos los callbacks tendran ese valor de i de 10.
.
Para evitar esto, declaramos la variable "i" como "let", para evitar que se sobreescriba, ya que la naturaleza de “let” hace que la variable “i” solamente viva dentro de un bloque de código. Entonces para cada iteración del bucle for (que es un bloque diferente) tendremos diferentes “i” y así cada callback que regrese el navegador tendrá el valor correcto de “i”.
.
Esto aplica de igual manera en nuestro código cuando declaramos como “const” la variable “color”. entonces para cada callback (this.iluminarColor(color)) que regrese el navegador tendrá su correspondiente variable “color”.

En el minuto 15:22

const… let… var…?

Les dejo este material que es super interesante y despeja dudas hacerca de var, const y let.
JavaScript es un lenguaje de programación con el ámbito global como ámbito, visibilidad o scope predeterminado y en el que todo se pasa por referencia también de forma predeterminada. Esto significa que una variable declarada fuera de una función es una variable global y es pasada por referencia a scopes descendientes o herederos:

i = “global”;
function foo() {
i = “local”;
console.log(i); // local
}
foo();
console.log(i); // local
En el snippet anterior se puede ver como la variable i es una variable del ámbito global y es sobreescrita dentro de la función por ser pasada por referencia; la referencia al identificador i dentro y fuera de la función es la misma referencia. Sería equivalente a declarar la variable con el keyword var:

var i = “global”;
function foo() {
i = “local”;
console.log(i); // local
}
foo();
console.log(i); // local
Sin embargo, si declaramos la variable con var también dentro de la función, se crea una variable local cuya visibilidad se reduce a la propia función donde ha sido declarada:

var i = “global”;
function foo() {
var i = “local”; // Otra variable local solo para esta función
console.log(i); // local
}
foo();
console.log(i); // global
Ahora hay dos variables con el mismo identificador pero en ámbitos diferentes y con referencias en memoria diferentes. La variable i dentro de la función tiene un scope reducido al ámbito de la función y no sobreescribe la variable global.

En resumen, la declaración con var define una variable en el ámbito local actual (lease función) y se hereda a scopes descendientes por referencia. Si la variable es declarada fuera de una función, la variable será una variable global.

Un último apunte sobre el ámbito de var, es que una variable declarada exclusivamente dentro de una función, no existe fuera de la misma, pues sería una variable local para esa función:

function foo() {
var i = “local”;
}
console.log(i); // ReferenceError: i is not defined
Hoisting
Además del ámbito de aplicación visto antes, una variable declarada con var es sometida a hoisting («izamiento» o «levantamiento»): la declaración de la variable es «levantada» hasta el inicio del ámbito de aplicación pero la asignación al valor permanece en el sitio donde se realice.

Si intentamos acceder a su valor antes de que se asigne el valor, obtendremos un valor indefinido (undefined),:

console.log(i); // undefined
var i = 1;
Este comportamiento se puede entender como «la variable i ha sido declarada en el programa pero en el momento de intentar acceder a ella aún no tenía un valor asignado». La interpretación sería similar al siguiente código:

var i; // Variable declarada pero valor no definido
console.log(i); // undefined
i = 1;
console.log(i); // 1
Sin embargo, si la variable no es declarada en absoluto obtendremos un ReferenceError, que no es lo mismo que obtener un valor indefinido:

console.log(x); // ReferenceError: x is not defined
var i = 1;
Debido a este comportamiento, se suele recomendar mover todas las declaraciones de variables al inicio del scope aunque no se asigne valor alguno, de esta forma se evitan estos posibles errores de ejecución.

El hoisting no es posible en variables declaradas con let o const; estas variables siempre darán un ReferenceError si se intenta acceder a ellas antes de que sean declaradas:

console.log(x); // ReferenceError: x is not defined
let x = 1;
Declaración de variables con let y const
let y const son dos formas de declarar variables en JavaScript introducidas en ES6 que reducen el ámbito de la variable a bloques (con var el ámbito era la función actual) y no admiten hoisting. Además, las variables declaradas con const no pueden ser reagsinadas (aunque no significa que su valor sea inmutable, como veremos a continuación).

let
Un bloque en JavaScript se puede entender como «lo que queda entre dos corchetes», ya sean definiciones de funciones o bloques if, while, for y loops similares. Si una variable es declarada con let en el ámbito global o en el de una función, la variable pertenecerá al ámbito global o al ámbito de la función respectivamente, de forma similar a como ocurría con var.

Por ejemplo, en el siguiente snippet la variable i es una variable global y la variable j es una variable local:

let i = 0;
function foo() {
i = 1;
let j = 2;
if(true) {
console.log(i); // 1
console.log(j); // 2
}
}
foo();
Pero si declaramos una variable con let dentro un bloque que a su vez está dentro de una función, la variable pertenece solo a ese bloque:

function foo() {
let i = 0;
if(true) {
let i = 1; // Sería otra variable i solo para el bloque if
console.log(i); // 1
}
console.log(i); // 0
}
foo();
Fuera del bloque donde se delcara con let, la variable no está definida:

function foo() {
if(true) {
let i = 1;
}
console.log(i); // ReferenceError: i is not defined
}
foo();
Debido a este comportamiento, muchos desarrolladores se inclinan hacia let como la forma predeterminada de declarar variables en JavaScript y abandonar var (1, 2, 3), pues el scope más específico previene la sobreescritura de variables de forma accidental al declarar variables sin ensuciar el scope superior.

const
El ámbito o scope para una variable declarada con const es, al igual que con let, el bloque, pero si la declaración con let previene la sobreescritura de variables, const directamente prohíbe la reasignación de valores (const viene de constant).

Con let una variable puede ser reasignada:

function foo() {
let i = 0;
if(true) {
i = 1;
}
console.log(i); // 1
}
foo();
Con const no es posible; si se intenta reasignar una variable constante se obtendrá un error tipo TypeError:

const i = 0;
i = 1; // TypeError: Assignment to constant variable
Pero que no se puedan reasignar no significa que sean inmutables. Si el valor de una variable constante es «algo» mutable, como un array o un objeto, se pueden cambiar los valores de sus elementos.

Por ejemplo, una variable constante se puede asignar a un objeto con determinadas propiedades. Aunque la variable no se pueda asignar a un nuevo valor, si se puede cambiar el valor de sus propiedades. Esto sería posible:

const user = { name: ‘Juan’ };
user.name = ‘Manolo’;
console.log(user.name); // Manolo
Pero esto no sería posible:

const user = ‘Juan’;
user = ‘Manolo’; // TypeError: Assignment to constant variable
Es decir, la variables declaradas con const son constantes (no reasignables) pero pueden ser mutables. Si es un objeto, incluso se podrían crear nuevas propiedades:

const user = { name: ‘Juan’ };
user.surname = ‘Padial’;
console.log(user); // {name: ‘Juan’, surname: ‘Padial’}
Resumen
var declara una variable de scope global o local para la función sin importar el ámbito de bloque. Permite hoisting.
let declara una variable de scope global, local para la función o de bloque. Es reasignable y no permite hoisting.
const declara una variable de scope global, local para la función o de bloque. No es reasignable, pero es mutable. No permite hoisting.
En general, let sería todo lo que se necesita dentro de un bloque, función o ámbito global. const sería para variables que no van sufrir una reasignación. var se puede relegar para cuando necesitemos hacer hoisting, vamos, casi nunca.

Datos de utilidad que he leído en los comentarios más viejos:
Ahora utilizar let / const, var ya no es utilizado(aún sirve y servirá, pero genera problemas como los del video)
SetTimeout se ejecuta cuando se termine el ciclo for, por eso que solo se aplicará el último color guardado (Es un buen ejemplo de asincronismo jaja)
Espero sea de utilidad.

buenisimo esto … igual no entendi nada…!!!

Creo que hubiese servido plantear primero bien la lógica del juego con algún diagrama o algo similar y luego ir convirtiendo las partes de ese diagrama en el código. de esta forma se comienza a ejercitar la dinámica de convertir los problemas a código y así ir resolviendo cada parte del juego.
Simple mente es una forma mas visual para que aquellos que estamos en un nivel básico entendamos bien como aplicar todo lo que hemos visto en el curso.

Por acá dejo una explicación sobre las declaraciones let, var, const
https://dev.to/sarah_chima/var-let-and-const--whats-the-difference-69e

Una recomendación: Siempre usen let, en el 99% de los casos siempre funciona, no causará ningún problema Además de que ya es el nuevo estándar

Para hacerlo más flexible al código, escalable y no perderse en un futuro con la relación Color-Numero (Un simon de 100 colores XD), cree un clase Color donde ira todo lo relacionado al mismo.

this.colores = new Array(
            new Color('celeste', 0, celeste),
            new Color('violeta', 1, violeta),
            new Color('naranja', 2, naranja),
            new Color('verde', 3, verde)
        )

Clase Color

class Color {
    constructor(_color, _numColor, _elemHTML) {
        this.color = _color
        this.numColor = _numColor
        this.elemHtml = _elemHTML
    }

    getColor() {
        return this.color
    }

    getNumColor() {
        returnthis.numColor
    }

    getElemHTML() {
        return this.elemHtml
    }
}

Me hubiera gustado un pseudo código o basta con un listado de tareas. para de esta manera no ir a ciegas.

Hice una variante al código del profesor, espero les sirva

const empezar = document.getElementById('btnEmpezar');
const azul = document.getElementById('azul');
const verde = document.getElementById('verde');
const rojo = document.getElementById('rojo');
const naranja = document.getElementById('naranja');

class Juego{
    constructor(){
        this.nivel = 7;
        this.inicializar();
        this.generarSecuencia();
        this.numeroAColor();
        this.iluminarColores();
    }

    inicializar(){
        empezar.classList.add('hide');
    }

    generarSecuencia(){
        this.secuencia = new Array(10).fill(0).map(numero => Math.floor(Math.random() * 4)); 
    }

    numeroAColor(){
        this.colores = this.secuencia.map(color => { 
            if (color == 0){
                return azul;
            }
            if (color == 1){
                return verde;
            } 
            if (color == 2){
                return rojo;
            }
            if (color == 3){
                return naranja;
            }
        });
    }

    iluminarColores(){
        for (let i = 0; i< this.nivel; i++){
            let divColor = this.colores[i];
            setTimeout(() => {
                divColor.classList.add('iluminar');
                setTimeout(() => {
                    divColor.classList.remove('iluminar');
                }, 350);
            }, 1000 * i);
        }
    }
}

function empezarJuego(){
    juego = new Juego();
}

¯\_(ツ)_/¯

Ya en este punto si me ponen a hacer un ejercicio de estos solo no sabría que hacer al pie de la letra

No entendí muy bien el uso de let. ¿A que se requiere el profesor con ‘pisarse a si misma’?

Excelente clase es bueno encontrar este tipo de bugs durante las clases para así ir explicando el porqué ocurren.

La clase con más contenido del curso (por ahora), me tomó casi 3 horas en digerirlo casi todo…

Comparto esto con uds, lo que comprendí de esta clase:

Teníamos realizado el código hasta generar la secuencia
En nuestra constructor agregaremos la función this.siguienteNivel()

En la función siguienteNivel() agregaremos la llamada a la función iluminarSecuencia que tendrá el código que genere la funcionalidad de dar un color de iluminación de acuerdo a la secuencia generada y el nivel

siguienteNivel() {
    this.iluminarSecuencia();
  }

En la función de iluminarSecuencia() se iterará hasta el nivel desginado aquí se llamará a dos funciones

iluminarSecuencia() {
    for (let i = 0; i < this.nivel; i++) {
      const color = this.transformarNumeroAColor(this.secuencia[i]);
      setTimeout(() => this.iluminarColor(color), 1000 * i);
      //this.iluminarColor(color);
    }
  }
  • transformarNumeroAColor que tendrá en un case en que recibirá un parámetro el cual es un número y ese número representará un color , ese procedimiento está realizado con un switch
 const color = this.transformarNumeroAColor(this.secuencia[i]);
transformarNumeroAColor(num) {
    switch (num) {
      case 0:
        return "celeste";
      case 1:
        return "violeta";
      case 2:
        return "naranja";
      case 3:
        return "verde";
    }
  }
  • La otra función es iluminarColor(color) que se ejecuta con un setTimeOut de 1000 milisegundos por la iteración i, en esa función se asigna la clase light al elemento que contiene el color que se envía por el parámetro
iluminarColor(color) {
    this.colores[color].classList.add("light");
    setTimeout(() => this.apagarColor(color), 350);
  }

En esta función se llama a otra que tendrá la funcionalidad de apagar el color o la liluminación hecha después de 350 milisegundos

apagarColor(color) {
    this.colores[color].classList.remove("light");
  }

Lo que esta pasando con los colores es un tema que debe tratarse y que son los closures, es buena solución la de reemplazar por let pero falta mas explicación

No me habia quedado claro porque tenia que llamar dos veces al setTimeout, pero creo que ya lo entendi, por favor corrijanme si no estoy en lo cierto

-cuando tienes un setTimeout dentro de un bucle cada iteracion se repite sin esperar a que la tarea en espera en este caso ‘setTimeout’ termine(asincrosinmo)

  • Es decir el bucle SIEMPRE se ejecutara inmediatamente(al maximo que tu PC podra) lo unico que hacemos dentro del for ;

iteracion1 -> ejecutate ahora
iteracion2 -> ejecutate dentro de 1 segundo
iteracion3 -> ejecutate dentro de 2 segundos…

  • Y a su vez cada iteracion tiene un delay de 350miliseg para que haga algo(en este caso apagar el color que acabamos de prender en la iteracion correspondiente)

Para los que, tienen “poco tiempo”, desarrollando código, y tienen “algunas” dudas…
1- https://www.geeksforgeeks.org/javascript-tutorial/

2-https://developer.mozilla.org/es/docs/Web/JavaScript

const btnEmpezar = document.getElementById('btnEmpezar')
const celeste = document.getElementById('celeste')
const violeta = document.getElementById('violeta')
const naranja = document.getElementById('naranja')
const verde = document.getElementById('verde')



class Juego {
    constructor(){
        this.inicializar()
        this.generarSecuencia()
        this.siguienteNivel()
    }
    
    
    inicializar(){
        btnEmpezar.classList.add('hide')
        this.nivel = 1
        this.colores = {
            celeste,
            violeta,
            naranja,
            verde
        }
    }

    generarSecuencia(){
        this.secuencia = new Array(10).fill(0).map(n=> Math.floor(Math.random()*4))
    }

    siguienteNivel(){
        this.iluminarSecuencia()
    }

    transformarNumeroAColor(numero){
        switch(numero){
            case 0:
                return 'celeste'
            case 1:
                return 'violeta'
            case 2:
                return 'naranja'
            case 3:
                return 'verde'
        }
    }

    iluminarSecuencia(){
        for(let i = 0; i < this.nivel; i++){
            let color = this.transformarNumeroAColor(this.secuencia[i])
            setTimeout(()=>this.iluminarColor(color), 1000 * i)

        }
    }
    iluminarColor(color){
        this.colores[color].classList.add('light')
        setTimeout(()=>this.apagarColor(color), 350)
    }

    apagarColor(color){
        this.colores[color].classList.remove('light')
    }
}



function empezarJuego (){
    window.juego = new Juego()
}

SI ME SALIOOO¡¡¡
Me esta costando muchísimo seguir este ejercicio, si bien entiendo la función de todo lo que pone, lo cual me da ánimo. Tendría que desglosar todo para entender el porque. XD

Esta clase tiene el volumen mas fuerte

Hubiera sido genial si nos daba el diagrama de flujo de como funciona el programa…

Mi aporte de como veo lo que sucede en esta clase, ojalá les sirva.
Lo hice a partir de la explicación de Luis Xavier, que les recomiendo que también lean.

  /**
    * Cada vuelta de for es como un nuevo bloque de código.

    * Si "color" se declaro como var, el valor final de "color" va a afectar a todos los bloques de código generados ya que
       su alcance es GLOBAL.

    * Si se declaro const, al final a cada bloque se le respetará el valor de "color" que se le haya asignado ya que const no
       se puede modificar y solo tiene el alcance de su bloque de codigo (LOCAL).

      iluminarSecuencia(){
        for(let i =0; i < this.nivel; i++){
          const/var color = this.transformarNumeroAColor(this.secuencia[i])
          setTimeout(() => this.iluminarColor(color), 1000 * i)
        }
      }

    * Visto de otro modo...

      Vueltas de for con var:{

        Se genera...

        1er Bloque{
          var color = this.transformarNumeroAColor(this.secuencia[i]) ------> Nuevo color.
          setTimeout(() => this.iluminarColor(color), 1000 * i) ------> funcion delegada.
        }

        2do Bloque{
          var color = this.transformarNumeroAColor(this.secuencia[i]) ------> Nuevo color (se reemplaza en bloques anteriores, "se pisa").
          setTimeout(() => this.iluminarColor(color), 1000 * i) ------> funcion delegada.
        }

        3er Bloque{
          var color = this.transformarNumeroAColor(this.secuencia[i]) ------> Nuevo color (se reemplaza en bloques anteriores, "se pisa").
          setTimeout(() => this.iluminarColor(color), 1000 * i) ------> funcion delegada.
        }

        n Bloque{
          var color = this.transformarNumeroAColor(this.secuencia[i]) ------> Nuevo color (se reemplaza en bloques anteriores, "se pisa").
          setTimeout(() => this.iluminarColor(color), 1000 * i) ------> funcion delegada.
        }

        -----> El valor que color tome al final modificara a los bloques de arriba ya que fue declarado como var,
                y su alcance es GLOBAL.
      }

      Cuando termine el ciclo for, los setTimeout delegados se ejecutarán ya que la funcion principal fue terminada, 
        TODOS tomarán el valor final de "color" y es por eso que se nos repite el mismo color.
            
-------------------------------------------------------------------------------------------------------------------------------------------

      Vueltas de for con const:{

        Se genera...

        1er Bloque{
          const color = this.transformarNumeroAColor(this.secuencia[i]) ------> Nuevo color (solo en este bloque).
          setTimeout(() => this.iluminarColor(color), 1000 * i) ------> funcion delegada.
        }

        2do Bloque{
          const color = this.transformarNumeroAColor(this.secuencia[i]) ------> Nuevo color (solo en este bloque).
          setTimeout(() => this.iluminarColor(color), 1000 * i) ------> funcion delegada.
        }

        3er Bloque{
          const color = this.transformarNumeroAColor(this.secuencia[i]) ------> Nuevo color (solo en este bloque).
          setTimeout(() => this.iluminarColor(color), 1000 * i) ------> funcion delegada.
        }

        n Bloque{
          const color = this.transformarNumeroAColor(this.secuencia[i]) ------> Nuevo color (solo en este bloque).
          setTimeout(() => this.iluminarColor(color), 1000 * i) ------> funcion delegada.
        }

        -----> El valor que color tome al final NO modificará a los bloques de arriba ya que fue declarado como const,
                de este modo no podra se modificado y su alcance sera LOCAL.
      }

      Cuando termine el ciclo for, los setTimeout delegados se ejecutarán ya que la función principal fue terminada,
        tomarán el valor de "color" que se les hayan asignado en sus bloques de código y lo mostrán.
  */```

3. Iluminando la secuencia de colores:

Les comparto el código de la clase:

const celeste = document.getElementById('celeste');
const violeta = document.getElementById('violeta');
const naranja = document.getElementById('naranja');
const verde = document.getElementById('verde');
const btnEmpezar = document.getElementById('btnEmpezar');

class Juego {
    constructor() {
        this.inicializar();
        this.generarSecuencia();
        this.siguienteNivel();
    }

    inicializar() {
        btnEmpezar.classList.add('hide');
        this.nivel = 7;
        this.colores = {
            celeste,
            violeta,
            naranja,
            verde
        };
    }
    generarSecuencia() {
        this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random() * 4));
    }
    siguienteNivel() {
        this.iluminarSecuencia();
    }
    transformarNumeroAColor(num) {
        switch(num) {
            case 0:
                return 'celeste';
            case 1:
                return 'violeta';
            case 2:
                return 'naranja';
            case 3:
                return 'verde';
        }
    }
    iluminarSecuencia() {
        for(let i = 0; i < this.nivel; i++) {
            const color = this.transformarNumeroAColor(this.secuencia[i]);
            setTimeout(() => this.iluminarColor(color), 1000 * i);
        }
    }
    iluminarColor(color) {
        this.colores[color].classList.add('light');
        setTimeout(() =>this.apagarColor(color), 350);
    }
    apagarColor(color) {
        this.colores[color].classList.remove('light');
    }
}

function empezarJuego() {
    window.juego = new Juego();
}

Hola, yo hice la clase de una manera ligeramente diferente…

  • Para empezar noté completamente innecesario crear el objeto “colores”, ya que su único objetivo es convertirlo a string, para lo cual tenemos que crear una función que solo contiene switch. Mi solución fué hacer “colores” un array que contenga los 4 elementos que utilizaremos.
  • La función iluminarSecuencia() se vuelve mas legible si en lugar de declarar una variable “color” para asignarle un color y recién entonces iluminarlo, directamente accedemos al elemento del array mencionado arriba.
  • Si ponemos a pensarlo, siempre que iluminemos un color vamos a tener que apagarlo, entonces, ¿Porqué no hacerlo en una misma función? Incluso vamos a ocupar menos líneas de código y será más agradable a la vista.
    -También agregué un borde negro cuando se ilumina, para resaltar mejor el color, ésta desición es simplemente porque elegí colores diferentes para hacer mí dibujo.

A continuación el código de la clase:

  constructor(){
    this.colores = [azul, rojo, amarillo, verde]
    this.nivel= 1
    this.inicializar()
  }

  inicializar(){
    btnEmpezar.classList.add("hide")
    this.generarSecuencia()
    this.iluminarSecuencia()
  }

  generarSecuencia(){
    this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random()*4))
  }

  iluminarSecuencia(){
    for(let i=0;i<this.nivel;++i){
      setTimeout(()=>this.iluminarColor(this.colores[this.secuencia[i]]),400*i)
    }
  }


  iluminarColor(color){
    color.classList.add('light', 'borde')
    setTimeout(() => color.classList.remove('light', 'borde'),350)
  }
}

Creo que a este curso (y a cualquiera que haga un proyecto de este estilo) le va bien tener un diagrama de flujo antes de empezar, tanto para generar buenas practicas entre los estudiantes como para que entendamos desde el principio qué estamos haciendo. Al final atamos cabos y lo podemos analizar, pero para algunos es un enriedo

Vengo del futuro: para que entiendan las diferencias de VAR, LET y CONST. Vayan a la sección 8. Complementos y vean la primera clase.
Con esto verán la Luz 😃

Lo que pasa con var y let es algo extraño, pero practicamente el scope de let es a nivel de llaves y el de var no, es por eso que cuando hacemos un var, se queda el último valor generado, y entonces el timeout lo toma, al hacer let, como el scope es a nivel de llaves, digamos que cada ciclo tiene su propia variable llamada “color” no son la misma, es como si hubieran 10 funciones dentro de ese ciclo conteniendo una variable llamada color, cada una es diferentes por el scope

Agregué esta setTimeout en la parte del siguiente nivel para darle tiempo al jugador para prepararse y no empezar de una:

siguienteNivel()
    {
        setTimeout(()=> this.iluminarSecuencia(), 500)
    }

es denso este curso, a un que entiendo todo lo que hace, no podria hacerlo ni conectar tantas cosas asi como de la nada T_T.
es como muy avanzado el ejemplo al final senti que solo copie lo que decia en ves de desarrollarlo yo mismo

Este ha sido el curso que menos he entendido, de verdad que trato pero no doy… ni modo, seguir investigando.

Aquí les dejo más info sobre el tipo de variable y sus diferencias.

El ejercicio me funcionó.

No comprendo por que se produce el bug usando la variable var = color en el for

A los que tengan el error "Uncaught TypeError: Cannot read property ‘classList’ of undefinedat Juego.iluminarColor"
se debe a que en la estructura switch se hace los return de los objetos en vez del string del color. En resumen, para solucionarlo, debes tener los colores que retornas entre comillas, por ejemplo, return ‘celeste’.

Aquí mis apuntes respecto al ciclo for y la utilización de let para determinar una variable que va a cambiar según su valor.

      //Con la siguiente funsión estamos haciendo que según el nivel en que nos encontremos se incremente el número de colores que se iluminan, hasta llegar a 10.
      iluminarSecuencia(){
        for(let i = 0; i < this.nivel; i++){
          //la palabra reservada let, permite que en un ciclo for las variables se mantengan como una variable indefinida durante todo el bloque y que le asigne un color a cada número de la secuencia, así evitamos que se quede como valor de "color" el último número de la secuencia en la cronólogia(setTimeout) que llama al color a iluminarse con 1 segundo de separación entre sí; funsion que con la palabra var, no se lograría.
          let color = this.transformarNumerosAColores(this.secuencia[i])          
          setTimeout(() => this.iluminarColor(color), 1000 * i)
        }```

corregir un bug dentro de un for cambiando var por let

TIP: Interesante cuando sea posible: const antes que let y let antes que var

mi duda es, si en el ciclo i < this.nivel, como aumenta this.secuencia[i], si el nivel esta el 1…?

Tengo este error!!
this.colores[color] is undefined

Que pasa si cierto no navegador no aguante el let he visto casos ?

Muy bueno lo del bug de var y let. Ahora me quedó más claro por qué utilizar uno u otro.

hasta el momento no puedo hacer que se ilumine el color

Hola amigos tengo este mensaje en la consola y no logro identificarlo

Me costó trabajo (honestamente).

No me queda claro porque el programa funciona correctamente cuando:

  • transformarNumeroAColor() devuelve una cadena de caracteres con el nombre del color.
  • Esa misma cadena de caracteres, es la que usamos para identificar, dentro de iluminarColor(), al color que queremos iluminar en this.colores.
    Sin embargo, en this.colores no definimos los colores segun cadenas de caracteres, sino segun variables.

ayudenme, me tira error en la linea 62, color not defined

btnEmpezar = document.getElementById('btnEmpezar')


const celeste = document.getElementById('celeste')
const violeta = document.getElementById('violeta')
const naranja = document.getElementById('naranja')
const verde = document.getElementById('verde')





class Juego {
    constructor(){
        this.inicializar()
        this.generarSecuencia()
        this.siguienteNivel()
    }

    inicializar(){
        btnEmpezar.classList.add('hide')
        this.nivel = 1
        this.colores = {
            //como propiedad javascript al guardar objetos con su mismo nombre "violeta: violeta," te permite poner solo 1 vez el nombre para ahorrar codigo

            celeste,
            violeta,
            naranja,
            verde
        }
    }
    generarSecuencia(){
        this.secuencia = new Array (10).fill(0).map(n => Math.floor(Math.random() * 4))
    }
    siguienteNivel(){
        this.iluminarSecuencia()
    }
    transformarNumeroAColor(numero){
        switch (numero) {
            case 0:
                return 'celeste'
            case 1: 
                return 'violeta'
            case 2:
                return 'naranja'
            case 3:
                return 'verde'
        }

    }
    iluminarSecuencia(){
        for (var i = 0; i < this.nivel; i++){
            var color = this.transformarNumeroAColor(this.secuencia[i])
           setTimeout(() => this.iluminarColor(color), 1000 * i)
        }
    }
    apagarColor(){
        this.colores[color].classList.remove('light')
    }
    iluminarColor(){
        this.colores[color].classList.add('light')
        setTimeout(() => this.apagarColor(color), 350)
    }
}
function empezarJuego () {
    window.juego = new Juego()
}

Después de 1 mes de estar practicando, por fin comprendo la lógica del estas clases.

Vaya!! que increíble saber los que ocasiona las diferentes formas de declarar una variable de determinado tipo

La diferencia entre un var y un let es practicamente el levantamiento(hoisting) que tienen dentro de un bloque de código.

😮 no me esperaba eso del manejo de var y let 😮

Se recomienda siempre el uso de let cuando se trata de estructuras for, ya que al usar var, el valor de dicha variable se va a remplazar cada vez con la última asignación que se haga, mientras que con let, conservará su valor dentro de cada iteración.
Siempre que sea posible debemos usar const sobre let, y let sobre var.

La función transformar número a color se puede cambiar por el manejo de arrays asociativos ?. En programación básica Freddy habla de los arrays asociativos.

Recomiendo ir al apartado de complementos al final del curso, y ver el video de varm let y const antes de continuar con el siguiente video. 😃

Es un poco complejo…

si, muy bien explicado, ojala saltaran varios bug, asi podemos ver los casos y apresndemos más 😉

No hay una forma de que los colores estén contenidos en un array y que para obtenerlos solo uses de indice el numero generado en la secuencia? eso reemplazaría a la función TransformarNumeroAColor que conitiene el switch case, estoy intentando pero aún no me sale

Veo que no soy el único que no entiendo todo completamente, pero el código está saliendo poco a poco.

Es un poco dificl de entender si en alguna parte de nuestra cabeza queda que el concepto del timeout utilizado en otros lenguajes en el que literalmente se congela la ejecución del mensaje. Aqui el timeout no para la ejecución del programa sino que dice que “iluminame este color, pero solo hasta dentro de i segundo

Parece un poco lioso, pero la verdad es que son todos los conceptos que hemos ido adquiriendo en este curso.

Uncaught TypeError: Cannot read property ‘classList’ of undefined

alguien más con este error?

Ayuda, no me ilumina el juego 😦

    <script>
      const celeste =document.getElementById('celeste')
      const violeta =document.getElementById('violeta')
      const naranja =document.getElementById('naranja')
      const verde = document.getElementById('verde')
      const btnEmpezar = document.getElementById('btnEmpezar')

      class Juego {
        constructor() {
          this.inicializar()
          this.generarSecuencia()
          this.siguienteNivel()
        }

        inicializar() {
          btnEmpezar.classList.add('hide')
          this.nivel = 7
          this.colores = {
            celeste,
            violeta,
            naranja,
            verde
          }
        }

        generarSecuencia() {
          this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random() * 4))
        }

        siguienteNivel() {
          this.iluminarSecuencia()
        }

        transformarNumeroAColor(numero) {
            switch (numero) {
              case 0:
                return 'celeste'
              case 1: 
                return 'violeta'
              case 2:
                return 'naranja'
              case 3:
                return 'verde'
            }
        }

        iluminarSecuencia() {
          for(let i = 0; i < this.level; i++) {
            const color = this.transformarNumeroAColor(this.secuencia[i])
            setTimeout(() => this.iluminarColor(color), 1000 * i)
          }
        }

        iluminarColor(color) {
          this.colores[color].classList.add('light')
          setTimeout(() => this.apagarColor(color), 350)
        }

        apagarColor(color) {
          this.colores[color].classList.remove('light')
        }
      }
      
      function empezarJuego() {
        var juego = new Juego()
      }

    </script>

La clase del profe está genial, sin embargo mi mayor duda es porqué el gameboard del profe es redondito y el mío sale cuadrado 😦
Mi código de la clase de hoy:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simón Dice</title>
    <style>
      body {
        margin: 0;
        background: #dedede;
        display: flex;
        align-items: center;
        height: 100vh;
      }

      .gameboard {
        height: 100vh;
        width: 100vh;
        border-radius: 50%;
        overflow: hidd en;
        margin: 0 auto;
        max-height: 60vh;
        max-width: 60vh;
      }

      .color {
        width: 50%;
        height: 50%;
        display: inline-block;
      }

      .left {
        float: left;
      }

      .right {
        float: left;
      }

      .celeste {
        background: #22a6b3;
      }

      .celeste.light {
        background: #7ed6df;
      }

      .violeta {
        background: #be2edd;
      }

      .violeta.light {
        background: #e056fd;
      }

      .naranja {
        background: #f0932b;
      }

      .naranja.light {
        background: #ffbe76;
      }

      .verde {
        background: #6ab04c;
      }

      .verde.light {
        background: #badc58;
      }

      .btn-start {
        width: 400px;
        height: 100px;
        background: #ecf0f1;
        color: #2c3e50;
        font-size: 2.5rem;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 200px);
      }

      .hide {
        display: none;
      }
    </style>
  <script async src='/cdn-cgi/bm/cv/669835187/api.js'></script></head>
  <body>
    <div class="gameboard">
      <div id="celeste" class="color celeste left" data-color="celeste"></div>
      <div id="violeta" class="color violeta right" data-color="violeta"></div>
      <div id="naranja" class="color naranja left" data-color="naranja"></div>
      <div id="verde" class="color verde right" data-color="verde"></div>
      <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar a jugar!</button>
    </div>
    <script>
      const celeste = document.getElementById('celeste')
      const violeta = document.getElementById('violeta')
      const naranja = document.getElementById('naranja')
      const verde = document.getElementById('verde')
      const btnEmpezar = document.getElementById('btnEmpezar')

      class Juego {
        constructor() {
          this.inicializar()
          this.generarSecuencia()
          this.siguienteNivel()
        }

        inicializar() {
          btnEmpezar.classList.add('hide')
          this.nivel = 1
          this.colores = {
            celeste,
            violeta,
            naranja,
            verde
          }
        }

        generarSecuencia(){
          this.secuencia = new Array(10).fill(0).map(n => (Math.floor(Math.random()*4)))
        }

        siguienteNivel(){
          this.iluminarSecuencia()
        }

        transformarNumeroAColor(numero){
          switch(numero){
            case 0:
              return 'celeste'
            case 1:
              return 'violeta'
            case 2:
              return 'naranja'
            case 3:
              return 'verde'
          }
        }

        iluminarSecuencia(){
          for (let i = 0; i < this.nivel; i++){
              const color = this.transformarNumeroAColor(this.secuencia[i])
              setTimeout(() => this.iluminarColor(color), 1000 * i)
          }
          }

        iluminarColor(color){
            this.colores[color].classList.add('light')
            setTimeout(() => this.apagarColor(color), 350)
        }

        apagarColor(color){
            this.colores[color].classList.remove('light')
        }


      }

      function empezarJuego() {
         window.juego = new Juego()
      }
    </script>
  <script type="text/javascript">(function(){window['__CF$cv$params']={r:'66e4b3365a95d982',m:'cef8f80050b141868d2c4f4b872dc41e9eebd07a-1626202259-1800-ASg0JUYRb3hSwYm5bx89S8iWF31q/iQ8IN2Hz3OeQc8hsxU10fbN0T6AS/Sp7vnbPtO16xVSKnwSMpWcc7nfu4fpTNEl1M+GFCa2irIRTi+Eakq28XgtUxiZuAnrrsA5nx8mD9HayJ0zdfQGpmmNxvnxp19U46u8nQ2AeDcxPJNw+3lGJqN3SofD5wmzCFwiLCF6SlXyeSjVcZPc0VOdtbUTR083kCEBLur1jvAlrLFzl48OfAXogdfu09JljoBaqoaWgB5huPUN4QWVFtRtWUjqgO+LFDHqFLnqvFK8+Cgordmy95dXzE0GoBSzbRLsxA==',s:[0xa6a3a8a143,0x0743183ae3],}})();</script></body>
</html>

let it be

En Javascript existe un concepto llamado closure que nos dice que cuando usas let o const en un ámbito de bloque (un ámbito de bloque es código que está entre { } ) en un ciclo, en cada iteración la variable toma el valor de ESA iteración, por lo tanto no se sobreescribe la variable de la anterior iteración del ciclo, sino es otra diferente.
En cambio con var esto no pasa, porque con var pones la variable en un ámbito global lo cual significa que cuando tú usas un var en un ciclo, este se sobreescribirá porque no existe un ámbito de bloque en esa iteración, solo existe una misma variable para todo el ciclo. Eso es lo que he entendido leyendo los comentarios de algunos compañeros. Espero les ayude y corriganme si no estoy en lo correcto.

Este módulo es increíble. Puedo entender el algoritmo. Eso si, no estoy siguiendo la escuela de Javascript y comencé a programar hace unos meses. Seguro por eso lo puedo entender. Para los que no entienden gran parte del algoritmo les sugiero que hagan su propio diagrama de flujo sobre como creen que debería funcionar el juego hasta esta clase. Eso puede ayudar.

Dos días tratando de comprender y hacer que mi código funcionara, supongo que después de tanta frustración sale el sol y se puede volver a sonreír… Jaja te pasas Sacha xD 🐊

Les explico cómo funciona el código (según cómo lo entendí yo).
.
Pirmero tenemos estas variables que son elementos HTML pasados a JS para poder manipular su CSS:

const celeste = document.getElementById('celeste')
      const violeta = document.getElementById('violeta')
      const naranja = document.getElementById('naranja')
      const verde = document.getElementById('verde')
      const btnEmpezar = document.getElementById('btnEmpezar')

Luego creamos una clase Juego que podrá inicializar el juego, generar una secuencia random de colores y pasar al siguiente nivel.

class Juego {
        constructor() {
          this.inicializar()
          this.generarSecuencia()
          this.siguienteNivel()
        }

Para incializar el juego, escodemos el botón manipulando su CSS. Además, declamramos el nivel y los colores.

inicializar() {
          btnEmpezar.classList.add('hide')
          this.nivel = 7
          this.colores = {
              celeste,
              violeta,
              naranja,
              verde
          }
        }

Después generamos una secuencia random de números y los guardamos en un Array. Estos números equivaldrán a uno de los 4 colores del juego, por eso estos serán 0, 1, 2 ó 3.

generarSecuencia() {
            this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random() * 4))
        }

¿Qué significa esta línea de código? Math.random() genera números aleatorios entre 0 y 1. Por eso los multiplicamos por 4 (total de colores del juego). Sin embargo, habíamos quedado que los números 0, 1, 2 y 3 equivaldrían a un color y multiplicando por 4 tendríamos números decimales. Por lo tanto, tenemos que redondear. Math.floor(Math.random() * 4)) nos ayuda con esto.
.
Ahora, el Array que generamos nos devuelve un Array de 10 elementos llenos de ceros (0). Por eso usamos el método map para iterar por cada uno y que nos devuelva los números que necesitamos.
.
Seguido de esto, necesitamos que cada elemento de ese array se transforme a un color. Usamos la siguientes líneas de código:

transformarNumeroAColor(numero){
            switch (numero) {
                case 0:
                    return "celeste"
                case 1:
                    return "violeta"
                case 2: 
                    return "naranja"
                case 3: 
                    return "verde"
            }
        }

En este punto ya podemos empezar a iluminar la secuencia:

iluminarSecuencia() {
            for(let i = 0; i< this.nivel; i++) {
                const color = this.transformarNumeroAColor(this.secuencia[i])
                setTimeout(() => this.iluminarColor(color), 1000 * i)
            }
        }

Podemos ver que tenemos el método transformarNumeroAColor() que ya lo habíamos definido y que como argumento pasa cada elemento del Array secuencia que creamos antes.
.
Pero aún no se ilumina. Por eso ponemos un setTimeout() que multiplica 1000 milisegundos por nivel. Es decir, si llegamos al nivel 5, esto tomará 5000 milisegundos. También está el método iluminarColor() que lo definimos a continuación.

iluminarColor(color) {
            this.colores[color].classList.add("light")
            setTimeout(() => this.apagarColor(color), 500)
        }

Iluminar color agrega la clase “light” a los colores para que se pueda manipular su CSS. Pero esta iluminación no debe quedarse encendida para siempre. Entonces la apagamos con el método apagarColor que le quita la clase “light”.

apagarColor(color) {
            this.colores[color].classList.remove("light")
        }

Y finalmente, debemos pasar al siguiente nivel.

siguienteNivel() {
            this.iluminarSecuencia()
        }
}
<h4>Mas adelante aprenderemos a usar let y const 👌</h4>

La función setTimeout tiene una forma de ejecutarse guardando un parámetro establecido.

<h4>¿Y esto para que me sirve?</h4>

Para que por momento no usemos o nos preocupemos por aprender let o const. Mas adelante nos lo enseñan, así que confiemos en que lo entenderemos a su tiempo 😄

iluminarSecuencia() {
  for (var i = 0; i < this.nivelJuego; i++) {
    var color= this.trasformarNumeroAColor(this.secuencia[i]); // 1
    setTimeout((colorInto) => { // 3
      this.iluminarColor(colorInto); // 4
    }, 1000 * i, color); // 2 establecer el parámetro
  }
}

Tarde bastante en entender el bug xd

Va tomando forma el curso y el juego !!

el tema de var tiene que ver con el ámbito, con el var seria ámbito global y en con el let y const seria en local por lo cual podría cambiar?.

MIS APUNTES 😄


const buttonStart = document.querySelector('#btnEmpezar');


const celeste = document.querySelector('#celeste');
const violeta = document.querySelector('#violeta');
const naranja = document.querySelector('#naranja');
const verde = document.querySelector('#verde');

class Juego{

    constructor(){

        this.inicializar()
        this.generarSecuencia()
        this.siguienteNivel()
        
    }

    inicializar(){

        
        buttonStart.classList.add('hide');

        this.nivel = 7;

        this.colores = {
     
            celeste,
            violeta,
            naranja,
            verde

        }
        
    }

    generarSecuencia(){

        this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random() * 4))

        
    }

    //declaramos la funcion siguiente nivel
    siguienteNivel(){

        /*
        Llamara a iluminar secuencia cada vez que llegue a un nuevo nivel iluminara
        la secuencia */
        this.ilumonarSecuencia()


    }
    // Declaramos funcion que transforma los numeros de la secuencia en colores
    transformarNumeroAColor(numero){

        switch(numero){

            case 0:
                return 'celeste'
            case 1:
                return 'violeta'
            case 2:
                return 'naranja'
            case 3:
                return 'verde'

        }

    }
     // Declaramos  la funcion iluminar secuencia
    ilumonarSecuencia(){

        for (let i = 0; i < this.nivel; i++){
        
        /* Obtenemos el color para cada i que vayamos obteniendo
           llamamos la funcion trasformarNuAColor y le pasamos el numero
           de la secuencia en la que estamos */

            let color = this.transformarNumeroAColor(this.secuencia[i])

        // Agregamos un tiempo de espera entre el ciclo para que el for no
        // se ejecute de una vez si no que tenga un tiempo de espera por cada
        // color que se ilumina en la secuencia

        // Agregar 1000 * i es importante ya que a medida de que va avanzando la
        // secuenta el usuario va a tener tiempo de verla

        //Tendremos un error por que definimos color con var y cada vez que
        // itera el ciclo for se estara reasginando el mismo valor a la variable

            setTimeout(() => this.iluminarColor(color), 1000 * i)
        }


        }

        /* Declaramos la funcion iluminar color en la cual obtenemos
           el color por parametro */

        iluminarColor(color){
        /* Traemmos los colores que teniamos guardados en un objeto y
           que hacen referencia a lo botones que estan en variables

           Añadimos un nueva clase para que se ilumine el color que ya
           esta establecida en css */

            this.colores[color].classList.add('light')
        // Llamamos una funcion para que se apague el color en determinado tiempo

        setTimeout(()=> this.apagarColor(color), 350)


        }

        /* Declaramos la funcion apagar color que recibe un color por parametro
         y con remove le removemos la clase light */

        apagarColor(color){

            this.colores[color].classList.remove('light')

        }

    }
   



function empezarJuego(){

    window.juego = new Juego()

}```

Me comence a sentir PRO finalizando asincronismo ( me refiero a que entendía todo bien ) llegue aquí, y fue como un grito para recordarme lo tonto que soy aún en javascript “-”

aun no puedo hacer que se ilumine alguien me podría ayudar por favor

<code>
<script>
      const celeste = document.getElementById('celeste')
      const violeta = document.getElementById('violeta')
      const naranja = document.getElementById('naranja')
      const verde = document.getElementById('verde')
      const btnEmpezar = document.getElementById('btnEmpezar')

      class Juego {
        constructor() {
          this.inicializar()
          this.generarSecuencia()
          this.siguienteNivel()
        }

        inicializar() {
          btnEmpezar.classList.add('hide')
          this.nivel = 1
          this.colores ={
            celeste,
            violeta,
            naranja,
            verde
          }
        }

        generarSecuencia(){
          this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random()*4))
        }
        siguienteNivel(){
          this.iluminarSecuencia()
        }

        transformarNumeroAColor(numero){
          switch (numero) {
            case 0:
              return 'celeste'
            case 1:
              return 'violeta'
            case 2:
              return 'naranja'
            case 3:
              return 'verde'

          }
        }

        iluminarSecuencia(){
          for(var i=0; i < this.nivel; i++){
            const color = this.transformarNumeroAColor(this.secuencia[i])
            setTimeout(() => this.iluminarColor(color), 1000 * i)
          }
        }

          iluminarColor(color){
          this.colores[color].classList.add('ligth')
          setTimeout(()=> this.apagarColor(color), 500)
        }
          apagarColor(color){
            this.colores[color].classList.remove('ligth')
          }
      }

      function empezarJuego() {
        var juego = new Juego()
      }
    </script>
  </body>
</html>

bastante completa la explicacion y clara sobre let y const asi como trabajar con las clases en JS

costo demasiado pero si se nos ilumino!

Oye tranquilo sasha… jaja

La clase con más contenido del curso (por ahora), me tomó casi 3 horas en digerirlo casi todo…

😃

excelente clase y buena explicación !!!

corregir un bug dentro de un for cambiando var por let

En los ciclos for SIEMPRE conviene utilizar let en lugar de var para evitar errores.

buenas clases

Le agregué un TimeOut a la función de empezar juego porque luego luego de cerrar la alerta, comenzaba el juego y asi mejor me quité de problemas, y con eso mejor funciona.

Muy buena clase!

Muchas gracias por la clase, y la verdad me esta ayudando mucho a poner en practica, todo lo que hemos aprendido, aunque para ser honesta me costo un poco y tuve que repetir el vídeo pero al fin quedo.

Muy importante conocer la diferencia entre var, let y const

Yo, intentando nuevas cosas y aprender, intente converir ese arra aleatario de la secuencia en otro array pero de colores.
Por ejemplo: [0, 2, 2, 1] se convierte en [celeste, naranja, naranja, violeta].

Busco en google, pero nada, lo intento y no llego a como hacerlo. Alguien sabe como se podria? por si se puede por supuesto

no era mejor dejar los colores en un array y obtenerlos con el mismo número de la secuencia.

Por que es importante usar let y no var en un for para que de esta manera no se pise o se reasigne la variable

const sobreescribir = pisar