1
00:00:01,058 --> 00:00:04,003
Mam stronę z Koleżką-O-Nie,

2
00:00:04,104 --> 00:00:07,876
który panikuje,
bo myśli, że będzie koniec świata.

3
00:00:07,976 --> 00:00:10,866
Dokładnie za 500 sekund.

4
00:00:11,023 --> 00:00:13,514
Udoskonalę tę stronę.

5
00:00:13,682 --> 00:00:16,857
Zamiast liczby
pokaże się licznik czasu.

6
00:00:16,975 --> 00:00:20,480
Odwiedzający będą widzieli,
ile czasu im zostało.

7
00:00:21,385 --> 00:00:23,724
Żeby animować
część strony internetowej,

8
00:00:23,786 --> 00:00:26,865
wybieramy w niej jakiś element,

9
00:00:26,956 --> 00:00:29,268
w którym coś zmieniamy.

10
00:00:29,368 --> 00:00:32,786
Zmiana ma następować
określoną liczbę razy na sekundę.

11
00:00:32,928 --> 00:00:38,011
Zatem krok pierwszy.
Znajdę licznik po ID.

12
00:00:38,143 --> 00:00:39,590
Proste.

13
00:00:39,690 --> 00:00:45,936
"var countdown = document
getElementById("countdown").

14
00:00:47,531 --> 00:00:48,962
Krok drugi.

15
00:00:49,065 --> 00:00:51,826
Zrobię funkcję, która odlicza wspak.

16
00:00:51,969 --> 00:00:55,193
"var countItDown = function()".

17
00:00:55,262 --> 00:00:59,373
Chcę tu zrobić "textContent".

18
00:00:59,516 --> 00:01:04,203
Wartość ma być równa poprzedniej
liczbie pomniejszonej o jeden.

19
00:01:04,272 --> 00:01:09,783
A "textContent" jest ciągiem,
więc musimy zrobić z niego liczbę.

20
00:01:09,883 --> 00:01:12,840
Użyjemy w tym celu
polecenia "parsefloat()".

21
00:01:12,994 --> 00:01:15,139
I wtedy możemy odjąć 1.

22
00:01:16,602 --> 00:01:20,666
Dobrze. I w końcu chcemy
przywoływać tę funkcję

23
00:01:20,766 --> 00:01:25,611
w określonych interwałach,
czyli pewną liczbę razy na sekundę.

24
00:01:25,736 --> 00:01:30,550
Możemy to zrobić, korzystając
z polecenia "window.setInterval()".

25
00:01:30,650 --> 00:01:34,064
Ta funkcja przyjmuje dwa argumenty:

26
00:01:34,121 --> 00:01:35,503
wywołanie zwrotne

27
00:01:35,655 --> 00:01:40,850
oraz liczbę milisekund do odczekania
przed kolejnym przywołaniem funkcji.

28
00:01:40,973 --> 00:01:43,038
Możemy określić wywołanie zwrotne

29
00:01:43,138 --> 00:01:47,183
tak jak robimy to
dla detektora zdarzeń: po nazwie.

30
00:01:47,293 --> 00:01:51,571
I teraz - idzie bardzo szybko!
Bo nie wprowadziliśmy 2. argumentu.

31
00:01:51,628 --> 00:01:55,403
A musi to być
określona liczba milisekund.

32
00:01:55,453 --> 00:01:58,259
Tutaj interesuje nas 1s,
więc wpiszemy 1000,

33
00:01:58,378 --> 00:02:01,153
bo w jednej sekundzie
jest 1000 milisekund.

34
00:02:01,253 --> 00:02:04,064
I już. Teraz odlicza po sekundzie.

35
00:02:04,830 --> 00:02:09,358
Lepiej nauczcie się jak najwięcej
w ciągu najbliższych 490 sekund!

36
00:02:10,751 --> 00:02:14,842
Jest funkcja obiektu "window"
używana zamiast "setInterval".

37
00:02:14,944 --> 00:02:16,764
To funkcja "setTimeout".

38
00:02:16,908 --> 00:02:19,691
Zmienię to tutaj,

39
00:02:19,812 --> 00:02:23,661
a wy spróbujcie zobaczyć różnicę.
Trzeba chwilę zaczekać.

40
00:02:23,780 --> 00:02:28,259
Może teraz widzicie,
że gdy używamy polecenia "setTimeout",

41
00:02:28,340 --> 00:02:32,578
przeglądarka
przywołuje funkcję jednokrotnie,

42
00:02:32,697 --> 00:02:34,737
nie raz po raz.

43
00:02:34,865 --> 00:02:38,917
To nie jest zbyt praktyczne
w animacjach,

44
00:02:39,017 --> 00:02:42,052
ale może się bardzo przydać
w innych przypadkach.

45
00:02:42,146 --> 00:02:45,117
Np. gdybyśmy pokazywali
użytkownikom ostrzeżenie,

