Pętle

Komputer nie nudzi się powtarzaniem – pętla (loop) każe mu wykonać ten sam fragment kodu wiele razy: policzyć sumę dziesięciu cen, sprawdzić każdy checkbox, wygenerować dziesięć obrazków, zamieniać liczbę na binarną cyfra po cyfrze. W tej lekcji poznasz cztery rodzaje pętli, nauczysz się śledzić je krok po kroku (to umiejętność, którą sprawdza część pisemna) i zamieniać opis algorytmu z arkusza na działający kod.

Po co pętla?

Bez pętli powtarzanie oznacza kopiowanie linii:

console.log("Odliczanie: 3");
console.log("Odliczanie: 2");
console.log("Odliczanie: 1");
console.log("Start!");

Trzy linie to jeszcze nic, ale przy stu liniach – albo gdy liczba powtórzeń zależy od danych – kopiowanie przestaje działać. Pętla zapisuje to samo raz:

for (let i = 3; i >= 1; i--) {
  console.log("Odliczanie: " + i);
}
console.log("Start!");

Pętla for

for to pętla z licznikiem. W nawiasie podajesz trzy rzeczy rozdzielone średnikami:

for (inicjalizacja; warunek; krok) {
  // ciało pętli – wykonuje się, dopóki warunek jest prawdziwy
}

1. Inicjalizacja (let i = 0) – wykonuje się raz, na początku.
2. Warunek (i < 3) – sprawdzany przed każdym obiegiem; false kończy pętlę.
3. Ciało – wykonuje się, gdy warunek dał true.
4. Krok (i++) – wykonuje się po ciele, przed kolejnym sprawdzeniem warunku.

for (let i = 0; i < 3; i++) {
console.log(i);
}

for (let i = 0; i < 3; i++) {
  console.log("obieg, i =", i);
}
console.log("koniec pętli");

Śledzenie pętli w tabeli

Zanim uruchomisz pętlę, rozpisz ją w tabeli. Dla for (let i = 0; i < 100; i += 10) z document.write(i + ' '):

Wynik: 0 10 20 30 40 50 60 70 80 90 – 10 obiegów, a i + ' ' to konkatenacja liczby z napisem, więc wyjście jest tekstem ze spacjami.

let wynik = "";
for (let i = 0; i < 100; i += 10) {
  wynik += i + " ";           // liczba + napis → napis
}
console.log(wynik);

Trzy typowe warianty

// od 1 do n włącznie – zauważ <=
const n = 5;
for (let i = 1; i <= n; i++) {
  console.log(i);
}

// w dół
for (let i = 3; i > 0; i--) {
  console.log("w dół:", i);
}

// co 2 – liczby parzyste od 2 do 10
for (let i = 2; i <= 10; i += 2) {
  console.log("parzysta:", i);
}

Pętla while

while ma tylko warunek. Sprawdza go przed każdym obiegiem i wykonuje ciało, dopóki jest prawdziwy. Używaj jej, gdy nie wiesz z góry, ile będzie obiegów – np. „dziel, dopóki wynik jest większy od zera”.

let liczba = 37;
let polowienia = 0;
while (liczba > 1) {
  liczba = Math.floor(liczba / 2);
  polowienia++;
}
console.log("Po", polowienia, "połowieniach zostało", liczba); // 5 połowień

Inicjalizację i krok musisz napisać sam – przed pętlą i w jej ciele. Zapomnisz o kroku – pętla nigdy się nie skończy.

for ⇄ while – równoważność

Każdy for da się zapisać jako while, przenosząc inicjalizację przed pętlę, a krok na koniec ciała. To typowe pytanie z arkuszy EE.09.

// wersja for
let a = "";
for (let i = 0; i < 100; i += 10) {
  a += i + " ";
}

// równoważna wersja while
let b = "";
let i = 0;                 // 1. inicjalizacja PRZED pętlą
while (i < 100) {          // 2. ten sam warunek
  b += i + " ";            // 3. to samo ciało
  i += 10;                 // 4. krok NA KOŃCU ciała
}

