Drahokam, a velmi pěkný drahokam! Ale víte, co je lepší než jeden drahokam? Je to celá řada drahokamů! Nyní již samozřejmě víme, že nejlepší způsob, jak řadu drahokamů udělat, bude cyklem. Pojďme tedy použít cyklus for k nakreslení 12 drahokamů v řadě. Zleva doprava přes obrazovku. Takhle. Napíšeme tedy: for (var i = 0; i < 12; i++). Poté vezmeme tento řádek a přesuneme ho dovnitř, sem. Takže zde máme 12 drahokamů, ale všechny jsou momentálně nahrnuty přímo na sebe. A my je chceme vidět přes obrazovku. To znamená, že musíme upravit proměnnou x. Proměnná x je nyní 36 a my chceme, aby měla pokaždé jinou hodnotu. To znamená, že musí být x závislé na i. Co můžeme udělat, je jednoduše napsat: i krát 36. Takže první je na 0, pak 36 a pak 72 atd. Super, nyní máme řádek drahokamů. Připomíná mi to jednu z těch scén v Indianě Jones nebo Aladdinovi, kde hrdina v podzemní objeví pokladnice drahokamů. Obvykle ale najdou mnohem více drahokamů než tohle. Nejen řadu drahokamů, ale přímo hromadu drahokamů. Jak tedy můžeme vyrobit další drahokamy, které by byly i směrem dolů po obrazovce? No, mohli bychom začít opakováním cyklu for a zkopírovat ho sem. Poté musíme pokaždé změnit proměnnou y. Takže to změníme na 60 a poté na 90. Nyní máme tři řady drahokamů, ale začíná to být velmi nudné, protože jenom kopírujeme a vkládáme, přičemž měníme jenom tuto jednu věc. Obvykle, když bychom přišli na to, že píšeme opakující se kód, řekli bychom si: „Možná bychom místo toho měli použít cyklus. “ Jenže my již používáme cyklus. Jaké je tedy řešení, abychom se vyhnuly opakujícímu se kopírování a vkládání? Je to něco, čemu říkáme "vnořené for cykly", tedy cyklus uvnitř cyklu. Co tedy budeme dělat je to, že vytvoříme vnější cyklus, který se postará o to, aby drahokamy šly dolů po obrazovce. A pak se náš vnitřní cyklus postará o to, co dělá teď, tedy aby drahokamy šly zleva doprava. Hned vám ukážu, co mám na mysli. Začneme "for" a použijeme novou proměnnou "j", protože "i" už používáme. for (var j = 0; j < 13; j++). Takže to bude tedy náš vnější cyklus, pro směr od shora dolů. A pak si prostě vezmeme jeden z našich předchozích for cyklů, vložíme ho dovnitř a opravíme odsazení. A tyto staré odstraníme. Takže všechny cykly máme nahromaděné nahoře ve stejné řadě. Teď chceme změnit y, je to tak? To je to, co jsme změnili předtím, když jsme kód kopírovali. A momentálně je y vždy 90. A my chceme změnit y pro každý řádek. Takže pokud je x závislé na i, chceme, aby y bylo závislé na j. Můžeme to tedy změnit na něco jako: j krát 30. Tolik drahokamů! Pojďme si kód znovu projít a říct si, co dělá. Vnější cyklus vytvoří proměnnou j a zvyšuje ji až na hodnotu 13. Po každém vykonání tohoto vnějšího cyklu poběží i tento vnitřní cyklus. Vnitřní cyklus vytvoří proměnnou i, která stoupá až na hodnotu 12. A po každém provedení vnitřního cyklu se nakreslí obrázek na x a y, které jsou založeny na i a j. Proměnná i se kvůli tomu mění mnohem častěji mění než j. Abychom to pochopili lépe, zkusme si hodnoty i a j vizualizovat. Takže toto zakomentuji a pak nastavím barvu výplně. Budu používat textový příkaz pro zobrazení hodnoty j. Takže "text j" a pak to dám na příslušné místo zde. Nyní můžeme vidět, jak se j pohybuje od 0 do 12. To je v podstatě místo, kde jsou umístěny řady drahokamů. A teď si vizualizujeme "i" a uvidíte, jak se mění. Takže pro "i" uděláme jinou barvu. Pak "i" někam dáme. A jeho hodnotu x změníme tak, že jde přes obrazovku. Uděláme to samé pro y. Nyní můžeme vidět, že "i" jde od 0 do 11. A "i", jak jsem říkala, se mění mnohem častěji. Tento řádek kódu bude vykonán mnohem častěji, než tento řádek kódu. Protože tento řádek kódu je spuštěn při každém provedení vnitřního cyklu, zatímco tento řádek kódu se vykoná pouze při každém provedení vnějšího cyklu. Doufám, že vám tato vizualizace i a j pomůže lépe pochopit vnořené for cykly. Nyní vrátíme zpět naše drahokamy, protože jsou mnohem hezčí! S vnořenými cykly toho můžete dělat opravdu mnoho. Stačí popřemýšlet o čemkoliv, co na světě existuje. Něco jako dvourozměrná mřížka, šachovnice, přikrývka, hvězdy na americké vlajce, zajímavé vzory a tapety. Nastartujte svou fantazii a pohrajte si s tímto kódem. Například změňte obrázek. Já začnu tím, že ho změním na srdce! Abych vám ukázala, jak moc mám vnořené for cykly ráda!