WEBVTT

00:00:00.766 --> 00:00:04.892
Mam tu stronę z portretem Winstona.
Robi się zimno,

00:00:05.034 --> 00:00:08.753
w dodatku Winston się starzeje,
więc chciałby mieć brodę.

00:00:08.853 --> 00:00:12.376
Mogłabym narysować ją sama,
ale będzie fajniej,

00:00:12.543 --> 00:00:16.346
jeśli brodę będą dorabiać
użytkownicy. Taką, jak zechcą:

00:00:16.525 --> 00:00:19.899
długą, a może parodniowy zarost...

00:00:21.014 --> 00:00:22.175
Jak to zrobić?

00:00:23.550 --> 00:00:29.001
Jeden sposób - to dodać nasłuch
zdarzenia do "mouseMove" na obrazie.

00:00:29.125 --> 00:00:31.094
Funkcja zostanie przywołana zawsze,

00:00:31.194 --> 00:00:34.472
gdy użytkownik przesunie myszkę
po twarzy Winstona.

00:00:34.614 --> 00:00:38.034
Zróbmy to,
korzystając z nowo nabytej wiedzy.

00:00:38.169 --> 00:00:41.241
Krok pierwszy
- to znaleźć element, obraz.

00:00:41.440 --> 00:00:44.442
"var face = document"...

00:00:44.626 --> 00:00:48.413
"getElementById("face")".

00:00:48.513 --> 00:00:50.433
Ładne ID!

00:00:50.570 --> 00:00:53.847
Krok drugi:
zdefiniować wywołanie zwrotne.

00:00:54.056 --> 00:00:58.374
Zaczniemy od czegoś prostego,
żeby zobaczyć, czy działa,

00:00:58.534 --> 00:01:01.563
a potem sprawimy,
że funkcja będzie robić więcej.

00:01:01.663 --> 00:01:06.441
"document.getElementById("message")"...

00:01:06.583 --> 00:01:11.959
".textContent + = "mooove".

00:01:12.059 --> 00:01:13.267
Dobrze.

00:01:13.410 --> 00:01:17.904
Krok ostatni - to połączyć to z tym,

00:01:18.046 --> 00:01:22.012
dla pewności, że funkcja zostanie
przywołana po zdarzeniu "mouseMove".

00:01:22.198 --> 00:01:27.802
Napiszemy więc: "face.
addEventListener("mousemove"),

00:01:27.944 --> 00:01:32.338
a potem dodamy nazwę funkcji,
"onMouseMove".

00:01:32.438 --> 00:01:34.319
Teraz zatrzymajcie film

00:01:34.429 --> 00:01:39.150
i spróbujcie przesunąć myszkę
po twarzy Winstona. Widzicie tekst?

00:01:39.250 --> 00:01:40.686
Okej.

00:01:40.857 --> 00:01:44.071
Miejmy nadzieję,
że widzieliście, jak to działa.

00:01:44.241 --> 00:01:47.313
Ale nie to ma robić
nasz detektor zdarzeń.

00:01:47.413 --> 00:01:50.178
Chcemy, by rysował, a nie pisał tekst.

00:01:50.385 --> 00:01:53.452
Jak się rysuje
na stronie internetowej?

00:01:53.656 --> 00:01:56.642
Możemy wpisać tag "canvas"

00:01:56.742 --> 00:02:00.937
i rysować na nim piksele,
jak w programach z Processing JS.

00:02:01.079 --> 00:02:03.383
Ale my rysujemy tylko brodę,

00:02:03.554 --> 00:02:06.733
czyli czarne kropki.

00:02:06.910 --> 00:02:10.437
Stworzymy więc "div"
dla każdej kropki

00:02:10.550 --> 00:02:13.909
i umieścimy je za pomocą
pozycjonowania absolutnego.

00:02:14.078 --> 00:02:18.298
Pokażę to na przykładzie
jednego włoska.

00:02:18.398 --> 00:02:21.458
Zrobię "div" z klasą "broda".

00:02:21.558 --> 00:02:25.654
I mam dobre CSS
do nadania stylu tej brodzie.

00:02:25.796 --> 00:02:28.491
Wpiszę to tutaj.

