ZAWODNIK

JavaScript: instrukcje warunkowe i pętle

INF.03 · teoria
autor: redakcja · 09.09.2026
Instrukcje warunkowe if, else if i switch oraz pętle for, while, do...while, for...of i for...in w języku JavaScript: kiedy sprawdzany jest warunek, ile obrotów wykona pętla, co robią break i continue oraz jak pętla buduje listę HTML. Lekcja 11.3 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: javascriptĆwicz dział: javascript
In­struk­cja ste­ru­ją­ca to kon­struk­cja języka, która de­cy­du­je, CZY i ILE RAZY wykona się frag­ment kodu: wa­ru­nek wy­bie­ra jedną z dróg, a pętla po­wta­rza ten sam blok. Bez nich skrypt idzie od góry do dołu i przy każdym wczy­ta­niu strony robi do­kład­nie to samo. W części pi­sem­nej wra­ca­ją py­ta­nia z ramką kodu („ile razy wykona się przed­sta­wio­na pętla", „które war­to­ści zo­sta­ną ko­lej­no wy­pi­sa­ne", „która pętla wykona się co naj­mniej raz", „jak za­pi­sać wa­ru­nek na prze­dział od 10 do 100"). W za­da­niu prak­tycz­nym if spraw­dza war­tość wpi­sa­ną w pole for­mu­la­rza, a pętla prze­cho­dzi po ta­bli­cy i buduje z niej listę wi­docz­ną na stro­nie sklepu.

Wa­ru­nek: if, else if, else

if (JEŻELI) to in­struk­cja wy­ko­nu­ją­ca blok w na­wia­sach klam­ro­wych tylko wtedy, gdy wa­ru­nek w na­wia­sach okrą­głych jest praw­dzi­wy. else (W PRZECIWNYM RAZIE) do­kła­da drugą drogę, na którą skrypt wcho­dzi przy wa­run­ku nie­speł­nio­nym, a else if (A JEŻELI) wsta­wia między nie ko­lej­ne py­ta­nie. Wa­run­ki spraw­dza­ne są po kolei, od góry: pierw­szy praw­dzi­wy wy­gry­wa, reszta zo­sta­je po­mi­nię­ta. W JavaScripcie te dwa słowa pisze się osobno, bo elseif znane z PHP jest tu błędem skład­ni.
1
2
3
4
5
6
7
8
9
10
const kwota = 250;
let rabat;
if (kwota >= 500) {
rabat = 10;
} else if (kwota >= 200) {
rabat = 5;
} else {
rabat = 0;
}
console.log("Rabat: " + rabat + " procent");
Wynik: Rabat: 5 procent. Kwota 250 nie prze­szła pierw­sze­go wa­run­ku, prze­szła drugi, więc else nie ma już nic do roboty. Klamry przy jednej in­struk­cji wolno po­mi­nąć, ale do wa­run­ku należy wtedy wy­łącz­nie NAJBLIŻSZA in­struk­cja, a wcię­cie ko­lej­ne­go wier­sza ni­cze­go nie zmie­nia.
Wa­ru­nek zło­żo­ny łączy kilka po­rów­nań ope­ra­to­ra­mi lo­gicz­ny­mi: && (I) wymaga obu części, || (LUB) wy­star­czy jedna, ! (NIE) od­wra­ca wynik. Prze­dział do­mknię­ty z dwóch stron po­wsta­je zawsze przez &&.
1
2
3
4
5
6
const liczba = 150;
if (liczba > 100 && liczba <= 200) {
console.log("w przedziale");
} else {
console.log("poza przedziałem");
}
Wynik: w przedziale, bo liczba speł­nia oba po­rów­na­nia naraz. Ten sam zapis z || byłby praw­dzi­wy dla każdej liczby, bo każda jest albo więk­sza od 100, albo mniej­sza lub równa 200.
Osobna pu­łap­ka miesz­ka w jednym znaku. Przy­pi­sa­nie po­sta­wio­ne w miej­scu po­rów­na­nia nie zgła­sza błędu, tylko po cichu zmie­nia zmien­ną i oddaje przy­pi­sa­ną war­tość jako wynik wa­run­ku.
1
2
3
4
let x = 3;
if (x = 5) {
console.log("warunek spełniony, x wynosi " + x);
}
Wynik: warunek spełniony, x wynosi 5, choć zmien­na miała trójkę i ni­cze­go z niczym nie po­rów­na­no. Gdyby x była stałą const, ta sama linia za­trzy­ma­ła­by skrypt błędem przy­pi­sa­nia do stałej.
Pu­łap­ka: = przy­pi­su­je war­tość, == po­rów­nu­je same war­to­ści, a === war­tość i typ. Róż­ni­cę między == a === opi­su­je lekcja o zmien­nych i ope­ra­to­rach.

