Kurs JavaScript - Pętla for  

Autor: Bożena Jurczyk

Opublikowano: 2011-12-16

W trakcie wykonywania zadań, we wcześniejszych odcinkach kursu, kilka razy wykorzystywane były pętle. Umożliwiają one powtórzenie pewnego kodu, bez potrzeby jego wielokrotnego przepisywania. Z pewnością tak napisany skrypt jest bardziej czytelny i znacznie prostszy w edytowaniu. Istnieje kilka pętli w języku JavaScript. W tym samouczku zostaną opisane możliwości pętli for.

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 for 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ła pętla for w języku JavaScript.

Pętla for – liczenie silni

Pętla for jest najprostszym sposobem wykonania zbioru instrukcji w ciele pętli, jest ona określona z góry iloczynem liczby. Ten sposób idealnie sprawdza się w różnego rodzaju funkcjach matematycznych.

1. Otwórz stronę internetową jTest.html, znajdź pole tekstowe i wpisz liczbę 6.
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 countFactorial(val){    
    if(val == 0){
        return 1;
    }
    var fact = 1;
    for(var i = 1; i <= val; i++){
        fact *= i;
    }
    return fact;
}

var val = document.getElementById('mojTekst').value;
if(val>0){
    alert('Silnia z '+ val + ' to: ' + countFactorial(val));
}else{
    alert('Podana wartość nie jest liczbą dodatnią');
}

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

4. Wciśnij Run Script.
5. Na stronie powinien pojawić się alert (Rys. 2.).

Rys. 2. Alert informujący o wyniku obliczeń.

Informacja

Pętla for wymaga podania trzech wyrażeń, wewnątrz nawiasów okrągłych. Są to: inicjalizacja (var i = 0), test logiczny (i <= val) oraz inkrementacja (i++). Dzięki temu pętla będzie wykonywana dopóty, dopóki spełniony będzie warunek w teście logicznym. Jeśli masz podaną wartość początkową zmiennej iterującej, oraz jeśli znasz krok inkrementacji, możesz dokładnie określić liczbę wykonań pętli. Nic nie stoi na przeszkodzie, aby utworzyć więcej niż jedną zmienną, pełniącą rolę licznika pętli. W takim przypadku zmienne wymieniane są po przecinku.

Continue oraz break

Instrukcja continue powoduje przerwanie normalnego toku instrukcji w pętli i uruchomienie od następnej wartości licznika pętli. Instrukcja break również powoduje wyjście z pętli.

1. Otwórz stronę jTest.hmtl, następnie, w polu tekstowym, wpisz liczbę określającą Twój wiek.
2. Otwórz okno narzędzi programistycznych przeglądarki Internet Explorer, w prawym dolnym rogu (oznaczonym 2 na Rys. 1.) wpisz:

function getBirthYear(val){        
    var age;
    var year;
    for(var i = 3; i > 0; i--) {
        age = prompt('Podaj swój wiek: ', val);
        if(!(age>0)){
            continue;
        }
        year = new Date().getFullYear() - age;
        break;
    }
    return year;
}

var val = document.getElementById('mojTekst').value;
var year = getBirthYear(val);
if(year == null){
    year = 'nieokreslony';
}
alert('Twój rok urodzenia to: ' + year);

1. Wciśnij przycisk Run Script.
2. W wyniku powinno pojawić się okno modalne, maksymalnie trzy razy, z prośbą o podanie wieku (Rys. 3.).

Rys. 3. Okno modalne z prośbą o podanie wieku.

Następnie zostanie wyświetlony alert z informacją o roku urodzenia (Rys. 4.).

Rys. 4. Alert z informacją o roku urodzenia.

Informacja

Funkcja getBirthYear(val) działa w następujący sposób: w pętli wyświetlana jest informacja z prośbą o podanie wieku użytkownika. Jeżeli podana zostanie liczba dodatnia, pętla kończy się wcześniej (użycie instrukcji break), a użytkownikowi zostanie wyświetlony alert z informacją o roku urodzenia. Jeżeli wprowadzoną wartością nie będzie liczba dodatnia, okno wyświetli się ponownie (użycie instrukcji continue), w sumie może się wyświetlić trzy razy.

Pętla for in – Iterowanie po tablicy

Kolejnym rodzajem pętli w języku JavaScript jest pętla for in. Idealnie nadaje się ona do iterowania po tablicach i obiektach, ponieważ pozwala wykonać dany kod dla każdej składowej tego obiektu, czy elementu tablicy.

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

function arrayToString(arr){   
    var text = 'Elementy tablicy: ';    
    for(var elem in arr){
        text += arr[elem].toUpperCase() + ' ';
    }
    return text;
}

var elem = document.getElementById('pokaz');
var array = ['jeden', 'dwa', 'trzy', 'cztery', 'pięć', 'sześć'];
elem.innerHTML = arrayToString(array);

2. Wciśnij Enter.
3. Wynik powinien pojawić się na początku strony tak, jak na Rys. 5.

Rys. 5. Wynik iteracji po elementach tablicy.

Informacja

Pętla for in wymaga podania tablicy lub obiektu, po którym nastąpi iteracja. Należy pamiętać, iż wykorzystywane są w tym celu klucze tablicy, a nie same obiekty. Funkcja arrayToString(arr), przechodzi po wszystkich elementach tablicy arr, dopisując do zmiennej text ich wartości, zmodyfikowane poprzez zamianę wszystkich liter na duże.

Iteracja po obiekcie

Kolejnym częstym przeznaczeniem pętli for in jest iteracja po obiektach.

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

function objectToString(obj){  
    var text = '';
    for (var key in obj){
        if(obj[key] != null && obj[key] != 'undefined'){
            text += ( obj.nodeName+'.'+key +': '+ obj.key +'<br/>' );
        }
    }
    return text;
}

var elem = document.getElementById('pokaz');
elem.innerHTML = objectToString(document);

2. Wciśnij Enter.
3. W wyniku zostaną wyświetlone wszystkie wartości obiektu predefiniowanego w języku JavaScript document:

Rys. 6. Wynik iteracji po obiekcie.

Informacja

Funkcja objectToString(obj) ma za zadanie pobrać wszystkie składowe obiektu, podanego jako parametr funkcji. W wyniku wyświetlane są nazwy wszystkich kluczy oraz wartości tych składowych. Dodatkowo jest to dodawane do wyniku tylko wtedy, kiedy wartość nie jest null i jest zdefiniowana.

Podsumowanie

W tym samouczku nauczyłeś się, jak działają pętle for w języku JavaScript. Poznałeś także instrukcje, umożliwiające sterowanie ponownym wykonaniem się pętli, bądź jej wcześniejszym zakończeniem. Dowiedziałeś się również, że masz możliwość iteracji po tablicach i obiektach za pomocą pętli for-in, dzięki czemu nie znając ich rozmiaru, ani też wartości kluczy, możesz dostać się do każdego elementu składowego i wykonać na nim potrzebne operacje.

W kolejnym artykule nauczysz się, jak używać pętli while w języku JavaScript.

 

---