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]