INF.03 · JavaScript

Instrukcje warunkowe i pętle w JavaScript

Warunek wybiera, pętla powtarza

  • Kod → próba → wniosek
  • DOM i zdarzenia
  • Własny projekt

Po tej lekcji: Zapiszesz kompletne rozgałęzienie i pętlę bez błędu o jeden.

Jedna decyzja, rozłączne wyniki

if sprawdza warunek w nawiasie. else if sprawdza kolejny tylko wtedy, gdy wcześniejszy był fałszywy. else obsługuje pozostałe przypadki. Zakresy układaj świadomie: jeśli najpierw wiek>=12, późniejsze wiek>=18 nigdy nie zostanie osiągnięte. Do porównania używaj ===, nie przypisania =. Bloki zamykaj klamrami i wcinaj kod.

Jak wybrać pętlę?

for ma start, warunek i krok: for(let i=0;i<3;i++). Przechodzi przez 0,1,2 — trzy razy. while sprawdza warunek przed każdą iteracją, do...while po niej, więc wykona się co najmniej raz. for...of pobiera wartości tablicy. Nie używaj for...in jako zamiennika: to klucze właściwości. Zadbaj, żeby warunek mógł stać się fałszywy. break kończy pętlę, continue przechodzi do kolejnej iteracji.

Od tablicy do rachunku

Na arkuszu często trzeba zsumować wybrane opcje, przeliczyć raty albo pominąć puste elementy. Zmienną sumy ustaw przed pętlą. Pusta tablica daje sumę 0, a indeks ostatniego elementu to length-1. switch może wybrać przypadek po wartości; break zapobiega przejściu do kolejnego case. W projekcie kalkulatora sprawdź najpierw dane, dopiero licz.

Najpierw krótki przykład, potem cały projekt

Każdy krótki przykład uruchamiaj osobno: w oddzielnym pliku skrypt.js lub na nowej pustej stronie. Nie doklejaj kilku przykładów z tym samym const do jednego pliku, bo ponowna deklaracja tej samej nazwy jest błędem. Przykłady konsolowe pokażą wynik w F12 → Console. Przy przykładach DOM najpierw utwórz wskazane elementy HTML i podłącz skrypt z defer. Fragment wymagający gotowego projektu jest tak oznaczony — wykonuj go w jego kontekście, nie jako pustą stronę.

if / else if / else — wybierz jedną gałąź

Warunek to wyrażenie sprawdzane przed blokiem. W zwykłym porównaniu dostajesz true albo false. Klamry obejmują instrukcje, które mają wykonać się razem.

Podstawowa forma: if (warunek) { wykonanie; } else if (innyWarunek) { wykonanie; } else { wykonanie; }

if-js.jsjavascript
const wiek = 16;
if (wiek >= 18) {
    console.log('normalny');
} else if (wiek >= 13) {
    console.log('młodzieżowy');
} else {
    console.log('dziecięcy');
}
Wynik
młodzieżowy
  1. 16 >= 18 jest fałszem: pomijamy pierwszy blok. 16 >= 13 jest prawdą: wypisujemy młodzieżowy.
  2. Po wykonaniu pasującej gałęzi nie przechodzimy do else. Dla 12 zadziała else, dla 18 pierwszy blok.
  3. >= to większe lub równe. === porównuje bez konwersji typów, a = przypisuje — nie zamieniaj ich w warunku.
  4. Nie dopisuj średnika po if(...). Wcięcie pokazuje blok, ale jego granice ustalają klamry.

for — początek, warunek, krok

Ponumeruj trzy seanse. W nagłówku są trzy części oddzielone średnikami.

Podstawowa forma: for (poczatek; warunek; zmiana) { instrukcje; }

