WEBVTT

00:00:00.847 --> 00:00:03.306
Продовжимо досліджувати те, що ми можемо
робити з об'єктами.

00:00:04.109 --> 00:00:08.001
Ми повертаємось до програми яку ми
використовували при вивчені функцій.

00:00:08.465 --> 00:00:14.273
Ця програма з функцією drawWinston, знає
як намалювати Вінстона в певних "x" і "y".

00:00:14.273 --> 00:00:20.910
Тоді тут ми викликаємо drawWinston 4 рази
і кожний має різний набір X та Y координат

00:00:21.900 --> 00:00:28.009
Що ж, ви мене знаєте, коли я поглянула на
ці 4 виклики drawWinston, що дуже подібні,

00:00:28.787 --> 00:00:34.104
все про, що я можу думати, це про те, що
було б краще використати цикл і викликати

00:00:34.104 --> 00:00:39.194
лише один раз всередині циклу, змінюючи
X та Y у кожному повторі циклу.

00:00:39.894 --> 00:00:44.036
Отже, щоб зробити це, нам слід придумати
спосіб зберігання цих X та Y позицій

00:00:44.036 --> 00:00:47.036
у масиві, тому ми зможемо запустити цикл
через масив.

00:00:47.036 --> 00:00:55.816
У нас 2 набори значень і ми можемо зробити
2 масиви. Один для позицій X інший для Y.

00:00:55.816 --> 00:01:08.648
Отже, X координата може мати 99, 294, 101,
і 294. І позиції Y - 117, 117, 316, 316.

00:01:08.648 --> 00:01:12.589
Добре, тепер ми можемо запустити цикл з
нашим циклом for.

00:01:12.589 --> 00:01:18.399
var i = 0; i < xPositions.length; i++

00:01:18.399 --> 00:01:22.047
Отже, ми проходимо по кожному елементі у
xPositions і введемо

00:01:22.047 --> 00:01:29.727
drawWinston(xPositions[i], yPositions[i]);

00:01:30.897 --> 00:01:33.926
Гаразд, поглямо чи запрацює, якщо видалити

00:01:33.926 --> 00:01:36.200
Так, працює

00:01:36.200 --> 00:01:41.175
І тепер ми можемо викликати ось це, просто
цей рядок коду що виконує drawWinston

00:01:41.175 --> 00:01:44.645
але він обраховується в кожній позиції
xPositions в масиві.

00:01:44.645 --> 00:01:50.409
Отже, ми можемо додати більше до цього
ввівши щось типу... 10, тоді додати 1,

00:01:50.409 --> 00:01:57.889
а потім 1, і тоді 1, і потім ще 100 та 1.

00:01:57.889 --> 00:02:04.709
Зараз, це виглядає трохи не акуратно і це
мені не подобається? так як мені важко

00:02:04.709 --> 00:02:13.119
побачити які координати X відносяться до Y
Хочу щоб з першого погляду було зрозуміло

00:02:13.119 --> 00:02:14.389
які пари у мене з X.

00:02:14.859 --> 00:02:19.419
Замість цього, щоб переконатися я
ідеально вирівняю над одним одним

00:02:19.419 --> 00:02:20.629
можливо так

00:02:20.629 --> 00:02:26.506
Отже, я хочу найти інший спосіб
зберігання цих позицій

00:02:27.270 --> 00:02:30.570
Є одна ідея щоб зберігати їх як об'єкти.

00:02:30.631 --> 00:02:36.521
Подумайте про це, кожна позиція це два
біти інформації: X та Y. Таким чином, ми

00:02:36.521 --> 00:02:41.544
могли б мати об'єкт, що має властивості Х
та Y, а потім мати масив об'єктів

00:02:41.544 --> 00:02:44.044
з усіма позиціями X та Y.

00:02:44.044 --> 00:02:45.758
Отже. зробимо це

00:02:45.758 --> 00:02:51.395
Ми введемо var positions рівне масиву

00:02:51.395 --> 00:02:55.852
Але кожний елемент замість того, 
щоб бути числом буде об'єктом

00:02:56.312 --> 00:03:04.691
Отже, у нас фігурні дужки і тоді введемо
X: 99, Y:117.

00:03:05.551 --> 00:03:13.392
Отже, тепер ми маємо одну з наших позицій
тут, а потім ми додамо ще одну тут.

00:03:14.392 --> 00:03:30.897
Гаразд, X повинна бути 294, 117, третя
буде 101, 316, а остання з них 294 і 316.

