WEBVTT

00:00:00.640 --> 00:00:05.503
Zrobiłam tę "nudną stronę"
do zabawy.

00:00:05.603 --> 00:00:08.312
Na razie rzeczywiście jest nudna!

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

00:00:10.747 --> 00:00:15.905
a ten przycisk
nie reaguje na kliknięcie.

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

00:00:18.773 --> 00:00:20.236
Gdy użytkownik klika,

00:00:20.282 --> 00:00:24.055
tekst na przycisku
powinien się zmienić.

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

00:00:30.092 --> 00:00:32.506
W tym przypadku - to przycisk.

00:00:32.630 --> 00:00:35.294
Rozpoznaje kliknięcie.

00:00:35.443 --> 00:00:39.543
Stworzymy zmienną "clickerButton"

00:00:39.627 --> 00:00:44.884
i użyjemy polecenia
"document.getElementById",

00:00:45.473 --> 00:00:49.162
żeby pozyskało element
i przechowywało go w tej zmiennej.

00:00:49.300 --> 00:00:53.196
Następny krok
- to zdefiniować funkcję,

00:00:53.301 --> 00:00:57.783
która będzie przywołana
zaraz po zdarzeniu "kliknięcie".

00:00:57.875 --> 00:01:01.695
Nazwę ją "onButtonClick"
(kliknięcie w przycisk)...

00:01:02.722 --> 00:01:06.678
i... umieszczę tu
tylko pustą funkcję...

00:01:06.815 --> 00:01:12.005
no i muszę zawrzeć coś wewnątrz.
Bo funkcja nie zrobi nic ciekawego.

00:01:12.143 --> 00:01:16.602
Żeby zmienić tekst na przycisku,
możemy użyć zmiennej "clickerButton"

00:01:16.739 --> 00:01:19.598
i ustalić "textContent"
(zawartość tekstową).

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

00:01:23.279 --> 00:01:25.658
Przycisk się ucieszył!

00:01:26.889 --> 00:01:32.810
Kodu jest mało, ale później zrobimy coś
skomplikowanego. Gdy to zacznie działać.

00:01:32.910 --> 00:01:37.547
Kody, które do tej pory pisaliśmy,
tylko definiowały zmienne.

00:01:37.616 --> 00:01:41.865
Nadal więc nie ma reakcji
na kliknięcie na przycisk.

00:01:42.007 --> 00:01:44.888
Ostateczny krok,
który to wszystko połączy,

00:01:45.048 --> 00:01:46.788
to powiedzieć przeglądarce,

00:01:46.855 --> 00:01:50.132
że ma przywołać
zdefiniowaną przez nas funkcję,

00:01:50.262 --> 00:01:54.590
kiedy tylko nastąpi
kliknięcie na przycisk.

00:01:54.721 --> 00:01:58.909
Zrobimy to, przywołując "add event
listener" (dodaj detektor zdarzeń)

00:01:59.065 --> 00:02:00.581
na elemencie "przycisk".

00:02:00.757 --> 00:02:05.945
Piszemy:
"clickerButton.addeventlistener".

00:02:06.084 --> 00:02:10.681
Musimy wprowadzić dwa argumenty.

00:02:10.750 --> 00:02:14.582
Pierwszy to nazwa zdarzenia:
"kliknięcie",

00:02:14.706 --> 00:02:18.135
a drugi - to funkcja,
którą chcemy przywołać,

00:02:18.227 --> 00:02:21.664
gdy dochodzi do kliknięcia:
"onButtonClick".

00:02:22.961 --> 00:02:26.610
Teraz zatrzymajcie film
i kliknijcie na przycisk.

00:02:28.909 --> 00:02:32.021
Udało się? Mam nadzieję!
U mnie - tak.

00:02:32.926 --> 00:02:38.151
Pomówmy więcej o działaniu tej funkcji,
bo sprawa jest dość skomplikowana.

00:02:38.281 --> 00:02:42.307
Nazywamy tę funkcję "eventListener"
(detektorem zdarzeń),

00:02:42.420 --> 00:02:46.881
lub "callback" (wywołaniem zwrotnym),
bo w ten sposób jej używamy.

00:02:47.016 --> 00:02:50.852
Życzymy sobie, by była
przywoływana tylko po zdarzeniu.

00:02:50.904 --> 00:02:55.658
Na ogół nie chcemy, by była
przywoływana podczas ładowania strony.

00:02:55.797 --> 00:02:58.236
A gdybyśmy tego chcieli,

00:02:58.336 --> 00:03:01.928
musielibyśmy dodać
taki wiersz na dole.

00:03:03.739 --> 00:03:06.148
Zwróćcie uwagę na nawiasy.

00:03:06.255 --> 00:03:09.585
Pamiętajcie: za pomocą nawiasów
przywołujemy funkcję.

