Wolfgang Mueller
In dieser Lektion lernen Sie die Grundlagen zur Nutzung von JavaScript innerhalb von Webseiten kennen. Ziel ist es, dass Sie in der Lage sind eine erste dynamische Webseite unter Einbezug von JavaScript erstellen können.
HTML und CSS ermöglichen die Beschreibung statischer Webseiten auf Grundlage von Inhalten und deren Struktur sowie Beschreibungen zu deren Darstellung (siehe Abbildung 1). Die Integration von dynamischen Elementem bedarf der Beschreibung der spezifischen dynamischen Inhalte und deren Verhalten in Form von Skripten in JavaScript. Solche Skripte können dann Im Fall des Eintreffens eines bestimmten Ereignisses (z.B. ein Klick auf einen Inhalt) aktiviert und aufgerufen werden. Die Skripte selbst können dann wiederum Inhalte und Strukturen der Webseite dabei deren Darstellung verändern oder beeinflussen. Dazu HTML-, CSS- und JavaScript-Inhalte miteinander verknüft werden.
JavaScript-Inhalte funktionieren daher zunächst erst einmal nicht ohne eine Web-Seite, in die sie eingebunden sind (Wir werden später kurz auf anderen Verwendungen von JavaScript in anderen Kontexten und unabhängig von Web-Seiten eingehen).
JavaScript-Code kann mit dem speziell für diese Fälle vorgesehenen <script<-Tag in eine HTML-Seite eingebunden werden. Die einfachste Möglichkeit ist dabei
zunächst die direkter Einbindung von JavaScript-Anweisungen in die HTML-Datei, wie in dem folgenden Beispiel
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript verwenden</title>
<script>
alert("JavaScript im Header!");
</script>
</head>
<body>
<h1>JavaScript</h1>
<script>
alert("JavaScript nach der Ueberschrift");
</script>
<p>Schritt 1: JavaScript-Code einbinden.</p>
<script>
alert("JavaScript am Dokumentende.");
</script>
</body>
</html>
<script<-Tags können im HTML-Code mehrfach und an verschiedenen Stellen eingebunden werden Entsprechend der Verarbeitung von HTML-Dokumenten von oben nach unten kommen
dann auch entsprechende JavaScript-Elemente zur Ausführung.
In der Praxis wird JavaScript-Code zu weiten Teilen in eine externe Datei ausgelagert, wie im folgenden Beispiel dargestellt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript verwenden</title>
<script src="scripts/example2.js"></script>
</head>
<body>
<h1>JavaScript</h1>
<p>JavaScript code included from external file</p>
</body>
</html>
Zu dieser HTML-datei gehört dann eine gesonderte JavaScript-Datei, in diesem Fall mit dem Namen "example2.js" im Unterordner "scripts":
alert("JavaScript successfully included");
Wie auch in vielen anderen Programmiersprachen (z.B. Python, Ruby) stellen Anweisungen ein grundlegendes Element der Sprache dar. Anweisungen führen jeweils eine Aktion aus. Anweisungen werden Zeile für Zeile gemäss der Reihenfolge in der Skript-Datei ausgeführt. Einzelne Anweeisungen werden in einer Anweisungsfolge in JavaScript mit einem Semikolon (";") voneinander getrennt. Das bedeutet, dass eine Anweisung in JavaScript in der Regel mit einem Semikolon endet.
JavaScript unterstützt verschiedene Formen von Anweisungen. Eine einfache Form stellen Zuweisungen dar, bei der einer Variable ein Wert zugewiesen wird. Anders als in Python müssen Variable vor der ersten Verwendung bereits mittels des Schlüsselworts var deklariert werden.
Die Deklaration kann aber auch, wie in diesem Beispiel, gemeinsam mit einer Zuweisung in einer Zeile erfolgen:
var name = "Lord Voldemort";
alert("Hello " + name + "!");
JavaScript verwendet das Prinzip der dynamischen Typisierung. Das bedeutet, der Typ der Variable ergibt sich dynamisch anhand des Typs des zugewiesenen Werts.
Auf dieser Grundlage sind dann auch Berechnungen möglich. Im folgenden Beispiel wird ein Gesamtpreis aus einem Einzelpreis und einer Menge berechnet:
var unitPrice = 2.20;
var amount = 4;
var totalPrice = unit_price * amount;
alert("The total price is: " + totalPrice);
Verzweigungen stellen ein wichtiges Elemwnt dar, um den Programmfluss steuern zu können.Die wichtigste Form der Verzeigung in JavaScript ist die if-Anweisung. Diese hat die folgende grundlegende Struktur:
if (condition) {
// block of code to be executed if the condition is true
}
else {
// block of code to be executed if the condition is false
}
Das folgende Beispiel verdeutlicht die Verwendung der if-Verzweigung:
var number = prompt("Enter a number:");
if (number >= 0) {
alert("The umber is positive!");
}
else {
alert ("The number is negative!");
}
Bemerkung: In diesem Beispiel wird die Funktion prompt zur interaktiven Eingabe eines Wertes verwendet,
um die Verwendung der if-Anweisung besser illustrieren zu können. Wir werden in den folgenden Schritten
bessere Möglichkeiten kennenlernen, solche Eimgaben direkt über Formularelemente auf der Web-Seite zu ermöglichen. Die prompt-Funktion
verwenden wir daher nur vorläufig an dieser Stelle für solche Zwecke.
Eine JavaScript-Funktion repräsentiert eine Zusammenstellung von Anweisungen, die in ihrer Abfolge eine bestimmte Aufgabe lösen, zu einem Block. Dieser Block kann dann aufgerufen und abgearbeitet werden, wenn die entsprechende Aufgabenstellung ansteht und gelöst werden muss. Funktionen können beliebig oft aufgerufen werden. Funktionen dienen der Strukturierung und Modularisierung von JavaScript-Code. Sie stellen dabei wichtige Elemente in Top-Down-, aber auch im Bottom-Up-Designstrategien von Software dar. Funktionen fördern zudem die Wiederverwendung von JavaScript-Code, sowohl innerhalb eines Projekts, als auch die Übernahme von Code in andere Projekte. Das folgende Beispiel illustriert die Definition einer Funktion:
function sumOfTwoValues(a, b) {
var result = a + b;
return result;
}
Die Definition einer Funktion wird in JavaScript immer mit dem Schlüsselwort function eingeleitet. Es folgt der Bezeichner, also der Name der Funktion.
Eine Konvention ist es in JavaScript, dass Funktionsnamen mit einem Kleinbuchstaben beginnen und bei zusammengesetzten Begriffen entsprechend der
CamelCase-Konventionmit Grossbuchstaben inmitten des Bezeichners gearbeitet wird. Parameter können innerhalb des folgenden Klammerpaars
angegeben werden. Die Klammern müssen auch dann aufgeführt werden, wenn die Funktion keine Parameter hat. Die zur Funktion gehörige Anweisungssequenz wird
danach innerhalb des folgenden Paars geschweifter Klammern nacheinander aufgeführt. Dieser Bereich wird auch als Funktionsblock bezeichnet.
folge
Die Verwendung dieser Funktion wird im folgenden Beispiel illustriert:
var x = 2, y = 5;
var sum;
// add 2 number literals
sum = sumOfTwoValues(1, 4.5);
alert(sum);
// add the values of 2 variables
sum = sumOfTwoValues(x, y);
alert(sum);
prompt() ab und geben Sie die errechnete Mehrwertsteuer über alert() aus.
alert()-Aufruf in eine eigene Funktion aus.