Return to Video

Tworzenie elementów od zera (Wersja Wideo)

  • 0:01 - 0:07
    Na razie modyfikowaliśmy elementy
    istniejące już na stronie.
  • 0:07 - 0:10
    A gdybyśmy chcieli dodać tam nowe?
  • 0:10 - 0:13
    Moglibyśmy - za pomocą "innerHTML",
  • 0:13 - 0:17
    pisząc HTML do tagów w ciągu,
    który wprowadzamy.
  • 0:18 - 0:21
    Tak jak tutaj.
    Tylko że może się zrobić bałagan,
  • 0:21 - 0:26
    zwłaszcza gdy chcecie tworzyć tagi
    o różnych atrybutach, stylach i klasach.
  • 0:26 - 0:31
    Zamiast tego użyjmy
    całego wachlarza metod
  • 0:32 - 0:36
    tworzenia elementów od zera
    i umieszczania ich na stronie.
  • 0:36 - 0:41
    Powiedzmy,
    że chcemy dodać zdjęcie kota,
  • 0:41 - 0:44
    bo na stronie
    jest ich jeszcze za mało.
  • 0:44 - 0:49
    Pierwszy krok - to stworzyć
    nowy element "img", tak?
  • 0:49 - 0:51
    To chcemy utworzyć.
  • 0:51 - 0:56
    Zaczniemy od zmiennej,
    która będzie go przechowywać: "catEl".
  • 0:56 - 1:01
    A potem damy:
    "document.createElement"
  • 1:01 - 1:05
    i wpiszemy nazwę znacznika,
    który robimy, czyli "img".
  • 1:07 - 1:08
    Można sobie wyobrazić,
  • 1:09 - 1:12
    że przeglądarka
    zrobiła znacznik zdjęcia, o, taki,
  • 1:12 - 1:15
    i unosi się on gdzieś w przestrzeni.
  • 1:15 - 1:19
    Następny krok
    - to przypisać mu źródło.
  • 1:19 - 1:23
    Zatem: "catEl.src =".
  • 1:24 - 1:26
    Weźmy źródło stąd...
  • 1:30 - 1:33
    ...i powinniśmy dodać jeszcze "alt",
  • 1:33 - 1:35
    by obraz był łatwiej dostępny.
  • 1:35 - 1:37
    Nie robię tego,
  • 1:37 - 1:41
    ale powinnam zawsze mieć
    "alt" przy zdjęciach.
  • 1:42 - 1:45
    Jak widać, ten tag "zdjęcie",
  • 1:45 - 1:49
    który zrobiliśmy, ma...
  • 1:50 - 1:51
    źródło ("src")...
  • 1:51 - 1:53
    i ma też...
  • 1:54 - 1:59
    "alt" - "Photo of cute cat"
    (zdjęcie ślicznego kota). No dobrze.
  • 1:59 - 2:03
    To zrobiliśmy z użyciem JavaScript.
  • 2:05 - 2:09
    Nasz tag "img"
    nadal unosi się w przestrzeni:
  • 2:09 - 2:12
    przeglądarka nie wie,
    gdzie go umieścić.
  • 2:12 - 2:16
    Nasz DOM ma wiele różnych miejsc,
    w których mógłby się znaleźć.
  • 2:16 - 2:21
    Zróbmy coś prostego:
    niech słowo pojawi się u dołu strony.
  • 2:22 - 2:26
    Osiągniemy to,
    pisząc na końcu tagu "body":
  • 2:26 - 2:30
    "document.body.appendChild(catEl)".
  • 2:30 - 2:33
    I jest! Całkiem spory!
  • 2:33 - 2:35
    Duży, straszny kot!
  • 2:35 - 2:41
    Można przywołać "appendChild" w każdym
    istniejącym węźle DOM-u na stronie.
  • 2:41 - 2:44
    Sprawi, że wprowadzony element
  • 2:44 - 2:48
    zostanie ostatnim dzieckiem
    w tym węźle.
  • 2:48 - 2:52
    Tutaj pomoże nam wizualizacja:
    DOM jako drzewo.
  • 2:52 - 2:56
    Tag "body" to węzeł na tym drzewie,
  • 2:56 - 3:00
    i ma całą grupę dzieci, np. "h1" i "p".
  • 3:00 - 3:04
    Dodajecie
    jeszcze jedno dziecko na końcu.
  • 3:04 - 3:08
    Znajdzie się za tagiem "script", tutaj.
  • 3:10 - 3:11
    Używając metod DOM-u,
  • 3:11 - 3:16
    teoretycznie powinniście dokładać
    elementy w dowolnym punkcie drzewa.
  • 3:16 - 3:20
    My umieściliśmy element
    w najbardziej oczywistym miejscu.
  • 3:20 - 3:22
    Jeszcze jeden przykład.
  • 3:22 - 3:26
    Użyliśmy tutaj "innerHTML",
  • 3:26 - 3:29
    by umieścić tagi "strong"
    wewnątrz "span".
  • 3:29 - 3:32
    Można też użyć
    polecenia "stwórz element".
  • 3:32 - 3:35
    "var strongEl = document"...
  • 3:35 - 3:40
    ".createElement strong".
  • 3:40 - 3:44
    Źle zapisałam,
    a pisownia jest bardzo ważna.
  • 3:44 - 3:47
    Powstaje więc pusty tag "strong",
  • 3:47 - 3:49
    unoszący się w przestrzeni.
  • 3:49 - 3:52
    Najpierw ustalimy tekst.
  • 3:52 - 3:57
    Piszemy zatem:
    strongEl.textContent = "cat".
  • 3:57 - 3:58
    W porządku?
  • 3:58 - 4:02
    Moglibyśmy również zrobić coś innego:
  • 4:02 - 4:05
    stworzyć tzw. węzeł tekstowy
    (textNode).
  • 4:05 - 4:07
    Wiele węzłów w drzewie DOM-u
  • 4:07 - 4:11
    może zawierać jako dzieci
    specjalny typ węzłów, "textNode".
  • 4:11 - 4:13
    To nie są elementy,
  • 4:13 - 4:15
    lecz nadal węzły w drzewie DOM-u.
  • 4:15 - 4:20
    Tzw. "węzły-liście" to ostatnie rzeczy,
    które mogą się znajdować w drzewie.
  • 4:20 - 4:23
    "Var strongText"...
  • 4:23 - 4:26
    "= document.createTextNode".
  • 4:28 - 4:31
    Wpiszemy tekst: "cat".
  • 4:32 - 4:34
    Używając tej metody,
  • 4:34 - 4:40
    stworzyliśmy dwa węzły w przestrzeni.
  • 4:40 - 4:42
    Tag "strong"...
  • 4:42 - 4:46
    oraz ten "textNode",
    czyli po prostu "cat".
  • 4:47 - 4:50
    Musimy je połączyć.
  • 4:50 - 4:55
    Chcemy, żeby "strong"
    był rodzicem "cata".
  • 4:55 - 5:01
    Musimy więc napisać:
    "strongEl.appendChild(strongText)".
  • 5:03 - 5:06
    Teraz, kiedy już mamy...
  • 5:07 - 5:10
    "strong" z kotem wewnątrz,
  • 5:13 - 5:17
    musimy go gdzieś umieścić,
    bo nadal unosi się w przestrzeni.
  • 5:18 - 5:23
    Jesteśmy wewnątrz pętli FOR
    dla "nameEls".
  • 5:23 - 5:27
    Do każdego "nameEl"
    chcemy dodać tag "strong".
  • 5:27 - 5:30
    Mamy więc tutaj: "nameEls[i]"...
  • 5:30 - 5:34
    ".appendChild(strongEl)".
  • 5:35 - 5:39
    Aha, teraz widzimy to dwa razy,
  • 5:39 - 5:42
    bo zostawiłam stary sposób.
  • 5:43 - 5:47
    Przytwierdził się do tagu "span",
    który ma już w sobie "strong".
  • 5:47 - 5:49
    Moglibyśmy zmienić ten wiersz
  • 5:49 - 5:52
    na "innerHTML = empty string"
    (pusty ciąg).
  • 5:53 - 5:56
    Wtedy wyczyściłby się "span",
    zanim do niego dojdziemy.
  • 5:58 - 6:03
    Widzieliście: wymagało to więcej
    wierszy kodu niż wersja "innerHTML".
  • 6:05 - 6:07
    Dlaczego to zrobiliśmy?
  • 6:07 - 6:11
    Projektanci stron nie lubią
    modyfikować dokumentów w ten sposób,
  • 6:11 - 6:13
    bo wymaga to więcej programu.
  • 6:13 - 6:17
    Większość projektantów
    używa bibliotek, np. jQuery,
  • 6:17 - 6:19
    by za nich robiły modyfikacje DOM-u.
  • 6:20 - 6:23
    Biblioteki mają funkcje,
    które robią ten sam program,
  • 6:23 - 6:27
    a wy musicie wpisać
    znacznie mniej wierszy.
  • 6:27 - 6:30
    Wyręczają was funkcje biblioteki.
  • 6:30 - 6:32
    Lubię w ten sposób pisać program,
  • 6:32 - 6:35
    ponieważ doskonale widzę,
  • 6:35 - 6:38
    jak modyfikuję drzewo DOM-u,
    wiersz po wierszu.
  • 6:39 - 6:43
    To wygląda porządniej niż wpisywanie
    wszystkiego w ciąg "inner HTML".
  • 6:43 - 6:47
    Wam może się nie podoba.
    Ale już wiecie, że jest taka metoda.
  • 6:47 - 6:50
    Używajcie jej w razie potrzeby,
  • 6:50 - 6:54
    a zorientujecie się, co biblioteki
    takie jak jQuery robią za kulisami.
Title:
Tworzenie elementów od zera (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:
06:56

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.