lehrkraefte:blc:informatik:ffprg1-2024:htmlinteraction

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
lehrkraefte:blc:informatik:ffprg1-2024:htmlinteraction [2024/03/07 06:45] – [Zahlenraten] Ivo Blöchligerlehrkraefte:blc:informatik:ffprg1-2024:htmlinteraction [2024/04/05 10:40] (current) – [Einführungsbeispiel] Ivo Blöchliger
Line 1: Line 1:
 +====== 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>