WEBVTT

00:00:00.556 --> 00:00:03.450
Tenho essa página 
com uma foto do Winston.

00:00:03.450 --> 00:00:06.556
Está ficando frio aqui,
e o Winston está ficando velho.

00:00:06.556 --> 00:00:08.646
Ele gostaria de ter uma barba.

00:00:08.646 --> 00:00:10.700
Eu mesma poderia desenhar a barba.

00:00:10.700 --> 00:00:13.913
Mas acho que seria mais legal se 
o usuário pudesse desenhar a barba

00:00:13.913 --> 00:00:16.412
no Winston ele mesmo,
entretanto eles querem que seja

00:00:16.412 --> 00:00:20.380
uma barba grande, com parte 
por fazer, o que eles quiserem

00:00:20.380 --> 00:00:22.711
Como podemos fazer isso ?

00:00:22.711 --> 00:00:28.693
Um modo é adicionar um evento de captura
para o evento "mouseMove" na imagem.

00:00:28.693 --> 00:00:33.031
Assim nossa função seria executada 
sempre que o usuário mover o mouse

00:00:33.031 --> 00:00:34.386
sobre do rosto.

00:00:34.386 --> 00:00:37.614
Vamos fazer isso, usando 
o que acabamos de aprender.

00:00:37.614 --> 00:00:41.412
O primeiro passo é achar 
o elemento, a imagem.

00:00:41.412 --> 00:00:45.041
[Digitando]

00:00:47.009 --> 00:00:50.281
..."face", já que estou usando esse Id.

00:00:50.281 --> 00:00:53.866
O segundo passo é definir a 
função que será executada.

00:00:53.866 --> 00:00:58.267
E vamos começar com uma bem simples 
só pra ter certeza de que funciona,

00:00:58.267 --> 00:01:01.546
e iremos implementá-la melhor depois.

00:01:01.546 --> 00:01:05.346
[digitando]

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

00:01:13.182 --> 00:01:17.786
E o último passo é 
conectar isso a isso,

00:01:17.786 --> 00:01:22.641
para saber que a função foi executada
quando o 'mouseMove' for capturado.

00:01:22.641 --> 00:01:27.854
Então escreveremos 
'face.addEventListener("mousemove",'

00:01:27.854 --> 00:01:32.070
e então passar o 
nome da função, `onMouseMove`.

00:01:32.070 --> 00:01:36.590
Agora, pare o passo-a-passo, e tente 
mover seu mouse sobre o rosto.

00:01:36.590 --> 00:01:38.405
Você viu a mensagem?

00:01:39.885 --> 00:01:43.856
Ok, espero que você tenha visto
assim o evento está funcionando.

00:01:43.856 --> 00:01:47.344
Mas não é isso que 
queremos que o nosso faça.

00:01:47.344 --> 00:01:50.450
Queremos que ele 
desenhe, não escreva um texto.

00:01:50.450 --> 00:01:53.356
Como podemos 
desenhar em uma página?

00:01:53.356 --> 00:01:58.466
Poderiámos usar a tag "" e 
desenhar alguns pixels nela, como fazemos

00:01:58.466 --> 00:02:00.732
com programa ProcessingJS aqui.

00:02:00.732 --> 00:02:06.502
Mas só estamos desenhando a barba,
que é um monte de pontos pretos.

00:02:06.502 --> 00:02:11.566
Então podíamos apenas criar uma 
para cada ponto, e posicionar a 

00:02:11.566 --> 00:02:13.551
com um posicionamento "absolute".

00:02:13.551 --> 00:02:18.310
Deixe-me mostrar como fazer isso
com um folículo de barba

00:02:18.310 --> 00:02:24.524
Vou criar a  com a classe 
"beard", e associar um CSS a ele.

00:02:24.524 --> 00:02:29.381
Pra criar o estilo da 
barba, que colaremos aqui.

00:02:29.741 --> 00:02:31.750
Deixe-me arrumar isso.

