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]