0:00:00.640,0:00:05.503
Zrobiłam tę "nudną stronę"[br]do zabawy.

0:00:05.603,0:00:08.312
Na razie rzeczywiście jest nudna!

0:00:08.460,0:00:10.611
Nie zawiera żadnej treści,

0:00:10.747,0:00:15.905
a ten przycisk[br]nie reaguje na kliknięcie.

0:00:16.075,0:00:18.692
Sprawmy, żeby był interaktywny.

0:00:18.773,0:00:20.236
Gdy użytkownik klika,

0:00:20.282,0:00:24.055
tekst na przycisku[br]powinien się zmienić.

0:00:24.169,0:00:29.977
Pierwszy krok - to znaleźć element,[br]który ma prowadzić nasłuch zdarzeń.

0:00:30.092,0:00:32.506
W tym przypadku - to przycisk.

0:00:32.630,0:00:35.294
Rozpoznaje kliknięcie.

0:00:35.443,0:00:39.543
Stworzymy zmienną "clickerButton"

0:00:39.627,0:00:44.884
i użyjemy polecenia[br]"document.getElementById",

0:00:45.473,0:00:49.162
żeby pozyskało element[br]i przechowywało go w tej zmiennej.

0:00:49.300,0:00:53.196
Następny krok[br]- to zdefiniować funkcję,

0:00:53.301,0:00:57.783
która będzie przywołana[br]zaraz po zdarzeniu "kliknięcie".

0:00:57.875,0:01:01.695
Nazwę ją "onButtonClick"[br](kliknięcie w przycisk)...

0:01:02.722,0:01:06.678
i... umieszczę tu[br]tylko pustą funkcję...

0:01:06.815,0:01:12.005
no i muszę zawrzeć coś wewnątrz.[br]Bo funkcja nie zrobi nic ciekawego.

0:01:12.143,0:01:16.602
Żeby zmienić tekst na przycisku,[br]możemy użyć zmiennej "clickerButton"

0:01:16.739,0:01:19.598
i ustalić "textContent"[br](zawartość tekstową).

0:01:19.689,0:01:23.142
"No, no! Kliknęliście na mnie!".

0:01:23.279,0:01:25.658
Przycisk się ucieszył!

0:01:26.889,0:01:32.810
Kodu jest mało, ale później zrobimy coś[br]skomplikowanego. Gdy to zacznie działać.

0:01:32.910,0:01:37.547
Kody, które do tej pory pisaliśmy,[br]tylko definiowały zmienne.

0:01:37.616,0:01:41.865
Nadal więc nie ma reakcji[br]na kliknięcie na przycisk.

0:01:42.007,0:01:44.888
Ostateczny krok,[br]który to wszystko połączy,

0:01:45.048,0:01:46.788
to powiedzieć przeglądarce,

0:01:46.855,0:01:50.132
że ma przywołać[br]zdefiniowaną przez nas funkcję,

0:01:50.262,0:01:54.590
kiedy tylko nastąpi[br]kliknięcie na przycisk.

0:01:54.721,0:01:58.909
Zrobimy to, przywołując "add event[br]listener" (dodaj detektor zdarzeń)

0:01:59.065,0:02:00.581
na elemencie "przycisk".

0:02:00.757,0:02:05.945
Piszemy:[br]"clickerButton.addeventlistener".

0:02:06.084,0:02:10.681
Musimy wprowadzić dwa argumenty.

0:02:10.750,0:02:14.582
Pierwszy to nazwa zdarzenia:[br]"kliknięcie",

0:02:14.706,0:02:18.135
a drugi - to funkcja,[br]którą chcemy przywołać,

0:02:18.227,0:02:21.664
gdy dochodzi do kliknięcia:[br]"onButtonClick".

0:02:22.961,0:02:26.610
Teraz zatrzymajcie film[br]i kliknijcie na przycisk.

0:02:28.909,0:02:32.021
Udało się? Mam nadzieję![br]U mnie - tak.

0:02:32.926,0:02:38.151
Pomówmy więcej o działaniu tej funkcji,[br]bo sprawa jest dość skomplikowana.

0:02:38.281,0:02:42.307
Nazywamy tę funkcję "eventListener"[br](detektorem zdarzeń),

0:02:42.420,0:02:46.881
lub "callback" (wywołaniem zwrotnym),[br]bo w ten sposób jej używamy.

0:02:47.016,0:02:50.852
Życzymy sobie, by była[br]przywoływana tylko po zdarzeniu.

0:02:50.904,0:02:55.658
Na ogół nie chcemy, by była[br]przywoływana podczas ładowania strony.

0:02:55.797,0:02:58.236
A gdybyśmy tego chcieli,

0:02:58.336,0:03:01.928
musielibyśmy dodać[br]taki wiersz na dole.

0:03:03.739,0:03:06.148
Zwróćcie uwagę na nawiasy.

