Jason. Cała informatyka w jednym miejscu!

Przechodzimy do ważniejszego tematu! W języku JavaScript możecie znaleźć taką konstrukcję co się zwie "instrukcja warunkowa". Ona umożliwia programowanie wielu ścieżek przebiegu programu. To nie jest nic strasznego, jednak gorąco zachęcam do przestudiowania całego materiału, a następnie samodzielnego poćwiczenia sobie konstruowania różnych warunków, aby to weszło w krew. To jest ABSOLUTNY fundament, żeby zaprogramować cokolwiek sensownego i ciekawszego od wypisywania komunikatów na konsolę. Czy jesteście gotowi?

INSTRUKCJA WARUNKOWA W JĘZYKU JAVASCRIPT ZWIE SIĘ "IF"

Głównym słowem kluczowym jakie będzie rozprzestrzenione po całym artykule jest "if". "if" to jest angielskie "jeśli" / "jeżeli" i ono służy do budowania różnych ścieżek jakimi może "pójść" interpreter i móc wykonać za każdym razem inne instrukcje. Pozwolę zostawić odnośnik do artykułu, w którym tłumaczone są instrukcje warunkowe bardziej ogólnie.

Opiszmy to sobie teoretycznie. Musicie wybrać się do sklepu, aby zrobić zakupy na obiad. Od domu do sklepu jest jakieś 20 minut piechotą. Na szczęście dysponujecie samochodem którym możecie szybciej dojechać do celu. I teraz pojawia się pytanie mające wpływ na dalszy ciąg. Czy dysponujecie prawem jazdy? Jeśli tak, to wsiadacie do samochodu i jedziecie na zakupy. Jeśli odpowiedź brzmi "nie", to trzeba iść z buta. W pseudokodzie wyglądałoby to tak (pseudokod to "słowny" zapis działania algorytmu lub przebiegu programu omijający dowolne terminologie programistyczne):

Czy posiadam prawo jazdy?

  • TAK
    • wsiądź do samochodu i pojedź do sklepu
    • zrób zakupy
    • zapakuj zakupy do bagażnika
    • wróć do domu
  • NIE
    • idź do sklepu na piechotę
    • zrób zakupy
    • wróć do domu i przytargaj samemu torby z zakupami

Łapiecie już to rozgałęzienie zdarzeń? Tym się zajmuje instrukcja warunkowa w języku JavaScript! Kiedy zależy nam na tym, aby w pewnym miejscu aplikacja musiała wybrać którą drogą podążyć, programujemy warunek który będzie ostatecznie wpływał na decyzję i ciąg wykonywanych instrukcji.

O TYM SAMYM, TYLKO NIECO PROGRAMISTYCZNIE

To jeszcze raz od początku. Pierwsze co piszemy to słowo "if". Potem umieszczamy parę nawiasów okrągłych, a wewnątrz nich umieszczamy warunek wykorzystując operatory relacyjne. Może to jak najbardziej być koniunkcja, bądź alternatywa albo pojedynczy warunek:

if([warunek]) {
    // instrukcje wykonywane wtedy i tylko wtedy, gdy warunek jest spełniony (wartość "true")
}

Dostosowując się do tego szablonu, przykład może wyglądać następująco:

let rating = 4;

if(rating >= 3) {
    console.log("Przedmiot zaliczony!");
}

To jest zaprogramowanie instrukcji do wykonania, jeżeli dojdzie do spełnienia określonego warunku. W tym przypadku sprawdzamy ocenę jaką otrzymano z przedmiotu do ustalenia czy zaliczono go.

To jednak nie odzwierciedla naszej historyjki przedstawionej na samej górze. Widzimy, że tam mamy DWIE ścieżki i działają one w stylu "albo, albo". W tym celu musimy napisać kod, który będzie uwzględniał możliwość pójścia jedną z dwóch ścieżek. Korzystamy wtedy ze słowa "else" (ang. "w przeciwnym razie"):

let rating = 4;

if(rating >= 3) {
    console.log("Przedmiot zaliczony!");
} else {
    console.log("Przedmiot niezaliczony...");
}

Efekt? Wykonanie jednego z dwóch bloków instrukcji w zależności od postawionego warunku i jego wyniku. Jeżeli ocena z przedmiotu jest przynajmniej 3 (co w naszym przykładzie jest prawdziwe), zostanie wykonany blok instrukcji przeznaczony dla przypadków zaliczenia przedmiotu. W przeciwnym razie, jeśli ocena nie jest satysfakcjonująca i warunek zwróci wartość fałszywą, to program przejdzie do bloku instrukcji po słowie kluczowym "else". Na tym to polega!

To nie koniec atrakcji. Poznajcie kombinację słów "else if" odpowiadających za zdefiniowanego osobnego warunku w sytuacji, gdy pierwszy "polegnie":

