Pętle - lomilowka.pl

Pętle
Pętlę w programowaniu pozwalają nam wykonywać dany kod pewną ilość razy.
Przypuśćmy że dostaliśmy za zadanie wypisać na ekranie 5 razy jakieś zdanie. Możemy to zrobić za
pomocą poniższego kodu:
console.log("To jest 1 przykładowe zdanie. ");
console.log("To jest 2 przykładowe zdanie. ");
console.log("To jest 3 przykładowe zdanie. ");
console.log("To jest 4 przykładowe zdanie. ");
console.log("To jest 5 przykładowe zdanie. ");
Oczywiście można i w ten sposób. Ale co się stanie, gdy te "5 razy" zamieniło by się na "1000
razy"? Tutaj z pomocą przychodzą nam pętle. Wystarczy, że jakiś określony kod wstawimy do pętli,
a Javascript będzie go powtarzał dopóki określony warunek będzie spełniony.
Javascript udostępnia nam kilka typow pętli.
Pętla typu while
Struktura pętli while ma następującą postać:
while (wyrażenie) {
...fragment kodu który będzie powtarzany...
}
Fragment kodu będzie powtarzany dopóty, dopóki będzie spełniony warunek testowany w
nawiasach. Aby pętla miała swój koniec, musimy w odpowiednim momencie sprawić, że testowany
warunek zwróci wartość false:
var x=1;
while (x<=5) {
console.log("[przykładowy tekst] ");
x++;
}
Powyższy skrypt wypisze wyrażenie 5 razy. Jeżeli w kodzie pętli nie zwiększalibyśmy x, wówczas
pętla ta była by nieskończona (infinite loop), co zaowocowało by "zawieszeniem" strony (po
pewnym czasie pojawił by się stosowny komunikat mówiący o źle działającym skrypcie).
Pętla typu do ... while
Podobnym rodzajem pętli jest pętla typu do ... while. Zasadniczą różnicą między tym typem a
poprzednim jest to, że kod który ma być powtarzany zostanie wykonany przed sprawdzeniem
wyrażenia.
Ogólna postać tego typu pętli jest następująca:
do {
...fragment kodu który będzie powtarzany...
}
while (wyrażenie)
var x=2
do {
console.log("[przykładowy tekst] ");
x++;
}
while (x<2)
Pętla typu for
Kolejnym rodzajem pętli jest pętla typu for. W zasadzie jest to najczęściej używany rodzaj pętli.
Ogólna konstrukcja pętli typu for ma wygląd:
for (zainicjowanie zmiennych; wyrażenie testujące;
zwiększenie/zmniejszenie zmiennej)
{
kod ktory zostanie wykonany pewną ilość razy
}
Przykładowo w poniższym kodzie rezalizujemy wcześniej postawione nam zadanie wypisania na
ekran 5 razy określonego zdania:
for (var x=0; x<5; x++) {
console.log("To jest przykładowe zdanie");
}
for (var x=0, j=5; x<j; x++) {
console.log("To jest przykładowe zdanie");
}
Nie musisz deklarować wszystkich trzech parametrów opisujących pętlę. Dla przykładu:
for (var x=0; x<5; ) {
console.log("To jest przykładowe zdanie"); //wypisze sie 3
razy
x = x + 2;
}
var x = 3;
for (; x<5; x++) {
console.log("To jest przykładowe zdanie"); //wypisze sie 2
razy
}11
Pętla w pętli :-)
Czasami musimy wykonać zadania "n - wymiarowe". Dla przykładu przy wypisywaniu tabliczki
mnożenia musimy utworzyć 10 kolumn z 10 komórkami.
Pierwszy przykład pokazuje zagnieżdżenie pętli typu for w pętli typu while:
var i=1;
while (i<=10) {//rozpoczynamy pętlę typu while
var msg = '';
for (var x=0; x<i; x++) {
msg += '.' //dla każdej iteracji pętli while wykonujemy
pętlę typu for
}
console.log(msg); //po każdej iteracji pętli while wypisujemy
tekst
i++; //zwiększamy "i"
}
Rezultatem działania tego skryptu jest:
Zauważyłeś, że przy deklarowaniu pętli for pominęliśmy klamry? Jeżeli kod który ma się wykonać
n razy zajmuje tylko jedną linijkę, wówczas klamry nie są potrzebne (chociaż osobiście polecam je
stosować, gdyż czytelność skryptów wzrasta).
Przykład demonstrujący pętlę typu for w pętli for:
W kodzie html definiujemy tabelkę
<table id="tabelka"></table>
Następnie za pomocą JS tworzymy jej zawartość
var tab = document.getElementById('tabelka'); //pobieramy tablekę
for(var y=1; y<=10; y++) {
var tr = document.createElement('tr'); //tworzymy nowe tr
for (var x=1; x<=10; x++) {
var tekst = document.createTextNode(x*y); //tworzymy tekst
do wstawienia do komórki
if (y==1 || x==1) { //jeżeli jest to pierwsza komórka w
pionie lub poziomie
var th = document.createElement('th'); //to stwórz nowe
th
th.appendChild(tekst); //wstaw do niego tekst
tr.appendChild(th); //i th wstaw do tr
} else { //podobnie działaj jeżeli x lub != 0
var td = document.createElement('td');
td.appendChild(tekst);
tr.appendChild(td);
}
}
tab.appendChild(tr); //gotowe tr z komórkami wstaw do tabeli
}
Zasada działania powyższego skryptu jest bardzo prosta. Wykonujemy pętlę (y), w której za
każdym razem tworzymy nowy obiekt tr. Następnie wykonujemy pętlę w pętli (x). Za każdym
przebiegiem sprawdzamy czy zmienne x lub y są równe 1, co oznacza że jest to pierwsza komórka
w pionie lub poziomie. Jeżeli tak jest tworzymy th i wstawiamy je do tr. Jeżeli tak nie jest,
tworzymy td i postępujemy podobnie. Po utworzeniu tr wstawiamy je do tabelki.
1
2
3
4
5
6
7
8
9
10
2
4
6
8
10
12
14
16
18
20
3
6
9
12
15
18
21
24
27
30
4
8
12
16
20
24
28
32
36
40
5
10
15
20
25
30
35
40
45
50
6
12
18
24
30
36
42
48
54
60
7
14
21
28
35
42
49
56
63
70
8
16
24
32
40
48
56
64
72
80
9
18
27
36
45
54
63
72
81
90
10
20
30
40
50
60
70
80
90
100