Tenho essa página 
com uma foto do Winston.

Está ficando frio aqui,
e o Winston está ficando velho.

Ele gostaria de ter uma barba.

Eu mesma poderia desenhar a barba.

Mas acho que seria mais legal se 
o usuário pudesse desenhar a barba

no Winston ele mesmo,
entretanto eles querem que seja

uma barba grande, com parte 
por fazer, o que eles quiserem

Como podemos fazer isso ?

Um modo é adicionar um evento de captura
para o evento "mouseMove" na imagem.

Assim nossa função seria executada 
sempre que o usuário mover o mouse

sobre do rosto.

Vamos fazer isso, usando 
o que acabamos de aprender.

O primeiro passo é achar 
o elemento, a imagem.

[Digitando]

..."face", já que estou usando esse Id.

O segundo passo é definir a 
função que será executada.

E vamos começar com uma bem simples 
só pra ter certeza de que funciona,

e iremos implementá-la melhor depois.

[digitando]

Ok.

E o último passo é 
conectar isso a isso,

para saber que a função foi executada
quando o 'mouseMove' for capturado.

Então escreveremos 
'face.addEventListener("mousemove",'

e então passar o 
nome da função, `onMouseMove`.

Agora, pare o passo-a-passo, e tente 
mover seu mouse sobre o rosto.

Você viu a mensagem?

Ok, espero que você tenha visto
assim o evento está funcionando.

Mas não é isso que 
queremos que o nosso faça.

Queremos que ele 
desenhe, não escreva um texto.

Como podemos 
desenhar em uma página?

Poderiámos usar a tag "" e 
desenhar alguns pixels nela, como fazemos

com programa ProcessingJS aqui.

Mas só estamos desenhando a barba,
que é um monte de pontos pretos.

Então podíamos apenas criar uma 
para cada ponto, e posicionar a

com um posicionamento "absolute".

Deixe-me mostrar como fazer isso
com um folículo de barba

Vou criar a  com a classe 
"beard", e associar um CSS a ele.

Pra criar o estilo da 
barba, que colaremos aqui.

Deixe-me arrumar isso.

Como você pode ver nossa barba é 
um fundo negro, de 5 por 5 pixels,

é preciso uma borda com um raio de 
2 pixels para fazer esse ponto redondo,

e está usando um esquema 
de posicionamento absoluto.

Normalmente, a 
aparece embaixo do imagem.

Como fazemos para que ela 
apareça encima do rosto ?

Estamos usando posicionamento,
absoluto, ou seja, devemos usar

as propriedades `top` e `left`
para dizer exatamente oque deve

ser posicionado,
agora está como absoluto.

Vamos mudar para 
`top: 80px;`, e `left:15px;`.

Lindo.

Agora que temos isso funcionando em HTML,
vamos fazer isso funcionar em JavaScript,

De modo que o usuário crie dinamicamente 
essa  toda vez que mover o mouse.

Voltemos para a 
nossa função JavaScript.

A primeira coisa é criar a ,

Que podemos fazer com a função
"document.createElement()"

Isso será uma .

A segunda coisa a fazer é incluir 
essa classe: "beard.className = "beard";".

Então temos essa 
, flutuando pelo espaço.

Passo final, fixá-la no corpo.

Certo, basicamente fizemos em JavaScript
o que tinhamos feito em HTML,

Agora podemos apagar esse HTML.

Agora você deve pausar o passo-a-passo
e tentar clicar no Winston.

Veja o que acontece.

Você viu um folículo de barba aparecer?

E você tentar clicar várias vezes ?

Se sim, provavelmente percebeu que 
o segundo click não fez nada.

Ou pelo menos pareceu que não fez nada.

Isso porque todas as  tem o mesmo
valor para "top" e "left",

Então as novas somente são 
empilhadas uma encima da outra.

Queremos que a  seja 
criada onde tiver um click.

Como descobrimos 
onde o mouse está ?

Como se sabe, o navegador
grava muitas informações.

Cada vez que qualquer evento 
de usuário ocorre, como a localização.

E o navegador te passa essa
informação toda vez

chamando sua função do evento listner.

Mas onde, como, podemos 
obter essa informação incrível ?

Vou digitar uma letra, 
pra te dar dica.

Esse 'e' aqui, é o objeto de 
informação do evento.

E o navegador envia isso como o 
primeiro argumento sempre que chama

uma função que capta eventos.

Não precisávamos disso antes, então não 
me preocupei com a lista de argumentos.

Mas agora que vamos usá-la,
Vou dar um nome a ela para ficar

mais fácil referenciar dentro da função.

Em JavaScript, uma função pode ser
chamada com qualquer quantidade

de argumentos, mesmo se a função 
não fizer referência a nenhum deles.

Então sempre estamos recebendo essa 
informação, apenas não sabíamos disso.

Agora vou imprimir a mensagem 
`e`:`console.log(e)`.

Pare o passo-a-passo, clique no
Winston e verifique seu console.

Você deverá ver o objeto 
de evento na tela,

e navegar por todas as
propriedades dele.

Há duas propriedades do evento em 
particular que estamos muito interessados.

"clientX" e "clientY".

Elas gravam as coordenadas x e y
do evento, e é isso que nós vamos usar.

para posicionar a barba.

vamos configurar o começo da barba igual a
"e.clientY", mais "px", por unidades.

E a esquerda igual a "e.clientX", 
mais "px" por unidades.

Agora pause e tente o mouse
sobre a imagem.

Desenhe a barba do Winston.

Bem legal, não ?

Aposto que você pensou em um monte 
de desenhos legais que você pode fazer,

usando "clientX" e "clientY".

E como você pode ver no console,
tem monte de outras propriedades

No objeto de evento que você
também pode usar.

O mais últil, creio, que
os referentes ao teclado.

Então você pode descobrir 
que teclas o usuário pressionou.

quando ocorreu o evento,
e usar isso para fazer uma

interface acessível por teclado, 
ou um jogo bem divertido.

Mais uma coisa.

Você não precisa chamar o 
argumento de "e".

Isso é típico, mas ele também pode ser 
chamado de "evt", ou "event".

Não importa como você chama 
isso, desde que se refira ao

ao primeiro argumento que o 
navegador passa para a sua função,

e desde que você faça a referência
do mesmo modo depois.

Se você está tendo problema com 
isso, use o log do console para

depurar a aplicação e entender
o que está acontecendo.

Quando você é um desenvolvedor web,

O console é o seu 
melhor amigo use-o!

[Legendado por Valter Bigeli]
[Revisado por Paulo Trentin]