00:02:30.024 --> 00:02:31.812
Poprawmy to.

00:02:31.968 --> 00:02:36.688
Jak widać - czarne tło,
5 pikseli na 5...

00:02:36.860 --> 00:02:40.658
Broda powinna być okrągła.

00:02:40.814 --> 00:02:44.568
Używamy schematu
pozycjonowania absolutnego.

00:02:45.256 --> 00:02:48.391
Teraz "div" pojawia się pod obrazem.

00:02:48.521 --> 00:02:51.316
Jak zrobić, by pokazało się na twarzy?

00:02:51.565 --> 00:02:53.615
Stosujemy pozycjonowanie absolutne,

00:02:53.755 --> 00:02:57.098
czyli powinniśmy użyć
własności "top" i "left",

00:02:57.225 --> 00:03:01.765
by określić,
gdzie ma się znaleźć broda.

00:03:01.918 --> 00:03:04.064
Napiszmy: "top: 80px",

00:03:04.222 --> 00:03:07.756
a potem "left:15px".

00:03:07.891 --> 00:03:08.940
Pięknie!

00:03:09.916 --> 00:03:13.886
Skoro to działa w HTML,
niech zadziała też w JavaScript,

00:03:14.006 --> 00:03:18.912
by użytkownik dynamicznie tworzył "div"
za każdym razem, gdy poruszy myszką.

00:03:19.012 --> 00:03:23.128
Wracamy do funkcji
wywołania zwrotnego.

00:03:23.250 --> 00:03:25.217
Po pierwsze, tworzymy "div",

00:03:25.354 --> 00:03:30.986
co możemy zrobić funkcją
"document.createElement()".

00:03:31.086 --> 00:03:33.577
Teraz będzie to "div".

00:03:33.717 --> 00:03:36.154
Po drugie, dodajemy tę klasę:

00:03:36.276 --> 00:03:39.289
beard.className = "beard".

00:03:39.405 --> 00:03:42.284
Mamy więc "div",
które unosi się w przestrzeni.

00:03:42.420 --> 00:03:45.906
Ostatni krok
- przyłączyć to do treści.

00:03:47.170 --> 00:03:50.202
No dobrze.
Zrobiliśmy w JavaScript to,

00:03:50.384 --> 00:03:53.996
co wcześniej w HTML,
więc HTML możemy już skasować.

00:03:55.357 --> 00:03:58.840
Zatrzymajcie odtwarzanie
i kliknijcie na Winstona.

00:03:59.002 --> 00:04:00.681
Zobaczcie, co się stanie.

00:04:02.671 --> 00:04:07.269
Widzieliście, że pokazał się zarost?
A próbowaliście kliknąć kilka razy?

00:04:07.381 --> 00:04:11.219
Jeśli tak, to zauważyliście,
że 2. kliknięcie niczego nie zmieniło,

00:04:11.352 --> 00:04:13.678
a przynajmniej tak wam się zdawało.

00:04:13.770 --> 00:04:18.182
To dlatego, że każde "div"
ma te same właściwości "góra" i "lewo".

00:04:18.250 --> 00:04:21.178
Nowe wersje zbierają się na starych.

00:04:21.313 --> 00:04:26.149
Chcemy, żeby "div" pokazywało się tam,
gdzie akurat jest myszka użytkownika.

00:04:26.249 --> 00:04:29.831
Ale jak się tego dowiemy?

00:04:30.896 --> 00:04:34.575
Otóż przeglądarka
zapisuje wiele informacji,

00:04:34.623 --> 00:04:38.198
gdy nastąpi zdarzenie użytkownika.
Np. gdzie to się stało.

00:04:38.306 --> 00:04:40.391
Przeglądarka podaje tę informację,

00:04:40.458 --> 00:04:43.009
gdy przywoła
funkcję z detektora zdarzeń.

00:04:43.109 --> 00:04:46.859
Ale skąd weźmiemy
te fantastyczne informacje?

00:04:47.047 --> 00:04:50.063
Dla podpowiedzi - jedna litera.

00:04:51.665 --> 00:04:56.054
"e" to obiekt
z informacjami o zdarzeniu.

