Return to Video

Adding an event listener (Video Version)

  • 0:01 - 0:06
    Zrobiłam tę "nudną stronę"
    do zabawy.
  • 0:06 - 0:08
    Na razie rzeczywiście jest nudna!
  • 0:08 - 0:11
    Nie zawiera żadnej treści,
  • 0:11 - 0:16
    a ten przycisk
    nie reaguje na kliknięcie.
  • 0:16 - 0:19
    Sprawmy, żeby był interaktywny.
  • 0:19 - 0:20
    Gdy użytkownik klika,
  • 0:20 - 0:24
    tekst na przycisku
    powinien się zmienić.
  • 0:24 - 0:30
    Pierwszy krok - to znaleźć element,
    który ma prowadzić nasłuch zdarzeń.
  • 0:30 - 0:33
    W tym przypadku - to przycisk.
  • 0:33 - 0:35
    Rozpoznaje kliknięcie.
  • 0:35 - 0:40
    Stworzymy zmienną "clickerButton"
  • 0:40 - 0:45
    i użyjemy polecenia
    "document.getElementById",
  • 0:45 - 0:49
    żeby pozyskało element
    i przechowywało go w tej zmiennej.
  • 0:49 - 0:53
    Następny krok
    - to zdefiniować funkcję,
  • 0:53 - 0:58
    która będzie przywołana
    zaraz po zdarzeniu "kliknięcie".
  • 0:58 - 1:02
    Nazwę ją "onButtonClick"
    (kliknięcie w przycisk)...
  • 1:03 - 1:07
    i... umieszczę tu
    tylko pustą funkcję...
  • 1:07 - 1:12
    no i muszę zawrzeć coś wewnątrz.
    Bo funkcja nie zrobi nic ciekawego.
  • 1:12 - 1:17
    Żeby zmienić tekst na przycisku,
    możemy użyć zmiennej "clickerButton"
  • 1:17 - 1:20
    i ustalić "textContent"
    (zawartość tekstową).
  • 1:20 - 1:23
    "No, no! Kliknęliście na mnie!".
  • 1:23 - 1:26
    Przycisk się ucieszył!
  • 1:27 - 1:33
    Kodu jest mało, ale później zrobimy coś
    skomplikowanego. Gdy to zacznie działać.
  • 1:33 - 1:38
    Kody, które do tej pory pisaliśmy,
    tylko definiowały zmienne.
  • 1:38 - 1:42
    Nadal więc nie ma reakcji
    na kliknięcie na przycisk.
  • 1:42 - 1:45
    Ostateczny krok,
    który to wszystko połączy,
  • 1:45 - 1:47
    to powiedzieć przeglądarce,
  • 1:47 - 1:50
    że ma przywołać
    zdefiniowaną przez nas funkcję,
  • 1:50 - 1:55
    kiedy tylko nastąpi
    kliknięcie na przycisk.
  • 1:55 - 1:59
    Zrobimy to, przywołując "add event
    listener" (dodaj detektor zdarzeń)
  • 1:59 - 2:01
    na elemencie "przycisk".
  • 2:01 - 2:06
    Piszemy:
    "clickerButton.addeventlistener".
  • 2:06 - 2:11
    Musimy wprowadzić dwa argumenty.
  • 2:11 - 2:15
    Pierwszy to nazwa zdarzenia:
    "kliknięcie",
  • 2:15 - 2:18
    a drugi - to funkcja,
    którą chcemy przywołać,
  • 2:18 - 2:22
    gdy dochodzi do kliknięcia:
    "onButtonClick".
  • 2:23 - 2:27
    Teraz zatrzymajcie film
    i kliknijcie na przycisk.
  • 2:29 - 2:32
    Udało się? Mam nadzieję!
    U mnie - tak.
  • 2:33 - 2:38
    Pomówmy więcej o działaniu tej funkcji,
    bo sprawa jest dość skomplikowana.
  • 2:38 - 2:42
    Nazywamy tę funkcję "eventListener"
    (detektorem zdarzeń),
  • 2:42 - 2:47
    lub "callback" (wywołaniem zwrotnym),
    bo w ten sposób jej używamy.
  • 2:47 - 2:51
    Życzymy sobie, by była
    przywoływana tylko po zdarzeniu.
  • 2:51 - 2:56
    Na ogół nie chcemy, by była
    przywoływana podczas ładowania strony.
  • 2:56 - 2:58
    A gdybyśmy tego chcieli,
  • 2:58 - 3:02
    musielibyśmy dodać
    taki wiersz na dole.
  • 3:04 - 3:06
    Zwróćcie uwagę na nawiasy.
  • 3:06 - 3:10
    Pamiętajcie: za pomocą nawiasów
    przywołujemy funkcję.
  • 3:10 - 3:12
    Jeśli je zostawimy tak, jak są,
  • 3:12 - 3:16
    nie przywołamy funkcji,
    tylko odniesiemy się do niej.
  • 3:16 - 3:19
    To właśnie robimy,
    gdy wprowadzamy to jako argument.
  • 3:19 - 3:21
    Po prostu mówimy przeglądarce:
  • 3:21 - 3:26
    "Tu jest funkcja, którą masz
    przywołać później, ale nie teraz".
  • 3:27 - 3:32
    Pamiętajcie, żeby nie dawać nawiasów
    po nazwie funkcji tutaj,
  • 3:32 - 3:38
    bo wtedy będziecie tylko wprowadzać
    wartość zwrotną funkcji, nie funkcję.
  • 3:38 - 3:42
    Gdybym przypadkiem to zrobiła,
    tekst na przycisku zmieniłby się
  • 3:42 - 3:45
    podczas ładowania,
    ale później już nie.
  • 3:45 - 3:49
    Żeby to naprawić, usuwam nawiasy,
    które przypadkowo dodałam,
  • 3:49 - 3:53
    i teraz moja funkcja
    zostaje przywołana tylko kliknięciem.
  • 3:54 - 3:56
    Inny sposób,
    w który możemy to osiągnąć,
  • 3:57 - 4:03
    to wprowadzić do metody
    funkcję anonimową.
  • 4:03 - 4:06
    Taka funkcja nie ma nazwy.
  • 4:06 - 4:10
    Piszemy po prostu "inline".
  • 4:10 - 4:15
    Skopiuję i wkleję wiersz
    "addEventListener"
  • 4:15 - 4:20
    i pokażę wam tę opcję obok,
    żebyście zobaczyli, o co mi chodzi.
  • 4:20 - 4:23
    Skasuję nazwę funkcji tutaj
  • 4:23 - 4:26
    i zastąpię ją funkcją z definicją.
  • 4:26 - 4:30
    Wklejam to tutaj.
  • 4:31 - 4:34
    Dobrze. Te dwie linie kodu
  • 4:34 - 4:38
    robią dokładnie to samo.
  • 4:38 - 4:40
    No, prawie.
  • 4:40 - 4:44
    Obie wprowadzają funkcję
    z tym samym kodem wewnątrz.
  • 4:44 - 4:48
    Różnica polega na tym, że pierwsza
    wprowadza nazwaną funkcję,
  • 4:48 - 4:50
    którą określiliśmy powyżej,
  • 4:50 - 4:55
    a druga definiuje
    funkcję anonimową "inline",
  • 4:55 - 4:58
    jednocześnie z uruchomieniem jej.
  • 4:58 - 5:00
    Obie metody się sprawdzają.
  • 5:00 - 5:03
    Wielu projektantów stron
    woli funkcje nazwane,
  • 5:03 - 5:07
    bo kod jest czytelniejszy
    i nieco łatwiejszy do debugowania.
  • 5:07 - 5:10
    Możecie przywołać nazwane funkcje sami
  • 5:10 - 5:13
    - kiedy indziej lub w związku
    z innymi zdarzeniami.
  • 5:13 - 5:18
    Od was zależy, czego użyjecie.
    Nie stosujcie obu metod naraz,
  • 5:18 - 5:22
    bo przeglądarka przywoła
    obie funkcje, gdy nastąpi kliknięcie.
  • 5:22 - 5:26
    A nie ma sensu
    przywoływać tej funkcji dwa razy.
  • 5:26 - 5:29
    Skasuję wersję z funkcją anonimową,
  • 5:29 - 5:31
    bo wolę pierwszy sposób.
  • 5:32 - 5:35
    Możecie dużo zrobić,
    umiejąc dodawać detektory zdarzeń.
  • 5:35 - 5:38
    Dodacie je w innych częściach strony,
  • 5:38 - 5:42
    będziecie nasłuchiwać zdarzeń...
    O tym - następnym razem.
  • 5:42 - 5:46
    I możecie modyfikować DOM
    na wszystkie sposoby, które już znacie.
  • 5:46 - 5:50
    Nie ograniczajcie się do elementu,
    z którym zaszła interakcja.
  • 5:50 - 5:53
    Możecie modyfikować
    wszystko na stronie.
  • 5:53 - 5:56
    Wypróbujcie to.
    Przekonajcie się, co można zrobić.
Title:
Adding an event listener (Video Version)
Description:

This is a video recording of a talk-through, uploaded to make it easier to create subtitles.
Please watch the original interactive talk-through on Khan Academy, where you can pause and edit the code
and see the code in better resolution:
http://www.khanacademy.org/computer-programming
more » « less
Video Language:
English
Duration:
05:57

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.