JAVASCRIPT Instrukcje warunkowe

Instrukcja warunkowa służy do ograniczenia wykonania jakiś czynności do momentu, kiedy spełnione zostaną podane warunki.

Podstawowa budowa instrukcji warunkowej:

if(warunek){
    instrukcje wykonywane, jeśli warunek zostanie spełniony;
}

Pełna budowa instrukcji warunkowej języka JavaScript:

if(warunek){
   instrukcje wykonywane, gdy warunek zostanie spełniony;
}else if(warunek2){
   instrukcje wykonywane, gdy warunek2 zostanie spełniony;
}else if(warunek...){
   instrukcje wykonywane, gdy warunek... zostanie spełniony;
}else{
   instrukcje wykonywane, gdy żaden z powyższych warunków nie był spełniony;
}

Co oznacza stwierdzenie, że warunek jest spełniony? Nic innego, jak to, iż jego wartość logiczna jest prawdą.

Jeśli zapytamy użytkownika, czy ma więcej jak 18 lat, to instrukcje zawarte wewnątrz bloku if zostaną wykonane tylko wtedy, gdy to będzie prawda.
Gdy mamy więcej jak jeden warunek, sprawdzane są one po kolei. Gdy którykolwiek jest spełniony, kolejne nie są już sprawdzane.

Zastanówmy się przez chwilę, kiedy warunek nie jest spełniony?

Dzieje się tak, gdy wartość logiczna warunku jest fałszem (false) czyli logicznym 0.

Oto lista wartości, które powodują brak spełnienia warunku:

• false
• 0
• null
• NaN
• undefined
• ”
• “”
• document.all

Każda inna wartość jest prawdziwa.

Sprawdźmy działanie instrukcji warunkowej na prostym przykładzie:

var wiek=18;

if(wiek >= 18){
   console.log("Mam do czynienia z osobą pełnoletnią");
}else{
   console.log("Nie dla psa kiełbasa.");
}

Wynikiem oczywiście będzie zawartość bloku if, czyli wypisanie na ekran potwierdzenia pełnoletności.

Przeanalizujmy kolejny przykład:

var a = 1, b=1, c=1;
if(a>5)
b++;
c++;

document.write(b+'<br>'+c);

1
2

Wypisujemy na ekran wartości zmiennych b oraz c. Początkowo obie te zmienne miały wartość 1, przy końcowym wypisaniu jedna z nich zmieniła wartość na 2. Dlaczego tylko jedna?

Ano dlatego, że bloku instrukcji if nie zamknęliśmy w klamry. Bez oznaczenia bloku instrukcji zasięgiem działania instrukcji warunkowej zostanie objęta tylko pierwsza instrukcja.
Wynika stąd, że zależna od wielkości a była tylko zmiana wartości zmiennej b. Jako, że a nie jest >5, instrukcja zwiększająca b o 1 nie wykonała się. Zwiększenie C jest już poza blokiem instrukcji warunkowej i wykona się zawsze.

Zmodyfikujmy powyższy przykład dodając klamry.

var a = 1, b=1, c=1;
if(a>5){
b++;
c++;
}
document.write(b+'<br />'+c);

1
1

Tym razem blok instrukcji obejmował zarówno zwiększenie zmiennej b oraz c. Warunek nie został spełniony. Wartości zmiennych pozostały bez zmian.

Prosty przykład pobrania od wartości wartości zmiennej całkowitoliczbowej i sprawdzenie czy jest ona parzysta czy nieparzysta.

var a = parseInt(prompt());
if(a%2==0) document.write('Liczba parzysta');
if(a%2!=0) document.write('Liczba nieparzysta');

prompt() – wyskakujące okienko z prośbą o wpisanie wartości przez użytkownika
parseInt() – zamiana wprowadzonej wartości na liczbę całkowitą
a%2 == 0 – sprawdzenie, czy reszta z dzielenia wartości zmiennej a przez 2 jest równe 0, jeśli tak, to mamy do czynienia z liczbą parzystą

Zawarte w powyższym przykładzie dwa bloki instrukcji warunkowych możemy zastąpić blokiem else (w przeciwnym razie).

var a = parseInt(prompt());
if(a%2==0) document.write('Liczba parzysta');
else document.write('Liczba nieparzysta');

Pozbyliśmy się jednego warunku, poprawiliśmy czytelność kodu, a else wykona się zawsze wtedy, kiedy warunek instrukcji warunkowej nie zostanie spełniony.

Przeanalizuj kolejny przykład. Tym razem sprawdzenie, czy liczba jest mniejsza, większa czy równa 0.

var a = parseInt(prompt('Podaj liczbę'));
if(a>0) document.write('Liczba większa od 0');
else if(a<0) document.write('Liczba mniejsza od 0');
else document.write('Liczba równa 0');

Kolejny przykład pokaże możliwość zagnieżdżania instrukcji warunkowych wewnątrz siebie:

var dzien = "wtorek";
var pora = "rano";

if(dzien == "wtorek"){
   if(pora == "rano"){
      console.log("Nareszcie!");
   }
}

Aby w konsoli wypisało się słowo nareszcie, muszą zostać spełnione jednocześnie dwa warunki: zmienna dzień musi mieć wartość wtorek oraz zmienna pora wartość rano.

Moglibyśmy to samo zawrzeć w jednej instrukcji warunkowej:

var dzien = "wtorek";
var pora = "rano";

if(dzien == "wtorek" && pora == "rano"){
   console.log("Nareszcie!");
}

Łączenia warunków możemy dokonać za pomocą dwóch symboli:

• warunek1 && warunek2 (i, logiczne mnożenie, and) oba warunki muszą zostać spełnione
• warunek1 || warunek2 (lub, suma logiczna, or) przynajmniej jeden warunek musi zostać spełniony

Instrukcja switch jest kolejnym sposobem testowania warunków:

var a = parseInt(prompt('Podaj liczbę'));

switch(a){
  case 1: 
    document.write('Wybrano opcję 1'); 
    break;
  case 2:
    document.write('Wybrano opcję 2'); 
    break;
  case 3: 
    document.write('Wybrano opcję 3'); 
    break;
  default: 
    document.write('Po co naciskasz nie to co powinieneś?!'); 
    break;
}

Wartość zmiennej a, będącej sprawdzaną przez instrukcję switch musi być liczba całkowitą. Na powyższym przykładzie każdy z przypadków (case) sprawdza czy zmienna a przyjmuje kolejno wartości 1, 2,3. Jeśli nie, zostanie wykonany blok domyślny (default). Instrukcje zamknięte w danym bloku case muszą zostać zakończone słówkiem break (przerwij).

Poniżej przedstawiam przykład wykorzystania instrukcji switch do samodzielnej analizy:

switch (new Date().getDay()) {
    case 0:
        dzien = "Niedziela";
        break;
    case 1:
        dzien = "Poniedziałek";
        break;
    case 2:
        dzien = "Wtorek";
        break;
    case 3:
        dzien = "Środa";
        break;
    case 4:
        dzien = "Czwartek";
        break;
    case 5:
        dzien = "Piątek";
        break;
    case 6:
        dzien = "Sobota";
}
document.write(dzien);

Na koniec słów kilka o operatorze warunkowym. Ma on następującą postać:

wyrażenie ? wartość_jeżeli_true : wartość_jeżeli_false

Jest to skrótowy zapis instrukcji warunkowej if. Gdy wyrażenie jest spełnione wykona się pierwsza instrukcja, jeżeli nie, druga.

Przykładowe zastosowanie operatora warunkowego:

var x = 1;
var y = (x > 0) ? "x jest dodatnie" : "x nie jest dodatnie"