1
00:00:01,264 --> 00:00:04,813
Zatím jsme si ukázali,
jak vytvořit pole a pracovat s ním.

2
00:00:04,813 --> 00:00:06,641
Stejně jako jiné proměnné,

3
00:00:06,641 --> 00:00:12,560
i pole můžeme dynamicky měnit
během vykonávání kódu.

4
00:00:13,206 --> 00:00:16,124
Ukážu vám, co mám na mysli.

5
00:00:16,124 --> 00:00:17,916
Zde máme program,

6
00:00:17,916 --> 00:00:21,193
který zobrazuje Hoppera
držícího několik balónků.

7
00:00:22,410 --> 00:00:26,739
A funguje to tak, že tady máme
pole xPositions se dvěma čísly,

8
00:00:26,739 --> 00:00:30,010
která určují polohu balónků.

9
00:00:30,010 --> 00:00:32,331
A tady dolů máme cyklus.

10
00:00:32,331 --> 00:00:35,688
A tento cyklus prochází
každý prvek pole.

11
00:00:35,688 --> 00:00:40,473
A pro každý prvek nakreslí čáru 
z pozice x směrem k Hopperově ruce.

12
00:00:40,473 --> 00:00:45,651
Poté v pozici x nakreslí elipsu,
která má velikost 30 x 40 pixelů.

13
00:00:45,651 --> 00:00:47,738
A to je náš balónek.

14
00:00:49,688 --> 00:00:51,418
Teď už víme, jak to funguje.

15
00:00:51,418 --> 00:00:54,242
Pokud chceme další balónek,

16
00:00:54,242 --> 00:00:58,566
jednoduše do pole přidáme další číslo,
jako například 300.

17
00:00:58,566 --> 00:01:02,767
Pěkné, teď pro Hoppera 
máme 3 balónky.

18
00:01:02,767 --> 00:01:08,730
Co kdybychom ale chtěli dát uživateli,
který neumí programovat,

19
00:01:08,730 --> 00:01:10,889
schopnost přidávat nové balónky.

20
00:01:10,889 --> 00:01:13,476
Dali bychom uživateli 
program a řekli:

21
00:01:13,476 --> 00:01:17,636
"Klikni tam, kde bys chtěl mít 
balónek a on se tam objeví."

22
00:01:17,636 --> 00:01:19,736
Nebylo by to skvělé?

23
00:01:20,726 --> 00:01:23,927
Jak bychom to ale měli provést?

24
00:01:23,927 --> 00:01:26,325
Chceme, aby se náš program
průběžně měnil.

25
00:01:26,325 --> 00:01:30,605
Pokaždé, když uživatel klikne,
objeví se nahoře balónek.

26
00:01:30,605 --> 00:01:35,097
Začneme tím, že vše
přesuneme do draw function.

27
00:01:35,097 --> 00:01:37,244
Tím bude jednoduché věci
průběžně měnit.

28
00:01:37,244 --> 00:01:42,620
Toto přesuneme dolů
a pěkně odsadíme.

29
00:01:43,341 --> 00:01:48,620
Teď chceme zkontrolovat,
zda uživatel kliká myší právě teď.

30
00:01:48,620 --> 00:01:50,382
Můžeme to udělat pomocí if.

31
00:01:50,382 --> 00:01:55,438
Napíšeme "if(mouseIsPressed)"
a něco k tomu doplníme.

32
00:01:56,768 --> 00:02:01,686
Pokud dojde ke kliknutí myší,
chceme do pole přidat další číslo.

33
00:02:01,686 --> 00:02:04,521
Pojďme vrátit dva prvky.

34
00:02:04,521 --> 00:02:08,263
Nějakým způsobem chceme
do pole přidat číslo.

35
00:02:08,263 --> 00:02:10,958
Ukážu vám jeden způsob,
jak bychom to mohli udělat.

36
00:02:10,958 --> 00:02:17,610
Napíšeme:
xPositions[2]=mouseX

37
00:02:18,614 --> 00:02:21,623
Ukážu vám, že to funguje.

38
00:02:22,240 --> 00:02:25,100
Klikla jsem a mám zde balónek!

39
00:02:25,100 --> 00:02:26,740
Co se stalo?

40
00:02:26,740 --> 00:02:30,252
Program si u xPositions[2] řekl:

41
00:02:30,252 --> 00:02:36,309
Najdi toto pole a jeho prvek č. 2,
a jak víte, to je vlastně třetí prvek.

42
00:02:36,309 --> 00:02:38,214
Protože pole jsou
založena na nule.

43
00:02:38,214 --> 00:02:40,503
A pokud se podíváte,
nemáme žádný třetí prvek.

44
00:02:40,503 --> 00:02:42,449
Na tom místě nic není.

45
00:02:42,449 --> 00:02:45,739
Takže to říká: najdi ho
a vlož do něj mouseX.

46
00:02:45,739 --> 00:02:51,209
A protože tam nic není,
mění se to z ničeho v mouseX.

47
00:02:51,292 --> 00:02:54,664
Takže nyní naše pole 
obsahuje 3 položky.

48
00:02:54,664 --> 00:02:59,706
A když si ho projede tento cyklus for,
nakreslí se třetí balónek.

49
00:03:00,482 --> 00:03:03,132
To je hodně dobré,
zkusím pokračovat v klikání.

50
00:03:03,872 --> 00:03:08,388
Při každém kliknutí 
se nakreslí třetí balónek.

