Return to Video

Special ProcessingJS functions

  • 0:01 - 0:05
    Może już wiecie, że trzeba
    zdefiniować pewną funkcję
  • 0:05 - 0:10
    gdy chcemy mieć w programie
    animację. To "draw" (rysuj).
  • 0:10 - 0:14
    Dla przypomnienia
    - program z animowanym autem.
  • 0:14 - 0:17
    Ma zmienną „x” i zaczyna się od 11.
  • 0:17 - 0:21
    Funkcja "draw" rysuje auto
  • 0:21 - 0:23
    w punkcie zmiennej
  • 0:23 - 0:27
    i za każdym razem do "x" dodaje 3.
  • 0:27 - 0:33
    Samochodzik stale przesuwa się
    po monitorze, zawsze o 3 piksele.
  • 0:33 - 0:35
    Tak to działa.
  • 0:35 - 0:38
    Umiecie już pisać własne funkcje,
  • 0:38 - 0:42
    może więc zastanawiacie się
    nad "draw".
  • 0:42 - 0:44
    Dlaczego zawsze tak się nazywa?
  • 0:44 - 0:46
    Czy to funkcja niestandardowa?
  • 0:47 - 0:48
    Bardzo trafne pytania!
  • 0:49 - 0:52
    W bibliotece Processing JS
  • 0:52 - 0:56
    „draw” jest jedną z nielicznych
    predefiniowanych funkcji,
  • 0:56 - 1:01
    które dają programom
    większą kontrolę nad obrazem.
  • 1:01 - 1:05
    Funkcja predefiniowana to taka,
    która została określona
  • 1:05 - 1:07
    przez bibliotekę Processing JS.
  • 1:08 - 1:11
    Zwykle zaczyna się
    jako pusta definicja.
  • 1:11 - 1:15
    Np. w bibliotece Processing JS
  • 1:15 - 1:19
    znajdziemy coś takiego:
    `var draw = function() { }`
  • 1:19 - 1:23
    a dalej jest pusto. Zupełnie!
  • 1:24 - 1:26
    Ładujemy bibliotekę ProcessingJS
  • 1:26 - 1:29
    do każdego programu w Khan Academy,
  • 1:29 - 1:34
    więc tej linii nie widzicie nigdy,
    ale wierzcie mi, ona istnieje.
  • 1:34 - 1:36
    Wyrzucę tę linię,
  • 1:37 - 1:40
    skoro Processing JS nas wyręcza.
  • 1:42 - 1:44
    Gdy ponownie zdefiniujecie „draw”
  • 1:44 - 1:50
    we własnym programie,
    nowa definicja anuluje starą, pustą.
  • 1:50 - 1:54
    Teraz funkcja "draw"
    robi świetne rzeczy,
  • 1:54 - 1:55
    np. rysuje auto.
  • 1:57 - 2:02
    Pytanie: dlaczego ta funkcja
    jest przywoływana raz po raz?
  • 2:02 - 2:06
    W bibliotece ProcessingJS
    jest też program,
  • 2:06 - 2:09
    który ustawia zegar przeglądarki
  • 2:10 - 2:14
    i stale przywołuje funkcję "draw".
  • 2:15 - 2:18
    Funkcję musimy nazwać "draw",
  • 2:18 - 2:22
    bo taka jest nazwa,
    którą przywołuje ProcessingJS.
  • 2:23 - 2:27
    Jeśli zmienimy nazwę,
    np. na "drawCar",
  • 2:28 - 2:30
    widzimy: "niezdefiniowany błąd".
  • 2:31 - 2:33
    Napiszmy więc "var drawCar".
  • 2:35 - 2:40
    Jak widzicie, jeśli zmienimy nazwę
    na "drawCar", animacji nie będzie.
  • 2:40 - 2:45
    To dlatego, że funkcja
    nie jest już stale przywoływana.
  • 2:45 - 2:47
    Bo nie nazywa się "draw".
  • 2:48 - 2:50
    Musimy wprowadzić program,
  • 2:50 - 2:55
    który ma być stale przywoływany
    wewnątrz funkcji o nazwie "draw".
  • 2:55 - 2:57
    Zrobię to jeszcze raz
  • 2:58 - 3:01
    i przywołam "drawCar" tutaj.
  • 3:01 - 3:03
    Aha! Znowu działa.
  • 3:04 - 3:05
    No dobrze.
  • 3:05 - 3:07
    Musi być nazwa "draw".
  • 3:08 - 3:10
    Dlatego też nie powinniście nadawać
  • 3:10 - 3:13
    niestandardowym funkcjom nazwy "draw",
  • 3:13 - 3:18
    chyba że chcecie, by były
    przywoływane raz po raz.
  • 3:19 - 3:20
    I pamiętajcie,
  • 3:20 - 3:24
    nie możecie nadać
    nazwy "draw" kilku funkcjom.
  • 3:24 - 3:28
    Będzie się liczyć
    tylko ostatnia definicja.
  • 3:28 - 3:31
    Jeśli damy tu "rect",
  • 3:32 - 3:36
    samochodzik już się nie pojawi.
  • 3:36 - 3:41
    Rysowany jest tylko prostokąt,
    bo liczy się ostatnia definicja.
  • 3:41 - 3:42
    Skasujmy to więc.
  • 3:45 - 3:49
    "Draw" nie jest jedyną
    predefiniowaną funkcją
  • 3:49 - 3:51
    zachowującą się wyjątkowo.
  • 3:51 - 3:52
    Jest też grupa funkcji
  • 3:53 - 3:57
    obsługujących reakcję myszy
    i wciskanie klawiszy na klawiaturze.
  • 3:57 - 4:02
    Powiedzmy, że program
    ma narysować kolorową elipsę,
  • 4:02 - 4:05
    gdy tylko użytkownik
    poruszy myszką.
  • 4:05 - 4:09
    Załatwimy sprawę
    właśnie taką funkcją.
  • 4:09 - 4:12
    "MouseX", "mouseY",
  • 4:12 - 4:15
    a potem "ellipse".
  • 4:15 - 4:18
    "MouseX", "mouseY"...
  • 4:20 - 4:22
    No dobrze. Pięknie!
  • 4:23 - 4:28
    Ta funkcja jest przywoływana
    raz po raz,
  • 4:28 - 4:32
    nawet gdy użytkownik
    nie porusza myszką, jak w tej chwili.
  • 4:32 - 4:35
    Program działa, robi to, czego żądamy,
  • 4:35 - 4:38
    czyli maluje ładne elipsy
    na całym monitorze.
  • 4:38 - 4:43
    Ale okazuje się, że jest
    lepszy, wydajniejszy sposób.
  • 4:45 - 4:50
    Możemy zamienić funkcję "draw"
    na "mouseMoved"
  • 4:51 - 4:54
    i zobaczmy... Wciąż działa!
  • 4:55 - 4:59
    Nasze środowisko sprawdza,
    czy w programach zdefiniowano
  • 4:59 - 5:02
    funkcję "mouseMoved", a jeśli tak,
  • 5:02 - 5:06
    to przywołuje ją,
    gdy użytkownik porusza myszką.
  • 5:06 - 5:10
    Ale funkcja nie zostanie przywołana,
    gdy użytkownik myszką nie rusza.
  • 5:11 - 5:16
    Wcześniej przywoływaliśmy raz po raz
    program w "draw", choć bez potrzeby.
  • 5:16 - 5:18
    Teraz przywołujemy go
  • 5:19 - 5:23
    w "mouseMoved" tylko gdy "mouseX"
    lub "mouseY" naprawdę się zmieniło.
  • 5:24 - 5:27
    Program stał się
    wydajniejszy, a to dobrze.
  • 5:28 - 5:33
    Jeśli chcecie zmienić efekt działania
    programu, gdy użytkownik rusza myszką,
  • 5:33 - 5:37
    to lepiej jest mieć ten program
    w funkcji "mouseMoved".
  • 5:38 - 5:41
    Jest więcej
    predefiniowanych funkcji;
  • 5:41 - 5:45
    przykłady znajdziecie
    w dokumentacji:
  • 5:45 - 5:49
    "mousePressed",
    "mouseReleased", "keyPressed" itd.
  • 5:50 - 5:54
    Pamiętajcie: chcąc użyć
    specjalnej predefiniowanej funkcji,
  • 5:55 - 5:57
    jak "mouseMoved" lub "draw",
  • 5:57 - 5:59
    poprawnie zapiszcie jej nazwę.
  • 6:00 - 6:05
    Albo nadawajcie własnym funkcjom
    nowe, niepowtarzalne nazwy.
Title:
Special ProcessingJS functions
Description:

This is a video recording of a talk-through, uploaded to make it easier to create subtitles. Please watch the original interactive talk-through on Khan Academy, where you can pause and edit the code and see the code in better resolution: http://www.khanacademy.org/programming
more » « less
Video Language:
English
Duration:
06:08

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.