Übungen: JavaScript-Grundlagen I

In diesen Übungen wenden Sie die JavaScript-Grundlagen praktisch an. Jede Übung hat einen integrierten Code-Editor — schreiben Sie Ihren Code direkt dort und klicken Sie „Ausführen", um das Ergebnis zu sehen.

Konsolen-Experiment

Lösen Sie die folgenden 10 kleinen Aufgaben direkt im Code-Editor. Jede Aufgabe ist als Kommentar (//) beschrieben. Schreiben Sie Ihren Code unter den jeweiligen Kommentar und nutzen Sie console.log(), um die Ergebnisse auszugeben. Klicken Sie auf „Ausführen", um die Konsolen-Ausgabe zu sehen.

// === Übung 1: Konsolen-Experiment ===

// Aufgabe 1: Erstelle eine Variable 'brief_titel' mit dem Wert
// 'Brief an Otto Benndorf' und gib sie in der Konsole aus.


// Aufgabe 2: Erstelle eine Konstante 'absender' mit dem Wert
// 'Hugo Schuchardt' und eine Konstante 'jahr' mit dem Wert 1879.
// Gib beides aus.


// Aufgabe 3: Berechne, wie viele Jahre seit 1879 vergangen sind
// (bis 2026). Speichere das Ergebnis in einer Variable und gib es aus.


// Aufgabe 4: Erstelle einen String mit Template Literal:
// "Hugo Schuchardt schrieb den Brief im Jahr 1879."
// Verwende die Variablen absender und jahr.


// Aufgabe 5: Erstelle ein Array 'korrespondenten' mit den Werten:
// 'Benndorf', 'Vossler', 'Meringer', 'Nyrop', 'Baudouin'
// Gib die Anzahl der Einträge aus (length).


// Aufgabe 6: Gib den dritten Korrespondenten aus dem Array aus.
// (Denke daran: Der Index beginnt bei 0!)


// Aufgabe 7: Erstelle ein Objekt 'brief' mit den Schlüsseln:
// titel, absender, empfaenger, jahr, ort
// Fülle es mit passenden Werten und gib brief.titel aus.


// Aufgabe 8: Prüfe mit typeof, welchen Datentyp die Variable
// 'jahr' und die Variable 'brief_titel' haben. Gib beides aus.


// Aufgabe 9: Schreibe eine Bedingung (if/else):
// Wenn 'jahr' vor 1900 liegt, gib '19. Jahrhundert' aus,
// sonst '20. Jahrhundert'.


// Aufgabe 10: Iteriere mit for...of über das Array 'korrespondenten'
// und gib für jeden Eintrag aus: "Brief an [Name]"

Tipp

Arbeiten Sie die Aufgaben von oben nach unten ab. Jede Aufgabe baut auf den vorherigen auf — die Variablen absender, jahr und korrespondenten können Sie in späteren Aufgaben weiterverwenden.

DOM-Detektiv

Unten sehen Sie eine HTML-Seite über Hugo Schuchardt. Ihre Aufgabe ist es, die Seite mit JavaScript zu manipulieren. Schreiben Sie Ihren JavaScript-Code im JS-Tab. Die HTML-Vorschau aktualisiert sich automatisch.

Aufgaben:

Ändern Sie die Farbe der Überschrift (h1) auf darkblue.
Ändern Sie den Text des Elements mit der ID beschreibung in: „Hugo Schuchardt war ein bedeutender Sprachwissenschaftler in Graz."
Fügen Sie der ul-Liste einen neuen Listenpunkt hinzu: „Kreolsprachen".
Blenden Sie den Absatz mit der Klasse versteckt ein, indem Sie die Klasse versteckt entfernen.
Erstellen Sie einen neuen <p>-Absatz mit dem Text „Diese Seite wurde mit JavaScript verändert." und fügen Sie ihn am Ende von #inhalt ein.

<div id="inhalt">
  <h1>Hugo Schuchardt</h1>
  <p id="beschreibung">Platzhalter-Text hier.</p>

  <h2>Forschungsgebiete</h2>
  <ul id="gebiete">
    <li>Romanistik</li>
    <li>Baskologie</li>
    <li>Sprachkontaktforschung</li>
  </ul>

  <p class="versteckt" style="display:none;">
    Schuchardt war Professor an der Universität Graz
    und hinterließ über 13.000 Briefe.
  </p>
</div>

#inhalt {
  font-family: Georgia, serif;
  max-width: 600px;
  padding: 1rem;
  line-height: 1.6;
}