let rating = 3;

if(rating > 3) {
    console.log("Przedmiot zaliczony rewelacyjnie!");
} else if(rating == 3) {
    console.log("Przedmiot zaliczony!");
} else {
    console.log("Przedmiot niezaliczony...");
}

Musicie wiedzieć, że instrukcja warunkowa w języku JavaScript jest weryfikowana blok po bloku "schodząc" z góry na dół, dopóki nie natrafi na spełniony warunek albo na słowo "else", jeśli zostało zdefiniowane (jeśli nie, nic się nie wykona). To oznacza, że najpierw zawsze sprawdzany jest warunek po słowie kluczowym "if". Czyli w naszym przypadku zostanie najpierw sprawdzone czy przedmiot zaliczono na ocenę wyższą niż 3. To jest fałsz, więc blok nie zostanie wykonany. Ale są dalsze bloki do sprawdzenia! Zatem program przejdzie do następnego warunku, który tym razem weryfikuje czy ocena jest równa 3. Ten warunek przejdzie pozytywny test, zatem zostanie wykonany blok po "else if" i NA TYM SIĘ KOŃCZY. Blok "else" już nie będzie egzekwowany, gdyż program "natrafił" wcześniej na blok do wykonania.

Dalsza część. Możecie dać tyle warunków ile chcecie:

if([warunekA]) {
    // blok instrukcji A, wykonywany wtedy i tylko wtedy, gdy [warunekA] jest prawdziwy
} else if([warunekB]) {
    // blok instrukcji B, wykonywany wtedy i tylko wtedy, gdy [warunekA] jest fałszywy i [warunekB] jest prawdziwy
} else if([warunekC]) {
    // blok instrukcji C, wykonywany wtedy i tylko wtedy, gdy [warunekA] i [warunekB] są fałszywe, a [warunekC] jest prawdziwy
} else {
    // blok instrukcji D, wykonywany wtedy i tylko wtedy, gdy [warunekA], [warunekB] i [warunekC] są fałszywe, a [warunekD] jest prawdziwy
}

przy czym trzymamy się zawsze tego samego łańcuszka: "if"-"else if"-"else if" [...]-"else". Żadna inna kombinacja nie przejdzie i powstanie błąd składniowy!

Instrukcja warunkowa w języku JavaScript

Instrukcja warunkowa w języku JavaScript pozwala zaprogramować różne ścieżki jakimi może "pójść" aplikacja.

OPERATOR WARUNKOWY NA DOKŁADKĘ!

Ta część jest już bardziej poboczna i jeśli możecie trochę dłużej zostać przy tym artykule, to zaprezentuję taki cosik jak "operator warunkowy", nazywany też "operatorem trójargumentowym". To jest zapis alternatywny dla przypisywania jednej z dwóch wartości "na piechotę" przy pomocy konstrukcji "if else". Dlatego wstawiłem to tutaj, a nie w treści o zmiennych. Tradycyjną postać:

let x;

if([warunek]) {
    x = A;
} else {
    x = B;
}

możemy zamienić na bardziej elegancką, przy użyciu operatora warunkowego:

let x = ([warunek]) ? A : B;

Postać jest całkiem prosta do ogarnięcia. Po operatorze przypisania, wstawiamy sobie warunek (choć nie jest to wymaganie, polecam w nawiasach okrągłych w celu podniesienia czytelności), a po nim w następującej kolejności:

  1. znak zapytania
  2. wartość w przypadku prawdy
  3. znak dwukropka
  4. wartość w przypadku fałszu
  5. średnik

Tyle! W ten sposób skracacie swoje intencje do jednej linijki kodu. Dodam, że to nie działa na bloki kodu i jeśli chcielibyście wykonać dla przykładu dwie instrukcje:

let x;

if([warunek]) {
    x = A;
    
    // dodatkowe instrukcje
} else {
    x = B;
}

wtedy już musicie to sobie wyodrębnić tak:

let b = [warunek];
let x = (b) ? A : B;

if(b) {
    // dodatkowe instrukcje
}

i tak dalej...

JEST COŚ JESZCZE!

Instrukcja warunkowa w języku JavaScript posiada w sobie coś "exclusive". Mianowicie wewnątrz nawiasów "if'a" niekoniecznie musi być umieszczony warunek. To może być też...zmienna!

let rating = 5;

if(rating) {
    // instrukcje
}

Wiecie co to będzie oznaczać? Wykonanie poszczególnych instrukcji wtedy i tylko wtedy, gdy podana zmienna została zdefiniowana! To ma związek z transformacją wartości na logiczny typ danych i na wytłumaczenie tego zjawiska poświęciłem odrębny artykuł.


Finito! To chyba wszystkie szczegóły dotyczące instrukcji warunkowych.

PODOBNE ARTYKUŁY