Pętle w JavaScript
PĘTLE
Pętlę w programowaniu pozwalają nam wykonywać dany kod pewną ilość razy, np.:
!!! NARYSOWAĆ CHOINKĘ !!!
Przypuśćmy że dostaliśmy za zadanie wypisać na ekranie 5 razy jakieś zdanie. Możemy to zrobić za pomocą poniższego kodu:
?
1
2
3
4
5
6
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ć:
?
1
2
3
4
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:
?
1
2
3
4
5
6
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:
?
1
2
3
4
5
do {
...fragment kodu który będzie powtarzany...
}
while (wyrażenie)
?
1
2
3
4
5
6
7
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:
?
1
2
3
4
5
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:
?
1
2
3
4
5
6
7
8
for (var x=0; x<5; x++) {
console.log("To jest przykładowe zdanie");
}
for (var x=0, j=5; x
console.log("To jest przykładowe zdanie");
}
Nie musisz deklarować wszystkich trzech parametrów opisujących pętlę. Dla przykładu:
?
1
2
3
4
5
for (var x=0; x<5; ) {
console.log("To jest przykładowe zdanie"); //wypisze sie 3 razy
x = x + 2;
}
?
1
2
3
4
5
var x = 3;
for (; x<5; x++) {
console.log("To jest przykładowe zdanie"); //wypisze sie 2 razy
}
?
1
2
3
4
5