Es gibt in JavaScript einige kleinere Code-Schnipsel, die kommen noch ohne die Verwendung von Variablen
aus. Zum Beispiel wenn es nur darum geht einen kleinen Framebrecher in eine Seite einzubinden oder mit Hilfe eines
Event-Handlers ein zusätzliches Fenster zu öffnen. Immer dann, wenn Werte zur weiteren Verarbeitung übergeben werden müssen,
geht es hingegen nicht mehr ohne die Verwendung von Variablen ab. Doch was ist eigentlich eine Variable?
Eine Variable enthält im Allgemeinen einen Wert, welcher mit einfachen Gleichheitszeichen (Zuweisungsoperator) der
Variablen zugewiesen wird. Dieser Wert wird unter der Adresse der Variablen im Speicherbereich des Systems abgelegt. Bei
JavaScript werden die Adressen nur temporär für die Lebensdauer eines Funktionsaufrufes oder für die einmalige Benutzung
eines Scripts im Speicherbereich des Browsers angelegt, wobei noch zwischen globalen und lokalen Variablen zu unterscheiden
ist.
Um Verwechslungen vorzubeugen, was von Programmierern allgemein als Variable bezeichnet wird, ist eigentlich nur der gewählte
Bezeichner für eine Speicheradresse, unter welcher der Wert abgelegt wurde und unter der dieser Wert erreichbar ist. Eine
Variable muss deklariert (und sollte definiert) werden, bevor mit dieser gearbeitet werden kann. Es ist zwar möglich,
Variablen vor der Verwendung nur zu deklarieren, doch sind diese dann vom Typ her noch undefiniert. Damit eine Variable als
definierte Variable im Script verwendet werden kann, muss der Variablen ein Anfangswert zugewiesen werden.
Bei den Anfangswerten kann es sich um numerische Werte, um Strings, um die Boolean-Werte true oder false, um null, aber auch um
Methoden, um Funktionen oder um Objekte handeln. Bei einer Zuweisung von null würde eine Variable nicht mehr als undefiniert
gelten, enthielte aber keinen "verwertbaren" Wert, da null halt null wie leer ist. Doch Vorsicht, null ist nicht
gleich Null, da JavaScript zwischen Groß- und Kleinschreibung unterscheidet und null in Kleinschreibung zu den reservierten
Schlüsselwörtern gehört.
<!DOCTYPE html> <html> <head> <title>Die Null in JavaScript</title> <meta charset="windows-1252"> </head> <body> <h1>Beispiel 5</h1> <script type="text/javascript"> var look; function ratlos() { var nichts = null; if (nichts === null) { look = "Die Variable 'nichts' ist vom Typ ein " + typeof(null); look += " und enthält den Wert " + nichts + ".<br><br>"; look += "Eine große Null ist vom Typ " + typeof(Null); look += ", wie eine undefinierte Variable, "; look += "aber eine kleine null ist vom Typ ein " + typeof(null) + "!"; } else { look = "Ist sie nicht!"; } } ratlos(); document.write(look); </script> </body> </html>
In dem folgenden Beispiel wird die Funktion getAktuell() in der Variablen "abruf", das Objekt Date in der Variablen "heute" und die Methode getElementById in der Variablen "schreibe" gespeichert. Beim Aufruf der in der Variablen "abruf" gespeicherten Funktion getAktuell wird der Inhalt des Objektes ins Dokument geschrieben.
<!DOCTYPE html> <html> <head> <title>Datum und Zeit</title> <meta charset="windows-1252"> </head> <body> <h1>Beispiel 6</h1> <p>Ein Beispiel zur Ausgabe von Datum und Zeit.</p> <script type="text/javascript"> var abruf = function getAktuell() { var heute = new Date(); var schreibe = document.getElementById("ausgabe"); schreibe.innerHTML = (typeof(heute) + " - " + heute); } </script> <p id="ausgabe"> </p> <p><a href="javascript:abruf()">Heute</a></p> <!-- Ausgabe: object - Sat Oct 6 15:12:58 UTC+0200 2012 --> </body> </html>
Ein Definieren einer Variablen durch Wertezuweisung wird auch als Initialisierung bezeichnet, da der
Variablen ein Anfangswert zugewiesen wird, mit dem diese initialisiert wird und so gelten mit einem Wert belegte Variablen
automatisch als definiert. Definierte Variablen werden jedoch nicht automatisch durch eine Initialisierung deklariert, der
JavaScript-Interpreter behandelt diese im normalen Modus nur wie global deklarierte Variablen, davon ausgehend, dass es sich um
eine indirekt deklarierte Variable handelt. Im Strict Mode würde hingegen ein Fehler ausgelöst.
Der Strict Mode kann zur Überprüfung eines Scripts verwendet werden und soll einer gewissen Schludrigkeit beim Programmieren
entgegenwirken. So löst der Zugriff auf eine nicht deklarierte Variable einen Fehler aus, zumindest in den neueren Versionen
vom Firefox und Chrome.
Bei der Wertezuweisung muss ein String immer in Anführungszeichen gesetzt werden, alle anderen Werte hingegen nicht. Kommen
innerhalb des Strings weitere Anführungszeichen vor, so müssen diese mit einem rückwärts gerichteten Schrägstrich maskiert
werden.
Beispiel für die Deklaration und Definition von Variablen:
<!DOCTYPE html> <html> <head> <title>Wertezuweisung und Initialisierung</title> <meta charset="windows-1252"> </head> <body> <h1>Beispiel 7</h1> <p>Überprüfung von Variablen mit typeof:</p> <script type="text/javascript"> // Deklaration der Variablen abc1, abc2, abc3 var abc1, abc2, abc3; /* Deklaration und Definition durch Wertezuweisung/Initialisierung der Variablen bv und cv. Die Variable bv wurde mit dem Zahlenwert 66 initialisiert und als Variable vom Typ Number definiert. Die Variable cv wurde mit dem String "Ein String" initialisiert und als Variable vom Typ String definiert. */ var bv = 66; var cv = "Ein String"; var str; // Test für Ausgabe str = typeof(abc2) + "<br>"; str += typeof(bv) + "<br>"; str += typeof(cv) + "<br>"; document.write(str); /* Ausgabe: undefined number string */ </script> </body> </html>
Im Beispiel werden die Variablen abc1 bis abc3 nur deklariert. Durch diese Deklaration werden die
Variablen im System nur bekannt gemacht und es wird Speicherplatz für diese Variablen reserviert. Da den Variablen jedoch noch
keine Werte zugewiesen wurden, sind diese noch nicht definiert. Anders verhält es sich mit den Variablen bv und cv. Diese
wurden deklariert, definiert und initialisiert.
Eigentlich könnte auf eine einfache Deklaration in JavaScript verzichtet werden, wäre da nicht dieser Strict Mode. Es gibt
jedoch Programmiersprachen, bei denen die Deklaration mehr von Bedeutung ist, wie zum Beispiel bei der Deklaration von Variablen in C und eine Verbesserung des eigenen Programmierstils
hat noch niemanden geschadet.
Für die Bezeichner von Variablen dürfen alle Buchstaben des Alphabets, alle Ziffern, der Unterstrich und das Dollarzeichen
verwendet werden, nur beginnen dürfen die Bezeichner nicht mit einer Ziffer. Umlaute schlüpfen mit durch, auch wenn ein
Bezeichner mit einem Umlaut beginnt, dennoch sollte möglichst auf Umlaute verzichtet werden. Für JavaScript reservierte
Wörter, wie new, this, else oder false, um nur einige wenige zu nennen, dürfen nicht als Bezeichner verwendet werden. Groß-
und Kleinschreibung muss bei der Benennung beachtet werden.
In einem JavaScript ist es nicht unbedingt erforderlich, eine Variable mit var zu deklarieren, da
Variablen auch durch eine einfache Wertezuweisung initialisiert werden können und der Interpreter den gewählten Bezeichner
dadurch als Bezeichner für eine Variable behandelt. Doch nur weil nicht unbedingt erforderlich, sollte dennoch nicht auf eine
richtige Deklaration verzichtet werden und eine Deklaration mit var innerhalb einer Funktion entscheidet über den
Gültigkeitsbereich einer Variablen.
Außerhalb von Funktionen definierte Variablen sind als globale Variablen zu betrachten, da diese im ganzen Script-Bereich
gültig sind, egal ob die Variablen mit var deklariert wurden oder nicht. Innerhalb von Funktionen angelegte Variablen sind aber
nur dann global, wenn diese nicht mit var deklariert wurden.
Beispiel: Gültigkeitsbereich von lokalen und globalen Variablen
<!DOCTYPE html> <html> <head> <title>Gültigkeitsbereich in JavaScript</title> <meta charset="windows-1252"> </head> <body> <h1>Beispiel 8</h1> <p>Überprüfung des Gültigkeitsbereichs:</p> <script type="text/javascript"> var abc1, abc2; abc1 = 11; // global abc2 = 22; // global abc3 = 33; // global, aber Fehler im Strict Mode abc4 = 10; // global, aber Fehler im Strict Mode function abFrage() { var abc3, abc4, abc5; abc1 = 44 + abc1; // global | 44 + 11 = 55 abc2 = 55 + abc2; // global | 55 + 22 = 77 abc3 = 66 + abc3; // lokal | 66 + 33 = 99 abc4 = 77 + abc4; // lokal | 77 + 10 = 87 abc5 = 88; // lokal | 88 abc6 = 88 + abc5; // global | 88 + 88 = 176, aber Fehler im Strict Mode } abFrage(); // Aufruf der Funktion var str; str = typeof(abc1) + " - " + abc1 + "<br>"; str += typeof(abc2) + " - " + abc2 + "<br>"; str += typeof(abc3) + " - " + abc3 + "<br>"; str += typeof(abc4) + " - " + abc4 + "<br>"; str += typeof(abc5) + " - <br>"; str += typeof(abc6) + " - " + abc6 + "<br>"; document.write(str); /* Ausgabe: number - 55 number - 77 number - 33 number - 10 undefined - number - 176 */ </script> </body> </html>
Wie aus dem Beispiel ersichtlich wird, lassen sich nur die innerhalb der Funktion verrechneten Werte der
Variablen abc1 und abc2 ausgeben. Die Werte, die außerhalb der Funktion den globalen Variablen abc3 und abc4 zugewiesen wurden,
lassen sich hingegen zwar mit den Werten der Variablen abc3 und abc4 innerhalb der Funktion verrechnen, doch da sich deren
Gültigkeitsbereich auf den Bereich der Funktion beschränkt, nur über einem Umweg außerhalb der Funktion nutzen. Auf die
lokale Variable abc5 kann zwar nicht außerhalb der Funktion zugegriffen werden, jedoch auf das Ergebnis der Addition der
Variablen abc5 plus abc6.
In den Kommentaren vom 8. Beispiel wurde auf kleinere Fehler hingewiesen, die sich im Strict Mode zu erkennen geben würden.
Nachfolgend der korrigierte Code-Abschnitt:
<script type="text/javascript"> var abc1 = 11; // global var abc2 = 22; // global var abc3 = 33; // global var abc4 = 10; // global var abc6; ... </script>
Die Verwendung von lokalen Variablen innerhalb eines Scripts, deren Gültigkeitsbereich sich auf Funktionen beschränkt, besitzt gegenüber der Verwendung von übermäßig vielen globalen Variablen einen Vorteil. Dieser Vorteil besteht darin, dass lokale Variablen nicht mit gleichnamigen Variablen außerhalb von Funktionen oder mit globalen Variablen aus anderen Scripts, die in ein und demselben Dokument eingebunden wurden, in Konflikt geraten können.
Syntax von JavaScript « zurück / weiter » Datentypen
Einstieg in JavaScript
Listings & Tutorials
Übersicht