switch, case, de­fault i prze­lot

switch (PRZEŁĄCZ) to in­struk­cja wyboru, która po­rów­nu­je JEDNĄ war­tość z listą przy­pad­ków case (PRZYPADEK) i wy­ko­nu­je kod od pierw­sze­go pa­su­ją­ce­go. Za­stę­pu­je długi łań­cuch else if o wciąż tej samej zmien­nej. break (PRZERWIJ) kończy całą in­struk­cję, a default (DOMYŚLNY) łapie war­to­ści spoza listy. Po­rów­na­nie działa jak ===, więc case "5" nie złapie liczby 5.
1
2
3
4
5
6
7
8
9
10
11
const sposob = "paczkomat";
switch (sposob) {
case "kurier":
console.log("Dostawa: 15 zł");
break;
case "paczkomat":
console.log("Dostawa: 10 zł");
break;
default:
console.log("Odbiór osobisty");
}
Wynik: Dostawa: 10 zł. Za­po­mnia­ny break daje prze­lot, czyli wy­ko­na­nie także ko­lej­nych przy­pad­ków, i to bez spraw­dza­nia ich war­to­ści.
1
2
3
4
5
6
7
8
9
10
11
const sposob = "kurier";
let cena = 0;
switch (sposob) {
case "kurier":
cena += 15;
case "paczkomat":
cena += 10;
default:
cena += 1;
}
console.log(cena);
Wynik: 26, bo po tra­fie­niu w pierw­szy przy­pa­dek skrypt prze­szedł przez wszyst­kie po­zo­sta­łe. Z break po każdym case wy­ni­kiem byłoby 15. Dwa przy­pad­ki po­sta­wio­ne jeden pod drugim, bez kodu między nimi, to ten sam prze­lot użyty celowo: obie war­to­ści pro­wa­dzą do jed­ne­go bloku.

Pętle: for, while i do...while

Pętla to in­struk­cja po­wta­rza­ją­ca ten sam blok kodu, dopóki jej wa­ru­nek jest praw­dzi­wy. Jedno wy­ko­na­nie bloku to obrót, ina­czej ite­ra­cja, i to jego liczby do­ty­czy więk­szość pytań z banku.
for (DLA) trzyma w na­wia­sie trzy części roz­dzie­lo­ne śred­ni­ka­mi: war­tość po­cząt­ko­wą licz­ni­ka, wa­ru­nek trwa­nia pętli i krok wy­ko­ny­wa­ny po każdym ob­ro­cie. Nadaje się tam, gdzie liczba po­wtó­rzeń jest znana z góry.
1
2
3
for (let i = 2; i <= 12; i += 2) {
console.log(i);
}
Wynik: sześć wier­szy z licz­ba­mi 2, 4, 6, 8, 10, 12. Licz­nik de­kla­ru­je słowo let (NIECH), które zamyka go w samej pętli; w ar­ku­szach i w ban­kach pytań stoi tam star­sze var, wi­docz­ne w całej funk­cji, ale w takiej pętli dzia­ła­ją­ce tak samo.
while (DOPÓKI) spraw­dza wa­ru­nek PRZED każdym ob­ro­tem, więc przy wa­run­ku fał­szy­wym od po­cząt­ku blok nie wykona się ani razu. Pasuje tam, gdzie liczby po­wtó­rzeń nie znamy z góry.
[ JS ]
krok po kroku
skrypt
wierszy: 5
1
2
3
4
5
6
od nowa
❮ wstecz
dalej ❯
do końca
krok 0 z 11
start skryptu
ZMIENNE
jeszcze żadnej zmiennej
WYJŚCIE
skrypt jeszcze nic nie wypisał
Otwórz w interpreterze ›
Wynik: trzy wier­sze, od zostało sztuk: 3 do zostało sztuk: 1.
do...while (WYKONUJ DOPÓKI) spraw­dza wa­ru­nek na KOŃCU obrotu, więc blok wy­ko­nu­je się co naj­mniej raz, nawet gdy wa­ru­nek jest fał­szy­wy od po­cząt­ku. Po za­my­ka­ją­cym na­wia­sie stoi śred­nik.
1
2
3
4
5
let i = 1;
do {
console.log(i);
i++;
} while (i > 5);
Wynik: 1, jeden obrót mimo fał­szy­we­go wa­run­ku.
Pętla
Kiedy spraw­dza wa­ru­nek
Mi­ni­mum wy­ko­nań
Do czego
for
przed ob­ro­tem
0
znana z góry liczba po­wtó­rzeń, licz­nik
while
przed ob­ro­tem
0
po­wta­rza­nie do skutku, nie­zna­na liczba ob­ro­tów
do...while
po ob­ro­cie
1
gdy blok ma wy­ko­nać się choć raz
for...of
przed ob­ro­tem
0
war­to­ści ta­bli­cy
for...in
przed ob­ro­tem
0
in­dek­sy ta­bli­cy, klucze obiek­tu

