JavaScript und DOM: Namen ausblenden und Farbe per Klick wechseln

Die Aufgabe

2) JavaScript (14 Punkte)

a) Erläutern Sie detailliert die Wirkung des JavaScript-Codes im Zusammenspiel mit der HTML-Seite aus den folgenden Ausschnitten. Was wird dem Benutzer angezeigt?

1<script>2  window.onload = function() {3    for (let i = 4; i > 0; i--) {4      let el = document.getElementById('i' + i);5      if (/^A/.test(el.innerText))6        el.style.display = "none";7  };8</script>

1<body><h1>Liste:</h1>2<ul id="u1">3  <li id="i1">Anton</li>4  <li id="i2">Beate</li>5  <li id="i3">Arthur</li>6  <li id="i4">Clara</li>7</ul>8</body>

b) Was ändert sich an der Ausgabe, wenn im Programmcode die Zeichen /^A/ durch /a/ ersetzt werden?

c) Beim Klicken auf einen Namen soll die Farbe aller Namen auf grün geändert werden. Falls sie schon grün sind auf blau. Wie muss der Code geändert werden, um das möglichst einfach zu erreichen?

Gegeben sind ein Script und eine HTML-Seite mit einer Liste aus vier Namen. In (a) soll man genau erklären, was das Script mit der Liste macht und was am Ende zu sehen ist. In (b) wird ein Zeichen im Script geändert. In (c) soll man den Code so erweitern, dass ein Klick die Farbe aller Namen wechselt.

Für die ganze Aufgabe gibt es 14 Punkte. Die Musterlösung nennt für (b) 2 und für (c) 5 Punkte; für (a) bleiben damit 7.

Achtung: Im abgedruckten Code fehlt eine schließende Klammer. Schritt 1 zeigt, wo, und ergänzt sie. Gemeint ist erkennbar der korrigierte Code.

Merke: JavaScript ändert eine Seite über das DOM (Document Object Model, die Seite als Baum aus Knoten): Element über seine id holen, dann seinen Inhalt oder Style ändern.

Die fehlende Klammer ergänzen.
(a) Liste, onload, Schleife, regulärer Ausdruck, Ausblenden; die Anzeige.
(b) Was /a/ statt /^A/ trifft; die neue Anzeige.
(c) Ein Klick-Handler an der Liste, der zwischen Grün und Blau wechselt.

Die fehlende Klammer

7    }8  };

Zählt man die Klammern im Script: Zwei öffnen sich mit { (Zeilen 2 und 3), aber nur eine schließt. So abgetippt, meldet der Browser einen Syntaxfehler und führt gar nichts aus.

Gemeint ist erkennbar der Code mit beiden Klammern: Zeile 7 bekommt ein } dazu. Was die beiden Blöcke sind, erklären die nächsten Schritte. In der Klausur lohnt sich ein kurzer Satz dazu.

Die Liste und ihre ids

11<body><h1>Liste:</h1>12<ul id="u1">13  <li id="i1">Anton</li>14  <li id="i2">Beate</li>15  <li id="i3">Arthur</li>16  <li id="i4">Clara</li>17</ul>18</body>

Die Seite hat eine Überschrift „Liste:“ und eine Aufzählung <ul> (unordered list, Liste mit Punkten) mit vier Einträgen <li> (list item). Jeder Eintrag hat eine eigene id: i1 bis i4. Eine id ist im Dokument eindeutig; über sie findet JavaScript genau ein Element.

Ohne Script zeigt der Browser alle vier Namen, wie rechts unten.

Aus Skript 02, Folie 8: Eine ID muss innerhalb eines Dokumentes eindeutig sein; Zugriff über JavaScript mit document.getElementById("IdVal").

Schritt 0Die Aufgabe

Schritt 1Die fehlende Klammer

Schritt 2Die Liste und ihre ids

Abbildung 1(a) Was das Script tut

Die Aufgabe

Die fehlende Klammer

Die Liste und ihre ids