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

Obteniendo el input del usuario

44/55
Recursos

Para obtener el input del usuario agregamos un manejador para el evento click del mouse usando addEventListener para cada uno de los colores del juego. Utilizando la propiedad target devuelta por el evento click podemos identificar cuál es el botón que ha sido presionado.

Aportes 139

Preguntas 42

Ordenar por:

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

IMPORTANTE:
Para entender This debemos de saber que this hace referencia le bloque de código que lo ejecuta, por lo que:

function x (){
	//this aquí hace referencia al bloque de código que es la función x
	function y(){
		//this aquí hace referencia al bloque de código que es la función y
	}
}

Si queremos que this haga referencia al bloque de código de la función x debemos usar métodos como .bind(this)

Espero haberme explicado, de lo contrario hagan una pregunta y haré mi mejor esfuerzo en responderla 😃

suspiro, soy el único que se siente algo perdido?

.-.

De alguna forma es bueno, siempre que encontramos cosas nuevas que no entendemos es porque estamos mejorando y creciendo…

código clase input del usuario

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() {
            this.elegirColor= this.elegirColor.bind(this)
          btnEmpezar.classList.add('hide')
          this.nivel= 10
          this.colores= {
            celeste,
            violeta,
            naranja,
            verde
          }
        }

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

       siguienteNivel(){
           this.iluminarSecuencia()
           this.agregarEventosClick()
       }

       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(() => {
            console.log(color)
            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')
       }

       agregarEventosClick(){
           this.colores.celeste.addEventListener('click',this.elegirColor)
           this.colores.verde.addEventListener('click',this.elegirColor)
           this.colores.violeta.addEventListener('click',this.elegirColor)
           this.colores.naranja.addEventListener('click',this.elegirColor)
        }

        elegirColor(ev){
            console.log(this)
        }
    
    }
      function empezarJuego() {
        window.juego = new Juego()
      
    }

Realmente no es mu complicado de entender.

This, dentro de una función o método, hace referencia al objeto desde el que se llama a la función.
¿Cómo así?
Utilizando el ejemplo y lo que dice Sacha:
Al hacer click en el botón o cuadro violeta

this.colores.violeta.addEventListener('click', this.elegirColor)

…hará referencia al objeto que se escribió en el HTML: (Ésto sucede porque está dentro de un Evento -> el AddEventListener) ya que en otro caso, el this haría referencia a la Class Juego.

<div id="celeste" class="color celeste left" data-color="celeste"></div>

El que hará que This, dentro del Evento, apunte a Juego, y no al objeto de HTML será el enlace bind() (o como dice Sacha, “Cambiarle quién va a ser This.

++Espero ayudar con éste ejemplo ya que a mí me costó bastante entenderlo.
++

Si te fijas en esta clase se habla pràctiamente solo de eventos

/*
Autor: Daniel Páez
URL Autor: https://heysoypaez.com
Tema de la clase: Juego html
Descripción: juego html de un Simon Dice que recopila los fundamentos de js
URL código: github.com/heysoypaez
*/

/*PROTOCOLO DE VERIFICACIÓN DE FUNCIONAMIENTO
==================================*/
//Imprimiendo algo en la consola
console.log("inicializando archivo");



/*DECLARACIÓN DE VARIABLES
==================================*/

	
			/*VARIABLE CONSTANTE CON ELEMENTOS OBTENIDOS POR ID
			=====================================================*/
			const btnEmpezar = document.getElementById('btnEmpezar')
			const celeste = document.getElementById("celeste")
			const violeta = document.getElementById("violeta")
			const verde = document.getElementById("verde")
			const naranja = document.getElementById("naranja")



/*DECLARACIÓN DE CLASES PROTOTIPALES
==================================*/


			class Juego {
				constructor() {

					/*Ejecutando mis metodos*/
					this.inicializar()
					this.generarSecuencia()
					this.siguienteNivel()
				
				}

			
				//Metodo que se ejecuta cuando empieza el juego
				inicializar() {

						this.elegirColor = this.elegirColor.bind(this)
						//ahora el this esta atado al this de la clase prototipo juego

						btnEmpezar.classList.add("hide")
						this.nivel = 4;
						this.colores = {
							celeste,
							violeta,
							naranja,
							verde
						}
					}

				generarSecuencia() {
					this.secuencia = new Array(10).fill(0).map(n => Math.round(Math.random() * 3 ))
					//Creamos un nuevo objeto Array con 10 casillas
					//rellenamos cada casilla con 0
					// Math random * 4 entrega un valor entre 0 y 3

					//map() solo funciona si el elemento del array tiene un valor asi sea 0

				}

				siguienteNivel() {
					this.iluminarSecuencia()
					this.agregarEventosClick()
				}

				transformarNumeroAColor(numero) {
					//Pedimos como parametro un numero aleatorio entre 0 y 4 que viene de this.secuencia()

					switch (numero) {
						case 0:
							return "celeste";
							//el case no hace falta porque el return hace que no se ejecute
						case 1:
							return "violeta";
						case 2: 
							return "naranja";
						case 3:
							return "verde";
						}
				}

				iluminarSecuencia() {		

						/*aplicamos i < this.nivel porque el numero del nivel 
						corresponde al numero de elementos que le usuario 
						modificara y tendra que seguir */

					for (let i =0; i < this.nivel ; i++) {

						const color = this.transformarNumeroAColor(this.secuencia[i])
						// Ej: const color = "verde" 

						setTimeout( () => this.iluminarColor(color) , 1000 * i)
						//colocar x * i nos permite acumular tiempo en función del for
					}

				}

				iluminarColor(color) {
					//Colocando la clase que ilumina el color
					this.colores[color].classList.add("light")
					setTimeout(() => this.apagarColor(color), 350)
				}

				apagarColor(color) {
					//Quitando la clase que ilumina el color
					this.colores[color].classList.remove("light")

				}

				agregarEventosClick() {
					//agregando un manejador de eventos
					this.colores.celeste.addEventListener("click", this.elegirColor )
					
					this.colores.violeta.addEventListener("click", this.elegirColor )
					this.colores.naranja.addEventListener("click", this.elegirColor )
					this.colores.verde.addEventListener("click", this.elegirColor )
					}
					//los metodos que se llaman en el event listener suelen tener en la funcion un parametro uv

					elegirColor(ev) {

					console.log(this)

						//este console.log nos muestra todo el detalle del evento
						console.log(ev)

					}

			}
    

/*DECLARACIÓN DE FUNCIONES
========================================================*/


      function empezarJuego() {
      //	alert("El juego va a comenzar pueblo de bolivar")
        window.primerJuego = new Juego()
      }



/*EJECUCIÓN DE FUNCIONES Y PROMESAS
========================================0*/



/*RENDER EN PANTALLA
=======================================*/

//VARIABLES REASIGNABLES
let temaClase = "Simon Dice";
let titulo = document.getElementById("title")
//var contenidoClase = document.getElementById("contenido-clase")

//VARIABLES REASIGNADAS
titulo.innerHTML=  temaClase;

IDEAS CLAVES

SOBRE LOS EVENTOS

=> Los eventos toman input del usuario

=> los metodos que se llaman en el event listener suelen tener en la funcion un parametro uv

=> En el contexto de la funcion de un evento this, por defecto, es la etiqueta html sobre la cual se ejecuta el evento en cuestion

=> this.elegirColor = this.elegirColor.bind(this)
//ahora el this esta atado al this de la clase prototipo juego
//.bind te permite decirle quien va a ser this

=> AddEventListener te permite agregar un manejador de eventos
=> Un evento funciona de manera asincrona, se ejecuta cuando no hay nada en la cola de tareas

Otra forma de mantener los métodos de la clase ligados a la instancia de la clase, es definir dichos métodos como arrow functions.

class Juego () {
	elegirColor = event => {
		console.log(this)
	}
}

Esto es gracias a que las arrow functions recuerdan el contexto en el que fueron creadas.

De esta forma this hará referencia al objeto juego en lugar hacer referencia elemento del DOM.

Me enamore de este lenguaje, quiero aprender más jejej. Gracias por esta clase.

2da vez tomando el curso y se va entiendo mejor!

Otra forma de hacer la función agregarEventosClick podría ser la siguiente:

agregarEventosClick() {
    // Obtenemos los indices del objeto this.colores y le asignamos el evento
    Object.keys(this.colores).map((color) => {
        this.colores[color].addEventListener('click', this.elegirColor);
    });
}

Okay en el addEventListener, en el click yo cometi el error de llamar a la funcion en ves de solo señalarla

asi. y eso me estaba causando grandes dolores de cabeza. vi el video 3 veces y no me percate, hasta que consegui el error comparando codigos con los de ustedes. , es muy dificil javaScript es esencial la comunidad

    this.colores.celeste.addEventListener('click', this.elegircolor())```

Sigo sin entender this D:

Otra manera de escribir el método agregarEventosClick() con un ciclo:

agregarEventosClick(){
          for (const color in this.colores) {
            console.log("Agregando...")
            this.colores[color].addEventListener('click', this.elegirColor.bind(this))
          }
 }

En este caso iteramos sobre el objeto con su respectiva clave (color) y a cada uno se le agrega el evento del botón

Las arrows function ya soluciona el problema del scope y no es necesario utilizar el bind

sin duda con este juego estamos pasando de nivel

Me ha costado bastante ya que estoy aprendiendo desde cero pero poco a poco voy entendiendo la estructura del código 😃

Un poco complicado el desarrollo del juego.
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(){
        this.elegirColor = this.elegirColor.bind(this)
        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()
        this.agregarEventosClick()
    }

    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')
    }

    agregarEventosClick(){
        this.colores.celeste.addEventListener('click', this.elegirColor)
        this.colores.violeta.addEventListener('click', this.elegirColor)
        this.colores.naranja.addEventListener('click', this.elegirColor)
        this.colores.verde.addEventListener('click', this.elegirColor)
    }

    elegirColor(ev){
        console.log(this)
    }
}



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

La función bind() crea una nueva función (función ligada) con el mismo cuerpo (propiedad interna call en términos de ECMAScript 5) como la función que será llamada (la función objetivo de la función ligada) con la referencia this asociada al primer argumento de bind(), el cual no podrá ser sobreescrito. bind() también acepta parámetros predeterminados que antecederán al resto de los parámetros específicos cuando la función objetivo sea llamada. Una función ligada también puede ser construída utilizando el operador new: al hacerlo, actuará como si en su lugar hubiera sido construída la función objetivo.

Si no entienden algunas palabras reservadas de eventos que se vieron en esta clase, les recomiendo tomar el curso gratis de programación básica de Freddy, es igual en JavaScript y en sus clases maneja mucho eventos.

yo tuve el errror de agregarle los parentesis para llamar a la funcion elegir color asi
this.colores.celeste.addEventListener(‘click’, this.elegircolor())
alguien sabe porque se los saca? si para llamar a las funciones se usan los parentesis. asi lo hace el
this.colores.celeste.addEventListener(‘click’, this.elegircolor)

Para obtener la referencia y asignarles el event click a los elementos HTML una menera generic para hacerlo es esta:

addEventClick() {
          for (const color in this.colores) {
            this.colores[color].addEventListener('click', this.elegirColor.bind(this))
          }
        }

Esta es mi solución, además agregue para que no se pudiera hacer click mientras se iluminan las secuencias

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(){
        this.elegirColor= this.elegirColor.bind(this)
        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(){
        this.colores.map(color => {
            color.classList.remove('apuntador');
        });
        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);
        }
        setTimeout(() => {
            this.agregarEventoClick();
        }, 1000 * this.nivel);
    }

    agregarEventoClick(){
        this.colores.forEach(element => {
            element.addEventListener('click',this.elegirColor);
            element.classList.add('apuntador');
        });
        
    }

    elegirColor(ev){
        console.log(this);
        console.log (ev);
    }
}

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

Otra forma que podemos hacer para no repetir tanto el codigo de agregarEventosClick es iterando el objeto donde tenemos la referencia a los botones (this.colores) : Un objeto literal no es iterable ya que no es un array, pero con la funcion Object.entries(this.colores) transforma el objeto a un array de clave valor, donde la priemera posicion es la clave y la segunda el valor, en este caso queremos añadirle el listener al boton (valor de cada elemento del array), quedaria de esta manera:

agregarEventosClick(){
	for(const [clave,valor] of Object.entries(this.colores)){
	   valor.addEventListener('click', this.elegirColor.bind(this))
        }
}


¿Alguien me puede explicar para que se tiene que mantener el ‘this’? No termino de captarle al profe 😦

En esta clase obtenemos el input del usuario, con un escuchador de eventos que llama a un método asíncronamente vemos que haciendo esto se pierde el contexto así que hay que especificar en la llamada al método en contexto de quien es this con .bind(this) para que tome como referencia a la instancia y no al botón.

bind para no perder el contexto del this.

for (let color in this.colors)
      this.colors[color].addEventListener("click", this.selectedColor.bind(this));

Importante aprender sobre this 😃

Wuau! muy interesante el .bind(),

No es tan complicado, el this cambió en el método elegirColor porque ese método lo estamos pasando como callback de addEventListener, y este método justamente reemplaza el this de la función que le paseos como callback, entonces por eso usamos bind, para decirle que no lo reemplace ^^

por qué en el método agregarEventoClick() se llama sin parentesis el this.elegirColor ?
this.colores.celeste.addEventListener(‘click’, this.elegirColor)
y porque esta mal así?
this.colores.celeste.addEventListener(‘click’, this.elegirColor())
qué hace el uno y que hace el otro?

Un saludo a todos, tengo una duda de funcionamiento del método bind.
¿por qué cuando en las funciones agregarEventosClick y eliminarEventosClickle coloco la función bind(this) a cada uno de los botones y comento la línea this.elegirColor = this.elegirColor.bind(this); del método inicializar el juego funciona mal? ¿No debería de ser lo mismo?
Nota: Sacha en el video lo comienza a hacer así pero no lo prueba y coloca la línea this.elegirColor = this.elegirColor.bind(this); en el método inicializar.

Es confuso esto de this a investigar.

Interesante la explicación, lo he estado usando mucho pero solo sabiendo a medias su significado, gracias!!

Excelente clase con ejemplo práctico para experimentar el alcance del this!
Aunque hay un salto muy grande en esta parte del curso, con el desarrollo del juego, porque aparecen muchas cosas nuevas de golpe, esta bueno ver ahora en acción, muchas de las cosas que si se vieron antes, y hasta con mas profundidad, como este caso del this.

Considero que el curso de Fundamentos de JavaScript no tiene una buena secuencia, debido a que surgen nuevas cosas de golpe y los temas vistos video a video se van olvidando por falta de ejercicios practicos que permitan ir repasando.

En vez de poner una function declaration como elegirColor(ev) podriamos usar una arrow function y guardarlo como const y así el valor del this no se pierde.

Hay algún curso o lugar dónde podamos ver más acerca de cómo se manipula el DOM desde JS?

Les brindo una breve explicación de lo tratado en esta clase

Una vez lista las secuencias, ahora el siguiente paso es obtener el input del usuario para ver si el botón que ha tocado

Para esto en el método de siguienteNivel() luego de la llamada la función iluminarSecuencia llamamos a otro método que será agregarEventosClick() y contendrá lo siguiente

agregarEventosClick(){
    this.colores.celeste.addEventListener('click',this.elegirColor)
    this.colores.verde.addEventListener("click", this.elegirColor);
    this.colores.violeta.addEventListener("click", this.elegirColor);
    this.colores.naranja.addEventListener("click", this.elegirColor);
  }

lo que hacemos en esa función es con el método addEventListener es ecuchar el evento click de acuerdo al color selecionado tocado por el botón, y posterior a eso se llama al método elegirColor() en este método tendremos una funcionalidad por ahora mostraremos por consola this.

elegirColor(ev) {
    console.log(this);
  }

Aquí tendremos un problema y es que this nos devolverá el target del botón tocado, y no del juego en si como debería de ser, para eso lo solucionamos de la siguiente manera.

  • Como siempre vamos a querer que this.elegirColor esté amarrado al Juego en inicializar lo definimos así
 this.elegirColor = this.elegirColor.bind(this);

Usando el método bind
Comparto un poco la documentación de mozilla developer (https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/bind)

'‘ahora vamos a agregar un .bind(this)’'
poque no medijiste antes asi lo escribia una vez y lo copiaba --
’‘ahora vamos a escribirlo de otra forma y lo otro lo vamos a borrar’’
-
________________________-

Cada clase se descubre algo nuevo que abre la puerta a más preguntas que respuestas. Es increíble!

sentencia extraña: this.elegirColor.bind(this)

sentencia extraña: this.elegirColor.bind(this)

sentencia extraña: this.elegirColor.bind(this)

sentencia extraña: this.elegirColor.bind(this)

Buena clase.

😃

Cada clase se descubre algo nuevo que abre la puerta a más preguntas que respuestas. Es increíble!

Realmente el log siempre salvándonos 😄

Tengo una duda :
Si tenemos otra clase llamada Juego2 , para utilizar bind() la sintaxis para enlazar el método con esa clase seria así? :

** this.elegirColor = this.elegirColor.bind(Juego2)**
Agradecería , me aclararan esa duda?

Excelente curso, me esta gustando mucho la programación conJS

Quiero dejar para entender más:

Bind(): En vez de invocar, como Apply o Call, genera una copia que hace referencia al this que se especifica en dónde se llama bind(this).

Arrow Function: Hace el bind() sin tener que llamar la función que se requiere para referencia del objeto this

Es ECMAScript salido del horno ( y aún caliente) lo colocaron todo en un solo combo.

Excelente!

que complicado!

me perdi en la parte de ev ??? como es que lelga algo a la funcion si yo no envie nada

por que le pusiste a la funcion elegirColor en el addEventListener un this.elegirColor??

se complica pero muy buena explicacion

buena clase

Entendí todo pero me atoré un poco en .bind(this) en si que hace? vincula el EventListener con el DOM??

Interesante… gracias!!

Muy buena explicación.

por que utilizo el arreglo this.colores (this.colores.violeta.addEventListener(‘click’, this.elegirColor) )
por que no dejaron no mas el celeste.addEventListener(‘click’, this.elegirColor)

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.generar_secuencia();
		this.siguiente_nivel();
	}
	inicializar() {
		btnEmpezar.classList.add("hide");
		this.elegir_color= this.elegir_color.bind(this)
		this.nivel = 1;
		this.colores = {
			celeste,
			violeta,
			naranja,
			verde
		};
	}

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

	siguiente_nivel() {
		this.iluminar_secuencia();
		this.agregar_evento_click()
	}

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

	iluminar_secuencia() {
		for (let i = 0; i < this.nivel; i++) {
			let color = this.transformar_numero_a_color(this.secuencia[i]);
			setTimeout(() => this.iluminar_color(color), 1000 * i);
		}
	}

	iluminar_color(color) {
		this.colores[color].classList.add("light");
		setTimeout(() => this.apagar_color(color), 500);
	}

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

	agregar_evento_click() {
		this.colores.celeste.addEventListener("click", this.elegir_color);
		this.colores.verde.addEventListener("click", this.elegir_color);
		this.colores.violeta.addEventListener("click", this.elegir_color);
		this.colores.naranja.addEventListener("click", this.elegir_color);
	}

	elegir_color(ev){
		console.log(this);
	}
}

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

A mi no me aparece el evento en la consola

Excelente clase. El this me ha confundido un poco pero bueno solo es cosa de seguir practicando y mejorando. 🙂

const celeste = document.getElementById(‘celeste’);
const violeta = document.getElementById(‘violeta’);
const naranja = document.getElementById(‘naranja’);
const verde = document.getElementById(‘verde’);
const btnEmpezar = document.getElementById(‘botoncito’);

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

            inicializar() {
                btnEmpezar.classList.add('hide');
                this.level = 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.level; 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');
        }

        agregarEventosClick() {
            this.colores.celeste.addEventListener("click", this.elegirColor,false)
            this.colores.violeta.addEventListener("click", this.elegirColor,false)
            this.colores.naranja.addEventListener("click", this.elegirColor,false)
            this.colores.verde.addEventListener("click", this.elegirColor,false)

        }

        elegirColor(ev) {
            alert('hola')
        }

}

        const empezarJuego = () => window.juego = new Juego();

Disulpen, alguien me podía ayudar con esto. Al paracer la consola no marca ningún error pero el addEventListener de la funcion agregarEventosClick() no funciona al hacer click sobre un color d ela ruleta. Agradecería la respuesta 😃

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(){
    this.elegirColor = this.elegirColor.bind(this)
    btnEmpezar.classList.add('hide')
    this.nivel = 1
    this.colores = {
      celeste,
      violeta,
      naranja,
      verde
    }
  }
  generarSecuencia(){
    //Una forma de generar Arrays de numeros aleatorios entre 0 y 3
    this.secuencia = new Array(10).fill(0).map(n => Math.floor(Math.random() *4))
  }
  siguienteNivel(){
    this.iluminarSecuencia()
    this.agregarEventosClick()
  }

  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])
      console.log(color)
      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')
  }
  agregarEventosClick(){
    this.colores.celeste.addEventListener('click', this.elegirColor)
    this.colores.verde.addEventListener('click', this.elegirColor)
    this.colores.violeta.addEventListener('click', this.elegirColor)
    this.colores.naranja.addEventListener('click', this.elegirColor)
  }

  elegirColor(ev){
    console.log(this)
  }
}

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

Me pareció un poco confuso el uso del this

Resumne. Cuando se quiere agregar un evento a un objeto de nuestro proyecto se utiliza addEventListener(‘nombreEvento’,función a llamar), ejemplo: this.colores.celeste.addEventListener(‘click’,this.elegirColor), cuando se llama el evento este se captura con ev
elegirColor(ev){…}
baid = enlazar o atar
this.colores.celeste.addEventListener(‘click’,this.elegirColor.bind(thi)) aquí se cambia el ths del botón por el this del juego

manejo y control de botones bien

I share my notes

 /*====================================== */ // Nuestro juego de memoria:Obteniendo el input del usuario
 const celeste = document.getElementById('celeste')
 const violeta = document.getElementById('violeta')
 const naranja = document.getElementById('naranja')
 const verde   = document.getElementById('verde')

 /*====================================== */ // Boton empezar


 const btnEmpezar = document.getElementById('btnEmpezar')


 /*====================================== */ // 

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

    inicializar() {  
        this.elegirColor = this.elegirColor.bind(this)                                              
        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(){                                                           //Agregaremos un metodo para que agregue la secuencia a usar
        this.iluminarSecuencia()
        this.agregarEventosClick()
    }

    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')
    }

    agregarEventosClick(){
      this.colores.celeste.addEventListener('click', this.elegirColor)
      this.colores.verde.addEventListener('click', this.elegirColor)
      this.colores.violeta.addEventListener('click', this.elegirColor)
      this.colores.naranja.addEventListener('click', this.elegirColor)
    }

    elegirColor(ev){                                                                        //se usa para llamar los eventos anteriores
      console.log(ev)
    }
}

 /*====================================== */ // 

function empezarJuego() {                                           
    var juego = new Juego()
    alert('El juevo va comenzar')
}```

Bueno, ahora si me sentí un poco perdido, toca practicarlo y leer bastante para entenderlo bien 💪

Muy buena practica!

no entendí como es la lógica de la estructura que lleva la clase juego
en este ejemplo para que sirve el constructor si no manda variables y por que se crea una método inicializar agradecería el aclara miento

Clase de ahora

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(){     
        this.elegirColor = this.elegirColor.bind(this) // bind te permite decirle quien va a ser this () referenciarlo
        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()
        this.agregarEventosClick()
    }

    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')
    }

    agregarEventosClick(){//Para obtener el input del usuario agregamos un manejador para el evento click del mouse usando addEventListener 
        this.colores.celeste.addEventListener('click', this.elegirColor)
        this.colores.verde.addEventListener('click', this.elegirColor)
        this.colores.violeta.addEventListener('click', this.elegirColor)
        this.colores.naranja.addEventListener('click', this.elegirColor)
    }

    elegirColor(ev){
        console.log(this)
    }
}    

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