51
00:03:08,388 --> 00:03:10,993
A to kdekoli kliknu myší.

52
00:03:11,470 --> 00:03:16,173
Je to kvůli tomu, že se neustále
přepisuje prvek č. 2.

53
00:03:16,173 --> 00:03:18,758
Ta věc s indexem 2.

54
00:03:18,758 --> 00:03:23,152
Neustále to přepisujeme s
aktuální pozicí mouseX.

55
00:03:23,391 --> 00:03:26,090
Takže vždy budeme mít
jenom 3 balónky.

56
00:03:26,090 --> 00:03:29,753
Protože první máme na místě 0,
druhý máme na místě 1,

57
00:03:29,753 --> 00:03:34,014
a ten na místě 2 neustále 
měníme v průběhu programu.

58
00:03:34,844 --> 00:03:37,137
A to je super, ale
co opravdu chceme,

59
00:03:37,137 --> 00:03:40,344
je dát uživatelovi volnost
udělat hodně balónků.

60
00:03:40,344 --> 00:03:43,287
Pokaždé když klikne,
objeví se nový balónek.

61
00:03:43,287 --> 00:03:44,381
A to znamená,

62
00:03:44,381 --> 00:03:50,729
že musíme přičítat přírůstek indexu
pro prvek pole, ve kterém ho ukládáme.

63
00:03:50,729 --> 00:03:52,540
Nechceme, aby to bylo pokaždé 2.

64
00:03:52,540 --> 00:03:56,260
Chceme, aby to bylo 
2, 3, 4, 5 a 6 a tak dále.

65
00:03:56,260 --> 00:03:59,194
Mohli bychom to udělat
pomocí počítadla.

66
00:03:59,194 --> 00:04:00,941
Napíšeme "newInd = 2".

67
00:04:00,941 --> 00:04:02,746
S tím začneme.

68
00:04:02,746 --> 00:04:05,711
A tady namísto 
2 řekneme newInd.

69
00:04:05,711 --> 00:04:09,563
A potom řekneme
newInd++.

70
00:04:09,563 --> 00:04:11,777
Pokaždé k tomu přičteme 1.

71
00:04:11,777 --> 00:04:15,299
Začne to na 2, poté se to stane 3,
poté 4.

72
00:04:15,299 --> 00:04:18,430
A po každém kliknutí
se to zvětší, zkusme to.

73
00:04:20,084 --> 00:04:22,027
Balónková párty!

74
00:04:22,227 --> 00:04:24,760
To vypadá hezky.

75
00:04:24,760 --> 00:04:27,368
Ale není to úplně nejlepší
způsob, jak to provést.

76
00:04:27,368 --> 00:04:28,631
Jak se ukazuje,

77
00:04:28,631 --> 00:04:32,232
přidávání věcí do pole je něco,
co chceme dělat opravdu často.

78
00:04:32,232 --> 00:04:35,398
Proto existuje mnohem jednodušší
způsob než tento.

79
00:04:35,398 --> 00:04:39,445
Vymažu věci, co jsme udělali.

80
00:04:39,445 --> 00:04:42,936
Toto už nepotřebujeme,
jednoduše to zakomentuji.

81
00:04:42,936 --> 00:04:48,303
Teď napíšeme:
xPositions.push

82
00:04:48,303 --> 00:04:51,039
A do závorek 
napíšeme mouseX.

83
00:04:51,039 --> 00:04:52,490
To, co teď děláme,

84
00:04:52,490 --> 00:04:56,324
je že přivoláváme tuto metodu
pro pole xPositions.

85
00:04:56,324 --> 00:04:58,365
Voláme něco jako příkaz.

86
00:04:58,365 --> 00:04:59,530
Říkáme poli:

87
00:04:59,530 --> 00:05:05,327
Vem tuto novou hodnotu, mouseX,
a vlož ji na konec svého pole.

88
00:05:05,487 --> 00:05:12,520
Při každém zavolání se to tedy podívá
na mouseX a vloží to na konec pole.

89
00:05:12,542 --> 00:05:15,329
Pole se bude zvětšovat a
zvětšovat a zvětšovat.

90
00:05:15,329 --> 00:05:17,384
Pojďme to spustit znovu.

91
00:05:17,654 --> 00:05:19,392
Funguje to!

92
00:05:19,392 --> 00:05:21,888
A použili jsme k tomu
mnohem méně kódu než předtím.

93
00:05:22,982 --> 00:05:27,143
Většinou budete používat push,
pokud budete chtít k poli něco přidat.

94
00:05:27,143 --> 00:05:28,790
A to je celkem užitečné,

95
00:05:28,790 --> 00:05:31,746
protože pak budete mít pole,
která se zvětšují a zvětšují.

96
00:05:31,746 --> 00:05:34,375
A to se hodí u animace nebo
při interakci s uživatelem.

97
00:05:34,375 --> 00:05:36,434
A pak toho můžete
udělat mnohem více.

98
00:05:36,434 --> 00:05:40,073
Teď jste pravděpodobně viděli 
90% nejčastějších použití polí.

99
00:05:40,073 --> 00:05:41,647
Způsoby, kterými je použijete.

100
00:05:41,647 --> 00:05:43,852
Ale můžete s nimi toho 
dělat mnohem více.

101
00:05:43,852 --> 00:05:47,021
Pokud máte otázky,
ptejte se v diskuzi.

102
00:05:47,021 --> 00:05:49,876
Ale nejdřív se ujistěte se, že
jste pochopili tyto základy.