0:00:01.338,0:00:03.792
Drogocenny kamień! Śliczny!

0:00:03.892,0:00:07.987
A od jednego kamienia[br]lepszy byłby cały rząd.

0:00:08.087,0:00:12.376
Już wiemy, że rząd kamieni[br]najlepiej zrobić za pomocą pętli.

0:00:12.476,0:00:15.928
Użyjmy pętli FOR, by narysować[br]12 kamieni w rzędzie.

0:00:16.027,0:00:19.133
Od lewej do prawej, przez cały ekran.

0:00:19.233,0:00:20.713
Właśnie tak.

0:00:21.757,0:00:25.867
Piszemy: for (var i=0;

0:00:25.967,0:00:28.653
i < 12;

0:00:28.753,0:00:30.086
i++).

0:00:30.758,0:00:32.786
Weźmiemy ten wiersz

0:00:32.886,0:00:34.388
i przeniesiemy go tutaj.

0:00:35.503,0:00:38.190
Mamy już 12 kamieni,

0:00:38.290,0:00:40.054
jeden na drugim.

0:00:40.154,0:00:43.119
A chcemy, żeby tworzyły rząd.

0:00:43.219,0:00:45.209
Trzeba więc zmieniać „x”.

0:00:45.309,0:00:49.253
Teraz „x” wynosi 36, ale wartość[br]za każdym razem ma być inna.

0:00:49.353,0:00:51.439
Czyli ma zależeć od „i”.

0:00:51.539,0:00:55.727
Możemy po prostu powiedzieć:[br]„i” razy 36.

0:00:56.139,0:00:57.957
Najpierw jest 0,

0:00:58.057,0:01:01.440
potem 36, później 72 itd.

0:01:02.296,0:01:04.057
Super! Mamy rząd kamieni.

0:01:04.157,0:01:08.173
Przypomina mi to sceny z „Indiany[br]Jonesa” lub „Aladyna”,

0:01:08.273,0:01:11.099
gdzie bohater odkrywa[br]w jaskini skarb.

0:01:11.199,0:01:13.607
Znajduje więcej kamieni!

0:01:13.707,0:01:16.672
Nie jeden rząd, tylko cały stos!

0:01:16.772,0:01:21.156
Jak sprawić, że kamienie

0:01:21.256,0:01:23.243
pokryją ekran do samego dołu?

0:01:24.334,0:01:27.887
Możemy po prostu[br]powtarzać pętlę FOR,

0:01:27.987,0:01:30.046
kopiować ją i wklejać,

0:01:30.146,0:01:32.345
za każdym razem zmieniając „y”.

0:01:33.390,0:01:37.142
Zmienimy na 60, potem na 90...

0:01:37.242,0:01:41.401
Mamy trzy rzędy kamieni.[br]I dobrze!

0:01:41.501,0:01:44.048
Ale można się zanudzić.

0:01:44.148,0:01:48.779
Ciągle tylko kopiuję i wklejam,[br]zmieniając jeden drobiazg.

0:01:48.879,0:01:52.726
Kiedyś, pisząc taki[br]powtarzający się program,

0:01:52.826,0:01:56.564
spytalibyśmy:[br]„Może warto użyć pętli?”.

0:01:56.664,0:01:58.151
Ale już to robimy!

0:01:58.251,0:02:01.043
Jak więc uniknąć tego...

0:02:01.143,0:02:03.692
kopiowania i wklejania raz po raz?

0:02:03.792,0:02:06.618
Mamy tzw. zagnieżdżone pętle FOR.

0:02:06.718,0:02:08.638
To pętla w pętli.

0:02:09.219,0:02:11.842
Zrobimy pętlę zewnętrzną,

0:02:11.942,0:02:14.768
która załatwi nam ruch w dół ekranu,

0:02:14.868,0:02:16.440
a pętla wewnętrzna

0:02:16.540,0:02:19.157
będzie robić to, co teraz,

0:02:19.257,0:02:21.386
czyli rysować kamienie w poziomie.

0:02:21.486,0:02:23.615
Pokażę, o co chodzi.

0:02:23.715,0:02:28.050
Piszemy: „for”[br]i użyjemy innej zmiennej - „j”.

0:02:28.150,0:02:29.513
Bo „i” już używamy.

0:02:29.613,0:02:31.601
Zatem: for(var j=0;

0:02:31.701,0:02:33.994
j jest mniejsze od 13;

0:02:34.274,0:02:36.014
j++).

0:02:36.964,0:02:38.785
To będzie pętla zewnętrzna,

0:02:38.885,0:02:41.425
odpowiadająca za rysowanie w pionie.

0:02:41.525,0:02:45.047
Teraz weźmiemy jedną[br]z poprzednich pętli FOR

0:02:45.147,0:02:46.928
i umieścimy ją tutaj.

0:02:47.648,0:02:49.436
Zróbmy wcięcie...

