WEBVTT

00:00:01.496 --> 00:00:04.117
Drahokam, a velmi pěkný drahokam!

00:00:04.117 --> 00:00:06.286
Ale víte, co je lepší
než jeden drahokam?

00:00:06.286 --> 00:00:08.275
Je to celá řada drahokamů!

00:00:08.275 --> 00:00:09.942
Nyní již samozřejmě víme,

00:00:09.942 --> 00:00:12.751
že nejlepší způsob, jak řadu 
drahokamů udělat, bude cyklem.

00:00:12.751 --> 00:00:16.162
Pojďme tedy použít cyklus for k
nakreslení 12 drahokamů v řadě.

00:00:16.162 --> 00:00:19.523
Zleva doprava přes obrazovku.

00:00:19.523 --> 00:00:21.624
Takhle.

00:00:21.624 --> 00:00:31.046
Napíšeme tedy: 
for (var i = 0; i < 12; i++).

00:00:31.046 --> 00:00:34.939
Poté vezmeme tento řádek
a přesuneme ho dovnitř, sem.

00:00:36.019 --> 00:00:37.979
Takže zde máme 12 drahokamů,

00:00:37.979 --> 00:00:40.389
ale všechny jsou momentálně
nahrnuty přímo na sebe.

00:00:40.389 --> 00:00:43.401
A my je chceme
vidět přes obrazovku.

00:00:43.401 --> 00:00:45.941
To znamená, že musíme
upravit proměnnou x.

00:00:45.941 --> 00:00:49.524
Proměnná x je nyní 36 a my chceme, 
aby měla pokaždé jinou hodnotu.

00:00:49.524 --> 00:00:51.859
To znamená, že musí být x
závislé na i.

00:00:51.859 --> 00:00:56.329
Co můžeme udělat,
je jednoduše napsat: i krát 36.

00:00:56.329 --> 00:01:01.627
Takže první je na 0, pak 36
a pak 72 atd.

00:01:02.687 --> 00:01:04.575
Super, nyní máme 
řádek drahokamů.

00:01:04.575 --> 00:01:07.997
Připomíná mi to jednu z těch scén
v Indianě Jones nebo Aladdinovi,

00:01:07.997 --> 00:01:11.306
kde hrdina v podzemní objeví
pokladnice drahokamů.

00:01:11.306 --> 00:01:13.732
Obvykle ale najdou
mnohem více drahokamů než tohle.

00:01:13.732 --> 00:01:17.306
Nejen řadu drahokamů,
ale přímo hromadu drahokamů.

00:01:17.306 --> 00:01:23.512
Jak tedy můžeme vyrobit další drahokamy,
které by byly i směrem dolů po obrazovce?

00:01:24.276 --> 00:01:29.539
No, mohli bychom začít opakováním
cyklu for a zkopírovat ho sem.

00:01:30.389 --> 00:01:32.795
Poté musíme pokaždé
změnit proměnnou y.

00:01:34.355 --> 00:01:37.578
Takže to změníme
na 60 a poté na 90.

00:01:37.578 --> 00:01:44.060
Nyní máme tři řady drahokamů,
ale začíná to být velmi nudné,

00:01:44.060 --> 00:01:49.114
protože jenom kopírujeme a vkládáme,
přičemž měníme jenom tuto jednu věc.

00:01:49.114 --> 00:01:52.889
Obvykle, když bychom přišli na to, 
že píšeme opakující se kód,

00:01:52.889 --> 00:01:56.537
řekli bychom si: „Možná bychom 
místo toho měli použít cyklus. “

00:01:56.537 --> 00:01:58.607
Jenže my již používáme cyklus.

00:01:58.607 --> 00:02:00.634
Jaké je tedy řešení,

00:02:00.634 --> 00:02:03.854
abychom se vyhnuly opakujícímu se
kopírování a vkládání?

00:02:03.854 --> 00:02:09.358
Je to něco, čemu říkáme "vnořené 
for cykly", tedy cyklus uvnitř cyklu.

00:02:09.358 --> 00:02:12.132
Co tedy budeme dělat je to, 
že vytvoříme vnější cyklus,

00:02:12.132 --> 00:02:15.038
který se postará o to, 
aby drahokamy šly dolů po obrazovce.

00:02:15.038 --> 00:02:19.234
A pak se náš vnitřní cyklus 
postará o to, co dělá teď,

00:02:19.234 --> 00:02:20.997
tedy aby drahokamy 
šly zleva doprava.

00:02:21.767 --> 00:02:23.789
Hned vám ukážu, 
co mám na mysli.

00:02:23.789 --> 00:02:28.351
Začneme "for" a použijeme 
novou proměnnou "j",

00:02:28.351 --> 00:02:29.851
protože "i" už používáme.

00:02:29.851 --> 00:02:35.974
for (var j = 0; j < 13; j++).

00:02:37.274 --> 00:02:41.359
Takže to bude tedy náš vnější cyklus,
pro směr od shora dolů.

00:02:41.359 --> 00:02:45.037
A pak si prostě vezmeme
jeden z našich předchozích for cyklů,

