[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.76,0:00:02.38,Default,,0000,0000,0000,,V tuto chvíli si asi uvědomujete, Dialogue: 0,0:00:02.38,0:00:06.100,Default,,0000,0000,0000,,že jste při animování pokaždé\Npoužívali jednu a tu samou funkci. Dialogue: 0,0:00:07.65,0:00:09.45,Default,,0000,0000,0000,,Jedná se o funkci "draw". Dialogue: 0,0:00:09.80,0:00:13.41,Default,,0000,0000,0000,,Pojďme si ji připomenout\Nna našem programu pro animaci auta. Dialogue: 0,0:00:13.41,0:00:16.99,Default,,0000,0000,0000,,Máme v něm proměnnou x\Ns počáteční hodnotou 11. Dialogue: 0,0:00:16.99,0:00:22.65,Default,,0000,0000,0000,,Uvnitř funkce "draw" se pak\Nu proměnné x nakreslí auto. Dialogue: 0,0:00:22.65,0:00:26.76,Default,,0000,0000,0000,,Poté program k proměnné x\Npokaždé přičte hodnotu 3. Dialogue: 0,0:00:26.76,0:00:28.38,Default,,0000,0000,0000,,Výsledkem toho je, Dialogue: 0,0:00:28.38,0:00:31.81,Default,,0000,0000,0000,,že se auto nepřetržitě posouvá \Npo 3 pixelech přes celou obrazovku. Dialogue: 0,0:00:32.75,0:00:35.35,Default,,0000,0000,0000,,Takto to funguje. Dialogue: 0,0:00:35.35,0:00:38.10,Default,,0000,0000,0000,,Ale teď, když už umíte\Nvytvořit své vlastní funkce, Dialogue: 0,0:00:38.10,0:00:42.20,Default,,0000,0000,0000,,možná budete chtít vědět \No funkci "draw" něco víc. Dialogue: 0,0:00:42.20,0:00:44.11,Default,,0000,0000,0000,,Proč je vždy pojmenována "draw"? Dialogue: 0,0:00:44.11,0:00:46.14,Default,,0000,0000,0000,,Je to vlastní funkce? Dialogue: 0,0:00:46.45,0:00:48.66,Default,,0000,0000,0000,,Jsou to velmi dobré otázky. Dialogue: 0,0:00:49.25,0:00:51.98,Default,,0000,0000,0000,,V knihovně ProcessingJS uvidíte, Dialogue: 0,0:00:51.98,0:00:56.13,Default,,0000,0000,0000,,že funkce "draw" je jednou z\Nněkolika předdefinovaných funkcí. Dialogue: 0,0:00:56.13,0:01:01.01,Default,,0000,0000,0000,,Tyto funkce dávají našim programům větší\Nkontrolu nad tím, co se děje na plátně. Dialogue: 0,0:01:01.01,0:01:03.17,Default,,0000,0000,0000,,Předdefinovaná funkce je funkce, Dialogue: 0,0:01:03.17,0:01:07.21,Default,,0000,0000,0000,,která již byla definována \Nknihovnou ProcessingJS. Dialogue: 0,0:01:07.21,0:01:11.15,Default,,0000,0000,0000,,Ale obvykle začíná\Njako prázdná definice. Dialogue: 0,0:01:11.15,0:01:17.04,Default,,0000,0000,0000,,Například v knihovně ProcessingJS\Nexistuje kód, který vypadá takto: Dialogue: 0,0:01:17.04,0:01:19.43,Default,,0000,0000,0000,,"var draw = function ()" Dialogue: 0,0:01:19.43,0:01:23.27,Default,,0000,0000,0000,,A pak je úplně prázdný,\Nzcela prázdný. Dialogue: 0,0:01:23.27,0:01:28.62,Default,,0000,0000,0000,,Na Khan Academy načítáme knihovnu \NProcessingJS do každého zdejšího programu. Dialogue: 0,0:01:28.62,0:01:32.82,Default,,0000,0000,0000,,Sice tento kód nikdy neuvidíte,\Nale věřte mi, existuje. Dialogue: 0,0:01:33.98,0:01:40.35,Default,,0000,0000,0000,,Tento kód teď zakomentuji,\Nprotože ProcessingJS ho již pro nás dělá. Dialogue: 0,0:01:42.33,0:01:45.31,Default,,0000,0000,0000,,A když ve vašem vlastním programu\Npředefinujete "draw", Dialogue: 0,0:01:45.31,0:01:50.26,Default,,0000,0000,0000,,tak tato nová definice má přednost\Npřed starou prázdnou definicí. Dialogue: 0,0:01:50.26,0:01:53.86,Default,,0000,0000,0000,,Nyní funkce "draw" dělá\Nvelmi zajímavé věci. Dialogue: 0,0:01:53.86,0:01:55.55,Default,,0000,0000,0000,,Například kreslí auto. Dialogue: 0,0:01:56.96,0:01:58.08,Default,,0000,0000,0000,,Otázkou nyní je: Dialogue: 0,0:01:58.08,0:02:01.69,Default,,0000,0000,0000,,Proč je funkce "draw" \Npřivolávána opakovaně? Dialogue: 0,0:02:01.69,0:02:05.96,Default,,0000,0000,0000,,V knihovně ProcessingJS\Nje totiž také kód, Dialogue: 0,0:02:05.96,0:02:11.11,Default,,0000,0000,0000,,který nastavuje časovač prohlížeče a\Nfunkci přivolává opakovaně. Dialogue: 0,0:02:11.11,0:02:13.100,Default,,0000,0000,0000,,Znovu a znovu a znovu. Dialogue: 0,0:02:15.13,0:02:17.85,Default,,0000,0000,0000,,Musíme pojmenovat funkci "draw", Dialogue: 0,0:02:17.85,0:02:22.07,Default,,0000,0000,0000,,protože to je název funkce,\Nkterou ProcessingJS volá opakovaně. Dialogue: 0,0:02:22.66,0:02:27.54,Default,,0000,0000,0000,,Co když funkci přejmenujeme\Nnapříklad na "drawCar". Dialogue: 0,0:02:27.54,0:02:33.48,Default,,0000,0000,0000,,Nejprve dostaneme neurčitou chybu,\Nměli bychom tedy napsat "var drawCar". Dialogue: 0,0:02:34.51,0:02:35.57,Default,,0000,0000,0000,,Takže teď vidíte, Dialogue: 0,0:02:35.57,0:02:39.65,Default,,0000,0000,0000,,že když přejmenujeme funkci na "drawCar",\Ntak už nevidíme žádnou animaci. Dialogue: 0,0:02:39.65,0:02:44.69,Default,,0000,0000,0000,,A to proto, že tato funkce\Nuž není přivolávána opakovaně. Dialogue: 0,0:02:44.69,0:02:47.24,Default,,0000,0000,0000,,Jelikož již není \Npojmenována jako "draw". Dialogue: 0,0:02:47.74,0:02:51.37,Default,,0000,0000,0000,,Musíme tedy kód,\Nkterý chceme volat opakovaně, Dialogue: 0,0:02:51.37,0:02:55.91,Default,,0000,0000,0000,,vložit dovnitř funkce\Npojmenované přesně "draw". Dialogue: 0,0:02:55.91,0:03:00.59,Default,,0000,0000,0000,,Takže to udělám znovu,\Na odtud přivolám "drawCar". Dialogue: 0,0:03:00.59,0:03:03.96,Default,,0000,0000,0000,,Tak a máme to zpět. Dialogue: 0,0:03:05.18,0:03:08.25,Default,,0000,0000,0000,,Čili funkce musí být \Npojmenována "draw". Dialogue: 0,0:03:08.88,0:03:12.97,Default,,0000,0000,0000,,To také znamená, že byste neměli\Npojmenovávat své vlastní funkce "draw". Dialogue: 0,0:03:12.97,0:03:18.23,Default,,0000,0000,0000,,Pokud tedy nechcete, aby byly použity \Nspeciálně a přivolávány znovu a znovu. Dialogue: 0,0:03:18.23,0:03:24.35,Default,,0000,0000,0000,,Také si pamatujte, že nemůžete mít\Nvíce funkcí s názvem "draw". Dialogue: 0,0:03:24.35,0:03:27.89,Default,,0000,0000,0000,,Počítá se pouze poslední definice. Dialogue: 0,0:03:27.89,0:03:31.77,Default,,0000,0000,0000,,Dejme tomu, že bychom\Ntady uvnitř měli "rect". Dialogue: 0,0:03:31.77,0:03:35.90,Default,,0000,0000,0000,,Teď můžeme vidět,\Nže se naše auto už nekreslí. Dialogue: 0,0:03:35.90,0:03:40.96,Default,,0000,0000,0000,,Místo toho se kreslí pouze obdélník,\Nprotože se počítá pouze poslední definice. Dialogue: 0,0:03:40.96,0:03:42.58,Default,,0000,0000,0000,,Pojďme to teď smazat. Dialogue: 0,0:03:44.68,0:03:48.29,Default,,0000,0000,0000,,Funkce draw není jedinou\Npředdefinovanou funkcí, Dialogue: 0,0:03:48.29,0:03:50.50,Default,,0000,0000,0000,,která funguje jinak. Dialogue: 0,0:03:50.50,0:03:56.29,Default,,0000,0000,0000,,Existuje spousta funkcí\Npro reakci na myš a na stisknutí kláves. Dialogue: 0,0:03:57.03,0:04:01.62,Default,,0000,0000,0000,,Dejme tomu, že chceme program,\Nkterý nakreslí barevnou elipsu. Dialogue: 0,0:04:01.62,0:04:04.28,Default,,0000,0000,0000,,A to kdykoli, když\Nuživatel pohne myší. Dialogue: 0,0:04:04.72,0:04:09.04,Default,,0000,0000,0000,,Toho bychom mohli docílit s\Nnásledující funkcí. Dialogue: 0,0:04:09.04,0:04:19.100,Default,,0000,0000,0000,,Napíšeme fill, mouseX, mouseY, mouseY\Na ellipse mouseX, mouseY, 10 a 10. Dialogue: 0,0:04:19.100,0:04:23.26,Default,,0000,0000,0000,,Dobře, oh, krásné. Dialogue: 0,0:04:23.26,0:04:27.22,Default,,0000,0000,0000,,Tato funkce je volána\Nznovu a znovu. Dialogue: 0,0:04:27.72,0:04:29.58,Default,,0000,0000,0000,,A to i když uživatel \Nnepohybuje myší. Dialogue: 0,0:04:29.58,0:04:31.29,Default,,0000,0000,0000,,Jako právě teď. Dialogue: 0,0:04:31.77,0:04:34.70,Default,,0000,0000,0000,,A tento program funguje, \Ndělá totiž přesně to, co chceme. Dialogue: 0,0:04:34.70,0:04:38.57,Default,,0000,0000,0000,,Maluje tyto pěkné elipsy\Npo celé obrazovce. Dialogue: 0,0:04:38.57,0:04:39.98,Default,,0000,0000,0000,,Ale jak se ukazuje, Dialogue: 0,0:04:39.98,0:04:44.57,Default,,0000,0000,0000,,existuje lepší a efektivnější způsob,\Njak docílit toho samého. Dialogue: 0,0:04:44.57,0:04:49.84,Default,,0000,0000,0000,,Můžeme tedy změnit funkci "draw"\Nna "mouseMoved". Dialogue: 0,0:04:52.10,0:04:54.48,Default,,0000,0000,0000,,A stále to funguje. Dialogue: 0,0:04:55.27,0:04:58.75,Default,,0000,0000,0000,,Naše prostředí kontroluje programy,\Naby následně zjistilo, Dialogue: 0,0:04:58.75,0:05:00.75,Default,,0000,0000,0000,,zda jsme definovali\Nfunkci "mouseMoved". Dialogue: 0,0:05:00.75,0:05:05.46,Default,,0000,0000,0000,,A pokud ano, volá tuto funkci\Nkdykoli uživatel pohne myší. Dialogue: 0,0:05:05.46,0:05:10.03,Default,,0000,0000,0000,,Ale nebude se volat,\Npokud uživatel nepohybuje myší. Dialogue: 0,0:05:10.03,0:05:13.42,Default,,0000,0000,0000,,Předtím jsme přivolali\Nkód ve funkci "draw". Dialogue: 0,0:05:13.42,0:05:15.91,Default,,0000,0000,0000,,A to i když jsme to nepotřebovali, \Nznovu a znovu. Dialogue: 0,0:05:15.91,0:05:20.26,Default,,0000,0000,0000,,A teď voláme tento kód \Njen ve funkci "mouseMoved". Dialogue: 0,0:05:20.26,0:05:23.29,Default,,0000,0000,0000,,Pouze tehdy, když se hodnoty mouseX \Nnebo mouseY opravdu změní. Dialogue: 0,0:05:23.29,0:05:28.18,Default,,0000,0000,0000,,Náš program je tedy efektivnější,\Na to je dobrá věc. Dialogue: 0,0:05:28.18,0:05:30.97,Default,,0000,0000,0000,,Obecně platí, že pokud chcete\Nzměnit pouze výstup programu, Dialogue: 0,0:05:30.97,0:05:33.37,Default,,0000,0000,0000,,a to když uživatel \Npohne myší, Dialogue: 0,0:05:33.37,0:05:36.95,Default,,0000,0000,0000,,pak je lepší mít kód\Nuvnitř funkce "mouseMoved". Dialogue: 0,0:05:38.17,0:05:40.99,Default,,0000,0000,0000,,A je tu spousta dalších\Ntakto předdefinovaných funkcí. Dialogue: 0,0:05:40.99,0:05:44.66,Default,,0000,0000,0000,,V dokumentaci můžete \Nvidět další příklady. Dialogue: 0,0:05:44.66,0:05:48.88,Default,,0000,0000,0000,,Jako "mousePressed", "mouseReleased",\N"keyPressed" a další. Dialogue: 0,0:05:50.46,0:05:54.88,Default,,0000,0000,0000,,Takže nezapomeňte, pokud chcete použít\Nspeciální předdefinované funkce, Dialogue: 0,0:05:54.88,0:05:59.24,Default,,0000,0000,0000,,jako "mouseMoved" nebo "draw",\Nnapište je přesně a použijte je přesně. Dialogue: 0,0:05:59.24,0:06:00.63,Default,,0000,0000,0000,,Pokud tak neučiníte, Dialogue: 0,0:06:00.63,0:06:05.97,Default,,0000,0000,0000,,pak se ujistěte, že své vlastní funkci \Ndáte nové a jedinečné jméno.