00:02:31.750 --> 00:02:36.471
Como você pode ver nossa barba é 
um fundo negro, de 5 por 5 pixels,

00:02:36.471 --> 00:02:40.525
é preciso uma borda com um raio de 
2 pixels para fazer esse ponto redondo,

00:02:40.525 --> 00:02:44.684
e está usando um esquema 
de posicionamento absoluto.

00:02:44.684 --> 00:02:48.488
Normalmente, a 
aparece embaixo do imagem.

00:02:48.488 --> 00:02:51.473
Como fazemos para que ela 
apareça encima do rosto ?

00:02:51.473 --> 00:02:55.271
Estamos usando posicionamento,
absoluto, ou seja, devemos usar

00:02:55.271 --> 00:02:59.827
as propriedades `top` e `left`
para dizer exatamente oque deve

00:02:59.827 --> 00:03:02.073
ser posicionado,
agora está como absoluto.

00:03:02.073 --> 00:03:07.923
Vamos mudar para 
`top: 80px;`, e `left:15px;`.

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

00:03:09.422 --> 00:03:13.750
Agora que temos isso funcionando em HTML,
vamos fazer isso funcionar em JavaScript,

00:03:13.750 --> 00:03:18.865
De modo que o usuário crie dinamicamente 
essa  toda vez que mover o mouse.

00:03:18.865 --> 00:03:22.778
Voltemos para a 
nossa função JavaScript.

00:03:22.778 --> 00:03:25.534
A primeira coisa é criar a ,

00:03:25.534 --> 00:03:31.406
Que podemos fazer com a função
"document.createElement()"

00:03:31.406 --> 00:03:33.590
Isso será uma .

00:03:33.590 --> 00:03:39.580
A segunda coisa a fazer é incluir 
essa classe: "beard.className = "beard";".

00:03:39.580 --> 00:03:42.198
Então temos essa 
, flutuando pelo espaço.

00:03:42.198 --> 00:03:47.072
Passo final, fixá-la no corpo.

00:03:47.072 --> 00:03:52.103
Certo, basicamente fizemos em JavaScript
o que tinhamos feito em HTML,

00:03:52.103 --> 00:03:54.666
Agora podemos apagar esse HTML.

00:03:55.356 --> 00:03:58.764
Agora você deve pausar o passo-a-passo
e tentar clicar no Winston.

00:03:58.764 --> 00:04:00.312
Veja o que acontece.

00:04:02.412 --> 00:04:04.933
Você viu um folículo de barba aparecer?

00:04:04.933 --> 00:04:07.191
E você tentar clicar várias vezes ?

00:04:07.191 --> 00:04:11.090
Se sim, provavelmente percebeu que 
o segundo click não fez nada.

00:04:11.090 --> 00:04:13.525
Ou pelo menos pareceu que não fez nada.

00:04:13.525 --> 00:04:17.863
Isso porque todas as  tem o mesmo
valor para "top" e "left",

00:04:17.863 --> 00:04:21.081
Então as novas somente são 
empilhadas uma encima da outra.

00:04:21.081 --> 00:04:25.493
Queremos que a  seja 
criada onde tiver um click.

00:04:25.493 --> 00:04:30.386
Como descobrimos 
onde o mouse está ?

00:04:30.386 --> 00:04:34.317
Como se sabe, o navegador
grava muitas informações.

00:04:34.317 --> 00:04:38.082
Cada vez que qualquer evento 
de usuário ocorre, como a localização.

00:04:38.082 --> 00:04:41.018
E o navegador te passa essa
informação toda vez

00:04:41.018 --> 00:04:43.224
chamando sua função do evento listner.

00:04:43.224 --> 00:04:46.804
Mas onde, como, podemos 
obter essa informação incrível ?

00:04:46.804 --> 00:04:51.412
Vou digitar uma letra, 
pra te dar dica.

00:04:51.412 --> 00:04:56.074
Esse 'e' aqui, é o objeto de 
informação do evento.

