[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.92,0:00:06.17,Default,,0000,0000,0000,,Pokażę jeszcze jedną rzecz, którą można\Nzrobić z obiektem "event" (zdarzenie).
Dialogue: 0,0:00:06.27,0:00:10.19,Default,,0000,0000,0000,,Moja strona odpowiada\Nna odwieczne pytanie:
Dialogue: 0,0:00:10.27,0:00:12.08,Default,,0000,0000,0000,,"Co mówi Koleżka-O-Nie?".
Dialogue: 0,0:00:12.16,0:00:13.82,Default,,0000,0000,0000,,A dokładniej:
Dialogue: 0,0:00:13.92,0:00:17.16,Default,,0000,0000,0000,,"Jak brzmiałby jego głos,\Ngdybyście mogli go słyszeć?".
Dialogue: 0,0:00:17.24,0:00:20.66,Default,,0000,0000,0000,,Kliknięcie na link odeśle was\Ndo pliku mp3;
Dialogue: 0,0:00:20.76,0:00:25.61,Default,,0000,0000,0000,,powinien otworzyć się w przeglądarce\Ni odpowiedzieć na to palące pytanie.
Dialogue: 0,0:00:25.70,0:00:29.98,Default,,0000,0000,0000,,Tylko że ja nie chcę,\Nby użytkownik musiał opuszczać stronę.
Dialogue: 0,0:00:30.60,0:00:33.72,Default,,0000,0000,0000,,Powinniśmy słyszeć głos\Nbezpośrednio na stronie.
Dialogue: 0,0:00:33.79,0:00:36.13,Default,,0000,0000,0000,,Możemy to zrobić za pomocą JavaScript,
Dialogue: 0,0:00:36.20,0:00:40.03,Default,,0000,0000,0000,,wykonując tag "audio",\Ngdy użytkownik kliknie na link.
Dialogue: 0,0:00:41.30,0:00:45.35,Default,,0000,0000,0000,,Najpierw umieśćmy link w zmiennej:
Dialogue: 0,0:00:45.42,0:00:47.96,Default,,0000,0000,0000,,"var ohnoesEl ="...
Dialogue: 0,0:00:48.07,0:00:54.10,Default,,0000,0000,0000,,"document.getElementById("ohnoes").
Dialogue: 0,0:00:56.10,0:01:00.88,Default,,0000,0000,0000,,A teraz zdefiniujmy wywołanie zwrotne.\NBędzie ciekawe!
Dialogue: 0,0:01:04.05,0:01:06.57,Default,,0000,0000,0000,,To wywołanie zwrotne
Dialogue: 0,0:01:06.68,0:01:10.45,Default,,0000,0000,0000,,ma dynamicznie tworzyć tag audio:
Dialogue: 0,0:01:10.50,0:01:15.81,Default,,0000,0000,0000,,var audioEl =\Ndocument.createElement("audio")...
Dialogue: 0,0:01:15.91,0:01:20.14,Default,,0000,0000,0000,,to jest nowy tag dostępny\Nw nowoczesnych przeglądarkach.
Dialogue: 0,0:01:20.20,0:01:23.54,Default,,0000,0000,0000,,Piszemy: "audio.src ="
Dialogue: 0,0:01:23.64,0:01:27.66,Default,,0000,0000,0000,,i damy tu "href" stąd.
Dialogue: 0,0:01:28.68,0:01:32.09,Default,,0000,0000,0000,,Tag audio przypomina tagi obrazu.
Dialogue: 0,0:01:33.11,0:01:36.97,Default,,0000,0000,0000,,Dopiszemy także\N"audioEl.autoplay = true",
Dialogue: 0,0:01:37.07,0:01:40.26,Default,,0000,0000,0000,,więc gdy tylko dodamy tag,\Nzacznie się odtwarzanie.
Dialogue: 0,0:01:40.36,0:01:42.79,Default,,0000,0000,0000,,I w końcu dodajemy to do strony.
Dialogue: 0,0:01:44.19,0:01:48.18,Default,,0000,0000,0000,,Nie ma znaczenia, w którym miejscu,\Nbo nie będzie wizualizacji.
Dialogue: 0,0:01:48.23,0:01:52.32,Default,,0000,0000,0000,,Gdy użytkownik kliknie, program ma\Nstworzyć audio, określić źródło,
Dialogue: 0,0:01:52.40,0:01:55.63,Default,,0000,0000,0000,,wykonać autoodtwarzanie\Ni dodać to do strony.
Dialogue: 0,0:01:55.76,0:01:58.74,Default,,0000,0000,0000,,Na koniec upewnijmy się,\Nże przy kliknięciu na link
Dialogue: 0,0:01:58.84,0:02:01.39,Default,,0000,0000,0000,,zostaje przywołany detektor zdarzeń:
Dialogue: 0,0:02:01.48,0:02:07.45,Default,,0000,0000,0000,,ohnoesEl.addEventlistener("click")...
Dialogue: 0,0:02:08.43,0:02:11.84,Default,,0000,0000,0000,,i wpiszemy nazwę funkcji.
Dialogue: 0,0:02:12.89,0:02:15.27,Default,,0000,0000,0000,,No dobrze. Wiecie, co teraz:
Dialogue: 0,0:02:15.37,0:02:18.86,Default,,0000,0000,0000,,przerwijcie odtwarzanie\Ni wypróbujcie program.
Dialogue: 0,0:02:19.67,0:02:20.86,Default,,0000,0000,0000,,Co się wydarzyło?
Dialogue: 0,0:02:20.96,0:02:23.20,Default,,0000,0000,0000,,U mnie odtworzył się dźwięk
Dialogue: 0,0:02:23.27,0:02:26.47,Default,,0000,0000,0000,,- głębokie, niskie pomruki Koleżki...
Dialogue: 0,0:02:26.62,0:02:29.88,Default,,0000,0000,0000,,ale link wciąż otwiera się\Nw nowym oknie.
Dialogue: 0,0:02:29.98,0:02:31.95,Default,,0000,0000,0000,,Idealnie, po odtworzeniu dźwięku
Dialogue: 0,0:02:32.05,0:02:35.36,Default,,0000,0000,0000,,przeglądarka nie powinna\Nkierować użytkownika do linku,
Dialogue: 0,0:02:35.46,0:02:37.53,Default,,0000,0000,0000,,bo dźwięk został odsłuchany.
Dialogue: 0,0:02:37.63,0:02:40.45,Default,,0000,0000,0000,,W tym celu musimy\Nzawiadomić przeglądarkę,
Dialogue: 0,0:02:40.56,0:02:43.17,Default,,0000,0000,0000,,żeby anulowała zachowanie domyślne.
Dialogue: 0,0:02:43.27,0:02:47.25,Default,,0000,0000,0000,,Bo domyślnie,\Ngdy użytkownik kliknie na link,
Dialogue: 0,0:02:47.38,0:02:50.46,Default,,0000,0000,0000,,przeglądarka do niego kieruje.
Dialogue: 0,0:02:50.54,0:02:54.15,Default,,0000,0000,0000,,Jeśli jednak zmieniliśmy\Ndziałanie linku poprzez JavaScript...
Dialogue: 0,0:02:54.24,0:02:58.13,Default,,0000,0000,0000,,często nie chcemy,\Nby przeglądarka kierowała do linku.
Dialogue: 0,0:02:58.23,0:03:00.51,Default,,0000,0000,0000,,Każemy jej przestać.
Dialogue: 0,0:03:00.61,0:03:05.25,Default,,0000,0000,0000,,Potraktujemy własność "event" w sposób,\Nktóry nazywa się "preventDefault()".
Dialogue: 0,0:03:05.32,0:03:07.69,Default,,0000,0000,0000,,Musimy zrobić odniesienie
Dialogue: 0,0:03:07.72,0:03:10.16,Default,,0000,0000,0000,,do obiektu zdarzenia,\Nktóry wprowadzamy.
Dialogue: 0,0:03:10.21,0:03:11.65,Default,,0000,0000,0000,,Wewnątrz piszemy:
Dialogue: 0,0:03:11.70,0:03:14.53,Default,,0000,0000,0000,,"e.preventDefault()".
Dialogue: 0,0:03:15.80,0:03:17.66,Default,,0000,0000,0000,,To ma poinformować przeglądarkę,
Dialogue: 0,0:03:17.76,0:03:21.54,Default,,0000,0000,0000,,by nie wykonywała domyślnych kroków\Nkojarzonych z tym zdarzeniem.
Dialogue: 0,0:03:21.62,0:03:24.36,Default,,0000,0000,0000,,Przerwijcie odtwarzanie\Ni wypróbujcie program.
Dialogue: 0,0:03:26.17,0:03:28.47,Default,,0000,0000,0000,,Usłyszeliście dźwięk, tak?
Dialogue: 0,0:03:28.53,0:03:31.46,Default,,0000,0000,0000,,To przyjemniejsze\Ndoświadczenie dla użytkownika.
Dialogue: 0,0:03:31.56,0:03:34.66,Default,,0000,0000,0000,,Tak zwane "progresywne wzbogacanie".
Dialogue: 0,0:03:35.26,0:03:37.38,Default,,0000,0000,0000,,Strona zaczyna działać w HTML,
Dialogue: 0,0:03:37.42,0:03:39.93,Default,,0000,0000,0000,,z domyślnym zachowaniem przeglądarki,
Dialogue: 0,0:03:40.03,0:03:44.04,Default,,0000,0000,0000,,ale potem wzbogacamy ją\Nza pomocą JavaScript.
Dialogue: 0,0:03:45.02,0:03:47.81,Default,,0000,0000,0000,,Często będziecie chcieli\Nużywać "preventDefault",
Dialogue: 0,0:03:47.91,0:03:50.45,Default,,0000,0000,0000,,łącząc detektor\Nzdarzeń klikania z linkami.
Dialogue: 0,0:03:50.48,0:03:54.75,Default,,0000,0000,0000,,Używajcie tego\Npodczas przetwarzania formularzy,
Dialogue: 0,0:03:54.82,0:03:57.68,Default,,0000,0000,0000,,bo przeglądarka też\Nmoże zachowywać się domyślnie,
Dialogue: 0,0:03:57.78,0:03:59.84,Default,,0000,0000,0000,,przekazując informacje do serwera.
Dialogue: 0,0:03:59.94,0:04:02.83,Default,,0000,0000,0000,,Ważne, żeby pamiętać\No wygodzie użytkownika.
Dialogue: 0,0:04:03.37,0:04:07.10,Default,,0000,0000,0000,,Jeśli wasza strona\Nnie jest pod tym względem optymalna,
Dialogue: 0,0:04:07.17,0:04:09.01,Default,,0000,0000,0000,,wymyślajcie, jak to zmienić.
Dialogue: 0,0:04:09.07,0:04:11.62,Default,,0000,0000,0000,,Nie zdołamy tu\Nnauczyć was wszystkiego,
Dialogue: 0,0:04:11.72,0:04:14.65,Default,,0000,0000,0000,,ale w Internecie\Nczeka tysiące odpowiedzi!