Zrobiłam tę "nudną stronę"
do zabawy.

Na razie rzeczywiście jest nudna!

Nie zawiera żadnej treści,

a ten przycisk
nie reaguje na kliknięcie.

Sprawmy, żeby był interaktywny.

Gdy użytkownik klika,

tekst na przycisku
powinien się zmienić.

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

W tym przypadku - to przycisk.

Rozpoznaje kliknięcie.

Stworzymy zmienną "clickerButton"

i użyjemy polecenia
"document.getElementById",

żeby pozyskało element
i przechowywało go w tej zmiennej.

Następny krok
- to zdefiniować funkcję,

która będzie przywołana
zaraz po zdarzeniu "kliknięcie".

Nazwę ją "onButtonClick"
(kliknięcie w przycisk)...

i... umieszczę tu
tylko pustą funkcję...

no i muszę zawrzeć coś wewnątrz.
Bo funkcja nie zrobi nic ciekawego.

Żeby zmienić tekst na przycisku,
możemy użyć zmiennej "clickerButton"

i ustalić "textContent"
(zawartość tekstową).

"No, no! Kliknęliście na mnie!".

Przycisk się ucieszył!

Kodu jest mało, ale później zrobimy coś
skomplikowanego. Gdy to zacznie działać.

Kody, które do tej pory pisaliśmy,
tylko definiowały zmienne.

Nadal więc nie ma reakcji
na kliknięcie na przycisk.

Ostateczny krok,
który to wszystko połączy,

to powiedzieć przeglądarce,

że ma przywołać
zdefiniowaną przez nas funkcję,

kiedy tylko nastąpi
kliknięcie na przycisk.

Zrobimy to, przywołując "add event
listener" (dodaj detektor zdarzeń)

na elemencie "przycisk".

Piszemy:
"clickerButton.addeventlistener".

Musimy wprowadzić dwa argumenty.

Pierwszy to nazwa zdarzenia:
"kliknięcie",

a drugi - to funkcja,
którą chcemy przywołać,

gdy dochodzi do kliknięcia:
"onButtonClick".

Teraz zatrzymajcie film
i kliknijcie na przycisk.

Udało się? Mam nadzieję!
U mnie - tak.

Pomówmy więcej o działaniu tej funkcji,
bo sprawa jest dość skomplikowana.

Nazywamy tę funkcję "eventListener"
(detektorem zdarzeń),

lub "callback" (wywołaniem zwrotnym),
bo w ten sposób jej używamy.

Życzymy sobie, by była
przywoływana tylko po zdarzeniu.

Na ogół nie chcemy, by była
przywoływana podczas ładowania strony.

A gdybyśmy tego chcieli,

musielibyśmy dodać
taki wiersz na dole.

Zwróćcie uwagę na nawiasy.

Pamiętajcie: za pomocą nawiasów
przywołujemy funkcję.

Jeśli je zostawimy tak, jak są,

nie przywołamy funkcji,
tylko odniesiemy się do niej.

To właśnie robimy,
gdy wprowadzamy to jako argument.

Po prostu mówimy przeglądarce:

"Tu jest funkcja, którą masz
przywołać później, ale nie teraz".

Pamiętajcie, żeby nie dawać nawiasów
po nazwie funkcji tutaj,

bo wtedy będziecie tylko wprowadzać
wartość zwrotną funkcji, nie funkcję.

Gdybym przypadkiem to zrobiła,
tekst na przycisku zmieniłby się

podczas ładowania,
ale później już nie.

Żeby to naprawić, usuwam nawiasy,
które przypadkowo dodałam,

i teraz moja funkcja
zostaje przywołana tylko kliknięciem.

Inny sposób,
w który możemy to osiągnąć,

to wprowadzić do metody
funkcję anonimową.

Taka funkcja nie ma nazwy.

Piszemy po prostu "inline".

Skopiuję i wkleję wiersz
"addEventListener"

i pokażę wam tę opcję obok,
żebyście zobaczyli, o co mi chodzi.

Skasuję nazwę funkcji tutaj

i zastąpię ją funkcją z definicją.

Wklejam to tutaj.

Dobrze. Te dwie linie kodu

robią dokładnie to samo.

No, prawie.

Obie wprowadzają funkcję
z tym samym kodem wewnątrz.

Różnica polega na tym, że pierwsza
wprowadza nazwaną funkcję,

którą określiliśmy powyżej,

a druga definiuje
funkcję anonimową "inline",

jednocześnie z uruchomieniem jej.

Obie metody się sprawdzają.

Wielu projektantów stron
woli funkcje nazwane,

bo kod jest czytelniejszy
i nieco łatwiejszy do debugowania.

Możecie przywołać nazwane funkcje sami

- kiedy indziej lub w związku
z innymi zdarzeniami.

Od was zależy, czego użyjecie.
Nie stosujcie obu metod naraz,

bo przeglądarka przywoła
obie funkcje, gdy nastąpi kliknięcie.

A nie ma sensu
przywoływać tej funkcji dwa razy.

Skasuję wersję z funkcją anonimową,

bo wolę pierwszy sposób.

Możecie dużo zrobić,
umiejąc dodawać detektory zdarzeń.

Dodacie je w innych częściach strony,

będziecie nasłuchiwać zdarzeń...
O tym - następnym razem.

I możecie modyfikować DOM
na wszystkie sposoby, które już znacie.

Nie ograniczajcie się do elementu,
z którym zaszła interakcja.

Możecie modyfikować
wszystko na stronie.

Wypróbujcie to.
Przekonajcie się, co można zrobić.