WEBVTT

00:00:00.957 --> 00:00:03.759
Inne fajne zastosowanie
JS na stronach

00:00:03.807 --> 00:00:06.777
to animacja właściwości w czasie.

00:00:06.835 --> 00:00:08.544
Zanim się do tego zabierzemy,

00:00:08.575 --> 00:00:11.609
upewnię się,
że znacie inną globalną zmienną

00:00:11.700 --> 00:00:16.135
dostępną na każdej stronie
internetowej - zmienną "window".

00:00:16.872 --> 00:00:21.478
Wpiszę "console.log",
a wy możecie zatrzymać odtwarzanie,

00:00:21.578 --> 00:00:25.632
otworzyć narzędzia deweloperskie
i zobaczyć, co tam jest.

00:00:27.038 --> 00:00:32.905
Widzieliście? To jest olbrzymie!
Tyle tam kodu, że aż szok!

00:00:33.761 --> 00:00:35.480
Żebyście się z tym oswoili,

00:00:35.577 --> 00:00:40.165
powiem o właściwościach i metodach,
do których jest stamtąd dostęp.

00:00:40.265 --> 00:00:43.460
Jest tu "window.location",

00:00:43.560 --> 00:00:46.881
zawierające informacje o URL strony.

00:00:48.227 --> 00:00:50.537
Zresztą napiszę to na stronie,

00:00:50.637 --> 00:00:54.350
żebyście nie musieli
co chwilę zatrzymywać odtwarzania.

00:00:54.450 --> 00:00:56.029
Zatem: "textContent"...

00:00:56.130 --> 00:01:00.000
i napiszemy, że URL tej strony

00:01:00.055 --> 00:01:04.443
to "window.location".
I że to jest obiekt,

00:01:04.581 --> 00:01:08.173
więc musimy do niego wejść.
Piszę: "href".

00:01:08.353 --> 00:01:13.328
I już: to jest URL zawartej tu
strony internetowej.

00:01:14.628 --> 00:01:17.972
Inna właściwość to
"window.navigator.user.agent".

00:01:18.021 --> 00:01:23.011
Mówi o przeglądarce użytkownika.

00:01:23.456 --> 00:01:25.503
Wpiszę: "the browser"...

00:01:25.603 --> 00:01:31.742
nazwiemy ją "the user agent", dalej:
"is + window.navigator.user agent".

00:01:32.926 --> 00:01:38.708
No dobrze. Ten ciąg "user agent"
pewnie wydaje się wam wariacki.

00:01:38.820 --> 00:01:41.842
Nie został stworzony po to,
by czytali go ludzie;

00:01:41.960 --> 00:01:46.045
nie zawsze ma sens.
Z przyczyn historycznych.

00:01:46.145 --> 00:01:49.158
Większość projektantów stron
korzysta z bibliotek,

00:01:49.258 --> 00:01:51.943
żeby zrozumieć, co oznacza ten ciąg,

00:01:52.029 --> 00:01:55.008
jaka jest przeglądarka,
system operacyjny itp.

00:01:55.108 --> 00:01:57.098
Bo to bardzo dziwne.

00:01:59.049 --> 00:02:02.787
A to już takie dziwne nie jest:
"window.outerWidth"

00:02:02.887 --> 00:02:05.016
i "window.outerHeight".

00:02:05.116 --> 00:02:07.331
Powiedzmy,

00:02:10.031 --> 00:02:13.236
że ta strona internetowa ma

00:02:13.336 --> 00:02:16.788
"window.outerWidth"...
zaczniemy od szerokości...

00:02:16.846 --> 00:02:20.550
...i "window.outerHeight".

00:02:21.157 --> 00:02:24.520
U mnie to jest 1280 na 715,

00:02:24.620 --> 00:02:26.935
ale u was może być inaczej. Zależy,

00:02:27.035 --> 00:02:31.717
jak wygląda wasza strona internetowa,
gdy oglądacie ten film.

00:02:31.812 --> 00:02:35.364
Teraz pokażę wam coś zaskakującego.

00:02:35.489 --> 00:02:40.008
Skasuję słowo "window"
w tej linii kodu.

00:02:42.694 --> 00:02:47.382
I... nadal działa!

00:02:47.866 --> 00:02:52.686
Ponieważ "window" to domyślna globalna
zmienna na stronach internetowych.

00:02:52.786 --> 00:02:56.280
Przeglądarka szuka
używanej przez was zmiennej

00:02:56.380 --> 00:02:59.838
w obiekcie "window",

00:02:59.936 --> 00:03:03.182
a kiedy stworzycie
nową zmienną globalną,

00:03:03.277 --> 00:03:07.849
obiekt "window"
będzie ją przechowywał jako własność.

00:03:07.895 --> 00:03:13.004
Nie powinniście deklarować własnych
zmiennych "outerWidth" i "outerHeight",

00:03:13.099 --> 00:03:17.810
bo anulują one "window.outerWidth"
i "window.outerHeight".

00:03:17.964 --> 00:03:21.642
Generalnie, powinniście unikać
zmiennych globalnych,

00:03:21.689 --> 00:03:24.645
bo jest ryzyko,
że będą kolidować między sobą

00:03:24.691 --> 00:03:27.284
albo ze zmiennymi w obiekcie "window".

00:03:27.370 --> 00:03:31.519
Dla bezpieczeństwa możecie dodawać
do globalnych zmiennych prefiksy.

00:03:31.619 --> 00:03:35.514
Np. w Khan Academy piszemy "KA_"

00:03:35.637 --> 00:03:39.266
przed każdą zmienną globalną,
która jest nam potrzebna.

00:03:39.393 --> 00:03:41.982
Dobrze.
To więc jest obiekt "window".

00:03:42.026 --> 00:03:46.928
Wkrótce zobaczycie, jak za pomocą
dwu funkcji można w nim robić animacje.