Zur Entwicklung dynamischer Inhalte ist Javascript unerlässlich. Javascript lässt sich mittels der Script-Tags seht leicht in html einbinden.

Javascript in ein html-Grundgerüst einbinden

Auf meiner Seite möchte ich Code-Snippets bereitstellen, die Ihr in Euren Projekten verwenden könnt.

Wenn ihr z. B. auf Eurer Seite die Mehrwertsteuer berechnen lassen wollt, so lässt sich das mit Javascript seht leicht umsetzen. Javascript ist im Gegensatz zu Java eine Scriptsprache und muss nicht kompiliert werden.

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titel</title>
</head>

<body>
    Nettobetrag (Preis ohne Mehrwertsteuer) in Euro: <input type="text" id="betrag"><br />
    Mehrwertsteuer: <input type="text" id="mwst"><br />
    <button id="buttonSend">Send</button><br />
    <div id="result"></div>
    <script>
        //Mehrwertsteuer berechnen
        document.getElementById("buttonSend").addEventListener("click", () => {

            let betrag = document.getElementById("betrag").value;
            let mwst = document.getElementById("mwst").value;
            let result = document.getElementById("result");

            let res;
            switch (parseInt(mwst)) {
                case 5:
                    res = betrag * 1.05;
                    break;
                case 7:
                    res = betrag * 1.07;
                    break;
                case 16:
                    res = betrag * 1.16;
                    break;
                case 19:
                    res = betrag * 1.19;
                    break;
                default:
                    alert("Mehrwertsteuer 5, 7, 16 oder 19%")
            }

            result.innerHTML = res;
        })


    </script>

</body>

</html>

Alternativ könnt Ihr durch Javascript ein Fenster öffnen lassen. Folgender Code muss in diesem Fall in die Scripttags eingefügt werden

let res;
Check1 = prompt('Geben Sie den Nettobetrag ein', '');
Check2 = prompt('Geben Sie die Mehrwertssteuer ein', '');
if (Check2 == '16') {
  res = Check1 * 1.16;  
  alert('Ergebnis ' + res);
} else if (Check2 == '19') {
  res = Check1 * 1.19;  
  alert('Ergebnis ' + res);
} else if (Check2 == '16') {
  res = Check1 * 1.16;  
  alert('Ergebnis ' + res);
} else if (Check2 == '7') {
  res = Check1 * 1.07;  
  alert('Ergebnis ' + res);
} else if (Check2 == '5') {
  res = Check1 * 1.05;  
  alert('Ergebnis ' + res);
} else {
  alert('Falsche Eingabe');
}

Iht könnt den Code unter dem Link ausprobieren und kopieren. So einfach lässt sich der Code auf der eigenen Webseite in die index.php oder in die index.html einbinden.

Teste