0:03:06.255,0:03:09.585
Pamiętajcie: za pomocą nawiasów[br]przywołujemy funkcję.

0:03:09.685,0:03:11.541
Jeśli je zostawimy tak, jak są,

0:03:11.641,0:03:15.512
nie przywołamy funkcji,[br]tylko odniesiemy się do niej.

0:03:15.599,0:03:18.995
To właśnie robimy,[br]gdy wprowadzamy to jako argument.

0:03:19.075,0:03:21.042
Po prostu mówimy przeglądarce:

0:03:21.142,0:03:25.501
"Tu jest funkcja, którą masz[br]przywołać później, ale nie teraz".

0:03:27.353,0:03:32.439
Pamiętajcie, żeby nie dawać nawiasów[br]po nazwie funkcji tutaj,

0:03:32.485,0:03:37.849
bo wtedy będziecie tylko wprowadzać[br]wartość zwrotną funkcji, nie funkcję.

0:03:37.940,0:03:42.075
Gdybym przypadkiem to zrobiła,[br]tekst na przycisku zmieniłby się

0:03:42.170,0:03:44.762
podczas ładowania,[br]ale później już nie.

0:03:44.862,0:03:48.778
Żeby to naprawić, usuwam nawiasy,[br]które przypadkowo dodałam,

0:03:48.878,0:03:52.734
i teraz moja funkcja[br]zostaje przywołana tylko kliknięciem.

0:03:53.855,0:03:56.425
Inny sposób,[br]w który możemy to osiągnąć,

0:03:56.525,0:04:02.509
to wprowadzić do metody[br]funkcję anonimową.

0:04:02.602,0:04:06.015
Taka funkcja nie ma nazwy.

0:04:06.089,0:04:10.264
Piszemy po prostu "inline".

0:04:10.387,0:04:15.001
Skopiuję i wkleję wiersz[br]"addEventListener"

0:04:15.098,0:04:20.202
i pokażę wam tę opcję obok,[br]żebyście zobaczyli, o co mi chodzi.

0:04:20.380,0:04:22.537
Skasuję nazwę funkcji tutaj

0:04:22.637,0:04:26.165
i zastąpię ją funkcją z definicją.

0:04:26.265,0:04:29.885
Wklejam to tutaj.

0:04:31.185,0:04:34.329
Dobrze. Te dwie linie kodu

0:04:34.429,0:04:37.779
robią dokładnie to samo.

0:04:37.879,0:04:39.707
No, prawie.

0:04:39.817,0:04:44.235
Obie wprowadzają funkcję[br]z tym samym kodem wewnątrz.

0:04:44.344,0:04:48.275
Różnica polega na tym, że pierwsza[br]wprowadza nazwaną funkcję,

0:04:48.323,0:04:50.152
którą określiliśmy powyżej,

0:04:50.244,0:04:54.823
a druga definiuje[br]funkcję anonimową "inline",

0:04:54.977,0:04:58.237
jednocześnie z uruchomieniem jej.

0:04:58.361,0:04:59.939
Obie metody się sprawdzają.

0:05:00.008,0:05:02.764
Wielu projektantów stron[br]woli funkcje nazwane,

0:05:02.866,0:05:06.874
bo kod jest czytelniejszy[br]i nieco łatwiejszy do debugowania.

0:05:07.005,0:05:09.863
Możecie przywołać nazwane funkcje sami

0:05:09.963,0:05:13.353
- kiedy indziej lub w związku[br]z innymi zdarzeniami.

0:05:13.453,0:05:17.569
Od was zależy, czego użyjecie.[br]Nie stosujcie obu metod naraz,

0:05:17.669,0:05:21.712
bo przeglądarka przywoła[br]obie funkcje, gdy nastąpi kliknięcie.

0:05:21.799,0:05:25.892
A nie ma sensu[br]przywoływać tej funkcji dwa razy.

0:05:25.992,0:05:29.096
Skasuję wersję z funkcją anonimową,

0:05:29.231,0:05:30.907
bo wolę pierwszy sposób.

0:05:32.112,0:05:35.305
Możecie dużo zrobić,[br]umiejąc dodawać detektory zdarzeń.

0:05:35.405,0:05:37.873
Dodacie je w innych częściach strony,

0:05:38.012,0:05:41.635
będziecie nasłuchiwać zdarzeń...[br]O tym - następnym razem.

0:05:41.693,0:05:45.814
I możecie modyfikować DOM[br]na wszystkie sposoby, które już znacie.

0:05:45.924,0:05:49.715
Nie ograniczajcie się do elementu,[br]z którym zaszła interakcja.

0:05:49.811,0:05:52.502
Możecie modyfikować[br]wszystko na stronie.

0:05:52.646,0:05:55.845
Wypróbujcie to.[br]Przekonajcie się, co można zrobić.