0:00:01.058,0:00:04.003
Mam stronę z Koleżką-O-Nie,

0:00:04.104,0:00:07.876
który panikuje,[br]bo myśli, że będzie koniec świata.

0:00:07.976,0:00:10.866
Dokładnie za 500 sekund.

0:00:11.023,0:00:13.514
Udoskonalę tę stronę.

0:00:13.682,0:00:16.857
Zamiast liczby[br]pokaże się licznik czasu.

0:00:16.975,0:00:20.480
Odwiedzający będą widzieli,[br]ile czasu im zostało.

0:00:21.385,0:00:23.724
Żeby animować[br]część strony internetowej,

0:00:23.786,0:00:26.865
wybieramy w niej jakiś element,

0:00:26.956,0:00:29.268
w którym coś zmieniamy.

0:00:29.368,0:00:32.786
Zmiana ma następować[br]określoną liczbę razy na sekundę.

0:00:32.928,0:00:38.011
Zatem krok pierwszy.[br]Znajdę licznik po ID.

0:00:38.143,0:00:39.590
Proste.

0:00:39.690,0:00:45.936
"var countdown = document[br]getElementById("countdown").

0:00:47.531,0:00:48.962
Krok drugi.

0:00:49.065,0:00:51.826
Zrobię funkcję, która odlicza wspak.

0:00:51.969,0:00:55.193
"var countItDown = function()".

0:00:55.262,0:00:59.373
Chcę tu zrobić "textContent".

0:00:59.516,0:01:04.203
Wartość ma być równa poprzedniej[br]liczbie pomniejszonej o jeden.

0:01:04.272,0:01:09.783
A "textContent" jest ciągiem,[br]więc musimy zrobić z niego liczbę.

0:01:09.883,0:01:12.840
Użyjemy w tym celu[br]polecenia "parsefloat()".

0:01:12.994,0:01:15.139
I wtedy możemy odjąć 1.

0:01:16.602,0:01:20.666
Dobrze. I w końcu chcemy[br]przywoływać tę funkcję

0:01:20.766,0:01:25.611
w określonych interwałach,[br]czyli pewną liczbę razy na sekundę.

0:01:25.736,0:01:30.550
Możemy to zrobić, korzystając[br]z polecenia "window.setInterval()".

0:01:30.650,0:01:34.064
Ta funkcja przyjmuje dwa argumenty:

0:01:34.121,0:01:35.503
wywołanie zwrotne

0:01:35.655,0:01:40.850
oraz liczbę milisekund do odczekania[br]przed kolejnym przywołaniem funkcji.

0:01:40.973,0:01:43.038
Możemy określić wywołanie zwrotne

0:01:43.138,0:01:47.183
tak jak robimy to[br]dla detektora zdarzeń: po nazwie.

0:01:47.293,0:01:51.571
I teraz - idzie bardzo szybko![br]Bo nie wprowadziliśmy 2. argumentu.

0:01:51.628,0:01:55.403
A musi to być[br]określona liczba milisekund.

0:01:55.453,0:01:58.259
Tutaj interesuje nas 1s,[br]więc wpiszemy 1000,

0:01:58.378,0:02:01.153
bo w jednej sekundzie[br]jest 1000 milisekund.

0:02:01.253,0:02:04.064
I już. Teraz odlicza po sekundzie.

0:02:04.830,0:02:09.358
Lepiej nauczcie się jak najwięcej[br]w ciągu najbliższych 490 sekund!

0:02:10.751,0:02:14.842
Jest funkcja obiektu "window"[br]używana zamiast "setInterval".

0:02:14.944,0:02:16.764
To funkcja "setTimeout".

0:02:16.908,0:02:19.691
Zmienię to tutaj,

0:02:19.812,0:02:23.661
a wy spróbujcie zobaczyć różnicę.[br]Trzeba chwilę zaczekać.

0:02:23.780,0:02:28.259
Może teraz widzicie,[br]że gdy używamy polecenia "setTimeout",

0:02:28.340,0:02:32.578
przeglądarka[br]przywołuje funkcję jednokrotnie,

0:02:32.697,0:02:34.737
nie raz po raz.

0:02:34.865,0:02:38.917
To nie jest zbyt praktyczne[br]w animacjach,

0:02:39.017,0:02:42.052
ale może się bardzo przydać[br]w innych przypadkach.

0:02:42.146,0:02:45.117
Np. gdybyśmy pokazywali[br]użytkownikom ostrzeżenie,

