[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.06,0:00:04.00,Default,,0000,0000,0000,,Mam stronę z Koleżką-O-Nie,
Dialogue: 0,0:00:04.10,0:00:07.88,Default,,0000,0000,0000,,który panikuje,\Nbo myśli, że będzie koniec świata.
Dialogue: 0,0:00:07.98,0:00:10.87,Default,,0000,0000,0000,,Dokładnie za 500 sekund.
Dialogue: 0,0:00:11.02,0:00:13.51,Default,,0000,0000,0000,,Udoskonalę tę stronę.
Dialogue: 0,0:00:13.68,0:00:16.86,Default,,0000,0000,0000,,Zamiast liczby\Npokaże się licznik czasu.
Dialogue: 0,0:00:16.98,0:00:20.48,Default,,0000,0000,0000,,Odwiedzający będą widzieli,\Nile czasu im zostało.
Dialogue: 0,0:00:21.38,0:00:23.72,Default,,0000,0000,0000,,Żeby animować\Nczęść strony internetowej,
Dialogue: 0,0:00:23.79,0:00:26.86,Default,,0000,0000,0000,,wybieramy w niej jakiś element,
Dialogue: 0,0:00:26.96,0:00:29.27,Default,,0000,0000,0000,,w którym coś zmieniamy.
Dialogue: 0,0:00:29.37,0:00:32.79,Default,,0000,0000,0000,,Zmiana ma następować\Nokreśloną liczbę razy na sekundę.
Dialogue: 0,0:00:32.93,0:00:38.01,Default,,0000,0000,0000,,Zatem krok pierwszy.\NZnajdę licznik po ID.
Dialogue: 0,0:00:38.14,0:00:39.59,Default,,0000,0000,0000,,Proste.
Dialogue: 0,0:00:39.69,0:00:45.94,Default,,0000,0000,0000,,"var countdown = document\NgetElementById("countdown").
Dialogue: 0,0:00:47.53,0:00:48.96,Default,,0000,0000,0000,,Krok drugi.
Dialogue: 0,0:00:49.06,0:00:51.83,Default,,0000,0000,0000,,Zrobię funkcję, która odlicza wspak.
Dialogue: 0,0:00:51.97,0:00:55.19,Default,,0000,0000,0000,,"var countItDown = function()".
Dialogue: 0,0:00:55.26,0:00:59.37,Default,,0000,0000,0000,,Chcę tu zrobić "textContent".
Dialogue: 0,0:00:59.52,0:01:04.20,Default,,0000,0000,0000,,Wartość ma być równa poprzedniej\Nliczbie pomniejszonej o jeden.
Dialogue: 0,0:01:04.27,0:01:09.78,Default,,0000,0000,0000,,A "textContent" jest ciągiem,\Nwięc musimy zrobić z niego liczbę.
Dialogue: 0,0:01:09.88,0:01:12.84,Default,,0000,0000,0000,,Użyjemy w tym celu\Npolecenia "parsefloat()".
Dialogue: 0,0:01:12.99,0:01:15.14,Default,,0000,0000,0000,,I wtedy możemy odjąć 1.
Dialogue: 0,0:01:16.60,0:01:20.67,Default,,0000,0000,0000,,Dobrze. I w końcu chcemy\Nprzywoływać tę funkcję
Dialogue: 0,0:01:20.77,0:01:25.61,Default,,0000,0000,0000,,w określonych interwałach,\Nczyli pewną liczbę razy na sekundę.
Dialogue: 0,0:01:25.74,0:01:30.55,Default,,0000,0000,0000,,Możemy to zrobić, korzystając\Nz polecenia "window.setInterval()".
Dialogue: 0,0:01:30.65,0:01:34.06,Default,,0000,0000,0000,,Ta funkcja przyjmuje dwa argumenty:
Dialogue: 0,0:01:34.12,0:01:35.50,Default,,0000,0000,0000,,wywołanie zwrotne
Dialogue: 0,0:01:35.66,0:01:40.85,Default,,0000,0000,0000,,oraz liczbę milisekund do odczekania\Nprzed kolejnym przywołaniem funkcji.
Dialogue: 0,0:01:40.97,0:01:43.04,Default,,0000,0000,0000,,Możemy określić wywołanie zwrotne
Dialogue: 0,0:01:43.14,0:01:47.18,Default,,0000,0000,0000,,tak jak robimy to\Ndla detektora zdarzeń: po nazwie.
Dialogue: 0,0:01:47.29,0:01:51.57,Default,,0000,0000,0000,,I teraz - idzie bardzo szybko!\NBo nie wprowadziliśmy 2. argumentu.
Dialogue: 0,0:01:51.63,0:01:55.40,Default,,0000,0000,0000,,A musi to być\Nokreślona liczba milisekund.
Dialogue: 0,0:01:55.45,0:01:58.26,Default,,0000,0000,0000,,Tutaj interesuje nas 1s,\Nwięc wpiszemy 1000,
Dialogue: 0,0:01:58.38,0:02:01.15,Default,,0000,0000,0000,,bo w jednej sekundzie\Njest 1000 milisekund.
Dialogue: 0,0:02:01.25,0:02:04.06,Default,,0000,0000,0000,,I już. Teraz odlicza po sekundzie.
Dialogue: 0,0:02:04.83,0:02:09.36,Default,,0000,0000,0000,,Lepiej nauczcie się jak najwięcej\Nw ciągu najbliższych 490 sekund!
Dialogue: 0,0:02:10.75,0:02:14.84,Default,,0000,0000,0000,,Jest funkcja obiektu "window"\Nużywana zamiast "setInterval".
Dialogue: 0,0:02:14.94,0:02:16.76,Default,,0000,0000,0000,,To funkcja "setTimeout".
Dialogue: 0,0:02:16.91,0:02:19.69,Default,,0000,0000,0000,,Zmienię to tutaj,
Dialogue: 0,0:02:19.81,0:02:23.66,Default,,0000,0000,0000,,a wy spróbujcie zobaczyć różnicę.\NTrzeba chwilę zaczekać.
Dialogue: 0,0:02:23.78,0:02:28.26,Default,,0000,0000,0000,,Może teraz widzicie,\Nże gdy używamy polecenia "setTimeout",
Dialogue: 0,0:02:28.34,0:02:32.58,Default,,0000,0000,0000,,przeglądarka\Nprzywołuje funkcję jednokrotnie,
Dialogue: 0,0:02:32.70,0:02:34.74,Default,,0000,0000,0000,,nie raz po raz.
Dialogue: 0,0:02:34.86,0:02:38.92,Default,,0000,0000,0000,,To nie jest zbyt praktyczne\Nw animacjach,
Dialogue: 0,0:02:39.02,0:02:42.05,Default,,0000,0000,0000,,ale może się bardzo przydać\Nw innych przypadkach.
Dialogue: 0,0:02:42.15,0:02:45.12,Default,,0000,0000,0000,,Np. gdybyśmy pokazywali\Nużytkownikom ostrzeżenie,
Dialogue: 0,0:02:45.21,0:02:47.97,Default,,0000,0000,0000,,a po dziesięciu sekundach\Nchcieli je ukryć.
Dialogue: 0,0:02:49.44,0:02:52.77,Default,,0000,0000,0000,,Zmienię to więc\Nz powrotem na "setInterval".
Dialogue: 0,0:02:53.80,0:02:56.45,Default,,0000,0000,0000,,Testując takie animacje,
Dialogue: 0,0:02:56.63,0:03:00.63,Default,,0000,0000,0000,,sprawdzajmy,\Nco się dzieje w każdym punkcie.
Dialogue: 0,0:03:00.73,0:03:03.07,Default,,0000,0000,0000,,Np. w punkcie 0.
Dialogue: 0,0:03:03.17,0:03:06.36,Default,,0000,0000,0000,,Dużo odliczania. Zanudzilibyście się!
Dialogue: 0,0:03:06.46,0:03:12.38,Default,,0000,0000,0000,,Dlatego zmienimy wartość początkową\Nna 5 i zobaczymy, co będzie.
Dialogue: 0,0:03:12.52,0:03:16.76,Default,,0000,0000,0000,,4, 3, 2, 1, 0...
Dialogue: 0,0:03:17.30,0:03:21.76,Default,,0000,0000,0000,,minus 1, minus 2... No dobrze.\NRobi się dziwnie!
Dialogue: 0,0:03:21.88,0:03:26.63,Default,,0000,0000,0000,,W chwili, gdy świat się skończy,\Nlicznik powinien huknąć i zatrzymać się.
Dialogue: 0,0:03:26.78,0:03:30.22,Default,,0000,0000,0000,,Chcemy więc przerwać animację,
Dialogue: 0,0:03:30.32,0:03:32.83,Default,,0000,0000,0000,,gdy pokaże się 0.
Dialogue: 0,0:03:32.95,0:03:36.83,Default,,0000,0000,0000,,Możemy to zrobić za pomocą\Nwarunku "if" wewnątrz funkcji.
Dialogue: 0,0:03:36.96,0:03:39.49,Default,,0000,0000,0000,,Najpierw...
Dialogue: 0,0:03:39.62,0:03:44.65,Default,,0000,0000,0000,,przechowam bieżący czas w zmiennej,\Nbo będzie używany kilkakrotnie.
Dialogue: 0,0:03:44.75,0:03:49.81,Default,,0000,0000,0000,,Zaznaczę to, przeniosę tutaj\Ni wpiszę "currentTime".
Dialogue: 0,0:03:50.80,0:03:55.80,Default,,0000,0000,0000,,A teraz: mogę zrobić warunek "if",
Dialogue: 0,0:03:55.90,0:03:58.64,Default,,0000,0000,0000,,który dopilnuje,\Nby tekst był uaktualniany
Dialogue: 0,0:03:58.74,0:04:01.44,Default,,0000,0000,0000,,tylko przy "currentTime" > 0.
Dialogue: 0,0:04:01.50,0:04:04.99,Default,,0000,0000,0000,,Tylko wtedy ma odejmować 1.
Dialogue: 0,0:04:05.10,0:04:08.27,Default,,0000,0000,0000,,Muszę więc przenieść to tutaj.
Dialogue: 0,0:04:11.45,0:04:15.28,Default,,0000,0000,0000,,To działa,\Nale w tej metodzie coś nie gra.
Dialogue: 0,0:04:15.39,0:04:19.71,Default,,0000,0000,0000,,Przeglądarka przywołuje funkcję\N"countItDown" raz na sekundę,
Dialogue: 0,0:04:19.83,0:04:22.06,Default,,0000,0000,0000,,póki ta strona nie zostanie zamknięta.
Dialogue: 0,0:04:22.16,0:04:25.36,Default,,0000,0000,0000,,Nie każcie przeglądarkom\Nprzywoływać funkcji bez powodu.
Dialogue: 0,0:04:25.45,0:04:28.28,Default,,0000,0000,0000,,Mają mnóstwo innych\Nważnych rzeczy do roboty.
Dialogue: 0,0:04:28.33,0:04:32.25,Default,,0000,0000,0000,,Chcemy powiedzieć przeglądarce,\Nże kiedy licznik dojdzie do 0,
Dialogue: 0,0:04:32.36,0:04:35.88,Default,,0000,0000,0000,,nie trzeba już\Nprzywoływać tej funkcji.
Dialogue: 0,0:04:35.98,0:04:40.33,Default,,0000,0000,0000,,Możemy to zrobić za pomocą\Nnowej metody: "window.clearInterval()".
Dialogue: 0,0:04:41.17,0:04:43.89,Default,,0000,0000,0000,,Umieścimy to w tym "else":
Dialogue: 0,0:04:43.99,0:04:46.90,Default,,0000,0000,0000,,"window.clearInterval()".
Dialogue: 0,0:04:47.87,0:04:52.18,Default,,0000,0000,0000,,Wprowadzimy argument, by przeglądarka\Nwiedziała, który interwał usunąć.
Dialogue: 0,0:04:52.26,0:04:56.17,Default,,0000,0000,0000,,Bo przecież na stronie\Nmoże być ich wiele!
Dialogue: 0,0:04:56.27,0:04:58.77,Default,,0000,0000,0000,,A żeby wiedzieć,\Nktóry interwał usunąć,
Dialogue: 0,0:04:58.87,0:05:03.23,Default,,0000,0000,0000,,przechowujemy\Nwynik "setInterval" w zmiennej.
Dialogue: 0,0:05:03.33,0:05:05.29,Default,,0000,0000,0000,,Mam go teraz w zmiennej licznika;
Dialogue: 0,0:05:05.39,0:05:09.30,Default,,0000,0000,0000,,skopiuję, wkleję...\N- i przeglądarka wie, co wyczyścić.
Dialogue: 0,0:05:09.40,0:05:11.18,Default,,0000,0000,0000,,Kiedy licznik dojdzie do 0,
Dialogue: 0,0:05:11.28,0:05:16.14,Default,,0000,0000,0000,,przeglądarka przestanie aktualizować\Ni przywoływać tę funkcję.
Dialogue: 0,0:05:16.25,0:05:21.64,Default,,0000,0000,0000,,Przy każdej animacji zastanówcie się,\Njaki warunek ma ją zatrzymywać.
Dialogue: 0,0:05:21.74,0:05:26.31,Default,,0000,0000,0000,,Oczywiście, możecie robić animacje,\Nktóre powinny trwać bez końca,
Dialogue: 0,0:05:26.40,0:05:29.30,Default,,0000,0000,0000,,ale starajcie się, żeby były miłe!
Dialogue: 0,0:05:29.36,0:05:33.65,Default,,0000,0000,0000,,Bo przecież przeglądarka pracuje,\Nprzywołując tę funkcję.
Dialogue: 0,0:05:33.76,0:05:37.62,Default,,0000,0000,0000,,A teraz sprawcie,\Nże będzie wielkie "bum!".