0:00:00.556,0:00:03.450
Tenho essa página [br]com uma foto do Winston.

0:00:03.450,0:00:06.556
Está ficando frio aqui,[br]e o Winston está ficando velho.

0:00:06.556,0:00:08.646
Ele gostaria de ter uma barba.

0:00:08.646,0:00:10.700
Eu mesma poderia desenhar a barba.

0:00:10.700,0:00:13.913
Mas acho que seria mais legal se [br]o usuário pudesse desenhar a barba

0:00:13.913,0:00:16.412
no Winston ele mesmo,[br]entretanto eles querem que seja

0:00:16.412,0:00:20.380
uma barba grande, com parte [br]por fazer, o que eles quiserem

0:00:20.380,0:00:22.711
Como podemos fazer isso ?

0:00:22.711,0:00:28.693
Um modo é adicionar um evento de captura[br]para o evento "mouseMove" na imagem.

0:00:28.693,0:00:33.031
Assim nossa função seria executada [br]sempre que o usuário mover o mouse

0:00:33.031,0:00:34.386
sobre do rosto.

0:00:34.386,0:00:37.614
Vamos fazer isso, usando [br]o que acabamos de aprender.

0:00:37.614,0:00:41.412
O primeiro passo é achar [br]o elemento, a imagem.

0:00:41.412,0:00:45.041
[Digitando]

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

0:00:50.281,0:00:53.866
O segundo passo é definir a [br]função que será executada.

0:00:53.866,0:00:58.267
E vamos começar com uma bem simples [br]só pra ter certeza de que funciona,

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

0:01:01.546,0:01:05.346
[digitando]

0:01:11.720,0:01:13.182
Ok.

0:01:13.182,0:01:17.786
E o último passo é [br]conectar isso a isso,

0:01:17.786,0:01:22.641
para saber que a função foi executada[br]quando o 'mouseMove' for capturado.

0:01:22.641,0:01:27.854
Então escreveremos [br]'face.addEventListener("mousemove",'

0:01:27.854,0:01:32.070
e então passar o [br]nome da função, `onMouseMove`.

0:01:32.070,0:01:36.590
Agora, pare o passo-a-passo, e tente [br]mover seu mouse sobre o rosto.

0:01:36.590,0:01:38.405
Você viu a mensagem?

0:01:39.885,0:01:43.856
Ok, espero que você tenha visto[br]assim o evento está funcionando.

0:01:43.856,0:01:47.344
Mas não é isso que [br]queremos que o nosso faça.

0:01:47.344,0:01:50.450
Queremos que ele [br]desenhe, não escreva um texto.

0:01:50.450,0:01:53.356
Como podemos [br]desenhar em uma página?

0:01:53.356,0:01:58.466
Poderiámos usar a tag "" e [br]desenhar alguns pixels nela, como fazemos

0:01:58.466,0:02:00.732
com programa ProcessingJS aqui.

0:02:00.732,0:02:06.502
Mas só estamos desenhando a barba,[br]que é um monte de pontos pretos.

0:02:06.502,0:02:11.566
Então podíamos apenas criar uma [br]para cada ponto, e posicionar a

0:02:11.566,0:02:13.551
com um posicionamento "absolute".

0:02:13.551,0:02:18.310
Deixe-me mostrar como fazer isso[br]com um folículo de barba

0:02:18.310,0:02:24.524
Vou criar a  com a classe [br]"beard", e associar um CSS a ele.

0:02:24.524,0:02:29.381
Pra criar o estilo da [br]barba, que colaremos aqui.

0:02:29.741,0:02:31.750
Deixe-me arrumar isso.

0:02:31.750,0:02:36.471
Como você pode ver nossa barba é [br]um fundo negro, de 5 por 5 pixels,

0:02:36.471,0:02:40.525
é preciso uma borda com um raio de [br]2 pixels para fazer esse ponto redondo,

0:02:40.525,0:02:44.684
e está usando um esquema [br]de posicionamento absoluto.

0:02:44.684,0:02:48.488
Normalmente, a [br]aparece embaixo do imagem.

0:02:48.488,0:02:51.473
Como fazemos para que ela [br]apareça encima do rosto ?

0:02:51.473,0:02:55.271
Estamos usando posicionamento,[br]absoluto, ou seja, devemos usar

0:02:55.271,0:02:59.827
as propriedades `top` e `left`[br]para dizer exatamente oque deve

0:02:59.827,0:03:02.073
ser posicionado,[br]agora está como absoluto.

0:03:02.073,0:03:07.923
Vamos mudar para [br]`top: 80px;`, e `left:15px;`.

0:03:07.923,0:03:09.422
Lindo.

0:03:09.422,0:03:13.750
Agora que temos isso funcionando em HTML,[br]vamos fazer isso funcionar em JavaScript,

0:03:13.750,0:03:18.865
De modo que o usuário crie dinamicamente [br]essa  toda vez que mover o mouse.

0:03:18.865,0:03:22.778
Voltemos para a [br]nossa função JavaScript.

0:03:22.778,0:03:25.534
A primeira coisa é criar a ,

0:03:25.534,0:03:31.406
Que podemos fazer com a função[br]"document.createElement()"

0:03:31.406,0:03:33.590
Isso será uma .

0:03:33.590,0:03:39.580
A segunda coisa a fazer é incluir [br]essa classe: "beard.className = "beard";".

0:03:39.580,0:03:42.198
Então temos essa [br], flutuando pelo espaço.

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

0:03:47.072,0:03:52.103
Certo, basicamente fizemos em JavaScript[br]o que tinhamos feito em HTML,

0:03:52.103,0:03:54.666
Agora podemos apagar esse HTML.

