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!