Inne fajne zastosowanie
JS na stronach
to animacja właściwości w czasie.
Zanim się do tego zabierzemy,
upewnię się,
że znacie inną globalną zmienną
dostępną na każdej stronie
internetowej - zmienną "window".
Wpiszę "console.log",
a wy możecie zatrzymać odtwarzanie,
otworzyć narzędzia deweloperskie
i zobaczyć, co tam jest.
Widzieliście? To jest olbrzymie!
Tyle tam kodu, że aż szok!
Żebyście się z tym oswoili,
powiem o właściwościach i metodach,
do których jest stamtąd dostęp.
Jest tu "window.location",
zawierające informacje o URL strony.
Zresztą napiszę to na stronie,
żebyście nie musieli
co chwilę zatrzymywać odtwarzania.
Zatem: "textContent"...
i napiszemy, że URL tej strony
to "window.location".
I że to jest obiekt,
więc musimy do niego wejść.
Piszę: "href".
I już: to jest URL zawartej tu
strony internetowej.
Inna właściwość to
"window.navigator.user.agent".
Mówi o przeglądarce użytkownika.
Wpiszę: "the browser"...
nazwiemy ją "the user agent", dalej:
"is + window.navigator.user agent".
No dobrze. Ten ciąg "user agent"
pewnie wydaje się wam wariacki.
Nie został stworzony po to,
by czytali go ludzie;
nie zawsze ma sens.
Z przyczyn historycznych.
Większość projektantów stron
korzysta z bibliotek,
żeby zrozumieć, co oznacza ten ciąg,
jaka jest przeglądarka,
system operacyjny itp.
Bo to bardzo dziwne.
A to już takie dziwne nie jest:
"window.outerWidth"
i "window.outerHeight".
Powiedzmy,
że ta strona internetowa ma
"window.outerWidth"...
zaczniemy od szerokości...
...i "window.outerHeight".
U mnie to jest 1280 na 715,
ale u was może być inaczej. Zależy,
jak wygląda wasza strona internetowa,
gdy oglądacie ten film.
Teraz pokażę wam coś zaskakującego.
Skasuję słowo "window"
w tej linii kodu.
I... nadal działa!
Ponieważ "window" to domyślna globalna
zmienna na stronach internetowych.
Przeglądarka szuka
używanej przez was zmiennej
w obiekcie "window",
a kiedy stworzycie
nową zmienną globalną,
obiekt "window"
będzie ją przechowywał jako własność.
Nie powinniście deklarować własnych
zmiennych "outerWidth" i "outerHeight",
bo anulują one "window.outerWidth"
i "window.outerHeight".
Generalnie, powinniście unikać
zmiennych globalnych,
bo jest ryzyko,
że będą kolidować między sobą
albo ze zmiennymi w obiekcie "window".
Dla bezpieczeństwa możecie dodawać
do globalnych zmiennych prefiksy.
Np. w Khan Academy piszemy "KA_"
przed każdą zmienną globalną,
która jest nam potrzebna.
Dobrze.
To więc jest obiekt "window".
Wkrótce zobaczycie, jak za pomocą
dwu funkcji można w nim robić animacje.