00:04:56.074 --> 00:04:59.609
E o navegador envia isso como o 
primeiro argumento sempre que chama

00:04:59.609 --> 00:05:02.129
uma função que capta eventos.

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.

00:05:06.018 --> 00:05:09.002
Mas agora que vamos usá-la,
Vou dar um nome a ela para ficar

00:05:09.002 --> 00:05:11.514
mais fácil referenciar dentro da função.

00:05:11.514 --> 00:05:15.116
Em JavaScript, uma função pode ser
chamada com qualquer quantidade

00:05:15.116 --> 00:05:18.588
de argumentos, mesmo se a função 
não fizer referência a nenhum deles.

00:05:18.588 --> 00:05:22.701
Então sempre estamos recebendo essa 
informação, apenas não sabíamos disso.

00:05:22.701 --> 00:05:28.278
Agora vou imprimir a mensagem 
`e`:`console.log(e)`.

00:05:28.278 --> 00:05:32.162
Pare o passo-a-passo, clique no
Winston e verifique seu console.

00:05:32.162 --> 00:05:34.410
Você deverá ver o objeto 
de evento na tela,

00:05:34.410 --> 00:05:37.151
e navegar por todas as
propriedades dele.

00:05:38.580 --> 00:05:43.267
Há duas propriedades do evento em 
particular que estamos muito interessados.

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

00:05:45.594 --> 00:05:49.314
Elas gravam as coordenadas x e y
do evento, e é isso que nós vamos usar.

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

00:05:51.155 --> 00:06:02.015
vamos configurar o começo da barba igual a
"e.clientY", mais "px", por unidades.

00:06:02.015 --> 00:06:10.323
E a esquerda igual a "e.clientX", 
mais "px" por unidades.

00:06:10.323 --> 00:06:14.320
Agora pause e tente o mouse
sobre a imagem.

00:06:14.320 --> 00:06:16.027
Desenhe a barba do Winston.

00:06:17.973 --> 00:06:19.454
Bem legal, não ?

00:06:19.454 --> 00:06:23.157
Aposto que você pensou em um monte 
de desenhos legais que você pode fazer,

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

00:06:25.559 --> 00:06:28.793
E como você pode ver no console,
tem monte de outras propriedades

00:06:28.793 --> 00:06:31.251
No objeto de evento que você
também pode usar.

00:06:31.251 --> 00:06:35.354
O mais últil, creio, que
os referentes ao teclado.

00:06:35.354 --> 00:06:38.147
Então você pode descobrir 
que teclas o usuário pressionou.

00:06:38.147 --> 00:06:40.541
quando ocorreu o evento,
e usar isso para fazer uma

00:06:40.541 --> 00:06:44.352
interface acessível por teclado, 
ou um jogo bem divertido.

00:06:44.352 --> 00:06:47.206
Mais uma coisa.

00:06:47.206 --> 00:06:49.700
Você não precisa chamar o 
argumento de "e".

00:06:49.700 --> 00:06:57.312
Isso é típico, mas ele também pode ser 
chamado de "evt", ou "event".

00:06:57.312 --> 00:07:00.602
Não importa como você chama 
isso, desde que se refira ao

00:07:00.602 --> 00:07:03.695
ao primeiro argumento que o 
navegador passa para a sua função,

00:07:03.695 --> 00:07:09.485
e desde que você faça a referência
do mesmo modo depois.

00:07:09.485 --> 00:07:13.111
Se você está tendo problema com 
isso, use o log do console para

00:07:13.111 --> 00:07:15.799
depurar a aplicação e entender
o que está acontecendo.

00:07:15.799 --> 00:07:17.625
Quando você é um desenvolvedor web,

00:07:17.625 --> 00:07:21.537
O console é o seu 
melhor amigo use-o!

00:07:21.537 --> 00:07:23.000
[Legendado por Valter Bigeli]
[Revisado por Paulo Trentin]