h1 {
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5rem;
}

ul {
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.25rem;
}

.versteckt {
  display: none;
}

// === DOM-Detektiv: Ihre Aufgaben ===

// Aufgabe 1: Farbe der h1-Überschrift auf 'darkblue' setzen


// Aufgabe 2: Text von #beschreibung ändern


// Aufgabe 3: Neuen Listenpunkt 'Kreolsprachen' zur ul#gebiete hinzufügen


// Aufgabe 4: Klasse 'versteckt' entfernen und display auf 'block' setzen
// Tipp: querySelector('.versteckt') und style.display = 'block'


// Aufgabe 5: Neuen Absatz erstellen und an #inhalt anhängen

Vorschau

TEI-zu-HTML

Unten finden Sie einen TEI-XML-String, der einen Brief von Hugo Schuchardt enthält. Schreiben Sie JavaScript, das diesen Brief parst und als formatiertes HTML darstellt.

Aufgaben:

Parsen Sie den TEI-XML-String mit DOMParser.
Extrahieren Sie: Titel, Datum (dateline), Anrede (salute im opener), Brieftext (p-Elemente im body) und Unterschrift (signed).
Bauen Sie ein HTML-Fragment zusammen (mit Template Literals).
Fügen Sie das HTML in den #ausgabe-Container ein.

<h1>TEI-Brief-Anzeige</h1>
<p>Klicken Sie "Ausführen", um den Brief aus TEI-XML zu rendern.</p>
<hr>
<div id="ausgabe">
  <!-- Hier wird der Brief per JavaScript eingefügt -->
</div>

body {
  font-family: Georgia, serif;
  max-width: 650px;
  margin: 0 auto;
  padding: 1.5rem;
  line-height: 1.7;
  color: #222;
}

h1 { font-size: 1.4rem; }

.brief-anzeige {
  background: #fafaf5;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1rem;
}

.brief-anzeige h2 {
  font-size: 1.2rem;
  color: #1a5276;
  margin: 0 0 0.5rem;
}

.brief-datum {
  font-style: italic;
  color: #666;
  margin-bottom: 0.5rem;
}

.brief-anrede {
  font-weight: bold;
  margin-bottom: 1rem;
}

.brief-text {
  margin-bottom: 1rem;
}

.brief-gruss {
  font-style: italic;
}

.brief-unterschrift {
  font-weight: bold;
  text-align: right;
  margin-top: 0.5rem;
}

// === TEI-zu-HTML Übung ===

// Der TEI-XML-String (nicht verändern!)
const teiXml = `
<TEI xmlns="http://www.tei-c.org/ns/1.0">
  <teiHeader>
    <fileDesc>
      <titleStmt>
        <title>Brief von Hugo Schuchardt an Rudolf Meringer</title>
      </titleStmt>
    </fileDesc>
  </teiHeader>
  <text>
    <body>
      <opener>
        <dateline>Graz, 17. November 1904</dateline>
        <salute>Lieber Freund und Kollege!</salute>
      </opener>
      <p>Ich danke Ihnen bestens für die Übersendung Ihres
      neuesten Aufsatzes. Die darin enthaltenen Beobachtungen
      zur Wortgeschichte finde ich überaus anregend.</p>
      <p>Besonders Ihre Ausführungen über die Bezeichnungen
      der Ackergeräte haben mein Interesse geweckt, da ich
      selbst seit längerem ähnliche Studien betreibe.</p>
      <closer>
        <salute>Mit herzlichen Grüßen</salute>
        <signed>Ihr ergebener Hugo Schuchardt</signed>
      </closer>
    </body>
  </text>
</TEI>`;

// Aufgabe 1: TEI-XML parsen
// Tipp: const parser = new DOMParser();
// const doc = parser.parseFromString(teiXml, 'application/xml');


// Aufgabe 2: Daten extrahieren
// Tipp: doc.querySelector('title').textContent


// Aufgabe 3: HTML zusammenbauen (Template Literal)
// Tipp: Verwenden Sie die CSS-Klassen aus dem CSS-Tab


// Aufgabe 4: HTML in #ausgabe einfügen
// Tipp: document.querySelector('#ausgabe').innerHTML = ...

Vorschau

Tipp

