Podstawy Programowania: Pętla for

0:00Przechodzimy do omówienia kolejnej pętli i

0:03chyba jest to pętla najpopularniejsza wśród różnych języków programowania.

0:06Bardzo często się z niej korzysta a jest to pętla for.

0:10I ona ma trochę bardziej skomplikowany zapis niż pętla while czy do while,

0:14natomiast nie jest on na tyle skomplikowany aby móc się tutaj jakoś szczególnie pogubić. Więc

0:19będę chciał Ci ją pokazać w jej najprostszej możliwej formie.

0:22A więc piszemy na początku for i teraz to co jest ważne to w przypadku

0:26while podawaliśmy tutaj jakiś warunek a w zasadzie podawaliśmy wyrażenie, które

0:31powinno ewoluować do prawdziwego lub fałszywego. W przypadku JavaScriptu

0:35każda wartość może być określana jako prawdziwa czy fałszywa

0:39więc tam nie musiało być

0:40true czy false. Ale tutaj w przypadku for będziemy podawać

0:44trzy wyrażenia oddzielone średnikiem. I zaczniemy od pierwszego.

0:48Jest to coś co będzie wykonane jakby tylko raz

0:51takie wyrażenie na początku kiedy ta pętla będzie inicjowania.

0:55I tutaj zazwyczaj tworzymy sobie po prostu

0:57jakąś zmienną, którą się będziemy posługiwać.

1:00Więc napiszemy sobie let i,

1:03i napiszemy równa się zero. Czyli to jest pierwsze wrażenie, które tutaj stworzyliśmy.

1:08Postawiłem średnik dlatego, że po średniku

1:10stawiamy drugie wyrażenie i następnie trzecie wyrażenie.

1:13I teraz to pierwsze, które zrobiłem teraz to jest takie inicjujące

1:17a więc ta pętla for na początku właśnie takie wyrażenie wykona czyli możesz zobaczyć, że

1:21utworzy nam zmienną i, która będzie miała wartość 0.

1:25Napisałem i bo jest to bardzo popularne aby tak z tego korzystać,

1:28natomiast tu mógłbyś napisać counter, tu mógłbyś napisać k,

1:32nie ma znaczenia. Każda dowolna nazwa zmiennej tutaj będzie ok ale przyjęło się

1:37popularnie, że w pętlach wykorzystujemy i jako taki indeks

1:40szczególnie kiedy iterujemy po tablicach ale o tym powiem w kolejnej.

1:44Czyli mamy takie wrażenie inicjujące.

1:46Teraz podajemy warunek, który będzie sprawdzany za każdym razem.

1:50I znowu Ja tutaj mówię że jest to warunek ale jest to wyrażenie, które będzie po

1:54prostu wykonywane jeśli ono nam będzie zwracać wartość prawdziwą

1:58to pętla będzie wykonywać swój kod jeżeli fałszywą to nie. Czyli dokładnie to co

2:02podawaliśmy w przypadku pętli while. A więc będziemy chcieli tę pętlę wykonywać

2:07tak długo jak i jest mniejsze lub równe zróbmy sobie coś takiego 10.

2:12Czyli to będzie sprawdzane za każdą iteracją pętli.

2:15I na początku oczywiście można się domyślić, że skoro i to jest zero to

2:19sprawdzimy czy zero jest mniejsze lub równe 10.

2:21Tak. To na pewno wykonamy kod, który za moment podamy.

2:24I teraz trzecie wrażenie

2:26jest to takie wyrażenie, które będzie wykonywane po zakończeniu iteracji.

2:31I tutaj możemy

2:32i to się bardzo często robi w wypadku pętli for zmieniać warunek bo musimy jakoś

2:37zmienić może nie warunek, ale stan naszej aplikacji tak żeby ten warunek

2:42kiedyś przestał być prawdziwy żeby nie mieć pętli nieskończonej.

2:45Więc po prostu tu będziemy chcieli takie

2:47wyrażenie zrobić i równa się i ++ czyli tak naprawdę to jest to samo jakbyśmy napisali

2:52i = i+1 albo gdybyśmy zrobili

2:57i+ = 1.

2:59Tutaj dowolne wyrażenie możesz zapisać i to wszystkie z nich są poprawne ale bardzo

3:03popularnym jest robienie po prostu plus plus.

3:06I teraz podajemy dopiero blok kodu, który się wykona.

3:08Będę chciał tutaj zrobić console.log

3:10wartości i. Od razu widzimy, że od zera do dziesięciu nam się wyświetlą wartości ale

3:15prześledzimy sobie jeszcze na sekundę co dokładnie tutaj się wydarzyło.

3:19Więc pętla for znowu tak jak mówiłem na

3:21początku pierwsze wrażenie bierze i wykonuje go raz czyli inicjuje nam można

3:26powiedzieć takie środowisko w tym przypadku tworzy zmienną i, która ma

3:30wartość zero. Następnie sprawdza warunek czyli tak jak w przypadku pętli while

3:34jeżeli ten warunek tutaj da wartość fałszywą to kod się w ogóle nie wykona.

3:38Czyli można powiedzieć, że ta część to jest to co podawaliśmy do pętli while.

3:41A więc i jest równe zero, sprawdzamy czy zero jest mniejsze lub równe 10.

3:45Tak. I od razu przechodzimy tutaj, wyświetl i,

3:49kiedy ten blok kodu zostanie wykonany, tu może być oczywiście wiele linijek, to

3:53przechodzimy tutaj do tego trzeciego wyrażenia i zwiększamy wartość tego i.

3:58Więc przy kolejnej iteracji i będzie już miało wartość 1.

4:02To się już nie będzie wykonywać, nie nadpiszemy oczywiście, że i jest zero,

4:06natomiast od razu wtedy pętla przejdzie do tego sprawdzenia. Sprawdzi czy jeden jest

4:10mniejsze lub równe 10, tak, znowu wykonaj ten kod

4:13i wyświetli nam jedynkę. Znowu przeskoczy tutaj zwiększy do dwójki itd.

4:18No i w pewnym momencie oczywiście okaże się, że i ma wartość 11 bo dziesiątka

4:23zostanie wyświetlona tak jak tutaj to widzieliśmy,

4:25znowu pętla przejdzie tutaj, zwiększy i do wartości 11 przejdzie do warunku,

4:31zobaczy, że 11 nie jest mniejsze lub równe

4:3310 i przestanie wykonywać ten kod wyskakując poza pętlę. Czyli gdybyśmy tutaj

4:38mieli jakiś console.log na przykład koniec, zróbmy to w ten sposób,

4:43zapisuje to zauważ, że wyświetliliśmy od zera do dziesięciu i dopiero wyświetliło się koniec.

4:48Więc można powiedzieć, że taka pętla zatrzymuje nam program w tym momencie

4:52wykonuje cały kod jaki tutaj ma jeżeli te warunki są prawdziwe czy tak długo jak ten

4:57warunek jest prawdziwy i kiedy zakończy to dopiero wracamy tutaj i wykonujemy dalszą

5:01część naszego programu. I teraz pętla for może szczególnie na początku wydawać się

5:06dziwna bo możesz sobie pomyśleć po co mi tutaj jakieś i, po co to wszystko

5:10wyświetlamy, ale ten przykład z i będzie idealny do tego aby iterować po tablicach

5:15i dokładnie to pokaże Ci w lekcji kolejnej bo kiedy wiesz już jak działają tablice

5:18zmienne i teraz pętle to bez problemu będziemy mogli tę wiedzę połączyć tak aby

5:23wyświetlić elementy znajdujące się w tablicach.