00:04:56.142 --> 00:04:58.771
Przeglądarka wysyła go
jako 1. argument,

00:04:58.871 --> 00:05:01.822
gdy nastąpi wywołanie zwrotne
detektora zdarzeń.

00:05:01.922 --> 00:05:06.170
Nie potrzebowaliśmy tego przedtem,
więc nie pisałam list argumentów.

00:05:06.259 --> 00:05:08.788
Ale skoro będziemy
tego używać, nadam nazwę,

00:05:08.921 --> 00:05:11.727
żeby było łatwo
rozpoznać to w funkcji.

00:05:11.805 --> 00:05:15.621
Pamiętacie, że w JS można przywołać
funkcję z wieloma argumentami,

00:05:15.721 --> 00:05:18.809
nawet jeśli funkcja
z żadnego nie korzysta.

00:05:18.970 --> 00:05:22.989
Zawsze otrzymywaliśmy te informacje,
tylko o tym nie wiedzieliśmy.

00:05:23.097 --> 00:05:28.632
Teraz loguję "e": console.log(e).

00:05:28.709 --> 00:05:32.300
Zatrzymajcie film, kliknijcie
na Winstona i zobaczcie konsolę.

00:05:32.392 --> 00:05:37.317
Powinien tam być zalogowany obiekt
zdarzenia. Można przejrzeć właściwości.

00:05:38.648 --> 00:05:43.516
Są tu dwie właściwości,
które szczególnie nas interesują:

00:05:43.662 --> 00:05:45.745
"clientX" i "clientY".

00:05:45.858 --> 00:05:47.984
Zapisują "x" i "y" zdarzenia.

00:05:48.084 --> 00:05:51.189
Użyjemy tego,
próbując pozycjonować brodę.

00:05:51.316 --> 00:05:54.591
Niech góra brody

00:05:54.754 --> 00:05:59.189
równa się "e.clientY",

00:05:59.258 --> 00:06:02.608
plus "px" - "piksel", czyli jednostka.

00:06:02.719 --> 00:06:06.387
A lewa strona to:

00:06:06.556 --> 00:06:10.149
"e.clientX" plus jednostka.

00:06:11.345 --> 00:06:14.469
Teraz przerwijcie
i spróbujcie pojeździć myszką.

00:06:14.569 --> 00:06:16.503
Narysujcie Winstonowi brodę.

00:06:18.090 --> 00:06:21.820
Fajnie, co?
Pewnie już wyobrażacie sobie zabawę

00:06:21.930 --> 00:06:25.451
i malowanie w aplikacjach
za pomocą "clientX" i "clientY".

00:06:25.569 --> 00:06:31.292
Jak widzieliście, w konsoli jest sporo
innych własności obiektu zdarzenia.

00:06:31.381 --> 00:06:35.319
Najpraktyczniejsze są
te związane z klawiaturą.

00:06:35.441 --> 00:06:39.360
Znajdziecie klawisze, które wciskał
użytkownik w chwili zdarzenia

00:06:39.523 --> 00:06:44.863
i użyjecie ich do stworzenia interfejsu
dostępnego z klawiatury lub fajnej gry.

00:06:44.936 --> 00:06:47.301
Och, i jeszcze jedno.

00:06:47.421 --> 00:06:50.226
Nie musicie nazywać
tego argumentu "e".

00:06:50.349 --> 00:06:53.322
To typowe,
ale niektórzy projektanci stron

00:06:53.477 --> 00:06:57.518
piszą "evt" lub "event".

00:06:57.703 --> 00:07:01.651
Nieważne, jaką wybierzecie nazwę,
oby odnosiła się do 1. argumentu,

00:07:01.752 --> 00:07:07.618
który przeglądarka wprowadza w funkcję,
a potem wy możecie się do tego odwołać.

00:07:10.196 --> 00:07:11.589
Jeśli macie z tym kłopot,

00:07:11.713 --> 00:07:15.768
użyjcie polecenia "console.log",
by debugować.

00:07:15.861 --> 00:07:21.388
Jeśli jesteście projektantem stron,
konsola to wasza przyjaciółka!