Instrukcje if, else i switch w JavaScript — ćwiczenia praktyczne

Warunki sprawiają, że program reaguje na dane: pokazuje inny komunikat dla różnych wartości, wybiera cenę albo nazwę dnia. Na tej lekcji uczniowie piszą trzy funkcje — znak liczby, nazwę dnia przez switch i ocenę z punktów — a na koniec porównują operatory == i ===, które są źródłem wielu błędów w JavaScript.

Scenariusz jest przeznaczony na 45 minut dla klasy, która zna zmienne, funkcje i podstawowe typy danych — na przykład po pierwszej lekcji JavaScript i lekcji o tablicach.

Przygotowanie stanowisk

Potrzebna jest przeglądarka z konsolą (F12) i edytor tekstu. Rozpakuj pakiet z sekcji materiałów do folderu warunki-js. W folderze start jest index.html (nie zmieniasz go) oraz app.js z funkcją pokaz, która wypisuje tekst w konsoli i na stronie. Po zapisaniu app.js odśwież stronę. Gotowe rozwiązanie jest w folderze rozwiazanie. Serwer i Node.js nie są wymagane.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• zapisać if, else if i else z nawiasami klamrowymi;
• użyć operatorów porównania i logicznych &&, ||, !;
• zapisać switch z case, break lub return i default;
• odróżnić == od === i uzasadnić, dlaczego warto używać ===.

if, else if, else

const wiek = 16;
if (wiek >= 18) {
  pokaz("Pelnoletni");
} else {
  pokaz("Niepelnoletni");
}

Dla wiek = 16 program wypisze Niepelnoletni. Warunek stoi w nawiasach okrągłych, a gałęzie w klamrowych. Gałęzie else if sprawdzane są kolejno i wykona się pierwsza, której warunek jest prawdziwy. Operatory logiczne to && (i), || (lub) oraz ! (negacja).

switch i porównania

Instrukcja switch wybiera przypadek na podstawie jednej wartości. Każdy case kończymy break albo return — bez tego wykonywane są także kolejne przypadki (tzw. „przechodzenie”). Czasem robi się to celowo: w rozwiązaniu case 6 i case 7 dzielą jedną odpowiedź. Przypadek default obsługuje wszystkie inne wartości.

switch używa porównania ścisłego (===). Operator == zamienia typy, więc "5" == 5 daje true, a 0 == "" też true. Operator === porównuje wartość i typ: "5" === 5 to false. W praktyce prawie zawsze używamy === i !==.

Trzy zadania

Zadanie 1. Znak liczby. Napisz funkcję znak(liczba) zwracającą "dodatnia", "ujemna" lub "zero". Sprawdź 5, −2 i 0.

Zadanie 2. Dzień tygodnia. Za pomocą switch napisz nazwaDnia(numer): 1–5 to dni od poniedziałku do piątku, 6 i 7 to „weekend”, inne wartości — „nieprawidlowy numer”. Sprawdź 1, 5, 6, 7, 0 i 8.

Zadanie 3. Ocena. Napisz ocena(punkty, maks = 10) zwracającą: od 90% „bardzo dobry”, od 70% „dobry”, od 50% „dostateczny”, niżej „niedostateczny”. Sprawdź 10, 8, 5, 3 oraz ocena(36, 40).

Dla chętnych: wypisz wyniki "5" == 5, "5" === 5, 0 == "" i 0 === "" i wyjaśnij różnice.

Rozwiązanie i wyniki

Plik rozwiazanie/app.js:

function pokaz(...czesci) {
  const tekst = czesci.join(" ");
  console.log(tekst);
  document.querySelector("#wynik").textContent += tekst + "\n";
}

// Zadanie 1
function znak(liczba) {
  if (liczba > 0) {
    return "dodatnia";
  } else if (liczba < 0) {
    return "ujemna";
  } else {
    return "zero";
  }
}
for (const x of [5, -2, 0]) {
  pokaz(x, znak(x));
}

// Zadanie 2
function nazwaDnia(numer) {
  switch (numer) {
    case 1: return "poniedzialek";
    case 2: return "wtorek";
    case 3: return "sroda";
    case 4: return "czwartek";
    case 5: return "piatek";
    case 6:
    case 7: return "weekend";
    default: return "nieprawidlowy numer";
  }
}
for (const n of [1, 5, 6, 7, 0, 8]) {
  pokaz(n, nazwaDnia(n));
}

// Zadanie 3
function ocena(punkty, maks = 10) {
  const procent = punkty / maks * 100;
  if (procent >= 90) return "bardzo dobry";
  if (procent >= 70) return "dobry";
  if (procent >= 50) return "dostateczny";
  return "niedostateczny";
}
for (const p of [10, 8, 5, 3]) {
  pokaz(p, ocena(p));
}
pokaz(36, "z 40:", ocena(36, 40));

// Dla chetnych
pokaz("5" == 5, "5" === 5, 0 == "", 0 === "");

Program wypisze:

5 dodatnia
-2 ujemna
0 zero
1 poniedzialek
5 piatek
6 weekend
7 weekend
0 nieprawidlowy numer
8 nieprawidlowy numer
10 bardzo dobry
8 dobry
5 dostateczny
3 niedostateczny
36 z 40: bardzo dobry
true false true false

Wartości graniczne: 8 z 10 to 80% (dobry), 5 z 10 to dokładnie 50% (dostateczny), a 36 z 40 to 90% (bardzo dobry). Ostatnia linia pokazuje true false true false — dwie pierwsze wartości dotyczą napisu "5" i liczby 5, kolejne dwie liczby 0 i pustego napisu. Wyniki sprawdzono uruchomieniem programu w Node.js.

Typowe błędy

Pytania kontrolne i punktacja

1. Czym różni się == od ===?
2. Co się stanie, jeśli w switch pominiemy break po jednym z przypadków?
3. Co zwróci ocena(9, 10) dla funkcji z zadania 3?

Odpowiedzi: == zamienia typy przed porównaniem, === porównuje wartość i typ. Wykonają się także instrukcje kolejnego przypadku. "bardzo dobry" (90%).

Proponowana punktacja (razem 10 punktów): zadanie 1 — trzy gałęzie 2 pkt, trzy wyniki 1 pkt; zadanie 2 — switch z default 2 pkt, przypadki 6 i 7 oraz sześć wyników 1 pkt; zadanie 3 — progi 2 pkt, wartość domyślna 1 pkt, test 36 z 40 1 pkt. Zadanie dla chętnych nie jest wymagane do pełnej oceny.

Materiały do pobrania

• Pakiet JavaScript: projekt startowy, rozwiązanie i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj

Rozpakuj ZIP przed otwarciem plików. Materiały są dostępne bez logowania; publiczne rozwiązanie służy nauce i samodzielnemu sprawdzeniu, a nie poufnemu sprawdzianowi.

Co dalej po instrukcjach warunkowych?

Następne tematy to pętle, tablice i obsługa formularza, w której warunki sprawdzają wpisane dane. Ten materiał rozwija dział o sterowaniu programem w kursie JavaScript w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: instrukcje if...else w MDN oraz switch w MDN. Zobacz też lekcję o DOM w JavaScript.