lehrkraefte:blc:informatik:ffprg1-2024:htmlinteraction [https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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 =====
<WRAP todo>
  * Legen Sie ein neues Verzeichnis an und kopieren Sie folgende Dateien, ''intro.html'' und ''intro.js'' in dieses Verzeichnis.
<code html 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>
</code>

<code javascript 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>!`;
    }
}
</code>
  * 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:
<code javascript>
// Aktuelle Zeit speichern.
start = new Date();
//
// dann irgendwo, irgendwann später:
millisekunden = (new Date())-start;
</code>
</WRAP>

===== Buchstaben verwürfeln =====
<WRAP todo>
Voraussetzung: Sie haben den die Aufgabe [[lehrkraefte:blc:informatik:ffprg1-2024:random#buchstaben_in_woertern_vertauschen|Verwürfeln eines Texts]] schon gelöst oder zumindest gut verstanden.
  * Legen Sie ein neues Verzeichnis an. Darin speichern Sie folgende HTML-Datei:
<code html 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>
</code>

Die JavaScript-Datei ''buchstabensalat.js'' enthält den Code zum [[lehrkraefte:blc:informatik:ffprg1-2024:random#buchstaben_in_woertern_vertauschen|Verwürfeln eines Texts]] plus folgende Funktion:
<code javascript 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);
}
</code>
  * 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.
</WRAP>


===== Zahlenraten =====
<WRAP todo>
  * Legen Sie ein neues Verzeichnis ''zahlenraten'' an und darin zwei Dateien ''index.html'' und ''raten.js''.
  * Kopieren Sie folgende html-Datei:
<code html 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>
</code>
  * Die JavaScript-Datei könnte wie folgt aussehen:
<code javascript 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();
</code>

<hidden Lösungsvorschlag>
<code javascript 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();
</code>
</hidden>

**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.
</WRAP>