WEBVTT

00:00:00.757 --> 00:00:02.376
V tuto chvíli si asi uvědomujete,

00:00:02.376 --> 00:00:06.995
že jste při animování pokaždé
používali jednu a tu samou funkci.

00:00:07.652 --> 00:00:09.451
Jedná se o funkci "draw".

00:00:09.801 --> 00:00:13.406
Pojďme si ji připomenout
na našem programu pro animaci auta.

00:00:13.406 --> 00:00:16.992
Máme v něm proměnnou x
s počáteční hodnotou 11.

00:00:16.992 --> 00:00:22.648
Uvnitř funkce "draw" se pak
u proměnné x nakreslí auto.

00:00:22.648 --> 00:00:26.757
Poté program k proměnné x
pokaždé přičte hodnotu 3.

00:00:26.757 --> 00:00:28.378
Výsledkem toho je,

00:00:28.378 --> 00:00:31.807
že se auto nepřetržitě posouvá 
po 3 pixelech přes celou obrazovku.

00:00:32.747 --> 00:00:35.351
Takto to funguje.

00:00:35.351 --> 00:00:38.103
Ale teď, když už umíte
vytvořit své vlastní funkce,

00:00:38.103 --> 00:00:42.203
možná budete chtít vědět 
o funkci "draw" něco víc.

00:00:42.203 --> 00:00:44.109
Proč je vždy pojmenována "draw"?

00:00:44.109 --> 00:00:46.139
Je to vlastní funkce?

00:00:46.449 --> 00:00:48.664
Jsou to velmi dobré otázky.

00:00:49.254 --> 00:00:51.985
V knihovně ProcessingJS uvidíte,

00:00:51.985 --> 00:00:56.132
že funkce "draw" je jednou z
několika předdefinovaných funkcí.

00:00:56.132 --> 00:01:01.009
Tyto funkce dávají našim programům větší
kontrolu nad tím, co se děje na plátně.

00:01:01.009 --> 00:01:03.169
Předdefinovaná funkce je funkce,

00:01:03.169 --> 00:01:07.209
která již byla definována 
knihovnou ProcessingJS.

00:01:07.209 --> 00:01:11.149
Ale obvykle začíná
jako prázdná definice.

00:01:11.149 --> 00:01:17.045
Například v knihovně ProcessingJS
existuje kód, který vypadá takto:

00:01:17.045 --> 00:01:19.434
"var draw = function ()"

00:01:19.434 --> 00:01:23.266
A pak je úplně prázdný,
zcela prázdný.

00:01:23.266 --> 00:01:28.620
Na Khan Academy načítáme knihovnu 
ProcessingJS do každého zdejšího programu.

00:01:28.620 --> 00:01:32.823
Sice tento kód nikdy neuvidíte,
ale věřte mi, existuje.

00:01:33.977 --> 00:01:40.349
Tento kód teď zakomentuji,
protože ProcessingJS ho již pro nás dělá.

00:01:42.329 --> 00:01:45.308
A když ve vašem vlastním programu
předefinujete "draw",

00:01:45.308 --> 00:01:50.259
tak tato nová definice má přednost
před starou prázdnou definicí.

00:01:50.259 --> 00:01:53.862
Nyní funkce "draw" dělá
velmi zajímavé věci.

00:01:53.862 --> 00:01:55.547
Například kreslí auto.

00:01:56.959 --> 00:01:58.079
Otázkou nyní je:

00:01:58.079 --> 00:02:01.686
Proč je funkce "draw" 
přivolávána opakovaně?

00:02:01.686 --> 00:02:05.964
V knihovně ProcessingJS
je totiž také kód,

00:02:05.964 --> 00:02:11.111
který nastavuje časovač prohlížeče a
funkci přivolává opakovaně.

00:02:11.111 --> 00:02:13.998
Znovu a znovu a znovu.

00:02:15.128 --> 00:02:17.849
Musíme pojmenovat funkci "draw",

00:02:17.849 --> 00:02:22.073
protože to je název funkce,
kterou ProcessingJS volá opakovaně.

00:02:22.663 --> 00:02:27.543
Co když funkci přejmenujeme
například na "drawCar".

00:02:27.543 --> 00:02:33.480
Nejprve dostaneme neurčitou chybu,
měli bychom tedy napsat "var drawCar".

00:02:34.510 --> 00:02:35.567
Takže teď vidíte,

00:02:35.567 --> 00:02:39.651
že když přejmenujeme funkci na "drawCar",
tak už nevidíme žádnou animaci.

00:02:39.651 --> 00:02:44.692
A to proto, že tato funkce
už není přivolávána opakovaně.

00:02:44.692 --> 00:02:47.244
Jelikož již není 
pojmenována jako "draw".

00:02:47.738 --> 00:02:51.366
Musíme tedy kód,
který chceme volat opakovaně,

00:02:51.366 --> 00:02:55.912
vložit dovnitř funkce
pojmenované přesně "draw".

00:02:55.912 --> 00:03:00.594
Takže to udělám znovu,
a odtud přivolám "drawCar".

