Kurs JavaScript - Pętla while  

Autor: Bożena Jurczyk

Opublikowano: 2011-12-19

Pętla for doskonale nadaje się w sytuacji, w której możesz określić, ile razy będzie ona wykonywana. W przypadku, kiedy chcesz powtarzać określony ciąg instrukcji tak długo, dopóki warunek zostanie spełniony, zastosuj pętlę while.

Przed wykonaniem zadań powinieneś wiedzieć:

• jak tworzyć strony internetowe,
• jak tworzyć funkcje w języku JavaScript

Po wykonaniu zadań nauczysz się:

• jak używać pętli while w języku JavaScript.

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, zapoznaj się z informacjami zawartymi w samouczku Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie sprawdzenie, jak działają pętle while w języku JavaScript.

Pętla while

Działanie pętli while jest bardzo podobne do pętli for.

1. Otwórz stronę internetową jTest.html, znajdź pole tekstowe i wpisz do niego liczbę 120.
2. Następnie wciśnij przycisk F12 lub wybierz Tools­>F12 developer tools.
3. W oknie, kliknij na zakładkę Script (oznaczoną 1 na Rys.1.), a w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.), wpisz:

function countNextFib(val){
    var res = 0;
    var elem1 = 0;
    var elem2 = 1;
    if(val == 0){
        res = 1;
    } else{
        while(res <= val){
            res = elem1+elem2;
            elem1 = elem2;
            elem2 = res;
        }
    }   
    return res;
}
var val = document.getElementById('mojTekst').value;
alert('Najmniejszym elemenetem ciągu Fibonnaciego, większym od ' + val + ' jest ' + countNextFib(val));

Rys. 1. Narzędzia programistyczne do JavaScript w Internet Explorer 9.

4. Wciśnij przycisk Run script.
5. Na stronie powinien pojawić się alert tak, jak Rys. 2.

Rys. 2. Alert informujący o wyniku obliczeń w pętli while.

Informacja

Funkcja countNextFibb(val) ma za zadanie wyznaczyć najmniejszy element z ciągu Fibonacciego, który jest większy od podanej przez użytkownika wartości. Wykorzystana została w tym celu pętla while, która wykonuje obliczenia, dopóki obliczony element jest mniejszy, bądź równy, zadanej wartości. Zwróć uwagę, iż istnieje możliwość, iż pętla while nie zostanie wykonana wcale.

Pętla do while

Pętla do while różni się od pętli while jedynie tym, iż istnieje pewność, że zostanie zawsze wykonana przynajmniej raz, niezależnie od zdefiniowanego warunku.

1. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.) wpisz:

function getAlphabet(){
    var char = 'a';
    var charCode;
    var alph = char;

    do {
        charCode = char.charCodeAt();
        charCode++;
        char = String.fromCharCode(charCode);
        alph += ' ' + char;
    } while(char != 'z');
    return alph;
}

document.getElementById('pokaz').innerHTML = 'Alfabet <br/>' + getAlphabet();

2. Wciśnij Enter.
3. W wyniku zastosowania tego kodu, na stronie zostanie wyświetlony alfabet.

 

Informacja

Użycie pętli do while umożliwia wyświetlenie całego alfabetu, łącznie z literą 'z', co byłoby niemożliwe przy tych samych warunkach w pętli while. Warto zapamiętać, że kod, zawarty w pętli do while, wykona się zawsze przynajmniej jeden raz, czyli inaczej mówiąc, inaczej niż w pętli while, najpierw zostaną wykonane instrukcje, dopiero po tym sprawdzony warunek.

Zagnieżdżenia pętli

Tak jak każda pętla, również pętla while, może być dowolnie zagnieżdżana.

1. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.) wpisz:

var elem = document.getElementById('pokaz'); 
var table = document.createElement('table');
var i = 0; 
while(i++ < 10 ) {
    var tr = document.createElement('tr'); 
    var j = 0;
    while(j++ < 10) {
        var text = document.createTextNode(i*j); 
        var td = document.createElement('td');
        td.appendChild(text);
        tr.appendChild(td);
   }
    table.appendChild(tr); 
}
elem.appendChild(table);

2. Wciśnij Enter.
3. W wyniku zastosowania tego kodu, na stronie zostanie wyświetlona tabelka z tabliczką mnożenia (Rys. 3.).

Rys. 3. Wynik zagnieżdżenia pętli while – tabliczka mnożenia.

Informacja

W przykładzie tworzony jest w pierwszej kolejności element tablicy, w której umieszczony zostanie wynik. Następnie tworzone są kolejne wiersze i komórki, do których wstawiasz obliczane wartości tabliczki mnożenia. Zewnętrzna pętla while odpowiada za tworzenie kolejnych wierszy, zaś wewnętrzna tworzy poszczególne komórki.

Podsumowanie

W tym samouczku nauczyłeś się, jak działa pętla while oraz do while. W kolejnym samouczku nauczysz się, jak komunikować się z użytkownikiem za pomocą skryptów – Komunikacja z użytkownikiem – pobieranie.

Dodatkowo zobacz:

• jak tworzyć funkcje w języku JavaScript.

 

---