1
00:00:00,556 --> 00:00:03,450
Tengo esta página web con una foto de "Winston".

2
00:00:03,450 --> 00:00:06,556
Hace frío y "Winston" se está haciendo viejo,

3
00:00:06,556 --> 00:00:08,646
así que quiere tener una barba.

4
00:00:08,646 --> 00:00:10,750
Yo podría dibujar la barba.

5
00:00:10,750 --> 00:00:13,523
Pero pienso que sería mejor si el usuario dibuja la barba

6
00:00:13,523 --> 00:00:16,412
de "Winston", de la manera en que quieren que se vea.

7
00:00:16,412 --> 00:00:20,380
Una barba larga, o como de tres días, o lo que sea que definan.

8
00:00:20,380 --> 00:00:22,711
¿Cómo podríamos hacer eso?

9
00:00:22,711 --> 00:00:28,693
Una forma es añadir un detector de eventos para el evento "mouseMove" en la imagen,

10
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,

11
00:00:33,031 --> 00:00:34,386
sobre la cara de "Winston".

12
00:00:34,386 --> 00:00:37,614
Vamos a hacer eso usando lo que acabamos de aprender.

13
00:00:37,614 --> 00:00:41,412
El primer paso es encontrar el elemento, la imagen.

14
00:00:41,412 --> 00:00:47,011
"var face = document.getElementById("...

15
00:00:47,011 --> 00:00:50,281
... "face"), porque tengo este lindo "Id".

16
00:00:50,281 --> 00:00:53,866
El segundo paso es definir la función que responde al evento.

17
00:00:53,866 --> 00:00:58,267
Y vamos a empezar con una simple, para asegurarnos de que funciona,

18
00:00:58,267 --> 00:01:01,546
y podremos hacer más tarde que haga algo más.

19
00:01:01,546 --> 00:01:11,510
'document.getElementById("message").textContent += "mooove";'

20
00:01:11,510 --> 00:01:13,182
Ok.

21
00:01:13,182 --> 00:01:17,946
Y el paso final es conectar éste con éste,

22
00:01:17,946 --> 00:01:21,941
para asegurarnos de que éste será llamado cuando éste detecte el evento "mouseMove".

23
00:01:21,941 --> 00:01:27,854
Así que escribiremos: 'face.addEventListener("mousemove",'

24
00:01:27,854 --> 00:01:32,070
y luego le pasamos el nombre de nuestra función, "onMouseMove".

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

26
00:01:36,590 --> 00:01:39,155
¿Viste el mensaje?

27
00:01:39,885 --> 00:01:43,856
Ok, espero que hayas visto este evento funcionando.

28
00:01:43,856 --> 00:01:47,344
Pero esto no es lo que queremos que haga nuestro detector de eventos.

29
00:01:47,344 --> 00:01:50,450
Queremos que dibuje, no que escriba texto.

30
00:01:50,450 --> 00:01:53,356
¿Cómo podemos dibujar en una página web?

31
00:01:53,356 --> 00:01:58,596
Podríamos usar la etiqueta "" y dibujar pixeles, como lo hicimos aquí

32
00:01:58,596 --> 00:02:00,732
con los programas de "ProcessingJS".

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

34
00:02:06,502 --> 00:02:11,566
Así que podríamos crear un "" para cada punto, y asignar a este ""

35
00:02:11,566 --> 00:02:13,551
un posicionamiento absoluto.

36
00:02:13,551 --> 00:02:18,310
Aquí, se los voy a mostrar con un folículo de barba.

37
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

38
00:02:24,524 --> 00:02:29,741
que voy a pegar aquí.

39
00:02:29,741 --> 00:02:31,750
Y vamos a arreglar eso.

40
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,

41
00:02:36,471 --> 00:02:40,525
tiene un borde de 2 pixeles de radio, para hacerlo un poco más redondo,

42
00:02:40,525 --> 00:02:44,684
y está usando un esquema de posicionamiento absoluto.

43
00:02:44,684 --> 00:02:48,488
Actualmente, el "" se muestra debajo de la imagen.

44
00:02:48,488 --> 00:02:51,473
¿Cómo podemos hacer para que se muestre sobre la cara?

45
00:02:51,473 --> 00:02:55,271
Estamos usando posicionamiento absoluto, eso significa que deberíamos usar

46
00:02:55,271 --> 00:02:59,827
las propiedades "top" y "left" para decirle, en realidad, dónde

47
00:02:59,827 --> 00:03:02,073
debería posicionarse, ya que es posicionamiento absoluto.

48
00:03:02,073 --> 00:03:07,923
Así que vamos a poner "top: 80px;", y luego "left: 15px;".

49
00:03:07,923 --> 00:03:09,422
Hermoso.

50
00:03:09,422 --> 00:03:13,750
Ahora que logramos que funcionara en HTML, vamos a hacer que funcione en JavaScript,

51
00:03:13,750 --> 00:03:18,865
para que el usuario pueda crear dinámicamente este "" cada vez que mueva su ratón.

52
00:03:18,865 --> 00:03:22,778
Vamos a ir abajo a nuestra función de JavaScript que responde al evento.

53
00:03:22,778 --> 00:03:25,534
El primer paso es crear un "",

54
00:03:25,534 --> 00:03:31,406
que podemos hacer con nuestra función "document.createElement()",

55
00:03:31,406 --> 00:03:33,590
esto va a ser un "".

56
00:03:33,590 --> 00:03:39,580
El segundo paso es añadir la clase: 'beard.className = "beard";'.

57
00:03:39,580 --> 00:03:42,198
Así que ahora tenemos este "" flotando en el espacio.

