WEBVTT

00:00:00.556 --> 00:00:03.450
Tengo esta página web con una foto de "Winston".

00:00:03.450 --> 00:00:06.556
Hace frío y "Winston" se está haciendo viejo,

00:00:06.556 --> 00:00:08.646
así que quiere tener una barba.

00:00:08.646 --> 00:00:10.750
Yo podría dibujar la barba.

00:00:10.750 --> 00:00:13.523
Pero pienso que sería mejor si el usuario dibuja la barba

00:00:13.523 --> 00:00:16.412
de "Winston", de la manera en que quieren que se vea.

00:00:16.412 --> 00:00:20.380
Una barba larga, o como de tres días, o lo que sea que definan.

00:00:20.380 --> 00:00:22.711
¿Cómo podríamos hacer eso?

00:00:22.711 --> 00:00:28.693
Una forma es añadir un detector de eventos para el evento "mouseMove" en la imagen,

00:00:28.693 --> 00:00:33.031
de manera que el programa llame a nuestra función cuando el usuario mueva su ratón,

00:00:33.031 --> 00:00:34.386
sobre la cara de "Winston".

00:00:34.386 --> 00:00:37.614
Vamos a hacer eso usando lo que acabamos de aprender.

00:00:37.614 --> 00:00:41.412
El primer paso es encontrar el elemento, la imagen.

00:00:41.412 --> 00:00:47.011
"var face = document.getElementById("...

00:00:47.011 --> 00:00:50.281
... "face"), porque tengo este lindo "Id".

00:00:50.281 --> 00:00:53.866
El segundo paso es definir la función que responde al evento.

00:00:53.866 --> 00:00:58.267
Y vamos a empezar con una simple, para asegurarnos de que funciona,

00:00:58.267 --> 00:01:01.546
y podremos hacer más tarde que haga algo más.

00:01:01.546 --> 00:01:11.510
'document.getElementById("message").textContent += "mooove";'

00:01:11.510 --> 00:01:13.182
Ok.

00:01:13.182 --> 00:01:17.946
Y el paso final es conectar éste con éste,

00:01:17.946 --> 00:01:21.941
para asegurarnos de que éste será llamado cuando éste detecte el evento "mouseMove".

00:01:21.941 --> 00:01:27.854
Así que escribiremos: 'face.addEventListener("mousemove",'

00:01:27.854 --> 00:01:32.070
y luego le pasamos el nombre de nuestra función, "onMouseMove".

00:01:32.070 --> 00:01:36.590
Ahora, pausa esta guía paso a paso, y trata de mover el ratón sobre la cara.

00:01:36.590 --> 00:01:39.155
¿Viste el mensaje?

00:01:39.885 --> 00:01:43.856
Ok, espero que hayas visto este evento funcionando.

00:01:43.856 --> 00:01:47.344
Pero esto no es lo que queremos que haga nuestro detector de eventos.

00:01:47.344 --> 00:01:50.450
Queremos que dibuje, no que escriba texto.

00:01:50.450 --> 00:01:53.356
¿Cómo podemos dibujar en una página web?

00:01:53.356 --> 00:01:58.596
Podríamos usar la etiqueta "" y dibujar pixeles, como lo hicimos aquí

00:01:58.596 --> 00:02:00.732
con los programas de "ProcessingJS".

00:02:00.732 --> 00:02:06.502
Pero todo lo que estamos dibujando es una barba, que en realidad es un montón de puntos negros.

00:02:06.502 --> 00:02:11.566
Así que podríamos crear un "" para cada punto, y asignar a este ""

00:02:11.566 --> 00:02:13.551
un posicionamiento absoluto.

00:02:13.551 --> 00:02:18.310
Aquí, se los voy a mostrar con un folículo de barba.

00:02:18.310 --> 00:02:24.524
Entonces, voy a hacer un "" con una clase "beard", y luego voy a estilizar la barba con algo lindo de CSS

00:02:24.524 --> 00:02:29.741
que voy a pegar aquí.

00:02:29.741 --> 00:02:31.750
Y vamos a arreglar eso.

