WEBVTT

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

00:00:04.104 --> 00:00:07.876
który panikuje,
bo myśli, że będzie koniec świata.

00:00:07.976 --> 00:00:10.866
Dokładnie za 500 sekund.

00:00:11.023 --> 00:00:13.514
Udoskonalę tę stronę.

00:00:13.682 --> 00:00:16.857
Zamiast liczby
pokaże się licznik czasu.

00:00:16.975 --> 00:00:20.480
Odwiedzający będą widzieli,
ile czasu im zostało.

00:00:21.385 --> 00:00:23.724
Żeby animować
część strony internetowej,

00:00:23.786 --> 00:00:26.865
wybieramy w niej jakiś element,

00:00:26.956 --> 00:00:29.268
w którym coś zmieniamy.

00:00:29.368 --> 00:00:32.786
Zmiana ma następować
określoną liczbę razy na sekundę.

00:00:32.928 --> 00:00:38.011
Zatem krok pierwszy.
Znajdę licznik po ID.

00:00:38.143 --> 00:00:39.590
Proste.

00:00:39.690 --> 00:00:45.936
"var countdown = document
getElementById("countdown").

00:00:47.531 --> 00:00:48.962
Krok drugi.

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

00:00:51.969 --> 00:00:55.193
"var countItDown = function()".

00:00:55.262 --> 00:00:59.373
Chcę tu zrobić "textContent".

00:00:59.516 --> 00:01:04.203
Wartość ma być równa poprzedniej
liczbie pomniejszonej o jeden.

00:01:04.272 --> 00:01:09.783
A "textContent" jest ciągiem,
więc musimy zrobić z niego liczbę.

00:01:09.883 --> 00:01:12.840
Użyjemy w tym celu
polecenia "parsefloat()".

00:01:12.994 --> 00:01:15.139
I wtedy możemy odjąć 1.

00:01:16.602 --> 00:01:20.666
Dobrze. I w końcu chcemy
przywoływać tę funkcję

00:01:20.766 --> 00:01:25.611
w określonych interwałach,
czyli pewną liczbę razy na sekundę.

00:01:25.736 --> 00:01:30.550
Możemy to zrobić, korzystając
z polecenia "window.setInterval()".

00:01:30.650 --> 00:01:34.064
Ta funkcja przyjmuje dwa argumenty:

00:01:34.121 --> 00:01:35.503
wywołanie zwrotne

00:01:35.655 --> 00:01:40.850
oraz liczbę milisekund do odczekania
przed kolejnym przywołaniem funkcji.

00:01:40.973 --> 00:01:43.038
Możemy określić wywołanie zwrotne

00:01:43.138 --> 00:01:47.183
tak jak robimy to
dla detektora zdarzeń: po nazwie.

00:01:47.293 --> 00:01:51.571
I teraz - idzie bardzo szybko!
Bo nie wprowadziliśmy 2. argumentu.

00:01:51.628 --> 00:01:55.403
A musi to być
określona liczba milisekund.

00:01:55.453 --> 00:01:58.259
Tutaj interesuje nas 1s,
więc wpiszemy 1000,

00:01:58.378 --> 00:02:01.153
bo w jednej sekundzie
jest 1000 milisekund.

00:02:01.253 --> 00:02:04.064
I już. Teraz odlicza po sekundzie.

00:02:04.830 --> 00:02:09.358
Lepiej nauczcie się jak najwięcej
w ciągu najbliższych 490 sekund!

00:02:10.751 --> 00:02:14.842
Jest funkcja obiektu "window"
używana zamiast "setInterval".

00:02:14.944 --> 00:02:16.764
To funkcja "setTimeout".

00:02:16.908 --> 00:02:19.691
Zmienię to tutaj,

00:02:19.812 --> 00:02:23.661
a wy spróbujcie zobaczyć różnicę.
Trzeba chwilę zaczekać.

00:02:23.780 --> 00:02:28.259
Może teraz widzicie,
że gdy używamy polecenia "setTimeout",

00:02:28.340 --> 00:02:32.578
przeglądarka
przywołuje funkcję jednokrotnie,

00:02:32.697 --> 00:02:34.737
nie raz po raz.

00:02:34.865 --> 00:02:38.917
To nie jest zbyt praktyczne
w animacjach,

00:02:39.017 --> 00:02:42.052
ale może się bardzo przydać
w innych przypadkach.

00:02:42.146 --> 00:02:45.117
Np. gdybyśmy pokazywali
użytkownikom ostrzeżenie,