for...of, for...in oraz break i con­ti­nue

for...of (DLA KAŻDEGO Z) to pętla prze­cho­dzą­ca po WARTOŚCIACH ta­bli­cy, bez licz­ni­ka i bez spraw­dza­nia jej dłu­go­ści. for...in (DLA KAŻDEGO W) chodzi po INDEKSACH ta­bli­cy oraz klu­czach obiek­tu, więc w każdym ob­ro­cie oddaje numer miej­sca, a nie to, co w nim leży.
1
2
3
4
5
6
7
const produkty = ["Klawiatura", "Mysz", "Monitor 24"];
for (const nazwa of produkty) {
console.log(nazwa);
}
for (const indeks in produkty) {
console.log(indeks + ": " + produkty[indeks]);
}
1
2
3
4
5
6
Klawiatura
Mysz
Monitor 24
0: Klawiatura
1: Mysz
2: Monitor 24
Bie­giem każdej pętli ste­ru­ją dwa słowa. break prze­ry­wa całą pętlę i prze­no­si wy­ko­na­nie za jej klamrę, a continue (KONTYNUUJ) prze­ry­wa tylko bie­żą­cy obrót i prze­cho­dzi do na­stęp­ne­go.
1
2
3
4
5
6
7
8
9
10
11
12
const ceny = [30, 0, 45, 120];
let suma = 0;
for (const cena of ceny) {
if (cena === 0) {
continue;
}
if (cena > 100) {
break;
}
suma += cena;
}
console.log(suma);
Wynik: 75. Zero zo­sta­ło po­mi­nię­te przez continue, po czym doszły 30 i 45, a cena 120 wy­wo­ła­ła break, więc pętla skoń­czy­ła się przed do­da­niem cze­go­kol­wiek więcej.
Pętla nie­skoń­czo­na to taka, której wa­ru­nek nigdy nie staje się fał­szy­wy: while (true) albo while (i < 10) z za­po­mnia­nym zwięk­sza­niem i. Wy­cho­dzi się z niej przez break, a bez tego prze­glą­dar­ka blo­ku­je kartę aż do za­mknię­cia strony.

Ile ob­ro­tów wykona pętla

