A jsme zpátky u programu, který pomocí pole vypisuje seznam mých kamarádů. Něco se mi ale na něm vůbec nelíbí. Pokaždé, když do pole přidám nového kamaráda, musím zde dolů přidat nový textový příkaz. Řekněme, že přidám Winstona. Neukáže se jen tak. Pokud chci, aby se ukázal, musím napsat "text(myFriends[3]...". Potom ještě změním polohu y a pak už uvidím Winstona. To je zbytečně moc práce. Chci, aby se při přidání někoho do pole vytvořil textový příkaz automaticky. Pamatujete si, jak jsme se učili cykly? Cykly nám pomohly opakovat tu samou část kódu několikrát za sebou. Například když jsme chtěli mít několik stromů za sebou. Nebo hromadu balónů. Cykly jsou mimo jiné taky skvělým způsobem pro to, jak přehrát část kódu pro každý prvek v poli. Cykly použijete skoro vždy, když budete používat pole. Pracují spolu opravdu dobře. Pojďme tedy pro zobrazení jmen mých přátel použít cyklus. Použijeme ho namísto všech těchto textových příkazů. Začneme se třemi otázkami, na které se ptáme vždy, když tvoříme cyklus. První: co chci opakovat? Podívám se, co se opakuje, a vidím textový příkaz. Druhá: co chci pokaždé změnit? Podíváme se a zjistíme, že odlišná je poloha y a aktuální index. Kamarádovo číslo a poloha y. Třetí: jak dlouho chceme opakovat? Chceme opakovat, až dokud nevypíšeme všechny kamarády. Teď už víme, co chceme, a tím pádem můžeme vytvořit cyklus. Začneme proměnnou pro počítaní, abychom měli přehled o stavu cyklu. Napíšeme: var friendNum = 0; A číslem 0 začíname kvůli tomu, že je to zároveň prvním číslem pole. Není to číslo 1. Poté máme while cyklus. Napíšeme: while(friendNum < myFriends.length) Porovnáme tedy aktuální počítadlo s celkovým počtem věcí v poli. A uvnitř cyklu, tam kde používáme textové příkazy, napíšeme textový příkaz myFriends, akorát místo čísla napíšeme "friendNum". FriendNum totiž představuje aktuální číslo. Pro teď určíme jen jednu pozici. Náš kód momentálně produkuje chybu s nekonečným cyklem. A to kvůli tomu, že jsme ohledně friendNum nic nezměnili. Musíme friendNum pokaždé zvyšovat, jinak pojede smyčka donekonečna. To kvůli tomu, že by to bylo vždy true. Něco se stalo, teď zakomentuji starý kód. Tím pádem můžu vidět, co se to vlastně stalo. Takže jsme zobrazili všechna jména, jsou ale všechna naházena přes sebe. Musíme změnit polohu y. Napíšeme friendNum krát 30. Je to sice fajn, ale Sophia se teď nachází mimo obrazovku. A pokud to zjistí, tak ji to moc nepotěší. Pojďme k tomu přidat 30, čímž je všechny posuneme o 30. Pěkné, teď máme cyklus zobrazující naše pole. A to znamená, že kdybychom měli více lidí, jako Ohnoes Guy, nebo dokonce Sala, z kterého přidáním do pole udělám svého kamaráda. A teď je můj kámoš. Jak vidíte, nové kamarády to zobrazuje automaticky, protože se to pokaždé přidá do celého pole. Náš starý kód můžeme smazat, už ho nebudeme potřebovat. Pojďme si teď kód projít a zopakovat si, jak vlastně funguje. Začínáme s proměnnou friendNum rovné číslu 0. Zkontrolujeme, zda je friendNum menší než aktuální délka. Takže si to představíme a vidíme, že 0 je méně než 6. To je pravdivé. Poté jdeme sem a napíšeme: text(myFriends[friendNum]...) Poprvé by to tedy bylo: myFriends[0]. Dále následuje: 30 plus 0 krát 30. Čímž se zajistí vyobrazení Sophie na pozicích 10 a 30. Poté máme friendNum++, čili se hodnota stává 1. Poté se cyklus opakuje a ptá se: je číslo 1 menší než délka pole? Ano, je. A cyklus běží a běží. A potom se dostaneme k Salovi. Sal je šestým prvkem v poli, má ale index 5 (kvůli začátku na 0). Je 5 méně než 6? Ano, je. Zobrazuje to kamaráda 5 a poté se hodnota stává 6. A je 6 méně než 6? Ne, není, je to rovno. Podmínka bude tedy nepravdivá (false). Nikdy se tedy nezobrazí šestý prvek. A to je dobře, protože v indexu 6 nic není. Šestý element je, ale index 6 nic neobsahuje. Může to být celkem matoucí, nejdřív je to 0, pak 1 a pak další. Naučíte se to. To je tedy náš cyklus. Pokud chcete, můžete klidně použít cyklus for. V případě, že preferuje cyklus for. Pro for cyklus napíšeme for(var FriendNum = 0) a podmínku. FriendNum je méně než myFriends.length, poté máme přírůstek friendNum++. A do vnitřku for cyklu vložíme tento řádek kódu. Změním polohu x a jak vidíte, dělá to úplně tu samou věc. Takže je na vás, který z nich použijete. Důležité je, že použijete cyklus v kombinaci s vaším polem. Učiní vás to opravdu mocnými.