JavaScript w przeglądarce · Moduł 03

Instrukcje warunkowe i logika

Operatory porównania, koniunkcja, alternatywa, konstrukcje if / else if / else oraz wczesne wyjście z funkcji.

45 min
16 slajdów
Notatki nauczyciela: N
Strona modułu: otwórz

Plan · 45 min

Co dziś robimy

12 minPorównania wartości i operatory logiczne === (ścisła równość) — sprawdza równość wartości oraz zgodność typu danych.
12 minRozgałęzienia if, else if oraz else Interpreter sprawdza warunki po kolei, od góry do dołu.
12 minWczesne wyjście z funkcji i walidacja warunków Na samym początku funkcji sprawdzamy warunki brzegowe i błędy.
4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
5 minPodsumowanie bilet wyjściowy i zadanie domowe

Atom 1 z 3 · ~12 min

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…
!== (ścisła nierówność) — sprawdza, czy wartości lub ich typy są różne.
> , < , >= , <= — porównania relacyjne liczb.
&& (koniunkcja, logiczne I) — całe wyrażenie jest prawdziwe tylko wtedy, gdy oba warunki są spełnione (np. wiek >= 18 && posiadaZgode).

Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

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";
    }
}

Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

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";
    }
}

Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

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

Atom 2 z 3 · ~12 min

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 .

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.

Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

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 + "%";
}

Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

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 + "%";
}

Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

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

Atom 3 z 3 · ~12 min

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…

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…
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…
Bardzo czystym i bezpiecznym wzorcem programistycznym jest technika wczesnego powrotu (early return) :

Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

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";
}

Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

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";
}

Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

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

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

=== (ś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…
Zasada działania:
Na samym początku funkcji sprawdzamy warunki brzegowe i błędy.

Bilet wyjściowy: W jaki sposób można sprawdzić, czy pole tekstowe o pobranej wartości tekstowej nie jest puste?
Odpowiedź: a) Porównując wynik metody trim ze znakiem pustego ciągu za pomocą potrójnego znaku równości