MODUŁ 03

Instrukcje warunkowe i logika

PPrezentacja dla nauczyciela

W tym module poznasz konstrukcje sterujące przepływem programu: operatory porównania wartości, łączenie kryteriów za pomocą koniunkcji i alternatywy, rozgałęzienia if/else oraz technikę wczesnego wyjścia z funkcji przy niespełnionych warunkach.

Porównania wartości i operatory logiczne

Podejmowanie decyzji w programie opiera się na wyrażeniach warunkowych, które w wyniku dają wartość logiczną true lub false. W języku JavaScript stosujemy następujące operatory porównania:

=== (ścisła równość) — sprawdza równość wartości oraz zgodność typu danych. Jest to zawsze zalecany operator (w przeciwieństwie do luźnego ==, który dokonuje niejawnych konwersji i prowadzi do trudnych do wykrycia błędów, np. 0 == "" daje true, ale 0 === "" daje poprawnie false).
!== (ścisła nierówność) — sprawdza, czy wartości lub ich typy są różne.
>, <, >=, <= — porównania relacyjne liczb.

Złożone warunki łączymy za pomocą operatorów logicznych:

&& (koniunkcja, logiczne I) — całe wyrażenie jest prawdziwe tylko wtedy, gdy oba warunki są spełnione (np. wiek >= 18 && posiadaZgode).
|| (alternatywa, logiczne LUB) — wyrażenie jest prawdziwe, gdy przynajmniej jeden z warunków jest spełniony.
! (negacja, logiczne NIE) — odwraca wartość logiczną (np. !zaznaczony jest prawdą, gdy pole nie zostało zaznaczone).

W poniższym przykładzie sprawdzamy, czy użytkownik ma ukończone 18 lat lub posiada zgodę opiekuna. Przetestuj działanie programu dla różnych kombinacji danych:

function sprawdzUprawnienia() {
    const wiek = parseInt(document.getElementById("poleWiek").value, 10);
    const posiadaZgode = document.getElementById("poleZgoda").checked;

    const wynik = document.getElementById("wynikDostepu");
    if (wiek >= 18 || posiadaZgode) {
        wynik.textContent = "Dostęp przyznany — warunki spełnione.";
        wynik.style.color = "#15803d";
    } else {
        wynik.textContent = "Brak dostępu — wymagana pełnoletność lub zgoda.";
        wynik.style.color = "#b91c1c";
    }
}

1. Czym różni się operator ścisłej równości potrójnego znaku równości od operatora podwójnego znaku?

Operator potrójnego znaku sprawdza równość wartości oraz zgodność typu danych Operator potrójnego znaku dokonuje automatycznej konwersji typów przed badaniem Operator potrójnego znaku porównuje wyłącznie adresy obiektów w pamięci podręcznej Operator potrójnego znaku może być stosowany wyłącznie do liczb całkowitych

2. Kiedy całe wyrażenie z operatorem koniunkcji podwójnego znaku ampersand jest prawdziwe?

Gdy przynajmniej jeden z porównywanych warunków składowych daje wartość fałsz Gdy oba porównywane warunki logiczne dają jednocześnie wartość prawda Gdy pierwszy warunek jest liczbą dodatnią, a drugi dowolnym ciągiem znaków Gdy którykolwiek z badanych warunków zostanie zdefiniowany przez programistę

3. Do czego służy jednoargumentowy operator wykrzyknika w wyrażeniach warunkowych?

Wyświetla natychmiastowe okno z ostrzeżeniem dla użytkownika Zwiększa wartość zmiennej liczbowej o jeden przed porównaniem Odwraca wartość logiczną wyrażenia z prawdy na fałsz lub odwrotnie Kończy wykonywanie bieżącej pętli for i przechodzi do nowej linii

Rozgałęzienia if, else if oraz else

Gdy sytuacja wymaga sprawdzenia więcej niż dwóch możliwych wariantów (np. ustalenia progu rabatowego w sklepie, kategorii wiekowej lub taryfy przewozowej), stosujemy konstrukcję wielogałęziową if ... else if ... else.

Zasada działania:

Interpreter sprawdza warunki po kolei, od góry do dołu.
Gdy napotka pierwszy warunek, który daje wartość true, wykonuje powiązany z nim blok instrukcji, a wszystkie kolejne gałęzie else if i else są całkowicie pomijane.
Gałąź końcowa else jest opcjonalna i wykonuje się wyłącznie wtedy, gdy żaden z wcześniejszych warunków nie został spełniony (działa jako bezpieczna wartość domyślna).

Warto pamiętać o właściwej kolejności warunków przy porównaniach zakresów liczbowych — sprawdzanie progów należy prowadzić monotonicznie (np. od najwyższej kwoty do najniższej lub odwrotnie), aby wyższy próg nie został przedwcześnie przechwycony przez łagodniejszy warunek.

W poniższym kalkulatorze próg rabatowy zależy od łącznej kwoty w koszyku: od 300 zł przysługuje 20% rabatu, od 100 zł — 10%, a poniżej 100 zł rabat wynosi 0%.

Zmień kwotę w polu wejściowym i sprawdź wynik:

