1
00:00:01,056 --> 00:00:04,067
Pojďme se podívat na další věci,
které můžeme s objekty dělat.

2
00:00:04,067 --> 00:00:07,779
Máme zde program, který jsme 
používali v tutoriálu o funkcích.

3
00:00:08,339 --> 00:00:11,066
Program obsahuje 
funkci drawWinston,

4
00:00:11,066 --> 00:00:14,178
která kreslí Winstona
na určitých pozicích x a y.

5
00:00:14,678 --> 00:00:18,128
A pak zde dolů čtyřikrát
voláme drawWinston,

6
00:00:18,128 --> 00:00:21,043
ale pokaždé s jinými 
souřadnicemi x a y.

7
00:00:21,504 --> 00:00:25,911
A jak mě znáte, když se na
tyto čtyři řádky kódu podívám,

8
00:00:25,911 --> 00:00:32,250
hned vidím, jak jsou si podobny
a chci namísto toho použít cyklus.

9
00:00:33,200 --> 00:00:35,802
Uvnitř cyklu by kód
stačilo zavolat jenom jednou,

10
00:00:35,802 --> 00:00:39,171
přičemž by se pokaždé
změnily souřadnice x a y.

11
00:00:39,861 --> 00:00:45,344
Abychom to provedli, musíme najít
způsob, jak uložit pozice x a y jako pole.

12
00:00:45,344 --> 00:00:47,671
Tak uděláme cyklus.

13
00:00:47,671 --> 00:00:49,902
Máme dvě řady hodnot,

14
00:00:49,902 --> 00:00:56,030
takže bychom mohli mít dva pole,
jedno pro pozici x a druhé pro y.

15
00:00:56,030 --> 00:01:02,051
Jako pozici x můžeme mít
99, 294, 101 a 294.

16
00:01:02,281 --> 00:01:08,812
Pro pozici y použijeme
117, 117, 316, 316.

17
00:01:09,564 --> 00:01:11,592
A teď můžeme udělat cyklus:

18
00:01:11,592 --> 00:01:18,662
for (var i = 0; 
i < xPositions.length; i++)

19
00:01:18,662 --> 00:01:22,302
Takže projdeme každý prvek
pozice x a napíšeme:

20
00:01:22,302 --> 00:01:30,102
drawWinston(xPositions[i], 
yPositions[i]);

21
00:01:32,013 --> 00:01:34,944
Poďme zkusit, jestli to 
funguje a smažeme toto.

22
00:01:34,944 --> 00:01:36,442
Funguje to!

23
00:01:36,442 --> 00:01:40,282
Takže teď stačí přivolat
tento jeden řádek kódu,

24
00:01:40,282 --> 00:01:45,171
který Winstona nakreslí pro
každou pozici x pole xPositions.

25
00:01:45,552 --> 00:01:49,057
Můžeme jich přidat víc,
stačí napsat například 10.

26
00:01:49,057 --> 00:01:57,946
Můžeme napsat 1, pak 1,
znovu 1 a potom 100 a 1.

27
00:01:58,572 --> 00:02:02,076
Teď to vypadá trochu chaoticky.

28
00:02:02,076 --> 00:02:05,148
A to se mi moc nelíbí,
protože se těžko rozeznává,

29
00:02:05,148 --> 00:02:08,438
které x náleží ke kterému y.

30
00:02:08,438 --> 00:02:14,959
A já chci, abych se při pohledu
na program v párech x-y orientovala.

31
00:02:14,959 --> 00:02:16,848
Nechce se mi dávat pozor na to,

32
00:02:16,848 --> 00:02:20,759
abych je nad sebou 
perfektně srovnala.

33
00:02:22,529 --> 00:02:26,979
Chtěla bych najít jiný způsob,
jak tyto pozice ukládat.

34
00:02:26,979 --> 00:02:30,759
Mohli bychom je 
uložit jako objekty.

35
00:02:31,000 --> 00:02:36,139
Každá pozici jsou vlastně
dva kusy informací, x a y.

36
00:02:36,139 --> 00:02:39,388
Mohli bychom mít objekt,
který ma vlastnosti x a y.

37
00:02:39,388 --> 00:02:42,572
A pak bychom mohli 
mít pole objektů,

38
00:02:42,572 --> 00:02:44,958
které by všechny 
pozice x a y obsahovalo.

39
00:02:44,958 --> 00:02:45,958
Pojďme to udělat.

40
00:02:46,258 --> 00:02:49,389
Napíšeme:
"var positions" rovná se.

41
00:02:49,389 --> 00:02:51,129
A uvnitř bude pole.

42
00:02:51,129 --> 00:02:56,110
Ale každý jeho element bude
namísto čísla objektem.

43
00:02:56,365 --> 00:02:59,229
Zde máme složené závorky

44
00:02:59,229 --> 00:03:04,710
A pak napíšeme x: 99, y: 117.

45
00:03:05,559 --> 00:03:08,921
Tím jsme uložili jednu
z našich pozic.

46
00:03:08,921 --> 00:03:13,110
Teď přidáme další.

