< Return to Video

Edytowanie atrybutów (Wersja Wideo)

  • 0:01 - 0:04
    Oto moja strona o psach.
  • 0:04 - 0:07
    Za pomocą JavaScript i DOM-u
  • 0:08 - 0:11
    zrobię z niej stronę o kotach.
  • 0:12 - 0:15
    Nie zauważyłam bardzo ważnej rzeczy...
  • 0:16 - 0:21
    raczej psa, a nawet dwóch.
  • 0:21 - 0:22
    To te zdjęcia!
  • 0:23 - 0:27
    Na zdjęcia uroczych psów nie ma miejsca
    na stronie o uroczych kotach.
  • 0:27 - 0:29
    Trzeba je zmienić.
  • 0:30 - 0:33
    Znajdźmy zdjęcia,
  • 0:33 - 0:36
    używając polecenia
    "getElementsByTagName".
  • 0:36 - 0:41
    "var imageEls = document."...
  • 0:41 - 0:46
    "getElementsByTagName("img")".
  • 0:48 - 0:53
    To zwraca liczne elementy, musimy więc
    skorzystać z pętli FOR, by je zamieniać.
  • 0:53 - 0:56
    Napiszę: "var i = 0;"...
  • 0:56 - 1:02
    "i < imageEls.length; i++".
  • 1:04 - 1:05
    Dobrze.
  • 1:05 - 1:08
    A co umieszczę w pętli FOR?
  • 1:09 - 1:12
    Nie zamienię zdjęć
    za pomocą "innerHTML",
  • 1:13 - 1:17
    bo tagi zdjęć go nie mają.
  • 1:17 - 1:19
    To tagi zamykane automatycznie.
  • 1:19 - 1:24
    Muszę raczej zmienić to,
    co sprawia, że są tu psy.
  • 1:24 - 1:26
    URL zdjęć,
  • 1:26 - 1:30
    określony atrybutem
    "src" w każdym z tagów.
  • 1:30 - 1:35
    Możemy zmienić atrybuty
    elementów, używając kropek.
  • 1:35 - 1:36
    Pokażę.
  • 1:36 - 1:41
    Wchodzimy do bieżącego elementu
    w nawiasach kwadratowych
  • 1:41 - 1:43
    i wpisujemy kropkę
  • 1:43 - 1:46
    oraz nazwę atrybutu HTML
  • 1:46 - 1:50
    jako nazwę właściwości
    JavaScript, czyli src.
  • 1:50 - 1:53
    Dalej - "="...
    I wstawiamy nową wartość.
  • 1:53 - 1:54
    Ja zrobię pusty ciąg.
  • 1:54 - 1:57
    Zobaczcie: zdjęcia stały się białe,
  • 1:57 - 2:00
    bo pusty ciąg
    nie wskazuje żadnego obrazu.
  • 2:01 - 2:07
    Żeby określić, jaki powinien
    być nowy URL, wkleję stary
  • 2:08 - 2:11
    i zmienię nazwę pliku na "cat" (kot),
  • 2:11 - 2:16
    bo wiem, że to jest URL
    zdjęcia kota w Khan Academy.
  • 2:17 - 2:20
    Tak! Psy stały się kotami.
  • 2:20 - 2:22
    Kotyfikacja dobiega końca.
  • 2:23 - 2:28
    Widzicie jeszcze coś,
    co ma związek z psami?
  • 2:28 - 2:30
    Trudno to zauważyć,
  • 2:30 - 2:34
    ale jest: link do Wikipedii.
  • 2:35 - 2:37
    Odsyła do strony o psach.
  • 2:37 - 2:41
    Spłatam użytkownikom
    paskudnego figla.
  • 2:41 - 2:44
    Niech link łączy ich
    ze stroną o kotach.
  • 2:44 - 2:47
    Jak znajdę ten link w JavaScript?
  • 2:47 - 2:49
    Mogłabym nadać mu ID
  • 2:49 - 2:52
    i użyć polecenia "getElementById".
  • 2:52 - 2:54
    Mogę też użyć
    "getElementsByTagName"
  • 2:54 - 2:57
    i zmienić wszystkie linki na stronie.
  • 2:57 - 2:59
    Albo, w wyrafinowany sposób,
  • 2:59 - 3:03
    znajdę tylko linki
    odsyłające do stron o psach.
  • 3:03 - 3:05
    Użyję selektora zapytań CSS.
  • 3:07 - 3:11
    Pokażę wam zapytanie CSS,
    które chcę wpisać w tag "style".
  • 3:12 - 3:16
    To zapytanie znajdzie wszystkie linki
    mające coś wspólnego z psami.
  • 3:16 - 3:19
    Najpierw wpiszę "a",
    bo szukam linków.
  • 3:19 - 3:25
    Potem: [href*="Dog"].
  • 3:26 - 3:28
    Tym poleceniem każę CSS-owi
  • 3:28 - 3:32
    dopasować linki
    mające w sobie "Dog".
  • 3:32 - 3:35
    A później zmienimy kolor na fiolet.
  • 3:36 - 3:37
    Hura, udało się!
  • 3:38 - 3:42
    Dobry sposób!
    To jest selektor atrybutów.
  • 3:42 - 3:46
    Znamy wiele świetnych sposobów
    używania selektorów atrybutów,
  • 3:46 - 3:49
    by sięgnąć głęboko do dokumentu.
  • 3:49 - 3:53
    Aby znaleźć to w JavaScript,
  • 3:53 - 3:57
    możemy użyć polecenia
    "document.querySelectorAll".
  • 3:57 - 4:00
    Napiszę: "var linkEls ="...
  • 4:00 - 4:04
    "document.querySelectorAll".
  • 4:04 - 4:07
    Później możemy wklejać różne rzeczy
  • 4:07 - 4:09
    w tym nowym selektorze.
  • 4:11 - 4:15
    Pamiętajmy tylko,
    żeby usunąć cudzysłowy.
  • 4:15 - 4:16
    Już.
  • 4:19 - 4:23
    Teraz wygląda to jak porządny ciąg.
  • 4:23 - 4:25
    Będę zmieniać elementy.
  • 4:25 - 4:27
    Jeszcze raz zrobimy pętlę FOR.
  • 4:27 - 4:31
    Powinniście już przywyknąć
    do tworzenia tych pętli.
  • 4:31 - 4:33
    "I++"...
  • 4:33 - 4:38
    Każda ma zmieniać link
  • 4:38 - 4:41
    i kierować do strony o kotach
    w Wikipedii.
  • 4:42 - 4:46
    Napiszę więc: "linkEls[i].href",
  • 4:46 - 4:50
    bo to jest nazwa atrybutu,
    którą zmieniamy... i dalej "=".
  • 4:50 - 4:54
    Teraz znajdę ten URL
  • 4:55 - 4:57
    i wkleję go tutaj.
  • 4:58 - 5:00
    Zmienię na "kot",
  • 5:00 - 5:04
    bo wiem na pewno,
    że to jest URL tej strony.
  • 5:04 - 5:08
    Hura, kotyfikacja świata się dokonała!
  • 5:09 - 5:14
    Ale nie skończyliście uczyć się o tym,
    jak zmieniać strony. Oglądajcie dalej!
Title:
Edytowanie atrybutów (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:
05:31

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.