JavaScript na egzaminie INF.03

<!-- 1. zewnętrzny plik: zalecany; defer = wykonanie po wczytaniu HTML -->
<script src="main.js" defer></script>

<!-- 2. skrypt wewnętrzny -->
<script>
  console.log("Witaj");
</script>

<!-- 3. atrybut zdarzenia w elemencie (spotykany w arkuszach: wywołanie funkcji po kliknięciu) -->
<button onclick="zamknijOkno()">Zamknij</button>

<!-- skrypt na końcu body też działa, bo elementy już istnieją -->
<script src="main.js"></script>
</body>

const imie = "Anna";             // string
let wiek = 17;                    // number (całkowite i rzeczywiste)
let aktywny = true;               // boolean
let nic = null;                   // null: celowy brak wartości
let niezdefiniowane;              // undefined: zmienna bez wartości

console.log(typeof imie, typeof wiek, typeof aktywny);   // string number boolean
console.log(Number("42"), parseInt("42px"), parseFloat("3.5"), String(7), (7).toString());
console.log("5" + 2, "5" - 2, "5" * "2");               // 52 3 10
console.log(isNaN(parseInt("abc")));                     // true

const temperatura = 18;
if (temperatura >= 25) {
    console.log("gorąco");
} else if (temperatura >= 15) {
    console.log("ciepło");
} else {
    console.log("zimno");
}

// operator trójargumentowy: warunek ? gdyPrawda : gdyFałsz
const opis = temperatura > 20 ? "lato" : "nie lato";

// switch przy wielu wartościach jednej zmiennej
switch (opis) {
    case "lato": console.log("kąpiel"); break;
    default:     console.log("kurtka");
}

// typowe w arkuszach: ustawienie współczynnika zależnie od wyboru
let wspolczynnik = 0.26;
if (wybor === "szosa") wspolczynnik = 0.3;
if (wybor === "trekking") wspolczynnik = 0.28;

for (let i = 0; i < 5; i++) {          // znana liczba powtórzeń
    console.log(i);
}
let n = 3;
while (n > 0) { console.log(n); n--; }

const miasta = ["Radom", "Kielce", "Lublin"];
for (const miasto of miasta) console.log(miasto);      // po wartościach
miasta.forEach((miasto, indeks) => console.log(indeks, miasto));   // z indeksem

function otworzOkno() {                         // bez parametrów
    document.querySelector(".okno").style.display = "block";
}

function podmienObraz(nazwaPliku) {                // z parametrem
    document.querySelector(".obraz").src = `img/${nazwaPliku}`;
}

function sredniaOcen(oceny) {                      // z wartością zwracaną
    let suma = 0;
    for (const ocena of oceny) suma += ocena;
    return suma / oceny.length;
}
console.log(sredniaOcen([5, 4, 3]).toFixed(2));    // "4.00"

const kwadrat = x => x * x;                        // funkcja strzałkowa

<img class="miniatura" src="img/rower2.svg" alt="miniatura" onclick="podmienObraz('rower2.svg')">
<button onclick="otworzOkno()">Powiększ</button>
<input type="number" id="wzrost" onchange="obliczRozmiar()">
<button onclick="zmienSekcje('uczestnik')">Uczestnik</button>

const drzewa = ["buk", "lipa", "wierzba"];
console.log(drzewa[0], drzewa.length);          // buk 3
drzewa.push("dąb");                              // dodanie na końcu
console.log(drzewa.includes("lipa"));            // true: czy zawiera
console.log(drzewa.indexOf("wierzba"));          // 2: pozycja lub -1
drzewa.forEach((drzewo, i) => console.log(i, drzewo));

// tablice równoległe: ten sam indeks = to samo drzewo
const opisy = ["Duże drzewo...", "Drzewo o szerokiej koronie...", "Rośnie nad wodą..."];
const gdzie = drzewa.indexOf("lipa");
console.log(`${drzewa[gdzie]}: ${opisy[gdzie]}`);

const wycieczki = [
    { obraz: "img/1.svg", miejsce: "Barcelona" },
    { obraz: "img/2.svg", miejsce: "Rzym" },
    { obraz: "img/3.svg", miejsce: "Londyn" }
];
console.log(wycieczki[1].miejsce);               // Rzym
wycieczki.forEach(w => console.log(w.miejsce, w.obraz));

