< Return to Video

OMD (Wersja Wideo)

  • 0:01 - 0:06
    W kolejnych odcinkach często
    będę używać skrótu "DOM".
  • 0:07 - 0:08
    Dom, dom, dom.
  • 0:10 - 0:15
    DOM to obiektowy model dokumentu
    (Document Object Model).
  • 0:15 - 0:17
    Z jego pomocą przeglądarki
  • 0:17 - 0:21
    pozwalają projektantom
    zmieniać strony poprzez JavaScript.
  • 0:21 - 0:24
    Ładując stronę internetową,
  • 0:24 - 0:27
    przeglądarka analizuje HTML i CCS,
  • 0:27 - 0:29
    i konwertuje dokument w DOM.
  • 0:30 - 0:34
    Ten DOM - to duży obiekt JavaScript,
  • 0:34 - 0:38
    zawierający wszystko, co chcemy
    wiedzieć o stronie
  • 0:38 - 0:42
    lub w niej zmienić.
    Każdy tag, jego atrybut i styl.
  • 0:43 - 0:46
    Żeby wejść do DOM-u na stronie,
  • 0:46 - 0:50
    z poziomu JavaScript, korzystamy
    z globalnej zmiennej "document".
  • 0:51 - 0:53
    Możemy używać właściwości
  • 0:53 - 0:56
    i przywoływać funkcje
    powiązane z tym obiektem.
  • 0:58 - 1:01
    Generalnie modyfikacji DOM-ów
  • 1:02 - 1:04
    dokonujemy w dwóch krokach.
  • 1:04 - 1:08
    Wypiszę je tutaj.
  • 1:09 - 1:13
    Już... I drugi krok.
  • 1:15 - 1:17
    Omówmy teraz każdy z nich.
  • 1:18 - 1:20
    Pierwszy krok - to znaleźć węzeł DOM-u
  • 1:21 - 1:23
    z użyciem metody dostępu.
  • 1:24 - 1:26
    Jeśli szukamy tylko tagu "body",
  • 1:26 - 1:29
    łatwo zyskamy dostęp do niego,
  • 1:29 - 1:32
    wpisując po prostu "document.body".
  • 1:34 - 1:39
    Drugi krok - to modyfikacja
    znalezionego węzła
  • 1:39 - 1:43
    poprzez zmianę atrybutów,
    stylów, wewnętrznego HTML,
  • 1:44 - 1:46
    dołączanie nowych węzłów...
  • 1:46 - 1:50
    Chcąc zamienić
    zawartość całego tagu,
  • 1:50 - 1:53
    użyjmy właściwości "innerHTML".
  • 1:54 - 1:59
    `document.body.innerHTML =
    "Webpage be gone!" (Strono precz!).
  • 1:59 - 2:00
    Ha! Udało się!
  • 2:02 - 2:06
    Przeglądarka szuka zmian
    w dokumencie obiektowym.
  • 2:06 - 2:10
    Gdy widzi, że zmieniacie
    "innerHTML" w "document.body",
  • 2:10 - 2:13
    odzwierciedli to w dokumencie.
  • 2:13 - 2:18
    Pamiętajcie, dokument obiektowy
    to nie jest strona internetowa,
  • 2:18 - 2:23
    lecz jej odzwierciedlenie,
    które tworzy przeglądarka.
  • 2:24 - 2:29
    Jest więcej sposobów
    na wykonanie kroku pierwszego,
  • 2:29 - 2:33
    bo zwykle interesuje was
    więcej niż tag "body".
  • 2:33 - 2:38
    Może szukacie tagu z pewnym ID,
    albo wszystkich tagów danego typu...
  • 2:38 - 2:41
    To omówię w odcinkach na temat
    metod dostępu do modelu DOM.
  • 2:42 - 2:45
    Ciekawsze rzeczy można też
    robić w kroku drugim,
  • 2:46 - 2:49
    np. zmieniać atrybuty i style
    znalezionych tagów.
  • 2:49 - 2:53
    Pomówimy o tym w odcinkach
    nt. modyfikacji DOM-u.
  • 2:53 - 2:56
    Gdy opanujecie dostęp i modyfikacje,
  • 2:56 - 2:59
    przejdziemy do świetnych zastosowań,
  • 2:59 - 3:03
    np. reakcji na zdarzenia użytkownika
    czy animacji.
  • 3:03 - 3:06
    Głupio, że używamy JavaScript
    do robienia tego,
  • 3:07 - 3:10
    co można było załatwić HTML-em,
  • 3:10 - 3:15
    ale najpierw dobrze opanujcie
    dostęp do DOM-u i zmiany,
  • 3:15 - 3:19
    żeby później robić
    prawdziwe interaktywne rzeczy.
  • 3:19 - 3:21
    Ćwiczcie - i do zobaczenia!
Title:
OMD (Wersja Wideo)
Description:

To tylko zapis naszych interaktywnych sesji poświęconych kodowaniu, stworzony by ułatwić ich przełożenie na inne języki.
Polecamy obejrzenie oryginalnej sesji na Khan Academy, gdzie możecie zatrzymać sesje, by edytować własny kod, jak również zobaczyć zapis kodu w wyższej rozdzielczości:
http://www.khanacademy.org/computer-programming
more » « less
Video Language:
English
Duration:
03:26
Marta Kabut edited Polish subtitles for The DOM (Video Version)
Dominik Kamiński edited Polish subtitles for The DOM (Video Version)
Dominik Kamiński edited Polish subtitles for The DOM (Video Version)
Dominik Kamiński edited Polish subtitles for The DOM (Video Version)
Dominik Kamiński edited Polish subtitles for The DOM (Video Version)
Dominik Kamiński edited Polish subtitles for The DOM (Video Version)
Dominik Kamiński edited Polish subtitles for The DOM (Video Version)
Dominik Kamiński edited Polish subtitles for The DOM (Video Version)

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.