Instrukcje warunkowe i pętle w JavaScript

Skrypt w zadaniu praktycznym INF.03 prawie nigdy nie jest prostą listą poleceń wykonywanych po kolei. Treść zadania rozgałęzia go: „Jeżeli oba pola edycyjne zostały wypełnione, skrypt oblicza pole powierzchni pomieszczenia … W przeciwnym wypadku skrypt wyświetla komunikat "Wprowadź poprawne dane."" (arkusz CKE INF.03, styczeń 2025, zadanie 2). Albo każe powtarzać: algorytm zamiany liczby dziesiętnej na binarną kończy się krokiem „K5: Jeśli L = 0 idź do K6; w przeciwnym razie idź do K3" (arkusz CKE INF.03, styczeń 2025, zadanie 6) – czyli pętlą. To, co w treści zadania brzmi „jeżeli", „w przeciwnym wypadku", „dla każdego", „ile razy", w kodzie ma cztery zapisy: if z else, switch, pętla for i pętla while (z odmianą do…while).

W podstawie programowej odpowiada za to jedna linia: Podstawa programowa INF.03.5, efekt 2, kryterium 5: „stosuje instrukcje sterujące skryptowych języków programowania" – w ramach efektu „Uczeń stosuje skryptowe języki programowania". Obok stoją kryterium 3: „implementuje algorytmy w języku interpretowanym" i efekt 3: „Uczeń programuje skrypty wykonywane po stronie klienta", kryterium 1: „programuje w języku JavaScript".

Na egzaminie to zagadnienie ma dwie twarze. W części pisemnej pada jako pytanie o wynik: ile razy wykona się pętla, jaka wartość zostanie w zmiennej, który warunek sprawdza przedział (arkusz CKE E.14, styczeń 2018, część pisemna, zad. 37 – klucz B; arkusz CKE EE.09, styczeń 2024, część pisemna, zad. 6 – klucz A). W części praktycznej jest narzędziem: skrypt ma pokazać jeden z dwóch komunikatów, przeliczyć cenę zależnie od zaznaczonej opcji albo przejść po elementach listy. Zasady, które wynikają z obu:

• Warunek w if i w nagłówku pętli to wyrażenie logiczne – to, co w nim porównujesz, ma być tego samego typu; wartość z pola formularza jest napisem, więc przed porównaniem z liczbą konwertujesz ją tak, jak opisuje hasło Zmienne i typy w JavaScript.
• Zasady oceniania sprawdzają obie gałęzie warunku osobno: jedno kryterium za komunikat przy pustym polu, drugie za wynik przy wypełnionych polach (zasady oceniania INF.03, styczeń 2025, zadanie 2 – streszczenie). Gałąź, której nie napiszesz, to punkt, którego nie dostaniesz.
• Liczba przebiegów pętli wynika z trzech rzeczy naraz: wartości startowej, warunku i kroku – pytania pisemne zmieniają jedną z nich (< na <=, i++ na i += 2) i pytają o wynik.
• Pętla i warunek są punktowane przez efekt na stronie, nie przez sam zapis; kod ogląda się dopiero, gdy skrypt nie działa (zasady oceniania INF.03, styczeń 2025, zadanie 6 – streszczenie).

Deklaracje let/const, typy i konwersje tłumaczy hasło Zmienne i typy w JavaScript; definiowanie funkcji, do których te instrukcje trafiają – Funkcje w JavaScript; pobieranie danych z kontrolek i wypisywanie wyniku – Obsługa zdarzeń i model DOM. Tu jest tylko sterowanie przebiegiem.

1. if z else – „jeżeli … w przeciwnym wypadku". Warunek w nawiasie jest wyrażeniem logicznym; gdy jest prawdziwy, wykonuje się blok po if, gdy fałszywy – blok po else. Treść zadania podaje obie gałęzie wprost: „Jeżeli nie zaznaczono pola wyboru: „Musisz zapoznać się z regulaminem" … Jeżeli zaznaczono pole wyboru: „<IMIĘ> <NAZWISKO> …"" (arkusz CKE INF.03, styczeń 2024, zadanie 1). Nawiasy klamrowe można pominąć tylko przy jednej instrukcji – bezpieczniej pisać je zawsze.

const zgoda = document.getElementById("regulamin").checked;
if (!zgoda) {
  wynik.textContent = "Musisz zapoznać się z regulaminem";
} else {
  wynik.innerHTML = imie + " " + nazwisko + "<br>Treść Twojej sprawy: " + tresc;
}
// to samo jednym wyrażeniem – operator warunkowy
wynik.style.color = zgoda ? "Navy" : "red";