const pacjent = {
    imie: "Agnieszka",
    nazwisko: "Nowak",
    recepty: [
        { data: "8.03.2025", kod: "1220", lek1: "Witamina C", lek2: "Potas", lek3: "" },
        { data: "13.05.2025", kod: "2913", lek1: "Melatonina", lek2: "", lek3: "" }
    ]
};
console.log(pacjent.recepty[0].lek1, pacjent["imie"], pacjent.recepty.length);

// 1. struktura wklejona do skryptu jako zmienna
const dane = {
    "id": "1",
    "imie": "Agnieszka",
    "recepty": [
        { "id": "0", "data": "8.03.2025", "kod": "1220", "lek1": "Witamina C", "lek2": "Potas", "lek3": "Syrop" },
        { "id": "1", "data": "23.04.2025", "kod": "4634", "lek1": "APAP", "lek2": "Witamina B", "lek3": "" }
    ]
};
console.log(dane.recepty.length);          // 2

// 2. zamiana napisu JSON na obiekt i odwrotnie
const napis = '{"nazwa": "Ala", "oceny": [5, 4]}';
const obiekt = JSON.parse(napis);
console.log(obiekt.oceny[0]);              // 5
console.log(JSON.stringify(obiekt));       // {"nazwa":"Ala","oceny":[5,4]}

<input type="text" id="imie">
<button onclick="przywitaj()">Przywitaj</button>
<p id="powitanie"></p>

<script>
function przywitaj() {
    const imie = document.querySelector("#imie").value;       // odczyt
    const akapit = document.querySelector("#powitanie");
    akapit.textContent = `Cześć, ${imie}!`;                   // zapis
}
</script>

const okno = document.querySelector(".okno");
okno.style.display = "block";                 // pokaż (element wcześniej: display: none w CSS)
okno.style.display = "none";                  // ukryj, element nie zajmuje miejsca
okno.style.visibility = "hidden";             // ukryj, ale miejsce zostaje
okno.style.visibility = "visible";

const przycisk = document.querySelector("#uczestnikBtn");
przycisk.style.backgroundColor = "dodgerblue";   // właściwości CSS w camelCase: background-color → backgroundColor
przycisk.style.color = "#ffffff";
przycisk.style.fontSize = "150%";

przycisk.classList.add("aktywny");            // dodaj klasę
przycisk.classList.remove("aktywny");         // usuń klasę
przycisk.classList.toggle("aktywny");         // przełącz
console.log(przycisk.classList.contains("aktywny"));

function zmienSekcje(wybrana) {
    const pola1 = document.querySelectorAll("#sekcja1 input");
    const pola2 = document.querySelectorAll("#sekcja2 input, #sekcja2 select");
    const uczestnik = wybrana === "uczestnik";
    pola1.forEach(p => p.disabled = !uczestnik);        // true = pole nieaktywne
    pola2.forEach(p => p.disabled = uczestnik);
    document.querySelector("#uczestnikBtn").style.backgroundColor = uczestnik ? "dodgerblue" : "skyblue";
    document.querySelector("#rezerwacjaBtn").style.backgroundColor = uczestnik ? "skyblue" : "dodgerblue";
}

const suwak = document.querySelector("input[type='range']");
suwak.addEventListener("input", function (e) {
    console.log("Nowa wartość:", e.target.value);      // e.target = element, na którym zaszło zdarzenie
});

document.addEventListener("DOMContentLoaded", function () {
    console.log("Strona wczytana");
});

// wykonanie funkcji po załadowaniu strony – dwa równoważne sposoby
window.onload = aktualnaData;
document.addEventListener("DOMContentLoaded", aktualnaData);   // bez nawiasów!

const lista = document.querySelector("ul");

const nowy = document.createElement("li");       // utwórz <li>
nowy.textContent = "naleśniki";                  // wypełnij treścią
nowy.classList.add("pozycja");                   // przypisz klasę
lista.append(nowy);                              // dodaj na końcu listy (appendChild też działa)

lista.innerHTML = "";                            // wyczyść całą zawartość listy
document.querySelector("li").remove();           // usuń element

