Me quedo con lo siguiente:
Esa cajita blanca es representada en nuestro HTML por esa etiqueta input. Vamos a usar otra función de JavaScript, que es que cada input tenga un identificador. Entonces, vamos al HTML, vamos a colocar ese identificador y para ello usamos el atributo id.
Él ya tiene otros atributos, ¿no? Un type. Que es el tipo de entrada. Tiene el mínimo, el máximo. Pero yo puedo ir definiendo más atributos. Así es. Uno de esos es el id.
Entonces, aquí puedo nombrar ese input como número usuario o incluso puedo cambiar, para que usemos dos nombres diferentes, puedo decir valor usuario y ese id ahora lo vamos a usar aquí.
Puedo seguir usando el query selector, pero voy a demostrar que existe otra función que es solo para buscar por id. En ese caso, en lugar de usar query selector, decimos document. Usamos la ayuda que tiene Visual Studio y empezamos a escribir get en minúscula. Una de ellas ya es bien clara por su nombre y eso es lo importante, colocar nombres representativos a las funciones, es que se ve que dice getElementById, es obtener elemento por id.
Y colocamos el id, que es valor usuario. Perfecto. Vale destacar que esa función, getElementById, es una función que ya viene predefinida en JavaScript. No es que la construimos en algún momento.
Al igual que querySelector, esta función retorna el objeto. Pero ahora mismo, no queremos el objeto, queremos el valor. Si presiono al final de document.getElementById, voy a obtener todo lo que ese elemento tiene, los atributos, y un atributo de él es el value.
Hagamos click aquí, seguido por un punto y coma, ¿de acuerdo? Y ya allí tendríamos disponible el valor. Vamos a colocar un console.log solo para ver si el valor se está tomando correctamente.
Es porque ya tenemos nuestro número secreto generado por la máquina con una función y hemos conseguido capturar lo que nuestra persona usuaria está ingresando a través del getElementById, y ahora necesito comparar, ¿verdad? Si este es igual a este otro.
Entonces, voy a traer este console.log de arriba, que está en el alcance global y que solo se ejecuta cuando arrancas el programa. Lo voy a colocar en el botón para que tengamos los dos valores disponibles.
Y luego llamamos a la función de console.log también para validar una condición. Entonces decimos aquí: número de usuario igual a número secreto.
Esta condición nos va a retornar un tipo de dato que hemos venido manejando de forma implícita, que es el tipo de dato boolean o booleano, que en breve veremos en la documentación. Pero vamos a comprobar cómo funciona ese botón ahora.
Aquí, lo que estamos haciendo, si puedes volver un segundo, Leo, es comparar el número de usuario con el número secreto. Y estoy colocando los dos iguales para decirle, compara A con B. Y lo que me va a retornar entonces es un boolean. True o false.
Veamos la documentación como lo estabas comentando. Vamos a la documentación. Si entro aquí, mdn boolean JavaScript. Estás buscando en Google, ¿verdad? En Google, sí.
Y aquí vamos a entrar en la mdn como documentación oficial, que siempre debe ser el primer paso. Los foros, las guías son muy útiles, pero siempre recomiendo el manual de quien creó.
Observemos el manual del fabricante. Acá, recordando que en el curso anterior les decíamos que para acceder a la documentación en español, simplemente cambiar S-E-N-U-S por S y allí ya sale en español el texto.
Aquí se explica lo que es un tipo de dato booleano y sus posibles valores, que es true o false.
Pero creo que es importante aquí reflexionar sobre un problema que tuvimos en el curso anterior que es el input normalmente me retorna un tipo de dato que no es número. Me gustaría que validemos aquí qué tipo de dato es el que me está retornando este input porque el número aleatorio sí me retorna un número
Pero si vamos a la definición del valor retornado, podemos aplicar aquí el mismo concepto que realizamos en el curso anterior donde hacemos un console.log del tipo. Vamos a pedirle el tipo al número del usuario para verificar qué es lo que nos está devolviendo ese valor. Vamos a probar. Pedimos el tipo con typeof. Typeof nos va a devolver si es number (número), si es string (cadena de texto), si es boolean (booleano).
Coloca un console.log también del número secreto. Vamos a colocar un console.log del número secreto aquí después de mostrar ese número. typeof número secreto. Typeof es el tipo del valor.
Entonces, ¿qué te parece si a ese input utilizamos parseInt que también lo utilizamos en el curso anterior para forzar a que nuestro input sea convertido en un número? Así es. Entonces, ¿dónde estamos obteniendo el valor? Vamos a encerrar esto entre paréntesis para que se convierta en el parámetro de la función parseInt.
Entonces, el triple igual es como una validación a más para decirle "mira, tiene que ser igual en valor e igual en tipo de datos". Ok, si no, nos va a devolver falso.