00:02:45.037 --> 00:02:49.444
vložíme ho dovnitř a
opravíme odsazení.

00:02:50.274 --> 00:02:52.164
A tyto staré odstraníme.

00:02:53.274 --> 00:02:58.719
Takže všechny cykly máme 
nahromaděné nahoře ve stejné řadě.

00:02:58.729 --> 00:03:01.439
Teď chceme změnit y,
je to tak?

00:03:01.439 --> 00:03:04.268
To je to, co jsme změnili předtím,
když jsme kód kopírovali.

00:03:04.268 --> 00:03:06.108
A momentálně je y vždy 90.

00:03:06.108 --> 00:03:08.710
A my chceme změnit y 
pro každý řádek.

00:03:09.440 --> 00:03:15.308
Takže pokud je x závislé na i,
chceme, aby y bylo závislé na j.

00:03:15.998 --> 00:03:24.663
Můžeme to tedy změnit 
na něco jako: j krát 30.

00:03:26.163 --> 00:03:27.705
Tolik drahokamů!

00:03:29.604 --> 00:03:32.336
Pojďme si kód znovu 
projít a říct si, co dělá.

00:03:32.336 --> 00:03:37.420
Vnější cyklus vytvoří proměnnou j
a zvyšuje ji až na hodnotu 13.

00:03:38.340 --> 00:03:42.820
Po každém vykonání tohoto vnějšího cyklu
poběží i tento vnitřní cyklus.

00:03:44.040 --> 00:03:47.813
Vnitřní cyklus vytvoří proměnnou i, 
která stoupá až na hodnotu 12.

00:03:47.813 --> 00:03:52.208
A po každém provedení vnitřního cyklu
se nakreslí obrázek na x a y,

00:03:52.208 --> 00:03:54.148
které jsou založeny na i a j.

00:03:55.358 --> 00:03:58.707
Proměnná i se kvůli tomu mění 
mnohem častěji mění než j.

00:03:59.247 --> 00:04:04.548
Abychom to pochopili lépe, 
zkusme si hodnoty i a j vizualizovat.

00:04:04.958 --> 00:04:12.027
Takže toto zakomentuji
a pak nastavím barvu výplně.

00:04:12.027 --> 00:04:14.976
Budu používat textový příkaz
pro zobrazení hodnoty j.

00:04:14.976 --> 00:04:20.035
Takže "text j" a pak to dám
na příslušné místo zde.

00:04:21.335 --> 00:04:25.909
Nyní můžeme vidět, jak
se j pohybuje od 0 do 12.

00:04:25.909 --> 00:04:29.739
To je v podstatě místo,
kde jsou umístěny řady drahokamů.

00:04:31.809 --> 00:04:34.934
A teď si vizualizujeme "i"
a uvidíte, jak se mění.

00:04:35.444 --> 00:04:38.886
Takže pro "i"
uděláme jinou barvu.

00:04:42.906 --> 00:04:45.635
Pak "i" někam dáme.

00:04:45.945 --> 00:04:49.481
A jeho hodnotu x změníme tak,
že jde přes obrazovku.

00:04:49.481 --> 00:04:53.338
Uděláme to samé pro y.

00:04:54.688 --> 00:04:59.561
Nyní můžeme vidět, že "i"
jde od 0 do 11.

00:04:59.561 --> 00:05:04.326
A "i", jak jsem říkala,
se mění mnohem častěji.

00:05:04.326 --> 00:05:08.778
Tento řádek kódu bude vykonán
mnohem častěji, než tento řádek kódu.

00:05:08.778 --> 00:05:13.855
Protože tento řádek kódu je spuštěn
při každém provedení vnitřního cyklu,

00:05:13.855 --> 00:05:18.167
zatímco tento řádek kódu se vykoná 
pouze při každém provedení vnějšího cyklu.

00:05:19.007 --> 00:05:26.593
Doufám, že vám tato vizualizace i a j
pomůže lépe pochopit vnořené for cykly.

00:05:26.593 --> 00:05:30.475
Nyní vrátíme zpět naše drahokamy,
protože jsou mnohem hezčí!

00:05:30.475 --> 00:05:34.066
S vnořenými cykly toho
můžete dělat opravdu mnoho.

00:05:34.066 --> 00:05:36.652
Stačí popřemýšlet o čemkoliv,
co na světě existuje.

00:05:36.652 --> 00:05:39.599
Něco jako dvourozměrná mřížka,
šachovnice, přikrývka,

00:05:39.599 --> 00:05:43.824
hvězdy na americké vlajce,
zajímavé vzory a tapety.

00:05:44.454 --> 00:05:47.352
Nastartujte svou fantazii a
pohrajte si s tímto kódem.

00:05:47.352 --> 00:05:49.386
Například změňte obrázek.

00:05:49.386 --> 00:05:53.166
Já začnu tím, že ho
změním na srdce!

00:05:53.796 --> 00:05:58.256
Abych vám ukázala, jak moc
mám vnořené for cykly ráda!