58
00:03:42,198 --> 00:03:47,072
El paso final es anexarlo a "".

59
00:03:47,072 --> 00:03:52,103
Muy bien, ahora hicimos en JavaScript básicamente lo que habíamos hecho en HTML,

60
00:03:52,103 --> 00:03:54,666
así que podemos borrar este HTML.

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

62
00:03:58,764 --> 00:04:00,312
Observa lo que pasa.

63
00:04:02,412 --> 00:04:04,933
¿Viste que apareciera el folículo de barba?

64
00:04:04,933 --> 00:04:07,191
¿Y trataste de presionar el ratón varias veces?

65
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,

66
00:04:11,090 --> 00:04:13,525
o cuando menos parece que no pasó nada.

67
00:04:13,525 --> 00:04:17,863
Esto es porque cada "" tiene las mismas propiedades "top" y "left",

68
00:04:17,863 --> 00:04:21,081
así que las nuevas barbas aparecen sobre las que ya estaban.

69
00:04:21,081 --> 00:04:25,493
Queremos que "" se muestre donde quiera que el usuario presione el ratón.

70
00:04:25,493 --> 00:04:30,386
¿Cómo podemos saber dónde se encuentra el ratón?

71
00:04:30,386 --> 00:04:34,317
Como resultado, el navegador registra una gran cantidad de información

72
00:04:34,317 --> 00:04:38,082
cada vez que sucede cualquier evento del usuario.

73
00:04:38,082 --> 00:04:41,018
Y el navegador te da información cada vez

74
00:04:41,018 --> 00:04:43,224
que se llama a la función de detector de eventos.

75
00:04:43,224 --> 00:04:46,804
Pero ¿dónde y cómo podemos obtener esa información increíble?

76
00:04:46,804 --> 00:04:51,412
Voy a teclear una letra, para darles un pista.

77
00:04:51,412 --> 00:04:56,074
Esta "e" aquí, es el objeto de la información del evento.

78
00:04:56,074 --> 00:04:59,609
Y el navegador lo envía como el primer argumento cuando llama

79
00:04:59,609 --> 00:05:02,129
una función del detector de eventos.

80
00:05:02,129 --> 00:05:06,178
No lo necesitamos antes, así que no me molesté en escribir la lista de argumentos.

81
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

82
00:05:09,002 --> 00:05:11,594
hacer referencia dentro de la función.

83
00:05:11,594 --> 00:05:14,966
Recuerden que en JavaScript, una función puede ser llamada con cualquier número

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

85
00:05:18,588 --> 00:05:22,701
Así que siempre estábamos obteniendo esta información, sólo que no lo sabíamos.

86
00:05:22,701 --> 00:05:28,278
Ahora voy a sacar la "e" a la consola: "console.log(e)".

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

88
00:05:32,162 --> 00:05:34,410
Deberías poder ver el objeto del evento,

89
00:05:34,410 --> 00:05:37,151
y leer todas sus propiedades.

90
00:05:38,580 --> 00:05:43,267
Hay dos propiedades del evento que nos interesan en particular:

91
00:05:43,267 --> 00:05:45,594
"clientX" y "clientY".

92
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

93
00:05:49,314 --> 00:05:51,155
para posicionar la barba.

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

95
00:06:02,015 --> 00:06:10,323
Y establecer "left" igual a "e.clientX", más "px" para las unidades.

96
00:06:10,323 --> 00:06:14,320
Ahora usa la pausa y trata de pasar el ratón por encima.

97
00:06:14,320 --> 00:06:16,027
Dibujale una barba a "Winston".

98
00:06:17,973 --> 00:06:19,454
Bastante bien, ¿eh?

99
00:06:19,454 --> 00:06:23,157
Apuesto que pueden imaginar lo divertidas que pueden ser las aplicaciones de pintura que pueden hacer,

100
00:06:23,157 --> 00:06:25,559
usando "clientX" y "clientY".

101
00:06:25,559 --> 00:06:28,793
Y como lo viste en la consola, hay muchas propiedades

102
00:06:28,793 --> 00:06:31,251
en un objeto de evento que podrías usar también.

103
00:06:31,251 --> 00:06:35,354
Yo creo que las más utilizadas son las relacionadas con el teclado.

104
00:06:35,354 --> 00:06:38,107
Entonces podrías descubrir cuáles teclas está presionando el usuario

105
00:06:38,107 --> 00:06:40,541
cuando sucede un evento, y usar eso para hacer una

106
00:06:40,541 --> 00:06:44,352
interfaz de teclado o en realidad un juego muy divertido.

107
00:06:44,352 --> 00:06:47,206
Oh, una cosa más:

108
00:06:47,206 --> 00:06:49,700
no tienes que llamar "e" a este argumento forzosamente.

109
00:06:49,700 --> 00:06:57,312
Típicamente se hace, pero algunos desarrolladores lo llaman "evt" o "event".

110
00:06:57,312 --> 00:07:00,602
No importa cómo lo llames, siempre y cuando se esté refiriendo

111
00:07:00,602 --> 00:07:03,695
al primer argumento que el navegador pasa en tu función,

112
00:07:03,695 --> 00:07:09,485
y siempre y cuando tú te refieras a él más tarde de la misma manera.

113
00:07:09,485 --> 00:07:13,281
Si tienes problemas con esto, asegúrate de usar " console.log"

114
00:07:13,281 --> 00:07:15,639
para ayudarte a depurar lo que está pasando.

115
00:07:15,639 --> 00:07:17,235
Cuando eres un desarrollador web,

116
00:07:17,250 --> 00:07:21,460
la consola es por mucho tu mejor amiga, ¡úsala!