Py­ta­nie o liczbę ite­ra­cji roz­wią­zu­je się zawsze tak samo: wypisz licz­nik na wej­ściu, sprawdź wa­ru­nek, dopisz krok i po­wta­rzaj do pierw­sze­go fałszu. Ten sam ra­chu­nek pokaże krok po kroku in­ter­pre­ter JavaScript w prze­glą­dar­ce.
1
2
3
4
5
6
7
let i = 0;
let obroty = 0;
while (i < 10) {
i += 3;
obroty++;
}
console.log(i + " " + obroty);
Obrót
i na wej­ściu
Wa­ru­nek i < 10
i po kroku
1
0
prawda
3
2
3
prawda
6
3
6
prawda
9
4
9
prawda
12
5
12
fałsz
koniec pętli
Wynik: 12 4, czyli cztery obroty i licz­nik za­trzy­ma­ny na 12. Pętla for z wa­run­kiem i < n i kro­kiem i++ wy­ko­nu­je do­kład­nie n ob­ro­tów, a licz­nik przyj­mu­je war­to­ści od 0 do n - 1. Ta sama pętla z wa­run­kiem i <= n ma o jeden obrót więcej i wła­śnie tym jednym ob­ro­tem różnią się zwykle od­po­wie­dzi w py­ta­niu.
[ JS ]
krok po kroku
skrypt
wierszy: 5
1
2
3
4
5
6
od nowa
❮ wstecz
dalej ❯
do końca
krok 0 z 54
start skryptu
ZMIENNE
jeszcze żadnej zmiennej
WYJŚCIE
skrypt jeszcze nic nie wypisał
Otwórz w interpreterze ›
Wynik: 600. Licz­nik przyj­mu­je 25 war­to­ści pa­rzy­stych od 0 do 48, więc zmien­na w niesie sumę liczb pa­rzy­stych mniej­szych od 50, a nie ich liczbę.

Lista ge­ne­ro­wa­na w pętli

Pętla skle­ja­ją­ca znacz­ni­ki w jeden napis to naj­częst­sze za­da­nie skryp­tu na stro­nie: wcho­dzi ta­bli­ca z danymi, wy­cho­dzi gotowy ka­wa­łek HTML. Napis rośnie ope­ra­to­rem +=, po jednym ele­men­cie na obrót.
1
2
3
4
5
6
const produkty = ["Klawiatura", "Mysz", "Monitor 24"];
let lista = "";
for (const nazwa of produkty) {
lista += "<li>" + nazwa + "</li>";
}
console.log(lista);
1
<li>Klawiatura</li><li>Mysz</li><li>Monitor 24</li>
Ten napis trafia na stronę jednym przy­pi­sa­niem do wła­sno­ści innerHTML (wnę­trze ele­men­tu): document.getElementById("lista").innerHTML = lista; za­mie­nia całą za­war­tość pu­ste­go <ul id="lista"> na trzy po­zy­cje listy. Po­bie­ra­nie ele­men­tów opi­su­je lekcja o modelu DOM, a same ta­bli­ce lekcja o ta­bli­cach i obiek­tach.
Wła­sność innerHTML wsta­wia napis jako KOD, więc znacz­ni­ki w nim oży­wa­ją, i dla­te­go nie wkłada się tam su­ro­we­go tekstu od użyt­kow­ni­ka: do samego tekstu służy textContent. Star­sze document.write, obecne w wielu py­ta­niach z banku, do­pi­su­je wynik wprost do do­ku­men­tu w trak­cie jego wczy­ty­wa­nia, ale wy­wo­ła­ne po za­ła­do­wa­niu strony kasuje całą jej treść, więc w praw­dzi­wym skryp­cie zo­sta­je innerHTML.

Na eg­za­mi­nie

