Übungen: JavaScript-Grundlagen II

In diesen Übungen arbeiten Sie mit JSON-Daten, Array-Methoden und dynamischem Rendering. Jede Übung enthält Startcode und inline Daten — Sie müssen die JavaScript-Logik vervollständigen. Nutzen Sie die Konsole (F12) zum Debuggen.

Laden Sie Museumsobjekte aus einer inline JSON-Datenstruktur, stellen Sie sie als Karten dar und implementieren Sie eine Live-Suchfunktion. Vervollständigen Sie die drei markierten TODO-Abschnitte im JavaScript-Code.

Aufgabe

Parsen Sie die JSON-Daten aus dem <script>-Tag
Rendern Sie jedes Objekt als Karte mit Name, Datierung, Kategorie und Beschreibung
Implementieren Sie eine Live-Suche, die bei jeder Eingabe filtert

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: sans-serif; padding: 20px; background: #f5f5f0; }
    h1 { color: #1a5276; margin-bottom: 10px; }
    #suche {
      width: 100%; padding: 10px; font-size: 1rem;
      border: 2px solid #ddd; border-radius: 8px;
      margin-bottom: 20px;
    }
    #suche:focus { border-color: #1a5276; outline: none; }
    .karten-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 16px;
    }
    .karte {
      background: white; border: 1px solid #ddd;
      border-radius: 8px; padding: 16px;
    }
    .karte h3 { color: #1a5276; margin: 0 0 8px 0; font-size: 1.1rem; }
    .karte .kategorie {
      display: inline-block; background: #eaf2f8;
      color: #1a5276; padding: 2px 8px; border-radius: 4px;
      font-size: 0.8rem; margin-bottom: 8px;
    }
    .karte .datierung { color: #666; font-size: 0.9rem; }
    .karte p { margin: 6px 0 0; font-size: 0.9rem; color: #444; }
    .keine-ergebnisse { text-align: center; color: #999; padding: 40px; }
  </style>
</head>
<body>
  <h1>Kriminalmuseum: JSON-Explorer</h1>
  <input type="text" id="suche" placeholder="Objekte durchsuchen...">
  <div id="ergebnisse" class="karten-grid"></div>

  <script>
    // Inline JSON-Daten: 8 Objekte aus dem Kriminalmuseum
    const jsonDaten = [
      {
        "id": "KM-001",
        "name": "Richtbeil",
        "datierung": "1798",
        "kategorie": "Strafvollzug",
        "beschreibung": "Schweres Beil zur Vollstreckung von Todesurteilen im 18. Jahrhundert."
      },
      {
        "id": "KM-002",
        "name": "Schandmaske",
        "datierung": "ca. 1650",
        "kategorie": "Ehrenstrafe",
        "beschreibung": "Eiserne Maske mit Tiergesicht, getragen als oeffentliche Ehrenstrafe."
      },
      {
        "id": "KM-003",
        "name": "Folterzange",
        "datierung": "1720",
        "kategorie": "Folter",
        "beschreibung": "Metallzange fuer die sogenannte peinliche Befragung."
      },
      {
        "id": "KM-004",
        "name": "Pranger-Halsband",
        "datierung": "1680",
        "kategorie": "Ehrenstrafe",
        "beschreibung": "Eisernes Halsband zur Befestigung am oeffentlichen Pranger."
      },
      {
        "id": "KM-005",
        "name": "Gefaengnisschluessel",
        "datierung": "1850",
        "kategorie": "Strafvollzug",
        "beschreibung": "Grosser schmiedeeiserner Schluessel aus dem Grazer Gefangenenhaus."
      },
      {
        "id": "KM-006",
        "name": "Daumenschraube",
        "datierung": "ca. 1700",
        "kategorie": "Folter",
        "beschreibung": "Schraubvorrichtung zur Kompression der Daumen waehrend der Befragung."
      },
      {
        "id": "KM-007",
        "name": "Gerichtssiegel",
        "datierung": "1780",
        "kategorie": "Justiz",
        "beschreibung": "Messingsiegel des Grazer Stadtgerichts mit Stadtwappen."
      },
      {
        "id": "KM-008",
        "name": "Schandfloete",
        "datierung": "ca. 1600",
        "kategorie": "Ehrenstrafe",
        "beschreibung": "Schweres Metallgeraet in Floetenform, getragen um den Hals als Strafe fuer schlechte Musikanten."
      }
    ];

    // === TODO 1: Render-Funktion ===
    // Schreiben Sie eine Funktion zeigeObjekte(liste), die ein Array
    // von Objekten entgegennimmt und sie als Karten in #ergebnisse rendert.
    // Jede Karte soll Name, Kategorie, Datierung und Beschreibung zeigen.
    // Verwenden Sie map() und join('').
    // Bei leerer Liste: "Keine Objekte gefunden." anzeigen.

    function zeigeObjekte(liste) {
      const container = document.querySelector('#ergebnisse');
      // Ihr Code hier...
    }

    // === TODO 2: Initial alle Objekte anzeigen ===
    // Rufen Sie zeigeObjekte() mit den jsonDaten auf.

    // Ihr Code hier...

    // === TODO 3: Live-Suche implementieren ===
    // Fuegen Sie dem #suche-Input einen 'input'-Event-Listener hinzu.
    // Bei jeder Eingabe: filtern Sie jsonDaten nach Name, Kategorie
    // und Beschreibung (case-insensitive) und rufen Sie zeigeObjekte() auf.

    // Ihr Code hier...
  </script>
</body>
</html>

Vorschau

Bauen Sie eine Suchmaske, die eine simulierte Europeana-Response nach Suchbegriff filtert und die Ergebnisse als Bildergalerie darstellt. Da wir keinen echten API-Key verwenden, arbeiten wir mit inline Beispieldaten.

Aufgabe

Filtern Sie die Europeana-Items nach dem eingegebenen Suchbegriff (Titel und Anbieter)
Zeigen Sie die Ergebnisse als Galerie mit Vorschaubild, Titel, Jahr und Datenanbieter
Der Suchen-Button und die Enter-Taste sollen die Suche auslösen

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: sans-serif; padding: 20px; background: #f5f5f0; }
    h1 { color: #1a5276; }
    .such-bereich {
      display: flex; gap: 10px; margin-bottom: 20px;
    }
    .such-bereich input {
      flex: 1; padding: 10px; font-size: 1rem;
      border: 2px solid #ddd; border-radius: 8px;
    }
    .such-bereich input:focus { border-color: #1a5276; outline: none; }
    .such-bereich button {
      padding: 10px 24px; background: #1a5276; color: white;
      border: none; border-radius: 8px; font-size: 1rem; cursor: pointer;
    }
    .such-bereich button:hover { background: #2980b9; }
    .treffer-info { color: #666; margin-bottom: 16px; }
    .galerie {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
    }
    .galerie-item {
      background: white; border: 1px solid #ddd;
      border-radius: 8px; overflow: hidden;
    }
    .galerie-item img {
      width: 100%; height: 180px; object-fit: cover;
      background: #eee;
    }
    .galerie-item .info { padding: 12px; }
    .galerie-item h3 { font-size: 0.95rem; color: #1a5276; margin: 0 0 6px 0; }
    .galerie-item .meta { font-size: 0.8rem; color: #666; }
    .keine-treffer { text-align: center; color: #999; padding: 40px; }
  </style>
</head>
<body>
  <h1>Europeana-Suche</h1>
  <div class="such-bereich">
    <input type="text" id="suchfeld" placeholder="z.B. Schuchardt, Graz, Handschrift...">
    <button id="such-btn">Suchen</button>
  </div>
  <p class="treffer-info" id="treffer-info"></p>
  <div id="ergebnisse" class="galerie"></div>

  <script>
    // Simulierte Europeana-Response (Inline-Daten)
    const europeanaItems = [
      {
        "id": "/09102/EUS_2CE02C1B36",
        "title": ["Brief von Hugo Schuchardt an Graziadio Ascoli"],
        "edmPreview": ["https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Camponotus_flavomarginatus_ant.jpg/320px-Camponotus_flavomarginatus_ant.jpg"],
        "year": ["1882"],
        "dataProvider": ["Universitaet Graz"],
        "type": "TEXT"
      },
      {
        "id": "/09102/EUS_3DF14A2B71",
        "title": ["Postkarte von Schuchardt an Meyer-Luebke"],
        "edmPreview": ["https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/320px-Image_created_with_a_mobile_phone.png"],
        "year": ["1887"],
        "dataProvider": ["Universitaet Graz"],
        "type": "IMAGE"
      },
      {
        "id": "/09102/EUS_5AB23C4D12",
        "title": ["Handschrift: Kreolische Studien I"],
        "edmPreview": ["https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png"],
        "year": ["1882"],
        "dataProvider": ["Oesterreichische Akademie der Wissenschaften"],
        "type": "TEXT"
      },
      {
        "id": "/09102/EUS_7CD89E1F34",
        "title": ["Fotografie: Hugo Schuchardt in Graz"],
        "edmPreview": ["https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/280px-Good_Food_Display_-_NCI_Visuals_Online.jpg"],
        "year": ["1905"],
        "dataProvider": ["Universitaet Graz"],
        "type": "IMAGE"
      },
      {
        "id": "/09102/EUS_8EF01A2B56",
        "title": ["Stadtansicht von Graz um 1900"],
        "edmPreview": ["https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Camponotus_flavomarginatus_ant.jpg/320px-Camponotus_flavomarginatus_ant.jpg"],
        "year": ["1900"],
        "dataProvider": ["Steierm. Landesarchiv"],
        "type": "IMAGE"
      },
      {
        "id": "/09102/EUS_9GH23B4C78",
        "title": ["Manuskript: Baskische Studien"],
        "edmPreview": ["https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/320px-Image_created_with_a_mobile_phone.png"],
        "year": ["1893"],
        "dataProvider": ["Universitaet Graz"],
        "type": "TEXT"
      },
      {
        "id": "/09102/EUS_1IJ45D6E90",
        "title": ["Brief von Jan Baudouin de Courtenay"],
        "edmPreview": ["https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png"],
        "year": ["1891"],
        "dataProvider": ["Universitaet Graz"],
        "type": "TEXT"
      },
      {
        "id": "/09102/EUS_2KL67F8G12",
        "title": ["Katalog der Universitaetsbibliothek Graz"],
        "edmPreview": ["https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/280px-Good_Food_Display_-_NCI_Visuals_Online.jpg"],
        "year": ["1910"],
        "dataProvider": ["UB Graz"],
        "type": "TEXT"
      }
    ];

    // === TODO 1: Ergebnisse anzeigen ===
    // Schreiben Sie eine Funktion zeigeErgebnisse(items), die die
    // Items als Galerie in #ergebnisse rendert.
    // Beachten Sie: title, edmPreview, year, dataProvider sind Arrays!
    // Verwenden Sie item.title[0], item.year?.[0] etc.
    // Zeigen Sie auch die Anzahl der Treffer in #treffer-info an.

    function zeigeErgebnisse(items) {
      // Ihr Code hier...
    }

    // === TODO 2: Suchfunktion implementieren ===
    // Schreiben Sie eine Funktion suche(), die den Suchbegriff aus
    // #suchfeld liest und europeanaItems filtert.
    // Filtern nach: title[0] und dataProvider[0] (case-insensitive).
    // Leerer Suchbegriff = alle Items anzeigen.

    function suche() {
      // Ihr Code hier...
    }

    // === TODO 3: Event-Listener ===
    // Fuegen Sie Event-Listener hinzu:
    // - Klick auf #such-btn -> suche() aufrufen
    // - Enter-Taste im #suchfeld -> suche() aufrufen
    // - Initial alle Items anzeigen

    // Ihr Code hier...
  </script>
</body>
</html>

Vorschau

Parsen Sie einen CSV-String mit Korrespondenzdaten, zeigen Sie ihn als Tabelle an und implementieren Sie Filter nach Person und Zeitraum. Diese Übung simuliert die Arbeit mit tabellarischen DH-Daten.

Aufgabe

Parsen Sie den CSV-String in ein Array von Objekten
Rendern Sie die Daten als HTML-Tabelle
Füllen Sie die Filter-Dropdowns dynamisch mit den verfügbaren Personen
Filtern Sie bei Änderung der Dropdowns

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: sans-serif; padding: 20px; background: #f5f5f0; }
    h1 { color: #1a5276; }
    .filter-bereich {
      display: flex; gap: 16px; margin-bottom: 20px;
      flex-wrap: wrap; align-items: end;
    }
    .filter-gruppe { display: flex; flex-direction: column; gap: 4px; }
    .filter-gruppe label { font-size: 0.85rem; color: #666; font-weight: 600; }
    .filter-gruppe select, .filter-gruppe input {
      padding: 8px 12px; border: 2px solid #ddd;
      border-radius: 6px; font-size: 0.9rem;
    }
    .filter-gruppe select:focus, .filter-gruppe input:focus {
      border-color: #1a5276; outline: none;
    }
    .treffer-info { color: #666; margin-bottom: 10px; font-size: 0.9rem; }
    table {
      width: 100%; border-collapse: collapse;
      background: white; border-radius: 8px; overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    th {
      background: #1a5276; color: white; text-align: left;
      padding: 10px 14px; font-size: 0.85rem;
    }
    td { padding: 10px 14px; border-bottom: 1px solid #eee; font-size: 0.9rem; }
    tbody tr:hover { background: #eaf2f8; }
    .leer-meldung { text-align: center; color: #999; padding: 40px; }
  </style>
</head>
<body>
  <h1>Schuchardt-Korrespondenz</h1>

  <div class="filter-bereich">
    <div class="filter-gruppe">
      <label for="filter-person">Person:</label>
      <select id="filter-person">
        <option value="">Alle Personen</option>
      </select>
    </div>
    <div class="filter-gruppe">
      <label for="filter-von">Jahr von:</label>
      <input type="number" id="filter-von" placeholder="z.B. 1880" min="1870" max="1930">
    </div>
    <div class="filter-gruppe">
      <label for="filter-bis">Jahr bis:</label>
      <input type="number" id="filter-bis" placeholder="z.B. 1900" min="1870" max="1930">
    </div>
  </div>

  <p class="treffer-info" id="treffer-info"></p>
  <div id="tabelle-container"></div>

  <script>
    // CSV-Daten: 10 Eintraege der Schuchardt-Korrespondenz
    const csvString = `datum,absender,empfaenger,ort,thema,sprache
1882-01-15,Hugo Schuchardt,Graziadio Ascoli,Graz,Kreolische Sprachen,Deutsch
1885-05-03,Gustav Meyer,Hugo Schuchardt,Graz,Albanische Grammatik,Deutsch
1887-03-12,Hugo Schuchardt,Wilhelm Meyer-Luebke,Graz,Romanische Etymologie,Deutsch
1890-11-22,Hugo Schuchardt,Jan Baudouin de Courtenay,Graz,Sprachkontakt,Deutsch
1891-06-08,Jan Baudouin de Courtenay,Hugo Schuchardt,Dorpat,Phonetik,Franzoesisch
1893-02-14,Hugo Schuchardt,Theodor Gartner,Graz,Raetoromananisch,Deutsch
1896-09-30,Rudolf Meringer,Hugo Schuchardt,Graz,Woerter und Sachen,Deutsch
1900-04-17,Hugo Schuchardt,Edward Spencer Dodgson,Graz,Baskische Sprache,Englisch
1904-01-03,Hugo Schuchardt,Karl Vossler,Graz,Sprachphilosophie,Deutsch
1907-07-21,Leo Spitzer,Hugo Schuchardt,Wien,Stilistik,Deutsch`;

    // === TODO 1: CSV parsen ===
    // Schreiben Sie eine Funktion parseCSV(csv), die den CSV-String
    // in ein Array von Objekten umwandelt.
    // Hinweis: csv.split('\n') fuer Zeilen, zeile.split(',') fuer Spalten.
    // Die erste Zeile enthaelt die Spaltennamen (Header).
    // Ergebnis: [{datum: '1882-01-15', absender: 'Hugo Schuchardt', ...}, ...]

    function parseCSV(csv) {
      // Ihr Code hier...
      return [];
    }

    const korrespondenz = parseCSV(csvString);

    // === TODO 2: Tabelle rendern ===
    // Schreiben Sie eine Funktion zeigeTabelle(daten), die die Daten
    // als HTML-Tabelle in #tabelle-container rendert.
    // Spalten: Datum, Absender, Empfaenger, Ort, Thema, Sprache
    // Zeigen Sie die Anzahl in #treffer-info an.

    function zeigeTabelle(daten) {
      // Ihr Code hier...
    }

    // === TODO 3: Dropdowns befuellen und Filter implementieren ===
    // a) Sammeln Sie alle einzigartigen Personen (Absender + Empfaenger)
    //    und fuellen Sie das #filter-person Dropdown.
    // b) Schreiben Sie eine filterFunktion(), die nach Person und
    //    Jahreszeitraum filtert. Tipp: datum.startsWith('1882') oder
    //    parseInt(datum.substring(0, 4)) fuer das Jahr extrahieren.
    // c) Fuegen Sie change/input Event-Listener fuer alle Filter hinzu.
    // d) Zeigen Sie initial die volle Tabelle an.

    // Ihr Code hier...
  </script>
</body>
</html>

Vorschau

Parsen Sie ein vereinfachtes IIIF-Manifest und zeigen Sie die Bilder als Galerie an. Jedes Canvas im Manifest repräsentiert eine Seite des digitalisierten Dokuments. Extrahieren Sie die Bild-URLs und Beschriftungen aus der verschachtelten Struktur.

Aufgabe

Navigieren Sie die verschachtelte IIIF-Manifest-Struktur
Extrahieren Sie aus jedem Canvas: Label, Bild-URL, Breite und Höhe
Rendern Sie die Bilder als Galerie mit Beschriftung
Zeigen Sie den Manifest-Titel und die Metadaten an

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: sans-serif; padding: 20px; background: #f5f5f0; }
    h1 { color: #1a5276; }
    .manifest-info {
      background: white; border: 1px solid #ddd; border-radius: 8px;
      padding: 20px; margin-bottom: 20px;
    }
    .manifest-info h2 { margin: 0 0 12px 0; color: #1a5276; }
    .manifest-info .metadaten {
      display: grid; grid-template-columns: 120px 1fr; gap: 6px 16px;
      font-size: 0.9rem;
    }
    .manifest-info .metadaten dt { font-weight: 600; color: #666; }
    .manifest-info .metadaten dd { margin: 0; }
    .galerie {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
    }
    .canvas-karte {
      background: white; border: 1px solid #ddd; border-radius: 8px;
      overflow: hidden;
    }
    .canvas-karte img {
      width: 100%; height: 240px; object-fit: cover;
      background: #eee; display: block;
    }
    .canvas-karte .info {
      padding: 12px;
    }
    .canvas-karte h3 { font-size: 1rem; color: #1a5276; margin: 0 0 4px 0; }
    .canvas-karte .groesse { font-size: 0.8rem; color: #999; }
  </style>
</head>
<body>
  <h1>IIIF-Manifest-Viewer</h1>
  <div id="manifest-info" class="manifest-info"></div>
  <div id="galerie" class="galerie"></div>

  <script>
    // Vereinfachtes IIIF-Manifest (Presentation API 3.0)
    const manifest = {
      "@context": "http://iiif.io/api/presentation/3/context.json",
      "id": "https://example.org/manifest/schuchardt-kreolisch",
      "type": "Manifest",
      "label": { "de": ["Kreolische Studien I - Hugo Schuchardt (1882)"] },
      "metadata": [
        {
          "label": { "de": ["Autor"] },
          "value": { "de": ["Hugo Schuchardt"] }
        },
        {
          "label": { "de": ["Datum"] },
          "value": { "de": ["1882"] }
        },
        {
          "label": { "de": ["Institution"] },
          "value": { "de": ["Universitaetsbibliothek Graz"] }
        },
        {
          "label": { "de": ["Sprache"] },
          "value": { "de": ["Deutsch"] }
        }
      ],
      "items": [
        {
          "id": "https://example.org/canvas/p1",
          "type": "Canvas",
          "label": { "de": ["Titelblatt"] },
          "width": 3000,
          "height": 4000,
          "items": [{
            "type": "AnnotationPage",
            "items": [{
              "type": "Annotation",
              "motivation": "painting",
              "body": {
                "type": "Image",
                "id": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Camponotus_flavomarginatus_ant.jpg/320px-Camponotus_flavomarginatus_ant.jpg",
                "format": "image/jpeg",
                "width": 3000,
                "height": 4000
              }
            }]
          }]
        },
        {
          "id": "https://example.org/canvas/p2",
          "type": "Canvas",
          "label": { "de": ["Seite 1 - Einleitung"] },
          "width": 3000,
          "height": 4000,
          "items": [{
            "type": "AnnotationPage",
            "items": [{
              "type": "Annotation",
              "motivation": "painting",
              "body": {
                "type": "Image",
                "id": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/320px-Image_created_with_a_mobile_phone.png",
                "format": "image/jpeg",
                "width": 3000,
                "height": 4000
              }
            }]
          }]
        },
        {
          "id": "https://example.org/canvas/p3",
          "type": "Canvas",
          "label": { "de": ["Seite 2 - Analyse"] },
          "width": 3000,
          "height": 4000,
          "items": [{
            "type": "AnnotationPage",
            "items": [{
              "type": "Annotation",
              "motivation": "painting",
              "body": {
                "type": "Image",
                "id": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png",
                "format": "image/png",
                "width": 3000,
                "height": 4000
              }
            }]
          }]
        }
      ]
    };

    // === TODO 1: Manifest-Info anzeigen ===
    // Zeigen Sie im div#manifest-info:
    // - Den Manifest-Titel (aus manifest.label.de[0])
    // - Alle Metadaten als Definitions-Liste (dl/dt/dd)
    //   Tipp: manifest.metadata ist ein Array mit label und value Objekten

    function zeigeManifestInfo() {
      const container = document.querySelector('#manifest-info');
      // Ihr Code hier...
    }

    // === TODO 2: Bilder aus Canvases extrahieren ===
    // Schreiben Sie eine Funktion, die aus jedem Canvas die Bild-URL
    // und das Label extrahiert.
    // Pfad zum Bild: canvas.items[0].items[0].body.id
    // Pfad zum Label: canvas.label.de[0]
    // Rueckgabe: Array von {label, imageUrl, width, height}

    function extrahiereBilder() {
      // Ihr Code hier...
      return [];
    }

    // === TODO 3: Galerie rendern ===
    // Verwenden Sie die extrahierten Bilddaten, um eine Galerie
    // in #galerie zu rendern. Jede Karte zeigt:
    // - Das Bild (img-Tag mit der URL)
    // - Das Label als Ueberschrift
    // - Die Groesse (Breite x Hoehe)

    function zeigeGalerie() {
      // Ihr Code hier...
    }

    // Ausfuehren
    zeigeManifestInfo();
    zeigeGalerie();
  </script>
</body>
</html>

Vorschau

Agentic Coding: Context Engineering

Wenn Sie bei einer Übung nicht weiterkommen, versuchen Sie folgenden Ansatz mit einem LLM:

Kopieren Sie die Datenstruktur (z.B. ein JSON-Objekt) in den Prompt
Beschreiben Sie die gewünschte Ausgabe (z.B. „als Karten-Grid“)
Geben Sie Constraints an (z.B. „nur Vanilla JS, mit map() und filter()“)
Prüfen Sie das Ergebnis und iterieren Sie bei Bedarf

Je genauer der Kontext, desto besser der generierte Code. Das ist Context Engineering in der Praxis.

Für eigene Projekte: Fertige Hilfsmodule

Die Muster, die Sie in diesen Übungen gelernt haben (JSON laden, Tabellen rendern, Daten filtern), stehen als wiederverwendbare Module bereit:

js/data-utils.js — DataUtils.loadJSON(url), DataUtils.loadCSV(url), DataUtils.renderTable(data, columns), DataUtils.filterBySearch(data, query, fields), DataUtils.sortBy(data, field)
js/tei-viewer.js — TEIViewer.loadAndRender(url, container) für TEI-Briefe

Binden Sie diese Module in Ihrem Assignment 2 ein, um sich auf die Interaktivität und das Design zu konzentrieren, statt Basisfunktionen neu zu implementieren.

Übungen: JavaScript-Grundlagen II

Übung 1: JSON-Explorer

Übung 2: Europeana-Suche

Übung 3: Korrespondenz-Filter

Übung 4: IIIF-Viewer