46
00:02:45,214 --> 00:02:47,973
a po dziesięciu sekundach
chcieli je ukryć.

47
00:02:49,436 --> 00:02:52,767
Zmienię to więc
z powrotem na "setInterval".

48
00:02:53,801 --> 00:02:56,448
Testując takie animacje,

49
00:02:56,626 --> 00:03:00,628
sprawdzajmy,
co się dzieje w każdym punkcie.

50
00:03:00,728 --> 00:03:03,066
Np. w punkcie 0.

51
00:03:03,171 --> 00:03:06,357
Dużo odliczania. Zanudzilibyście się!

52
00:03:06,457 --> 00:03:12,377
Dlatego zmienimy wartość początkową
na 5 i zobaczymy, co będzie.

53
00:03:12,518 --> 00:03:16,765
4, 3, 2, 1, 0...

54
00:03:17,303 --> 00:03:21,762
minus 1, minus 2... No dobrze.
Robi się dziwnie!

55
00:03:21,885 --> 00:03:26,634
W chwili, gdy świat się skończy,
licznik powinien huknąć i zatrzymać się.

56
00:03:26,778 --> 00:03:30,216
Chcemy więc przerwać animację,

57
00:03:30,316 --> 00:03:32,833
gdy pokaże się 0.

58
00:03:32,949 --> 00:03:36,827
Możemy to zrobić za pomocą
warunku "if" wewnątrz funkcji.

59
00:03:36,958 --> 00:03:39,494
Najpierw...

60
00:03:39,617 --> 00:03:44,653
przechowam bieżący czas w zmiennej,
bo będzie używany kilkakrotnie.

61
00:03:44,753 --> 00:03:49,807
Zaznaczę to, przeniosę tutaj
i wpiszę "currentTime".

62
00:03:50,804 --> 00:03:55,797
A teraz: mogę zrobić warunek "if",

63
00:03:55,897 --> 00:03:58,644
który dopilnuje,
by tekst był uaktualniany

64
00:03:58,744 --> 00:04:01,440
tylko przy "currentTime" > 0.

65
00:04:01,501 --> 00:04:04,993
Tylko wtedy ma odejmować 1.

66
00:04:05,101 --> 00:04:08,267
Muszę więc przenieść to tutaj.

67
00:04:11,448 --> 00:04:15,280
To działa,
ale w tej metodzie coś nie gra.

68
00:04:15,388 --> 00:04:19,714
Przeglądarka przywołuje funkcję
"countItDown" raz na sekundę,

69
00:04:19,826 --> 00:04:22,055
póki ta strona nie zostanie zamknięta.

70
00:04:22,156 --> 00:04:25,357
Nie każcie przeglądarkom
przywoływać funkcji bez powodu.

71
00:04:25,451 --> 00:04:28,283
Mają mnóstwo innych
ważnych rzeczy do roboty.

72
00:04:28,334 --> 00:04:32,253
Chcemy powiedzieć przeglądarce,
że kiedy licznik dojdzie do 0,

73
00:04:32,364 --> 00:04:35,876
nie trzeba już
przywoływać tej funkcji.

74
00:04:35,984 --> 00:04:40,334
Możemy to zrobić za pomocą
nowej metody: "window.clearInterval()".

75
00:04:41,170 --> 00:04:43,887
Umieścimy to w tym "else":

76
00:04:43,987 --> 00:04:46,905
"window.clearInterval()".

77
00:04:47,867 --> 00:04:52,182
Wprowadzimy argument, by przeglądarka
wiedziała, który interwał usunąć.

78
00:04:52,264 --> 00:04:56,170
Bo przecież na stronie
może być ich wiele!

79
00:04:56,270 --> 00:04:58,771
A żeby wiedzieć,
który interwał usunąć,

80
00:04:58,870 --> 00:05:03,229
przechowujemy
wynik "setInterval" w zmiennej.

81
00:05:03,329 --> 00:05:05,292
Mam go teraz w zmiennej licznika;

82
00:05:05,394 --> 00:05:09,301
skopiuję, wkleję...
- i przeglądarka wie, co wyczyścić.

83
00:05:09,401 --> 00:05:11,184
Kiedy licznik dojdzie do 0,

84
00:05:11,284 --> 00:05:16,139
przeglądarka przestanie aktualizować
i przywoływać tę funkcję.

85
00:05:16,254 --> 00:05:21,642
Przy każdej animacji zastanówcie się,
jaki warunek ma ją zatrzymywać.

86
00:05:21,736 --> 00:05:26,310
Oczywiście, możecie robić animacje,
które powinny trwać bez końca,

87
00:05:26,399 --> 00:05:29,305
ale starajcie się, żeby były miłe!

88
00:05:29,364 --> 00:05:33,647
Bo przecież przeglądarka pracuje,
przywołując tę funkcję.

89
00:05:33,762 --> 00:05:37,618
A teraz sprawcie,
że będzie wielkie "bum!".