0:03:55.356,0:03:58.764
Agora você deve pausar o passo-a-passo[br]e tentar clicar no Winston.

0:03:58.764,0:04:00.312
Veja o que acontece.

0:04:02.412,0:04:04.933
Você viu um folículo de barba aparecer?

0:04:04.933,0:04:07.191
E você tentar clicar várias vezes ?

0:04:07.191,0:04:11.090
Se sim, provavelmente percebeu que [br]o segundo click não fez nada.

0:04:11.090,0:04:13.525
Ou pelo menos pareceu que não fez nada.

0:04:13.525,0:04:17.863
Isso porque todas as  tem o mesmo[br]valor para "top" e "left",

0:04:17.863,0:04:21.081
Então as novas somente são [br]empilhadas uma encima da outra.

0:04:21.081,0:04:25.493
Queremos que a  seja [br]criada onde tiver um click.

0:04:25.493,0:04:30.386
Como descobrimos [br]onde o mouse está ?

0:04:30.386,0:04:34.317
Como se sabe, o navegador[br]grava muitas informações.

0:04:34.317,0:04:38.082
Cada vez que qualquer evento [br]de usuário ocorre, como a localização.

0:04:38.082,0:04:41.018
E o navegador te passa essa[br]informação toda vez

0:04:41.018,0:04:43.224
chamando sua função do evento listner.

0:04:43.224,0:04:46.804
Mas onde, como, podemos [br]obter essa informação incrível ?

0:04:46.804,0:04:51.412
Vou digitar uma letra, [br]pra te dar dica.

0:04:51.412,0:04:56.074
Esse 'e' aqui, é o objeto de [br]informação do evento.

0:04:56.074,0:04:59.609
E o navegador envia isso como o [br]primeiro argumento sempre que chama

0:04:59.609,0:05:02.129
uma função que capta eventos.

0:05:02.129,0:05:06.018
Não precisávamos disso antes, então não [br]me preocupei com a lista de argumentos.

0:05:06.018,0:05:09.002
Mas agora que vamos usá-la,[br]Vou dar um nome a ela para ficar

0:05:09.002,0:05:11.514
mais fácil referenciar dentro da função.

0:05:11.514,0:05:15.116
Em JavaScript, uma função pode ser[br]chamada com qualquer quantidade

0:05:15.116,0:05:18.588
de argumentos, mesmo se a função [br]não fizer referência a nenhum deles.

0:05:18.588,0:05:22.701
Então sempre estamos recebendo essa [br]informação, apenas não sabíamos disso.

0:05:22.701,0:05:28.278
Agora vou imprimir a mensagem [br]`e`:`console.log(e)`.

0:05:28.278,0:05:32.162
Pare o passo-a-passo, clique no[br]Winston e verifique seu console.

0:05:32.162,0:05:34.410
Você deverá ver o objeto [br]de evento na tela,

0:05:34.410,0:05:37.151
e navegar por todas as[br]propriedades dele.

0:05:38.580,0:05:43.267
Há duas propriedades do evento em [br]particular que estamos muito interessados.

0:05:43.267,0:05:45.594
"clientX" e "clientY".

0:05:45.594,0:05:49.314
Elas gravam as coordenadas x e y[br]do evento, e é isso que nós vamos usar.

0:05:49.314,0:05:51.155
para posicionar a barba.

0:05:51.155,0:06:02.015
vamos configurar o começo da barba igual a[br]"e.clientY", mais "px", por unidades.

0:06:02.015,0:06:10.323
E a esquerda igual a "e.clientX", [br]mais "px" por unidades.

0:06:10.323,0:06:14.320
Agora pause e tente o mouse[br]sobre a imagem.

0:06:14.320,0:06:16.027
Desenhe a barba do Winston.

0:06:17.973,0:06:19.454
Bem legal, não ?

0:06:19.454,0:06:23.157
Aposto que você pensou em um monte [br]de desenhos legais que você pode fazer,

0:06:23.157,0:06:25.559
usando "clientX" e "clientY".

0:06:25.559,0:06:28.793
E como você pode ver no console,[br]tem monte de outras propriedades

0:06:28.793,0:06:31.251
No objeto de evento que você[br]também pode usar.

0:06:31.251,0:06:35.354
O mais últil, creio, que[br]os referentes ao teclado.

0:06:35.354,0:06:38.147
Então você pode descobrir [br]que teclas o usuário pressionou.

0:06:38.147,0:06:40.541
quando ocorreu o evento,[br]e usar isso para fazer uma

0:06:40.541,0:06:44.352
interface acessível por teclado, [br]ou um jogo bem divertido.

0:06:44.352,0:06:47.206
Mais uma coisa.

0:06:47.206,0:06:49.700
Você não precisa chamar o [br]argumento de "e".

0:06:49.700,0:06:57.312
Isso é típico, mas ele também pode ser [br]chamado de "evt", ou "event".

0:06:57.312,0:07:00.602
Não importa como você chama [br]isso, desde que se refira ao

0:07:00.602,0:07:03.695
ao primeiro argumento que o [br]navegador passa para a sua função,

0:07:03.695,0:07:09.485
e desde que você faça a referência[br]do mesmo modo depois.

0:07:09.485,0:07:13.111
Se você está tendo problema com [br]isso, use o log do console para

0:07:13.111,0:07:15.799
depurar a aplicação e entender[br]o que está acontecendo.

0:07:15.799,0:07:17.625
Quando você é um desenvolvedor web,

0:07:17.625,0:07:21.537
O console é o seu [br]melhor amigo use-o!

0:07:21.537,0:07:23.000
[Legendado por Valter Bigeli][br][Revisado por Paulo Trentin]