1
00:00:00,556 --> 00:00:03,450
Tenho essa página 
com uma foto do Winston.

2
00:00:03,450 --> 00:00:06,556
Está ficando frio aqui,
e o Winston está ficando velho.

3
00:00:06,556 --> 00:00:08,646
Ele gostaria de ter uma barba.

4
00:00:08,646 --> 00:00:10,700
Eu mesma poderia desenhar a barba.

5
00:00:10,700 --> 00:00:13,913
Mas acho que seria mais legal se 
o usuário pudesse desenhar a barba

6
00:00:13,913 --> 00:00:16,412
no Winston ele mesmo,
entretanto eles querem que seja

7
00:00:16,412 --> 00:00:20,380
uma barba grande, com parte 
por fazer, o que eles quiserem

8
00:00:20,380 --> 00:00:22,711
Como podemos fazer isso ?

9
00:00:22,711 --> 00:00:28,693
Um modo é adicionar um evento de captura
para o evento "mouseMove" na imagem.

10
00:00:28,693 --> 00:00:33,031
Assim nossa função seria executada 
sempre que o usuário mover o mouse

11
00:00:33,031 --> 00:00:34,386
sobre do rosto.

12
00:00:34,386 --> 00:00:37,614
Vamos fazer isso, usando 
o que acabamos de aprender.

13
00:00:37,614 --> 00:00:41,412
O primeiro passo é achar 
o elemento, a imagem.

14
00:00:41,412 --> 00:00:45,041
[Digitando]

15
00:00:47,009 --> 00:00:50,281
..."face", já que estou usando esse Id.

16
00:00:50,281 --> 00:00:53,866
O segundo passo é definir a 
função que será executada.

17
00:00:53,866 --> 00:00:58,267
E vamos começar com uma bem simples 
só pra ter certeza de que funciona,

18
00:00:58,267 --> 00:01:01,546
e iremos implementá-la melhor depois.

19
00:01:01,546 --> 00:01:05,346
[digitando]

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

21
00:01:13,182 --> 00:01:17,786
E o último passo é 
conectar isso a isso,

22
00:01:17,786 --> 00:01:22,641
para saber que a função foi executada
quando o 'mouseMove' for capturado.

23
00:01:22,641 --> 00:01:27,854
Então escreveremos 
'face.addEventListener("mousemove",'

24
00:01:27,854 --> 00:01:32,070
e então passar o 
nome da função, `onMouseMove`.

25
00:01:32,070 --> 00:01:36,590
Agora, pare o passo-a-passo, e tente 
mover seu mouse sobre o rosto.

26
00:01:36,590 --> 00:01:38,405
Você viu a mensagem?

27
00:01:39,885 --> 00:01:43,856
Ok, espero que você tenha visto
assim o evento está funcionando.

28
00:01:43,856 --> 00:01:47,344
Mas não é isso que 
queremos que o nosso faça.

29
00:01:47,344 --> 00:01:50,450
Queremos que ele 
desenhe, não escreva um texto.

30
00:01:50,450 --> 00:01:53,356
Como podemos 
desenhar em uma página?

31
00:01:53,356 --> 00:01:58,466
Poderiámos usar a tag "" e 
desenhar alguns pixels nela, como fazemos

32
00:01:58,466 --> 00:02:00,732
com programa ProcessingJS aqui.

33
00:02:00,732 --> 00:02:06,502
Mas só estamos desenhando a barba,
que é um monte de pontos pretos.

34
00:02:06,502 --> 00:02:11,566
Então podíamos apenas criar uma 
para cada ponto, e posicionar a 

35
00:02:11,566 --> 00:02:13,551
com um posicionamento "absolute".

36
00:02:13,551 --> 00:02:18,310
Deixe-me mostrar como fazer isso
com um folículo de barba

37
00:02:18,310 --> 00:02:24,524
Vou criar a  com a classe 
"beard", e associar um CSS a ele.

38
00:02:24,524 --> 00:02:29,381
Pra criar o estilo da 
barba, que colaremos aqui.

39
00:02:29,741 --> 00:02:31,750
Deixe-me arrumar isso.

