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ć.