Zagnieżdżone pętle for (wersja wideo)

To tylko zapis naszych interaktywnych sesji poświęconych kodowaniu, stworzony by ułatwić ich przełożenie na inne języki. Polecamy obejrzenie tych sesji bezpośrednio pod adresem: https://pl.khanacademy.org/cs/programming/

Drogocenny kamień! Śliczny!

A od jednego kamienia
lepszy byłby cały rząd.

Już wiemy, że rząd kamieni
najlepiej zrobić za pomocą pętli.

Użyjmy pętli FOR, by narysować
12 kamieni w rzędzie.

Od lewej do prawej, przez cały ekran.

Właśnie tak.

Piszemy: for (var i=0;

i < 12;

i++).

Weźmiemy ten wiersz

i przeniesiemy go tutaj.

Mamy już 12 kamieni,

jeden na drugim.

A chcemy, żeby tworzyły rząd.

Trzeba więc zmieniać „x”.

Teraz „x” wynosi 36, ale wartość
za każdym razem ma być inna.

Czyli ma zależeć od „i”.

Możemy po prostu powiedzieć:
„i” razy 36.

Najpierw jest 0,

potem 36, później 72 itd.

Super! Mamy rząd kamieni.

Przypomina mi to sceny z „Indiany
Jonesa” lub „Aladyna”,

gdzie bohater odkrywa
w jaskini skarb.

Znajduje więcej kamieni!

Nie jeden rząd, tylko cały stos!

Jak sprawić, że kamienie

pokryją ekran do samego dołu?

Możemy po prostu
powtarzać pętlę FOR,

kopiować ją i wklejać,

za każdym razem zmieniając „y”.

Zmienimy na 60, potem na 90...

Mamy trzy rzędy kamieni.
I dobrze!

Ale można się zanudzić.

Ciągle tylko kopiuję i wklejam,
zmieniając jeden drobiazg.

Kiedyś, pisząc taki
powtarzający się program,

spytalibyśmy:
„Może warto użyć pętli?”.

Ale już to robimy!

Jak więc uniknąć tego...

kopiowania i wklejania raz po raz?

Mamy tzw. zagnieżdżone pętle FOR.

To pętla w pętli.

Zrobimy pętlę zewnętrzną,

która załatwi nam ruch w dół ekranu,

a pętla wewnętrzna

będzie robić to, co teraz,

czyli rysować kamienie w poziomie.

Pokażę, o co chodzi.

Piszemy: „for”
i użyjemy innej zmiennej - „j”.

Bo „i” już używamy.

Zatem: for(var j=0;

j jest mniejsze od 13;

j++).

To będzie pętla zewnętrzna,

odpowiadająca za rysowanie w pionie.

Teraz weźmiemy jedną
z poprzednich pętli FOR

i umieścimy ją tutaj.

Zróbmy wcięcie...

I skasujemy te stare.

Teraz mamy wszystkie kamienie
w tym samym rzędzie.

Chcemy zmienić „y”.

Jak wcześniej,
po kopiowaniu i wklejaniu.

Teraz „y” zawsze wynosi 90.
Ma się zmieniać dla każdego rzędu.

Tak jak „x” jest zależny od „i”,

„y” ma być zależny od „j”.

Możemy więc...

zmienić to na coś takiego jak...

„j” razy 30.

Tak! Tyle kamieni!

Jeszcze raz omówmy to,
co robi program.

Pętla zewnętrzna tworzy zmienną „j”

i powiększa ją do 13.

Przy każdym wykonaniu
tej pętli zewnętrznej

uruchamia się pętla wewnętrzna.

Pętla ta tworzy zmienną „i”,
która rośnie do 12.

Przy każdym wykonaniu
pętli wewnętrznej rysuje się

obraz w pozycji „x” i „y”,
zależnych od „i” i „j”.

Z tego powodu „i” zmienia się
częściej niż „j.”

Żeby lepiej to zrozumieć,
zobaczmy wartości „i” oraz „j”.

Teraz zrobię obraz,

wybiorę kolor wypełnienia

i użyję polecenia „text”,

żeby pokazać wartość „j”.
Czyli: „textj”.

Umieszczę to w odpowiednim miejscu.

Teraz widzimy, że „j”
zmienia się od 0 do 12.

To są też pozycje
naszych rzędów kamieni.

Pokażmy wartości „i”.
Zobaczmy, jak się zmieniają.

Dla „i” zróbmy inny kolor.

Wstawimy gdzieś „i”.

Zmienimy „x”, żeby kamienie
rysowały się w poziomie.

To samo zrobimy dla „y”. Dobrze!

Widzimy, że „i” zmienia się
od 0 do 11.

Jak mówiłam, „i”...

zmienia się znacznie częściej.

Ten fragment programu
jest wykonywany częściej niż ten.

Ten - dla każdego wykonania
tej wewnętrznej pętli FOR.

A ten - tylko dla każdego wykonania
pętli zewnętrznej.

Mam nadzieję,
że widząc wartości „i” i „j”

lepiej zrozumieliście
działanie pętli zagnieżdżonej.

Niech już wrócą kamienie, są fajne!

Zagnieżdżone pętle FOR
mają dużo zastosowań.

Pomyślmy, ile rzeczy na świecie

przypomina siatkę 2D:
szachownica, kołdra,

gwiazdy na fladze USA,
wzory, tapety...

Uruchomcie wyobraźnię,
bawiąc się programem,

np. zmieniając obrazy.

Ja zmienię je w serduszka.

Żeby pokazać, jak kocham
zagnieżdżone pętle FOR!