1
00:00:01,496 --> 00:00:04,117
Drahokam, a velmi pěkný drahokam!

2
00:00:04,117 --> 00:00:06,286
Ale víte, co je lepší
než jeden drahokam?

3
00:00:06,286 --> 00:00:08,275
Je to celá řada drahokamů!

4
00:00:08,275 --> 00:00:09,942
Nyní již samozřejmě víme,

5
00:00:09,942 --> 00:00:12,751
že nejlepší způsob, jak řadu 
drahokamů udělat, bude cyklem.

6
00:00:12,751 --> 00:00:16,162
Pojďme tedy použít cyklus for k
nakreslení 12 drahokamů v řadě.

7
00:00:16,162 --> 00:00:19,523
Zleva doprava přes obrazovku.

8
00:00:19,523 --> 00:00:21,624
Takhle.

9
00:00:21,624 --> 00:00:31,046
Napíšeme tedy: 
for (var i = 0; i < 12; i++).

10
00:00:31,046 --> 00:00:34,939
Poté vezmeme tento řádek
a přesuneme ho dovnitř, sem.

11
00:00:36,019 --> 00:00:37,979
Takže zde máme 12 drahokamů,

12
00:00:37,979 --> 00:00:40,389
ale všechny jsou momentálně
nahrnuty přímo na sebe.

13
00:00:40,389 --> 00:00:43,401
A my je chceme
vidět přes obrazovku.

14
00:00:43,401 --> 00:00:45,941
To znamená, že musíme
upravit proměnnou x.

15
00:00:45,941 --> 00:00:49,524
Proměnná x je nyní 36 a my chceme, 
aby měla pokaždé jinou hodnotu.

16
00:00:49,524 --> 00:00:51,859
To znamená, že musí být x
závislé na i.

17
00:00:51,859 --> 00:00:56,329
Co můžeme udělat,
je jednoduše napsat: i krát 36.

18
00:00:56,329 --> 00:01:01,627
Takže první je na 0, pak 36
a pak 72 atd.

19
00:01:02,687 --> 00:01:04,575
Super, nyní máme 
řádek drahokamů.

20
00:01:04,575 --> 00:01:07,997
Připomíná mi to jednu z těch scén
v Indianě Jones nebo Aladdinovi,

21
00:01:07,997 --> 00:01:11,306
kde hrdina v podzemní objeví
pokladnice drahokamů.

22
00:01:11,306 --> 00:01:13,732
Obvykle ale najdou
mnohem více drahokamů než tohle.

23
00:01:13,732 --> 00:01:17,306
Nejen řadu drahokamů,
ale přímo hromadu drahokamů.

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

25
00:01:24,276 --> 00:01:29,539
No, mohli bychom začít opakováním
cyklu for a zkopírovat ho sem.

26
00:01:30,389 --> 00:01:32,795
Poté musíme pokaždé
změnit proměnnou y.

27
00:01:34,355 --> 00:01:37,578
Takže to změníme
na 60 a poté na 90.

28
00:01:37,578 --> 00:01:44,060
Nyní máme tři řady drahokamů,
ale začíná to být velmi nudné,

29
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.

30
00:01:49,114 --> 00:01:52,889
Obvykle, když bychom přišli na to, 
že píšeme opakující se kód,

31
00:01:52,889 --> 00:01:56,537
řekli bychom si: „Možná bychom 
místo toho měli použít cyklus. “

32
00:01:56,537 --> 00:01:58,607
Jenže my již používáme cyklus.

33
00:01:58,607 --> 00:02:00,634
Jaké je tedy řešení,

34
00:02:00,634 --> 00:02:03,854
abychom se vyhnuly opakujícímu se
kopírování a vkládání?

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

36
00:02:09,358 --> 00:02:12,132
Co tedy budeme dělat je to, 
že vytvoříme vnější cyklus,

37
00:02:12,132 --> 00:02:15,038
který se postará o to, 
aby drahokamy šly dolů po obrazovce.

38
00:02:15,038 --> 00:02:19,234
A pak se náš vnitřní cyklus 
postará o to, co dělá teď,

39
00:02:19,234 --> 00:02:20,997
tedy aby drahokamy 
šly zleva doprava.

40
00:02:21,767 --> 00:02:23,789
Hned vám ukážu, 
co mám na mysli.

41
00:02:23,789 --> 00:02:28,351
Začneme "for" a použijeme 
novou proměnnou "j",