const sekcja = document.querySelector("#prawy2");
dane.recepty.forEach(recepta => {
    let leki = "";
    if (recepta.lek1 !== "") leki += `<li>${recepta.lek1}</li>`;
    if (recepta.lek2 !== "") leki += `<li>${recepta.lek2}</li>`;
    if (recepta.lek3 !== "") leki += `<li>${recepta.lek3}</li>`;

    sekcja.innerHTML += `
        <div class="recepta">
            <p>Data wystawienia: ${recepta.data}</p>
            <ol>${leki}</ol>
            <h4>Kod: ${recepta.kod}</h4>
        </div>`;
});

// pole liczbowe i suwak
const suwak = document.querySelector("input[type='range']");
const liczba = document.querySelector("input[type='number']");
liczba.value = suwak.value;                              // synchronizacja suwaka z polem

// radio: zaznaczona opcja z grupy o wspólnym name
const wybrany = document.querySelector("input[name='rodzaj']:checked");
console.log(wybrany.value);                               // value zaznaczonego przycisku

// lista rozwijana
const lista = document.querySelector("select");
console.log(lista.value, lista.options[lista.selectedIndex].text);

// pole wyboru
const zgoda = document.querySelector("#zgoda");
console.log(zgoda.checked);                               // true / false

// pole tekstowe
const szukane = document.querySelector("#szukaj").value.trim().toLowerCase();

const opcje = document.querySelectorAll("input[name='rodzaj']");
let wybranyRodzaj = "";
opcje.forEach(opcja => {
    if (opcja.checked) wybranyRodzaj = opcja.value;
});

// rozmiar ramy [cale] = wzrost [cm] × współczynnik ÷ 2,54, zaokrąglony do całości
function obliczRozmiarRamy() {
    const wzrost = Number(document.querySelector("input[type='number']").value);
    const rodzaj = document.querySelector("input[name='rodzajRoweru']:checked").value;

    let wspolczynnik = 0.26;                     // górski
    if (rodzaj === "szosa") wspolczynnik = 0.3;
    if (rodzaj === "trekking") wspolczynnik = 0.28;

    const rozmiar = Math.round((wzrost * wspolczynnik) / 2.54);
    document.querySelector("#wynik").textContent = `Zalecany rozmiar ramy to: ${rozmiar} cali`;
}

function aktualnaData() {
    const dzis = new Date();
    const dzien = String(dzis.getDate()).padStart(2, "0");        // 5 → "05"
    const miesiac = String(dzis.getMonth() + 1).padStart(2, "0"); // miesiące liczone od 0!
    const rok = dzis.getFullYear();
    document.querySelector("#komorkaDaty").textContent = `${dzien}.${miesiac}.${rok}`;
}
aktualnaData();

function licznik() {
    let liczba = localStorage.getItem("odwiedziny");      // napis lub null
    liczba = liczba === null ? 0 : parseInt(liczba);
    liczba++;
    localStorage.setItem("odwiedziny", liczba);

    const stopka = document.querySelector("#licznikWejsc");
    if (stopka) stopka.textContent = `Liczba wejść na stronę: ${liczba}`;
}
document.addEventListener("DOMContentLoaded", licznik);   // bez nawiasów!

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Karta produktu</title>
    <link rel="stylesheet" href="styl.css">
    <script src="main.js" defer></script>
</head>
<body>
    <header><h1>Rower miejski</h1></header>
    <main>
        <section>
            <img class="obraz" src="img/rower1.svg" alt="rower" onclick="otworzOkno()">
            <div>
                <img class="miniatury" src="img/rower1.svg" alt="miniatura" onclick="podmienObraz('rower1.svg')">
                <img class="miniatury" src="img/rower2.svg" alt="miniatura" onclick="podmienObraz('rower2.svg')">
                <img class="miniatury" src="img/rower3.svg" alt="miniatura" onclick="podmienObraz('rower3.svg')">
            </div>
        </section>
        <article>
            <h2>Rower miejski Eco</h2>
            <p>Lekki rower z koszykiem i błotnikami.</p>
        </article>
    </main>

    <div class="okno">
        <span class="zamknij" onclick="zamknijOkno()">&times;</span>
        <img class="obrazOkno" alt="powiększenie">
    </div>
