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