[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.64,0:00:05.50,Default,,0000,0000,0000,,Zrobiłam tę "nudną stronę"\Ndo zabawy.
Dialogue: 0,0:00:05.60,0:00:08.31,Default,,0000,0000,0000,,Na razie rzeczywiście jest nudna!
Dialogue: 0,0:00:08.46,0:00:10.61,Default,,0000,0000,0000,,Nie zawiera żadnej treści,
Dialogue: 0,0:00:10.75,0:00:15.90,Default,,0000,0000,0000,,a ten przycisk\Nnie reaguje na kliknięcie.
Dialogue: 0,0:00:16.08,0:00:18.69,Default,,0000,0000,0000,,Sprawmy, żeby był interaktywny.
Dialogue: 0,0:00:18.77,0:00:20.24,Default,,0000,0000,0000,,Gdy użytkownik klika,
Dialogue: 0,0:00:20.28,0:00:24.06,Default,,0000,0000,0000,,tekst na przycisku\Npowinien się zmienić.
Dialogue: 0,0:00:24.17,0:00:29.98,Default,,0000,0000,0000,,Pierwszy krok - to znaleźć element,\Nktóry ma prowadzić nasłuch zdarzeń.
Dialogue: 0,0:00:30.09,0:00:32.51,Default,,0000,0000,0000,,W tym przypadku - to przycisk.
Dialogue: 0,0:00:32.63,0:00:35.29,Default,,0000,0000,0000,,Rozpoznaje kliknięcie.
Dialogue: 0,0:00:35.44,0:00:39.54,Default,,0000,0000,0000,,Stworzymy zmienną "clickerButton"
Dialogue: 0,0:00:39.63,0:00:44.88,Default,,0000,0000,0000,,i użyjemy polecenia\N"document.getElementById",
Dialogue: 0,0:00:45.47,0:00:49.16,Default,,0000,0000,0000,,żeby pozyskało element\Ni przechowywało go w tej zmiennej.
Dialogue: 0,0:00:49.30,0:00:53.20,Default,,0000,0000,0000,,Następny krok\N- to zdefiniować funkcję,
Dialogue: 0,0:00:53.30,0:00:57.78,Default,,0000,0000,0000,,która będzie przywołana\Nzaraz po zdarzeniu "kliknięcie".
Dialogue: 0,0:00:57.88,0:01:01.70,Default,,0000,0000,0000,,Nazwę ją "onButtonClick"\N(kliknięcie w przycisk)...
Dialogue: 0,0:01:02.72,0:01:06.68,Default,,0000,0000,0000,,i... umieszczę tu\Ntylko pustą funkcję...
Dialogue: 0,0:01:06.82,0:01:12.00,Default,,0000,0000,0000,,no i muszę zawrzeć coś wewnątrz.\NBo funkcja nie zrobi nic ciekawego.
Dialogue: 0,0:01:12.14,0:01:16.60,Default,,0000,0000,0000,,Żeby zmienić tekst na przycisku,\Nmożemy użyć zmiennej "clickerButton"
Dialogue: 0,0:01:16.74,0:01:19.60,Default,,0000,0000,0000,,i ustalić "textContent"\N(zawartość tekstową).
Dialogue: 0,0:01:19.69,0:01:23.14,Default,,0000,0000,0000,,"No, no! Kliknęliście na mnie!".
Dialogue: 0,0:01:23.28,0:01:25.66,Default,,0000,0000,0000,,Przycisk się ucieszył!
Dialogue: 0,0:01:26.89,0:01:32.81,Default,,0000,0000,0000,,Kodu jest mało, ale później zrobimy coś\Nskomplikowanego. Gdy to zacznie działać.
Dialogue: 0,0:01:32.91,0:01:37.55,Default,,0000,0000,0000,,Kody, które do tej pory pisaliśmy,\Ntylko definiowały zmienne.
Dialogue: 0,0:01:37.62,0:01:41.86,Default,,0000,0000,0000,,Nadal więc nie ma reakcji\Nna kliknięcie na przycisk.
Dialogue: 0,0:01:42.01,0:01:44.89,Default,,0000,0000,0000,,Ostateczny krok,\Nktóry to wszystko połączy,
Dialogue: 0,0:01:45.05,0:01:46.79,Default,,0000,0000,0000,,to powiedzieć przeglądarce,
Dialogue: 0,0:01:46.86,0:01:50.13,Default,,0000,0000,0000,,że ma przywołać\Nzdefiniowaną przez nas funkcję,
Dialogue: 0,0:01:50.26,0:01:54.59,Default,,0000,0000,0000,,kiedy tylko nastąpi\Nkliknięcie na przycisk.
Dialogue: 0,0:01:54.72,0:01:58.91,Default,,0000,0000,0000,,Zrobimy to, przywołując "add event\Nlistener" (dodaj detektor zdarzeń)
Dialogue: 0,0:01:59.06,0:02:00.58,Default,,0000,0000,0000,,na elemencie "przycisk".
Dialogue: 0,0:02:00.76,0:02:05.94,Default,,0000,0000,0000,,Piszemy:\N"clickerButton.addeventlistener".
Dialogue: 0,0:02:06.08,0:02:10.68,Default,,0000,0000,0000,,Musimy wprowadzić dwa argumenty.
Dialogue: 0,0:02:10.75,0:02:14.58,Default,,0000,0000,0000,,Pierwszy to nazwa zdarzenia:\N"kliknięcie",
Dialogue: 0,0:02:14.71,0:02:18.14,Default,,0000,0000,0000,,a drugi - to funkcja,\Nktórą chcemy przywołać,
Dialogue: 0,0:02:18.23,0:02:21.66,Default,,0000,0000,0000,,gdy dochodzi do kliknięcia:\N"onButtonClick".
Dialogue: 0,0:02:22.96,0:02:26.61,Default,,0000,0000,0000,,Teraz zatrzymajcie film\Ni kliknijcie na przycisk.
Dialogue: 0,0:02:28.91,0:02:32.02,Default,,0000,0000,0000,,Udało się? Mam nadzieję!\NU mnie - tak.
Dialogue: 0,0:02:32.93,0:02:38.15,Default,,0000,0000,0000,,Pomówmy więcej o działaniu tej funkcji,\Nbo sprawa jest dość skomplikowana.
Dialogue: 0,0:02:38.28,0:02:42.31,Default,,0000,0000,0000,,Nazywamy tę funkcję "eventListener"\N(detektorem zdarzeń),
Dialogue: 0,0:02:42.42,0:02:46.88,Default,,0000,0000,0000,,lub "callback" (wywołaniem zwrotnym),\Nbo w ten sposób jej używamy.
Dialogue: 0,0:02:47.02,0:02:50.85,Default,,0000,0000,0000,,Życzymy sobie, by była\Nprzywoływana tylko po zdarzeniu.
Dialogue: 0,0:02:50.90,0:02:55.66,Default,,0000,0000,0000,,Na ogół nie chcemy, by była\Nprzywoływana podczas ładowania strony.
Dialogue: 0,0:02:55.80,0:02:58.24,Default,,0000,0000,0000,,A gdybyśmy tego chcieli,
Dialogue: 0,0:02:58.34,0:03:01.93,Default,,0000,0000,0000,,musielibyśmy dodać\Ntaki wiersz na dole.
Dialogue: 0,0:03:03.74,0:03:06.15,Default,,0000,0000,0000,,Zwróćcie uwagę na nawiasy.
Dialogue: 0,0:03:06.26,0:03:09.58,Default,,0000,0000,0000,,Pamiętajcie: za pomocą nawiasów\Nprzywołujemy funkcję.
Dialogue: 0,0:03:09.68,0:03:11.54,Default,,0000,0000,0000,,Jeśli je zostawimy tak, jak są,
Dialogue: 0,0:03:11.64,0:03:15.51,Default,,0000,0000,0000,,nie przywołamy funkcji,\Ntylko odniesiemy się do niej.
Dialogue: 0,0:03:15.60,0:03:18.100,Default,,0000,0000,0000,,To właśnie robimy,\Ngdy wprowadzamy to jako argument.
Dialogue: 0,0:03:19.08,0:03:21.04,Default,,0000,0000,0000,,Po prostu mówimy przeglądarce:
Dialogue: 0,0:03:21.14,0:03:25.50,Default,,0000,0000,0000,,"Tu jest funkcja, którą masz\Nprzywołać później, ale nie teraz".
Dialogue: 0,0:03:27.35,0:03:32.44,Default,,0000,0000,0000,,Pamiętajcie, żeby nie dawać nawiasów\Npo nazwie funkcji tutaj,
Dialogue: 0,0:03:32.48,0:03:37.85,Default,,0000,0000,0000,,bo wtedy będziecie tylko wprowadzać\Nwartość zwrotną funkcji, nie funkcję.
Dialogue: 0,0:03:37.94,0:03:42.08,Default,,0000,0000,0000,,Gdybym przypadkiem to zrobiła,\Ntekst na przycisku zmieniłby się
Dialogue: 0,0:03:42.17,0:03:44.76,Default,,0000,0000,0000,,podczas ładowania,\Nale później już nie.
Dialogue: 0,0:03:44.86,0:03:48.78,Default,,0000,0000,0000,,Żeby to naprawić, usuwam nawiasy,\Nktóre przypadkowo dodałam,
Dialogue: 0,0:03:48.88,0:03:52.73,Default,,0000,0000,0000,,i teraz moja funkcja\Nzostaje przywołana tylko kliknięciem.
Dialogue: 0,0:03:53.86,0:03:56.42,Default,,0000,0000,0000,,Inny sposób,\Nw który możemy to osiągnąć,
Dialogue: 0,0:03:56.52,0:04:02.51,Default,,0000,0000,0000,,to wprowadzić do metody\Nfunkcję anonimową.
Dialogue: 0,0:04:02.60,0:04:06.02,Default,,0000,0000,0000,,Taka funkcja nie ma nazwy.
Dialogue: 0,0:04:06.09,0:04:10.26,Default,,0000,0000,0000,,Piszemy po prostu "inline".
Dialogue: 0,0:04:10.39,0:04:15.00,Default,,0000,0000,0000,,Skopiuję i wkleję wiersz\N"addEventListener"
Dialogue: 0,0:04:15.10,0:04:20.20,Default,,0000,0000,0000,,i pokażę wam tę opcję obok,\Nżebyście zobaczyli, o co mi chodzi.
Dialogue: 0,0:04:20.38,0:04:22.54,Default,,0000,0000,0000,,Skasuję nazwę funkcji tutaj
Dialogue: 0,0:04:22.64,0:04:26.16,Default,,0000,0000,0000,,i zastąpię ją funkcją z definicją.
Dialogue: 0,0:04:26.26,0:04:29.88,Default,,0000,0000,0000,,Wklejam to tutaj.
Dialogue: 0,0:04:31.18,0:04:34.33,Default,,0000,0000,0000,,Dobrze. Te dwie linie kodu
Dialogue: 0,0:04:34.43,0:04:37.78,Default,,0000,0000,0000,,robią dokładnie to samo.
Dialogue: 0,0:04:37.88,0:04:39.71,Default,,0000,0000,0000,,No, prawie.
Dialogue: 0,0:04:39.82,0:04:44.24,Default,,0000,0000,0000,,Obie wprowadzają funkcję\Nz tym samym kodem wewnątrz.
Dialogue: 0,0:04:44.34,0:04:48.28,Default,,0000,0000,0000,,Różnica polega na tym, że pierwsza\Nwprowadza nazwaną funkcję,
Dialogue: 0,0:04:48.32,0:04:50.15,Default,,0000,0000,0000,,którą określiliśmy powyżej,
Dialogue: 0,0:04:50.24,0:04:54.82,Default,,0000,0000,0000,,a druga definiuje\Nfunkcję anonimową "inline",
Dialogue: 0,0:04:54.98,0:04:58.24,Default,,0000,0000,0000,,jednocześnie z uruchomieniem jej.
Dialogue: 0,0:04:58.36,0:04:59.94,Default,,0000,0000,0000,,Obie metody się sprawdzają.
Dialogue: 0,0:05:00.01,0:05:02.76,Default,,0000,0000,0000,,Wielu projektantów stron\Nwoli funkcje nazwane,
Dialogue: 0,0:05:02.87,0:05:06.87,Default,,0000,0000,0000,,bo kod jest czytelniejszy\Ni nieco łatwiejszy do debugowania.
Dialogue: 0,0:05:07.00,0:05:09.86,Default,,0000,0000,0000,,Możecie przywołać nazwane funkcje sami
Dialogue: 0,0:05:09.96,0:05:13.35,Default,,0000,0000,0000,,- kiedy indziej lub w związku\Nz innymi zdarzeniami.
Dialogue: 0,0:05:13.45,0:05:17.57,Default,,0000,0000,0000,,Od was zależy, czego użyjecie.\NNie stosujcie obu metod naraz,
Dialogue: 0,0:05:17.67,0:05:21.71,Default,,0000,0000,0000,,bo przeglądarka przywoła\Nobie funkcje, gdy nastąpi kliknięcie.
Dialogue: 0,0:05:21.80,0:05:25.89,Default,,0000,0000,0000,,A nie ma sensu\Nprzywoływać tej funkcji dwa razy.
Dialogue: 0,0:05:25.99,0:05:29.10,Default,,0000,0000,0000,,Skasuję wersję z funkcją anonimową,
Dialogue: 0,0:05:29.23,0:05:30.91,Default,,0000,0000,0000,,bo wolę pierwszy sposób.
Dialogue: 0,0:05:32.11,0:05:35.30,Default,,0000,0000,0000,,Możecie dużo zrobić,\Numiejąc dodawać detektory zdarzeń.
Dialogue: 0,0:05:35.40,0:05:37.87,Default,,0000,0000,0000,,Dodacie je w innych częściach strony,
Dialogue: 0,0:05:38.01,0:05:41.64,Default,,0000,0000,0000,,będziecie nasłuchiwać zdarzeń...\NO tym - następnym razem.
Dialogue: 0,0:05:41.69,0:05:45.81,Default,,0000,0000,0000,,I możecie modyfikować DOM\Nna wszystkie sposoby, które już znacie.
Dialogue: 0,0:05:45.92,0:05:49.72,Default,,0000,0000,0000,,Nie ograniczajcie się do elementu,\Nz którym zaszła interakcja.
Dialogue: 0,0:05:49.81,0:05:52.50,Default,,0000,0000,0000,,Możecie modyfikować\Nwszystko na stronie.
Dialogue: 0,0:05:52.65,0:05:55.84,Default,,0000,0000,0000,,Wypróbujcie to.\NPrzekonajcie się, co można zrobić.