</body>
</html>

.obraz { width: 40%; cursor: zoom-in; }
.miniatury { width: 15%; cursor: pointer; }

.okno {
    display: none;                          /* ukryte na starcie – skrypt zmieni na block */
    position: fixed;                        /* względem okna przeglądarki */
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
    z-index: 10;                            /* zawsze na wierzchu */
    background-color: rgba(0, 0, 0, 0.7);   /* czarne tło z przezroczystością */
}
.obrazOkno { display: block; margin: 40px auto; max-width: 80%; }   /* blokowy, środek */
.zamknij {
    position: absolute;                     /* względem pierwszego pozycjonowanego rodzica (.okno) */
    top: 15px;
    right: 35px;
    font-size: 40px;
    font-weight: bold;
    color: beige;
}
.zamknij:hover { cursor: pointer; }

function podmienObraz(nazwaPliku) {
    const obrazGlowny = document.querySelector(".obraz");
    obrazGlowny.src = `img/${nazwaPliku}`;
}

function otworzOkno() {
    const obrazGlowny = document.querySelector(".obraz");
    const okno = document.querySelector(".okno");
    const obrazOkno = document.querySelector(".obrazOkno");
    okno.style.display = "block";            // zmiana sposobu wyświetlania bloku okna na blokowy
    obrazOkno.src = obrazGlowny.src;         // źródło obrazu z okna = źródło obrazu głównego
}

function zamknijOkno() {
    document.querySelector(".okno").style.display = "none";
}

<nav>
    <button id="uczestnikBtn" onclick="zmienSekcje('uczestnik')">Uczestnik</button>
    <button id="rezerwacjaBtn" onclick="zmienSekcje('rezerwacja')">Rezerwacja</button>
</nav>

<section id="sekcjaUczestnik">
    <input type="text" id="imie" placeholder="Imię">
    <input type="text" id="nazwisko" placeholder="Nazwisko">
</section>
<section id="sekcjaRezerwacja">
    <input type="number" id="liczbaOsob" value="1" min="1">
    <select id="miejsceWylotu"><option>Warszawa</option><option>Kraków</option></select>
    <label><input type="radio" name="wyzywienie" value="bez"> bez</label>
    <label><input type="radio" name="wyzywienie" value="pelne"> pełne</label>
</section>

<aside>
    <img id="zdjecieMiejsca" src="img/1.svg" alt="zdjęcie miejsca">
    <p id="miejsceWycieczki">Barcelona</p>
    <button onclick="poprzedniaWycieczka()">&#8592;</button>
    <button onclick="nastepnaWycieczka()">&#8594;</button>
</aside>

/* ---- przełączanie aktywnej części formularza ---- */
function zmienSekcje(wybrana) {
    const uczestnik = wybrana === "uczestnik";
    document.querySelectorAll("#sekcjaUczestnik input").forEach(p => p.disabled = !uczestnik);
    document.querySelectorAll("#sekcjaRezerwacja input, #sekcjaRezerwacja select").forEach(p => p.disabled = uczestnik);

    document.querySelector("#uczestnikBtn").style.backgroundColor = uczestnik ? "dodgerblue" : "skyblue";
    document.querySelector("#rezerwacjaBtn").style.backgroundColor = uczestnik ? "skyblue" : "dodgerblue";
}
zmienSekcje("uczestnik");                       // stan początkowy ustawiony w skrypcie

/* ---- przeglądarka zdjęć z zawinięciem ---- */
const wycieczki = [
    { obraz: "img/1.svg", miejsce: "Barcelona" },
    { obraz: "img/2.svg", miejsce: "Rzym" },
    { obraz: "img/3.svg", miejsce: "Londyn" }
];
let numerWycieczki = 0;

function pokazWycieczke() {
    document.querySelector("#zdjecieMiejsca").src = wycieczki[numerWycieczki].obraz;
    document.querySelector("#miejsceWycieczki").textContent = wycieczki[numerWycieczki].miejsce;
}

function nastepnaWycieczka() {
    numerWycieczki++;
    if (numerWycieczki >= wycieczki.length) numerWycieczki = 0;       // po ostatniej – pierwsza
    pokazWycieczke();
}