Beachten Sie, dass der Brief zwei <p>-Absätze im <body> hat. Verwenden Sie querySelectorAll und eine Schleife, um alle Absätze zu erfassen. Für die Anrede müssen Sie die salute im opener von der im closer unterscheiden.

CSV-Parser

Gegeben ist ein CSV-String (Comma-Separated Values) mit Daten aus Schuchardts Korrespondenz. Schreiben Sie JavaScript, das diesen CSV-String in eine HTML-Tabelle umwandelt und in den DOM einfügt.

Aufgaben:

Teilen Sie den CSV-String in Zeilen auf (split('\n')).
Teilen Sie jede Zeile in Zellen (split(',')).
Bauen Sie eine HTML-Tabelle: Die erste Zeile wird zur Kopfzeile (<thead>), die restlichen zu Datenzeilen (<tbody>).
Fügen Sie die Tabelle in den #tabelle-container ein.

<h1>Schuchardt-Korrespondenz</h1>
<p>Klicken Sie "Ausführen", um die CSV-Daten als Tabelle darzustellen.</p>
<hr>
<div id="tabelle-container">
  <!-- Hier wird die Tabelle per JavaScript eingefügt -->
</div>

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  max-width: 700px;
  margin: 0 auto;
  padding: 1.5rem;
  color: #222;
}

h1 { font-size: 1.3rem; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #ddd;
}

th {
  background: #1a5276;
  color: white;
  font-weight: 600;
}

tr:hover {
  background: #f5f5f0;
}

tr:nth-child(even) {
  background: #fafafa;
}

tr:nth-child(even):hover {
  background: #f0f0eb;
}

// === CSV-Parser Übung ===

// Der CSV-String (nicht verändern!)
const csvDaten = `Empfänger,Jahr,Ort,Sprache,Seiten
Otto Benndorf,1879,Graz,Deutsch,2
Karl Vossler,1904,Graz,Deutsch,3
Rudolf Meringer,1904,Graz,Deutsch,4
Kristoffer Nyrop,1910,Graz,Französisch,2
Julio de Urquijo,1920,Graz,Spanisch,5`;

// Aufgabe 1: CSV in Zeilen aufteilen
// Tipp: const zeilen = csvDaten.split('\n');


// Aufgabe 2: Erste Zeile = Kopfzeile, Rest = Daten
// Tipp: const kopfzeile = zeilen[0].split(',');
// const datenzeilen = zeilen.slice(1);


// Aufgabe 3: HTML-Tabelle zusammenbauen
// Tipp: Beginnen Sie mit '<table>' und bauen Sie
// <thead> für die Kopfzeile und <tbody> für die Daten.
// Verwenden Sie eine Schleife für die Datenzeilen.


// Aufgabe 4: Tabelle in #tabelle-container einfügen
// Tipp: document.querySelector('#tabelle-container').innerHTML = ...

Vorschau

Hinweis

Ein einfacher CSV-Parser funktioniert gut, solange keine Kommas in den Werten selbst vorkommen. In der Praxis würde man für komplexe CSV-Dateien eine Bibliothek verwenden. Für diese Übung reicht split(',') aus.

Agentic Coding — Prompt-Idee

„Schreibe JavaScript, das einen CSV-String in eine HTML-Tabelle umwandelt. Die erste Zeile soll die Kopfzeile werden. Verwende Template Literals für das HTML. Kommentiere jeden Schritt." — Vergleichen Sie das LLM-Ergebnis mit Ihrer eigenen Lösung!

Für eigene Projekte: Fertige Hilfsmodule

Für Ihr Portfolio und die Assignments stehen zwei wiederverwendbare JavaScript-Module bereit, die Ihnen häufige Aufgaben abnehmen:

js/tei-viewer.js — TEI-XML laden, Metadaten extrahieren und als HTML rendern. Nutzung: <script src="../../js/tei-viewer.js"> und dann TEIViewer.loadAndRender('brief.xml', '#ausgabe')
js/data-utils.js — JSON/CSV/GeoJSON laden, Tabellen rendern, Daten filtern und sortieren. Nutzung: <script src="../../js/data-utils.js"> und dann z.B. DataUtils.loadCSV('daten.csv')

In den Übungen oben lernen Sie, wie diese Funktionen intern funktionieren. In Ihren Projekten können Sie die Module direkt einbinden, statt den Code jedes Mal neu zu schreiben.