Método bind

Bind significa atar o enlazar , con este método solo hay que especificar a quién hay que enlazar , por ej:

this.elegirColor.bind(this)

Un poco confuso, hay que practicarlo!

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() {
                this.elegirColor = this.elegirColor.bind(this)
                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() 
              this.agregarEventosClick()
            }

            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')
               
            }
            agregarEventosClick() {
              this.colores.celeste.addEventListener('click', this.elegirColor)
              this.colores.celeste.addEventListener('click', this.elegirColor)
              this.colores.violeta.addEventListener('click', this.elegirColor)
              this.colores.naranja.addEventListener('click', this.elegirColor)
            }
            
            elegirColor(ev) {
              console.log(this)
            }
        
        }

        
        
        function empezarJuego(){
           window.juego = new Juego()
        }```
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() {
        this.elegirColor=this.elegirColor.bind(this);
        btnEmpezar.classList.add('hide');
        this.level = 5;
        this.colores = {
            celeste,
            violeta,
            naranja,
            verde
        }
    }

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

    siguienteNivel (){
        this.iluminarSecuencia();
        this.agregarEventosClick();
    }

    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.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');
    }

    agregarEventosClick(){
        this.colores.celeste.addEventListener('click', this.elegirColor);
        this.colores.violeta.addEventListener('click', this.elegirColor);
        this.colores.naranja.addEventListener('click', this.elegirColor);
        this.colores.verde.addEventListener('click', this.elegirColor);
    }

    elegirColor(ev){
        console.log(this);
    }
}
   
const empezarJuego =() => window.juego = new Juego();```