console.log(a);
console.log(b);
console.log(a === b);      // true

Pętla do … while

Odwrotność while: ciało wykonuje się najpierw, warunek jest sprawdzany po nim. Pętla wykona się więc co najmniej raz – przydatne, gdy pytasz użytkownika o dane, dopóki nie poda poprawnych.

let proba = 0;
do {
  proba++;
  console.log("Próba numer", proba);
} while (proba < 3);
console.log("Łącznie prób:", proba); // 3

// nawet gdy warunek od razu jest fałszywy, ciało wykona się raz
let x = 100;
do {
  console.log("x =", x, "– to się wypisze, mimo że 100 < 10 jest false");
} while (x < 10);

break i continue

break natychmiast kończy pętlę. continue przerywa tylko bieżący obieg i przechodzi do kroku i warunku.

// break – szukamy pierwszej liczby podzielnej przez 7 większej od 50
for (let i = 51; i < 100; i++) {
  if (i % 7 === 0) {
    console.log("Pierwsza podzielna przez 7:", i);
    break;                         // dalej nie ma sensu szukać
  }
}

// continue – pomijamy liczby nieparzyste
let parzyste = "";
for (let i = 1; i <= 10; i++) {
  if (i % 2 !== 0) {
    continue;                      // wracamy do i++ i warunku
  }
  parzyste += i + " ";
}
console.log(parzyste);

W switch wewnątrz pętli break kończy tylko switch, nie pętlę – to częsty błąd.

Pętla po tablicy i po napisie

Tablice poznasz dokładnie w lekcji Tablice. Na teraz wystarczy: tablica to lista wartości w nawiasach kwadratowych, tab.length to liczba elementów, a tab[i] to element o indeksie i – indeksy liczymy od 0, więc ostatni ma indeks length - 1.

Klasyczny for z indeksem

const liczby = [3, 8, 5, 12, 7, 6];
let sumaParzystych = 0;

for (let i = 0; i < liczby.length; i++) {
  if (liczby[i] % 2 === 0) {      // reszta z dzielenia 0 → liczba parzysta
    sumaParzystych += liczby[i];
  }
}
console.log("Suma parzystych:", sumaParzystych); // 8 + 12 + 6 = 26

To schemat z pytań typu „co liczy pętla?” z arkuszy EE.09. Czytasz go tak: zmienna startuje od zera, w pętli coś do niej dodajemy pod warunkiem % 2 == 0 – więc to suma elementów parzystych. Dystraktory: „suma wszystkich”, „suma nieparzystych”, „liczba parzystych” (to byłoby wynik++).

for … of – gdy indeks nie jest potrzebny

const kursy = ["HTML", "CSS", "JavaScript"];
for (const nazwa of kursy) {
  console.log("Kurs:", nazwa);
}

// działa też na napisie – znak po znaku
let odwrocony = "";
for (const znak of "kajak") {
  odwrocony = znak + odwrocony;   // doklejamy każdy znak Z PRZODU
}
console.log(odwrocony);            // kajak (palindrom), spróbuj z "kot"

for…of jest krótsze i nie da się pomylić o jeden. Gdy potrzebujesz numeru elementu (np. „obraz 1.jpg, 2.jpg…”), użyj klasycznego for.

var liczby = [4, 7, 10, 3];
var wynik = 0;
for (var i = 0; i < liczby.length; i++) {
if (liczby[i] > 5) {
  wynik++;
}
}
console.log(wynik);

Sumowanie, zliczanie, szukanie – wzorzec akumulatora

Większość pętli w zadaniach ma ten sam szkielet: zmienna startowa przed pętlą, aktualizacja w pętli, odczyt po pętli.

const oceny = [4, 5, 3, 5, 2, 4];

let suma = 0;
let ileDobrych = 0;
let najwyzsza = oceny[0];

