Logo

JS - instrukcje sterujące

Opis: Zostaną omówione instrukcje warunkowe if, else if, else, różne rodzaje pętli w JavaScript (for, while, for…of, for…in) oraz instrukcja wyboru switch.

Instrukcje warunkowe if, else if, else

Instrukcje warunkowe pozwalają wykonywać określony fragment kodu tylko wtedy, gdy spełniony jest podany warunek. Dzięki nim program może podejmować decyzje i reagować w różny sposób w zależności od danych.

1. if - sprawdzenie warunku

Instrukcja if wykonuje kod tylko wtedy, gdy warunek zwróci wartość true.

Przykład:

let wiek = 20;

if (wiek >= 18) {
  console.log("Jesteś pełnoletni.");
}

Wynik: ponieważ warunek wiek >= 18 jest prawdziwy, program wypisze: Jesteś pełnoletni.

2. else - alternatywa

Jeśli warunek w if nie zostanie spełniony, można użyć else, aby wykonać inny blok kodu.

Przykład:

let wiek = 15;

if (wiek >= 18) {
  console.log("Jesteś pełnoletni.");
} else {
  console.log("Nie masz jeszcze 18 lat.");
}

Wynik: Nie masz jeszcze 18 lat.

3. else if - wiele warunków

Dzięki else if można sprawdzić kilka różnych warunków po kolei.

Przykład:

let ocena = 4;

if (ocena === 5) {
  console.log("Bardzo dobry");
} else if (ocena === 4) {
  console.log("Dobry");
} else if (ocena === 3) {
  console.log("Dostateczny");
} else {
  console.log("Inna ocena");
}

Wynik: Dobry

Pętle w JavaScript: for, while, for...of, for...in

Pętle w JavaScript służą do wielokrotnego wykonywania tego samego fragmentu kodu, dopóki spełniony jest określony warunek. Dzięki nim można łatwo przetwarzać dane, np. elementy tablicy lub właściwości obiektu.

1. Pętla for

Najczęściej używana, gdy z góry wiadomo, ile razy ma się powtórzyć kod.

Składnia:

for (inicjalizacja; warunek; zmiana) {
  // kod do wykonania
}

Przykład:

for (let i = 1; i <= 5; i++) {
  console.log("Liczba: " + i);
}

Wynik: wypisze liczby od 1 do 5.

2. Pętla while

Wykonuje kod tak długo, jak warunek jest prawdziwy.

Przykład:

let licznik = 1;
while (licznik <= 3) {
  console.log("Iteracja nr " + licznik);
  licznik++;
}

Wynik: wypisze Iteracja nr 1, Iteracja nr 2, Iteracja nr 3.

3. Pętla for...of

Służy do iterowania (przechodzenia) po elementach tablicy lub ciągu znaków (stringa).

Przykład:

let owoce = ["jabłko", "banan", "gruszka"];

for (let owoc of owoce) {
  console.log(owoc);
}

Wynik: jabłko, banan, gruszka.

4. Pętla for...in

Służy do przechodzenia po kluczach (właściwościach) obiektu.

Przykład:

let osoba = { imie: "Jan", wiek: 25, miasto: "Kraków" };

for (let klucz in osoba) {
  console.log(klucz + ": " + osoba[klucz]);
}

Wynik:

imie: Jan  
wiek: 25  
miasto: Kraków

Podsumowanie:

  • for - liczona pętla, znana liczba powtórzeń.

  • while - powtarza kod, dopóki warunek jest prawdziwy.

  • for...of - przechodzi po elementach tablicy lub tekstu.

  • for...in - przechodzi po właściwościach obiektu.

Instrukcja switch w JavaScript

Instrukcja switch służy do podejmowania decyzji w zależności od wartości zmiennej lub wyrażenia.
Działa podobnie do wielu instrukcji if...else if, ale jest bardziej przejrzysta, gdy trzeba sprawdzić wiele możliwych przypadków (wartości).

Składnia ogólna:

switch (wyrażenie) {
  case wartosc1:
    // kod do wykonania, jeśli wyrażenie === wartosc1
    break;
  case wartosc2:
    // kod do wykonania, jeśli wyrażenie === wartosc2
    break;
  default:
    // kod do wykonania, jeśli żadna wartość nie pasuje
}

Opis działania:

  1. Program porównuje wartość podaną w switch z kolejnymi case.

  2. Gdy znajdzie dopasowanie (===), wykonuje kod przypisany do danego przypadku.

  3. Instrukcja break zatrzymuje dalsze sprawdzanie - jeśli jej zabraknie, wykonanie przejdzie do następnego case.

  4. Sekcja default działa jak else - uruchamia się, jeśli żaden przypadek nie pasuje.

Przykład 1 - dni tygodnia:

let dzien = 3;
let nazwaDnia;

switch (dzien) {
  case 1:
    nazwaDnia = "Poniedziałek";
    break;
  case 2:
    nazwaDnia = "Wtorek";
    break;
  case 3:
    nazwaDnia = "Środa";
    break;
  case 4:
    nazwaDnia = "Czwartek";
    break;
  case 5:
    nazwaDnia = "Piątek";
    break;
  default:
    nazwaDnia = "Weekend!";
}

console.log("Dzień tygodnia: " + nazwaDnia);

Wynik: Dzień tygodnia: Środa

Przykład 2 - grupowanie przypadków:

Można połączyć kilka przypadków, jeśli mają wykonać ten sam kod.

let owoc = "jabłko";

switch (owoc) {
  case "jabłko":
  case "gruszka":
  case "śliwka":
    console.log("To owoc krajowy.");
    break;
  case "banan":
  case "mango":
    console.log("To owoc egzotyczny.");
    break;
  default:
    console.log("Nieznany owoc.");
}

Wynik: To owoc krajowy.

Podsumowanie:

  • switch sprawdza wiele możliwych wartości jednej zmiennej.

  • case oznacza konkretny przypadek do porównania.

  • break kończy wykonywanie po znalezieniu dopasowania.

  • default uruchamia się, gdy żaden case nie pasuje.

  • Ułatwia czytelność kodu, gdy zamiast wielu if...else potrzebne są liczne porównania tej samej zmiennej.

Zadania - Instrukcje sterujące w JS

Zadanie 1 - Sprawdzanie liczby (if, else if, else)

Napisz program, który sprawdzi, czy liczba podana przez użytkownika jest ujemna, zerowa czy dodatnia.

  • Utwórz plik HTML z polem tekstowym i przyciskiem.

  • Po kliknięciu przycisku odczytaj liczbę wpisaną przez użytkownika (np. za pomocą prompt() lub z pola <input>).

  • Użyj instrukcji if, else if, else, aby sprawdzić wartość liczby.

  • Wyświetl odpowiedni komunikat za pomocą alert().

Wynik działania programu:
Po wpisaniu liczby:

Podaj liczbę: -5

Pojawia się komunikat:

Liczba jest ujemna.

Zadanie 2 - Liczenie sumy elementów tablicy (pętle for, while, for…of, for…in)

Napisz program, który obliczy sumę liczb zapisanych w tablicy.

  • Utwórz tablicę z kilkoma liczbami, np. [2, 5, 8, 10].

  • Oblicz sumę elementów tablicy, korzystając z różnych pętli: for, while, for...of.

  • Wyświetl wynik w konsoli (console.log()).

  • Dodatkowo, użyj pętli for...in, aby wyświetlić indeksy wszystkich elementów tablicy.

Wynik działania programu:

Suma elementów tablicy: 25
Indeksy elementów: 0, 1, 2, 3

Zadanie 3 - Ocena z testu (instrukcja switch)

Napisz program, który na podstawie liczby punktów przydzieli ocenę.

  • Użytkownik wpisuje liczbę punktów (0–100).

  • Na podstawie podanych progów (np. 0-39: niedostateczny, 40-54: dopuszczający, 55-69: dostateczny, 70–84: dobry, 85-94: bardzo dobry, 95-100: celujący) przypisz ocenę.

  • Użyj instrukcji switch, aby wyświetlić odpowiedni komunikat.

  • Wynik pokaż w okienku alert().

Wynik działania programu:

Podaj liczbę punktów: 78
Twoja ocena: dobry

Zadanie 4 - Sprawdzanie parzystości liczby (if, else)

Napisz program, który sprawdzi, czy podana liczba jest parzysta, czy nieparzysta.

  • Utwórz plik HTML z przyciskiem.

  • Po kliknięciu przycisku poproś użytkownika o podanie liczby za pomocą prompt() lub z pola <input>.

  • Użyj instrukcji if...else, aby sprawdzić, czy liczba podzielna jest przez 2.

  • Wyświetl komunikat w alert() z odpowiednim wynikiem.

Wynik działania programu:

Podaj liczbę: 7  
Liczba jest nieparzysta.

Zadanie 5 - Odliczanie za pomocą pętli while

Napisz program, który odlicza od 10 do 1, a następnie wyświetla komunikat „Start!”.

  • Użyj pętli while, aby w konsoli (console.log()) wypisać liczby od 10 do 1.

  • Po zakończeniu pętli wyświetl w konsoli napis „Start!”.

Wynik działania programu:

10  
9  
8  
7  
6  
5  
4  
3  
2  
1  
Start!

Zadanie 6 - Rozpoznawanie dnia tygodnia (switch)

Napisz program, który po wpisaniu numeru dnia tygodnia (1–7) wyświetli jego nazwę.

  • Poproś użytkownika o podanie liczby z zakresu 1–7.

  • Użyj instrukcji switch, aby przypisać do liczby odpowiedni dzień (1 - poniedziałek, 2 - wtorek, itd.).

  • Wyświetl wynik w alert().

  • Jeśli użytkownik poda inną liczbę, pokaż komunikat: „Nie ma takiego dnia tygodnia”.

Wynik działania programu:

Podaj numer dnia tygodnia: 3  
Dzień tygodnia: Środa