Einführung in JavaScript
JavaScript ist eine Programmiersprache, die in Webseiten verwendet wird, um sie interaktiv zu gestalten. HTML (Hypertext Markup Language) wird für die Strukturierung von Webinhalten verwendet. HTML dient als strukturelles Grundgerüst für Webseiten und ermöglicht die Darstellung von Inhalten.
Verarbeitung - Benutzereingaben
JavaScript verarbeitet Benutzereingaben, manipuliert Daten und ändert dynamisch die Darstellung der Webseite. Es wird in den <script>-Tags innerhalb von HTML eingebettet.
Diese Tags können im <head>-Bereich oder am Ende des <body>-Bereichs platziert werden.
Ausgabemöglichkeiten - Informationsweitergabe an den Benutzer
JavaScript bietet verschiedene Ausgabemöglichkeiten:
alert-Fenster: Einfache Benachrichtigungen, die die Ausführung blockieren.- Popup-Fenster: Interaktive Dialoge für benutzerdefinierte Inhalte.
console-Ausgaben: Protokollierung und Fehleranzeige für Entwickler.
Beispiel für ein Popup - alert:
<script>
alert("Willkommen auf unserer Webseite!");
</script>Beispiel für console-Ausgaben:
<script>
console.log("Eine einfache Protokollmeldung.");
console.warn("Dies ist eine Warnung für Entwickler.");
console.error("Ein Fehler ist aufgetreten!");
</script>alert - Einfache Benachrichtigungsfenster:
Das alert-Fenster ist eine einfache Möglichkeit, eine Nachricht an den Benutzer anzuzeigen. Es wird oft verwendet, um wichtige Meldungen oder Hinweise bereitzustellen. Das alert-Fenster blockiert die Ausführung des Skripts, bis der Benutzer die Meldung bestätigt.
Hier ein Beispiel für die Verwendung von alert:
<script>
alert("Willkommen auf unserer Webseite!");
</script>console - Ausgaben für Entwickler:
Die console ist eine leistungsstarke Methode für Entwickler, um Informationen zu protokollieren, während sie an ihren JavaScript-Anwendungen arbeiten. Mit console können Nachrichten, Warnungen, Fehlermeldungen und sogar komplexere Datenstrukturen in der Entwicklertools-Konsole des Browsers angezeigt werden, ohne die Benutzeroberfläche zu beeinträchtigen.
Beispiel für die Verwendung von console:
<script>
console.log("Eine einfache Protokollmeldung.");
console.warn("Dies ist eine Warnung für Entwickler.");
console.error("Ein Fehler ist aufgetreten!");
</script> Die innerHTML- Eigenschaft
Die innerHTML-Eigenschaft ist eine Methode in JavaScript, mit der der Inhalt eines HTML-Elements geändert oder aktualisiert werden kann. Diese Eigenschaft ermöglicht es, Text, HTML-Tags und sogar HTML-Strukturen in ein Element einzufügen.
Einsatzgebiete
Dynamisches Aktualisieren oder das Berechnen von Inhalten basierend auf Benutzeraktionen.
Interaktive Anwendungen sind mit innerHTML möglich, sie dienen dazu, in Echtzeit Benutzeraktionen widerzuspiegeln, ohne die gesamte Seite neu laden zu müssen.
Beispiel für die Verwendung von innerHTML:
<script>
// Funktion Preis-Menge
function berechne() {
var ausgabe = "";
var menge = 10;
var preis = 2.50;
var gesamtpreis = preis * menge;
ausgabe = ausgabe + gesamtpreis;
document.getElementById("idausgabe").innerHTML = ausgabe;
}
</script>
Funktionen sind öfters verwendete Anweisungsfolgen, die durch den Aufruf des Funktionsnamens ausgeführt werden. Programme werden durch die Verwendung von Funktionen übersichtlicher, strukturierter und kürzer, da sie Redundanz im Quellcode verhindern.
<script>
function Funktionsname(){
Anweisungsblock
}
<script>Funktionen in JavaScript sind entscheidende Bausteine, die dazu verwendet werden, Code in wiederverwendbaren Blöcken zu organisieren und auszuführen. Hier jetzt auf ein Beispiel angewandt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Beispiel</title>
</head>
<body>
<script>
// Funktion, Berechnung Preis * Menge
function berechne() {
var ausgabe = "";
var menge = 10;
var preis = 2.50;
var gesamtpreis = preis * menge;
ausgabe = ausgabe + gesamtpreis;
document.getElementById("idausgabe").innerHTML = ausgabe;
}
</script>
<button onclick="berechne();">Klick Mich!</button>
<div id="idausgabe"></div>
</body>
</html>
Beispiel mit Anwendung von HTML-Inputboxen zum einlesen von Werten
Die Menge und der Preis können bspw. auch über sogenannte Inputboxen eingegeben werden...
Das Programm müsste auf zwei Zeilen abgeändert werden:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Beispiel</title>
</head>
<body>
<script>
// Funktion, Berechnung Preis * Menge
function berechne() {
var ausgabe = "";
var menge = document.getElementById("idMenge").value;
var preis = document.getElementById("idPreis").value;
var gesamtpreis = preis * menge;
ausgabe = ausgabe + gesamtpreis;
document.getElementById("idausgabe").innerHTML = ausgabe;
}
</script>
Menge: <input id="idMenge" value = "10" >
Preis: <input id="idPreis" value = "2.50">
<button onclick="berechne();">Klick Mich!</button>
<div id="idausgabe"></div>
</body>
</html>
Zusammenfassung als Lerngrundlage JavaScript-HTML
Diese Übersicht demonstriert das Zusammenspiel zwischen HTML und JavaScript. Hier ist es wichtig zu verstehen, dass die eingelesenen Werte über die HTML-Inputboxen (idMenge, idPreis) den JavaScript-Variablen "menge" und "preis" zugewiesen werden. So kann jetzt mit Hilfe der Variablen in JavaScript der "gesamtpreis" berechnet werden.
JavaScript ohne direkte Einbettung in HTML
Analog zum obigen Beispiel, können wir das Programm auch anders gestalten und zwar auch ohne den Einsatz von HTML!
function berechne(menge,preis) {
var gesamtpreis = menge * preis;
return gesamtpreis;
}
var ergebnis = berechne(10,2.50);
console.log(ergebnis);
Wir haben eine Funktion berechne(menge, preis) definiert, die zwei Parameter "menge" und "preis" erwartet und den "gesamtpreis" berechnet, indem sie diese Werte miteinander multipliziert. Der Aufruf berechne(10, 2.50) gibt jedoch das Ergebnis nicht aus oder speichert es in einer Variablen. Um das Ergebnis zu verwenden oder anzuzeigen, müssen wir es in einer Variable speichern. In diesem Beispiel wird das Ergebnis der Berechnung in der Variable "ergebnis" gespeichert und dann mit console.log(ergebnis) in der Konsole ausgegeben. Das Ergebnis wird 25 sein, da 10 mit 2.50 multipliziert wird.