for (const ocena of oceny) {
  suma += ocena;
  if (ocena >= 4) {
    ileDobrych++;
  }
  if (ocena > najwyzsza) {
    najwyzsza = ocena;
  }
}

console.log("Średnia:", (suma / oceny.length).toFixed(2));
console.log("Ocen 4 lub wyższych:", ileDobrych);
console.log("Najwyższa:", najwyzsza);

Pętle zagnieżdżone

Pętla w pętli: wewnętrzna wykonuje się w całości przy każdym obiegu zewnętrznej. Dwie pętle po 3 obiegi dają 9 wykonań ciała.

for (let wiersz = 1; wiersz <= 3; wiersz++) {
  let linia = "";
  for (let kolumna = 1; kolumna <= 5; kolumna++) {
    linia += (wiersz * kolumna) + "\t";
  }
  console.log(linia);
}

Zmienna linia jest deklarowana w zewnętrznej pętli, więc każdy wiersz zaczyna się od pustego napisu.

Algorytm z opisu krokowego

Arkusz praktyczny czasem podaje algorytm „po ludzku” i oczekuje pętli (styczeń 2025, INF.03-06-25.01 – konwersja na system binarny). Trening: suma cyfr liczby.

Opis: „Dopóki liczba jest większa od zera: weź resztę z dzielenia przez 10 (ostatnia cyfra), dodaj ją do sumy, a liczbę podziel całkowicie przez 10.”

Tabela śledzenia dla 472:

let liczba = 472;
let suma = 0;

while (liczba > 0) {
  const cyfra = liczba % 10;          // ostatnia cyfra
  suma += cyfra;
  liczba = Math.floor(liczba / 10);   // „dzielenie całkowite” – obcinamy część ułamkową
}
console.log("Suma cyfr:", suma);      // 13

Przepis na każdy taki algorytm: (1) nazwij zmienne z opisu, (2) „dopóki” → while, „dla każdego” → for, (3) każdą czynność z opisu zamień na jedną linię, (4) rozpisz tabelę dla małej liczby i porównaj z konsolą.

Zapowiedź: pętla generuje elementy strony

W jednym z arkuszy ze stycznia 2026 pętla tworzy dziesięć obrazków. Tworzenie elementów poznasz w lekcji Tworzenie elementów; dziś pętla skleja tylko tekst listy.

<button id="generuj">Wygeneruj listę</button>
<ol id="lista"></ol>

const przycisk = document.getElementById('generuj');
const lista = document.getElementById('lista');

przycisk.addEventListener('click', () => {
  let elementy = '';
  for (let numer = 1; numer <= 5; numer++) {
    elementy += `<li>Wzór numer ${numer} (plik ${numer}.jpg)</li>`;
  }
  lista.innerHTML = elementy;
});

Na egzaminie

Ściąga

Zadania

// Wersja 1: krok co 2
let linia1 = "";
let suma1 = 0;
for (let i = 2; i <= 20; i += 2) {
  linia1 += i + " ";
  suma1 += i;
}
console.log(linia1.trim());
console.log("Suma:", suma1);

// Wersja 2: wszystkie liczby, nieparzyste pomijamy
let linia2 = "";
let suma2 = 0;
for (let i = 1; i <= 20; i++) {
  if (i % 2 !== 0) {
    continue;                 // nieparzysta – do następnego obiegu
  }
  linia2 += i + " ";
  suma2 += i;
}
console.log(linia2.trim());
console.log("Suma:", suma2, "| zgodne:", suma1 === suma2);

let x = 1;
let licznik = 0;
for (let i = 1; i <= 6; i++) {
  x = x * 2;
  if (x > 20) {
    licznik++;
  }
}
console.log(x, licznik);

// oryginał
let x = 1;
let licznik = 0;
for (let i = 1; i <= 6; i++) {
  x = x * 2;
  if (x > 20) {
    licznik++;
  }
}
console.log(x, licznik);

