Nauka i ćwiczenia z JavaScript

JavaScript to język programowania, który dodaje stronie internetowej interaktywność – reaguje na kliknięcia, zmienia treść, liczy dane, wysyła formularze.

Przeglądarka wykonuje skrypty JavaScript bezpośrednio po stronie użytkownika (tzw. front‑end), dzięki czemu strona nie jest tylko „obrazkiem”, ale prawdziwą aplikacją.

Poniżej najpierw zobaczysz krótkie przykłady „co robi kod”, a potem serię ćwiczeń, którymi możesz utrwalić podstawy: komunikaty, zmienne, operatory, instrukcje warunkowe i switch.

Nauka JavaScript – mini demo

Każdy przykład pokazuje krótki kod oraz przycisk, który wywołuje ten kod w praktyce.

1. Wyświetlenie komunikatu (alert)

Funkcja alert() pokazuje proste okienko z komunikatem. Używana jest do krótkich informacji dla użytkownika.

alert("Witaj w JavaScript!");

2. Zmiana treści elementu

Obiekt document reprezentuje stronę, a getElementById() pozwala złapać konkretny element i zmienić jego tekst.

Tekst do zmiany

document.getElementById("demo-tekst").innerText = "Nowy tekst!";

3. Dodawanie liczb

Instrukcja parseFloat() zamienia tekst z pola formularza na liczbę, a znak + dodaje dwie wartości.

function dodaj() { let liczba1 = parseFloat(document.getElementById("liczba1").value); let liczba2 = parseFloat(document.getElementById("liczba2").value); let suma = liczba1 + liczba2; document.getElementById("wynik").innerText = "Suma: " + suma; }

4. Zmiana koloru tła

Przez document.body.style.backgroundColor możesz dynamicznie zmieniać styl strony (np. kolor tła).

document.body.style.backgroundColor = "blue";

Ćwiczenia z JavaScript

1. Wyświetlanie komunikatów

alert pokazuje komunikat z przyciskiem „OK”, confirm pyta o potwierdzenie (zwraca true/false), a prompt pozwala wpisać tekst – np. imię użytkownika.

Tekst do zmiany

// proste komunikaty
function showMessage() {
    alert('Witaj w JavaScript!');
}
function showConfirm() {
    let result = confirm('Czy jesteś pewien?');
    document.getElementById("messageResult").innerText =
        result ? "Potwierdzono" : "Anulowano";
}
function showPrompt() {
    let name = prompt('Podaj swoje imię:');
    document.getElementById("messageResult").innerText =
        name ? "Witaj, " + name : "Nie podano imienia";
}
function consoleLog() {
    console.log('Wiadomość w konsoli');
}
function changeText() {
    document.getElementById("text").innerText = "Nowy tekst!";
}

2. Zmienne i ich typy

Zmienna przechowuje dane (np. liczbę, tekst, tablicę, obiekt). W JS typ wynika z wartości – ten sam identyfikator może później dostać inną wartość.

function testVariables() {
    let number = 10;                       // liczba
    let text = "To jest tekst";            // string
    let isTrue = true;                     // boolean
    let array = [1, 2, 3];                 // tablica
    let object = { key: "value" };         // obiekt
    let result =
        `Liczba: ${number}, Tekst: ${text}, Boolean: ${isTrue}, ` +
        `Tablica: ${array.join(", ")}, Obiekt: ${JSON.stringify(object)}`;
    document.getElementById("variablesResult").innerText = result;
}

3. Operatory

Operatory arytmetyczne (+, -, *, /, %) pozwalają wykonywać obliczenia, np. z danych wpisanych przez użytkownika.

function calculate() {
    let result = 5 + 3;
    document.getElementById("operatorResult").innerText =
        "Wynik dodawania: " + result;
}
function subtract() {
    let result = 10 - 4;
    document.getElementById("operatorResult").innerText =
        "Wynik odejmowania: " + result;
}
function multiply() {
    let result = 6 * 7;
    document.getElementById("operatorResult").innerText =
        "Wynik mnożenia: " + result;
}
function divide() {
    let result = 20 / 5;
    document.getElementById("operatorResult").innerText =
        "Wynik dzielenia: " + result;
}
function modulo() {
    let result = 10 % 3;
    document.getElementById("operatorResult").innerText =
        "Wynik modulo: " + result;
}

4. Instrukcja warunkowa (if)

Instrukcja if pozwala wykonywać różny kod w zależności od spełnienia warunku, np. czy liczba jest dodatnia albo parzysta.

function checkEvenOdd(num) {
    let result = num % 2 === 0 ? "Parzysta" : "Nieparzysta";
    document.getElementById("conditionalResult").innerText = result;
}
function checkPositiveNegative(num) {
    let result = num > 0 ? "Dodatnia" : "Ujemna";
    document.getElementById("conditionalResult").innerText = result;
}
function checkZero(num) {
    let result = num === 0 ? "Zero" : "Nie zero";
    document.getElementById("conditionalResult").innerText = result;
}

5. Instrukcja `switch`

switch jest wygodny, gdy trzeba sprawdzić wiele konkretnych wartości tej samej zmiennej (np. numer dnia tygodnia) i dla każdej wykonać inny kod.

function getDayName(dayNumber) {
    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";
    }
    document.getElementById("switchResult").innerText = dayName;
}