Übungen: JavaScript-Grundlagen III

In diesen Übungen arbeiten Sie mit Leaflet.js, GeoJSON und CSS-Visualisierungen. Jede Übung enthält Starter-Code — ergänzen Sie den fehlenden JavaScript-Code, um die Aufgabe zu lösen.

Korrespondenz-Karte

Erstellen Sie eine Leaflet-Karte, die Korrespondenz-Orte aus Hugo Schuchardts Briefnetzwerk anzeigt. Die GeoJSON-Daten mit 8 Städten sind bereits im Starter-Code enthalten. Ihre Aufgaben:

Initialisieren Sie die Leaflet-Karte im Container #map, zentriert auf Europa
Fügen Sie einen Tile-Layer (OpenStreetMap oder CartoDB) hinzu
Fügen Sie die GeoJSON-Daten mit L.geoJSON() zur Karte hinzu
Erstellen Sie Popups, die den Stadtnamen und die Briefanzahl anzeigen
Passen Sie den Kartenausschnitt mit fitBounds() an, sodass alle Marker sichtbar sind

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Korrespondenz-Karte</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
  <style>
    body { font-family: sans-serif; margin: 0; padding: 1rem; }
    h1 { font-size: 1.3rem; margin-bottom: 1rem; color: #1a5276; }
    #map { height: 450px; border-radius: 8px; border: 1px solid #ddd; }
  </style>
</head>
<body>
  <h1>Hugo Schuchardt — Korrespondenz-Orte</h1>
  <div id="map"></div>

  <script>
    // GeoJSON-Daten: 8 Korrespondenz-Staedte
    const geojsonData = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "geometry": { "type": "Point", "coordinates": [15.4485, 47.0787] },
          "properties": { "name": "Graz", "briefe": 342, "partner": "Diverse" }
        },
        {
          "type": "Feature",
          "geometry": { "type": "Point", "coordinates": [16.3738, 48.2082] },
          "properties": { "name": "Wien", "briefe": 218, "partner": "Miklosich, Mussafia" }
        },
        {
          "type": "Feature",
          "geometry": { "type": "Point", "coordinates": [2.3522, 48.8566] },
          "properties": { "name": "Paris", "briefe": 156, "partner": "Gaston Paris, Bonaparte" }
        },
        {
          "type": "Feature",
          "geometry": { "type": "Point", "coordinates": [12.4964, 41.9028] },
          "properties": { "name": "Rom", "briefe": 87, "partner": "Ascoli" }
        },
        {
          "type": "Feature",
          "geometry": { "type": "Point", "coordinates": [13.405, 52.52] },
          "properties": { "name": "Berlin", "briefe": 134, "partner": "Tobler, Mommsen" }
        },
        {
          "type": "Feature",
          "geometry": { "type": "Point", "coordinates": [19.0402, 47.4979] },
          "properties": { "name": "Budapest", "briefe": 95, "partner": "Katona" }
        },
        {
          "type": "Feature",
          "geometry": { "type": "Point", "coordinates": [-0.1278, 51.5074] },
          "properties": { "name": "London", "briefe": 62, "partner": "Rhys, Priebsch" }
        },
        {
          "type": "Feature",
          "geometry": { "type": "Point", "coordinates": [8.5417, 47.3769] },
          "properties": { "name": "Zuerich", "briefe": 48, "partner": "Morf" }
        }
      ]
    };

    // --- IHRE AUFGABE ---
    // 1. Karte initialisieren (Zentrum: Europa, z.B. [48, 10], Zoom: 4)

    // 2. Tile-Layer hinzufuegen (OpenStreetMap oder CartoDB Positron)

    // 3. GeoJSON-Daten zur Karte hinzufuegen mit onEachFeature fuer Popups
    //    Popup soll anzeigen: Stadtname (fett), Briefanzahl, Korrespondenzpartner

    // 4. Kartenausschnitt anpassen mit fitBounds()

  </script>
</body>
</html>

Vorschau

Zeitleisten-Visualisierung

Erstellen Sie eine horizontale Zeitleiste, die Briefe chronologisch darstellt. Die Briefdaten (10 Einträge mit Datum und Empfänger) sind bereits vorhanden. Ihre Aufgaben:

