< Return to Video

Zastosowania właściwości wydarzenia (Wersja Wideo)

  • 0:01 - 0:05
    Mam tu stronę z portretem Winstona.
    Robi się zimno,
  • 0:05 - 0:09
    w dodatku Winston się starzeje,
    więc chciałby mieć brodę.
  • 0:09 - 0:12
    Mogłabym narysować ją sama,
    ale będzie fajniej,
  • 0:13 - 0:16
    jeśli brodę będą dorabiać
    użytkownicy. Taką, jak zechcą:
  • 0:17 - 0:20
    długą, a może parodniowy zarost...
  • 0:21 - 0:22
    Jak to zrobić?
  • 0:24 - 0:29
    Jeden sposób - to dodać nasłuch
    zdarzenia do "mouseMove" na obrazie.
  • 0:29 - 0:31
    Funkcja zostanie przywołana zawsze,
  • 0:31 - 0:34
    gdy użytkownik przesunie myszkę
    po twarzy Winstona.
  • 0:35 - 0:38
    Zróbmy to,
    korzystając z nowo nabytej wiedzy.
  • 0:38 - 0:41
    Krok pierwszy
    - to znaleźć element, obraz.
  • 0:41 - 0:44
    "var face = document"...
  • 0:45 - 0:48
    "getElementById("face")".
  • 0:49 - 0:50
    Ładne ID!
  • 0:51 - 0:54
    Krok drugi:
    zdefiniować wywołanie zwrotne.
  • 0:54 - 0:58
    Zaczniemy od czegoś prostego,
    żeby zobaczyć, czy działa,
  • 0:59 - 1:02
    a potem sprawimy,
    że funkcja będzie robić więcej.
  • 1:02 - 1:06
    "document.getElementById("message")"...
  • 1:07 - 1:12
    ".textContent + = "mooove".
  • 1:12 - 1:13
    Dobrze.
  • 1:13 - 1:18
    Krok ostatni - to połączyć to z tym,
  • 1:18 - 1:22
    dla pewności, że funkcja zostanie
    przywołana po zdarzeniu "mouseMove".
  • 1:22 - 1:28
    Napiszemy więc: "face.
    addEventListener("mousemove"),
  • 1:28 - 1:32
    a potem dodamy nazwę funkcji,
    "onMouseMove".
  • 1:32 - 1:34
    Teraz zatrzymajcie film
  • 1:34 - 1:39
    i spróbujcie przesunąć myszkę
    po twarzy Winstona. Widzicie tekst?
  • 1:39 - 1:41
    Okej.
  • 1:41 - 1:44
    Miejmy nadzieję,
    że widzieliście, jak to działa.
  • 1:44 - 1:47
    Ale nie to ma robić
    nasz detektor zdarzeń.
  • 1:47 - 1:50
    Chcemy, by rysował, a nie pisał tekst.
  • 1:50 - 1:53
    Jak się rysuje
    na stronie internetowej?
  • 1:54 - 1:57
    Możemy wpisać tag "canvas"
  • 1:57 - 2:01
    i rysować na nim piksele,
    jak w programach z Processing JS.
  • 2:01 - 2:03
    Ale my rysujemy tylko brodę,
  • 2:04 - 2:07
    czyli czarne kropki.
  • 2:07 - 2:10
    Stworzymy więc "div"
    dla każdej kropki
  • 2:11 - 2:14
    i umieścimy je za pomocą
    pozycjonowania absolutnego.
  • 2:14 - 2:18
    Pokażę to na przykładzie
    jednego włoska.
  • 2:18 - 2:21
    Zrobię "div" z klasą "broda".
  • 2:22 - 2:26
    I mam dobre CSS
    do nadania stylu tej brodzie.
  • 2:26 - 2:28
    Wpiszę to tutaj.
  • 2:30 - 2:32
    Poprawmy to.
  • 2:32 - 2:37
    Jak widać - czarne tło,
    5 pikseli na 5...
  • 2:37 - 2:41
    Broda powinna być okrągła.
  • 2:41 - 2:45
    Używamy schematu
    pozycjonowania absolutnego.
  • 2:45 - 2:48
    Teraz "div" pojawia się pod obrazem.
  • 2:49 - 2:51
    Jak zrobić, by pokazało się na twarzy?
  • 2:52 - 2:54
    Stosujemy pozycjonowanie absolutne,
  • 2:54 - 2:57
    czyli powinniśmy użyć
    własności "top" i "left",
  • 2:57 - 3:02
    by określić,
    gdzie ma się znaleźć broda.
  • 3:02 - 3:04
    Napiszmy: "top: 80px",
  • 3:04 - 3:08
    a potem "left:15px".
  • 3:08 - 3:09
    Pięknie!
  • 3:10 - 3:14
    Skoro to działa w HTML,
    niech zadziała też w JavaScript,
  • 3:14 - 3:19
    by użytkownik dynamicznie tworzył "div"
    za każdym razem, gdy poruszy myszką.
  • 3:19 - 3:23
    Wracamy do funkcji
    wywołania zwrotnego.
  • 3:23 - 3:25
    Po pierwsze, tworzymy "div",
  • 3:25 - 3:31
    co możemy zrobić funkcją
    "document.createElement()".
  • 3:31 - 3:34
    Teraz będzie to "div".
  • 3:34 - 3:36
    Po drugie, dodajemy tę klasę:
  • 3:36 - 3:39
    beard.className = "beard".
  • 3:39 - 3:42
    Mamy więc "div",
    które unosi się w przestrzeni.
  • 3:42 - 3:46
    Ostatni krok
    - przyłączyć to do treści.
  • 3:47 - 3:50
    No dobrze.
    Zrobiliśmy w JavaScript to,
  • 3:50 - 3:54
    co wcześniej w HTML,
    więc HTML możemy już skasować.
  • 3:55 - 3:59
    Zatrzymajcie odtwarzanie
    i kliknijcie na Winstona.
  • 3:59 - 4:01
    Zobaczcie, co się stanie.
  • 4:03 - 4:07
    Widzieliście, że pokazał się zarost?
    A próbowaliście kliknąć kilka razy?
  • 4:07 - 4:11
    Jeśli tak, to zauważyliście,
    że 2. kliknięcie niczego nie zmieniło,
  • 4:11 - 4:14
    a przynajmniej tak wam się zdawało.
  • 4:14 - 4:18
    To dlatego, że każde "div"
    ma te same właściwości "góra" i "lewo".
  • 4:18 - 4:21
    Nowe wersje zbierają się na starych.
  • 4:21 - 4:26
    Chcemy, żeby "div" pokazywało się tam,
    gdzie akurat jest myszka użytkownika.
  • 4:26 - 4:30
    Ale jak się tego dowiemy?
  • 4:31 - 4:35
    Otóż przeglądarka
    zapisuje wiele informacji,
  • 4:35 - 4:38
    gdy nastąpi zdarzenie użytkownika.
    Np. gdzie to się stało.
  • 4:38 - 4:40
    Przeglądarka podaje tę informację,
  • 4:40 - 4:43
    gdy przywoła
    funkcję z detektora zdarzeń.
  • 4:43 - 4:47
    Ale skąd weźmiemy
    te fantastyczne informacje?
  • 4:47 - 4:50
    Dla podpowiedzi - jedna litera.
  • 4:52 - 4:56
    "e" to obiekt
    z informacjami o zdarzeniu.
  • 4:56 - 4:59
    Przeglądarka wysyła go
    jako 1. argument,
  • 4:59 - 5:02
    gdy nastąpi wywołanie zwrotne
    detektora zdarzeń.
  • 5:02 - 5:06
    Nie potrzebowaliśmy tego przedtem,
    więc nie pisałam list argumentów.
  • 5:06 - 5:09
    Ale skoro będziemy
    tego używać, nadam nazwę,
  • 5:09 - 5:12
    żeby było łatwo
    rozpoznać to w funkcji.
  • 5:12 - 5:16
    Pamiętacie, że w JS można przywołać
    funkcję z wieloma argumentami,
  • 5:16 - 5:19
    nawet jeśli funkcja
    z żadnego nie korzysta.
  • 5:19 - 5:23
    Zawsze otrzymywaliśmy te informacje,
    tylko o tym nie wiedzieliśmy.
  • 5:23 - 5:29
    Teraz loguję "e": console.log(e).
  • 5:29 - 5:32
    Zatrzymajcie film, kliknijcie
    na Winstona i zobaczcie konsolę.
  • 5:32 - 5:37
    Powinien tam być zalogowany obiekt
    zdarzenia. Można przejrzeć właściwości.
  • 5:39 - 5:44
    Są tu dwie właściwości,
    które szczególnie nas interesują:
  • 5:44 - 5:46
    "clientX" i "clientY".
  • 5:46 - 5:48
    Zapisują "x" i "y" zdarzenia.
  • 5:48 - 5:51
    Użyjemy tego,
    próbując pozycjonować brodę.
  • 5:51 - 5:55
    Niech góra brody
  • 5:55 - 5:59
    równa się "e.clientY",
  • 5:59 - 6:03
    plus "px" - "piksel", czyli jednostka.
  • 6:03 - 6:06
    A lewa strona to:
  • 6:07 - 6:10
    "e.clientX" plus jednostka.
  • 6:11 - 6:14
    Teraz przerwijcie
    i spróbujcie pojeździć myszką.
  • 6:15 - 6:17
    Narysujcie Winstonowi brodę.
  • 6:18 - 6:22
    Fajnie, co?
    Pewnie już wyobrażacie sobie zabawę
  • 6:22 - 6:25
    i malowanie w aplikacjach
    za pomocą "clientX" i "clientY".
  • 6:26 - 6:31
    Jak widzieliście, w konsoli jest sporo
    innych własności obiektu zdarzenia.
  • 6:31 - 6:35
    Najpraktyczniejsze są
    te związane z klawiaturą.
  • 6:35 - 6:39
    Znajdziecie klawisze, które wciskał
    użytkownik w chwili zdarzenia
  • 6:40 - 6:45
    i użyjecie ich do stworzenia interfejsu
    dostępnego z klawiatury lub fajnej gry.
  • 6:45 - 6:47
    Och, i jeszcze jedno.
  • 6:47 - 6:50
    Nie musicie nazywać
    tego argumentu "e".
  • 6:50 - 6:53
    To typowe,
    ale niektórzy projektanci stron
  • 6:53 - 6:58
    piszą "evt" lub "event".
  • 6:58 - 7:02
    Nieważne, jaką wybierzecie nazwę,
    oby odnosiła się do 1. argumentu,
  • 7:02 - 7:08
    który przeglądarka wprowadza w funkcję,
    a potem wy możecie się do tego odwołać.
  • 7:10 - 7:12
    Jeśli macie z tym kłopot,
  • 7:12 - 7:16
    użyjcie polecenia "console.log",
    by debugować.
  • 7:16 - 7:21
    Jeśli jesteście projektantem stron,
    konsola to wasza przyjaciółka!
Title:
Zastosowania właściwości wydarzenia (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:
07:23

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.