Obteniendo el input del usuario

Clase 44 de 55 • Fundamentos de JavaScript 2018

Resumen

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.

Ulises Antonio Sámano Galván

student•

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 :)

Daniel Bretado Reyes

student•

Gracias, es una excelente explicación, me ayudo mucho.

Martin Paez

student•

Que elegante y sencilla manera de definirlo. Grax

Enmanuel Castillo

student•

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...

Diego Rodriguez

student•

excelente comentario

Leonardo David Martinez Hernandez

student•

Jeison Sneider Ruiz Zemanate

student•

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

FREDDY ANDRES LEMUS BARRERA

student•

Otra opción para no repetir codigo en la funcion agregarEventosClick podría ser:

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

Britney Hadassa Ascencio Henriquez

student•

thanks

Andrés Garzón Vesga

student•

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. ++

Daniel Páez

student•

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;

Carlos Junior Guzman Rodriguez

student•

Buen resumen, haré un copy and paste y continuare desde acá; me ayudaste con las referencias de muchos datos xd.

Daniel Páez

student•

Un placer Karl :D y adelante !!!

Me compartes como te fue con el juego, ame este curso y cualquier duda aca me tienes

Daniel Páez

student•

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

Bruno Martin Sendras

student•

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.

Bernardo Aguayo Ortega

student•

venga

Adrián Antañón

student•

Mil gracias, estaba haciendo un montón de cambios pero esto ha solucionado el problema :-) !

Ivan Santiago

student•

Un atajo de teclado para abrir la consola mas rapidamente: Ctrl + J

Brian Bentancourt

student•

F12

Diego Andrés Rojas González

student•

ctrl + shift + j

David Alejandro García Graterón

student•

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

Alejandro Sanchez

student•

igual bro...

Gonzalo Pimentel

student•

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

Jean Carlos Hallak

student•

primera vez y estoy perdido.

Gonzalo Pimentel

student•

Jaja yo estaba así pero intenta escribir el código tu mismo incluso hasta que esté de memoria y encuentrale el sentido, escribe todo el código del juego las veces necesarias hasta que comiences a entenderlo!

Luis Angel Frias Herrera

student•

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

Alejandro Tangarife Rivas

student•

Hola. No entendí bien la funcióon de bind(), me ayudan con eso? gracias :)

Luis Enrique Hernández Mosqueda

student•

Hola @alejoriosrivas el metodo bind() tiene que ver con quien es this, en este caso se usa para indicarle a JavaScript que this tiene que ser el juego, es decir el nuevo objeto que estamos construyendo. En caso de no especificarlo explicitamente, JavaScript lo interpretaria como una etiqueta HTML, por eso es importante entender que this tiene que estar atado al objeto del juego(en esta parte del código) y no a window que es en realidad es el objeto por default que JS asigna a this

Jesus Federico David Herrera

student•

Con Bind le indicas a javascript que tu this sea el this global digamos y no el this de ese contexto como por ejemplo el this del color era el div.

Mauricio Ludueña

student•

El navegador no me reconoce el evento click! Al abrir la cosola no obtengo ningun dato cuando hago click...Alguien sabe que puede ser? Estoy usando mozilla Gracias !!

Kevin J. Zea Alvarado

student•

Comparte tu código para ver cuál podría ser el problema. O intenta antes con Chrome u otro navegador. A ver qué pasa.

Mauricio Ludueña

student•

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Fonts -->
    <!-- Styles -->
    <!-- Title -->
    <title>Simon Dice</title>
  </head>
<!-- E S T I L O S -->
<style media="screen">

body  {
        margin: 0;
        background: #dedede;
        display: flex;
        align-items: center;
        height: 100vh;
      }
.gameboard {
              height: 100vh;
              width: 100vh;
              border-radius: 50%;
              overflow: hidden;
              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>



<!-- C U E R P O  D E   P A G I N A -->
  <body>
<!-- H E A D E R -->
<!-- P R I N C I P A L -->
<div class="gameboard">
  <div class="color celeste left" id="celeste" data-color="celeste"></div>
  <div class="color violeta right" id="violeta" data-color="violeta"></div>
  <div class="color naranja left" id="naranja" data-color="naranja"></div>
  <div class="color verde right" id="verde" data-color="verde"></div>
  <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">Empezar</button>
</div>

<!-- J A V A  S C R I P T -->
<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 = 2
      this.colores = {
        celeste,
        violeta,
        naranja,
        verde
      }
    }

    generarSecuencia() {
      this.secuencia = new Array(10).fill(0).map(n=> Math.floor(Math.random() * 4))
    }
    siguienteNivel(){
      this.iluminarSecuencia()
    }
    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.verde.addEventListener(`click`, this.elegirColor)

      }

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

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