Py­ta­nia pi­sem­ne o in­struk­cje ste­ru­ją­ce mają kilka sta­łych kształ­tów. Ramka z pętlą i py­ta­nie o liczbę wy­ko­nań albo o ko­lej­no wy­pi­sy­wa­ne war­to­ści: wypisz war­to­ści licz­ni­ka po kolei, pa­mię­ta­jąc, że wa­ru­nek ze zna­kiem < daje o jeden obrót mniej niż ten sam wa­ru­nek ze zna­kiem <=. Po­le­ce­nie „wskaż pętlę, która wy­świe­tli sześć ko­lej­nych liczb pa­rzy­stych": licz­nik star­tu­je od 2, krok to i += 2, a gra­ni­ca musi być do­mknię­ta, czyli i <= 12. Zapis wa­run­ku na prze­dział: prze­dział do­mknię­ty z dwóch stron wymaga &&, a „przy­naj­mniej jeden z dwóch przy­pad­ków" to || między gru­pa­mi, z && w środku każdej z nich. Pętla wy­ko­nu­ją­ca się co naj­mniej raz to do...while, a pętla po wszyst­kich war­to­ściach ta­bli­cy bez licz­ni­ka to for...of. Osobny kształt to szu­ka­nie błędu w go­to­wym skryp­cie: bywa nim ope­ra­tor po­rów­na­nia wsta­wio­ny za­miast przy­pi­sa­nia, przy­pi­sa­nie za­miast po­rów­na­nia albo przy­pi­sa­nie nowej war­to­ści do stałej const.
Kilka od­po­wie­dzi myli się re­gu­lar­nie. break prze­ry­wa całą pętlę, a continue tylko bie­żą­cy obrót, więc po continue pętla kręci się dalej i liczba ob­ro­tów zo­sta­je ta sama. Brak break w switch daje prze­lot na ko­lej­ne przy­pad­ki, a nie skok do default. Pętla for...in oddaje indeks, nie war­tość, więc wy­pi­su­je 0, 1, 2 za­miast nazw pro­duk­tów. Liczbę pa­rzy­stą wy­bie­ra reszta z dzie­le­nia przez 2 równa zeru, czyli liczba % 2 === 0, nie iloraz.
W za­da­niu prak­tycz­nym po­le­ce­nie brzmi zwykle: „skrypt spraw­dza, czy w polu wpi­sa­no liczbę z po­da­ne­go za­kre­su, i wy­świe­tla ko­mu­ni­kat" albo „skrypt wy­peł­nia listę danymi z ta­bli­cy". Pierw­sze to jeden if z wa­run­kiem zło­żo­nym oraz ko­mu­ni­kat po­ka­za­ny przez alert lub wsta­wio­ny do wska­za­ne­go ele­men­tu, drugie to pętla bu­du­ją­ca napis z <li> i jedno przy­pi­sa­nie do innerHTML. Uru­cho­mie­niem ta­kie­go kodu z przy­ci­sku zaj­mu­je się lekcja o zda­rze­niach i for­mu­la­rzach, a do­łą­cze­niem pliku .js do strony lekcja o pierw­szym skryp­cie.

Ściąga

Zapis
Znaczy
if (warunek) { }
wy­ko­naj blok, gdy wa­ru­nek jest praw­dzi­wy
else if (warunek) { }
ko­lej­ne py­ta­nie, spraw­dza­ne po nie­uda­nym po­przed­nim
else { }
droga na wy­pa­dek, gdy żaden wa­ru­nek nie był praw­dzi­wy
if (a > 100 && a <= 200) { }
wa­ru­nek zło­żo­ny, prze­dział za­mknię­ty z dwóch stron
switch (x) { case 1: }
wybór jed­ne­go przy­pad­ku z listy, po­rów­na­nie jak ===
default:
przy­pa­dek dla war­to­ści spoza listy, nie­obo­wiąz­ko­wy
for (let i = 0; i < 5; i++)
5 ob­ro­tów, licz­nik przyj­mu­je war­to­ści od 0 do 4
while (i < 5) { }
wa­ru­nek przed ob­ro­tem, może nie wy­ko­nać się ani razu
do { } while (i < 5);
wa­ru­nek po ob­ro­cie, wykona się co naj­mniej raz
for (const w of tab)
po war­to­ściach ta­bli­cy, bez licz­ni­ka
for (const k in tab)
po in­dek­sach ta­bli­cy i klu­czach obiek­tu
break;
wyj­ście z całej pętli albo koniec przy­pad­ku w switch
continue;
po­mi­nię­cie reszty obrotu, przej­ście do na­stęp­ne­go
el.innerHTML = tekst;
wsta­wie­nie napisu do ele­men­tu jako kodu HTML
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: JavaScript: zmienne, typy i operatorynastępna: JavaScript: funkcje, parametry i zasięgspis działu: JavaScript

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (47)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulamin
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.