00:02:31.750 --> 00:02:36.471
Así que puedes ver que nuestra barba tiene un fondo negro, es de 5 por 5 pixeles,

00:02:36.471 --> 00:02:40.525
tiene un borde de 2 pixeles de radio, para hacerlo un poco más redondo,

00:02:40.525 --> 00:02:44.684
y está usando un esquema de posicionamiento absoluto.

00:02:44.684 --> 00:02:48.488
Actualmente, el "" se muestra debajo de la imagen.

00:02:48.488 --> 00:02:51.473
¿Cómo podemos hacer para que se muestre sobre la cara?

00:02:51.473 --> 00:02:55.271
Estamos usando posicionamiento absoluto, eso significa que deberíamos usar

00:02:55.271 --> 00:02:59.827
las propiedades "top" y "left" para decirle, en realidad, dónde

00:02:59.827 --> 00:03:02.073
debería posicionarse, ya que es posicionamiento absoluto.

00:03:02.073 --> 00:03:07.923
Así que vamos a poner "top: 80px;", y luego "left: 15px;".

00:03:07.923 --> 00:03:09.422
Hermoso.

00:03:09.422 --> 00:03:13.750
Ahora que logramos que funcionara en HTML, vamos a hacer que funcione en JavaScript,

00:03:13.750 --> 00:03:18.865
para que el usuario pueda crear dinámicamente este "" cada vez que mueva su ratón.

00:03:18.865 --> 00:03:22.778
Vamos a ir abajo a nuestra función de JavaScript que responde al evento.

00:03:22.778 --> 00:03:25.534
El primer paso es crear un "",

00:03:25.534 --> 00:03:31.406
que podemos hacer con nuestra función "document.createElement()",

00:03:31.406 --> 00:03:33.590
esto va a ser un "".

00:03:33.590 --> 00:03:39.580
El segundo paso es añadir la clase: 'beard.className = "beard";'.

00:03:39.580 --> 00:03:42.198
Así que ahora tenemos este "" flotando en el espacio.

00:03:42.198 --> 00:03:47.072
El paso final es anexarlo a "".

00:03:47.072 --> 00:03:52.103
Muy bien, ahora hicimos en JavaScript básicamente lo que habíamos hecho en HTML,

00:03:52.103 --> 00:03:54.666
así que podemos borrar este HTML.

00:03:54.666 --> 00:03:58.764
Ahora, deberías pausar la guía paso a paso, y probar presionar el ratón en "Winston".

00:03:58.764 --> 00:04:00.312
Observa lo que pasa.

00:04:02.412 --> 00:04:04.933
¿Viste que apareciera el folículo de barba?

00:04:04.933 --> 00:04:07.191
¿Y trataste de presionar el ratón varias veces?

00:04:07.191 --> 00:04:11.090
Si lo hiciste, probablemente notaste que la segunda vez que presionaste el ratón no pasó nada,

00:04:11.090 --> 00:04:13.525
o cuando menos parece que no pasó nada.

00:04:13.525 --> 00:04:17.863
Esto es porque cada "" tiene las mismas propiedades "top" y "left",

00:04:17.863 --> 00:04:21.081
así que las nuevas barbas aparecen sobre las que ya estaban.

00:04:21.081 --> 00:04:25.493
Queremos que "" se muestre donde quiera que el usuario presione el ratón.

00:04:25.493 --> 00:04:30.386
¿Cómo podemos saber dónde se encuentra el ratón?

00:04:30.386 --> 00:04:34.317
Como resultado, el navegador registra una gran cantidad de información

00:04:34.317 --> 00:04:38.082
cada vez que sucede cualquier evento del usuario.

00:04:38.082 --> 00:04:41.018
Y el navegador te da información cada vez

00:04:41.018 --> 00:04:43.224
que se llama a la función de detector de eventos.

00:04:43.224 --> 00:04:46.804
Pero ¿dónde y cómo podemos obtener esa información increíble?

00:04:46.804 --> 00:04:51.412
Voy a teclear una letra, para darles un pista.

00:04:51.412 --> 00:04:56.074
Esta "e" aquí, es el objeto de la información del evento.

00:04:56.074 --> 00:04:59.609
Y el navegador lo envía como el primer argumento cuando llama