for-js.jsjavascript
for (let numer = 1; numer <= 3; numer++) {
    console.log(`Seans ${numer}`);
}
Wynik
Seans 1
Seans 2
Seans 3
  1. let numer = 1 wykona się raz. Następnie sprawdzamy numer <= 3 i wykonujemy blok, jeśli to prawda.
  2. numer++ zwiększa wartość po obiegu, potem ponownie sprawdzamy warunek. Wypisujemy 1, 2, 3; przy 4 kończymy.
  3. Tekst między odwrotnymi apostrofami to template literal. ${numer} wstawia aktualną wartość zmiennej do tekstu.
  4. Przy numer < 3 byłyby dwa obiegi. Początek 0 i warunek <=3 dałyby cztery — sprawdź granice.

while — warunek sprawdzany przed każdym obiegiem

Licznik jest ustawiony przed pętlą, a zmiana potrzebna do końca znajduje się w jej ciele.

Podstawowa forma: while (warunek) { instrukcje; zmianaStanu; }

while-js.jsjavascript
let bilety = 2;
while (bilety > 0) {
    console.log(bilety);
    bilety--;
}
console.log('koniec');
Wynik
2
1
koniec
  1. Najpierw sprawdzamy 2 > 0, wypisujemy 2 i zmniejszamy do 1.
  2. Następnie sprawdzamy 1 > 0, wypisujemy 1 i zmniejszamy do 0. Przy 0 kończymy.
  3. Dla początkowego 0 ciało nie wykona się ani razu. Bez bilety-- stan nie prowadziłby do końca.

for...of — wartości tablicy, bez licznika

Gdy chcesz przejrzeć wszystkie tytuły, nie musisz sam liczyć indeksów. of wybiera kolejne wartości.

Podstawowa forma: for (const element of tablica) { instrukcje; }

for-of-js.jsjavascript
const filmy = ['Ocean', '', 'Kosmos'];
for (const tytul of filmy) {
    if (tytul === '') {
        continue;
    }
    console.log(tytul);
}
Wynik
Ocean
Kosmos
  1. W każdym obiegu tytul jest aktualną wartością z tablicy. W pierwszym Ocean, w drugim pusty napis, w trzecim Kosmos.
  2. continue pomija resztę danego obiegu: dla pustego tekstu nie dochodzimy do console.log. break zakończyłoby całą pętlę.
  3. for...in odczytuje klucze właściwości, a nie wartości; nie używaj go jako zamiennika tego przykładu. Pusta tablica daje 0 obiegów.

Dwie dodatkowe formy: do...while i switch

do...while najpierw wykonuje blok, a dopiero później sprawdza warunek. switch porównuje jedną wartość z przypadkami.

Podstawowa forma: do { instrukcje; } while (warunek); oraz switch (wartosc) { case wariant: instrukcje; break; default: instrukcje; }

do-switch-js.jsjavascript
let licznik = 0;
do {
    console.log('pierwsza próba');
    licznik++;
} while (licznik < 0);
const gatunek = 'komedia';
switch (gatunek) {
    case 'komedia':
        console.log('lekki seans');
        break;
    default:
        console.log('inny seans');
}
Wynik
pierwsza próba
lekki seans
  1. do wykonuje console.log jeden raz, choć warunek licznik < 0 jest potem fałszywy. Na końcu tego while jest średnik.
  2. switch dopasowuje komedia do case i wypisuje lekki seans. JavaScript używa tu porównania ścisłego (inaczej niż switch w PHP).
  3. break kończy switch. Bez niego wykonanie mogłoby przejść do kolejnych instrukcji case/default. default jest wariantem przy braku dopasowania.

Jak czytać pozostałe zapisy w pełnym przykładzie

