1
00:00:01,076 --> 00:00:03,627
Дорогоцінний камінь, дуже гарний камінь!

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

3
00:00:06,035 --> 00:00:08,275
Це цілий ряд дорогоцінних каменів!

4
00:00:08,275 --> 00:00:09,562
І, звичайно ж, тепер ми знаємо,

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

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

7
00:00:15,952 --> 00:00:19,523
Рухаючись зліва направо
по всьому екрану.

8
00:00:19,523 --> 00:00:21,624
Щось на зразок цього.

9
00:00:21,624 --> 00:00:26,006
отже це є " for (var i = 0;

10
00:00:26,006 --> 00:00:30,686
i < 12; i ++)

11
00:00:30,686 --> 00:00:34,939
А потім ми візьмемо цей рядок
і перемістимо його всередину сюди

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

13
00:00:37,979 --> 00:00:40,305
але вони насправді всі поскладані
зверху один на одному.

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

15
00:00:43,401 --> 00:00:45,941
Це означає, що ми хочемо
щоб змінювався "х".

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

17
00:00:49,324 --> 00:00:51,749
Це означає, що ми хочемо, щоб вона
залежала від "і".

18
00:00:51,749 --> 00:00:56,329
Так що ми можемо це зробити
просто ввівши: "i" помножити 36 разів.

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

20
00:01:02,317 --> 00:01:04,405
класно! Тепер у нас є ряд
дорогоцінних каменів.

21
00:01:04,405 --> 00:01:05,755
І цей видгляд нагадує мені

22
00:01:05,755 --> 00:01:07,997
ті сцени, що в
Індіані Джонс або Аладіні,

23
00:01:07,997 --> 00:01:11,306
де герой знаходить
підземний скарб з дорогоцінних каменів,

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

25
00:01:13,732 --> 00:01:17,306
Не тільки ряд дорогоцінних каменів
але купу каміння.

26
00:01:17,306 --> 00:01:20,399
то, як ми зробити щоб дорогоцінні камені

27
00:01:20,399 --> 00:01:23,676
йшли також вздовж всього екрану вниз?

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

29
00:01:30,449 --> 00:01:32,795
але потім змінювали б "Y" кожного разу.

30
00:01:34,355 --> 00:01:37,688
І, таким чином ми змінимо її
на 60, а потім на 90.

31
00:01:37,688 --> 00:01:42,038
Так, що тепер у нас є три ряди каменів
і це круто

32
00:01:42,038 --> 00:01:44,265
але це також стає дуже нудним

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

34
00:01:48,833 --> 00:01:52,679
І, зазвичай, в минулому, коли ми починали
писати повторюваний код як зараз

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

36
00:01:56,695 --> 00:01:58,607
але ми вже використовуємо цикл;

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

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

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

40
00:02:09,098 --> 00:02:11,852
І, те, що ми будемо робити
це створимо зовнішній цикл,

41
00:02:11,852 --> 00:02:14,851
і це те, що буде дбати про рух
вздовж екрану до низу,

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

43
00:02:19,234 --> 00:02:20,997
рух зліва направо.

44
00:02:21,977 --> 00:02:23,406
Дозвольте мені показати вам,
що я маю на увазі.

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

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

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

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

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

50
00:02:50,274 --> 00:02:52,164
ми видалимо ці старі.

51
00:02:52,944 --> 00:02:55,449
Отже, тепер те, що у нас є

52
00:02:55,449 --> 00:02:58,029
це всі вони поскладані один на одному
зверху в тому ж рядку.

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

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

55
00:03:03,999 --> 00:03:05,838
і прямо зараз, "у" завжди 90.

56
00:03:05,838 --> 00:03:08,710
Ми хочемо змінити "y" для кожного рядка.

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

58
00:03:15,838 --> 00:03:19,173
Таким чином, ми далі і змінемо це.

59
00:03:19,173 --> 00:03:23,803
щось на зразок, можливо, 
"j" помножити на 30.

60
00:03:24,433 --> 00:03:29,244
Ура! Так багато дорогоцінних каменів!
Чудово!

61
00:03:29,704 --> 00:03:32,336
Давайте розглянемо, що це робить ще раз.

62
00:03:32,336 --> 00:03:37,060
Зовнішній цикл створює цю змінну "j"
і збільшує його до 13

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

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

65
00:03:48,033 --> 00:03:50,058
І для кожного
виконання внутрішнього циклу,

66
00:03:50,058 --> 00:03:54,148
він малює картинку по "х" та "у"
що базуються на "i" та "j".

67
00:03:54,978 --> 00:03:58,707
І ця "i" змінюється набагато частіше
ніж "J" через це.

68
00:03:59,287 --> 00:04:01,228
Щоб спробувати і зрозуміти 
це, навіть ще краще,

69
00:04:01,228 --> 00:04:04,438
спробуємо візуалізувати
значення "i" та "j"

70
00:04:04,878 --> 00:04:09,057
Тому, я прокоментую зображення,

71
00:04:09,057 --> 00:04:11,637
а потім встановлю колір заливки,

72
00:04:11,637 --> 00:04:14,976
і я збираюся використати текстову команду
щоб показати значення 'j'.

73
00:04:14,976 --> 00:04:20,035
Отже "text(j..." а потім я поставлю у
відповідному місці тут.

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

75
00:04:25,569 --> 00:04:29,739
Це по суті, де наші ряди каменів
розташовані так само.

76
00:04:31,569 --> 00:04:34,934
І зараз ми візуалізмуємо "i" і побачимо
як вона змінюється.

77
00:04:35,174 --> 00:04:38,886
Отже, для "i" зробимо інший колір.

78
00:04:42,586 --> 00:04:45,635
Тоді ми поставимо кудись "i"

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

80
00:04:49,481 --> 00:04:53,338
Ми зробимо те ж саме для "у".

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

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

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

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

85
00:05:13,855 --> 00:05:16,387
в той час я цей к рядок коду
тільки виконанується

86
00:05:16,387 --> 00:05:18,307
для кожного виконання зовнішнього циклу.

87
00:05:19,167 --> 00:05:22,140
Таким чином, це візуалізація з "i" та "j",

88
00:05:22,140 --> 00:05:23,733
сподіваюсь це допоможе вам зрозуміти

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

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

91
00:05:30,135 --> 00:05:34,066
Так, що ви багато чого можете зробити з
вкладеними циклами for

92
00:05:34,066 --> 00:05:36,652
Якщо ви просто подумаєте про
все на світі

93
00:05:36,652 --> 00:05:39,599
який схожий на двовимірну сітку,
шахівницу, стьобану ковдру,

94
00:05:39,599 --> 00:05:43,824
зірки на прапорі США,
класні візерунки та шпалери

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

96
00:05:46,982 --> 00:05:49,396
змінюючи зображення.

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

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