Programm aus einer Datei

Willkommen zurück im Kino Sternenlicht! Seine Website ist online, aber die Seite mit dem Programm ist noch wie ein Plakat an der Wand: Die fünf Zeilen ihrer Tabelle stehen von Hand im HTML, und wenn sich das Programm ändert, muss jemand die Seite umschreiben. In diesem Projekt erweckst du die Seite mit dem JavaScript, das du gelernt hast, zum Leben. Das Programm kommt aus einer Datendatei, der Besucher wählt einen Tag, sucht sich Plätze im Saal aus und bucht sie mit einem Formular, und die Seite merkt sich seine Tickets.

Die Dateien. Im Editor liegt deine Website: programm.html, index.html und style.css. Die Vorschau zeigt programm.html, die erste Seite, und über ihre Links kommst du zur Startseite und zurück. Zwei Dateien sind neu. script.js ist noch leer, und programm.html lädt sie schon am Ende ihres body. programm.json enthält das Programm: ein Array aus Objekten wie diesem:

{
    "id": 1,
    "tag": "Freitag",
    "uhrzeit": "17:30",
    "film": "Roboter im Urlaub",
    "saal": "Kleiner Saal",
    "preis": 9,
    "belegt": ["A1", "A2", "C4", "C5"]
}

Außer dem, was die Tabelle zeigt, hat jede Vorstellung eine Nummer (id), den Preis einer Eintrittskarte in Euro (preis) und die Plätze, die schon verkauft sind (belegt). Du brauchst sie später im Projekt.

Die Tabelle. Die Zeilen der Tabelle zeichnet das Skript, also braucht es dafür einen Platz, den es leeren und neu füllen kann, ohne die Kopfzeile anzufassen. HTML hat für die Teile einer Tabelle zwei Elemente: thead (englisch table head, Tabellenkopf) enthält die Kopfzeile, und tbody (table body, Tabellenkörper) die Zeilen mit Daten. Die Tabelle sieht damit genauso aus wie vorher:

<table>
    <thead>
        <tr>
            <th>Tag</th>
            <th>Uhrzeit</th>
            <th>Film</th>
            <th>Saal</th>
        </tr>
    </thead>
    <tbody id="programm-zeilen"></tbody>
</table>

Für jede Vorstellung erstellt das Skript ein tr mit einem td für jede Spalte und hängt es an das tbody an, genau wie du im JavaScript-Kurs Listeneinträge erstellt hast. Vier Zellen in jeder Zeile würden viermal dieselben drei Zeilen Code bedeuten, also schreibe dafür eine Funktion:

function fuegeZelleHinzu(zeile, text) {
    const zelle = document.createElement("td");
    zelle.textContent = text;
    zeile.append(zelle);
}

Ein Tipp: Halte das Programm wie im Checkpoint Filmabend in einer Variablen und zeichne die Tabelle mit einer Funktion, zeigeVorstellungen(). In den nächsten Übungen verändert sich die Tabelle, und du rufst die Funktion erneut auf.