Return to Video

The window object (Video Version)

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

This is a video recording of a talk-through, uploaded to make it easier to create subtitles.
Please watch the original interactive talk-through on Khan Academy, where you can pause and edit the code
and see the code in better resolution:
http://www.khanacademy.org/computer-programming
more » « less
Video Language:
English
Duration:
03:52

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.