function poprzedniaWycieczka() {
    numerWycieczki--;
    if (numerWycieczki < 0) numerWycieczki = wycieczki.length - 1;    // przed pierwszą – ostatnia
    pokazWycieczke();
}

<main>
    <section class="menu">
        <div class="potrawa" onclick="dodajDoZamowienia('naleśniki')">
            <img src="img/nalesniki.svg" alt="naleśniki"><h3>Naleśniki</h3>
        </div>
        <div class="potrawa" onclick="dodajDoZamowienia('pierogi')">
            <img src="img/pierogi.svg" alt="pierogi"><h3>Pierogi</h3>
        </div>
        <div class="potrawa" onclick="dodajDoZamowienia('zupa dnia')">
            <img src="img/zupa.svg" alt="zupa"><h3>Zupa dnia</h3>
        </div>
    </section>
    <section class="zamowienie">
        <h2>Twoje zamówienie</h2>
        <ul></ul>
        <button onclick="wyczyscZamowienie()">Wyczyść</button>
        <button onclick="zatwierdzZamowienie()">Zatwierdź</button>
    </section>
</main>

function dodajDoZamowienia(nazwaPotrawy) {
    const lista = document.querySelector(".zamowienie ul");
    const pozycja = document.createElement("li");
    pozycja.textContent = nazwaPotrawy;
    lista.append(pozycja);
}

function wyczyscZamowienie() {
    document.querySelector(".zamowienie ul").innerHTML = "";
}

function zatwierdzZamowienie() {
    const lista = document.querySelector(".zamowienie ul");
    if (lista.children.length === 0) {                 // opcjonalne zabezpieczenie: pusta lista
        alert("Zamówienie jest puste");
        return;
    }
    alert("Zamówienie zostało przekazane do realizacji");
    lista.innerHTML = "";
}

const pacjent = {
    imie: "Agnieszka",
    recepty: [
        { data: "8.03.2025",  kod: "1220", lek1: "Witamina C", lek2: "Potas",     lek3: "Syrop prawoślazowy" },
        { data: "23.04.2025", kod: "4634", lek1: "APAP",       lek2: "Witamina B", lek3: "" },
        { data: "13.05.2025", kod: "2913", lek1: "Melatonina", lek2: "",           lek3: "" }
    ]
};

const sekcja = document.querySelector("#prawy2");

pacjent.recepty.forEach(recepta => {
    let leki = "";
    if (recepta.lek1 !== "") leki += `<li>${recepta.lek1}</li>`;
    if (recepta.lek2 !== "") leki += `<li>${recepta.lek2}</li>`;
    if (recepta.lek3 !== "") leki += `<li>${recepta.lek3}</li>`;

    sekcja.innerHTML += `
        <div class="recepty">
            <p>Data wystawienia: ${recepta.data}</p>
            <ol>${leki}</ol>
            <h4>Kod: ${recepta.kod}</h4>
        </div>`;
});

const drzewa = ["buk", "lipa", "wierzba", "dąb"];
const opisy = [
    "Duże drzewo liściaste z gładką, szarą korą.",
    "Drzewo o sercowatych liściach i pachnących kwiatach.",
    "Rośnie nad wodą, ma długie, zwisające gałęzie.",
    "Majestatyczne, długowieczne drzewo, owocuje żołędziami."
];

function wybierz(indeks) {                           // wywoływana z onclick="wybierz(0)" na obrazach
    const blok = document.querySelector("main");
    blok.innerHTML = "";                             // usuń zawartość bloku głównego
    const naglowek = document.createElement("h2");
    naglowek.textContent = drzewa[indeks];
    const akapit = document.createElement("p");
    akapit.classList.add("opis");
    akapit.textContent = opisy[indeks];
    blok.append(naglowek, akapit);                   // append przyjmuje kilka elementów
}

function szukaj() {                                  // onclick="szukaj()" na przycisku „Szukaj”
    const wpisane = document.querySelector("#szukane").value.trim().toLowerCase();
    if (drzewa.includes(wpisane)) {
        wybierz(drzewa.indexOf(wpisane));
    } else {
        document.querySelector("main").innerHTML =
            "<p>Drzewa, o którym chcesz znaleźć informacje, nie ma w naszym Atlasie drzew.</p>";
    }
}

