JavaScript/Instrukcje

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

1. Instrukcja warunkowa if

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

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

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

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

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

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

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

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.