WEBVTT

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

00:00:04.067 --> 00:00:07.779
Máme zde program, který jsme 
používali v tutoriálu o funkcích.

00:00:08.339 --> 00:00:11.066
Program obsahuje 
funkci drawWinston,

00:00:11.066 --> 00:00:14.178
která kreslí Winstona
na určitých pozicích x a y.

00:00:14.678 --> 00:00:18.128
A pak zde dolů čtyřikrát
voláme drawWinston,

00:00:18.128 --> 00:00:21.043
ale pokaždé s jinými 
souřadnicemi x a y.

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,

00:00:25.911 --> 00:00:32.250
hned vidím, jak jsou si podobny
a chci namísto toho použít cyklus.

00:00:33.200 --> 00:00:35.802
Uvnitř cyklu by kód
stačilo zavolat jenom jednou,

00:00:35.802 --> 00:00:39.171
přičemž by se pokaždé
změnily souřadnice x a y.

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.

00:00:45.344 --> 00:00:47.671
Tak uděláme cyklus.

00:00:47.671 --> 00:00:49.902
Máme dvě řady hodnot,

00:00:49.902 --> 00:00:56.030
takže bychom mohli mít dva pole,
jedno pro pozici x a druhé pro y.

00:00:56.030 --> 00:01:02.051
Jako pozici x můžeme mít
99, 294, 101 a 294.

00:01:02.281 --> 00:01:08.812
Pro pozici y použijeme
117, 117, 316, 316.

00:01:09.564 --> 00:01:11.592
A teď můžeme udělat cyklus:

00:01:11.592 --> 00:01:18.662
for (var i = 0; 
i < xPositions.length; i++)

00:01:18.662 --> 00:01:22.302
Takže projdeme každý prvek
pozice x a napíšeme:

00:01:22.302 --> 00:01:30.102
drawWinston(xPositions[i], 
yPositions[i]);

00:01:32.013 --> 00:01:34.944
Poďme zkusit, jestli to 
funguje a smažeme toto.

00:01:34.944 --> 00:01:36.442
Funguje to!

00:01:36.442 --> 00:01:40.282
Takže teď stačí přivolat
tento jeden řádek kódu,

00:01:40.282 --> 00:01:45.171
který Winstona nakreslí pro
každou pozici x pole xPositions.

00:01:45.552 --> 00:01:49.057
Můžeme jich přidat víc,
stačí napsat například 10.

00:01:49.057 --> 00:01:57.946
Můžeme napsat 1, pak 1,
znovu 1 a potom 100 a 1.

00:01:58.572 --> 00:02:02.076
Teď to vypadá trochu chaoticky.

00:02:02.076 --> 00:02:05.148
A to se mi moc nelíbí,
protože se těžko rozeznává,

00:02:05.148 --> 00:02:08.438
které x náleží ke kterému y.

00:02:08.438 --> 00:02:14.959
A já chci, abych se při pohledu
na program v párech x-y orientovala.

00:02:14.959 --> 00:02:16.848
Nechce se mi dávat pozor na to,

00:02:16.848 --> 00:02:20.759
abych je nad sebou 
perfektně srovnala.

00:02:22.529 --> 00:02:26.979
Chtěla bych najít jiný způsob,
jak tyto pozice ukládat.

00:02:26.979 --> 00:02:30.759
Mohli bychom je 
uložit jako objekty.

00:02:31.000 --> 00:02:36.139
Každá pozici jsou vlastně
dva kusy informací, x a y.

00:02:36.139 --> 00:02:39.388
Mohli bychom mít objekt,
který ma vlastnosti x a y.

00:02:39.388 --> 00:02:42.572
A pak bychom mohli 
mít pole objektů,

00:02:42.572 --> 00:02:44.958
které by všechny 
pozice x a y obsahovalo.

00:02:44.958 --> 00:02:45.958
Pojďme to udělat.

00:02:46.258 --> 00:02:49.389
Napíšeme:
"var positions" rovná se.

00:02:49.389 --> 00:02:51.129
A uvnitř bude pole.

00:02:51.129 --> 00:02:56.110
Ale každý jeho element bude
namísto čísla objektem.

00:02:56.365 --> 00:02:59.229
Zde máme složené závorky

00:02:59.229 --> 00:03:04.710
A pak napíšeme x: 99, y: 117.

00:03:05.559 --> 00:03:08.921
Tím jsme uložili jednu
z našich pozic.