ZapisZnaczeniePrzykład użycia
... i [...lista]Spread rozkłada elementy iterowalne. W kalkulatorze [...NodeList] tworzy zwykłą tablicę, aby użyć reduce.[...document.querySelectorAll(":checked")]
reduce(callback, poczatek)Po kolei oblicza nową wartość akumulatora; podany początek0 obsługuje także pustą listę.[1,2].reduce((suma,x) => suma+x, 0)
warunek ? A : BWyrażenie warunkowe zwraca A przy prawdzie, B przy fałszu. Można go użyć po prawej stronie przypisania.gracz = gracz === "O" ? "X" : "O";
Array.isArray / Number.isIntegerKontrolują kształt tablicy i pełną liczbę; nie wykonują konwersji wejścia.Number.isInteger(Number(pole.value))
Object / klucz dynamicznyObiekt przechowuje nazwane wartości; ceny[kod] używa aktualnego napisu w zmiennej kod jako nazwy właściwości.ceny["html"]
Math.floor / Intl.NumberFormatfloor zaokrągla w dół; NumberFormat tworzy obiekt formatujący do tekstu. Obliczenia finansowe projektu są w groszach.Math.floor(1000 / 3)
addEventListener / preventDefaultPierwsza metoda rejestruje funkcję na zdarzenie, druga zatrzymuje jego domyślną akcję (np.wysłanieformularza), nie usuwa innych listenerów.form.addEventListener("submit", e => e.preventDefault());
&& / || / ??&& wymaga prawdy po obu stronach, || wybiera także dla pustego napisu/0, ?? tylko dla null/undefined. Te operatory mogą zwracać operandy, nie wyłącznie bool.znak || "puste"
=== i !==Porównanie bez konwersji typów. Przypisanie ma pojedyncze =.7 === "7" // false

Sprawdź w działaniu

Sprawdź mechanizm na działającym przykładzie

Zmień dane, przewidź wynik i wykonaj próbę. To działający JavaScript tego modelu, nie interpreter dowolnego wklejonego kodu.

Ta interakcja wymaga włączonego JavaScriptu.

Prześledź kod, potem zmień jedną rzecz

skrypt.jsjavascript
const wiek = 16;
let bilet;
if (wiek < 12) {
    bilet = "dziecięcy";
} else if (wiek < 18) {
    bilet = "ulgowy";
} else {
    bilet = "normalny";
}
const ceny = [12999, 24900];
let suma = 0;
for (const cena of ceny) {
    suma += cena;
}
console.log(bilet, suma); // ulgowy, 37899 groszy

Odtwórz przykład u siebie

Zapisz pokazany JavaScript w skrypt.js, a HTML w body zwykłego dokumentu z <!doctype html>, lang="pl", meta charset="UTF-8" i tytułem. W head podłącz <script src="skrypt.js" defer></script>. Przykłady z samym console.log możesz wykonać też w konsoli własnej pustej strony. Nie wklejaj nieznanych skryptów do konsoli zalogowanych serwisów. F12 → Console: sprawdź błędy; Sources: ustaw breakpoint, obejrzyj zmienne i przejdź krokowo.

Projekt: kalkulator kursów i rat

Własny projekt łączy opcje formularza, liczby, warunki i funkcje. Nie jest kopią całego arkusza.

1. HTML: dwa checkboxy kursów i pole liczby rat. Cennik w JS zapisuje 12999 i 24900 groszy. Wybrane elementy wybiera selektor :checked.

2. Number konwertuje tekst; sprawdź pełną liczbę 1–12 i co najmniej jeden kurs. Pętla reduce dodaje ceny wybranych kursów. Równie poprawna jest zwykła pętla for...of.

3. obliczPlan dzieli sumę w groszach, zaokrągla zwykłą ratę w dół i resztę dodaje do ostatniej. Przy sumie 12999 i 3 ratach otrzymasz 4333,4333,4333 groszy. Przy 1000 i 3: 333, 333, 334. Intl.NumberFormat służy tylko do prezentacji.

4. Sprawdź brak wyboru, jeden i dwa kursy, 1 i 12 rat, pustą wartość, 0, 13 i ułamek. Suma rat ma być równa całej cenie. To obliczenie bez odsetek.

Sprawdź w działaniu

Uruchom gotowy projekt i porównaj z kodem

W podglądzie działa gotowy kod. Komplet HTML/CSS/JS pobierzesz w paczce na końcu. Podgląd jest izolowany od konta BitEdu.

Ta interakcja wymaga włączonego JavaScriptu.

