1
00:00:00,957 --> 00:00:03,759
Inne fajne zastosowanie
JS na stronach

2
00:00:03,807 --> 00:00:06,777
to animacja właściwości w czasie.

3
00:00:06,835 --> 00:00:08,544
Zanim się do tego zabierzemy,

4
00:00:08,575 --> 00:00:11,609
upewnię się,
że znacie inną globalną zmienną

5
00:00:11,700 --> 00:00:16,135
dostępną na każdej stronie
internetowej - zmienną "window".

6
00:00:16,872 --> 00:00:21,478
Wpiszę "console.log",
a wy możecie zatrzymać odtwarzanie,

7
00:00:21,578 --> 00:00:25,632
otworzyć narzędzia deweloperskie
i zobaczyć, co tam jest.

8
00:00:27,038 --> 00:00:32,905
Widzieliście? To jest olbrzymie!
Tyle tam kodu, że aż szok!

9
00:00:33,761 --> 00:00:35,480
Żebyście się z tym oswoili,

10
00:00:35,577 --> 00:00:40,165
powiem o właściwościach i metodach,
do których jest stamtąd dostęp.

11
00:00:40,265 --> 00:00:43,460
Jest tu "window.location",

12
00:00:43,560 --> 00:00:46,881
zawierające informacje o URL strony.

13
00:00:48,227 --> 00:00:50,537
Zresztą napiszę to na stronie,

14
00:00:50,637 --> 00:00:54,350
żebyście nie musieli
co chwilę zatrzymywać odtwarzania.

15
00:00:54,450 --> 00:00:56,029
Zatem: "textContent"...

16
00:00:56,130 --> 00:01:00,000
i napiszemy, że URL tej strony

17
00:01:00,055 --> 00:01:04,443
to "window.location".
I że to jest obiekt,

18
00:01:04,581 --> 00:01:08,173
więc musimy do niego wejść.
Piszę: "href".

19
00:01:08,353 --> 00:01:13,328
I już: to jest URL zawartej tu
strony internetowej.

20
00:01:14,628 --> 00:01:17,972
Inna właściwość to
"window.navigator.user.agent".

21
00:01:18,021 --> 00:01:23,011
Mówi o przeglądarce użytkownika.

22
00:01:23,456 --> 00:01:25,503
Wpiszę: "the browser"...

23
00:01:25,603 --> 00:01:31,742
nazwiemy ją "the user agent", dalej:
"is + window.navigator.user agent".

24
00:01:32,926 --> 00:01:38,708
No dobrze. Ten ciąg "user agent"
pewnie wydaje się wam wariacki.

25
00:01:38,820 --> 00:01:41,842
Nie został stworzony po to,
by czytali go ludzie;

26
00:01:41,960 --> 00:01:46,045
nie zawsze ma sens.
Z przyczyn historycznych.

27
00:01:46,145 --> 00:01:49,158
Większość projektantów stron
korzysta z bibliotek,

28
00:01:49,258 --> 00:01:51,943
żeby zrozumieć, co oznacza ten ciąg,

29
00:01:52,029 --> 00:01:55,008
jaka jest przeglądarka,
system operacyjny itp.

30
00:01:55,108 --> 00:01:57,098
Bo to bardzo dziwne.

31
00:01:59,049 --> 00:02:02,787
A to już takie dziwne nie jest:
"window.outerWidth"

32
00:02:02,887 --> 00:02:05,016
i "window.outerHeight".

33
00:02:05,116 --> 00:02:07,331
Powiedzmy,

34
00:02:10,031 --> 00:02:13,236
że ta strona internetowa ma

35
00:02:13,336 --> 00:02:16,788
"window.outerWidth"...
zaczniemy od szerokości...

36
00:02:16,846 --> 00:02:20,550
...i "window.outerHeight".

37
00:02:21,157 --> 00:02:24,520
U mnie to jest 1280 na 715,

38
00:02:24,620 --> 00:02:26,935
ale u was może być inaczej. Zależy,

39
00:02:27,035 --> 00:02:31,717
jak wygląda wasza strona internetowa,
gdy oglądacie ten film.

40
00:02:31,812 --> 00:02:35,364
Teraz pokażę wam coś zaskakującego.

41
00:02:35,489 --> 00:02:40,008
Skasuję słowo "window"
w tej linii kodu.

42
00:02:42,694 --> 00:02:47,382
I... nadal działa!

43
00:02:47,866 --> 00:02:52,686
Ponieważ "window" to domyślna globalna
zmienna na stronach internetowych.

44
00:02:52,786 --> 00:02:56,280
Przeglądarka szuka
używanej przez was zmiennej

45
00:02:56,380 --> 00:02:59,838
w obiekcie "window",

46
00:02:59,936 --> 00:03:03,182
a kiedy stworzycie
nową zmienną globalną,

47
00:03:03,277 --> 00:03:07,849
obiekt "window"
będzie ją przechowywał jako własność.

48
00:03:07,895 --> 00:03:13,004
Nie powinniście deklarować własnych
zmiennych "outerWidth" i "outerHeight",

49
00:03:13,099 --> 00:03:17,810
bo anulują one "window.outerWidth"
i "window.outerHeight".

50
00:03:17,964 --> 00:03:21,642
Generalnie, powinniście unikać
zmiennych globalnych,

51
00:03:21,689 --> 00:03:24,645
bo jest ryzyko,
że będą kolidować między sobą

52
00:03:24,691 --> 00:03:27,284
albo ze zmiennymi w obiekcie "window".

53
00:03:27,370 --> 00:03:31,519
Dla bezpieczeństwa możecie dodawać
do globalnych zmiennych prefiksy.

54
00:03:31,619 --> 00:03:35,514
Np. w Khan Academy piszemy "KA_"

55
00:03:35,637 --> 00:03:39,266
przed każdą zmienną globalną,
która jest nam potrzebna.

56
00:03:39,393 --> 00:03:41,982
Dobrze.
To więc jest obiekt "window".

57
00:03:42,026 --> 00:03:46,928
Wkrótce zobaczycie, jak za pomocą
dwu funkcji można w nim robić animacje.