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.