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.