0:00:00.766,0:00:04.892
Mam tu stronę z portretem Winstona.[br]Robi się zimno,

0:00:05.034,0:00:08.753
w dodatku Winston się starzeje,[br]więc chciałby mieć brodę.

0:00:08.853,0:00:12.376
Mogłabym narysować ją sama,[br]ale będzie fajniej,

0:00:12.543,0:00:16.346
jeśli brodę będą dorabiać[br]użytkownicy. Taką, jak zechcą:

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

0:00:21.014,0:00:22.175
Jak to zrobić?

0:00:23.550,0:00:29.001
Jeden sposób - to dodać nasłuch[br]zdarzenia do "mouseMove" na obrazie.

0:00:29.125,0:00:31.094
Funkcja zostanie przywołana zawsze,

0:00:31.194,0:00:34.472
gdy użytkownik przesunie myszkę[br]po twarzy Winstona.

0:00:34.614,0:00:38.034
Zróbmy to,[br]korzystając z nowo nabytej wiedzy.

0:00:38.169,0:00:41.241
Krok pierwszy[br]- to znaleźć element, obraz.

0:00:41.440,0:00:44.442
"var face = document"...

0:00:44.626,0:00:48.413
"getElementById("face")".

0:00:48.513,0:00:50.433
Ładne ID!

0:00:50.570,0:00:53.847
Krok drugi:[br]zdefiniować wywołanie zwrotne.

0:00:54.056,0:00:58.374
Zaczniemy od czegoś prostego,[br]żeby zobaczyć, czy działa,

0:00:58.534,0:01:01.563
a potem sprawimy,[br]że funkcja będzie robić więcej.

0:01:01.663,0:01:06.441
"document.getElementById("message")"...

0:01:06.583,0:01:11.959
".textContent + = "mooove".

0:01:12.059,0:01:13.267
Dobrze.

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

0:01:18.046,0:01:22.012
dla pewności, że funkcja zostanie[br]przywołana po zdarzeniu "mouseMove".

0:01:22.198,0:01:27.802
Napiszemy więc: "face.[br]addEventListener("mousemove"),

0:01:27.944,0:01:32.338
a potem dodamy nazwę funkcji,[br]"onMouseMove".

0:01:32.438,0:01:34.319
Teraz zatrzymajcie film

0:01:34.429,0:01:39.150
i spróbujcie przesunąć myszkę[br]po twarzy Winstona. Widzicie tekst?

0:01:39.250,0:01:40.686
Okej.

0:01:40.857,0:01:44.071
Miejmy nadzieję,[br]że widzieliście, jak to działa.

0:01:44.241,0:01:47.313
Ale nie to ma robić[br]nasz detektor zdarzeń.

0:01:47.413,0:01:50.178
Chcemy, by rysował, a nie pisał tekst.

0:01:50.385,0:01:53.452
Jak się rysuje[br]na stronie internetowej?

0:01:53.656,0:01:56.642
Możemy wpisać tag "canvas"

0:01:56.742,0:02:00.937
i rysować na nim piksele,[br]jak w programach z Processing JS.

0:02:01.079,0:02:03.383
Ale my rysujemy tylko brodę,

0:02:03.554,0:02:06.733
czyli czarne kropki.

0:02:06.910,0:02:10.437
Stworzymy więc "div"[br]dla każdej kropki

0:02:10.550,0:02:13.909
i umieścimy je za pomocą[br]pozycjonowania absolutnego.

0:02:14.078,0:02:18.298
Pokażę to na przykładzie[br]jednego włoska.

0:02:18.398,0:02:21.458
Zrobię "div" z klasą "broda".

0:02:21.558,0:02:25.654
I mam dobre CSS[br]do nadania stylu tej brodzie.

0:02:25.796,0:02:28.491
Wpiszę to tutaj.

0:02:30.024,0:02:31.812
Poprawmy to.

0:02:31.968,0:02:36.688
Jak widać - czarne tło,[br]5 pikseli na 5...

0:02:36.860,0:02:40.658
Broda powinna być okrągła.

0:02:40.814,0:02:44.568
Używamy schematu[br]pozycjonowania absolutnego.

0:02:45.256,0:02:48.391
Teraz "div" pojawia się pod obrazem.

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

0:02:51.565,0:02:53.615
Stosujemy pozycjonowanie absolutne,

0:02:53.755,0:02:57.098
czyli powinniśmy użyć[br]własności "top" i "left",

0:02:57.225,0:03:01.765
by określić,[br]gdzie ma się znaleźć broda.

0:03:01.918,0:03:04.064
Napiszmy: "top: 80px",

0:03:04.222,0:03:07.756
a potem "left:15px".

0:03:07.891,0:03:08.940
Pięknie!

0:03:09.916,0:03:13.886
Skoro to działa w HTML,[br]niech zadziała też w JavaScript,

0:03:14.006,0:03:18.912
by użytkownik dynamicznie tworzył "div"[br]za każdym razem, gdy poruszy myszką.

0:03:19.012,0:03:23.128
Wracamy do funkcji[br]wywołania zwrotnego.

0:03:23.250,0:03:25.217
Po pierwsze, tworzymy "div",

0:03:25.354,0:03:30.986
co możemy zrobić funkcją[br]"document.createElement()".

0:03:31.086,0:03:33.577
Teraz będzie to "div".

0:03:33.717,0:03:36.154
Po drugie, dodajemy tę klasę:

0:03:36.276,0:03:39.289
beard.className = "beard".

0:03:39.405,0:03:42.284
Mamy więc "div",[br]które unosi się w przestrzeni.

