Return to Video

Wyszukiwanie elementów poprzez ID. (Wersja Wideo)

  • 0:01 - 0:04
    Mam stronę "Wszystko o psach",
  • 0:05 - 0:08
    świetną, tylko że...
  • 0:08 - 0:13
    nie każdemu się to spodoba,
    ale jestem raczej kociarą.
  • 0:13 - 0:16
    Przerobiłabym tę stronę
    na "Wszystko o kotach".
  • 0:17 - 0:19
    Użyję JavaScript,
  • 0:20 - 0:23
    zamiast tylko modyfikować to HTML.
  • 0:23 - 0:28
    W końcu zrobię z tego
    rozszerzenie przeglądarki
  • 0:28 - 0:32
    i każdą stronę przekształcę tak,
    by dotyczyła kotów.
  • 0:32 - 0:36
    Byłoby wspaniale:
    cały Internet o kotach!
  • 0:38 - 0:41
    Ta strona zawiera nagłówek,
  • 0:41 - 0:44
    akapit i parę zdjęć.
  • 0:45 - 0:50
    Będziemy je zmieniać po kolei,
    zaczynając od nagłówka,
  • 0:50 - 0:54
    w dwóch krokach,
    o których się uczyliśmy.
  • 0:54 - 0:59
    Krok pierwszy - to znaleźć węzeł
    DOM-u zawierający ten nagłówek.
  • 0:59 - 1:03
    Przedtem znaleźliśmy węzeł
  • 1:03 - 1:06
    poleceniem "document.body",
  • 1:07 - 1:11
    ale teraz interesuje mnie coś
    konkretnego: nagłówek h1.
  • 1:12 - 1:14
    A ten nagłówek h1 ma ID,
  • 1:14 - 1:20
    więc powinien być jedynym na stronie
    tagiem o takim ID.
  • 1:20 - 1:24
    Jest łatwy sposób szukania
    węzłów DOM-u mających ID.
  • 1:24 - 1:29
    Metoda nazywa się
    "getElementById".
  • 1:31 - 1:33
    Zastosujmy to tu, w tagu "script".
  • 1:33 - 1:36
    Deklarujemy zmienną,
    która będzie to przechowywać:
  • 1:36 - 1:38
    "var headingEl".
  • 1:38 - 1:42
    Kończę nazwy zmiennych
    "El" lub "Node",
  • 1:42 - 1:45
    żeby wiedzieć,
    że przechowują element
  • 1:45 - 1:47
    zwany też "node" (węzłem).
  • 1:47 - 1:52
    Użyjmy tej metody. Jest powiązana
    z globalnym dokumentem obiektowym,
  • 1:52 - 1:56
    więc dajemy "document", kropkę
  • 1:56 - 1:59
    i "getElementById",
  • 1:59 - 2:01
    a potem nawiasy, bo to funkcja.
  • 2:03 - 2:08
    Niczego nie znajdzie tak po prostu,
    bo nie wie, którego szukać ID.
  • 2:08 - 2:12
    W nawiasie wpisujemy szukane ID,
  • 2:12 - 2:15
    jako ciąg znaków w cudzysłowie.
  • 2:15 - 2:17
    Tutaj: "heading".
  • 2:22 - 2:24
    Jak ustalić, że znaleźliśmy element,
  • 2:24 - 2:26
    zanim zaczniemy coś z nim robić?
  • 2:27 - 2:30
    Jeden sposób - to funkcja
    "console.log".
  • 2:32 - 2:36
    Zatrzymajcie film i otwórzcie
    "narzędzia deweloperskie".
  • 2:36 - 2:40
    Wypróbujcie skrót
    Command-Option-I na Macu
  • 2:40 - 2:45
    lub Control-Shift-I w Windows.
  • 2:45 - 2:47
    Któryś powinien zadziałać.
  • 2:49 - 2:52
    Widzicie "h1" na konsoli?
  • 2:53 - 2:54
    Tak? Dobrze!
  • 2:54 - 2:56
    Krok pierwszy wykonany.
  • 2:57 - 3:00
    Znaleźliśmy element,
    przechowujemy go w zmiennej.
  • 3:00 - 3:02
    Krok drugi.
  • 3:02 - 3:06
    Zmodyfikujmy element
    sposobem, który już znamy:
  • 3:06 - 3:08
    zmieniając "innerHTML".
  • 3:09 - 3:10
    Zobaczmy... Napiszemy:
  • 3:11 - 3:15
    "headingEl.innerHTML ="...
  • 3:15 - 3:17
    chwila prawdy...
  • 3:17 - 3:18
    Koty!
  • 3:19 - 3:22
    "Wszystko o kotach". Gotowe!
  • 3:23 - 3:26
    Zaczęliśmy. Kotyfikacja ruszyła.
  • 3:26 - 3:31
    Teraz spróbujcie zrobić
    coś podobnego w zadaniu.
Title:
Wyszukiwanie elementów poprzez ID. (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:33

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.