40
00:02:31,750 --> 00:02:36,471
Como você pode ver nossa barba é 
um fundo negro, de 5 por 5 pixels,

41
00:02:36,471 --> 00:02:40,525
é preciso uma borda com um raio de 
2 pixels para fazer esse ponto redondo,

42
00:02:40,525 --> 00:02:44,684
e está usando um esquema 
de posicionamento absoluto.

43
00:02:44,684 --> 00:02:48,488
Normalmente, a 
aparece embaixo do imagem.

44
00:02:48,488 --> 00:02:51,473
Como fazemos para que ela 
apareça encima do rosto ?

45
00:02:51,473 --> 00:02:55,271
Estamos usando posicionamento,
absoluto, ou seja, devemos usar

46
00:02:55,271 --> 00:02:59,827
as propriedades `top` e `left`
para dizer exatamente oque deve

47
00:02:59,827 --> 00:03:02,073
ser posicionado,
agora está como absoluto.

48
00:03:02,073 --> 00:03:07,923
Vamos mudar para 
`top: 80px;`, e `left:15px;`.

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

50
00:03:09,422 --> 00:03:13,750
Agora que temos isso funcionando em HTML,
vamos fazer isso funcionar em JavaScript,

51
00:03:13,750 --> 00:03:18,865
De modo que o usuário crie dinamicamente 
essa  toda vez que mover o mouse.

52
00:03:18,865 --> 00:03:22,778
Voltemos para a 
nossa função JavaScript.

53
00:03:22,778 --> 00:03:25,534
A primeira coisa é criar a ,

54
00:03:25,534 --> 00:03:31,406
Que podemos fazer com a função
"document.createElement()"

55
00:03:31,406 --> 00:03:33,590
Isso será uma .

56
00:03:33,590 --> 00:03:39,580
A segunda coisa a fazer é incluir 
essa classe: "beard.className = "beard";".

57
00:03:39,580 --> 00:03:42,198
Então temos essa 
, flutuando pelo espaço.

58
00:03:42,198 --> 00:03:47,072
Passo final, fixá-la no corpo.

59
00:03:47,072 --> 00:03:52,103
Certo, basicamente fizemos em JavaScript
o que tinhamos feito em HTML,

60
00:03:52,103 --> 00:03:54,666
Agora podemos apagar esse HTML.

61
00:03:55,356 --> 00:03:58,764
Agora você deve pausar o passo-a-passo
e tentar clicar no Winston.

62
00:03:58,764 --> 00:04:00,312
Veja o que acontece.

63
00:04:02,412 --> 00:04:04,933
Você viu um folículo de barba aparecer?

64
00:04:04,933 --> 00:04:07,191
E você tentar clicar várias vezes ?

65
00:04:07,191 --> 00:04:11,090
Se sim, provavelmente percebeu que 
o segundo click não fez nada.

66
00:04:11,090 --> 00:04:13,525
Ou pelo menos pareceu que não fez nada.

67
00:04:13,525 --> 00:04:17,863
Isso porque todas as  tem o mesmo
valor para "top" e "left",

68
00:04:17,863 --> 00:04:21,081
Então as novas somente são 
empilhadas uma encima da outra.

69
00:04:21,081 --> 00:04:25,493
Queremos que a  seja 
criada onde tiver um click.

70
00:04:25,493 --> 00:04:30,386
Como descobrimos 
onde o mouse está ?

71
00:04:30,386 --> 00:04:34,317
Como se sabe, o navegador
grava muitas informações.

72
00:04:34,317 --> 00:04:38,082
Cada vez que qualquer evento 
de usuário ocorre, como a localização.

73
00:04:38,082 --> 00:04:41,018
E o navegador te passa essa
informação toda vez

74
00:04:41,018 --> 00:04:43,224
chamando sua função do evento listner.

75
00:04:43,224 --> 00:04:46,804
Mas onde, como, podemos 
obter essa informação incrível ?

76
00:04:46,804 --> 00:04:51,412
Vou digitar uma letra, 
pra te dar dica.

77
00:04:51,412 --> 00:04:56,074
Esse 'e' aqui, é o objeto de 
informação do evento.

