Kurs obiektowego JavaScript (8)

Autor: Damian Chodorek • Opublikowany: 27 września 2014 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: javascript, kursy

Bloki warunkowe oraz pętle w JS.

Bloki warunkowe to prosty, ale bardzo potężny sposób kontrolowania przepływu wykonywania programu. Z kolei pętle umożliwiają powtarzanie wielu operacji przy użyciu małej ilości kodu. W JS występuje:

  • warunek if,
  • konstrukcja switch,
  • pętle while, do while, for in.

Czym jest blok kodu?

Konstrukcja blokowa jest często wykorzystywana razem z poznanymi warunkami i pętlami. Zawiera zero lub więcej wyrażeń zawartych pomiędzy nawiasami {}.

{
  var a=1;
  var b=2;
}

Bloki kodu można zagnieżdżać.

{
  var a=1;
  {
    var b=2;
    {
      var c=3;
    }
  }
}

Kilka uwag:

  • pomimo, iż znak ; jest opcjonalny, warto używać go dla lepszej czytelności kodu,
  • aby wyróżnić poziom zagnieżdżenia wyrażeń, korzysta się z białych znaków jak wiele spacji czy tabulacji, nie ma to znaczenia, ale należy być konsystentnym i używać wszędzie tej samej metody,
  • warto często używać nawiasów {}, są one opcjonalne, ale poprawiają czytelność kodu.

Warunek if

var wynik="";
if (x > 2){
  wynik="zmienna x jest większa niż 2";
}

Jak więc widzisz, powyższa konstrukcja jest taka jak w innych językach programowania. Jeśli wyrażenie x > 2 zwróci wartość true,zostanie wykonany blok kodu następujący po warunku.

var wynik="";
if (x > 2){
  wynik="zmienna x jest większa niż 2";
} else{
  wynik="zmienna x jest mniejsza równa 2";
}

W powyższym przypadku znajdują się dwa alternatywne bloki kodu. Gdy warunek zwróci true, wykonany zostanie pierwszy, jeśli false, drugi. Można jeszcze bardziej urozmaicić kod.

var wynik="";
if (x > 2){
  wynik="zmienna x jest większa niż 2";
} else if (x > 1){
  wynik="zmienna x jest większa niż 1, ale mniejsza niż 2";
} else{
  wynik="zmienna x jest mniejsza niż 1;
}

W tym przypadku jeśli zostanie spełniony warunek x>2, wykonany zostanie pierwszy blok kodu, jeśli nie, to zostanie sprawdzony warunek x>1. Jeżeli jego wynikiem będzie true, to wykonany będzie drugi blok kodu. W przeciwnym wypadku wykona się trzeci.

Czasem przydaje się sprawdzenie, czy dana zmienna została poprawnie stworzona. Robi się to tak:

var wynik="";
if (typeof x !== "undefined"){
  wynik="zmienna x istnieje";
}

Dla przypomnienia: jeśli zmienna nie istnieje lub nie została zainicjalizowana, to JS przypisze jej wartość undefined.

Skrócony warunek if

Poniżej zapisano wyrażenie if oraz jego skrócony zapis. Obydwa wyrażenia są równoważne.

var wynik="";

//długi zapis
if (x > 2){
  wynik="zmienna x jest większa niż 2";
} else{
  wynik="zmienna x jest mniejsza równa 2";
}

//skrócony zapis
wynik= (x>2) ? "zmienna x jest większa niż 2" : "zmienna x jest mniejsza równa 2";

Konstrukcja switch

Przydaje się w momencie gdy dany if zawiera dużo fragmentów else if.

var a='1';
switch (a){
  case 1:
    wynik="Number 1";
    break;
  case '1':
    wynik="String 1";
    break;
  default:
    wynik="nie wiadomo"
    break;
}
wynik; //String 1

Każde wyrażenie po słówku case będzie porównane z wyrażeniem po słówku switch. Jeśli zajdzie równość, zostanie wykonany cały kod występujący po dwukropku. Dlatego potrzebne jest słówko break. Ono sprawia, że wykonany zostanie kod dotyczący danego case. Jego zadaniem jest wyjście z konstrukcji switch. Gdyby nie było break, to wykonany zostałby kod do momentu napotkania jakiegoś break, albo do wyjścia ze switch.

default to część, która zostanie wykonana jeśli dla żadnego case nie został spełniony warunek porównania. default powinno znaleźć się po wszystkich wystąpieniach case.

Pętle

Pętla służy do wykonania danego bloku kodu wielokrotnie. Pierwszą pętlą, którą omówię będzie while. Wykonuje kod bloku do momentu niespełnienia warunku.

var i=0;
while (i < 10){ //słówko kluczowe while oraz warunek działania pętli
  ++i;          //blok kodu, który ma się powtarzać
}

Wykonanie pętli przedstawiono poniżej.

  1. Sprawdzony zostanie warunek i<10.
  2. Jeżeli zwróci true, wykonane zostanie ciało pętli.
  3. Powrót do punktu 1.

Podobnie działa pętla do while.

var i=0;
do{
  ++i;
} while(i < 10)

Wykonanie pętli przedstawiono poniżej.

  1. Wykonane zostanie ciało pętli.
  2. Sprawdzony zostanie warunek i<10.
  3. Jeżeli zwróci true, wykonane zostanie ciało pętli.
  4. Powrót do punktu 2.

Jak więc widzisz, w tym wypadku pętla wykona się zawsze przynajmniej raz. W przypadku zwykłego while nie musi tak być.

Pętla for jest odrobinę inna.

var kropki="";
for (var i=0; i<100; ++i){
  kropki+=".";
}

Powyższy kod wyprodukuje ciąg 100 kropek. Pętla składa się z 3 wyrażeń, rozdzielonych znakiem ;. Wykonanie pętli przedstawiono poniżej.

  1. Wykonane zostanie pierwsze polecenie var i=0.
  2. Sprawdzony będzie warunek pętli i<100.
  3. Jeśli będzie on prawdziwy, wykonane zostanie ciało pętli.
  4. Wykonany zostanie trzecie wyrażenie ++i.
  5. Powrót do punktu 2.

Wyrażenia pętli mogą być puste, co daje pętle wykonującą się w nieskończoność.

var kropki="";
for (;;){
  kropki+=".";
} //taki kod nigdy się nie skończy, spowoduje "zawieszenie się" skryptu

Pętla for in służy do przechodzenia (iteracji) po kolejnych elementach tablicy.

var a=["a", "b", "c", "d"];
var wynik="";
for (var i in a){
  wynik+="indeks: "+i+", wartosc: "+a[i]+"\n";
}

Do zmiennej i, w każdym obiegu pętli zostanie przypisany indeks kolejnego elementu tablicy.

W tym artykule to wszystko. Przejdź do następnej części:

Kurs obiektowego JavaScript (9)

Zobacz również
Kurs obiektowego JavaScript (6)Opis typu Boolean. Wartości fałszywe i operatory logiczne.
Kurs obiektowego JavaScript (7)Podstawowe informacje o tablicach.
Kurs obiektowego JavaScript (9)Komentowanie kodu i tworzenie dokumentacji.
Kurs obiektowego JavaScript (10)Omówienie funkcji, sposobów przekazywania parametrów oraz kilku przydatnych funkcji wbudowanych.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.