00:03:09.685 --> 00:03:11.541
Jeśli je zostawimy tak, jak są,

00:03:11.641 --> 00:03:15.512
nie przywołamy funkcji,
tylko odniesiemy się do niej.

00:03:15.599 --> 00:03:18.995
To właśnie robimy,
gdy wprowadzamy to jako argument.

00:03:19.075 --> 00:03:21.042
Po prostu mówimy przeglądarce:

00:03:21.142 --> 00:03:25.501
"Tu jest funkcja, którą masz
przywołać później, ale nie teraz".

00:03:27.353 --> 00:03:32.439
Pamiętajcie, żeby nie dawać nawiasów
po nazwie funkcji tutaj,

00:03:32.485 --> 00:03:37.849
bo wtedy będziecie tylko wprowadzać
wartość zwrotną funkcji, nie funkcję.

00:03:37.940 --> 00:03:42.075
Gdybym przypadkiem to zrobiła,
tekst na przycisku zmieniłby się

00:03:42.170 --> 00:03:44.762
podczas ładowania,
ale później już nie.

00:03:44.862 --> 00:03:48.778
Żeby to naprawić, usuwam nawiasy,
które przypadkowo dodałam,

00:03:48.878 --> 00:03:52.734
i teraz moja funkcja
zostaje przywołana tylko kliknięciem.

00:03:53.855 --> 00:03:56.425
Inny sposób,
w który możemy to osiągnąć,

00:03:56.525 --> 00:04:02.509
to wprowadzić do metody
funkcję anonimową.

00:04:02.602 --> 00:04:06.015
Taka funkcja nie ma nazwy.

00:04:06.089 --> 00:04:10.264
Piszemy po prostu "inline".

00:04:10.387 --> 00:04:15.001
Skopiuję i wkleję wiersz
"addEventListener"

00:04:15.098 --> 00:04:20.202
i pokażę wam tę opcję obok,
żebyście zobaczyli, o co mi chodzi.

00:04:20.380 --> 00:04:22.537
Skasuję nazwę funkcji tutaj

00:04:22.637 --> 00:04:26.165
i zastąpię ją funkcją z definicją.

00:04:26.265 --> 00:04:29.885
Wklejam to tutaj.

00:04:31.185 --> 00:04:34.329
Dobrze. Te dwie linie kodu

00:04:34.429 --> 00:04:37.779
robią dokładnie to samo.

00:04:37.879 --> 00:04:39.707
No, prawie.

00:04:39.817 --> 00:04:44.235
Obie wprowadzają funkcję
z tym samym kodem wewnątrz.

00:04:44.344 --> 00:04:48.275
Różnica polega na tym, że pierwsza
wprowadza nazwaną funkcję,

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

00:04:50.244 --> 00:04:54.823
a druga definiuje
funkcję anonimową "inline",

00:04:54.977 --> 00:04:58.237
jednocześnie z uruchomieniem jej.

00:04:58.361 --> 00:04:59.939
Obie metody się sprawdzają.

00:05:00.008 --> 00:05:02.764
Wielu projektantów stron
woli funkcje nazwane,

00:05:02.866 --> 00:05:06.874
bo kod jest czytelniejszy
i nieco łatwiejszy do debugowania.

00:05:07.005 --> 00:05:09.863
Możecie przywołać nazwane funkcje sami

00:05:09.963 --> 00:05:13.353
- kiedy indziej lub w związku
z innymi zdarzeniami.

00:05:13.453 --> 00:05:17.569
Od was zależy, czego użyjecie.
Nie stosujcie obu metod naraz,

00:05:17.669 --> 00:05:21.712
bo przeglądarka przywoła
obie funkcje, gdy nastąpi kliknięcie.

00:05:21.799 --> 00:05:25.892
A nie ma sensu
przywoływać tej funkcji dwa razy.

00:05:25.992 --> 00:05:29.096
Skasuję wersję z funkcją anonimową,

00:05:29.231 --> 00:05:30.907
bo wolę pierwszy sposób.

00:05:32.112 --> 00:05:35.305
Możecie dużo zrobić,
umiejąc dodawać detektory zdarzeń.

00:05:35.405 --> 00:05:37.873
Dodacie je w innych częściach strony,

00:05:38.012 --> 00:05:41.635
będziecie nasłuchiwać zdarzeń...
O tym - następnym razem.

00:05:41.693 --> 00:05:45.814
I możecie modyfikować DOM
na wszystkie sposoby, które już znacie.

00:05:45.924 --> 00:05:49.715
Nie ograniczajcie się do elementu,
z którym zaszła interakcja.

00:05:49.811 --> 00:05:52.502
Możecie modyfikować
wszystko na stronie.

00:05:52.646 --> 00:05:55.845
Wypróbujcie to.
Przekonajcie się, co można zrobić.