42
00:02:28,351 --> 00:02:29,851
protože "i" už používáme.

43
00:02:29,851 --> 00:02:35,974
for (var j = 0; j < 13; j++).

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

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

46
00:02:45,037 --> 00:02:49,444
vložíme ho dovnitř a
opravíme odsazení.

47
00:02:50,274 --> 00:02:52,164
A tyto staré odstraníme.

48
00:02:53,274 --> 00:02:58,719
Takže všechny cykly máme 
nahromaděné nahoře ve stejné řadě.

49
00:02:58,729 --> 00:03:01,439
Teď chceme změnit y,
je to tak?

50
00:03:01,439 --> 00:03:04,268
To je to, co jsme změnili předtím,
když jsme kód kopírovali.

51
00:03:04,268 --> 00:03:06,108
A momentálně je y vždy 90.

52
00:03:06,108 --> 00:03:08,710
A my chceme změnit y 
pro každý řádek.

53
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.

54
00:03:15,998 --> 00:03:24,663
Můžeme to tedy změnit 
na něco jako: j krát 30.

55
00:03:26,163 --> 00:03:27,705
Tolik drahokamů!

56
00:03:29,604 --> 00:03:32,336
Pojďme si kód znovu 
projít a říct si, co dělá.

57
00:03:32,336 --> 00:03:37,420
Vnější cyklus vytvoří proměnnou j
a zvyšuje ji až na hodnotu 13.

58
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.

59
00:03:44,040 --> 00:03:47,813
Vnitřní cyklus vytvoří proměnnou i, 
která stoupá až na hodnotu 12.

60
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,

61
00:03:52,208 --> 00:03:54,148
které jsou založeny na i a j.

62
00:03:55,358 --> 00:03:58,707
Proměnná i se kvůli tomu mění 
mnohem častěji mění než j.

63
00:03:59,247 --> 00:04:04,548
Abychom to pochopili lépe, 
zkusme si hodnoty i a j vizualizovat.

64
00:04:04,958 --> 00:04:12,027
Takže toto zakomentuji
a pak nastavím barvu výplně.

65
00:04:12,027 --> 00:04:14,976
Budu používat textový příkaz
pro zobrazení hodnoty j.

66
00:04:14,976 --> 00:04:20,035
Takže "text j" a pak to dám
na příslušné místo zde.

67
00:04:21,335 --> 00:04:25,909
Nyní můžeme vidět, jak
se j pohybuje od 0 do 12.

68
00:04:25,909 --> 00:04:29,739
To je v podstatě místo,
kde jsou umístěny řady drahokamů.

69
00:04:31,809 --> 00:04:34,934
A teď si vizualizujeme "i"
a uvidíte, jak se mění.

70
00:04:35,444 --> 00:04:38,886
Takže pro "i"
uděláme jinou barvu.

71
00:04:42,906 --> 00:04:45,635
Pak "i" někam dáme.

72
00:04:45,945 --> 00:04:49,481
A jeho hodnotu x změníme tak,
že jde přes obrazovku.

73
00:04:49,481 --> 00:04:53,338
Uděláme to samé pro y.

74
00:04:54,688 --> 00:04:59,561
Nyní můžeme vidět, že "i"
jde od 0 do 11.

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

76
00:05:04,326 --> 00:05:08,778
Tento řádek kódu bude vykonán
mnohem častěji, než tento řádek kódu.

77
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,

78
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.

79
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.

80
00:05:26,593 --> 00:05:30,475
Nyní vrátíme zpět naše drahokamy,
protože jsou mnohem hezčí!

81
00:05:30,475 --> 00:05:34,066
S vnořenými cykly toho
můžete dělat opravdu mnoho.

82
00:05:34,066 --> 00:05:36,652
Stačí popřemýšlet o čemkoliv,
co na světě existuje.

83
00:05:36,652 --> 00:05:39,599
Něco jako dvourozměrná mřížka,
šachovnice, přikrývka,

84
00:05:39,599 --> 00:05:43,824
hvězdy na americké vlajce,
zajímavé vzory a tapety.

85
00:05:44,454 --> 00:05:47,352
Nastartujte svou fantazii a
pohrajte si s tímto kódem.

86
00:05:47,352 --> 00:05:49,386
Například změňte obrázek.

87
00:05:49,386 --> 00:05:53,166
Já začnu tím, že ho
změním na srdce!

88
00:05:53,796 --> 00:05:58,256
Abych vám ukázala, jak moc
mám vnořené for cykly ráda!