en lugar de cambiar el contexto de this con bidn, tambien pdodriamos pasar una arrow function

Genial, bind para no perder el contexto del this.

Un poco confuso lo del this, pero investigando esta masomenos claro xD

Para obtener el input del usuario agregamos un manejador para el evento click del mouse usando addEventListener para cada uno de los colores del juego. Utilizando la propiedad target devuelta por el evento click podemos identificar cuál es el botón que ha sido presionado.

Muy interesante. A continuar.

Algo complejo debido a la estructura de las partes del juego, sin embargo lo veo valioso.

muy bien explicado
muchas gracias

Lo mejor para aprender es un Juego, me encanta cerrando el curso!

¿Alguien sabe por qué this dentro de elegirColor ya no representa mas al entorno - contexto de la clase Juego?

Método bind: para modificar el this

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

            inicializar() {
                this.elegirColor = this.elegirColor.bind(this)
                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()
                this.agregarEventosClick()
            }

            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')
            }

            agregarEventosClick() {
                this.colores.celeste.addEventListener('click', this.elegirColor)
                this.colores.violeta.addEventListener('click', this.elegirColor)
                this.colores.naranja.addEventListener('click', this.elegirColor)
                this.colores.verde.addEventListener('click', this.elegirColor)
            }

            elegirColor(ev) {
                console.log(this)
            }

        }