00:03:08.921 --> 00:03:13.110
Teď přidáme další.

00:03:14.360 --> 00:03:19.171
Napíšeme x: 294, y: 117.

00:03:19.171 --> 00:03:24.180
Třetí bude x: 101, y: 316.

00:03:25.514 --> 00:03:31.198
A poslední x: 294, y: 316.

00:03:31.671 --> 00:03:34.925
A teď máme pole objektů,

00:03:34.925 --> 00:03:38.080
ve kterém má každý objekt 
svoje vlastnosti x a y.

00:03:39.240 --> 00:03:42.792
A tady dolů v našem cyklu for
změníme toto takovým způsobem,

00:03:42.792 --> 00:03:48.624
že se bude opakovat positions.legth
a pak sem dolů předáme objekty.

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.

00:03:53.778 --> 00:03:58.768
Takže napíšeme:
"positions[i].x" a "positions[i].y".

00:04:00.692 --> 00:04:04.181
Teď můžeme smazat
tyto seskupená pole.

00:04:04.563 --> 00:04:09.585
Náš kód je teď mnohem hezčí
a zároveň je mnohem čitelnější.

00:04:09.710 --> 00:04:12.618
A čím více čitelného kódu, tím lépe.

00:04:13.178 --> 00:04:16.330
Mimo jiné je jednoduchší 
něco do kódu přidávat.

00:04:16.330 --> 00:04:23.540
Mohla bych přidat pár souřadnic
s hodnotami x: 200, y: 200.

00:04:23.577 --> 00:04:25.709
A v prostředku se nám 
objeví Winston!

00:04:27.930 --> 00:04:30.979
Nyní vám ukážu něco,
co je ještě o něco lepší.

00:04:31.811 --> 00:04:36.513
Všimněte si, že naše funkce
momentálně očekává dva čísla.

00:04:36.513 --> 00:04:39.150
Pak tyto dva čísla používá.

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

00:04:42.290 --> 00:04:45.261
A pak z tohoto objektu
získá hodnoty x a y.

00:04:45.261 --> 00:04:49.562
To znamená, že tady dolů 
by nám stačilo vložit objekt.

00:04:49.611 --> 00:04:51.089
Pojďme to zkusit.

00:04:51.089 --> 00:04:53.661
Máme zde jen objekt
a je to pokazený.

00:04:54.071 --> 00:04:57.680
A to proto, že naše funkce
pořád očekává dva objekty.

00:04:57.680 --> 00:04:59.846
A dostává pouze jeden.

00:04:59.846 --> 00:05:02.591
Změníme to a řekneme, 
že dostane facePosition.

00:05:02.591 --> 00:05:05.071
A dostali jsme chybu.

00:05:05.071 --> 00:05:06.802
Říká, že faceX není definováno.

00:05:06.802 --> 00:05:10.468
Protože předtím jsme ho 
použili jako argument,

00:05:10.468 --> 00:05:13.073
teď ale neexistuje a 
předáváme pouze objekt.

00:05:13.073 --> 00:05:21.264
Mohli bychom proto uložit 
pozici x objektu do proměnné faceX.

00:05:21.264 --> 00:05:24.952
Říkáme tím, že máme tento objekt
a víme, že má vlastnost x,

00:05:24.952 --> 00:05:28.463
a proto ji uložíme do
proměnné faceX.

00:05:28.463 --> 00:05:30.522
A to samé můžeme 
udělat pro y:

00:05:30.522 --> 00:05:33.762
faceY = facePosition.y

00:05:35.069 --> 00:05:38.517
A zbytek funkce používá
faceX a faceY.

00:05:38.517 --> 00:05:40.479
Musíme je ale napsat správně.

00:05:40.479 --> 00:05:42.569
Pokud bychom napsali xx,
nebude to fungovat,

00:05:42.569 --> 00:05:46.625
protože to tady dolů v našem
poli objektů není.

00:05:46.625 --> 00:05:48.368
Musí se to tedy shodovat.

00:05:49.111 --> 00:05:52.223
Je to celkem užitečné, protože
teď můžeme použít pole objektů,

00:05:52.223 --> 00:05:54.422
dokonce i funkce pracující s objekty.

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.

00:06:00.780 --> 00:06:04.192
Obzvláště párování hodnot x a y
je něčím velmi častým.

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.

00:06:09.091 --> 00:06:10.987
Takže hurá na ta.