00:02:45.214 --> 00:02:47.973
a po dziesięciu sekundach
chcieli je ukryć.

00:02:49.436 --> 00:02:52.767
Zmienię to więc
z powrotem na "setInterval".

00:02:53.801 --> 00:02:56.448
Testując takie animacje,

00:02:56.626 --> 00:03:00.628
sprawdzajmy,
co się dzieje w każdym punkcie.

00:03:00.728 --> 00:03:03.066
Np. w punkcie 0.

00:03:03.171 --> 00:03:06.357
Dużo odliczania. Zanudzilibyście się!

00:03:06.457 --> 00:03:12.377
Dlatego zmienimy wartość początkową
na 5 i zobaczymy, co będzie.

00:03:12.518 --> 00:03:16.765
4, 3, 2, 1, 0...

00:03:17.303 --> 00:03:21.762
minus 1, minus 2... No dobrze.
Robi się dziwnie!

00:03:21.885 --> 00:03:26.634
W chwili, gdy świat się skończy,
licznik powinien huknąć i zatrzymać się.

00:03:26.778 --> 00:03:30.216
Chcemy więc przerwać animację,

00:03:30.316 --> 00:03:32.833
gdy pokaże się 0.

00:03:32.949 --> 00:03:36.827
Możemy to zrobić za pomocą
warunku "if" wewnątrz funkcji.

00:03:36.958 --> 00:03:39.494
Najpierw...

00:03:39.617 --> 00:03:44.653
przechowam bieżący czas w zmiennej,
bo będzie używany kilkakrotnie.

00:03:44.753 --> 00:03:49.807
Zaznaczę to, przeniosę tutaj
i wpiszę "currentTime".

00:03:50.804 --> 00:03:55.797
A teraz: mogę zrobić warunek "if",

00:03:55.897 --> 00:03:58.644
który dopilnuje,
by tekst był uaktualniany

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

00:04:01.501 --> 00:04:04.993
Tylko wtedy ma odejmować 1.

00:04:05.101 --> 00:04:08.267
Muszę więc przenieść to tutaj.

00:04:11.448 --> 00:04:15.280
To działa,
ale w tej metodzie coś nie gra.

00:04:15.388 --> 00:04:19.714
Przeglądarka przywołuje funkcję
"countItDown" raz na sekundę,

00:04:19.826 --> 00:04:22.055
póki ta strona nie zostanie zamknięta.

00:04:22.156 --> 00:04:25.357
Nie każcie przeglądarkom
przywoływać funkcji bez powodu.

00:04:25.451 --> 00:04:28.283
Mają mnóstwo innych
ważnych rzeczy do roboty.

00:04:28.334 --> 00:04:32.253
Chcemy powiedzieć przeglądarce,
że kiedy licznik dojdzie do 0,

00:04:32.364 --> 00:04:35.876
nie trzeba już
przywoływać tej funkcji.

00:04:35.984 --> 00:04:40.334
Możemy to zrobić za pomocą
nowej metody: "window.clearInterval()".

00:04:41.170 --> 00:04:43.887
Umieścimy to w tym "else":

00:04:43.987 --> 00:04:46.905
"window.clearInterval()".

00:04:47.867 --> 00:04:52.182
Wprowadzimy argument, by przeglądarka
wiedziała, który interwał usunąć.

00:04:52.264 --> 00:04:56.170
Bo przecież na stronie
może być ich wiele!

00:04:56.270 --> 00:04:58.771
A żeby wiedzieć,
który interwał usunąć,

00:04:58.870 --> 00:05:03.229
przechowujemy
wynik "setInterval" w zmiennej.

00:05:03.329 --> 00:05:05.292
Mam go teraz w zmiennej licznika;

00:05:05.394 --> 00:05:09.301
skopiuję, wkleję...
- i przeglądarka wie, co wyczyścić.

00:05:09.401 --> 00:05:11.184
Kiedy licznik dojdzie do 0,

00:05:11.284 --> 00:05:16.139
przeglądarka przestanie aktualizować
i przywoływać tę funkcję.

00:05:16.254 --> 00:05:21.642
Przy każdej animacji zastanówcie się,
jaki warunek ma ją zatrzymywać.

00:05:21.736 --> 00:05:26.310
Oczywiście, możecie robić animacje,
które powinny trwać bez końca,

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

00:05:29.364 --> 00:05:33.647
Bo przecież przeglądarka pracuje,
przywołując tę funkcję.

00:05:33.762 --> 00:05:37.618
A teraz sprawcie,
że będzie wielkie "bum!".