Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
lehrkraefte:blc:informatik:ffprg1-2024:htmlinteraction [2024/03/07 07:45] Ivo Blöchliger [Zahlenraten] |
lehrkraefte:blc:informatik:ffprg1-2024:htmlinteraction [2024/04/05 12:40] (current) Ivo Blöchliger [Einführungsbeispiel] |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== Interaktion mit HTML ====== | ====== Interaktion mit HTML ====== | ||
- | Der HTML-Code einer Webseite kann mit JavaScript komplett kontrolliert werden, d.h. verändert, ergänzt, | + | Der HTML-Code einer Webseite kann mit JavaScript komplett kontrolliert werden, d.h. verändert, ergänzt, |
===== Einführungsbeispiel ===== | ===== Einführungsbeispiel ===== | ||
Line 25: | Line 25: | ||
</ | </ | ||
</ | </ | ||
+ | |||
<code javascript intro.js> | <code javascript intro.js> | ||
let anzahl = 0; | let anzahl = 0; | ||
Line 38: | Line 39: | ||
</ | </ | ||
* Testen Sie die Webseite. Studieren Sie den 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; | ||
+ | </ | ||
</ | </ | ||
+ | |||
+ | ===== Buchstaben verwürfeln ===== | ||
+ | <WRAP todo> | ||
+ | Voraussetzung: | ||
+ | * Legen Sie ein neues Verzeichnis an. Darin speichern Sie folgende HTML-Datei: | ||
+ | <code html index.html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | <script src=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <br> | ||
+ | <button onclick=" | ||
+ | < | ||
+ | <div id=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Die JavaScript-Datei '' | ||
+ | <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(" | ||
+ | let ausgabe = document.getElementById(" | ||
+ | ausgabe.innerText = textwuerfeln(eingabe.value); | ||
+ | } | ||
+ | </ | ||
+ | * Vervollständigen Sie die JavaScript-Datei, | ||
+ | * Fügen Sie einen zweiten Knopf hinzu, der den verwürfelten Text in das Eingabe-Feld kopiert. | ||
+ | </ | ||
+ | |||
===== Zahlenraten ===== | ===== Zahlenraten ===== | ||
<WRAP todo> | <WRAP todo> | ||
* Legen Sie ein neues Verzeichnis '' | * Legen Sie ein neues Verzeichnis '' | ||
+ | * Kopieren Sie folgende html-Datei: | ||
+ | <code html index.html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | <script src=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <p id=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | * 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(' | ||
+ | let ergebnis = document.getElementById(' | ||
+ | // 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(); | ||
+ | </ | ||
+ | |||
+ | <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(' | ||
+ | let ergebnis = document.getElementById(' | ||
+ | // Umwandlung in eine Zahl, weil value immer ein String ist. | ||
+ | let zahl = Number(raten.value); | ||
+ | |||
+ | anzahl++; | ||
+ | |||
+ | if (zahl< | ||
+ | ergebnis.innerText = `Deine Zahl ist zu klein. Anzahl Versuche: ${anzahl}`; | ||
+ | } else if (zahl> | ||
+ | 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. | ||
</ | </ |