Instrukcje warunkowe pozwalają na kierowanie przebeiegiem programu na podstawie warunków.

1. Instrukcja warunkowa if edytuj

Instrukcja warunkowa if sprawdza warunek podany w ( ) i w zależności co on zwróci true czy false zostaje wykonany odpowiedni blok kodu.

Tak to wygląda w praktyce:

if( warunek ){ 
    // wykonaj ten blok kody jeżeli
    // warunek wynosi true
}
else{
    // w innym wypadku wykonaj
    // ten blok kodu
}

1.1 Rozbudowanie intrukcji o dodatkowy warunek edytuj

Jeżeli potrzebujemy rozbudować naszą instrukcję o dodatkowe warunki możemy użyć dyrektywy else if która sprawdza warunek podany w ( ) zupełnie jak if.

Przykład:

if( warunek1 ){
    // jeśli warnuke jest prawdziwy
    // wykonaj ten blok kodu
}else if( warunek2 ){
    // jeśli warunek1 zwrócił false
    // sprawdź warunek2 jeżeli zwróci
    // true to wyknaj ten blok kodu
}else{
    // jeżeli żaden warunek nie zostanie
    // spełniony wykonaj ten blok kodu
}

1.2 Rozbudowane warunki edytuj

Wyobraź sobie sytuację, że potrzebujesz sprawdzić czy liczba x jest równa liczbie y i liczbie z. Mógłbyś zagnieździć instrukcje warunkową sprawdzającą czy x == y a w niej inną instrukcji warunkową sprawdzającą czy x == z ale jest na to znacznie łatwiejszy sposób z wykorzystaniem operatorów logicznych.

Przykład:

// Zły sposób
if( x == y){
    if(x == z){
        // jakieś instrukcje
    }
}


// Dobry sposób
if( x == y && x == z){
    // jakieś instrukcje
}

Operatory logiczne zostały opisane w poprzedniej lekcji JavaScript/Operatory#Operatory logiczne

1.2.1 Użycie AND edytuj
var x = 10;
var y = 20;
var z = 15;

// Instrukcja sprawdza czy liczba z jest mniejsza od
// liczby y ale jednocześnie większa od liczby x
if( z < y  && z > x){
    // jakieś instrukcje
}

Warunek zostanie spełniony tylko wtedy gdy z jest mniejsze niż y i z jest większe od x. W przypadku gdyby z było większe niż y warunek nie zostanie spełniony.

1.2.2 Użycie OR edytuj
var x = 10;
var y = 20;
var z = 15;

// instrukcja sprawdza czy z jest większe
// od x lub większe od y
if( z > y  || z > x){
    // jakieś instrukcje
}

Warunek zwróci true tylko wtedy gdy z będzie większe niż y lub z będzie większe niż x.

1.3. Ćwiczenie kontrolne edytuj

Napisz prosty program sprawdzający czy użytkownik jest pełnoletni oraz czy może zostać prezydentem (musi mieć min. 35 lata)

1.3.1 Rozwiązanie edytuj
var age = 17;

if(age < 18){
    console.log('Jesteś niepełnoletni i nie możesz zostać prezydentem.');
}
else if(age >= 18 && age < 35){
    console.log('Jesteś pełnoletni ale nie masz ukończonych 35 lat');
}
else{
    console.log('Jesteś pełnoletni i możesz zostać prezydentem');
}

2. Instrukcja warunkowa switch edytuj

Za pomocą instrukcji warunkowej switch, możesz, w zależności od wartości pewnej zmiennej, wykonywać poszczególne bloki kodu.

switch(zmienna)
{
    case 1:
        // wykonaj ten kod
        // gdy zmienna = 1
        break;
    case 2:
        // wykonaj ten kod
        // gdy zmienna = 2
        break;
    default:
        // ten blok wykona się
        // gdy wartość zmiennej
        // nie pasuje do powyższych
}

Oczywicie wartośćć zmiennej zmienna nie musi być typu number może być typu string, wówczas wartość zmiennej podajemy w cudzysłowiu (" ") Przykład:

var name = "Ala";

switch(name)
{
    case "Ala":
        console.log('Ala ma kota');
        break;
    case "Basia":
        console.log('Basia ma psa');
        break;
    default:
        console.log(`${name} nie ma zwierzątka`);
}

Pewnie zastanawiasz się dlaczego na końcu każdego bloku kodu znajduje się dyrektywa break. Wbrew pozorą instrukcja break jest tutaj bardzo ważna ponieważ powiadamia ona przeglądarkę interpretującą nasz kod, że wraz z tym słowem kończy się blok kodu należący do case. Gdby jednak słówka break nie było na końcu każdego bloku to wszystko poniżej wybranego casea zostałoby wykonane.

W tym przypadku program wykonałby wszystkie intrukcje console.log() począwszy od case "Ala" ponieważ taka jest zawartość naszej zmiennej.