Lernfabrik

Einführung in JavaScript

JavaScript ist eine Programmiersprache, die in Webseiten verwendet wird, um sie interaktiv zu gestalten. HTML dient als strukturelles Grundgerüst und ermöglicht die Darstellung von Inhalten.

Verarbeitung – Benutzereingaben

JavaScript verarbeitet Benutzereingaben, manipuliert Daten und ändert dynamisch die Darstellung der Webseite.

<script>
alert("Willkommen!");
</script>

Ausgabemöglichkeiten

Beispiel: alert

<script>
alert("Willkommen auf unserer Webseite!");
</script>

Beispiel: console

<script>
console.log("Eine einfache Protokollmeldung.");
console.warn("Dies ist eine Warnung.");
console.error("Ein Fehler ist aufgetreten!");
</script>

innerHTML-Eigenschaft

Mit innerHTML kann der Inhalt von HTML-Elementen dynamisch verändert werden.

<script>
function berechne() {
    var menge = 10;
    var preis = 2.50;
    var gesamtpreis = preis * menge;
    document.getElementById("idausgabe").innerHTML = gesamtpreis;
}
</script>

Beispiel mit HTML-Inputboxen

Angepasstes JavaScript mit Inputfeldern:

Inputbox-Beispiel
<script>
function berechne() {
    var menge = document.getElementById("idMenge").value;
    var preis = document.getElementById("idPreis").value;
    var gesamtpreis = preis * menge;
    document.getElementById("idausgabe").innerHTML = gesamtpreis;
}
</script>

Menge: <input id="idMenge" value="10">
Preis: <input id="idPreis" value="2.50">
<button onclick="berechne()">Klick mich!</button>
<div id="idausgabe"></div>

Menge:

Preis:

Hier wird der Gesamtpreis angezeigt...

Zusammenfassung

Dieses Beispiel zeigt, wie HTML und JavaScript zusammenarbeiten. Benutzerwerte aus Inputfeldern werden mit JavaScript verarbeitet und auf der Seite ausgegeben – ohne Neuladen der Seite.

HTML-JavaScript Zusammenspiel