00:04:59.609 --> 00:05:02.129
una función del detector de eventos.

00:05:02.129 --> 00:05:06.178
No lo necesitamos antes, así que no me molesté en escribir la lista de argumentos.

00:05:06.178 --> 00:05:09.002
Pero ahora que lo vamos a usar, le estoy dando un nombre, para que sea fácil

00:05:09.002 --> 00:05:11.594
hacer referencia dentro de la función.

00:05:11.594 --> 00:05:14.966
Recuerden que en JavaScript, una función puede ser llamada con cualquier número

00:05:14.966 --> 00:05:18.588
de argumentos, incluso si la función no los usa o no se refiere a ninguno de ellos.

00:05:18.588 --> 00:05:22.701
Así que siempre estábamos obteniendo esta información, sólo que no lo sabíamos.

00:05:22.701 --> 00:05:28.278
Ahora voy a sacar la "e" a la consola: "console.log(e)".

00:05:28.278 --> 00:05:32.162
Pausa la guía paso a paso, presiona el ratón en "Winston", y revisa tu consola.

00:05:32.162 --> 00:05:34.410
Deberías poder ver el objeto del evento,

00:05:34.410 --> 00:05:37.151
y leer todas sus propiedades.

00:05:38.580 --> 00:05:43.267
Hay dos propiedades del evento que nos interesan en particular:

00:05:43.267 --> 00:05:45.594
"clientX" y "clientY".

00:05:45.594 --> 00:05:49.314
Estos registran la "x" y la "y" del evento y eso es lo que vamos a usar

00:05:49.314 --> 00:05:51.155
para posicionar la barba.

00:05:51.155 --> 00:06:02.015
Vamos a definir la propiedad "top" de la barba igual a "e.clientY" más "px", para las unidades.

00:06:02.015 --> 00:06:10.323
Y establecer "left" igual a "e.clientX", más "px" para las unidades.

00:06:10.323 --> 00:06:14.320
Ahora usa la pausa y trata de pasar el ratón por encima.

00:06:14.320 --> 00:06:16.027
Dibujale una barba a "Winston".

00:06:17.973 --> 00:06:19.454
Bastante bien, ¿eh?

00:06:19.454 --> 00:06:23.157
Apuesto que pueden imaginar lo divertidas que pueden ser las aplicaciones de pintura que pueden hacer,

00:06:23.157 --> 00:06:25.559
usando "clientX" y "clientY".

00:06:25.559 --> 00:06:28.793
Y como lo viste en la consola, hay muchas propiedades

00:06:28.793 --> 00:06:31.251
en un objeto de evento que podrías usar también.

00:06:31.251 --> 00:06:35.354
Yo creo que las más utilizadas son las relacionadas con el teclado.

00:06:35.354 --> 00:06:38.107
Entonces podrías descubrir cuáles teclas está presionando el usuario

00:06:38.107 --> 00:06:40.541
cuando sucede un evento, y usar eso para hacer una

00:06:40.541 --> 00:06:44.352
interfaz de teclado o en realidad un juego muy divertido.

00:06:44.352 --> 00:06:47.206
Oh, una cosa más:

00:06:47.206 --> 00:06:49.700
no tienes que llamar "e" a este argumento forzosamente.

00:06:49.700 --> 00:06:57.312
Típicamente se hace, pero algunos desarrolladores lo llaman "evt" o "event".

00:06:57.312 --> 00:07:00.602
No importa cómo lo llames, siempre y cuando se esté refiriendo

00:07:00.602 --> 00:07:03.695
al primer argumento que el navegador pasa en tu función,

00:07:03.695 --> 00:07:09.485
y siempre y cuando tú te refieras a él más tarde de la misma manera.

00:07:09.485 --> 00:07:13.281
Si tienes problemas con esto, asegúrate de usar " console.log"

00:07:13.281 --> 00:07:15.639
para ayudarte a depurar lo que está pasando.

00:07:15.639 --> 00:07:17.235
Cuando eres un desarrollador web,

00:07:17.250 --> 00:07:21.460
la consola es por mucho tu mejor amiga, ¡úsala!