0:02:50.411,0:02:51.943
I skasujemy te stare.

0:02:52.919,0:02:58.213
Teraz mamy wszystkie kamienie[br]w tym samym rzędzie.

0:02:58.313,0:03:01.208
Chcemy zmienić „y”.

0:03:01.308,0:03:03.994
Jak wcześniej,[br]po kopiowaniu i wklejaniu.

0:03:04.094,0:03:08.592
Teraz „y” zawsze wynosi 90.[br]Ma się zmieniać dla każdego rzędu.

0:03:09.214,0:03:12.354
Tak jak „x” jest zależny od „i”,

0:03:12.454,0:03:15.070
„y” ma być zależny od „j”.

0:03:15.821,0:03:18.066
Możemy więc...

0:03:18.166,0:03:21.240
zmienić to na coś takiego jak...

0:03:22.438,0:03:24.242
„j” razy 30.

0:03:24.342,0:03:27.656
Tak! Tyle kamieni!

0:03:28.700,0:03:32.127
Jeszcze raz omówmy to,[br]co robi program.

0:03:32.227,0:03:34.622
Pętla zewnętrzna tworzy zmienną „j”

0:03:34.722,0:03:37.478
i powiększa ją do 13.

0:03:37.578,0:03:41.402
Przy każdym wykonaniu[br]tej pętli zewnętrznej

0:03:41.502,0:03:43.422
uruchamia się pętla wewnętrzna.

0:03:43.522,0:03:47.884
Pętla ta tworzy zmienną „i”,[br]która rośnie do 12.

0:03:47.984,0:03:50.876
Przy każdym wykonaniu[br]pętli wewnętrznej rysuje się

0:03:50.976,0:03:54.751
obraz w pozycji „x” i „y”,[br]zależnych od „i” i „j”.

0:03:54.851,0:03:59.142
Z tego powodu „i” zmienia się[br]częściej niż „j.”

0:03:59.242,0:04:04.157
Żeby lepiej to zrozumieć,[br]zobaczmy wartości „i” oraz „j”.

0:04:04.257,0:04:08.290
Teraz zrobię obraz,

0:04:08.390,0:04:11.007
wybiorę kolor wypełnienia

0:04:11.107,0:04:13.247
i użyję polecenia „text”,

0:04:13.347,0:04:16.232
żeby pokazać wartość „j”.[br]Czyli: „textj”.

0:04:16.332,0:04:20.411
Umieszczę to w odpowiednim miejscu.

0:04:21.093,0:04:25.564
Teraz widzimy, że „j”[br]zmienia się od 0 do 12.

0:04:25.664,0:04:30.286
To są też pozycje[br]naszych rzędów kamieni.

0:04:30.976,0:04:34.970
Pokażmy wartości „i”.[br]Zobaczmy, jak się zmieniają.

0:04:35.070,0:04:38.801
Dla „i” zróbmy inny kolor.

0:04:42.284,0:04:45.628
Wstawimy gdzieś „i”.

0:04:45.728,0:04:49.599
Zmienimy „x”, żeby kamienie[br]rysowały się w poziomie.

0:04:49.699,0:04:54.196
To samo zrobimy dla „y”. Dobrze!

0:04:54.296,0:04:59.421
Widzimy, że „i” zmienia się[br]od 0 do 11.

0:04:59.521,0:05:02.772
Jak mówiłam, „i”...

0:05:02.872,0:05:04.994
zmienia się znacznie częściej.

0:05:05.094,0:05:08.616
Ten fragment programu[br]jest wykonywany częściej niż ten.

0:05:08.716,0:05:13.529
Ten - dla każdego wykonania[br]tej wewnętrznej pętli FOR.

0:05:13.629,0:05:17.927
A ten - tylko dla każdego wykonania[br]pętli zewnętrznej.

0:05:18.902,0:05:21.967
Mam nadzieję,[br]że widząc wartości „i” i „j”

0:05:22.067,0:05:25.799
lepiej zrozumieliście[br]działanie pętli zagnieżdżonej.

0:05:26.519,0:05:29.235
Niech już wrócą kamienie, są fajne!

0:05:30.082,0:05:33.717
Zagnieżdżone pętle FOR[br]mają dużo zastosowań.

0:05:33.817,0:05:36.712
Pomyślmy, ile rzeczy na świecie

0:05:36.812,0:05:39.684
przypomina siatkę 2D:[br]szachownica, kołdra,

0:05:39.784,0:05:43.997
gwiazdy na fladze USA,[br]wzory, tapety...

0:05:44.097,0:05:46.929
Uruchomcie wyobraźnię,[br]bawiąc się programem,

0:05:47.029,0:05:49.228
np. zmieniając obrazy.

0:05:49.328,0:05:52.943
Ja zmienię je w serduszka.

0:05:53.485,0:05:58.539
Żeby pokazać, jak kocham[br]zagnieżdżone pętle FOR!