Usando las propiedades del evento (Versión en Video)
-
0:01 - 0:03Tengo esta página web con una foto de "Winston".
-
0:03 - 0:07Hace frío y "Winston" se está haciendo viejo,
-
0:07 - 0:09así que quiere tener una barba.
-
0:09 - 0:11Yo podría dibujar la barba.
-
0:11 - 0:14Pero pienso que sería mejor si el usuario dibuja la barba
-
0:14 - 0:16de "Winston", de la manera en que quieren que se vea.
-
0:16 - 0:20Una barba larga, o como de tres días, o lo que sea que definan.
-
0:20 - 0:23¿Cómo podríamos hacer eso?
-
0:23 - 0:29Una forma es añadir un detector de eventos para el evento "mouseMove" en la imagen,
-
0:29 - 0:33de manera que el programa llame a nuestra función cuando el usuario mueva su ratón,
-
0:33 - 0:34sobre la cara de "Winston".
-
0:34 - 0:38Vamos a hacer eso usando lo que acabamos de aprender.
-
0:38 - 0:41El primer paso es encontrar el elemento, la imagen.
-
0:41 - 0:47"var face = document.getElementById("...
-
0:47 - 0:50... "face"), porque tengo este lindo "Id".
-
0:50 - 0:54El segundo paso es definir la función que responde al evento.
-
0:54 - 0:58Y vamos a empezar con una simple, para asegurarnos de que funciona,
-
0:58 - 1:02y podremos hacer más tarde que haga algo más.
-
1:02 - 1:12'document.getElementById("message").textContent += "mooove";'
-
1:12 - 1:13Ok.
-
1:13 - 1:18Y el paso final es conectar éste con éste,
-
1:18 - 1:22para asegurarnos de que éste será llamado cuando éste detecte el evento "mouseMove".
-
1:22 - 1:28Así que escribiremos: 'face.addEventListener("mousemove",'
-
1:28 - 1:32y luego le pasamos el nombre de nuestra función, "onMouseMove".
-
1:32 - 1:37Ahora, pausa esta guía paso a paso, y trata de mover el ratón sobre la cara.
-
1:37 - 1:39¿Viste el mensaje?
-
1:40 - 1:44Ok, espero que hayas visto este evento funcionando.
-
1:44 - 1:47Pero esto no es lo que queremos que haga nuestro detector de eventos.
-
1:47 - 1:50Queremos que dibuje, no que escriba texto.
-
1:50 - 1:53¿Cómo podemos dibujar en una página web?
-
1:53 - 1:59Podríamos usar la etiqueta "" y dibujar pixeles, como lo hicimos aquí
-
1:59 - 2:01con los programas de "ProcessingJS".
-
2:01 - 2:07Pero todo lo que estamos dibujando es una barba, que en realidad es un montón de puntos negros.
-
2:07 - 2:12Así que podríamos crear un "" para cada punto, y asignar a este ""
-
2:12 - 2:14un posicionamiento absoluto.
-
2:14 - 2:18Aquí, se los voy a mostrar con un folículo de barba.
-
2:18 - 2:25Entonces, voy a hacer un "" con una clase "beard", y luego voy a estilizar la barba con algo lindo de CSS
-
2:25 - 2:30que voy a pegar aquí.
-
2:30 - 2:32Y vamos a arreglar eso.
-
2:32 - 2:36Así que puedes ver que nuestra barba tiene un fondo negro, es de 5 por 5 pixeles,
-
2:36 - 2:41tiene un borde de 2 pixeles de radio, para hacerlo un poco más redondo,
-
2:41 - 2:45y está usando un esquema de posicionamiento absoluto.
-
2:45 - 2:48Actualmente, el "" se muestra debajo de la imagen.
-
2:48 - 2:51¿Cómo podemos hacer para que se muestre sobre la cara?
-
2:51 - 2:55Estamos usando posicionamiento absoluto, eso significa que deberíamos usar
-
2:55 - 3:00las propiedades "top" y "left" para decirle, en realidad, dónde
-
3:00 - 3:02debería posicionarse, ya que es posicionamiento absoluto.
-
3:02 - 3:08Así que vamos a poner "top: 80px;", y luego "left: 15px;".
-
3:08 - 3:09Hermoso.
-
3:09 - 3:14Ahora que logramos que funcionara en HTML, vamos a hacer que funcione en JavaScript,
-
3:14 - 3:19para que el usuario pueda crear dinámicamente este "" cada vez que mueva su ratón.
-
3:19 - 3:23Vamos a ir abajo a nuestra función de JavaScript que responde al evento.
-
3:23 - 3:26El primer paso es crear un "",
-
3:26 - 3:31que podemos hacer con nuestra función "document.createElement()",
-
3:31 - 3:34esto va a ser un "".
-
3:34 - 3:40El segundo paso es añadir la clase: 'beard.className = "beard";'.
-
3:40 - 3:42Así que ahora tenemos este "" flotando en el espacio.
-
3:42 - 3:47El paso final es anexarlo a "".
-
3:47 - 3:52Muy bien, ahora hicimos en JavaScript básicamente lo que habíamos hecho en HTML,
-
3:52 - 3:55así que podemos borrar este HTML.
-
3:55 - 3:59Ahora, deberías pausar la guía paso a paso, y probar presionar el ratón en "Winston".
-
3:59 - 4:00Observa lo que pasa.
-
4:02 - 4:05¿Viste que apareciera el folículo de barba?
-
4:05 - 4:07¿Y trataste de presionar el ratón varias veces?
-
4:07 - 4:11Si lo hiciste, probablemente notaste que la segunda vez que presionaste el ratón no pasó nada,
-
4:11 - 4:14o cuando menos parece que no pasó nada.
-
4:14 - 4:18Esto es porque cada "" tiene las mismas propiedades "top" y "left",
-
4:18 - 4:21así que las nuevas barbas aparecen sobre las que ya estaban.
-
4:21 - 4:25Queremos que "" se muestre donde quiera que el usuario presione el ratón.
-
4:25 - 4:30¿Cómo podemos saber dónde se encuentra el ratón?
-
4:30 - 4:34Como resultado, el navegador registra una gran cantidad de información
-
4:34 - 4:38cada vez que sucede cualquier evento del usuario.
-
4:38 - 4:41Y el navegador te da información cada vez
-
4:41 - 4:43que se llama a la función de detector de eventos.
-
4:43 - 4:47Pero ¿dónde y cómo podemos obtener esa información increíble?
-
4:47 - 4:51Voy a teclear una letra, para darles un pista.
-
4:51 - 4:56Esta "e" aquí, es el objeto de la información del evento.
-
4:56 - 5:00Y el navegador lo envía como el primer argumento cuando llama
-
5:00 - 5:02una función del detector de eventos.
-
5:02 - 5:06No lo necesitamos antes, así que no me molesté en escribir la lista de argumentos.
-
5:06 - 5:09Pero ahora que lo vamos a usar, le estoy dando un nombre, para que sea fácil
-
5:09 - 5:12hacer referencia dentro de la función.
-
5:12 - 5:15Recuerden que en JavaScript, una función puede ser llamada con cualquier número
-
5:15 - 5:19de argumentos, incluso si la función no los usa o no se refiere a ninguno de ellos.
-
5:19 - 5:23Así que siempre estábamos obteniendo esta información, sólo que no lo sabíamos.
-
5:23 - 5:28Ahora voy a sacar la "e" a la consola: "console.log(e)".
-
5:28 - 5:32Pausa la guía paso a paso, presiona el ratón en "Winston", y revisa tu consola.
-
5:32 - 5:34Deberías poder ver el objeto del evento,
-
5:34 - 5:37y leer todas sus propiedades.
-
5:39 - 5:43Hay dos propiedades del evento que nos interesan en particular:
-
5:43 - 5:46"clientX" y "clientY".
-
5:46 - 5:49Estos registran la "x" y la "y" del evento y eso es lo que vamos a usar
-
5:49 - 5:51para posicionar la barba.
-
5:51 - 6:02Vamos a definir la propiedad "top" de la barba igual a "e.clientY" más "px", para las unidades.
-
6:02 - 6:10Y establecer "left" igual a "e.clientX", más "px" para las unidades.
-
6:10 - 6:14Ahora usa la pausa y trata de pasar el ratón por encima.
-
6:14 - 6:16Dibujale una barba a "Winston".
-
6:18 - 6:19Bastante bien, ¿eh?
-
6:19 - 6:23Apuesto que pueden imaginar lo divertidas que pueden ser las aplicaciones de pintura que pueden hacer,
-
6:23 - 6:26usando "clientX" y "clientY".
-
6:26 - 6:29Y como lo viste en la consola, hay muchas propiedades
-
6:29 - 6:31en un objeto de evento que podrías usar también.
-
6:31 - 6:35Yo creo que las más utilizadas son las relacionadas con el teclado.
-
6:35 - 6:38Entonces podrías descubrir cuáles teclas está presionando el usuario
-
6:38 - 6:41cuando sucede un evento, y usar eso para hacer una
-
6:41 - 6:44interfaz de teclado o en realidad un juego muy divertido.
-
6:44 - 6:47Oh, una cosa más:
-
6:47 - 6:50no tienes que llamar "e" a este argumento forzosamente.
-
6:50 - 6:57Típicamente se hace, pero algunos desarrolladores lo llaman "evt" o "event".
-
6:57 - 7:01No importa cómo lo llames, siempre y cuando se esté refiriendo
-
7:01 - 7:04al primer argumento que el navegador pasa en tu función,
-
7:04 - 7:09y siempre y cuando tú te refieras a él más tarde de la misma manera.
-
7:09 - 7:13Si tienes problemas con esto, asegúrate de usar " console.log"
-
7:13 - 7:16para ayudarte a depurar lo que está pasando.
-
7:16 - 7:17Cuando eres un desarrollador web,
-
7:17 - 7:21la consola es por mucho tu mejor amiga, ¡úsala!
Show all