00:03:30.897 --> 00:03:37.524
І тепер у нас є масив об'єктів, де кожен
об'єкт має значення Х та Y всередині.

00:03:37.524 --> 00:03:44.228
Отже тут, в нашому циклі for змінимо цю
функцію, щоб повторювати positions.length

00:03:44.228 --> 00:03:48.993
Тоді ми пропустимо об'єкт.

00:03:48.993 --> 00:03:54.211
Гаразд, зараз він пропускає цілий об'єкт,
але ми хочемо щоб він проходив по X та Y

00:03:54.211 --> 00:03:58.851
отже, нам потрібно positions[i].X та
positions[i].Y.

00:03:59.341 --> 00:04:00.228
Тада!

00:04:00.228 --> 00:04:03.969
Зараз можемо позбутись цих старих
нагромаджених масивів

00:04:05.029 --> 00:04:09.687
Чудово, і це виглядає набагато приємніше
для мене і код більш читабельний,

00:04:09.687 --> 00:04:12.687
і завжди чим більш читабельний код
тим краще

00:04:12.687 --> 00:04:20.335
Також це спрощує доповнення, якщо хочемо
додати щось. Я додам ще 2 і тоді введемо

00:04:20.335 --> 00:04:24.805
X 200 Y 200, отримаємо маленького Вінстона
по середині, тут.

00:04:26.805 --> 00:04:27.661
Чудово.

00:04:27.691 --> 00:04:31.266
Тепер я хочу показати вам дещо навіть
веселіше, ніж це.

00:04:31.266 --> 00:04:38.635
Зверніть увагу на те як наша функція
приймає 2 числа, а потім використовує їх

00:04:38.635 --> 00:04:42.877
І ми можемо змінити нашу функцію, то вона
прийматиме об'єкт і набуватиме

00:04:42.877 --> 00:04:44.657
значень X та Y об'єкту.

00:04:44.657 --> 00:04:49.230
Це означає, що тут ми могли б
просто передати об'єкт.

00:04:49.230 --> 00:04:50.846
Спробуємо це.

00:04:50.846 --> 00:04:53.596
Ми пропускаємо об'єкт, тепер він зламаний.

00:04:53.596 --> 00:05:00.178
Так як наша функція очікує 2 об'єкти, а
отримує тільки 1, і тому, ми змінимо її

00:05:00.178 --> 00:05:04.433
щоб ввести, що це набуває facePosition, і
тепер ми отримуємо помилку, що faceX

00:05:04.433 --> 00:05:07.433
не визначена, тому що раніше

00:05:07.433 --> 00:05:12.901
ми проходили по faceX як аргументу, але
тепер він не існує, ми отримуємо об'єкт.

00:05:12.901 --> 00:05:20.899
І те що можемо зробити це зберегти позицію
X від об'єкта всередині змінної faceX.

00:05:20.899 --> 00:05:24.684
Отже, ми говоримо, що отримали цей об'єкт,
ми знаємо, цей об'єкт має властивість X,

00:05:24.684 --> 00:05:27.684
так що ми просто зберігатимемо,
в змінній faceX.

00:05:27.684 --> 00:05:33.637
Ми можемо так само вчинити з
Y, отже, faceY = facePosition.y.

00:05:33.637 --> 00:05:34.850
Тада!

00:05:34.850 --> 00:05:38.167
І тоді, решта частина функції
використовує faceX та faceY.

00:05:38.167 --> 00:05:40.968
Тепер, нам слід переконатися, чи правильно
написали їх, тому, що якби ми ввели хх, це

00:05:40.968 --> 00:05:43.968
не працюватиме, так як це не те, що тут

00:05:43.968 --> 00:05:48.125
в нашому масиві об'єктів, тому потрібно
щоб відповідали один одному.

00:05:48.125 --> 00:05:53.651
Це дуже акуратно, і тепер ви можете мати 
масиви об'єктів, функції, які є об'єктах

00:05:53.651 --> 00:05:58.730
і ви дійсно виявите, що ваші програми
можуть бути дуже потужним з тим, як

00:05:58.730 --> 00:06:00.160
вони структурують свої дані

00:06:00.160 --> 00:06:05.184
тим більше якщо так часто хотіти групувати
X і Y разом, я думаю, ви знайдете їх

00:06:05.184 --> 00:06:08.926
особливо корисними у всіх ваших 
зображувальних та анімаційних програм тут.

00:06:08.926 --> 00:06:12.000
Таким чином, продовжуйте
і отримуйте задоволення!