0:02:45.214,0:02:47.973
a po dziesięciu sekundach[br]chcieli je ukryć.

0:02:49.436,0:02:52.767
Zmienię to więc[br]z powrotem na "setInterval".

0:02:53.801,0:02:56.448
Testując takie animacje,

0:02:56.626,0:03:00.628
sprawdzajmy,[br]co się dzieje w każdym punkcie.

0:03:00.728,0:03:03.066
Np. w punkcie 0.

0:03:03.171,0:03:06.357
Dużo odliczania. Zanudzilibyście się!

0:03:06.457,0:03:12.377
Dlatego zmienimy wartość początkową[br]na 5 i zobaczymy, co będzie.

0:03:12.518,0:03:16.765
4, 3, 2, 1, 0...

0:03:17.303,0:03:21.762
minus 1, minus 2... No dobrze.[br]Robi się dziwnie!

0:03:21.885,0:03:26.634
W chwili, gdy świat się skończy,[br]licznik powinien huknąć i zatrzymać się.

0:03:26.778,0:03:30.216
Chcemy więc przerwać animację,

0:03:30.316,0:03:32.833
gdy pokaże się 0.

0:03:32.949,0:03:36.827
Możemy to zrobić za pomocą[br]warunku "if" wewnątrz funkcji.

0:03:36.958,0:03:39.494
Najpierw...

0:03:39.617,0:03:44.653
przechowam bieżący czas w zmiennej,[br]bo będzie używany kilkakrotnie.

0:03:44.753,0:03:49.807
Zaznaczę to, przeniosę tutaj[br]i wpiszę "currentTime".

0:03:50.804,0:03:55.797
A teraz: mogę zrobić warunek "if",

0:03:55.897,0:03:58.644
który dopilnuje,[br]by tekst był uaktualniany

0:03:58.744,0:04:01.440
tylko przy "currentTime" > 0.

0:04:01.501,0:04:04.993
Tylko wtedy ma odejmować 1.

0:04:05.101,0:04:08.267
Muszę więc przenieść to tutaj.

0:04:11.448,0:04:15.280
To działa,[br]ale w tej metodzie coś nie gra.

0:04:15.388,0:04:19.714
Przeglądarka przywołuje funkcję[br]"countItDown" raz na sekundę,

0:04:19.826,0:04:22.055
póki ta strona nie zostanie zamknięta.

0:04:22.156,0:04:25.357
Nie każcie przeglądarkom[br]przywoływać funkcji bez powodu.

0:04:25.451,0:04:28.283
Mają mnóstwo innych[br]ważnych rzeczy do roboty.

0:04:28.334,0:04:32.253
Chcemy powiedzieć przeglądarce,[br]że kiedy licznik dojdzie do 0,

0:04:32.364,0:04:35.876
nie trzeba już[br]przywoływać tej funkcji.

0:04:35.984,0:04:40.334
Możemy to zrobić za pomocą[br]nowej metody: "window.clearInterval()".

0:04:41.170,0:04:43.887
Umieścimy to w tym "else":

0:04:43.987,0:04:46.905
"window.clearInterval()".

0:04:47.867,0:04:52.182
Wprowadzimy argument, by przeglądarka[br]wiedziała, który interwał usunąć.

0:04:52.264,0:04:56.170
Bo przecież na stronie[br]może być ich wiele!

0:04:56.270,0:04:58.771
A żeby wiedzieć,[br]który interwał usunąć,

0:04:58.870,0:05:03.229
przechowujemy[br]wynik "setInterval" w zmiennej.

0:05:03.329,0:05:05.292
Mam go teraz w zmiennej licznika;

0:05:05.394,0:05:09.301
skopiuję, wkleję...[br]- i przeglądarka wie, co wyczyścić.

0:05:09.401,0:05:11.184
Kiedy licznik dojdzie do 0,

0:05:11.284,0:05:16.139
przeglądarka przestanie aktualizować[br]i przywoływać tę funkcję.

0:05:16.254,0:05:21.642
Przy każdej animacji zastanówcie się,[br]jaki warunek ma ją zatrzymywać.

0:05:21.736,0:05:26.310
Oczywiście, możecie robić animacje,[br]które powinny trwać bez końca,

0:05:26.399,0:05:29.305
ale starajcie się, żeby były miłe!

0:05:29.364,0:05:33.647
Bo przecież przeglądarka pracuje,[br]przywołując tę funkcję.

0:05:33.762,0:05:37.618
A teraz sprawcie,[br]że będzie wielkie "bum!".