<section>
    <h3>Dobierz ramę</h3>
    <input type="range" min="140" max="210" value="170" oninput="aktualizujPole()">
    <input type="number" min="140" max="210" value="170" oninput="aktualizujSuwak()">
    <p>
        <label><input type="radio" name="rodzajRoweru" value="gorski" checked> górski z kołami 29"</label>
        <label><input type="radio" name="rodzajRoweru" value="szosa"> szosa</label>
        <label><input type="radio" name="rodzajRoweru" value="trekking"> trekking</label>
    </p>
    <button onclick="obliczRozmiarRamy()">Sprawdź</button>
    <p id="wynik"></p>
</section>
<table><tr><td>Dzisiejsza data:</td><td id="komorkaDaty"></td></tr></table>

function aktualizujPole() {                       // suwak → pole
    const suwak = document.querySelector("input[type='range']");
    document.querySelector("input[type='number']").value = suwak.value;
}
function aktualizujSuwak() {                      // pole → suwak (rozszerzenie)
    const pole = document.querySelector("input[type='number']");
    document.querySelector("input[type='range']").value = pole.value;
}

function obliczRozmiarRamy() {
    const wzrost = Number(document.querySelector("input[type='number']").value);
    const rodzaj = document.querySelector("input[name='rodzajRoweru']:checked").value;

    let wspolczynnik = 0.26;
    if (rodzaj === "szosa") wspolczynnik = 0.3;
    if (rodzaj === "trekking") wspolczynnik = 0.28;

    const rozmiar = Math.round((wzrost * wspolczynnik) / 2.54);
    document.querySelector("#wynik").textContent = `Zalecany rozmiar ramy to: ${rozmiar} cali`;
}

function aktualnaData() {
    const dzis = new Date();
    const dzien = String(dzis.getDate()).padStart(2, "0");
    const miesiac = String(dzis.getMonth() + 1).padStart(2, "0");
    document.querySelector("#komorkaDaty").textContent = `${dzien}.${miesiac}.${dzis.getFullYear()}`;
}
aktualnaData();                                    // wywołanie przy ładowaniu (skrypt z defer)

170 cm, szosa:      170 × 0,3  = 51    → 51 / 2,54 = 20,08  → 20 cali
170 cm, górski:     170 × 0,26 = 44,2  → 44,2 / 2,54 = 17,40 → 17 cali
170 cm, trekking:   170 × 0,28 = 47,6  → 47,6 / 2,54 = 18,74 → 19 cali

<section id="lewa"><h3>Gra kółko</h3></section>
<table>
    <tr>
        <td><img src="img/nic.svg" alt="pole" onclick="zaznaczPole(this)"></td>
        <td><img src="img/nic.svg" alt="pole" onclick="zaznaczPole(this)"></td>
        <td><img src="img/nic.svg" alt="pole" onclick="zaznaczPole(this)"></td>
    </tr>
    <!-- wiersze 2 i 3 analogicznie -->
</table>
<section id="prawa"><h3>Gra krzyżyk</h3></section>

let gracz = "kolko";                          // stan początkowy: zaczyna kółko

const sekcjaLewa = document.querySelector("#lewa");
const sekcjaPrawa = document.querySelector("#prawa");
sekcjaPrawa.style.visibility = "hidden";       // początkowo widoczny jest napis „Gra kółko”

function zaznaczPole(pole) {
    if (!pole.src.includes("nic.svg")) return;     // pole zajęte → brak akcji

    if (gracz === "kolko") {
        pole.src = "img/o.svg";
        sekcjaLewa.style.visibility = "hidden";
        sekcjaPrawa.style.visibility = "visible";
        gracz = "krzyzyk";
    } else {
        pole.src = "img/x.svg";
        sekcjaLewa.style.visibility = "visible";
        sekcjaPrawa.style.visibility = "hidden";
        gracz = "kolko";
    }
}

const wygrywajace = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];

function czyWygral(symbol) {                        // symbol: "o.svg" lub "x.svg"
    const pola = document.querySelectorAll("table img");
    return wygrywajace.some(uklad => uklad.every(i => pola[i].src.includes(symbol)));
}
// po ruchu: if (czyWygral("o.svg")) alert("Wygrało kółko!");