</script>
<!-- F O O T E R -->
  </body>
</html>

Jean Carlos Hallak

student•

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())```

Jose Daniel Molina

student•

Te doy un consejo que a mi me ha funcionado, cada que cometas un error, comenta esa linea y coloca en MAYUSCULA alguna referencia que te recuerde no cometerlo de nuevo... Por ejemplo.

this.colores.celeste.addEventListener('click', this.elegircolor()) // NO EJECUTAR LA FUNCION, SOLO HACER REFERENCIA.

y debajo dejas la linea de codigo correcta, entonces quedaría así.

/*this.colores.celeste.addEventListener('click', this.elegircolor()) NO EJECUTAR LA FUNCION, SOLO HACER REFERENCIA.*/

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

Parece algo raro, pero funciona jeje :)

Jean Carlos Hallak

student•

Gracias lo tomare en cuenta.

Ignacio Martin

student•

Sigo sin entender this D:

Diego Forero

Team Platzi•

this se refiere a la instancia del objeto, para poder acceder a los atributos y métodos definidos en la clase de donde se instancia el objeto.

Carlos Andres Castañeda Osorio

student•

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

Luis Angel Frias Herrera

student•

Genial, yo encontré otra forma también :smile:

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

Wilmer León Chávez

student•

Tambien usé Object 😀

Object
  .values(this.colores)
  .forEach(color => {
    color.addEventListener('click', this.elegirColor);
});

Roy Hodson

student•

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

Claudio Jesus Vázquez Villanueva

student•

podrías explicar mejor eso? o proponer tus referencias gracias

Aaron Felipe Isaacs

student•

Creo que sería de esta manera

addClickEvent() {
      this.colors.indigo.addEventListener('click', event => this.chooseColor (event))
      this.colors.purple.addEventListener('click', event => this.chooseColor(event))
      this.colors.amber.addEventListener('click', event => this.chooseColor(event))
      this.colors.lime.addEventListener('click', event => this.chooseColor(event))
    }
    chooseColor({ target }) { 
      console.log(target)
      console.log(this)
    }

En la consola al dar click

<div class="cuadro indigo light"> main.js:67:15 Object { level: 7, colors: {…}, secuence: (10) […] }

Erick Jerzain

student•

Bernardo Aguayo Ortega

student•

gracias, que rifado

Juan Manuel Hernandez Marcano

student•

sin duda con este juego estamos pasando de nivel

Julián David Palacios Cárdenas

student•

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

Obteniendo el input del usuario

Introducción al curso

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

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions

Estructuras repetitivas: for

Estructuras repetitivas: while

Estructuras repetitivas: do-while

Condicional múltiple: switch

Arrays

Introducción a arrays

Filtrar un array

Transformar un array

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

Cómo funcionan las clases en JavaScript

Modificando un prototipo

El contexto de las funciones: quién es this

La verdad oculta sobre las clases en JavaScript

Clases en JavaScript

Asincronismo

Funciones como parámetros

Cómo funciona el asincronismo en JavaScript

Cómo funciona el tiempo en JavaScript

¿Qué pasó con swapi.co?

Callbacks

Haciendo múltiples requests

Manejando el Orden y el Asincronismo en JavaScript

Manejo de errores con callbacks

Promesas

Promesas Encadenadas

Múltiples promesas en paralelo

Async-await: lo último en asincronismo

Juego de HTML

Comenzando el juego

Generando una secuencia de números

Iluminando la secuencia de colores

Obteniendo el input del usuario

Agregando la verificación del color elegido

Agregando los estados finales del juego

Conclusiones del curso

Complementos

Diferencias entre var, let y const

Memoización: ahorrando cómputo

¿Hace cuántos días naciste?

Funciones recursivas

Entiende los closures de JavaScript

Estructuras de datos inmutables

Cambiando de contexto al llamar a una función

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