00:03:00.594 --> 00:03:03.957
Tak a máme to zpět.

00:03:05.177 --> 00:03:08.249
Čili funkce musí být 
pojmenována "draw".

00:03:08.879 --> 00:03:12.970
To také znamená, že byste neměli
pojmenovávat své vlastní funkce "draw".

00:03:12.970 --> 00:03:18.228
Pokud tedy nechcete, aby byly použity 
speciálně a přivolávány znovu a znovu.

00:03:18.228 --> 00:03:24.348
Také si pamatujte, že nemůžete mít
více funkcí s názvem "draw".

00:03:24.348 --> 00:03:27.889
Počítá se pouze poslední definice.

00:03:27.889 --> 00:03:31.770
Dejme tomu, že bychom
tady uvnitř měli "rect".

00:03:31.770 --> 00:03:35.903
Teď můžeme vidět,
že se naše auto už nekreslí.

00:03:35.903 --> 00:03:40.965
Místo toho se kreslí pouze obdélník,
protože se počítá pouze poslední definice.

00:03:40.965 --> 00:03:42.576
Pojďme to teď smazat.

00:03:44.676 --> 00:03:48.289
Funkce draw není jedinou
předdefinovanou funkcí,

00:03:48.289 --> 00:03:50.499
která funguje jinak.

00:03:50.499 --> 00:03:56.292
Existuje spousta funkcí
pro reakci na myš a na stisknutí kláves.

00:03:57.032 --> 00:04:01.624
Dejme tomu, že chceme program,
který nakreslí barevnou elipsu.

00:04:01.624 --> 00:04:04.276
A to kdykoli, když
uživatel pohne myší.

00:04:04.716 --> 00:04:09.042
Toho bychom mohli docílit s
následující funkcí.

00:04:09.042 --> 00:04:19.998
Napíšeme fill, mouseX, mouseY, mouseY
a ellipse mouseX, mouseY, 10 a 10.

00:04:19.998 --> 00:04:23.255
Dobře, oh, krásné.

00:04:23.255 --> 00:04:27.224
Tato funkce je volána
znovu a znovu.

00:04:27.724 --> 00:04:29.576
A to i když uživatel 
nepohybuje myší.

00:04:29.576 --> 00:04:31.286
Jako právě teď.

00:04:31.766 --> 00:04:34.703
A tento program funguje, 
dělá totiž přesně to, co chceme.

00:04:34.703 --> 00:04:38.568
Maluje tyto pěkné elipsy
po celé obrazovce.

00:04:38.568 --> 00:04:39.984
Ale jak se ukazuje,

00:04:39.984 --> 00:04:44.568
existuje lepší a efektivnější způsob,
jak docílit toho samého.

00:04:44.568 --> 00:04:49.845
Můžeme tedy změnit funkci "draw"
na "mouseMoved".

00:04:52.095 --> 00:04:54.477
A stále to funguje.

00:04:55.267 --> 00:04:58.751
Naše prostředí kontroluje programy,
aby následně zjistilo,

00:04:58.751 --> 00:05:00.754
zda jsme definovali
funkci "mouseMoved".

00:05:00.754 --> 00:05:05.457
A pokud ano, volá tuto funkci
kdykoli uživatel pohne myší.

00:05:05.457 --> 00:05:10.029
Ale nebude se volat,
pokud uživatel nepohybuje myší.

00:05:10.029 --> 00:05:13.423
Předtím jsme přivolali
kód ve funkci "draw".

00:05:13.423 --> 00:05:15.908
A to i když jsme to nepotřebovali, 
znovu a znovu.

00:05:15.908 --> 00:05:20.265
A teď voláme tento kód 
jen ve funkci "mouseMoved".

00:05:20.265 --> 00:05:23.292
Pouze tehdy, když se hodnoty mouseX 
nebo mouseY opravdu změní.

00:05:23.292 --> 00:05:28.183
Náš program je tedy efektivnější,
a to je dobrá věc.

00:05:28.183 --> 00:05:30.968
Obecně platí, že pokud chcete
změnit pouze výstup programu,

00:05:30.968 --> 00:05:33.369
a to když uživatel 
pohne myší,

00:05:33.369 --> 00:05:36.952
pak je lepší mít kód
uvnitř funkce "mouseMoved".

00:05:38.172 --> 00:05:40.987
A je tu spousta dalších
takto předdefinovaných funkcí.

00:05:40.987 --> 00:05:44.655
V dokumentaci můžete 
vidět další příklady.

00:05:44.655 --> 00:05:48.882
Jako "mousePressed", "mouseReleased",
"keyPressed" a další.

00:05:50.455 --> 00:05:54.883
Takže nezapomeňte, pokud chcete použít
speciální předdefinované funkce,

00:05:54.883 --> 00:05:59.244
jako "mouseMoved" nebo "draw",
napište je přesně a použijte je přesně.

00:05:59.244 --> 00:06:00.630
Pokud tak neučiníte,

00:06:00.630 --> 00:06:05.967
pak se ujistěte, že své vlastní funkci 
dáte nové a jedinečné jméno.