Interaktion mit HTML

This is an old revision of the document!

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.

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.

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:

<!DOCTYPE html index.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 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() {
    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.

</WRAP>

Legen Sie ein neues Verzeichnis zahlenraten an und darin zwei Dateien index.html und raten.js.

Interaktion mit HTML

Einführungsbeispiel

Buchstaben verwürfeln

Zahlenraten

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