WEBVTT

00:00:00.963 --> 00:00:03.969
Dowiadujmy się dalej, co można
zrobić z obiektami.

00:00:04.070 --> 00:00:08.249
Sięgnijmy do programu
z filmiku o funkcjach.

00:00:08.349 --> 00:00:11.029
Ma on funkcję „drawWinston”,

00:00:11.129 --> 00:00:14.512
która umie narysować Winstona
w danym „x” i „y”...

00:00:14.612 --> 00:00:17.925
Tutaj przywołujemy tę funkcję
cztery razy,

00:00:18.025 --> 00:00:20.874
zawsze z innymi współrzędnymi.

00:00:21.710 --> 00:00:25.310
Znacie mnie. Gdy patrzę na te cztery
rysunki Winstona,

00:00:25.410 --> 00:00:28.165
tak podobne do siebie,

00:00:28.265 --> 00:00:32.298
myślę tylko, że dużo lepiej
byłoby użyć pętli.

00:00:33.111 --> 00:00:36.107
I przywołać funkcję raz,
wewnątrz pętli,

00:00:36.207 --> 00:00:39.450
zmieniając „x” i „y”
w każdym powtórzeniu pętli.

00:00:40.103 --> 00:00:44.373
W tym celu musimy znaleźć sposób
na przechowywanie pozycji „x” i „y”,

00:00:44.473 --> 00:00:47.577
w tablicy, żebyśmy mieli
do nich dostep.

00:00:47.677 --> 00:00:49.621
Mamy dwa zestawy wartości,

00:00:49.721 --> 00:00:51.989
więc moglibyśmy zrobić dwie tablice.

00:00:52.089 --> 00:00:56.209
Jedną dla pozycji „x”,
drugą dla pozycji „y”.

00:00:56.309 --> 00:01:01.788
Dajmy pozycje „x”:
99, 294, 101 i 294...

00:01:02.299 --> 00:01:07.964
a pozycje „y”
to 117, 117, 316, 316.

00:01:09.265 --> 00:01:11.563
Teraz możemy zrobić tu pętlę,

00:01:11.663 --> 00:01:14.276
pisząc: for-loop var i = 0;

00:01:14.376 --> 00:01:18.367
i < xPositions.length; i++

00:01:18.735 --> 00:01:21.286
Przejdziemy przez każdy
element „xPositions”,

00:01:21.386 --> 00:01:25.067
i napiszemy:
drawWinston(xPositions[i],

00:01:25.658 --> 00:01:29.398
yPositions[i]);

00:01:30.709 --> 00:01:34.508
Sprawdźmy, czy to działa.
Skasujmy...

00:01:34.608 --> 00:01:35.573
Udało się!

00:01:35.673 --> 00:01:38.752
Możemy to przywołać.

00:01:38.852 --> 00:01:41.146
Jedna linijka programu
rysuje Winstona

00:01:41.246 --> 00:01:44.629
w każdej pozycji
z tablicy „xPositions”.

00:01:45.150 --> 00:01:48.669
Możemy dodawać więcej.
Powiedzmy od 10.

00:01:48.769 --> 00:01:53.545
Potem dodajemy 1, i 1, i 1...

00:01:54.242 --> 00:01:57.887
a później 100, i 1...

00:01:58.259 --> 00:02:01.533
Zrobił się tu bałagan.

00:02:01.904 --> 00:02:05.527
Niedobrze, bo trudno mi zobaczyć,

00:02:05.627 --> 00:02:08.383
który „x” odnosi się do którego „y”.

00:02:08.483 --> 00:02:12.606
A ja chcę na pierwszy
rzut oka widzieć

00:02:12.706 --> 00:02:16.788
pary x-y, zamiast pilnować,

00:02:16.888 --> 00:02:20.898
żeby były idealnie ustawione
w pionie, np. tak.

00:02:21.594 --> 00:02:27.005
Chcę znaleźć inny sposób
przechowywania tych pozycji.

00:02:27.105 --> 00:02:30.860
Możemy przechowywać je
jako obiekty.

00:02:30.960 --> 00:02:36.055
Każda pozycja to dwie
informacje: „x” i „y”.

00:02:36.155 --> 00:02:39.683
Możemy zrobić obiekt
o właściwościach „x” i „y.”

00:02:39.783 --> 00:02:44.652
Możemy mieć tablice obiektów
z pozycjami „x” i „y”.

00:02:44.752 --> 00:02:45.929
Zróbmy to więc.

00:02:46.029 --> 00:02:48.182
Napiszemy: „var positions”

00:02:48.785 --> 00:02:51.432
równa się... i to też będzie tablica.

00:02:51.532 --> 00:02:56.378
Ale każdy element, zamiast być
liczbą, będzie obiektem.

00:02:56.478 --> 00:02:59.095
Mamy klamry...

00:02:59.195 --> 00:03:04.807
I napiszemy „x:99” i „y:117”.

00:03:05.388 --> 00:03:08.313
Mamy tu jedną z naszych pozycji,

00:03:09.103 --> 00:03:13.909
a drugą dodamy tutaj.

