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:
document.write("To jest 1 przykładowe zdanie. ");
document.write("To jest 2 przykładowe zdanie. ");
document.write("To jest 3 przykładowe zdanie. ");
document.write("To jest 4 przykładowe zdanie. ");
document.write("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.
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ść walse:
var x=1;
while (x<=5) {
document.write("[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).
Podonym 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 {
document.write("[przykładowy tekst] ");
x++;
}
while (x<2)
Kolejnym rodzajem pętli jest pętla typu for. W zasadzie jest to najczęśćiej 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++) {
document.write("To jest przykładowe zdanie<br />");
}
for (var x=0; j=5; x<j; x++) {
document.write("To jest przykładowe zdanie<br />");
}
Nie musisz deklarować wszystkich trzech parametrów opisujących pętlę. Dla przykładu:
for (var x=0; x<5; ) {
document.write("To jest przykładowe zdanie<br />"); //wypisze sie 3 razy
x = x + 2;
}
var x = 3;
for (; x<5; x++) {
document.write("To jest przykładowe zdanie<br />"); //wypisze sie 2 razy
}
<script type="text/javascript">
for (var x=0; x<10; ) {
document.write("Ta petla wykonała się " +(++x)+ " razy<br />"); //wypisze sie 10 razy razy
}
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
for (var x=0; x<i; x++) {
document.write(x) //dla każdej iteracji pętli while wykonujemy pętlę typu for wypisując wartosć x
}
document.write("<br />"); //po każdej iteracji pętli while wypisujemy <br />
i++; //zwiększamy i (dla pętli while)
}
Rezultatem działania tego skryptu jest:
Zauważyłeś, że przy deklarowaniu pętli for pomineliś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 tableke
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 komorki
if (y==1 || x==1) { //jeżeli jest to pierwsza komórka w pionie lub poziomie
var th = document.createElement('th'); //to stworz 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.
Nie zawsze wiemy ile dany obiekt ma elementów, i ile razy nasza pętla się wykona.
Przypuśćmy, że mamy tablicę. Gdy sami ją utworzymy na sztywno, wówczas jej długość length jest nam znana. Jednak częściej przyjdzie nam pracować na tablicach których długości nie znamy:
var tablica = new Array();
...tutaj zmieniamy długość tablicy...
for (x=0; x<tablica.length; x++) {
tablica[x] = ....
}
Ta sama zasada tyczy się przy pracy z kolekcjami obiektów, które nota bene też są pobierane w postaci tablicy:
var paragrafy = document.getElementsByTagName('p'); //pobieramy wszystkie paragrafy z dokumentu
for (x=0; x<paragrafy.length/2; x++) {
paragrafy[x].className = 'nowaKlasa' //połowie paragrafów ustawiamy nową klasę styli
}
//lub jeszcze lepiej
for (x=0; k=paragrafy.length/2; x<k; x++) {
paragrafy[x].className = 'nowaKlasa' //połowie paragrafów ustawiamy nową klasę styli
}
O drugim przypadku z powyższego skryptu możesz przeczytać tutaj
Kolejną bardzo pomocną instrukcją jest in, która pozwala wykonać dany kod dla każdej składowej danego obiektu (podobne działanie ma funkcja foreach w php):
var t = ['pierwszy', 'drugi', 'trzeci'];
t[1000] = 'dwudziesty';
for (var obj in a){
document.write(a[obj]); //dzięki temu pętla wykona się 4 razy a nie 1000
}
for (var obj in window) {
document.write( 'window.'+obj +' =>'+ window[obj] +'<br/>' ); //wypisze wszystkie składowe obiektu window
}