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.