Program ze souboru

Vítejte zpátky v Kině Hvězda! Jeho web už je na internetu, ale stránka s programem je pořád jako plakát na zdi: pět řádků její tabulky je napsaných v HTML ručně, a kdykoli se program změní, musí ji někdo přepsat. V tomto projektu stránku oživíte JavaScriptem, který jste se naučili. Program se bude načítat ze souboru s daty, návštěvník si zvolí den, vybere si místa v sále a zarezervuje si je formulářem a stránka si jeho vstupenky zapamatuje.

Soubory. V editoru je váš web: program.html, index.html a style.css. Náhled ukazuje program.html, první stránku, a jejími odkazy se dostanete na úvodní stránku a zpátky. Dva soubory jsou nové. script.js je zatím prázdný a program.html ho už načítá na konci svého body. V program.json je program kina: pole objektů, jako je tento:

{
    "id": 1,
    "den": "Pátek",
    "cas": "17:30",
    "film": "Roboti na dovolené",
    "sal": "Malý sál",
    "cena": 180,
    "obsazeno": ["A1", "A2", "C4", "C5"]
}

Kromě toho, co ukazuje tabulka, má každé představení své číslo (id), cenu jedné vstupenky v korunách (cena) a místa, která už jsou prodaná (obsazeno). Budete je potřebovat později.

Tabulka. Řádky tabulky bude vykreslovat skript, a tak pro ně potřebuje místo, které může vyprázdnit a znovu naplnit, aniž by sáhl na řádek s nadpisy. HTML má pro části tabulky dva prvky: thead (z anglického table head, hlavička tabulky) obsahuje řádek s nadpisy a tbody (table body, tělo tabulky) řádky s daty. Tabulka s nimi vypadá stejně jako předtím:

<table>
    <thead>
        <tr>
            <th>Den</th>
            <th>Čas</th>
            <th>Film</th>
            <th>Sál</th>
        </tr>
    </thead>
    <tbody id="radky-programu"></tbody>
</table>

Pro každé představení skript vytvoří tr s jedním td pro každý sloupec a přidá ho do tbody, stejně jako jste v kurzu JavaScriptu vytvářeli položky seznamu. Čtyři buňky v každém řádku by znamenaly čtyřikrát stejné tři řádky kódu, a tak si na ně napište funkci:

function pridejBunku(radek, text) {
    const bunka = document.createElement("td");
    bunka.textContent = text;
    radek.append(bunka);
}

Tip: stejně jako v miniprojektu Filmový večer mějte program v proměnné a tabulku vykreslujte funkcí zobrazProgram(). V dalších cvičeních se bude tabulka měnit a funkci zavoláte znovu.