WEBVTT

00:00:01.076 --> 00:00:03.627
Дорогоцінний камінь, дуже гарний камінь!

00:00:03.917 --> 00:00:06.035
Але ви знаєте, що краще
ніж один дорогоцінний камінь?

00:00:06.035 --> 00:00:08.275
Це цілий ряд дорогоцінних каменів!

00:00:08.275 --> 00:00:09.562
І, звичайно ж, тепер ми знаємо,

00:00:09.562 --> 00:00:12.382
найкращий спосіб, щоб зробити ряд
дорогоцінних каменів, з допомогою циклів.

00:00:12.382 --> 00:00:15.952
Так що давайте використовувати цикл
намалювати 12 дорогоцінних каменів в ряд.

00:00:15.952 --> 00:00:19.523
Рухаючись зліва направо
по всьому екрану.

00:00:19.523 --> 00:00:21.624
Щось на зразок цього.

00:00:21.624 --> 00:00:26.006
отже це є " for (var i = 0;

00:00:26.006 --> 00:00:30.686
i < 12; i ++)

00:00:30.686 --> 00:00:34.939
А потім ми візьмемо цей рядок
і перемістимо його всередину сюди

00:00:35.909 --> 00:00:37.979
Так що тепер у нас є
12 дорогоцінних каменів,

00:00:37.979 --> 00:00:40.305
але вони насправді всі поскладані
зверху один на одному.

00:00:40.305 --> 00:00:43.401
Пам'ятаєте, що ми хочемо, щоб вони
були по всьому екрану.

00:00:43.401 --> 00:00:45.941
Це означає, що ми хочемо
щоб змінювався "х".

00:00:45.941 --> 00:00:49.324
А прямо зараз, "x" має 36 але ми 
хочемо, щоб вона була кожного разу різною.

00:00:49.324 --> 00:00:51.749
Це означає, що ми хочемо, щоб вона
залежала від "і".

00:00:51.749 --> 00:00:56.329
Так що ми можемо це зробити
просто ввівши: "i" помножити 36 разів.

00:00:56.329 --> 00:01:01.627
Таким чином, перший це 0,
а потім 36, і 72, і так далі, і так далі.

00:01:02.317 --> 00:01:04.405
класно! Тепер у нас є ряд
дорогоцінних каменів.

00:01:04.405 --> 00:01:05.755
І цей видгляд нагадує мені

00:01:05.755 --> 00:01:07.997
ті сцени, що в
Індіані Джонс або Аладіні,

00:01:07.997 --> 00:01:11.306
де герой знаходить
підземний скарб з дорогоцінних каменів,

00:01:11.306 --> 00:01:13.732
але вони зазвичай знаходять
набагато більше, ніж ці.

00:01:13.732 --> 00:01:17.306
Не тільки ряд дорогоцінних каменів
але купу каміння.

00:01:17.306 --> 00:01:20.399
то, як ми зробити щоб дорогоцінні камені

00:01:20.399 --> 00:01:23.676
йшли також вздовж всього екрану вниз?

00:01:24.456 --> 00:01:29.539
Ну, ми могли б почати з того, що повторили
б цикл for, а потім скопіювали і вставити,

00:01:30.449 --> 00:01:32.795
але потім змінювали б "Y" кожного разу.

00:01:34.355 --> 00:01:37.688
І, таким чином ми змінимо її
на 60, а потім на 90.

00:01:37.688 --> 00:01:42.038
Так, що тепер у нас є три ряди каменів
і це круто

00:01:42.038 --> 00:01:44.265
але це також стає дуже нудним

00:01:44.265 --> 00:01:48.833
тому що все, що я роблю це копіюю і 
вставляюю змінюючи цю одну маленьку річ.

00:01:48.833 --> 00:01:52.679
І, зазвичай, в минулому, коли ми починали
писати повторюваний код як зараз

00:01:52.679 --> 00:01:56.215
ми думали, "О, можливо нам слід просто,
використати цикл замість цього"

00:01:56.695 --> 00:01:58.607
але ми вже використовуємо цикл;

00:01:58.607 --> 00:02:01.014
Отже, що робити
щоб уникнути написання цього,

00:02:01.014 --> 00:02:03.854
Ви знаєте, повторювання цього
копіювання-вставляння?

00:02:03.854 --> 00:02:09.098
Ну, це те, що ми називаємо
"Вкладені цикли for": цикл в циклі.

00:02:09.098 --> 00:02:11.852
І, те, що ми будемо робити
це створимо зовнішній цикл,

00:02:11.852 --> 00:02:14.851
і це те, що буде дбати про рух
вздовж екрану до низу,

00:02:14.851 --> 00:02:19.234
і тоді наш внутрішній цикл буде
слідкувати про те, що робиться зараз,

00:02:19.234 --> 00:02:20.997
рух зліва направо.

00:02:21.977 --> 00:02:23.406
Дозвольте мені показати вам,
що я маю на увазі.

00:02:23.756 --> 00:02:29.721
Отже, "for"- і ми використаємо іншу змінну
"j" так як ми вже використовуємо "i"

00:02:29.721 --> 00:02:35.974
І так, "for(var j = 0" ми введемо, що 
"j < 13; j++)".

00:02:37.274 --> 00:02:41.359
Тому, це буде наш зовнішній контур,
відповідальний за рух зверху вниз.

00:02:41.759 --> 00:02:45.037
І тоді ми тільки збираємося взяти
один з наших попередніх циклів for,