El programa sigue tomando forma y sigo tomando notas de estos metodos y eventos que no habia visto

Muy buena esta clase para ver el comportamiento de los eventos!!

(continuación del problema ) y al definir el this me sale mouse event.

!Disculpen me sale error cuando a mi variable juego le pongo var juego= new juego(). solo me funciona cuando pongo juego = new juego().

La propiedad bind lo que hace es pedir al programa que llame y se siga ejecutando la función, de lo contrario, el programa va a solicitar el botón en el HTML.

    <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() {
          this.alegirColor = this.elegirColor.bind(this)
          btnEmpezar.classList.add('hide')
          this.nivel = 5
          this.colores ={
              celeste,
              verde,
              naranja,
              violeta,
         }
        }

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

         siguienteNivel() {
             this.iluminarSecuencia()
             this.agregarEventosClick()
         }

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

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

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

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

         agregarEventosClick() {
          this.colores.celeste.addEventListener('click', this.elegirColor)
          this.colores.verde.addEventListener('click', this.elegirColor)
          this.colores.violeta.addEventListener('click', this.elegirColor)
          this.colores.naranja.addEventListener('click', this.elegirColor)
         }

         elegirColor(ev) {

         }

    }

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


    
    </script>

oh f@#%! colapsando mi lógica para siempre. This is no this but is this bind to this .!