Return to Video

Zapobieganiu wykonywaniu standardowych procedur na zdarzeniach (wersja Wideo)

  • 0:01 - 0:06
    Pokażę jeszcze jedną rzecz, którą można
    zrobić z obiektem "event" (zdarzenie).
  • 0:06 - 0:10
    Moja strona odpowiada
    na odwieczne pytanie:
  • 0:10 - 0:12
    "Co mówi Koleżka-O-Nie?".
  • 0:12 - 0:14
    A dokładniej:
  • 0:14 - 0:17
    "Jak brzmiałby jego głos,
    gdybyście mogli go słyszeć?".
  • 0:17 - 0:21
    Kliknięcie na link odeśle was
    do pliku mp3;
  • 0:21 - 0:26
    powinien otworzyć się w przeglądarce
    i odpowiedzieć na to palące pytanie.
  • 0:26 - 0:30
    Tylko że ja nie chcę,
    by użytkownik musiał opuszczać stronę.
  • 0:31 - 0:34
    Powinniśmy słyszeć głos
    bezpośrednio na stronie.
  • 0:34 - 0:36
    Możemy to zrobić za pomocą JavaScript,
  • 0:36 - 0:40
    wykonując tag "audio",
    gdy użytkownik kliknie na link.
  • 0:41 - 0:45
    Najpierw umieśćmy link w zmiennej:
  • 0:45 - 0:48
    "var ohnoesEl ="...
  • 0:48 - 0:54
    "document.getElementById("ohnoes").
  • 0:56 - 1:01
    A teraz zdefiniujmy wywołanie zwrotne.
    Będzie ciekawe!
  • 1:04 - 1:07
    To wywołanie zwrotne
  • 1:07 - 1:10
    ma dynamicznie tworzyć tag audio:
  • 1:10 - 1:16
    var audioEl =
    document.createElement("audio")...
  • 1:16 - 1:20
    to jest nowy tag dostępny
    w nowoczesnych przeglądarkach.
  • 1:20 - 1:24
    Piszemy: "audio.src ="
  • 1:24 - 1:28
    i damy tu "href" stąd.
  • 1:29 - 1:32
    Tag audio przypomina tagi obrazu.
  • 1:33 - 1:37
    Dopiszemy także
    "audioEl.autoplay = true",
  • 1:37 - 1:40
    więc gdy tylko dodamy tag,
    zacznie się odtwarzanie.
  • 1:40 - 1:43
    I w końcu dodajemy to do strony.
  • 1:44 - 1:48
    Nie ma znaczenia, w którym miejscu,
    bo nie będzie wizualizacji.
  • 1:48 - 1:52
    Gdy użytkownik kliknie, program ma
    stworzyć audio, określić źródło,
  • 1:52 - 1:56
    wykonać autoodtwarzanie
    i dodać to do strony.
  • 1:56 - 1:59
    Na koniec upewnijmy się,
    że przy kliknięciu na link
  • 1:59 - 2:01
    zostaje przywołany detektor zdarzeń:
  • 2:01 - 2:07
    ohnoesEl.addEventlistener("click")...
  • 2:08 - 2:12
    i wpiszemy nazwę funkcji.
  • 2:13 - 2:15
    No dobrze. Wiecie, co teraz:
  • 2:15 - 2:19
    przerwijcie odtwarzanie
    i wypróbujcie program.
  • 2:20 - 2:21
    Co się wydarzyło?
  • 2:21 - 2:23
    U mnie odtworzył się dźwięk
  • 2:23 - 2:26
    - głębokie, niskie pomruki Koleżki...
  • 2:27 - 2:30
    ale link wciąż otwiera się
    w nowym oknie.
  • 2:30 - 2:32
    Idealnie, po odtworzeniu dźwięku
  • 2:32 - 2:35
    przeglądarka nie powinna
    kierować użytkownika do linku,
  • 2:35 - 2:38
    bo dźwięk został odsłuchany.
  • 2:38 - 2:40
    W tym celu musimy
    zawiadomić przeglądarkę,
  • 2:41 - 2:43
    żeby anulowała zachowanie domyślne.
  • 2:43 - 2:47
    Bo domyślnie,
    gdy użytkownik kliknie na link,
  • 2:47 - 2:50
    przeglądarka do niego kieruje.
  • 2:51 - 2:54
    Jeśli jednak zmieniliśmy
    działanie linku poprzez JavaScript...
  • 2:54 - 2:58
    często nie chcemy,
    by przeglądarka kierowała do linku.
  • 2:58 - 3:01
    Każemy jej przestać.
  • 3:01 - 3:05
    Potraktujemy własność "event" w sposób,
    który nazywa się "preventDefault()".
  • 3:05 - 3:08
    Musimy zrobić odniesienie
  • 3:08 - 3:10
    do obiektu zdarzenia,
    który wprowadzamy.
  • 3:10 - 3:12
    Wewnątrz piszemy:
  • 3:12 - 3:15
    "e.preventDefault()".
  • 3:16 - 3:18
    To ma poinformować przeglądarkę,
  • 3:18 - 3:22
    by nie wykonywała domyślnych kroków
    kojarzonych z tym zdarzeniem.
  • 3:22 - 3:24
    Przerwijcie odtwarzanie
    i wypróbujcie program.
  • 3:26 - 3:28
    Usłyszeliście dźwięk, tak?
  • 3:29 - 3:31
    To przyjemniejsze
    doświadczenie dla użytkownika.
  • 3:32 - 3:35
    Tak zwane "progresywne wzbogacanie".
  • 3:35 - 3:37
    Strona zaczyna działać w HTML,
  • 3:37 - 3:40
    z domyślnym zachowaniem przeglądarki,
  • 3:40 - 3:44
    ale potem wzbogacamy ją
    za pomocą JavaScript.
  • 3:45 - 3:48
    Często będziecie chcieli
    używać "preventDefault",
  • 3:48 - 3:50
    łącząc detektor
    zdarzeń klikania z linkami.
  • 3:50 - 3:55
    Używajcie tego
    podczas przetwarzania formularzy,
  • 3:55 - 3:58
    bo przeglądarka też
    może zachowywać się domyślnie,
  • 3:58 - 4:00
    przekazując informacje do serwera.
  • 4:00 - 4:03
    Ważne, żeby pamiętać
    o wygodzie użytkownika.
  • 4:03 - 4:07
    Jeśli wasza strona
    nie jest pod tym względem optymalna,
  • 4:07 - 4:09
    wymyślajcie, jak to zmienić.
  • 4:09 - 4:12
    Nie zdołamy tu
    nauczyć was wszystkiego,
  • 4:12 - 4:15
    ale w Internecie
    czeka tysiące odpowiedzi!
Title:
Zapobieganiu wykonywaniu standardowych procedur na zdarzeniach (wersja Wideo)
Description:

To tylko zapis naszych interaktywnych sesji poświęconych kodowaniu, stworzony by ułatwić ich przełożenie na inne języki.
Polecamy obejrzenie oryginalnej sesji na Khan Academy, gdzie możecie zatrzymać sesje, by edytować własny kod, jak również zobaczyć zapis kodu w wyższej rozdzielczości:
http://www.khanacademy.org/computer-programming
more » « less
Video Language:
English
Duration:
04:17

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.