2. Warunek złożony – &&, ||, !. „Oba pola wypełnione" to koniunkcja dwóch warunków; „przynajmniej jeden z przypadków" to alternatywa. Pytania pisemne sprawdzają dokładnie to rozróżnienie: warunek „liczba a jest trzycyfrowa lub liczba b jest ujemna" ma postać ((a > 99) && (a < 1000)) || (b < 0) – przedział wymaga &&, bo (a > 99) || (a < 1000) jest prawdziwe dla każdej liczby (arkusz CKE E.14, czerwiec 2017, część pisemna, zad. 27 – klucz B). Ten sam schemat: raport dla osób na umowę o pracę i z pensją w przedziale domkniętym 4000–4500 to umowa == 'praca' && (pensja >= 4000 && pensja <= 4500) (arkusz CKE EE.09, styczeń 2023, część pisemna, zad. 3 – klucz A).

if (dlugosc !== "" && szerokosc !== "") {      // oba pola wypełnione
  // obliczenia
} else {
  wynik.textContent = "Wprowadź poprawne dane.";
}
const wPrzedziale = (liczba >= -200) && (liczba < -100);   // <-200, -100)

3. else if albo switch – wybór z kilku wartości. Gdy zależnie od jednej zmiennej masz kilka możliwości (typ panelu: 12, 14 albo 18 zł za m²; długość włosów: cztery ceny), piszesz drabinkę else if albo switch. switch porównuje wartość z każdym case ścisłą równością, tak jak ===, a po dopasowaniu wykonuje instrukcje aż do break; bez break przechodzi do następnego case niezależnie od jego wartości (MDN, switch). Blok default łapie wszystko, czego nie wymieniono. Obie formy są równie dobrze punktowane – kryterium mówi tylko o pomnożeniu pola przez 12, 14 lub 18 zależnie od wybranego panelu (zasady oceniania INF.03, styczeń 2025, zadanie 2 – streszczenie).

let stawka;
switch (rodzajPanelu) {
  case "laminowany": stawka = 12; break;
  case "winylowy":   stawka = 14; break;
  default:           stawka = 18;
}

4. for – znana liczba przebiegów albo przejście po tablicy. Nagłówek ma trzy części: start, warunek kontynuacji, krok. Pętla wykonuje ciało dopóty, dopóki warunek jest prawdziwy – więc for (i = 2; i <= 12; i += 2) wypisze sześć liczb parzystych 2, 4, 6, 8, 10, 12, a i < 12 tylko pięć (arkusz CKE E.14, czerwiec 2019, część pisemna, zad. 32 – klucz B; policzone w node). Po tablicy przechodzisz od indeksu 0 do length - 1, dlatego warunek to i < tablica.length, nigdy <= (to samo pytanie o i < 6 dla tablicy sześcioelementowej: arkusz CKE EE.09, styczeń 2022, część pisemna, zad. 13 – klucz C). Gdy potrzebujesz tylko wartości, a nie indeksów, for…of daje kolejne elementy tablicy, napisu lub listy elementów DOM (MDN, for...of).

for (let i = 0; i < CENY.length; i++) {        // po indeksach
  if (ZAZNACZONE[i]) suma += CENY[i];
}
for (const miasto of MIASTA) {                 // po wartościach
  lista.appendChild(new Option(miasto));
}

5. while i do…while – dopóki warunek jest spełniony. while sprawdza warunek przed każdym przebiegiem, więc dla warunku fałszywego od początku nie wykona się ani razu. do…while sprawdza warunek po wykonaniu ciała, więc ciało wykona się co najmniej raz (MDN, do...while). Algorytm z arkusza – „jeśli L = 0 idź do K6; w przeciwnym razie idź do K3" – jest właśnie pętlą z warunkiem sprawdzanym po kroku (arkusz CKE INF.03, styczeń 2025, zadanie 6). Wewnątrz pętli musi być instrukcja, która zbliża warunek do fałszu (reszta = Math.floor(reszta / 2), i--) – inaczej pętla nie kończy się nigdy.

let i = 20, a = 0;
while (i) {          // liczba różna od zera jest „prawdziwa"
  a += 2;
  i--;
}
// a = 40, i = 0

