Kursy

Pętle

Pętle

Pętla umożliwia powtarzanie wybranych czynności (instrukcji) określoną liczbę razy. Chciałbym zwrócić uwagę na to, że wykorzystanie pętli bardzo ułatwia pracę i tworzenie w miarę zaawansowanych skryptów. Pętle pozwalają także uczynić nasz kod bardziej przejrzystym i czytelnym.

Wyróżniamy trzy rodzaje pętli:
- for - "dla"
- while - "dopóki"
- do... while - "powtarzaj dokópki"

Pętle te różnią się głównie ich przeznaczeniem. Wszystko zależy od warunków i celu jaki chcemy osiągnąć używając poszczególnej pętli. Oczywiście wszystko okaże się w praktyce i bez problemu będziecie mogli wykorzystać poszczególną pętlę.

Pętla FOR
Jest ona bardzo łatwa w użyciu. Jest to pętla licznikowa co oznacza, że wykorzystuje ona pewną zmienną, której wartość na początku zazwyczaj równa jest zero. Wykonywanie pętli kończy się, gdy spełniony zostaje określony warunek. Najlepiej wytłumaczyć działanie pętli na schemacie:

for (ustawienie_licznika; warunek_kończący_pętlę; modyfikacja_licznika)
{
instrukcje które ma wykonać pętla
}



Gdy zostanie osiągnięty warunek_kończący_pętlę to jej wykonanie zostanie wstrzymane.
Dla przykładu stworzymy pętlę która wypisze nam liczby od 0 do 10.

for(i=0; i<=10; i++)
{
document.write(i+"
")
}



Przyjrzyjmy się teraz pierwszej linii skryptu - tej która definiuje pętle. Na początku ustawiamy licznik na wartość 0 (i=0), następnie ustalamy, że pętla zakończy się gdy nasz licznik "dojedzie" do dziesięciu (i<=10). Na końcu określamy w jaki sposób ma być zmieniana wartość licznika. W naszym wypadku jest to i++ co oznacza, że wartość zwiększa się o jeden. W praktyce oznacza to, że wypisywana wartość pętli zaczyna się od zera i jest zwiększana o jeden aż osiągnie liczbę 10. Zapis document.write(i+"< br>") oznacza, że pętla będzie wypisywała po kolei wartości a po każdej z nich będzie umieszczony znacznik
przechodzący do nowej linii.

Pętla FOR... IN
Jest ona bardzo podobna do tej opisanej wyżej. Różnica polega na tym, że została przystosowana do opisywania właściwości wybranego obiektu co pozwala na wygodne odwoływanie się do poszczególnych właściwości.

for (zmienna in obiekt)
{
instrukcje
}



Dla przykładu wypiszemy wszystkie właściwości obiektu document:

for (i in document)
{
document.write(i+"<br>")


}

W tym przykładzie naszą zmienną jest "i" dzięki której wypisujemy wszystkie właściwości elementu document. Pętla ta jest bardzo użyteczna jeżeli bliżej poznasz JavaScript i będzie Ci zależało na poznaniu konkretnych właściwości poszczególnych elementów.

Pętla WHILE
Pętla while jest podstawową pętlą warunkową. Warunek jest sprawdzany zawsze na początku pętli i gdy jest on spełniony pętla wywołuje instrukcje. Oto podstawowy schemat:

while (warunek)
{
instrukcje
}



Funkcja ta powoduje cykliczne wykonywanie instrukcji tak długo, jak długo spełniony jest warunek. Pętla ta jest bardzo łatwa a zastosowanie bardzo różnorodne. Powiedzmy, że jeżeli chcemy aby pętla cały czas się powtarzała tak długo aż zmienna "z" będzie mniejsza od 20 to piszemy:

var z = 3; while (z < 20) //w tym wypadku zmienną z jest liczba 3
{
document.write("Liczba z jest mniejsza od dwudziestu")
}



Zmienna "z" jest mniejsza od 20 dlatego warunek pętli jest cały czas spełniony (3 < 20). Przez to pętla w nieskończoność będzie wypisywała "Liczba z jest mniejsza od dwudziestu" :-)

Istnieje jeszcze pętla DO... WHILE . Jest to także pętla warunkowa, która różni się tylko tym od poprzedniej (while), że warunek sprawdzany jest dopiero na końcu pętli.

do
{
instrukcje
}
while (warunek)



Na przykład:

z=0
Do
{
z+=1
document.write (z+"<br>")
}
while (z<5)



Najpierw zostaje wykonana instrukcja która zwiększa zmienną o jeden. Będzie ona wywoływana tak długo, jak długo zmienna "z" będzie mniejsza od liczby 5 i jeżeli końcowy warunek jest spełniony to znów trafiamy na początek gdzie najpierw wywołana jest instrukcja a dopiero potem sprawdzany jest warunek. Dlatego zamiast wyświetlić liczby 0,1,2,3,4 pętla wyświetli 0,1,2,3,4,5

Break i Continue
To już nie są pętle a jedynie instrukcje języka JavaScript które można wykorzystać w pisaniu pętli. Instrukcja break powoduje przerwanie wykonywanej pętli i przejście do pierwszego polecenia znajdującego się po niej. Natomiast instrukcja continue pozwala przerwać wykonywanie pętli i przejść na jej początek. W tym wypadku instrukcje umieszczone po instrukcji continue nie są już wykonywane.
Należy zauważyć, że obie instrukcje działają tylko i wyłącznie z pętlami for i while.

To tyle jeżeli chodzi o pętle w JavaScript. Mam nadzieję, że przedstawiłem sprawę w wystarczający sposób aby zacząć wykorzystywać je w praktyce. Jeżeli macie jakieś pytanie to zapraszam na forum.