Interaktion mit HTML
Der HTML-Code einer Webseite kann mit JavaScript komplett kontrolliert werden, d.h. verändert, ergänzt, gelöscht oder erzeugt werden. Auch sind Reaktionen auf Benutzereingaben möglich.
Einführungsbeispiel
- Legen Sie ein neues Verzeichnis an und kopieren Sie folgende Dateien,
intro.html
undintro.js
in dieses Verzeichnis.
- intro.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="intro.js"></script> <title>HTML-Interaktion</title> </head> <body> <h1>HTML Interaktion</h1> <p>Hallo. Das folgende div-Element hat die ID <tt>ausgabe</tt>. Darüber kann es in JavaScript mit <tt>document.getElementById("ausgabe");</tt>angesprochen werden.</p> <p>Drücke folgenden Knopf: <button onclick="knopfdruck()">Drück mich!</button></p> <div id="ausgabe" style="background:lightgreen"> Original Text </div> </body> </html>
- intro.js
let anzahl = 0; function knopfdruck() { let mydiv = document.getElementById("ausgabe"); anzahl++; if (anzahl<5) { // innerText verwenden, wenn kein HTML-Code eingefügt werden soll mydiv.innerText = `Danke, dass Du den Knopf ${anzahl} mal gedrückt hast.`; } else { // inklusive HTML-Code. Es muss auf Sonderzeichen geachtet werden. mydiv.innerHTML = `${anzahl} mal ist mir <b>zu viel</b>!`; } }
- Testen Sie die Webseite. Studieren Sie den Code.
Bonus Geben Sie an, wie oft der Knopf pro Sekunde gedrückt wurde. Fügen Sie zusätzlich einen «Reset»-Knop ein. Zeitmessung in JavaScript:
// Aktuelle Zeit speichern. start = new Date(); // // dann irgendwo, irgendwann später: millisekunden = (new Date())-start;
Buchstaben verwürfeln
Voraussetzung: Sie haben den die Aufgabe Verwürfeln eines Texts schon gelöst oder zumindest gut verstanden.
- Legen Sie ein neues Verzeichnis an. Darin speichern Sie folgende HTML-Datei:
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="buchstabensalat.js"></script> <title>Buchstaben Salat</title> </head> <body> <h1>Buchstaben Salat</h1> <textarea rows=5 cols=40 id="eingabe">Diesen Text kann man noch flüssig lesen, auch wenn Buchstaben innerhalb der Wörter vertauscht werden.</textarea> <br> <button onclick="verwuerfeln()">Vertauschen</button> <h2>Ausgabe</h2> <div id="ausgabe" style="background:lightgreen; width:50%"></div> </body> </html>
Die JavaScript-Datei buchstabensalat.js
enthält den Code zum Verwürfeln eines Texts plus folgende Funktion:
- buchstabensalat.js
// // // Hier fehlt der Code, der einen Text verwürfelt // // function verwuerfeln() { // Wird aufgerufen, wenn der Knopf gedrückt wird. let eingabe = document.getElementById("eingabe"); let ausgabe = document.getElementById("ausgabe"); ausgabe.innerText = textwuerfeln(eingabe.value); }
- Vervollständigen Sie die JavaScript-Datei, damit die Seite funktioniert.
- Fügen Sie einen zweiten Knopf hinzu, der den verwürfelten Text in das Eingabe-Feld kopiert.
Zahlenraten
- Legen Sie ein neues Verzeichnis
zahlenraten
an und darin zwei Dateienindex.html
undraten.js
. - Kopieren Sie folgende html-Datei:
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="raten.js"></script> <title>Zahlenraten</title> </head> <body> <h1>Zahlenraten</h1> <p>Ich habe mir eine Zufallszahl zwischen 0 und 99 gemerkt. Errate Sie!</p> <p><input type="number" id="raten"><button onclick="pruefen()">Prüfen!</button></p> <p id="ergebnis"></p> </body> </html>
- Die JavaScript-Datei könnte wie folgt aussehen:
- raten.js
// Globale Variablen let geheim = 0; let anzahl = 0; function neueZahl() { // Zugriff auf globale Variablen geheim = Math.floor(Math.random()*100); anzahl = 0; } function pruefen() { let raten = document.getElementById('raten'); let ergebnis = document.getElementById('ergebnis'); // Umwandlung in eine Zahl, weil value immer ein String ist. let zahl = Number(raten.value); // // soll eine entsprechende Meldung im «ergbnis» angezeigt werden. // } // Am Anfang eine neue Zufallszahl bestimmen neueZahl();
Bonus Überlegen Sie sich eine optimale Strategie und berechnen Sie, wie viele Züge höchstens nötig sind, um aus $n$ Zahlen die richtige mit Sicherheit zu finden.
Hardcore Berechnen Sie exakt, wie viele Versuche durchschnittlich nötig sind, um (mit optimaler Strategie) die korrekte Zahl aus $n$ Zahlen zu erraten.