0:03:42.420,0:03:45.906
Ostatni krok[br]- przyłączyć to do treści.

0:03:47.170,0:03:50.202
No dobrze.[br]Zrobiliśmy w JavaScript to,

0:03:50.384,0:03:53.996
co wcześniej w HTML,[br]więc HTML możemy już skasować.

0:03:55.357,0:03:58.840
Zatrzymajcie odtwarzanie[br]i kliknijcie na Winstona.

0:03:59.002,0:04:00.681
Zobaczcie, co się stanie.

0:04:02.671,0:04:07.269
Widzieliście, że pokazał się zarost?[br]A próbowaliście kliknąć kilka razy?

0:04:07.381,0:04:11.219
Jeśli tak, to zauważyliście,[br]że 2. kliknięcie niczego nie zmieniło,

0:04:11.352,0:04:13.678
a przynajmniej tak wam się zdawało.

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

0:04:18.250,0:04:21.178
Nowe wersje zbierają się na starych.

0:04:21.313,0:04:26.149
Chcemy, żeby "div" pokazywało się tam,[br]gdzie akurat jest myszka użytkownika.

0:04:26.249,0:04:29.831
Ale jak się tego dowiemy?

0:04:30.896,0:04:34.575
Otóż przeglądarka[br]zapisuje wiele informacji,

0:04:34.623,0:04:38.198
gdy nastąpi zdarzenie użytkownika.[br]Np. gdzie to się stało.

0:04:38.306,0:04:40.391
Przeglądarka podaje tę informację,

0:04:40.458,0:04:43.009
gdy przywoła[br]funkcję z detektora zdarzeń.

0:04:43.109,0:04:46.859
Ale skąd weźmiemy[br]te fantastyczne informacje?

0:04:47.047,0:04:50.063
Dla podpowiedzi - jedna litera.

0:04:51.665,0:04:56.054
"e" to obiekt[br]z informacjami o zdarzeniu.

0:04:56.142,0:04:58.771
Przeglądarka wysyła go[br]jako 1. argument,

0:04:58.871,0:05:01.822
gdy nastąpi wywołanie zwrotne[br]detektora zdarzeń.

0:05:01.922,0:05:06.170
Nie potrzebowaliśmy tego przedtem,[br]więc nie pisałam list argumentów.

0:05:06.259,0:05:08.788
Ale skoro będziemy[br]tego używać, nadam nazwę,

0:05:08.921,0:05:11.727
żeby było łatwo[br]rozpoznać to w funkcji.

0:05:11.805,0:05:15.621
Pamiętacie, że w JS można przywołać[br]funkcję z wieloma argumentami,

0:05:15.721,0:05:18.809
nawet jeśli funkcja[br]z żadnego nie korzysta.

0:05:18.970,0:05:22.989
Zawsze otrzymywaliśmy te informacje,[br]tylko o tym nie wiedzieliśmy.

0:05:23.097,0:05:28.632
Teraz loguję "e": console.log(e).

0:05:28.709,0:05:32.300
Zatrzymajcie film, kliknijcie[br]na Winstona i zobaczcie konsolę.

0:05:32.392,0:05:37.317
Powinien tam być zalogowany obiekt[br]zdarzenia. Można przejrzeć właściwości.

0:05:38.648,0:05:43.516
Są tu dwie właściwości,[br]które szczególnie nas interesują:

0:05:43.662,0:05:45.745
"clientX" i "clientY".

0:05:45.858,0:05:47.984
Zapisują "x" i "y" zdarzenia.

0:05:48.084,0:05:51.189
Użyjemy tego,[br]próbując pozycjonować brodę.

0:05:51.316,0:05:54.591
Niech góra brody

0:05:54.754,0:05:59.189
równa się "e.clientY",

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

0:06:02.719,0:06:06.387
A lewa strona to:

0:06:06.556,0:06:10.149
"e.clientX" plus jednostka.

0:06:11.345,0:06:14.469
Teraz przerwijcie[br]i spróbujcie pojeździć myszką.

0:06:14.569,0:06:16.503
Narysujcie Winstonowi brodę.

0:06:18.090,0:06:21.820
Fajnie, co?[br]Pewnie już wyobrażacie sobie zabawę

0:06:21.930,0:06:25.451
i malowanie w aplikacjach[br]za pomocą "clientX" i "clientY".

0:06:25.569,0:06:31.292
Jak widzieliście, w konsoli jest sporo[br]innych własności obiektu zdarzenia.

0:06:31.381,0:06:35.319
Najpraktyczniejsze są[br]te związane z klawiaturą.

0:06:35.441,0:06:39.360
Znajdziecie klawisze, które wciskał[br]użytkownik w chwili zdarzenia

0:06:39.523,0:06:44.863
i użyjecie ich do stworzenia interfejsu[br]dostępnego z klawiatury lub fajnej gry.

0:06:44.936,0:06:47.301
Och, i jeszcze jedno.

0:06:47.421,0:06:50.226
Nie musicie nazywać[br]tego argumentu "e".

0:06:50.349,0:06:53.322
To typowe,[br]ale niektórzy projektanci stron

0:06:53.477,0:06:57.518
piszą "evt" lub "event".

0:06:57.703,0:07:01.651
Nieważne, jaką wybierzecie nazwę,[br]oby odnosiła się do 1. argumentu,

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

0:07:10.196,0:07:11.589
Jeśli macie z tym kłopot,

0:07:11.713,0:07:15.768
użyjcie polecenia "console.log",[br]by debugować.

0:07:15.861,0:07:21.388
Jeśli jesteście projektantem stron,[br]konsola to wasza przyjaciółka!