6. break i continue. break przerywa tę pętlę, w której stoi – w dwóch zagnieżdżonych pętlach kończy tylko wewnętrzną, a zewnętrzna idzie dalej (arkusz CKE EE.09, styczeń 2023, część pisemna, zad. 8 – klucz D: po iteracji (2, 2) pętla wewnętrzna kończy pracę i program przechodzi do i = 3). continue pomija resztę bieżącego przebiegu i przechodzi do następnego. W arkuszach INF.03 z lat 2021–2026 zebranych na portalu żadne polecenie nie wymaga break ani continue – potrzebne są tylko w pytaniach pisemnych i do wcześniejszego wyjścia z pętli szukającej.

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    if (i == 2 && j == 2) break;     // kończy tylko pętlę po j
  }
}

Przypisanie zamiast porównania. if (stawka = 14) nie porównuje, tylko wpisuje 14 do zmiennej, a wyrażenie ma wartość 14 – niezerową, więc „prawdziwą"; gałąź wykona się zawsze (policzone w node: po takim if zmienna ma wartość 14). Porównanie to == albo ===; o różnicy między nimi mówi hasło Zmienne i typy w JavaScript. W zadaniu ze stawkami za panel taki błąd daje jeden koszt dla każdego rodzaju panelu, a kryterium wymaga trzech różnych mnożników (zasady oceniania INF.03, styczeń 2025, zadanie 2 – streszczenie).

switch bez break. Po dopasowanym case wykonanie leci dalej przez kolejne case i default, dopóki nie trafi na break (MDN, switch). Dla case "krotkie": cena = 25; case "srednie": cena = 30; break; wartość dla „krótkie" wynosi 30, nie 25 (policzone w node). Objaw: pierwsze opcje dają cenę ostatniej gałęzi. Do tego switch porównuje ścisłą równością – case 2: nie złapie wartości "2" z listy rozwijanej (arkusz CKE EE.09, styczeń 2023, część pisemna, zad. 11 – klucz D).

&& zamiast || w przedziale i odwrotnie. „Liczba trzycyfrowa" to a > 99 && a < 1000; zapis z || jest spełniony dla każdej liczby (policzone: dla a = 5 daje true), a zapis „a trzycyfrowa lub b ujemna" z && między nawiasami wymaga obu naraz (arkusz CKE E.14, czerwiec 2017, część pisemna, zad. 27 – klucz B). Przetłumacz warunek zdaniem: „i" to &&, „lub" to ||, przedział to zawsze dwa porównania spięte &&.

Pętla o jeden za daleko. for (let i = 0; i <= tablica.length; i++) wchodzi na indeks równy długości tablicy, gdzie jest undefined; suma cen staje się NaN (policzone w node dla tablicy czterech cen). Dla tablicy sześcioelementowej jedyny poprawny warunek to i < 6 (arkusz CKE EE.09, styczeń 2022, część pisemna, zad. 13 – klucz C). Objaw na stronie: „Cena zabiegów: NaN" zamiast liczby.

Pętla bez kroku – strona się wiesza. while (i < 3) { suma += i; } bez i++ nigdy nie kończy warunku; przeglądarka przestaje reagować, a egzaminator nie zobaczy żadnego wyniku. W while i do…while zmiana zmiennej sterującej jest Twoim obowiązkiem – w for stoi w nagłówku. Pytanie pisemne o while($i) zakłada właśnie $i-- w ciele; bez niego odpowiedź „a = 40" nie istnieje (arkusz CKE EE.09, styczeń 2024, część pisemna, zad. 6 – klucz A).

Niezainicjowana zmienna zbierająca wynik. let tekst; for (...) { tekst += tab[i] + "<br>"; } sklei napis zaczynający się od undefined (policzone w node: undefineda<br>b<br>), a let suma; z suma += 45 da NaN. Przed pętlą wpisujesz wartość startową: "" dla napisu, 0 dla sumy – to jest dokładnie treść pytania pisemnego o czynność „przed pętlą" (arkusz CKE E.14, czerwiec 2017, część pisemna, zad. 28 – klucz B).

Jedna gałąź zamiast dwóch. Skrypt liczy wynik, ale przy pustym polu nie pokazuje nic albo pokazuje NaN. Kryteria za komunikat „Wprowadź poprawne dane." i za wynik przy wypełnionych polach są osobne (zasady oceniania INF.03, styczeń 2025, zadanie 2 – streszczenie), więc brak else to punkt mniej, nawet gdy obliczenia są bezbłędne. Sprawdź obie gałęzie przed nagraniem wyników: raz z pustym polem, raz z pełnymi.

Zagadnienia z tego samego obszaru matury – warto je powtórzyć razem: