Ćwiczenia z JavaScript – podstawowe konstrukcje

JavaScript to język programowania uruchamiany w przeglądarce, który dodaje stronie interaktywność – reaguje na kliknięcia, zmienia treść, wykonuje obliczenia.

Na tej stronie przećwiczysz pięć podstawowych zagadnień: wyświetlanie komunikatów, zmienne, operatory, instrukcje warunkowe oraz instrukcję switch. Każde ćwiczenie ma krótki opis, przycisk i przykład kodu.

1. Wyświetlanie komunikatów

Co to jest? Funkcja alert() wyświetla proste okno z komunikatem i przyciskiem OK. Służy do krótkich powiadomień dla użytkownika, np. „operacja zakończona”.

Kliknij przycisk, aby zobaczyć komunikat w oknie dialogowym.

function showMessage() {
    alert('Witaj w JavaScript!');
}

2. Zmienne i ich typy

Co to jest? Zmienna przechowuje dane w pamięci programu – np. liczbę, tekst, wartość logiczną. W JavaScript typ zmiennej wynika z przypisanej wartości, a dane można podejrzeć w konsoli (F12 → Console).

Kliknij przycisk, a wartości zmiennych zostaną wypisane w konsoli przeglądarki.

function testVariables() {
    let number = 10;
    let text = "To jest tekst";
    let isTrue = true;
    console.log("Liczba:", number);
    console.log("Tekst:", text);
    console.log("Wartość logiczna:", isTrue);
    alert("Sprawdź konsolę przeglądarki (F12 → Console)");
}

3. Operatory arytmetyczne

Co to jest? Operatory +, -, *, /, % służą do wykonywania obliczeń na liczbach. W tym przykładzie wczytujesz wartości z pól tekstowych, zamieniasz je na liczby i obliczasz sumę.

Wprowadź dwie liczby i zobacz wynik dodawania.

function calculate() {
    let num1 = parseFloat(document.getElementById("num1").value);
    let num2 = parseFloat(document.getElementById("num2").value);
    let sum = num1 + num2;
    document.getElementById("result").innerText = "Suma: " + sum;
}

4. Instrukcja warunkowa if

Co to jest? Instrukcja if pozwala wykonać blok kodu tylko wtedy, gdy spełniony jest warunek, np. liczba jest parzysta. W przeciwnym razie można wykonać kod z gałęzi else.

Sprawdź, czy podana liczba jest parzysta czy nieparzysta.

function checkEvenOdd() {
    let number = parseInt(document.getElementById("number").value);
    let message = (number % 2 === 0)
        ? "Liczba jest parzysta"
        : "Liczba jest nieparzysta";
    document.getElementById("evenOddResult").innerText = message;
}

5. Instrukcja switch

Co to jest? switch wybiera jeden z wielu przypadków (case) na podstawie jednej wartości, np. numeru dnia tygodnia. Jest wygodny, gdy masz dużo if/else porównujących tę samą zmienną.

Podaj liczbę 1–7, aby zobaczyć nazwę dnia tygodnia.

function getDayName() {
    let dayNumber = parseInt(document.getElementById("dayNumber").value);
    let dayName;
    switch(dayNumber) {
        case 1: dayName = "Poniedziałek"; break;
        case 2: dayName = "Wtorek"; break;
        case 3: dayName = "Środa"; break;
        case 4: dayName = "Czwartek"; break;
        case 5: dayName = "Piątek"; break;
        case 6: dayName = "Sobota"; break;
        case 7: dayName = "Niedziela"; break;
        default: dayName = "Nieprawidłowy numer dnia";
    }
    document.getElementById("dayResult").innerText = dayName;
}