Differences

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

--- lehrkraefte:blc:informatik:ffprg1-2024:htmlinteraction [2024/03/07 07:45]
Ivo Blöchliger
+++ lehrkraefte:blc:informatik:ffprg1-2024:htmlinteraction [2024/04/05 12:40] (current)
Ivo Blöchliger [Einführungsbeispiel]
@@ Line 1: / Line 1: @@
 ====== Interaktion mit HTML ======
-Der HTML-Code einer Webseite kann mit JavaScript komplett kontrolliert werden, d.h. verändert, ergänzt, geschlöscht oder erzeugt werden. Auch sind Reaktionen auf Benutzereingaben möglich.
+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 =====
@@ Line 25: / Line 25: @@
 </html>
 </code>
 <code javascript intro.js>
 let anzahl = 0;
@@ Line 38: / Line 39: @@
 </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>