1
00:00:01,338 --> 00:00:03,792
Drogocenny kamień! Śliczny!

2
00:00:03,892 --> 00:00:07,987
A od jednego kamienia
lepszy byłby cały rząd.

3
00:00:08,087 --> 00:00:12,376
Już wiemy, że rząd kamieni
najlepiej zrobić za pomocą pętli.

4
00:00:12,476 --> 00:00:15,928
Użyjmy pętli FOR, by narysować
12 kamieni w rzędzie.

5
00:00:16,027 --> 00:00:19,133
Od lewej do prawej, przez cały ekran.

6
00:00:19,233 --> 00:00:20,713
Właśnie tak.

7
00:00:21,757 --> 00:00:25,867
Piszemy: for (var i=0;

8
00:00:25,967 --> 00:00:28,653
i < 12;

9
00:00:28,753 --> 00:00:30,086
i++).

10
00:00:30,758 --> 00:00:32,786
Weźmiemy ten wiersz

11
00:00:32,886 --> 00:00:34,388
i przeniesiemy go tutaj.

12
00:00:35,503 --> 00:00:38,190
Mamy już 12 kamieni,

13
00:00:38,290 --> 00:00:40,054
jeden na drugim.

14
00:00:40,154 --> 00:00:43,119
A chcemy, żeby tworzyły rząd.

15
00:00:43,219 --> 00:00:45,209
Trzeba więc zmieniać „x”.

16
00:00:45,309 --> 00:00:49,253
Teraz „x” wynosi 36, ale wartość
za każdym razem ma być inna.

17
00:00:49,353 --> 00:00:51,439
Czyli ma zależeć od „i”.

18
00:00:51,539 --> 00:00:55,727
Możemy po prostu powiedzieć:
„i” razy 36.

19
00:00:56,139 --> 00:00:57,957
Najpierw jest 0,

20
00:00:58,057 --> 00:01:01,440
potem 36, później 72 itd.

21
00:01:02,296 --> 00:01:04,057
Super! Mamy rząd kamieni.

22
00:01:04,157 --> 00:01:08,173
Przypomina mi to sceny z „Indiany
Jonesa” lub „Aladyna”,

23
00:01:08,273 --> 00:01:11,099
gdzie bohater odkrywa
w jaskini skarb.

24
00:01:11,199 --> 00:01:13,607
Znajduje więcej kamieni!

25
00:01:13,707 --> 00:01:16,672
Nie jeden rząd, tylko cały stos!

26
00:01:16,772 --> 00:01:21,156
Jak sprawić, że kamienie

27
00:01:21,256 --> 00:01:23,243
pokryją ekran do samego dołu?

28
00:01:24,334 --> 00:01:27,887
Możemy po prostu
powtarzać pętlę FOR,

29
00:01:27,987 --> 00:01:30,046
kopiować ją i wklejać,

30
00:01:30,146 --> 00:01:32,345
za każdym razem zmieniając „y”.

31
00:01:33,390 --> 00:01:37,142
Zmienimy na 60, potem na 90...

32
00:01:37,242 --> 00:01:41,401
Mamy trzy rzędy kamieni.
I dobrze!

33
00:01:41,501 --> 00:01:44,048
Ale można się zanudzić.

34
00:01:44,148 --> 00:01:48,779
Ciągle tylko kopiuję i wklejam,
zmieniając jeden drobiazg.

35
00:01:48,879 --> 00:01:52,726
Kiedyś, pisząc taki
powtarzający się program,

36
00:01:52,826 --> 00:01:56,564
spytalibyśmy:
„Może warto użyć pętli?”.

37
00:01:56,664 --> 00:01:58,151
Ale już to robimy!

38
00:01:58,251 --> 00:02:01,043
Jak więc uniknąć tego...

39
00:02:01,143 --> 00:02:03,692
kopiowania i wklejania raz po raz?

40
00:02:03,792 --> 00:02:06,618
Mamy tzw. zagnieżdżone pętle FOR.

41
00:02:06,718 --> 00:02:08,638
To pętla w pętli.

42
00:02:09,219 --> 00:02:11,842
Zrobimy pętlę zewnętrzną,

43
00:02:11,942 --> 00:02:14,768
która załatwi nam ruch w dół ekranu,

44
00:02:14,868 --> 00:02:16,440
a pętla wewnętrzna

45
00:02:16,540 --> 00:02:19,157
będzie robić to, co teraz,

46
00:02:19,257 --> 00:02:21,386
czyli rysować kamienie w poziomie.

47
00:02:21,486 --> 00:02:23,615
Pokażę, o co chodzi.

48
00:02:23,715 --> 00:02:28,050
Piszemy: „for”
i użyjemy innej zmiennej - „j”.

49
00:02:28,150 --> 00:02:29,513
Bo „i” już używamy.

50
00:02:29,613 --> 00:02:31,601
Zatem: for(var j=0;

51
00:02:31,701 --> 00:02:33,994
j jest mniejsze od 13;

52
00:02:34,274 --> 00:02:36,014
j++).

53
00:02:36,964 --> 00:02:38,785
To będzie pętla zewnętrzna,

54
00:02:38,885 --> 00:02:41,425
odpowiadająca za rysowanie w pionie.

55
00:02:41,525 --> 00:02:45,047
Teraz weźmiemy jedną
z poprzednich pętli FOR

56
00:02:45,147 --> 00:02:46,928
i umieścimy ją tutaj.

57
00:02:47,648 --> 00:02:49,436
Zróbmy wcięcie...

58
00:02:50,411 --> 00:02:51,943
I skasujemy te stare.

59
00:02:52,919 --> 00:02:58,213
Teraz mamy wszystkie kamienie
w tym samym rzędzie.

60
00:02:58,313 --> 00:03:01,208
Chcemy zmienić „y”.

61
00:03:01,308 --> 00:03:03,994
Jak wcześniej,
po kopiowaniu i wklejaniu.

62
00:03:04,094 --> 00:03:08,592
Teraz „y” zawsze wynosi 90.
Ma się zmieniać dla każdego rzędu.

63
00:03:09,214 --> 00:03:12,354
Tak jak „x” jest zależny od „i”,

64
00:03:12,454 --> 00:03:15,070
„y” ma być zależny od „j”.

65
00:03:15,821 --> 00:03:18,066
Możemy więc...

66
00:03:18,166 --> 00:03:21,240
zmienić to na coś takiego jak...

67
00:03:22,438 --> 00:03:24,242
„j” razy 30.

68
00:03:24,342 --> 00:03:27,656
Tak! Tyle kamieni!

69
00:03:28,700 --> 00:03:32,127
Jeszcze raz omówmy to,
co robi program.

70
00:03:32,227 --> 00:03:34,622
Pętla zewnętrzna tworzy zmienną „j”

71
00:03:34,722 --> 00:03:37,478
i powiększa ją do 13.

72
00:03:37,578 --> 00:03:41,402
Przy każdym wykonaniu
tej pętli zewnętrznej

73
00:03:41,502 --> 00:03:43,422
uruchamia się pętla wewnętrzna.

74
00:03:43,522 --> 00:03:47,884
Pętla ta tworzy zmienną „i”,
która rośnie do 12.

75
00:03:47,984 --> 00:03:50,876
Przy każdym wykonaniu
pętli wewnętrznej rysuje się

76
00:03:50,976 --> 00:03:54,751
obraz w pozycji „x” i „y”,
zależnych od „i” i „j”.

77
00:03:54,851 --> 00:03:59,142
Z tego powodu „i” zmienia się
częściej niż „j.”

78
00:03:59,242 --> 00:04:04,157
Żeby lepiej to zrozumieć,
zobaczmy wartości „i” oraz „j”.

79
00:04:04,257 --> 00:04:08,290
Teraz zrobię obraz,

80
00:04:08,390 --> 00:04:11,007
wybiorę kolor wypełnienia

81
00:04:11,107 --> 00:04:13,247
i użyję polecenia „text”,

82
00:04:13,347 --> 00:04:16,232
żeby pokazać wartość „j”.
Czyli: „textj”.

83
00:04:16,332 --> 00:04:20,411
Umieszczę to w odpowiednim miejscu.

84
00:04:21,093 --> 00:04:25,564
Teraz widzimy, że „j”
zmienia się od 0 do 12.

85
00:04:25,664 --> 00:04:30,286
To są też pozycje
naszych rzędów kamieni.

86
00:04:30,976 --> 00:04:34,970
Pokażmy wartości „i”.
Zobaczmy, jak się zmieniają.

87
00:04:35,070 --> 00:04:38,801
Dla „i” zróbmy inny kolor.

88
00:04:42,284 --> 00:04:45,628
Wstawimy gdzieś „i”.

89
00:04:45,728 --> 00:04:49,599
Zmienimy „x”, żeby kamienie
rysowały się w poziomie.

90
00:04:49,699 --> 00:04:54,196
To samo zrobimy dla „y”. Dobrze!

91
00:04:54,296 --> 00:04:59,421
Widzimy, że „i” zmienia się
od 0 do 11.

92
00:04:59,521 --> 00:05:02,772
Jak mówiłam, „i”...

93
00:05:02,872 --> 00:05:04,994
zmienia się znacznie częściej.

94
00:05:05,094 --> 00:05:08,616
Ten fragment programu
jest wykonywany częściej niż ten.

95
00:05:08,716 --> 00:05:13,529
Ten - dla każdego wykonania
tej wewnętrznej pętli FOR.

96
00:05:13,629 --> 00:05:17,927
A ten - tylko dla każdego wykonania
pętli zewnętrznej.

97
00:05:18,902 --> 00:05:21,967
Mam nadzieję,
że widząc wartości „i” i „j”

98
00:05:22,067 --> 00:05:25,799
lepiej zrozumieliście
działanie pętli zagnieżdżonej.

99
00:05:26,519 --> 00:05:29,235
Niech już wrócą kamienie, są fajne!

100
00:05:30,082 --> 00:05:33,717
Zagnieżdżone pętle FOR
mają dużo zastosowań.

101
00:05:33,817 --> 00:05:36,712
Pomyślmy, ile rzeczy na świecie

102
00:05:36,812 --> 00:05:39,684
przypomina siatkę 2D:
szachownica, kołdra,

103
00:05:39,784 --> 00:05:43,997
gwiazdy na fladze USA,
wzory, tapety...

104
00:05:44,097 --> 00:05:46,929
Uruchomcie wyobraźnię,
bawiąc się programem,

105
00:05:47,029 --> 00:05:49,228
np. zmieniając obrazy.

106
00:05:49,328 --> 00:05:52,943
Ja zmienię je w serduszka.

107
00:05:53,485 --> 00:05:58,539
Żeby pokazać, jak kocham
zagnieżdżone pętle FOR!