10. Pętla for

Pętla for jest chyba najczęściej stosowaną pętlą w JS.

Składnia pętli for:

for(inicjalizacja; warunek_wyjścia; wyrażenie_modyfikujące){
	wykowywane intrukcje;
}

Opis poszczególnych elementów:

  • inicjalizacja – instrukcja wykonywana tylko raz na samym początku pętli. Zwykle używa się jej do przypisania wartości początkowej do zmiennej, która np. będzie zwiększana po każdym obiegu pętli. Zmienna taka zwykle nazywana jest licznikiem pętli
  • warunek_wyjścia – dowolny warunek, który będzie sprawdzany przed każdym obiegiem pętli, także tym pierwszym. W momencie, gdy warunek zwróci false wykonywanie pętli zostanie przerwane,
  • wyrażenie_modyfikujące – instrukcja, która będzie wykonywana po każdym obiegu pętli. Zwykle jej zadaniem jest zwiększenie wartości zmiennej pełniącej rolę licznika pętli.

Przykład pętli for, która wypisze kolejne cyfry od 0 do 9

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

Każdy z trzech elementów znajdujących się wewnątrz okrągłych nawiasów pętli for może być bardziej skomplikowanym wyrażeniem, np.:

for (n = inicjuj(); czy_kontynuowac(n); n = wylicz_nastepny(n))
    wykonaj_fukcje(n);

Można również napisać pętlę, która posiada kilka liczników lub inaczej mówiąc wykonuje kilka instrukcji. Można to zrobić w częściach inicjalizacja i wyrażenie_modyfikujące, poprzez rozdzielenie wyrażeń za pomocą przecinka. Aby zrobić coś takiego w części warunek_wyjścia należy zastosować operatory logiczne

for(i = 0, j = 1; i < 10; ++i, j+=4)
	document.write(i + j);

Pętle można zagnieżdżać. Przykład wypisze wszystkie iloczyny liczb od 0 do 9

for (i = 0; i < 10; ++i)
	for (j=0; j < 10; ++j)
		document.write(i * j);

Wszystkie elementy pętli for, czyli inicjalizacja, warunek_wyjścia i wyrażenie_modyfikujące są opcjonalne i można je pominąć. Należy jednak pozostawić średniki. Przykład pętli poniżej jest prawidłowy:

for( ; ; )
	document.write(":D");

Jest to tak zwana pętla nieskończona. Będzie się ona wykonywać w nieskończoność, albo do zamknięcia okna, karty przeglądarki. Rzadko się stosuje taki rodzaj pętli. Nowoczesne przeglądarki posiadają zabezpieczenie przed długo działającymi skryptami i po jakimś czasie zadają pytanie czy przerwać skrypt.

Takie pętle jak pisałem wcześniej rzadko się stosuje, ale nadal z takiej pętli można wyjść „od środka”. Pętla sama się nie zakończy ale możemy ją przerwać stosując instrukcję break. Kolejny przykład pokazuje jej użycie. Zauważcie, że w pętli nie ma części warunku_wyjścia.

for(i = 0; ; ++i){
	if (i == 10)
		break;
	document.write( i );
}

Pętla powyżej zakończy się w chwili jak zmienna i osiągnie wartość 10. Inne instrukcje, które powodują wyjście z pętli to return (powrót z funkcji) i throw (rzucenie wyjątku).

Kolejną instrukcją, którą należy znać to continue. Wykonanie tej instrukcji powoduje, że pętla od razu wykonuje część wyrażenie_modyfikujące i rozpoczyna kolejną iterację, czyli przejście. W ten sposób można na przykład wyświetlić tylko liczby parzyste.

for (i = 0; i < 100; ++i){
	if (i % 2 != 0)
		continue;
	document.write( i )
}

Pętla for/in. Pętla ta służy do łatwego wyliczania kolejnych elementów tablic i właściwości obiektów. Składnia:

for (zmienna in tablica_lub_obiekt){
	instrukcja_1;
	instrukcja_2;
}

Przykład wypisania zawartości tablicy przy użyciu pętli for/in:

tablica = Array( 'a', 'b', 'c', 'd' );
for (n in tablica)
{
    document.write(tablica[n]);
}

Zadania. Przy użyciu instrukcji document.write("#") i pętli wyświetlić w przeglądarce:

  • linię składającą się z ośmiu znaków #:
    ########
  • trójkąt o dolnej podstawie pięciu #:
    #
    ##
    ###
    ####
    #####
    
  • prostokąt zbudowany ze znaków # o wymiarach 3 x 7:
    #######
    #######
    #######
    
  • odwróconą choinkę ze znaków # o górnej podstawie 9
    #########
     #######
      #####
       ###
        #
    
  • choinkę ze znaków # o podstawie 9
        #
       ###
      #####
     #######
    #########
    

Zadanie: zrobić tabliczkę mnożenia używając tabeli w HTML

1

2

3

4

5

6

7

8

9

10

2

4

6

8

10

12

14

16

18

20

3

6

9

12

15

18

21

24

27

30

4

8

12

16

20

24

28

32

36

40

5

10

15

20

25

30

35

40

45

50

6

12

18

24

30

36

42

48

54

60

7

14

21

28

35

42

49

56

63

70

8

16

24

32

40

48

56

64

72

80

9

18

27

36

45

54

63

72

81

90

10

20

30

40

50

60

70

80

90

100