Mam stronę z Koleżką-O-Nie,

który panikuje,
bo myśli, że będzie koniec świata.

Dokładnie za 500 sekund.

Udoskonalę tę stronę.

Zamiast liczby
pokaże się licznik czasu.

Odwiedzający będą widzieli,
ile czasu im zostało.

Żeby animować
część strony internetowej,

wybieramy w niej jakiś element,

w którym coś zmieniamy.

Zmiana ma następować
określoną liczbę razy na sekundę.

Zatem krok pierwszy.
Znajdę licznik po ID.

Proste.

"var countdown = document
getElementById("countdown").

Krok drugi.

Zrobię funkcję, która odlicza wspak.

"var countItDown = function()".

Chcę tu zrobić "textContent".

Wartość ma być równa poprzedniej
liczbie pomniejszonej o jeden.

A "textContent" jest ciągiem,
więc musimy zrobić z niego liczbę.

Użyjemy w tym celu
polecenia "parsefloat()".

I wtedy możemy odjąć 1.

Dobrze. I w końcu chcemy
przywoływać tę funkcję

w określonych interwałach,
czyli pewną liczbę razy na sekundę.

Możemy to zrobić, korzystając
z polecenia "window.setInterval()".

Ta funkcja przyjmuje dwa argumenty:

wywołanie zwrotne

oraz liczbę milisekund do odczekania
przed kolejnym przywołaniem funkcji.

Możemy określić wywołanie zwrotne

tak jak robimy to
dla detektora zdarzeń: po nazwie.

I teraz - idzie bardzo szybko!
Bo nie wprowadziliśmy 2. argumentu.

A musi to być
określona liczba milisekund.

Tutaj interesuje nas 1s,
więc wpiszemy 1000,

bo w jednej sekundzie
jest 1000 milisekund.

I już. Teraz odlicza po sekundzie.

Lepiej nauczcie się jak najwięcej
w ciągu najbliższych 490 sekund!

Jest funkcja obiektu "window"
używana zamiast "setInterval".

To funkcja "setTimeout".

Zmienię to tutaj,

a wy spróbujcie zobaczyć różnicę.
Trzeba chwilę zaczekać.

Może teraz widzicie,
że gdy używamy polecenia "setTimeout",

przeglądarka
przywołuje funkcję jednokrotnie,

nie raz po raz.

To nie jest zbyt praktyczne
w animacjach,

ale może się bardzo przydać
w innych przypadkach.

Np. gdybyśmy pokazywali
użytkownikom ostrzeżenie,

a po dziesięciu sekundach
chcieli je ukryć.

Zmienię to więc
z powrotem na "setInterval".

Testując takie animacje,

sprawdzajmy,
co się dzieje w każdym punkcie.

Np. w punkcie 0.

Dużo odliczania. Zanudzilibyście się!

Dlatego zmienimy wartość początkową
na 5 i zobaczymy, co będzie.

4, 3, 2, 1, 0...

minus 1, minus 2... No dobrze.
Robi się dziwnie!

W chwili, gdy świat się skończy,
licznik powinien huknąć i zatrzymać się.

Chcemy więc przerwać animację,

gdy pokaże się 0.

Możemy to zrobić za pomocą
warunku "if" wewnątrz funkcji.

Najpierw...

przechowam bieżący czas w zmiennej,
bo będzie używany kilkakrotnie.

Zaznaczę to, przeniosę tutaj
i wpiszę "currentTime".

A teraz: mogę zrobić warunek "if",

który dopilnuje,
by tekst był uaktualniany

tylko przy "currentTime" > 0.

Tylko wtedy ma odejmować 1.

Muszę więc przenieść to tutaj.

To działa,
ale w tej metodzie coś nie gra.

Przeglądarka przywołuje funkcję
"countItDown" raz na sekundę,

póki ta strona nie zostanie zamknięta.

Nie każcie przeglądarkom
przywoływać funkcji bez powodu.

Mają mnóstwo innych
ważnych rzeczy do roboty.

Chcemy powiedzieć przeglądarce,
że kiedy licznik dojdzie do 0,

nie trzeba już
przywoływać tej funkcji.

Możemy to zrobić za pomocą
nowej metody: "window.clearInterval()".

Umieścimy to w tym "else":

"window.clearInterval()".

Wprowadzimy argument, by przeglądarka
wiedziała, który interwał usunąć.

Bo przecież na stronie
może być ich wiele!

A żeby wiedzieć,
który interwał usunąć,

przechowujemy
wynik "setInterval" w zmiennej.

Mam go teraz w zmiennej licznika;

skopiuję, wkleję...
- i przeglądarka wie, co wyczyścić.

Kiedy licznik dojdzie do 0,

przeglądarka przestanie aktualizować
i przywoływać tę funkcję.

Przy każdej animacji zastanówcie się,
jaki warunek ma ją zatrzymywać.

Oczywiście, możecie robić animacje,
które powinny trwać bez końca,

ale starajcie się, żeby były miłe!

Bo przecież przeglądarka pracuje,
przywołując tę funkcję.

A teraz sprawcie,
że będzie wielkie "bum!".