78
00:04:56,074 --> 00:04:59,609
E o navegador envia isso como o 
primeiro argumento sempre que chama

79
00:04:59,609 --> 00:05:02,129
uma função que capta eventos.

80
00:05:02,129 --> 00:05:06,018
Não precisávamos disso antes, então não 
me preocupei com a lista de argumentos.

81
00:05:06,018 --> 00:05:09,002
Mas agora que vamos usá-la,
Vou dar um nome a ela para ficar

82
00:05:09,002 --> 00:05:11,514
mais fácil referenciar dentro da função.

83
00:05:11,514 --> 00:05:15,116
Em JavaScript, uma função pode ser
chamada com qualquer quantidade

84
00:05:15,116 --> 00:05:18,588
de argumentos, mesmo se a função 
não fizer referência a nenhum deles.

85
00:05:18,588 --> 00:05:22,701
Então sempre estamos recebendo essa 
informação, apenas não sabíamos disso.

86
00:05:22,701 --> 00:05:28,278
Agora vou imprimir a mensagem 
`e`:`console.log(e)`.

87
00:05:28,278 --> 00:05:32,162
Pare o passo-a-passo, clique no
Winston e verifique seu console.

88
00:05:32,162 --> 00:05:34,410
Você deverá ver o objeto 
de evento na tela,

89
00:05:34,410 --> 00:05:37,151
e navegar por todas as
propriedades dele.

90
00:05:38,580 --> 00:05:43,267
Há duas propriedades do evento em 
particular que estamos muito interessados.

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

92
00:05:45,594 --> 00:05:49,314
Elas gravam as coordenadas x e y
do evento, e é isso que nós vamos usar.

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

94
00:05:51,155 --> 00:06:02,015
vamos configurar o começo da barba igual a
"e.clientY", mais "px", por unidades.

95
00:06:02,015 --> 00:06:10,323
E a esquerda igual a "e.clientX", 
mais "px" por unidades.

96
00:06:10,323 --> 00:06:14,320
Agora pause e tente o mouse
sobre a imagem.

97
00:06:14,320 --> 00:06:16,027
Desenhe a barba do Winston.

98
00:06:17,973 --> 00:06:19,454
Bem legal, não ?

99
00:06:19,454 --> 00:06:23,157
Aposto que você pensou em um monte 
de desenhos legais que você pode fazer,

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

101
00:06:25,559 --> 00:06:28,793
E como você pode ver no console,
tem monte de outras propriedades

102
00:06:28,793 --> 00:06:31,251
No objeto de evento que você
também pode usar.

103
00:06:31,251 --> 00:06:35,354
O mais últil, creio, que
os referentes ao teclado.

104
00:06:35,354 --> 00:06:38,147
Então você pode descobrir 
que teclas o usuário pressionou.

105
00:06:38,147 --> 00:06:40,541
quando ocorreu o evento,
e usar isso para fazer uma

106
00:06:40,541 --> 00:06:44,352
interface acessível por teclado, 
ou um jogo bem divertido.

107
00:06:44,352 --> 00:06:47,206
Mais uma coisa.

108
00:06:47,206 --> 00:06:49,700
Você não precisa chamar o 
argumento de "e".

109
00:06:49,700 --> 00:06:57,312
Isso é típico, mas ele também pode ser 
chamado de "evt", ou "event".

110
00:06:57,312 --> 00:07:00,602
Não importa como você chama 
isso, desde que se refira ao

111
00:07:00,602 --> 00:07:03,695
ao primeiro argumento que o 
navegador passa para a sua função,

112
00:07:03,695 --> 00:07:09,485
e desde que você faça a referência
do mesmo modo depois.

113
00:07:09,485 --> 00:07:13,111
Se você está tendo problema com 
isso, use o log do console para

114
00:07:13,111 --> 00:07:15,799
depurar a aplicação e entender
o que está acontecendo.

115
00:07:15,799 --> 00:07:17,625
Quando você é um desenvolvedor web,

116
00:07:17,625 --> 00:07:21,537
O console é o seu 
melhor amigo use-o!

117
00:07:21,537 --> 00:07:23,000
[Legendado por Valter Bigeli]
[Revisado por Paulo Trentin]