47
00:03:14,360 --> 00:03:19,171
Napíšeme x: 294, y: 117.

48
00:03:19,171 --> 00:03:24,180
Třetí bude x: 101, y: 316.

49
00:03:25,514 --> 00:03:31,198
A poslední x: 294, y: 316.

50
00:03:31,671 --> 00:03:34,925
A teď máme pole objektů,

51
00:03:34,925 --> 00:03:38,080
ve kterém má každý objekt 
svoje vlastnosti x a y.

52
00:03:39,240 --> 00:03:42,792
A tady dolů v našem cyklu for
změníme toto takovým způsobem,

53
00:03:42,792 --> 00:03:48,624
že se bude opakovat positions.legth
a pak sem dolů předáme objekty.

54
00:03:48,707 --> 00:03:53,778
Momentálně to předává celý objekt,
ale my chceme předat jen x a y.

55
00:03:53,778 --> 00:03:58,768
Takže napíšeme:
"positions[i].x" a "positions[i].y".

56
00:04:00,692 --> 00:04:04,181
Teď můžeme smazat
tyto seskupená pole.

57
00:04:04,563 --> 00:04:09,585
Náš kód je teď mnohem hezčí
a zároveň je mnohem čitelnější.

58
00:04:09,710 --> 00:04:12,618
A čím více čitelného kódu, tím lépe.

59
00:04:13,178 --> 00:04:16,330
Mimo jiné je jednoduchší 
něco do kódu přidávat.

60
00:04:16,330 --> 00:04:23,540
Mohla bych přidat pár souřadnic
s hodnotami x: 200, y: 200.

61
00:04:23,577 --> 00:04:25,709
A v prostředku se nám 
objeví Winston!

62
00:04:27,930 --> 00:04:30,979
Nyní vám ukážu něco,
co je ještě o něco lepší.

63
00:04:31,811 --> 00:04:36,513
Všimněte si, že naše funkce
momentálně očekává dva čísla.

64
00:04:36,513 --> 00:04:39,150
Pak tyto dva čísla používá.

65
00:04:39,150 --> 00:04:42,290
Můžeme naši funkci změnit tak,
že namísto čísel očekává objekt.

66
00:04:42,290 --> 00:04:45,261
A pak z tohoto objektu
získá hodnoty x a y.

67
00:04:45,261 --> 00:04:49,562
To znamená, že tady dolů 
by nám stačilo vložit objekt.

68
00:04:49,611 --> 00:04:51,089
Pojďme to zkusit.

69
00:04:51,089 --> 00:04:53,661
Máme zde jen objekt
a je to pokazený.

70
00:04:54,071 --> 00:04:57,680
A to proto, že naše funkce
pořád očekává dva objekty.

71
00:04:57,680 --> 00:04:59,846
A dostává pouze jeden.

72
00:04:59,846 --> 00:05:02,591
Změníme to a řekneme, 
že dostane facePosition.

73
00:05:02,591 --> 00:05:05,071
A dostali jsme chybu.

74
00:05:05,071 --> 00:05:06,802
Říká, že faceX není definováno.

75
00:05:06,802 --> 00:05:10,468
Protože předtím jsme ho 
použili jako argument,

76
00:05:10,468 --> 00:05:13,073
teď ale neexistuje a 
předáváme pouze objekt.

77
00:05:13,073 --> 00:05:21,264
Mohli bychom proto uložit 
pozici x objektu do proměnné faceX.

78
00:05:21,264 --> 00:05:24,952
Říkáme tím, že máme tento objekt
a víme, že má vlastnost x,

79
00:05:24,952 --> 00:05:28,463
a proto ji uložíme do
proměnné faceX.

80
00:05:28,463 --> 00:05:30,522
A to samé můžeme 
udělat pro y:

81
00:05:30,522 --> 00:05:33,762
faceY = facePosition.y

82
00:05:35,069 --> 00:05:38,517
A zbytek funkce používá
faceX a faceY.

83
00:05:38,517 --> 00:05:40,479
Musíme je ale napsat správně.

84
00:05:40,479 --> 00:05:42,569
Pokud bychom napsali xx,
nebude to fungovat,

85
00:05:42,569 --> 00:05:46,625
protože to tady dolů v našem
poli objektů není.

86
00:05:46,625 --> 00:05:48,368
Musí se to tedy shodovat.

87
00:05:49,111 --> 00:05:52,223
Je to celkem užitečné, protože
teď můžeme použít pole objektů,

88
00:05:52,223 --> 00:05:54,422
dokonce i funkce pracující s objekty.

89
00:05:54,742 --> 00:06:00,780
A jak zjistíte, vaše programy mohou
být velmi efektivní s jejich použitím dat.

90
00:06:00,780 --> 00:06:04,192
Obzvláště párování hodnot x a y
je něčím velmi častým.

91
00:06:04,250 --> 00:06:09,091
Věřím, že se vám hodí při tvorbě
všech zdejších animací a kreseb.

92
00:06:09,091 --> 00:06:10,987
Takže hurá na ta.