function ustalRabat() {
    const kwota = parseFloat(document.getElementById("wartoscKoszyka").value);
    let stawkaRabatu = 0;

    if (kwota >= 300) {
        stawkaRabatu = 20;
    } else if (kwota >= 100) {
        stawkaRabatu = 10;
    } else {
        stawkaRabatu = 0;
    }

    const wynik = document.getElementById("wynikRabatu");
    wynik.textContent = "Naliczony rabat wynosi: " + stawkaRabatu + "%";
}

4. Co dzieje się w konstrukcji if ... else if, gdy pierwszy warunek if okaże się prawdziwy?

Wszystkie kolejne warunki else if są mimo to sprawdzane po kolei Program automatycznie restartuje wykonywanie od początku dokumentu Wykonywane są instrukcje z gałęzi if oraz obowiązkowo z gałęzi else Wykonywany jest blok if, a wszystkie kolejne gałęzie są całkowicie pomijane

5. Kiedy wykonywane są instrukcje umieszczone w opcjonalnej gałęzi else?

Wyłącznie wtedy, gdy żaden z wcześniejszych warunków if i else if nie był prawdziwy Zawsze na samym końcu, niezależnie od wyniku wcześniejszych porównań w kodzie Tylko w sytuacji, gdy użytkownik wprowadził do formularza pusty ciąg tekstowy Gdy interpreter napotka błąd składniowy wewnątrz poprzedzającego bloku instrukcji

6. W jakiej kolejności należy sprawdzać progi kwotowe przy wyliczaniu rabatów od kwoty zamówienia?

W kolejności alfabetycznej nazw zmiennych przypisanych do progów W kolejności uporządkowanej od najwyższego progu kwotowego do najniższego W dowolnej losowej kolejności, gdyż interpreter sam porządkuje zakresy Zawsze zaczynając od progu zerowego, a kończąc na wartościach ujemnych

Wczesne wyjście z funkcji i walidacja warunków

Podczas obsługi formularzy internetowych często musimy sprawdzić, czy użytkownik spełnił wszystkie wymagania wstępne (np. wpisał imię, zaakceptował regulamin, wybrał przynajmniej jedną opcję), zanim przejdziemy do dalszych obliczeń lub wysyłki.

Bardzo czystym i bezpiecznym wzorcem programistycznym jest technika wczesnego powrotu (early return):

Na samym początku funkcji sprawdzamy warunki brzegowe i błędy.
Jeżeli wystąpi błąd (np. puste pole lub brak zaznaczenia checkboxa), wypisujemy komunikat o błędzie i natychmiast przerywamy wykonywanie funkcji za pomocą instrukcji return;.
Dzięki temu główny kod funkcji poniżej wykonuje się tylko wtedy, gdy wszystkie dane wejściowe są w 100% poprawne — bez konieczności głębokiego zagnieżdżania wielu bloków if w sobie.

Formularz sprawdza poprawność danych zgłoszeniowych. Jeżeli pole z imieniem jest puste lub nie zaznaczono akceptacji regulaminu, skrypt natychmiast przerywa działanie i wyświetla odpowiednie ostrzeżenie.

W edytorze poniżej przetestuj działanie z różnymi stanami pól:

function zatwierdzRejestracje() {
    const imie = document.getElementById("pelneImie").value.trim();
    const zgoda = document.getElementById("zgodaRegulamin").checked;
    const komunikat = document.getElementById("komunikatRejestracji");

    if (imie === "") {
        komunikat.textContent = "Wprowadź imię i nazwisko.";
        komunikat.style.color = "#b91c1c";
        return;
    }

    if (!zgoda) {
        komunikat.textContent = "Wymagana jest akceptacja regulaminu.";
        komunikat.style.color = "#b91c1c";
        return;
    }

    komunikat.textContent = "Zgłoszenie dla: " + imie + " zostało przyjęte.";
    komunikat.style.color = "#15803d";
}

7. Jakie działanie wywołuje instrukcja return umieszczona wewnątrz ciała funkcji?

Resetuje wartości wszystkich kontrolek formularza do stanu początkowego Przeładowuje stronę internetową i usuwa dane zapisane w pamięci podręcznej Natychmiast przerywa wykonywanie funkcji i opuszcza jej blok kodu Uruchamia ponowne wykonanie funkcji od pierwszej linii jej deklaracji

8. Jaka jest główna zaleta stosowania techniki wczesnego wyjścia (early return) przy walidacji formularza?

Pozwala na całkowite pominięcie pisania kodu HTML dla kontrolek wejściowych Zwiększa szybkość renderowania arkuszy stylów CSS w oknie przeglądarki Umożliwia uruchamianie kodu JavaScript bez włączonej obsługi skryptów Eliminuje głębokie zagnieżdżanie bloków if i poprawia czytelność całego algorytmu

9. W jaki sposób można sprawdzić, czy pole tekstowe o pobranej wartości tekstowej nie jest puste?

Porównując wynik metody trim ze znakiem pustego ciągu za pomocą potrójnego znaku równości Wywołując metodę isEmpty bezpośrednio na elemencie pobranym z drzewa dokumentu Sprawdzając, czy właściwość length tekstu jest mniejsza lub równa liczbie dziesięć Używając instrukcji delete na identyfikatorze kontrolki umieszczonej w formularzu

Instrukcje warunkowe i logika

Porównania wartości i operatory logiczne

Rozgałęzienia if, else if oraz else

Wczesne wyjście z funkcji i walidacja warunków

Ćwiczenia