Pełny projekt: index.html

kalkulator/index.htmlhtml
<!doctype html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
            Kalkulator warsztatów
        </title>
        <link rel="stylesheet" href="styl.css">
        <script src="skrypt.js" defer>
        </script>
    </head>
    <body>
        <main>
            <h1>
                Kalkulator warsztatów
            </h1>
            <p>
                Wybierz zajęcia. Koszt całkowity liczymy w groszach, bez odsetek. Raty są całkowite; ostatnia wyrównuje resztę.
            </p>
            <label>
                <input type="checkbox" name="kurs" value="html">
                HTML · 129,99 zł
            </label>
            <label>
                <input type="checkbox" name="kurs" value="js">
                JavaScript · 249,00 zł
            </label>
            <form id="formularz">
                <label for="raty">
                    Liczba rat (1–12)
                </label>
                <input id="raty" type="number" min="1" max="12" step="1" required value="3">
                <button>
                    Oblicz
                </button>
            </form>
            <p id="wynik" role="status">
            </p>
        </main>
    </body>
</html>

Pełny projekt: skrypt.js

kalkulator/skrypt.jsjavascript
const ceny = { html: 12999, js: 24900 };
const pieniadze = new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN' });
function obliczPlan(suma, raty) {
    const zwykla = Math.floor(suma / raty);
    return { zwykla, ostatnia: suma - zwykla * (raty - 1) };
}
document.querySelector('#formularz').addEventListener('submit', (zdarzenie) => {
    zdarzenie.preventDefault();
    const pole = document.querySelector('#raty');
    const wybrane = [...document.querySelectorAll('input[name="kurs"]:checked')];
    const raty = Number(pole.value);
    const wynik = document.querySelector('#wynik');
    if (pole.value.trim() === '' || !Number.isInteger(raty) || raty < 1 || raty > 12 || wybrane.length === 0) {
        wynik.textContent = 'Wybierz co najmniej jeden kurs i od 1 do 12 pełnych rat.';
        return;
    }
    const suma = wybrane.reduce((razem, kurs) => razem + ceny[kurs.value], 0);
    const plan = obliczPlan(suma, raty);
    wynik.textContent = `Razem: ${pieniadze.format(suma / 100)}. ` +
        (raty === 1 ? `Jedna rata: ${pieniadze.format(suma / 100)}.` :
        `${raty - 1} rat po ${pieniadze.format(plan.zwykla / 100)}, ostatnia ${pieniadze.format(plan.ostatnia / 100)}.`);
});

Wygląd też jest częścią paczki

Folder projektu zawiera również pełny styl.css, a karty — dane.json. Rozpakuj ZIP JS / WARSZTAT ze „Źródeł i materiałów”. Otwórz index.html; dla dodatkowego odczytu JSON uruchom lokalny serwer opisany w START.txt. Podgląd nie zastępuje wykonania własnej wersji.

Ćwiczenie z pomocą · samodzielna praca

Twoja próba

Przetestuj wiek 11,12,17,18. Zsumuj pustą tablicę i tablicę z jedną ceną. Uzasadnij wyniki.

Oczekiwany rezultat
Zapisz: dane → przewidywany wynik → wynik próby → wyjaśnienie.
Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź

Zacznij od działającego przykładu i przewidź wynik bez uruchamiania.

Krok 2 — pokaż podpowiedź

Zmień jedną instrukcję lub jedną wartość. Obejrzyj Console i stan DOM.

Krok 3 — pokaż podpowiedź

Dodaj przypadek pusty albo graniczny. Jeśli wynik jest inny, ustaw breakpoint.

Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.

Podsumowanie

Co warto zapamiętać

  1. Zapiszesz kompletne rozgałęzienie i pętlę bez błędu o jeden.
  2. Umiesz wskazać przyczynę wyniku w kodzie i sprawdzić przypadek graniczny.
  3. Quiz i dodatkowe zadania są w biurku; kod ocenia nauczyciel.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →
Źródła i dalsza nauka