// wersja while – inicjalizacja przed, krok na końcu ciała
let x2 = 1;
let licznik2 = 0;
let i = 1;
while (i <= 6) {
  x2 = x2 * 2;
  if (x2 > 20) {
    licznik2++;
  }
  i++;
}
console.log(x2, licznik2);

const oceny = [3, 5, 4, 2, 5, 1, 4];

let suma = 0;
let najwyzsza = oceny[0];
let najnizsza = oceny[0];
let ileJedynek = 0;
let jestPiatka = false;
let lista = "";

for (let i = 0; i < oceny.length; i++) {
  const ocena = oceny[i];
  suma += ocena;
  if (ocena > najwyzsza) najwyzsza = ocena;
  if (ocena < najnizsza) najnizsza = ocena;
  if (ocena === 1) ileJedynek++;
  if (ocena === 5) jestPiatka = true;

  // przecinek tylko PRZED elementami, które nie są pierwsze
  if (i > 0) {
    lista += ", ";
  }
  lista += ocena;
}

console.log("Średnia:", (suma / oceny.length).toFixed(2)); // 3.43
console.log("Najwyższa:", najwyzsza, "Najniższa:", najnizsza);
console.log("Jedynek:", ileJedynek, "| jest piątka:", jestPiatka);
console.log(lista);

function naBinarny(liczba) {
  if (liczba === 0) {
    return "0";                      // algorytm z while nie wykonałby się ani razu
  }

  // Krok 1: zbieramy reszty z dzielenia przez 2
  let reszty = "";
  let pozostalo = liczba;
  while (pozostalo > 0) {
    reszty += pozostalo % 2;         // 0 lub 1 doklejane jako znak
    pozostalo = Math.floor(pozostalo / 2);
  }

  // Krok 2: odwracamy – pierwsza reszta to ostatnia cyfra
  let binarnie = "";
  for (const cyfra of reszty) {
    binarnie = cyfra + binarnie;
  }

  // Krok 3: spacja co 4 cyfry od PRAWEJ – idziemy od końca i liczymy znaki
  let pogrupowane = "";
  let licznikCyfr = 0;
  for (let i = binarnie.length - 1; i >= 0; i--) {
    if (licznikCyfr > 0 && licznikCyfr % 4 === 0) {
      pogrupowane = " " + pogrupowane;
    }
    pogrupowane = binarnie[i] + pogrupowane;
    licznikCyfr++;
  }
  return pogrupowane;
}

console.log(naBinarny(5));      // 101
console.log(naBinarny(181));    // 1011 0101
console.log(naBinarny(1000));   // 11 1110 1000
console.log(naBinarny(0));      // 0

// kontrola wbudowaną metodą (na egzaminie – tylko do sprawdzenia siebie)
console.log((181).toString(2) === naBinarny(181).replace(/ /g, "")); // true

function generujGalerie(ile) {
  let html = "";
  for (let numer = 1; numer <= ile; numer++) {     // od 1 do ile włącznie – nie od 0!
    html += `<img src="${numer}.jpg" alt="Wzór nr ${numer}" title="Wzór nr ${numer}" class="wzory">\n`;
  }
  return html;
}

const kod = generujGalerie(10);
console.log(kod);
console.log("Liczba obrazów:", kod.split("\n").length - 1); // 10 (ostatni \n daje pusty element)

Test powtórkowy

for (var i = 0; i < 100; i += 10) {
document.write(i + ' ');
}

var wynik = 0;
for (var i = 0; i < liczby.length; i++) {
if (liczby[i] % 2 == 0) {
  wynik += liczby[i];
}
}

var tekst = "";
var i = 10;
do {
tekst += i + ",";
i += 5;
} while (i < 10);
console.log(tekst);

var tab = [5, 1, 8, 3];
var m = tab[0];
for (var i = 1; i < tab.length; i++) {
if (tab[i] > m) {
  m = tab[i];
}
}
document.write(m);