Variablen
Was sind Variablen?
In Programmiersprachen werden Variablen verwendet, um während eines Programmablaufs Daten zwischenzuspeichern. Prinzipiell müssen Variablen zunächst bekannt gemacht werden, was als Deklaration bezeichnet wird. Anschließend können der Variablen Werte zugewiesen werden. Nachdem eine Variable deklariert wurde, kann sie überall im Programm verwendet werden. Somit kann einer Variablen an einer Stelle im Programm ein Werte zugewiesen und an andere Stelle wieder ausgelesen werden.
Deklaration und Zuweisung
In JavaScript erfolgt die Deklaration von Variablen mit dem Schlüsselwort „var“. Die Wertzuweisung erfolgt mit dem Gleichheitszeichen. In JavaScript kann, wie bei vielen anderen Programmiersprachen, die Deklaration und die Wertzuweisung auch in einer Anweisung erfolgen:
HTML-Datei:
Ergebnis:
Variable a:
Variable b:
Operatoren
Mit Operatoren wie „=“, „+“, „-“, „*“ und „/“ können Berechnungen mit Variablen durchgeführt werden:
HTML-Datei:
Ergebnis:
12 + 5 =
12 * 5 =
Zeichenketten
In JavaScript gibt es verschiedene Datentypen, wie u. a. Zahlen, Zeichenketten, Datum und Listen. Da JavaScript eine nicht typisierte Programmiersprache ist, muss der Typ bei der Deklaration einer Variablen nicht angegeben werden. Der Typ ergibt sich aus dem Kontext. Eine Zeichenkette wird z. B. in Anführungsstriche gesetzt. Wird eine Zahl in Anführungsstriche gesetzt wird sie als Zeichenkette und nicht als Zahl interpretiert. Werden numerische Variablen und Zeichenketten kombiniert, ist das Ergebnis eine Zeichenkette:
HTML-Datei:
Ergebnis:
5 + 5 =
"5" + "5" =
5 + "5" =
Mehrere Deklarationen in einer Anweisung
In JavaScript ist es auch möglich, mehrere Deklarationen und Wertzuweisungen in einer Anweisung vorzunehmen. Dabei werden die verschiedenen Deklarationen und Wertzu-weisungen durch Komma getrennt:
HTML-Datei:
Ergebnis:
5 + 7 =
"5" + "7" =
Ungültigkeits-Wert
Wird eine Variable nur deklariert, bekommt aber keinen Wert zugewiesen, hat sie den Wert „undefined“. Eine Variable kann auch jederzeit auf den Wert „undefined“ gesetzt werden:
HTML-Datei:
Ergebnis:
x5 =
y5 =
Re-Deklaration
Wird in JavaScript eine Variable Re-Deklariert, d. h. erneut Deklariert, nachdem ihr schon ein Wert zugewiesen wurde, bleibt der Wert erhalten:
HTML-Datei:
Ergebnis:
x6 nach Deklaration und Zuweisung:
x6 nach Re-Deklaration:
Abschlussübung
Als Abschlussübung kannst du folgendes Beispiel erstellen. Versuche vorher zu erraten, was bei der jeweiligen Kombination von Zeichenketten und Zahlen als Ergebnis rauskommt, bevor du dir das Ergebnis mit Hilfe der Button anzeigen lässt:
"1" + 2 + 3 =
1 + "2" + 3 =
1 + 2 + "3" =
Gehe dabei wie folgt vor:
- Erstelle jeweils drei Absatz-Elemente, welche die entsprechende Aufgabe als Text, ein „span“-Element mit einer eindeutigen ID und einen Button enthalten
- Füge den Button das „onClick“-Event hinzu, das jeweils auf eine eigene Funktion verweist
- Deklariere in den drei Funktionen jeweils eine Variable, welche die jeweilige Aufgabe als Wert zugewiesen bekommt
- Die zweite Anweisung in den Funktionen weist dann die Variable dem jeweiligen „span“-Element zu
Die Lösung kannst du dir hier herunterladen:
