Aufbauend auf unserem Hallo-Welt-Beispiel wollen wir nun eine etwas interessantere Ausgabe erzeugen: Statt des bekannten "Hallo Welt!" wollen wir nun die aktuelle Uhrzeit anzeigen. Da wir diese erst abfragen und zusammensetzen müssen, bevor wir sie im Nachrichtenfenster anzeigen können, entsteht für uns eine typische Notwendigkeit beim Programmieren: Wie können wir Inhalte, wie Texte oder Zahlen, für die spätere Verwendung im Programm zwischenspeichern? Wie können wir gespeicherte Inhalte verändern und kombinieren?
Für diese Aufgabe sind in allen Programmiersprachen Variablen zuständig. Variablen sind Speicherplätze (im RAM), in denen wir Inhalte wie Texte und Zahlen ablegen können. In JavaScript bleiben diese gespeichert, solange man auf einer HTML-Seite bleibt. Um eine Variable zu erstellen (zu definieren) verwendet man die Vorsilbe var und vergibt dann einen Namen für die Variable, über den man sie danach aufrufen kann. Im Zuge dieser Variablendefinition kann man der Variable auch einen Wert zuweisen, was auch als Initialisieren bezeichnet wird.
Hier ein Beispiel:
var meintext = "Hallo Welt!";
Dadurch definiert man die Variable meintext und weist ihr den Textinhalt "Hallo Welt!" zu. Im Gegensatz zu anderen Programmiersprachen (z.B. C++) muss man bei der Definition einer Variablen keinen Typ vergeben, dieser wird von JavaScript automatisch erschlossen, sobald ein Wert zugewiesen wird. Dies wird auch als dynamic typing bezeichnet. In unserem Beispiel entsteht somit eine Textvariable (Type: String), die den Text "Hallo Welt!" enthält.
Erstellen wir nun eine numerische Variable, mit der man Rechenoperationen ausführen könnte:
var anzahl = 12;
Dabei ist zu beachten, dass wir die 12 ohne Anführungszeichen zuweisen! Dadurch teilen wir JavaScript mit, dass wird ein der Variable einen numerischen Wert speichern wollen und keinen Text. Mit numerischen Variablen kann man erwartungsgemäß rechnen, wie wir es von Variablen aus der Mathematik kennen:
var anzahl = 12 * 144 - 28;
Wenn wir nun wissen wollen, welcher Wert in der Variablen anzahl gespeichert ist, können wir kurz unser Programm modifizieren:
<!DOCTYPE html>
<html>
<head>
<title>Hallo Welt</title>
<meta charset="UTF-8">
</head>
<body>
Inhalt der Seite
<script>
//JavaScript kommt hier rein
var anzahl = 12 * 144 - 28;
alert(anzahl);
</script>
</body>
</html>
Nun sagt uns das Ergebnis der Browser. Wir können der alert-Funktion also als Parameter auch eine Variable übergeben. Zu beachten ist dabei, dass wir anzahl innerhalb der Klammer ohne Anführungszeichen schreiben - sonst würde statt des Inhaltes der Variable nur "anzahl" im Alert-Fenster ausgegeben.
Wir können unsere Ausgabe nun noch etwas "aufhübschen", dabei sehen wir, dass JavaScript auch mit der Kombination aus numerischen und textbasierten Variablen kein Problem hat:
<!DOCTYPE html>
<html>
<head>
<title>Hallo Welt</title>
<meta charset="UTF-8">
</head>
<body>
Inhalt der Seite
<script>
//JavaScript kommt hier rein
var anzahl = 12 * 144 - 28;
var ausgabe = "Das Ergebnis: " + anzahl + "€";
alert(ausgabe);
</script>
</body>
</html>
Wir checken wieder die Ausgabe im Browser. Der berechnete Wert der numerischen Variable anzahl wurde also mit Texten kombiniert und dabei selbst in einen Text umgewandelt. Das Ergebnis wurde in der Textvariablen ausgabe gespeichert und durch die alert-Funktion ausgegeben. Dieses Beispiel kann die wichtige Aufgabe von Variablen bei Programmierung nur andeuten: Variablen sind die Basis für dynamische Programmierung, bei der sich zur Laufzeit des Skripts Werte und Inhalte, z.B. auf einer Website verändern.
Wir machen uns die "Macht der Variablen" nun zunutze, um die Uhrzeit zusammenzustellen und via alert auszugeben. Innerhalb von JavaScript können wir auf Datum und Uhrzeit über das Date()-Objekt zugreifen. Sobald wir ein derartiges Objekt generieren, können wir auf dessen Eigenschaften, wie aktuelle Stunden und Minuten zugreifen. Objekte sind so etwas wie Vorlagen, aus denen man sogenannte Instanzen erstellen kann. Das klingt kompliziert, ist im Einsatz aber ganz einfach:
var datum = new Date();
Die Variable datum ist eine Instanz des Date-Objektes und enthält nun automatisch bestimmte Eigenschaften. Nun wollen wir ja die aktuelle Stunde und Minute abfragen. Das funktioniert so:
var stunden = datum.getHours();
var minuten = datum.getMinutes();
Die Funktionen getHours() und getMinutes() holen uns quasi aus der Variable (Instanz) datum die Eigenschaften Stunden und Minuten heraus, diese Werte schreiben wir dann in die neuen Variablen stunden und minuten. Nun müssen wir das nur noch nett "zusammenpacken" und über die Funktion alert() ausgeben. Unser neuer Markup sieht nun so aus:
<!DOCTYPE html>
<html>
<head>
<title>Hallo Welt</title>
<meta charset="UTF-8">
</head>
<body>
Inhalt der Seite
<script>
//JavaScript kommt hier rein
var datum = new Date();
var stunden = datum.getHours();
var minuten = datum.getMinutes();
var ausgabe = "Die aktuelle Uhrzeit: " + stunden + ":" + minuten;
alert(ausgabe);
</script>
</body>
</html>
Wenn Sie unser Skript nun testen, können Sie sehen, dass es funktioniert. Nun wollen wir die Ausgabe noch etwas individueller machen und je nach Tageszeit eine andere Begrüßung hinzufügen. Außerdem hat die angezeigte Uhrzeit noch einen Schönheitsfehler, den Sie nun je nach aktueller Uhrzeit sehen können oder nicht: Einstellige Stunden und Minuten werden nicht mit vorangesteller Null angezeigt (Sie können das überprüfen, indem Sie in den Einstellungen der Systemzeit vorübergehend eine andere Uhrzeit einstellen). Um das Skript zu verbessern, brauchen wir ein weiteres zentrales Element in jeder Programmiersprache, die Kontrollstruktur.
> weiter