JAVASCRIPT Pętle
Tym razem będziemy wielokrotnie wykonywali te same czynności. A w zasadzie wykona je za nas struktura zwana pętlą. Omówimy sobie budowę pętli FOR, WHILE oraz DO WHILE.
PĘTLA FOR
Budowa pętli for:
for(wartości_początkowe;warunek;zmiana){ instrukcje; }
Składa się z 3 elementów zamkniętych pomiędzy nawiasami okrągłymi, oddzielonymi od siebie średnikami:
- Pierwszy z elementów to wartości początkowe zmiennych – blok ten wykonuje się raz, na początku działania pętli.
- Drugi to warunek lub warunki zakończenia pętli – sprawdzane na początku każdego obiegu pętli.
- Trzeci to blok instrukcji wykonywanych na koniec każdego obiegu pętli, najczęściej inkrementacja zmiennej i ?
Klamry standardowo zawierają blok instrukcji do wykonania w każdym obiegu pętli.
Przeanalizujmy najbardziej podstawowy przykład zastosowania pętli FOR języka JavaScript:
for(var i=1; i<=10; i++){ document.write(i+' '); }
1 2 3 4 5 6 7 8 9 10
W pierwszym bloku deklarujemy nową zmienną o nazwie i przypisując jej wartość początkową 1. Drugi blok mówi nam o tym, że pętla ma się wykonywać tak długo, dopóki zmienna i jest mniejsza lub równa 10. Trzeci blok oznacza, że na koniec każdego obiegu pętli wartość zmiennej i zwiększy się o 1.
Natomiast w bloku instrukcji mamy wypisanie na ekran aktualnej wartości zmiennej i oraz wypisanie po niej spacji.
W efekcie wypisywanie rozpoczynamy od wartości początkowej zmiennej i, czyli 1, następnie zwiększamy wartość zmiennej i o 1 i ponownie wypisujemy. Dzieje się to tak długo, dopóki zmienna i nie osiągnie wartości 10. Wówczas pętla kończy swoje działanie.
Przeanalizuj proszę dwa kolejne przykłady wraz z efektami ich wykonania. Jak działają? Dlaczego?
Przykład 1:
for(var i=1; i<=10; i++){ document.write(2*i+' '); }
2 4 6 8 10 12 14 16 18 20
Przykład 2:
for(var i=1; i<=20; i+=3){ document.write(i+' '); }
1 4 7 10 13 16 19
Jeśli masz problem z analizą powyższych przykładów, dodam tylko, że:
- w pierwszym przykładzie wypisujemy wartość 2*i, natomiast i w każdym obiegu pętli przyjmuje wartości kolejno: 1, 2, 3…
- w drugim przykładzie na koniec każdego obiegu pętli i zwiększ się o 3 (i+=3, czyli i = i + 3)
Kolejny przykład przedstawia możliwość deklaracji więcej jak jednej zmiennej w bloku wartości początkowych pętli oraz w bloku instrukcji wykonywanych po każdym obiegu pętli.
for(var a=0, b=14; a<20; a++, b+=7){ document.write(b+' '); }
14 21 28 35 42 49 56 63 70 77 84 91 98 105 112 119 126 133 140 147
Przykład wykorzystania nieskończonej pętli for.
var a = 5; for(;;){ if(a<15){ document.write(a+' '); a+=2; continue; document.write('Supertajne!'); }else{ document.write(' Czas pożegnań...'); break; } }
5 7 9 11 13 Czas pożegnań...
Wykorzystaliśmy dodatkowe instrukcje sterujące:
- continue – przerywa obecny i przechodzi do kolejnego obiegu pętli
- break – kończy działanie pętli
PĘTLA WHILE
Budowa pętli while:
while(warunek){ instrukcje; zmiana; }
Podstawowy przykład działania pętli while. Składa się ona z identycznych elementów jak pętla for, z tym, że inaczej ułożonych.
Wartości początkowe i deklaracje zmiennych odbywają się jeszcze przed uruchomieniem pętli, warunek zakończenia znajduje się pomiędzy nawiasami okrągłymi, natomiast instrukcje dokonywane na koniec obiegu pętli znajdują się… na końcu instrukcji zawartych w pętli 😉
var a=1; while (a<=10){ document.write(a+' '); a++; }
1 2 3 4 5 6 7 8 9 10
Przykład nieskończonej pętli while. Zasada true / false identyczna jak w instrukcji warunkowej if.
var c; while (1){ c = prompt('Podaj cyfrę...'); if(c==0) break; document.write(c+' '); }
Przykład uzależnienia momentu zakończenia pętli od danych wprowadzonych przez użytkownika.
var c, z=1; while (z){ c = prompt('Podaj cyfrę...'); if(c==0) z=0; else document.write(c+' '); }
PĘTLA DO WHILE
Pętla do while jest odwróconą wersją pętli while. Tu rozpoczynamy od wykonania instrukcji, następnie sprawdzamy warunek zakończenia pętli i jeśli nie jest spełniony wykonujemy je ponownie.
var a=1; do{ document.write(a+' '); a++; } while (a<=10)
1 2 3 4 5 6 7 8 9 10
Różnica pomiędzy pętlą while, a do while polega na tym, że w pętli do while instrukcje zawsze zostaną wykonane przynajmniej jeden raz.
var a=11; do{ document.write(a+' '); a++; } while (a<=10)
11