Mam tu stronę z portretem Winstona.
Robi się zimno,

w dodatku Winston się starzeje,
więc chciałby mieć brodę.

Mogłabym narysować ją sama,
ale będzie fajniej,

jeśli brodę będą dorabiać
użytkownicy. Taką, jak zechcą:

długą, a może parodniowy zarost...

Jak to zrobić?

Jeden sposób - to dodać nasłuch
zdarzenia do "mouseMove" na obrazie.

Funkcja zostanie przywołana zawsze,

gdy użytkownik przesunie myszkę
po twarzy Winstona.

Zróbmy to,
korzystając z nowo nabytej wiedzy.

Krok pierwszy
- to znaleźć element, obraz.

"var face = document"...

"getElementById("face")".

Ładne ID!

Krok drugi:
zdefiniować wywołanie zwrotne.

Zaczniemy od czegoś prostego,
żeby zobaczyć, czy działa,

a potem sprawimy,
że funkcja będzie robić więcej.

"document.getElementById("message")"...

".textContent + = "mooove".

Dobrze.

Krok ostatni - to połączyć to z tym,

dla pewności, że funkcja zostanie
przywołana po zdarzeniu "mouseMove".

Napiszemy więc: "face.
addEventListener("mousemove"),

a potem dodamy nazwę funkcji,
"onMouseMove".

Teraz zatrzymajcie film

i spróbujcie przesunąć myszkę
po twarzy Winstona. Widzicie tekst?

Okej.

Miejmy nadzieję,
że widzieliście, jak to działa.

Ale nie to ma robić
nasz detektor zdarzeń.

Chcemy, by rysował, a nie pisał tekst.

Jak się rysuje
na stronie internetowej?

Możemy wpisać tag "canvas"

i rysować na nim piksele,
jak w programach z Processing JS.

Ale my rysujemy tylko brodę,

czyli czarne kropki.

Stworzymy więc "div"
dla każdej kropki

i umieścimy je za pomocą
pozycjonowania absolutnego.

Pokażę to na przykładzie
jednego włoska.

Zrobię "div" z klasą "broda".

I mam dobre CSS
do nadania stylu tej brodzie.

Wpiszę to tutaj.

Poprawmy to.

Jak widać - czarne tło,
5 pikseli na 5...

Broda powinna być okrągła.

Używamy schematu
pozycjonowania absolutnego.

Teraz "div" pojawia się pod obrazem.

Jak zrobić, by pokazało się na twarzy?

Stosujemy pozycjonowanie absolutne,

czyli powinniśmy użyć
własności "top" i "left",

by określić,
gdzie ma się znaleźć broda.

Napiszmy: "top: 80px",

a potem "left:15px".

Pięknie!

Skoro to działa w HTML,
niech zadziała też w JavaScript,

by użytkownik dynamicznie tworzył "div"
za każdym razem, gdy poruszy myszką.

Wracamy do funkcji
wywołania zwrotnego.

Po pierwsze, tworzymy "div",

co możemy zrobić funkcją
"document.createElement()".

Teraz będzie to "div".

Po drugie, dodajemy tę klasę:

beard.className = "beard".

Mamy więc "div",
które unosi się w przestrzeni.

Ostatni krok
- przyłączyć to do treści.

No dobrze.
Zrobiliśmy w JavaScript to,

co wcześniej w HTML,
więc HTML możemy już skasować.

Zatrzymajcie odtwarzanie
i kliknijcie na Winstona.

Zobaczcie, co się stanie.

Widzieliście, że pokazał się zarost?
A próbowaliście kliknąć kilka razy?

Jeśli tak, to zauważyliście,
że 2. kliknięcie niczego nie zmieniło,

a przynajmniej tak wam się zdawało.

To dlatego, że każde "div"
ma te same właściwości "góra" i "lewo".

Nowe wersje zbierają się na starych.

Chcemy, żeby "div" pokazywało się tam,
gdzie akurat jest myszka użytkownika.

Ale jak się tego dowiemy?

Otóż przeglądarka
zapisuje wiele informacji,

gdy nastąpi zdarzenie użytkownika.
Np. gdzie to się stało.

Przeglądarka podaje tę informację,

gdy przywoła
funkcję z detektora zdarzeń.

Ale skąd weźmiemy
te fantastyczne informacje?

Dla podpowiedzi - jedna litera.

"e" to obiekt
z informacjami o zdarzeniu.

Przeglądarka wysyła go
jako 1. argument,

gdy nastąpi wywołanie zwrotne
detektora zdarzeń.

Nie potrzebowaliśmy tego przedtem,
więc nie pisałam list argumentów.

Ale skoro będziemy
tego używać, nadam nazwę,

żeby było łatwo
rozpoznać to w funkcji.

Pamiętacie, że w JS można przywołać
funkcję z wieloma argumentami,

nawet jeśli funkcja
z żadnego nie korzysta.

Zawsze otrzymywaliśmy te informacje,
tylko o tym nie wiedzieliśmy.

Teraz loguję "e": console.log(e).

Zatrzymajcie film, kliknijcie
na Winstona i zobaczcie konsolę.

Powinien tam być zalogowany obiekt
zdarzenia. Można przejrzeć właściwości.

Są tu dwie właściwości,
które szczególnie nas interesują:

"clientX" i "clientY".

Zapisują "x" i "y" zdarzenia.

Użyjemy tego,
próbując pozycjonować brodę.

Niech góra brody

równa się "e.clientY",

plus "px" - "piksel", czyli jednostka.

A lewa strona to:

"e.clientX" plus jednostka.

Teraz przerwijcie
i spróbujcie pojeździć myszką.

Narysujcie Winstonowi brodę.

Fajnie, co?
Pewnie już wyobrażacie sobie zabawę

i malowanie w aplikacjach
za pomocą "clientX" i "clientY".

Jak widzieliście, w konsoli jest sporo
innych własności obiektu zdarzenia.

Najpraktyczniejsze są
te związane z klawiaturą.

Znajdziecie klawisze, które wciskał
użytkownik w chwili zdarzenia

i użyjecie ich do stworzenia interfejsu
dostępnego z klawiatury lub fajnej gry.

Och, i jeszcze jedno.

Nie musicie nazywać
tego argumentu "e".

To typowe,
ale niektórzy projektanci stron

piszą "evt" lub "event".

Nieważne, jaką wybierzecie nazwę,
oby odnosiła się do 1. argumentu,

który przeglądarka wprowadza w funkcję,
a potem wy możecie się do tego odwołać.

Jeśli macie z tym kłopot,

użyjcie polecenia "console.log",
by debugować.

Jeśli jesteście projektantem stron,
konsola to wasza przyjaciółka!