00:03:14.234 --> 00:03:18.886
Dobrze; „x” wyniesie 294, 117,

00:03:19.175 --> 00:03:22.013
dalej 101,

00:03:22.594 --> 00:03:24.033
dalej 316,

00:03:25.217 --> 00:03:30.450
a na koniec 294 i 316.

00:03:30.550 --> 00:03:35.016
I jest tablica obiektów,

00:03:35.116 --> 00:03:38.430
z których każdy
ma właściwości „x” i „y”.

00:03:38.530 --> 00:03:41.170
Teraz za pomocą pętli FOR

00:03:41.270 --> 00:03:44.769
wypiszemy każdy obiekt
tablicy „positions”.

00:03:44.869 --> 00:03:49.157
Następnie przekażemy obiekt.

00:03:49.257 --> 00:03:53.894
Na razie przekazujemy cały obiekt,
a chcemy przekazać wartości „x” i „y”.

00:03:53.994 --> 00:03:59.026
Potrzebujemy zatem
positions[i].X i positions[i].Y.

00:03:59.126 --> 00:04:00.272
Hura!

00:04:00.612 --> 00:04:03.995
Możemy skasować te stare,
zaśmiecone tablice.

00:04:04.095 --> 00:04:07.919
Teraz wygląda to znacznie ładniej,

00:04:08.019 --> 00:04:12.934
a program jest prostszy do czytania.
Im łatwiej, tym lepiej!

00:04:13.034 --> 00:04:16.625
I łatwiej jest dodawać nowe obiekty.
Jeśli chcę dodać 1...

00:04:16.726 --> 00:04:18.995
Dodam tę parę.

00:04:19.095 --> 00:04:23.383
Powiedzmy, że „x” to 200,
„y” też...

00:04:23.483 --> 00:04:26.379
i pośrodku pojawi się Winston.

00:04:26.479 --> 00:04:27.509
Fajnie!

00:04:27.609 --> 00:04:31.580
A teraz pokażę wam
coś jeszcze lepszego.

00:04:31.680 --> 00:04:37.083
Zauważcie, że nasza funkcja
przyjmuje dwie liczby

00:04:37.183 --> 00:04:38.782
i korzysta z nich.

00:04:38.882 --> 00:04:42.023
Możemy zmienić funkcję tak,
że będzie oczekiwać obiektu

00:04:42.123 --> 00:04:45.233
i weźmie z niego „x” oraz „y”.

00:04:45.333 --> 00:04:49.622
To znaczy, że możemy
zabrać stąd obiekt.

00:04:49.722 --> 00:04:50.946
Spróbujmy.

00:04:51.046 --> 00:04:53.616
Zabieramy obiekt, teraz nie działa.

00:04:53.716 --> 00:04:57.610
Bo nasza funkcja
oczekuje dwóch obiektów,

00:04:57.710 --> 00:05:00.257
a dostaje tylko jeden.
Zmienimy to więc.

00:05:00.357 --> 00:05:02.712
Damy tu „facePosition”,

00:05:02.812 --> 00:05:07.065
ale widać komunikat o błędzie,
bo FaceX nie jest zdefiniowane.

00:05:07.165 --> 00:05:10.685
Wcześniej „faceX” było argumentem,

00:05:10.785 --> 00:05:13.408
lecz teraz nie istnieje.
Mamy tylko obiekt.

00:05:13.508 --> 00:05:17.277
Możemy zapisać pozycję „x”

00:05:17.377 --> 00:05:20.946
z obiektu wewnątrz zmiennej „faceX”.

00:05:21.046 --> 00:05:22.871
Mamy więc obiekt,

00:05:22.971 --> 00:05:24.870
wiemy, że ma właściwość „x”,

00:05:24.970 --> 00:05:28.214
i będziemy go przechowywać
w zmiennej „faceX”.

00:05:28.402 --> 00:05:33.269
To samo możemy zrobić z „y”:
„faceY = facePosition.y”.

00:05:33.949 --> 00:05:38.291
I proszę! A reszta funkcji
używa „faceX” i „faceY”.

00:05:38.391 --> 00:05:41.937
Trzeba to dobrze zapisać.
„xx” nie zadziała,

00:05:42.037 --> 00:05:46.325
bo tego nie ma tutaj,
w naszej tablicy obiektów.

00:05:46.425 --> 00:05:48.345
Musi pasować!

00:05:48.445 --> 00:05:52.014
Wspaniale: teraz możecie mieć
tablice obiektów,

00:05:52.114 --> 00:05:54.057
funkcje przyjmujące obiekty,

00:05:54.157 --> 00:05:58.098
i przekonacie się,
że programy są świetne

00:05:58.198 --> 00:06:00.396
w organizacji danych.

00:06:00.489 --> 00:06:04.378
Zwłaszcza że często chcemy
łączyć „x” z „y”.

00:06:04.478 --> 00:06:08.686
Tablice obiektów przydadzą się
podczas rysowania i animacji.

00:06:08.786 --> 00:06:11.403
Korzystajcie z nich
i bawcie się dobrze!