00:02:45.037 --> 00:02:49.444
і помістимо його всередину там
і зафіксуємо відступи,

00:02:50.274 --> 00:02:52.164
ми видалимо ці старі.

00:02:52.944 --> 00:02:55.449
Отже, тепер те, що у нас є

00:02:55.449 --> 00:02:58.029
це всі вони поскладані один на одному
зверху в тому ж рядку.

00:02:58.479 --> 00:03:01.969
І так, справа в тому, що ми хочемо
змінити "у", чи не так?

00:03:01.969 --> 00:03:03.999
Це те, що ми змінювали до того
коли копіювали і вставляли.

00:03:03.999 --> 00:03:05.838
і прямо зараз, "у" завжди 90.

00:03:05.838 --> 00:03:08.710
Ми хочемо змінити "y" для кожного рядка.

00:03:09.200 --> 00:03:15.308
Отже, шлях по "х" залежить від "i",
ми хочемо, щоб "у" залежала від "j".

00:03:15.838 --> 00:03:19.173
Таким чином, ми далі і змінемо це.

00:03:19.173 --> 00:03:23.803
щось на зразок, можливо, 
"j" помножити на 30.

00:03:24.433 --> 00:03:29.244
Ура! Так багато дорогоцінних каменів!
Чудово!

00:03:29.704 --> 00:03:32.336
Давайте розглянемо, що це робить ще раз.

00:03:32.336 --> 00:03:37.060
Зовнішній цикл створює цю змінну "j"
і збільшує його до 13

00:03:38.340 --> 00:03:42.820
У кожному виконанні зовнішнього циклу,
він запускає цей внутрішній цикл.

00:03:43.580 --> 00:03:48.033
І внутрішній цикл створює
змінну "i" що збільшується до 12.

00:03:48.033 --> 00:03:50.058
І для кожного
виконання внутрішнього циклу,

00:03:50.058 --> 00:03:54.148
він малює картинку по "х" та "у"
що базуються на "i" та "j".

00:03:54.978 --> 00:03:58.707
І ця "i" змінюється набагато частіше
ніж "J" через це.

00:03:59.287 --> 00:04:01.228
Щоб спробувати і зрозуміти 
це, навіть ще краще,

00:04:01.228 --> 00:04:04.438
спробуємо візуалізувати
значення "i" та "j"

00:04:04.878 --> 00:04:09.057
Тому, я прокоментую зображення,

00:04:09.057 --> 00:04:11.637
а потім встановлю колір заливки,

00:04:11.637 --> 00:04:14.976
і я збираюся використати текстову команду
щоб показати значення 'j'.

00:04:14.976 --> 00:04:20.035
Отже "text(j..." а потім я поставлю у
відповідному місці тут.

00:04:21.035 --> 00:04:25.569
Гаразд, тепер ми можемо бачити, що "j"
йде від 0 до 12.

00:04:25.569 --> 00:04:29.739
Це по суті, де наші ряди каменів
розташовані так само.

00:04:31.569 --> 00:04:34.934
І зараз ми візуалізмуємо "i" і побачимо
як вона змінюється.

00:04:35.174 --> 00:04:38.886
Отже, для "i" зробимо інший колір.

00:04:42.586 --> 00:04:45.635
Тоді ми поставимо кудись "i"

00:04:46.235 --> 00:04:49.481
І ми змінимо її "х"
так, що вона з'явиться по всьому екрану.

00:04:49.481 --> 00:04:53.338
Ми зробимо те ж саме для "у".

00:04:54.248 --> 00:04:59.561
Тепер ми можемо бачити, що "i"
йде від 0 до 11.

00:04:59.561 --> 00:05:04.326
Отже. "i" як я вже говорила,
змінюється багато частіше.

00:05:04.326 --> 00:05:08.618
І цей рядок коду запускається на виконання
набагато більше разів, ніж цей рядок коду,

00:05:08.618 --> 00:05:13.855
Так як, цей рядок коду виконується кожний
для виконання цього внутрішнього циклу for

00:05:13.855 --> 00:05:16.387
в той час я цей к рядок коду
тільки виконанується

00:05:16.387 --> 00:05:18.307
для кожного виконання зовнішнього циклу.

00:05:19.167 --> 00:05:22.140
Таким чином, це візуалізація з "i" та "j",

00:05:22.140 --> 00:05:23.733
сподіваюсь це допоможе вам зрозуміти

00:05:23.733 --> 00:05:26.233
набагато краще, що відбувається з цими
вкладеними циклами.

00:05:26.353 --> 00:05:29.595
Тепер повернемось до наших 
дорогоцінних каменів, так як вони кращі!

00:05:30.135 --> 00:05:34.066
Так, що ви багато чого можете зробити з
вкладеними циклами for

00:05:34.066 --> 00:05:36.652
Якщо ви просто подумаєте про
все на світі

00:05:36.652 --> 00:05:39.599
який схожий на двовимірну сітку,
шахівницу, стьобану ковдру,

00:05:39.599 --> 00:05:43.824
зірки на прапорі США,
класні візерунки та шпалери

00:05:44.244 --> 00:05:46.982
почніть з вашої уяви, і
просто пограйтеся з цим кодом,

00:05:46.982 --> 00:05:49.396
змінюючи зображення.

00:05:49.396 --> 00:05:53.166
І почну з того, що заміню зображення
на серце!

00:05:53.576 --> 00:05:58.256
Для того, щоб показати вам, наскільки
Я люблю вкладені цикли for!