Berechnen Sie die Position jedes Briefes auf der Zeitleiste (als Prozent der Gesamtspanne)
Erstellen Sie für jeden Brief ein <div>-Element mit CSS-Positionierung
Zeigen Sie Datum und Empfänger an
Stylen Sie die Zeitleiste mit der vorgegebenen CSS-Klasse

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zeitleiste — Korrespondenz</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      margin: 0; padding: 2rem;
      background: #FFFFF8;
    }
    h1 { font-size: 1.3rem; color: #1a5276; margin-bottom: 0.5rem; }
    p.subtitle { color: #666; font-size: 0.9rem; margin-bottom: 2rem; }

    /* Zeitleisten-Container */
    #timeline {
      position: relative;
      height: 120px;
      margin: 3rem 2rem 4rem;
      border-bottom: 3px solid #1a5276;
    }

    /* Jahreszahlen am Rand */
    .tl-start, .tl-end {
      position: absolute;
      bottom: -2rem;
      font-size: 0.85rem;
      font-weight: bold;
      color: #1a5276;
    }
    .tl-start { left: 0; }
    .tl-end { right: 0; }

    /* Einzelner Zeitpunkt */
    .tl-item {
      position: absolute;
      bottom: 12px;
      transform: translateX(-50%);
      text-align: center;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .tl-item:hover { transform: translateX(-50%) scale(1.1); }

    .tl-item__dot {
      width: 12px;
      height: 12px;
      background: #1a5276;
      border: 2px solid #fff;
      border-radius: 50%;
      margin: 0 auto 4px;
      box-shadow: 0 0 0 2px #1a5276;
    }

    .tl-item__datum {
      font-size: 0.7rem;
      color: #666;
      white-space: nowrap;
    }

    .tl-item__name {
      font-size: 0.75rem;
      font-weight: 600;
      color: #333;
      white-space: nowrap;
    }

    /* Abwechselnd oben und unten */
    .tl-item--oben {
      bottom: auto;
      top: 0;
    }
    .tl-item--oben .tl-item__dot {
      order: 2;
      margin: 4px auto 0;
    }

    /* Statistik */
    #statistik {
      margin-top: 3rem;
      padding: 1rem;
      background: #eaf2f8;
      border-radius: 8px;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <h1>Zeitleiste: Korrespondenz Hugo Schuchardt</h1>
  <p class="subtitle">10 ausgewählte Briefe, chronologisch dargestellt</p>

  <div id="timeline">
    <span class="tl-start"></span>
    <span class="tl-end"></span>
  </div>

  <div id="statistik"></div>

  <script>
    // Briefdaten
    const briefe = [
      { datum: '1882-01-15', partner: 'Ascoli' },
      { datum: '1884-06-22', partner: 'Mussafia' },
      { datum: '1885-03-10', partner: 'Meyer' },
      { datum: '1887-11-08', partner: 'Paris' },
      { datum: '1889-04-17', partner: 'Katona' },
      { datum: '1891-09-03', partner: 'Rhys' },
      { datum: '1893-02-28', partner: 'Tobler' },
      { datum: '1895-07-14', partner: 'Baudouin' },
      { datum: '1898-12-01', partner: 'Morf' },
      { datum: '1900-05-20', partner: 'Bonaparte' }
    ];

    // --- IHRE AUFGABE ---
    const timeline = document.querySelector('#timeline');

    // 1. Berechnen Sie das frueheste und spaeteste Jahr aus den Daten
    //    Tipp: new Date(brief.datum).getFullYear()

    // 2. Zeigen Sie Start- und Endjahr in den Elementen .tl-start und .tl-end an

    // 3. Erstellen Sie fuer jeden Brief ein Element auf der Zeitleiste:
    //    - Berechnen Sie die Position als Prozent: (jahr - minJahr) / (maxJahr - minJahr) * 100
    //    - Erstellen Sie ein div.tl-item mit der berechneten left-Position
    //    - Fuegen Sie einen Punkt (.tl-item__dot), das Datum und den Partnernamen hinzu
    //    - Tipp: Ungerade Indizes nach oben (Klasse tl-item--oben), gerade nach unten

    // 4. Zeigen Sie im #statistik-Bereich an:
    //    - Anzahl der Briefe
    //    - Zeitspanne (fruehestes bis spaetestes Datum)

  </script>
</body>
</html>

Vorschau

Mini-Dashboard

Kombinieren Sie eine Leaflet-Karte mit einer Tabelle und einem Suchfilter zu einem Mini-Dashboard. Das CSS Grid Layout und die Daten sind vorgegeben. Ihre Aufgaben:

Initialisieren Sie die Leaflet-Karte im Bereich #map
Erstellen Sie Marker für alle 10 Korrespondenz-Einträge
Rendern Sie die Daten als Tabellenzeilen in #tabelle tbody
Implementieren Sie die Filter-Logik: Bei Eingabe im Suchfeld werden sowohl die Marker auf der Karte als auch die Tabellenzeilen gefiltert

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mini-Dashboard</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

    .dashboard {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "filter  filter"
        "karte   tabelle";
      gap: 0.75rem;
      height: 100vh;
      padding: 0.75rem;
      background: #f5f5f0;
    }

    .dashboard__filter {
      grid-area: filter;
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.75rem 1rem;
      background: white;
      border-radius: 8px;
      border: 1px solid #ddd;
    }

    .dashboard__filter h1 {
      font-size: 1rem;
      color: #1a5276;
      white-space: nowrap;
    }

    .dashboard__filter input {
      flex: 1;
      padding: 0.5rem 0.75rem;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 0.9rem;
    }

    .dashboard__filter input:focus {
      outline: none;
      border-color: #1a5276;
      box-shadow: 0 0 0 2px rgba(26,82,118,0.15);
    }

    #ergebnis {
      font-size: 0.85rem;
      color: #666;
      white-space: nowrap;
    }

    .dashboard__karte {
      grid-area: karte;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #ddd;
    }

    #map { height: 100%; width: 100%; }

    .dashboard__tabelle {
      grid-area: tabelle;
      background: white;
      border-radius: 8px;
      border: 1px solid #ddd;
      overflow-y: auto;
    }

    table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
    th { background: #1a5276; color: white; position: sticky; top: 0; z-index: 1; }
    th, td { padding: 0.5rem 0.75rem; text-align: left; }
    td { border-bottom: 1px solid #eee; }
    tbody tr:hover { background: #eaf2f8; cursor: pointer; }
  </style>
</head>
<body>
  <div class="dashboard">
    <div class="dashboard__filter">
      <h1>Korrespondenz-Dashboard</h1>
      <input type="text" id="suche" placeholder="Ort oder Partner suchen...">
      <span id="ergebnis"></span>
    </div>

    <div class="dashboard__karte">
      <div id="map"></div>
    </div>

    <div class="dashboard__tabelle">
      <table id="tabelle">
        <thead>
          <tr>
            <th>Ort</th>
            <th>Partner</th>
            <th>Briefe</th>
            <th>Zeitraum</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

  <script>
    // Korrespondenz-Daten
    const daten = [
      { name: 'Graz',      partner: 'Diverse',         lat: 47.07, lng: 15.44, briefe: 342, zeitraum: '1876-1927' },
      { name: 'Wien',      partner: 'Miklosich',       lat: 48.21, lng: 16.37, briefe: 218, zeitraum: '1878-1920' },
      { name: 'Paris',     partner: 'Gaston Paris',    lat: 48.86, lng:  2.35, briefe: 156, zeitraum: '1879-1903' },
      { name: 'Rom',       partner: 'Ascoli',          lat: 41.90, lng: 12.50, briefe:  87, zeitraum: '1880-1905' },
      { name: 'Berlin',    partner: 'Tobler',          lat: 52.52, lng: 13.41, briefe: 134, zeitraum: '1881-1910' },
      { name: 'Budapest',  partner: 'Katona',          lat: 47.50, lng: 19.04, briefe:  95, zeitraum: '1885-1913' },
      { name: 'London',    partner: 'Priebsch',        lat: 51.51, lng: -0.13, briefe:  62, zeitraum: '1882-1906' },
      { name: 'Zuerich',   partner: 'Morf',            lat: 47.38, lng:  8.54, briefe:  48, zeitraum: '1890-1915' },
      { name: 'Leipzig',   partner: 'Leskien',         lat: 51.34, lng: 12.37, briefe:  76, zeitraum: '1877-1908' },
      { name: 'Strassburg', partner: 'Groeber',        lat: 48.57, lng:  7.75, briefe: 112, zeitraum: '1876-1911' }
    ];

    // --- IHRE AUFGABE ---

    // 1. Karte initialisieren (Zentrum Europa, Zoom 4)
    //    Tile-Layer hinzufuegen

    // 2. Variable fuer die aktuelle Marker-Gruppe (Layer Group)
    //    let markerLayer = null;

    // 3. Funktion renderAll(gefilterteDaten):
    //    a) Alte Marker entfernen (wenn markerLayer existiert)
    //    b) Neue Marker erstellen mit L.layerGroup() und L.marker()
    //       - Popup: Name (fett), Partner, Briefanzahl
    //    c) Tabelle aktualisieren: tbody.innerHTML mit den gefilterten Daten
    //    d) Ergebnis-Zaehler aktualisieren (#ergebnis: "X von Y Eintraege")

    // 4. Filter-Event: Bei Eingabe im #suche-Feld
    //    - Daten filtern: Name ODER Partner enthaelt den Suchbegriff
    //    - renderAll() mit gefilterten Daten aufrufen

    // 5. Initiales Rendering: renderAll(daten) aufrufen

  </script>
</body>
</html>

Vorschau

GeoJSON erstellen

Erstellen Sie eigene GeoJSON-Daten und sehen Sie sie live auf einer Karte. Im Starter-Code sind ein Textfeld für GeoJSON-Eingabe und eine Karte vorbereitet. Ihre Aufgaben:

Initialisieren Sie die Leaflet-Karte
Implementieren Sie die Logik für den „Auf Karte anzeigen“-Button: GeoJSON aus dem Textfeld parsen und auf der Karte darstellen
Zeigen Sie Fehlermeldungen an, wenn das GeoJSON ungültig ist
Bearbeiten Sie das vorgegebene GeoJSON: Fügen Sie 2-3 weitere Orte hinzu

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GeoJSON-Editor</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      padding: 1rem;
      background: #FFFFF8;
    }
    h1 { font-size: 1.3rem; color: #1a5276; margin-bottom: 0.5rem; }
    p.info { font-size: 0.85rem; color: #666; margin-bottom: 1rem; }

    .editor-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      height: 500px;
    }

    .editor-panel {
      display: flex;
      flex-direction: column;
    }

    .editor-panel h2 {
      font-size: 0.9rem;
      color: #1a5276;
      margin-bottom: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    #geojson-input {
      flex: 1;
      font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
      font-size: 0.8rem;
      line-height: 1.5;
      padding: 0.75rem;
      border: 1px solid #ddd;
      border-radius: 8px;
      resize: none;
      background: #1e1e1e;
      color: #d4d4d4;
      tab-size: 2;
    }

    #geojson-input:focus {
      outline: none;
      border-color: #1a5276;
    }

    .aktionen {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }

    .aktionen button {
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 6px;
      font-size: 0.85rem;
      cursor: pointer;
      font-weight: 600;
    }

    #btn-anzeigen {
      background: #1a5276;
      color: white;
      flex: 1;
    }
    #btn-anzeigen:hover { background: #2980b9; }

    #btn-leeren {
      background: #eee;
      color: #666;
    }
    #btn-leeren:hover { background: #ddd; }

    #meldung {
      margin-top: 0.5rem;
      font-size: 0.8rem;
      padding: 0.4rem 0.6rem;
      border-radius: 4px;
      display: none;
    }
    #meldung.fehler { display: block; background: #fdedec; color: #C0392B; }
    #meldung.erfolg { display: block; background: #eafaf1; color: #27AE60; }

    .karten-panel { border-radius: 8px; overflow: hidden; border: 1px solid #ddd; }
    #map { height: 100%; width: 100%; }
  </style>
</head>
<body>
  <h1>GeoJSON-Editor</h1>
  <p class="info">
    Bearbeiten Sie das GeoJSON im Editor und klicken Sie auf
    „Auf Karte anzeigen“, um die Daten zu visualisieren.
  </p>

  <div class="editor-layout">
    <div class="editor-panel">
      <h2>GeoJSON-Eingabe</h2>
      <textarea id="geojson-input">{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [15.4485, 47.0787]
      },
      "properties": {
        "name": "Graz",
        "beschreibung": "Wirkungsstaette Schuchardts"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [16.3738, 48.2082]
      },
      "properties": {
        "name": "Wien",
        "beschreibung": "Studienzeit und Kontakte"
      }
    }
  ]
}

Vorschau

Für das Abschlussprojekt: Module kombinieren

Im Assignment 3 können Sie alle vorhandenen Hilfsmodule kombinieren, um ein vollständiges DH-Dashboard zu bauen:

<script src="js/data-utils.js"> — Daten laden, filtern, sortieren, als Tabelle rendern
<script src="js/tei-viewer.js"> — TEI-XML-Briefe laden und als HTML darstellen

Kombiniert mit Leaflet.js haben Sie alle Bausteine für Karte + Tabelle + Filter + TEI-Ansicht. Dokumentieren Sie in Ihrer CLAUDE.md, welche Module Sie nutzen und warum.