[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.95,0:00:05.83,Default,,0000,0000,0000,,Formularz to sposób, w który strona\Nprzesyła informacje do serwera.
Dialogue: 0,0:00:05.96,0:00:09.96,Default,,0000,0000,0000,,W Khan Academy nie pozwalamy\Nna kontakt stron z serwerami
Dialogue: 0,0:00:10.10,0:00:13.65,Default,,0000,0000,0000,,- z przyczyn bezpieczeństwa.\NNie uczymy tu formularzy.
Dialogue: 0,0:00:13.75,0:00:17.13,Default,,0000,0000,0000,,Ale skoro zgłębiacie JavaScript,\Nby modyfikować strony,
Dialogue: 0,0:00:17.23,0:00:20.76,Default,,0000,0000,0000,,pokażę, jak używać go\Ndo przetwarzania elementów formularza.
Dialogue: 0,0:00:20.85,0:00:23.74,Default,,0000,0000,0000,,Nie trzeba będzie\Nwysyłać ich do serwera.
Dialogue: 0,0:00:23.86,0:00:26.68,Default,,0000,0000,0000,,Zrobiłam na tej stronie\Nkilka formularzy,
Dialogue: 0,0:00:26.81,0:00:30.09,Default,,0000,0000,0000,,by poznać nazwę użytkownika\Noraz język.
Dialogue: 0,0:00:30.16,0:00:33.85,Default,,0000,0000,0000,,Chcę, by strona\Npisała powitanie w tym języku,
Dialogue: 0,0:00:33.96,0:00:36.60,Default,,0000,0000,0000,,gdy użytkownik kliknie na przycisk.
Dialogue: 0,0:00:36.72,0:00:38.10,Default,,0000,0000,0000,,Krok pierwszy:
Dialogue: 0,0:00:38.16,0:00:41.72,Default,,0000,0000,0000,,element "przycisk"\Nmusi być przechowywany w zmiennej.
Dialogue: 0,0:00:41.81,0:00:48.18,Default,,0000,0000,0000,,Napiszemy więc:\N"document.getElementById("button")".
Dialogue: 0,0:00:49.78,0:00:53.17,Default,,0000,0000,0000,,Następny krok - to zdefiniować\Nfunkcję odbiornika zdarzeń:
Dialogue: 0,0:00:53.28,0:00:56.80,Default,,0000,0000,0000,,"var onButtonClick = function(){",
Dialogue: 0,0:00:57.93,0:01:00.43,Default,,0000,0000,0000,,a wewnątrz
Dialogue: 0,0:01:00.59,0:01:03.83,Default,,0000,0000,0000,,zaczniemy od wiadomości.
Dialogue: 0,0:01:03.97,0:01:08.61,Default,,0000,0000,0000,,Zatem:\N"document.getElementById("message")",
Dialogue: 0,0:01:08.76,0:01:12.21,Default,,0000,0000,0000,,i już mamy "div".\NTeraz wystarczy napisać:
Dialogue: 0,0:01:12.79,0:01:14.86,Default,,0000,0000,0000,,textContent +=
Dialogue: 0,0:01:15.65,0:01:20.80,Default,,0000,0000,0000,,"Zostałem kliknięty!\NDziękuję bardzo!".
Dialogue: 0,0:01:20.99,0:01:22.86,Default,,0000,0000,0000,,"Div" pełen wdzięczności!
Dialogue: 0,0:01:23.48,0:01:24.97,Default,,0000,0000,0000,,I wreszcie krok trzeci:
Dialogue: 0,0:01:25.09,0:01:28.49,Default,,0000,0000,0000,,dodamy detektor zdarzeń do przycisku,
Dialogue: 0,0:01:28.65,0:01:31.51,Default,,0000,0000,0000,,by kliknięcie przywoływało tę funkcję.
Dialogue: 0,0:01:32.12,0:01:35.16,Default,,0000,0000,0000,,Piszę więc: "("click", onButtonClick)".
Dialogue: 0,0:01:36.73,0:01:39.49,Default,,0000,0000,0000,,Zatrzymajcie odtwarzanie\Ni sprawdźcie sami,
Dialogue: 0,0:01:39.59,0:01:43.01,Default,,0000,0000,0000,,czy to działa tak,\Njak się spodziewaliście.
Dialogue: 0,0:01:43.11,0:01:47.44,Default,,0000,0000,0000,,A teraz niech program\Npowie coś na podstawie formularza.
Dialogue: 0,0:01:47.57,0:01:50.37,Default,,0000,0000,0000,,Musimy wymyślić, jak zdobyć nazwę,
Dialogue: 0,0:01:50.47,0:01:53.57,Default,,0000,0000,0000,,którą użytkownik\Nwpisał w odpowiednie pole.
Dialogue: 0,0:01:53.68,0:01:56.15,Default,,0000,0000,0000,,Zróbmy w tym celu zmienną.
Dialogue: 0,0:01:57.05,0:02:00.05,Default,,0000,0000,0000,,Piszę: "var name ="...
Dialogue: 0,0:02:00.15,0:02:04.92,Default,,0000,0000,0000,,"document.getElementById",
Dialogue: 0,0:02:05.03,0:02:07.20,Default,,0000,0000,0000,,bo nazwa ma ID.
Dialogue: 0,0:02:07.34,0:02:10.42,Default,,0000,0000,0000,,Mamy to tutaj.
Dialogue: 0,0:02:11.89,0:02:15.02,Default,,0000,0000,0000,,Zróbmy nowy ciąg dla powitania
Dialogue: 0,0:02:15.12,0:02:17.25,Default,,0000,0000,0000,,i dołączmy nazwę.
Dialogue: 0,0:02:17.39,0:02:21.20,Default,,0000,0000,0000,,Więc: "var greeting = "Heyaz"
Dialogue: 0,0:02:21.35,0:02:24.75,Default,,0000,0000,0000,,(moje ulubione powitanie) + name".\NNo dobrze.
Dialogue: 0,0:02:24.84,0:02:29.28,Default,,0000,0000,0000,,Mamy ciąg i to,\Nco jest przechowywane w zmiennej.
Dialogue: 0,0:02:30.67,0:02:33.88,Default,,0000,0000,0000,,Ten ciąg tekstu
Dialogue: 0,0:02:34.08,0:02:38.13,Default,,0000,0000,0000,,to powinno być powitanie.
Dialogue: 0,0:02:39.36,0:02:43.18,Default,,0000,0000,0000,,Zobaczmy... Znaleźliśmy\Npole wprowadzania imienia,
Dialogue: 0,0:02:43.34,0:02:47.100,Default,,0000,0000,0000,,zrobiliśmy ciąg powitania\Ni połączyliśmy go z "div".
Dialogue: 0,0:02:48.16,0:02:51.82,Default,,0000,0000,0000,,Zatrzymajcie odtwarzanie\Ni sprawdźcie, czy się udało.
Dialogue: 0,0:02:53.15,0:02:55.52,Default,,0000,0000,0000,,Nie całkiem, prawda?
Dialogue: 0,0:02:55.64,0:02:59.34,Default,,0000,0000,0000,,Zobaczyliście: "Heyaz [object Object]"
Dialogue: 0,0:02:59.46,0:03:01.100,Default,,0000,0000,0000,,albo "Heyaz object Element"?
Dialogue: 0,0:03:02.14,0:03:04.85,Default,,0000,0000,0000,,Jeśli wasze imię nie brzmi "Object"
Dialogue: 0,0:03:04.95,0:03:08.05,Default,,0000,0000,0000,,(bez urazy, jeśli brzmi, ładne imię!),
Dialogue: 0,0:03:08.15,0:03:10.46,Default,,0000,0000,0000,,to znaczy, że coś jest nie tak.
Dialogue: 0,0:03:10.55,0:03:13.84,Default,,0000,0000,0000,,Spodziewaliśmy się zobaczyć\Nto, co wpisaliście,
Dialogue: 0,0:03:13.98,0:03:16.49,Default,,0000,0000,0000,,a zamiast tego zobaczyliśmy "object".
Dialogue: 0,0:03:16.59,0:03:20.67,Default,,0000,0000,0000,,To znaczy, że nazwa "zmienna"\Nwskazuje na obiekt,
Dialogue: 0,0:03:20.78,0:03:24.03,Default,,0000,0000,0000,,nie zaś na ciąg,\Nna który miała wskazywać.
Dialogue: 0,0:03:24.24,0:03:26.54,Default,,0000,0000,0000,,Może już rozgryźliście ten problem.
Dialogue: 0,0:03:26.62,0:03:31.07,Default,,0000,0000,0000,,Przechowywaliśmy cały obiekt\N"element" w zmiennej "name".
Dialogue: 0,0:03:32.25,0:03:35.11,Default,,0000,0000,0000,,A obiekt "element" jest duży,
Dialogue: 0,0:03:35.18,0:03:39.64,Default,,0000,0000,0000,,zawiera mnóstwo informacji o elemencie:\No jego atrybutach i metodach.
Dialogue: 0,0:03:39.74,0:03:42.89,Default,,0000,0000,0000,,Aby się dowiedzieć, co wpisał\Nużytkownik, musimy wejść
Dialogue: 0,0:03:42.99,0:03:46.75,Default,,0000,0000,0000,,do szczególnej właściwości\Nelementu: jego wartości.
Dialogue: 0,0:03:46.90,0:03:49.62,Default,,0000,0000,0000,,Wpiszę więc "value"
Dialogue: 0,0:03:49.77,0:03:52.06,Default,,0000,0000,0000,,i powinno już być w porządku.
Dialogue: 0,0:03:52.18,0:03:56.25,Default,,0000,0000,0000,,Zatrzymajcie odtwarzanie\Ni sprawdźcie jeszcze raz.
Dialogue: 0,0:03:56.39,0:03:58.13,Default,,0000,0000,0000,,Udało się, prawda?
Dialogue: 0,0:03:58.24,0:04:01.46,Default,,0000,0000,0000,,To częsty błąd, więc bądźcie uważni.
Dialogue: 0,0:04:02.35,0:04:04.85,Default,,0000,0000,0000,,Chcę pokazać\Njeszcze jedną częstą pomyłkę.
Dialogue: 0,0:04:04.94,0:04:08.57,Default,,0000,0000,0000,,Zaznaczę tę linię i...
Dialogue: 0,0:04:09.40,0:04:11.82,Default,,0000,0000,0000,,i przeniosę ją poza funkcję.
Dialogue: 0,0:04:14.45,0:04:16.49,Default,,0000,0000,0000,,Teraz przerwijcie odtwarzanie,
Dialogue: 0,0:04:16.59,0:04:19.67,Default,,0000,0000,0000,,wpiszcie input i naciśnijcie przycisk.
Dialogue: 0,0:04:23.55,0:04:26.05,Default,,0000,0000,0000,,Jeśli jest tak, jak powinno,\Nto zobaczycie
Dialogue: 0,0:04:26.17,0:04:29.65,Default,,0000,0000,0000,,pusty ciąg zamiast swojego imienia.\NWiecie, dlaczego?
Dialogue: 0,0:04:29.76,0:04:34.11,Default,,0000,0000,0000,,Zastanówcie się nad tym, kiedy\Nwykonywany jest każdy wiersz kodu.
Dialogue: 0,0:04:34.20,0:04:35.61,Default,,0000,0000,0000,,W kodzie bieżącym
Dialogue: 0,0:04:35.68,0:04:37.32,Default,,0000,0000,0000,,przeglądarka ładuje stronę
Dialogue: 0,0:04:37.46,0:04:39.89,Default,,0000,0000,0000,,i wykonuje JavaScript\Nwiersz po wierszu.
Dialogue: 0,0:04:40.04,0:04:43.24,Default,,0000,0000,0000,,Najpierw przechowuje\Nelement "przycisk" w zmiennej.
Dialogue: 0,0:04:43.30,0:04:46.86,Default,,0000,0000,0000,,Później umieszcza w zmiennej\Nwartość elementu input.
Dialogue: 0,0:04:46.96,0:04:50.60,Default,,0000,0000,0000,,Ale przechowuje wartość w czasie,\Ngdy strona się ładuje,
Dialogue: 0,0:04:50.73,0:04:52.27,Default,,0000,0000,0000,,a wtedy to pusty ciąg.
Dialogue: 0,0:04:52.77,0:04:56.50,Default,,0000,0000,0000,,Następnie definiuje funkcję\Ni przypisuje detektor zdarzeń.
Dialogue: 0,0:04:56.59,0:04:58.10,Default,,0000,0000,0000,,Gdy zostaje on przywołany,
Dialogue: 0,0:04:58.21,0:05:02.62,Default,,0000,0000,0000,,nazwa - to ten sam ciąg,\Nco podczas ładowania strony.
Dialogue: 0,0:05:02.75,0:05:06.56,Default,,0000,0000,0000,,Detektor nie pozna ostatniej rzeczy,\Nktórą wpisał użytkownik.
Dialogue: 0,0:05:06.66,0:05:10.55,Default,,0000,0000,0000,,Dlatego ta linia kodu musi być
Dialogue: 0,0:05:10.65,0:05:13.40,Default,,0000,0000,0000,,wewnątrz tej funkcji\Ndetektora zdarzeń.
Dialogue: 0,0:05:13.51,0:05:17.79,Default,,0000,0000,0000,,Znajdzie wartość w czasie,\Ngdy dochodzi do zdarzenia.
Dialogue: 0,0:05:18.76,0:05:21.83,Default,,0000,0000,0000,,Dodajmy kod,\Nżeby przyjrzeć się wartości "język".
Dialogue: 0,0:05:21.96,0:05:24.26,Default,,0000,0000,0000,,Upewnimy się, że rozumiecie.
Dialogue: 0,0:05:24.40,0:05:29.74,Default,,0000,0000,0000,,W detektorze zdarzeń umieszczę\Ntę wartość w zmiennej "lang" (język).
Dialogue: 0,0:05:30.54,0:05:34.30,Default,,0000,0000,0000,,Spójrzcie na to okropne wcięcie!
Dialogue: 0,0:05:34.40,0:05:36.74,Default,,0000,0000,0000,,Wyrównajmy te wiersze.
Dialogue: 0,0:05:36.88,0:05:37.90,Default,,0000,0000,0000,,No dobrze...
Dialogue: 0,0:05:38.08,0:05:43.61,Default,,0000,0000,0000,,"var lang = document.getElementByID"...
Dialogue: 0,0:05:43.80,0:05:46.60,Default,,0000,0000,0000,,("lang").value".
Dialogue: 0,0:05:47.57,0:05:51.30,Default,,0000,0000,0000,,Zauważcie,\Nże nazywam zmienne tak samo, jak ID
Dialogue: 0,0:05:51.40,0:05:55.10,Default,,0000,0000,0000,,- chociaż wy nie musicie tego robić.
Dialogue: 0,0:05:55.24,0:05:59.91,Default,,0000,0000,0000,,Chcę, żeby zależnie od wybranego języka\Npojawiała się inna wiadomość.
Dialogue: 0,0:06:00.05,0:06:03.88,Default,,0000,0000,0000,,Zwróćcie uwagę, że wartość to nie\Nto samo, co w liście rozwijalnej.
Dialogue: 0,0:06:04.01,0:06:06.74,Default,,0000,0000,0000,,To atrybut wartości w HTML.
Dialogue: 0,0:06:06.93,0:06:11.19,Default,,0000,0000,0000,,Zatem "lang" powinien\Nmieć wartość "en", "es" lub "plt".
Dialogue: 0,0:06:12.08,0:06:17.37,Default,,0000,0000,0000,,Czyli: "if (lang === "es")",
Dialogue: 0,0:06:17.100,0:06:23.99,Default,,0000,0000,0000,,powinno się wyświetlić\Npowitanie "Hola".
Dialogue: 0,0:06:24.08,0:06:26.84,Default,,0000,0000,0000,,Zróbmy tę powitalną zmienną tutaj.
Dialogue: 0,0:06:26.93,0:06:32.07,Default,,0000,0000,0000,,Wtedy "greeting" będzie mieć\Npostać "Hola" plus imię.
Dialogue: 0,0:06:35.45,0:06:41.61,Default,,0000,0000,0000,,A jeśli wartość języka to "plt",\Nczyli Pig Latin (świńska łacina),
Dialogue: 0,0:06:41.75,0:06:44.30,Default,,0000,0000,0000,,to powitanie będzie brzmieć
Dialogue: 0,0:06:44.40,0:06:48.53,Default,,0000,0000,0000,,"Ello-hey" plus imię.
Dialogue: 0,0:06:48.63,0:06:53.47,Default,,0000,0000,0000,,I użyjemy polecenia "else"\Ndla angielskiego.
Dialogue: 0,0:06:53.57,0:06:56.61,Default,,0000,0000,0000,,Przeniosę to tutaj. No dobrze.
Dialogue: 0,0:06:57.42,0:07:00.56,Default,,0000,0000,0000,,A jeśli chcecie\Nwesołe zadanie dodatkowe,
Dialogue: 0,0:07:00.69,0:07:03.90,Default,,0000,0000,0000,,spróbujcie napisać\Nkonwerter nazw na świńską łacinę,
Dialogue: 0,0:07:04.02,0:07:08.34,Default,,0000,0000,0000,,żeby przekładane było\Ncałe powitanie, z imieniem.
Dialogue: 0,0:07:08.47,0:07:09.66,Default,,0000,0000,0000,,Byłoby super!
Dialogue: 0,0:07:10.37,0:07:13.28,Default,,0000,0000,0000,,Przerwijcie odtwarzanie,\Nwprowadźcie imię,
Dialogue: 0,0:07:13.40,0:07:16.94,Default,,0000,0000,0000,,wybierzcie inny język\Ni wypróbujcie program.
Dialogue: 0,0:07:19.55,0:07:20.58,Default,,0000,0000,0000,,Nieźle, co?
Dialogue: 0,0:07:20.68,0:07:24.76,Default,,0000,0000,0000,,Z formularzami i odrobiną JavaScript\Nmożna robić świetne rzeczy:
Dialogue: 0,0:07:24.93,0:07:27.68,Default,,0000,0000,0000,,gry słowne i liczbowe,\Nwymyślanie opowiastek...
Dialogue: 0,0:07:27.80,0:07:30.19,Default,,0000,0000,0000,,A jeśli macie serwer\Npoza Khan Academy,
Dialogue: 0,0:07:30.30,0:07:33.46,Default,,0000,0000,0000,,używajcie JavaScript\Ndo przetworzenia formularza
Dialogue: 0,0:07:33.59,0:07:35.56,Default,,0000,0000,0000,,przed wysłaniem go do serwera.
Dialogue: 0,0:07:35.66,0:07:38.54,Default,,0000,0000,0000,,W formularzach jest więcej zdarzeń\Ndo nasłuchu:
Dialogue: 0,0:07:38.64,0:07:40.88,Default,,0000,0000,0000,,wciskanie klawiszy i wybranie elementu.
Dialogue: 0,0:07:40.98,0:07:44.16,Default,,0000,0000,0000,,Pamiętajcie, by patrzeć\Nna wartość pola do wprowadzania
Dialogue: 0,0:07:44.26,0:07:47.84,Default,,0000,0000,0000,,i sprawdzać ją w odpowiednim momencie.
Dialogue: 0,0:07:48.01,0:07:52.15,Default,,0000,0000,0000,,Poćwiczycie to w następnym zadaniu!