Die Aufgabe
Aufgabe 2: JavaScript
Gegeben ist eine Seite mit drei Zeilen. Jede Zeile hat ihren eigenen onclick-Handler. Der Text jeder Zeile ist zunächst „Hier passiert etwas“. Die Zeilen werden nacheinander angeklickt: Zeile 1, dann Zeile 2, dann Zeile 3. Geben Sie nach jedem Klick an, was passiert.
- Klick auf Zeile 1: über alle Zeilen iterieren (
getElementsByTagName), das Element mit Index 2 (das dritte) auswählen und seinen Text durch XXX ersetzen. - Klick auf Zeile 2: den Text des zweiten Elements auf YYY setzen.
- Klick auf Zeile 3: ein neues Text-Objekt mit dem Inhalt „NEU“ erstellen, es einem ebenfalls neu erstellten Überschrift-Objekt als Kind zuweisen und dann beides an das dritte Listenelement anhängen.
<script> function klick1() { let zeilen = document.getElementsByTagName("li"); for (let i = 0; i < zeilen.length; i++) { if (i == 2) { zeilen[i].innerText = "XXX"; } } } function klick2() { document.getElementsByTagName("li")[1].innerText = "YYY"; } function klick3() { let text = document.createTextNode("NEU"); let ueberschrift = document.createElement("h2"); ueberschrift.appendChild(text); document.getElementsByTagName("li")[2].appendChild(ueberschrift); }</script> <body><ul> <li onclick="klick1()">Hier passiert etwas</li> <li onclick="klick2()">Hier passiert etwas</li> <li onclick="klick3()">Hier passiert etwas</li></ul></body>Die Aufgabe ist aus dem Gedächtnisprotokoll nachgebaut. Das Protokoll beschreibt nur, was die drei Handler tun; HTML und Code fehlen. Wir haben beides festgelegt: eine Liste mit drei Zeilen (<li>). Das Protokoll nennt einmal "p" und einmal „Listenelement“. Wir nehmen Listenelemente, denn in einem Absatz <p> darf keine Überschrift stehen, in einem <li> schon. Punkte nennt das Protokoll nicht.
Das Protokoll schreibt getElementByName("p"). Diese Methode gibt es so nicht; getElementsByName sucht nach dem Attribut name. Gemeint ist das Suchen nach dem Tag-Namen: getElementsByTagName.
In eigenen Worten: Jede Zeile ruft beim Anklicken ihre eigene Funktion auf. Gefragt ist je Klick: Was macht die Funktion, und was sieht der Benutzer danach?
Das DOM (Document Object Model) ist die Seite als Baum aus Knoten: Elemente wie <li> und darin Textknoten. JavaScript kann diesen Baum lesen und ändern; der Browser zeigt sofort den neuen Stand.
style.display, Farbe wechseln beim Klick.createElement und createTextNode erzeugen nur Knoten. Sichtbar werden sie erst, wenn appendChild sie in den Baum der Seite hängt.- Die Seite vor dem ersten Klick ansehen.
- Klick auf Zeile 1: Schleife und Index 2.
- Klick auf Zeile 2: Index 1.
- Klick auf Zeile 3: neue Knoten bauen und anhängen.
- Ergänzung: was weitere Klicks bewirken.