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.

Legen Sie ein neues Verzeichnis an und kopieren Sie folgende Dateien, intro.html und intro.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;

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.

Legen Sie ein neues Verzeichnis zahlenraten an und darin zwei Dateien index.html und raten.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();

Lösungsvorschlag

raten.js

// Globale Variablen
let geheim = 0;
let anzahl = 0;
 
function neueZahl() {
    // Zugriff auf globale Variablen
    geheim = Math.floor(Math.random()*1000);
    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);
 
    anzahl++;
 
    if (zahl<geheim) {
        ergebnis.innerText = `Deine Zahl ist zu klein. Anzahl Versuche: ${anzahl}`;
    } else if (zahl>geheim) {
        ergebnis.innerText = `Deine Zahl ist zu gross. Anzahl Versuche: ${anzahl}`;
    } else {
        ergebnis.innerText = `Super! Du hast die Zahl nach ${anzahl} Versuchen gefunden!`;
        neueZahl();
    }
}
 
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.

Interaktion mit HTML

Einführungsbeispiel

Buchstaben verwürfeln

Zahlenraten

https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG