# Variablen, Werte und Operatoren

Jede Konstante hat ihre Variablen.
– Autor unbekannt

Eine richtige Programmiersprache kommt nicht ohne Variablen und Operatoren aus. Von diesen gibt es aber weitaus mehr, als in der Mathematik bekannt. Deshalb wird in diesem Kapitel das Thema ausführlich behandelt.

# Variablen

Variablen sind die Grundlage für jede vernünftige Programmiersprache, denn ohne Variablen wäre das Schreiben eines Programms nahezu unmöglich. Sie benötigen Variablen, um Zahlen, Zeichenketten oder Wahrheitswerte während des Programmablaufs zu speichern und um bei Bedarf auf die Variable bzw. deren Wert zurückgreifen zu können. Variablen sind also nichts weiter als Container für einen Wert, in denen Sie etwas ablegen oder aus denen Sie etwas herausnehmen können.

Da Sie beliebig viele Variablen gleichzeitig in einem Programm verwenden können, müssen Sie die einzelnen Variablen – ähnlich wie in der Mathematik – bezeichnen. Bei der Bezeichnung von Variablen müssen Sie sich aber an die folgenden Regeln halten:

Die Bezeichnung einer Variablen darf nur aus Buchstaben, Ziffern und dem Unterstrich _ bestehen.
Andere Sonderzeichen wie +, –, Leerzeichen, Umlaute (ä, ö, ü) oder das scharfe S (ß) dürfen nicht verwendet werden.
Das erste Zeichen muss ein Buchstabe sein.

Daraus ergeben sich beispielsweise folgende Möglichkeiten:

x  
xX  
y2000  
hallo  
halli_hallo  
halliHallo3  
h2hallo_

Nicht erlaubt sind hingegen Kombinationen wie:

2tage  
_test  
_2_  
2000_

Außerdem wird bei Variablen zwischen Groß- und Kleinschreibung unterschieden. Somit bezeichnen die folgenden Beispiele jeweils unterschiedliche Variablen:

Test  
test  
TEST  
tEST  
TeSt

Variablen müssen zu Beginn eines Scripts definiert werden. Dies geschieht mit dem reservierten Wort var. Deshalb müssen Sie bei der Namensgebung Ihrer Variablen darauf achten, dass es kein reserviertes Wort mit der gleichen Bezeichnung gibt. Sie dürfen also weder eine Variable definieren, die var, noch eine, die document oder write heißt. Zu den reservierten Wörtern zählen alle Funktionen und Namen, die in JavaScript enthalten sind. Ich werde später noch einmal darauf eingehen. Um eine Variable zu definieren, müssen Sie also var notieren und dahinter den Bezeichner der Variablen:

var meineVariable;

Sie können auch mehrere Variablen gleichzeitig definieren. Dafür müssen Sie die Variablen durch Kommata voneinander trennen:

var meineVariable, x, test_variable;

# Werte

Anders als in den meisten Programmiersprachen definieren sich Variablen in JavaScript durch den ihnen zugewiesenen Wert. Der Code

var zahl;  
zahl = 100;

definiert also die Variable zahl und weist ihr anschließend den Wert 100 zu. Dadurch wird aus zahl der Typ Integer. Integer-Variablen sind Variablen, die als Wert eine normale Zahl zugewiesen bekommen haben:

zahl = 1;  
zahl = 255;  
zahl = 32000;  
zahl = 10.5;

Auch negative Zahlen sind möglich:

zahl = -1;  
zahl = -126;  
zahl = -765.23;  
zahl = -120.75;

Soll eine Variable z. B. eine Zeichenkette als Wert erhalten, müssen Sie die Zeichen in Anführungszeichen setzen:

zahl = "hallo";  
zahl = "Guten Tag!";  
zahl = 'IchDuErSieEs';  
zahl = '100';  
zahl = "2500";

Alle diese Angaben machen aus der Variablen zahl den Typ String. Strings sind beliebige Zeichenketten aus keinem, einem oder mehreren Zeichen. Die Anweisung

zahl = "";

macht aus zahl zwar einen String, aber ohne Zeichen. Dies ist dann ein leerer String.

Außerdem kann eine Variable auch einen Wahrheitswert enthalten. Ein solcher Wahrheitswert ist entweder »wahr« oder »falsch«. Die entsprechenden Bezeichnungen im Englischen lauten true und false.

raucher = true;  
kaffeetrinker = true;  
teetrinker = false;

Solche Variablen werden auch als Boolean bezeichnet. Der Typ einer Variablen kann während eines Programmablaufs auch geändert werden, indem einfach ein anderer Werttyp zugewiesen wird:

var test;  
test = 1;  
test = true  
test = "Hallo";

In diesem Beispiel wird zuerst die Variable test definiert. In der nächsten Zeile wird aus test ein Integer, danach ein Boolean und zum Schluss ein String.

# Operatoren

Bisher haben Sie nur gelernt, wie Sie einer Variablen einen Wert zuweisen können. Der dafür zu verwendende Operator nennt sich Zuweisungsoperator und entspricht dem Gleichheitszeichen »=«. Dieses Zeichen sorgt dafür, dass die Variable, die auf der linken Seite des Operators notiert wurde, den Wert, der auf der rechten Seite notiert wurde, zugewiesen bekommt.

variable = wert;

Übrigens ist dies der am häufigsten verwendete Operator.

Wie in der Mathematik benötigen Sie auch in Programmiersprachen Operatoren, um Berechnungen durchzuführen. Für die Grundrechenarten Addition, Subtraktion, Multiplikation und Division steht je ein Operator zur Verfügung.

Operator	Beschreibung	Beispiel
+	Addition	a + b
-	Subtraktion	a – b
*	Multiplikation	a × b
/	Division	a / b

Tabelle 2.1: Operatoren für die vier Grundrechenarten

Diese Operatoren werden Ihnen sicherlich geläufig sein. Mit dem Zuweisungsoperator können Sie nun das Ergebnis in einer Variablen speichern.

var a = 10;  
var b = 5;  
var c;  
c = a + b;            // c hat den Wert 15  
c = a - b;            // c hat den Wert 5  
c = a * b;            // c hat den Wert 50  
c = a / b;            // c hat den Wert 2

Dies sind die einfachsten Arten der Berechnung. Sie können aber auch mehrere Variablen und Werte addieren oder auch unterschiedliche Operatoren verketten. Dabei gilt wie in der Mathematik die Punkt-vor-Strich-Regel. Durch das Setzen von Klammern können Sie diese Regel umgehen.

var a = 50;  
var b = 3;  
var c = 5;  
var d;  
d = a + b + c;         // d hat den Wert 58  
d = a + b * c;         // d hat den Wert 65  
d = a / c - b;         // d hat den Wert 7  
d = (a + b) / c;       // d hat den Wert 10.6  
d = a * (c + b) * a;   // d hat den Wert 20000

Eine Sonderrolle nimmt der Berechnungsoperator % (Modulo) ein. Dieser Operator funktioniert ähnlich wie / (Division), liefert als Ergebnis aber den ganzzahligen Rest zurück.

var a = 13;  
var b = 7;  
var c;  
c = a % b;  
// c hat den Wert 6, da 13 geteilt durch 7 gleich 1 Rest 6

Es wird öfter einmal nötig sein, zwei Werte miteinander zu vergleichen, um herauszufinden, ob sie gleich sind, ungleich, größer als usw. Für diese Aufgabe stehen in JavaScript verschiedene Vergleichsoperatoren zur Verfügung, die als Ergebnis entweder true oder false zurückliefern.

Operator	Beschreibung	Beispiel
==	gleich	a == b
!=	ungleich	a != b
>	größer	a > b
<	kleiner	a < b
>=	größer gleich	a >= b
<=	kleiner gleich	a <= b

Tabelle 2.2: Vergleichsoperatoren in JavaScript

Beachten Sie auf jeden Fall, dass Vergleiche zweier Variablen bzw. Werte mit == realisiert werden und nicht nur mit einem Gleichheitszeichen, da das Gleichheitszeichen bereits der Zuweisungsoperator ist.

var a = 5;  
var b = 6;  
if(a == 5) document.write("a ist gleich 5");  
if(a != b) document.write("a ist nicht gleich b");  
if(a > b) document.write("a ist gr&ouml;&szlig;er b");  
if(a < b) document.write("a ist kleiner b");  
if(a >= 4) document.write("a ist gr&ouml;&szlig;er oder gleich b");  
if(b <= 6) document.write("b ist kleiner oder gleich 6");

Was genau die Anweisung if (...) bewirkt, werden Sie später noch erfahren. Vorerst sei gesagt, dass die if-Anweisung auf eine erfüllte oder nicht erfüllte Bedingung hin überprüft und, je nach Ergebnis, einen anderen Code ausführt. Würden Sie sich das Beispiel von eben also in einem Browser ansehen, würden Sie folgende Ausgabe erhalten:

a ist gleich 5 a ist nicht gleich b a ist kleiner b a ist größer oder gleich 4 b ist kleiner oder gleich 6

Logische Operatoren dienen dazu, mehrere Bedingungen miteinander zu verknüpfen. Soll beispielsweise überprüft werden, ob die Variable a größer als 5 und kleiner als 10 ist, und erst dann eine Ausgabe am Bildschirm erfolgen, müssen Sie den logischen Operator && (UND) verwenden.

if(a > 6 && a < 10) document.write("a ist gr&ouml;&szlig;er als 6 und kleiner als 10.");

Dementsprechend gibt es auch einen logischen Operator, der überprüft, ob mindestens eine der beiden Bedingungen erfüllt ist. Dies ist der logische Operator || (ODER).

if(a < 6 || a > 10) document.write("a ist entweder gr&ouml;&szlig;er als 10 oder kleiner als 6.");

Operator	Beschreibung	Beispiel
&&	logisches UND	`a > b && a < c`
\|\|	logisches ODER	`a > b \|\| a < c`

Tabelle 2.3: Logische Operatoren in JavaScript

Sie können mehrere logische Operatoren miteinander verbinden, um auf eine bestimmte Bedingung hin zu überprüfen. Dabei wird eine ODER-Verknüpfung höher bewertet als eine UND-Verknüpfung. Dies können Sie wiederum durch das Setzen von Klammern umgehen:

if((a > b || a < c) && a != d) [Anweisung]

Wenn Sie Programme bzw. Scripts schreiben, werden Sie das eine oder andere Mal zwei Zeichenketten (Strings) miteinander verbinden wollen oder gar müssen. Dafür können Sie den +-Operator verwenden. Dieser Operator addiert die Zeichenketten jedoch nicht, sondern die einzelnen Strings werden in der Reihenfolge aneinander gehängt, in der sie notiert wurden.

var vorname = "Mark";  
var nachname = "Lubkowitz";  
var gruss;  
gruss = "Hallo, mein Name ist "+vorname+" "+nachname+"!";  
document.write(gruss);

Das Ergebnis:

Hallo, mein Name ist Mark Lubkowitz!

Wie Sie sehen können, ist es auch möglich, variable und feste Zeichenketten miteinander zu verbinden.

Anstatt das Ergebnis einer Operation in einer neuen Variable zu speichern, können Sie das Ergebnis in einer Variablen speichern, die Sie in der Rechenoperation bereits verwendet haben.

var a = 10;  
var b = 15;  
a = a + b;       // a bekommt den Wert 25  
b = a + b;       // b bekommt den Wert 40

Da viele Programmierer jedoch schreibfaul sind, hat man eine abgekürzte Schreibweise für solche zirkulären Bezüge geschaffen. In der folgenden Tabelle 22.4 finden Sie eine Übersicht dieser Abkürzungen.

Kurzschreibweise	Normale Schreibweise	Beschreibung
zahl++;	zahl = zahl + 1;	um 1 erhöhen
zahl--;	zahl = zahl – 1;	um 1 verringern
zahl += 2;	zahl = zahl + 2;	Wert addieren
zahl -= 5;	zahl = zahl – 5;	Wert subtrahieren
zahl *= 3;	zahl = zahl × 3;	mit Wert multiplizieren
zahl /= 4;	zahl = zahl / 4;	mit Wert dividieren

Tabelle 2.4: Kurzschreibweisen für zirkuläre Bezüge

# Einfacher Passwortschutz

Ein passendes Beispiel für Bedingungen und Vergleichsoperatoren ist ein simpler Passwortschutz. Dieser verlangt vom Benutzer die Eingabe einer Zeichenkette, die zuvor im Script festgelegt wurde. Anschließend wird diese Eingabe überprüft.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Passwortschutz //-->
<html>
  <head>
    <title>Listing 2.1</title>
  </head>
  <body>
    <script type="text/javascript">
      <!--
        var passwort = "PASSwort";
        var eingabe;

        eingabe = prompt("Bitte geben Sie das Passwort ein!","");
        if(eingabe == passwort)
        {
          alert("Passwort korrekt!");
        }
        if(eingabe != passwort)
        {
          alert("Falsches Passwort!");
        }
      //-->
    </script>
  </body>
</html>

Listing 2.1: Passwortschutz in JavaScript mit Vergleichsoperatoren und bedingten Anweisungen

Zuerst wird mit der Anweisung var passwort = "PASSwort"; ein Passwort festgelegt. Die Anweisung prompt erzeugt ein Meldungsfenster, das vom Benutzer eine Eingabe erwartet. Der erste Parameter für prompt wird als Beschreibung bzw. Hinweis für den Benutzer angezeigt. Der zweite Parameter stellt eine Vorbelegung für das Eingabefeld dar. Die Syntax für prompt lautet also:

string prompt(string message, string default)

Die Eingabe des Benutzers wird mit dem Zuweisungsoperator = in der Variablen eingabe gespeichert. Anschließend wird überprüft, ob die Eingabe des Benutzers mit dem Passwort übereinstimmt. Ist dies der Fall, gibt der Browser mit der Anweisung alert die Mitteilung über die korrekte Passworteingabe aus.

void alert(string message)

Entspricht die Benutzereingabe nicht dem Passwort, gibt der Browser ebenfalls ein Meldungsfenster aus und informiert über die fehlerhafte Eingabe.

In diesem Zusammenhang sollten Sie beachten, dass JavaScript bei dem Vergleich von zwei Strings zwischen Groß- und Kleinschreibung unterscheidet. Die Eingabe »passWORT« wäre genauso falsch wie die Eingabe »passwort« oder »PASSWORT«.

# Bedingte Anweisungen – if

Die bekannteste bedingte Anweisung haben Sie bereits kennen gelernt: if (dt. wenn). Damit ist es auf einfache Weise möglich, auf eine Bedingung hin zu überprüfen und entsprechende Anweisungen auszuführen.

if([Bedingung])  
{  
  [Anweisungblock]  
}

Als Bedingung können Sie nun jede Art von Vergleich notieren, z. B. a > b, eingabe == "Test" oder c >= d. Ein solcher Vergleich gibt immer den Wert true oder false zurück. Wenn das Ergebnis des Vergleichs true ist, werden die Anweisungen ausgeführt, die in den geschweiften Klammern stehen. Ist das Ergebnis false, wird der Anweisungsblock übersprungen.

if(papst == "katholisch")  
{  
  document.write("Der Papst ist katholisch!");  
}

Der String Der Papst ist katholisch! würde nur dann ausgegeben werden, wenn die Bedingung erfüllt ist. Eine if-Abfrage lässt sich aber noch erweitern, und zwar für den Fall, dass die Bedingung nicht erfüllt ist. Dafür wird das reservierte Wort else (dt. sonst) verwendet.

if([Bedingung])  
{  
  [Anweisungblock]  
}  
else  
{  
  [Anweisungsblock]  
}

Diese Schreibweise erspart eine zusätzliche if-Abfrage, denn der else-Anweisungsblock wird immer dann ausgeführt, wenn das Ergebnis der Bedingung false ist.

if(papst == "katholisch")  
{  
  document.write("Der Papst ist katholisch!");  
}  
else  
{  
  document.write("Der Papst ist nicht katholisch!");  
}

Die geschweiften Klammern müssen Sie nicht immer setzen. Sollte im Anweisungsblock nur eine Anweisung notiert sein, können Sie die geschweiften Klammern getrost weglassen. Das vorherige Beispiel sähe dann wie folgt aus:

if(papst == "katholisch")  
  document.write("Der Papst ist katholisch!");  
  else document.write("Der Papst ist nicht katholisch!");

Achten Sie auf das Semikolon nach der Anweisung bei Erfüllung der Bedingung. Es ist zwingend erforderlich. Jedoch ist dies noch nicht das Ende. Eine bedingte Anweisung lässt sich noch weiter verkürzen. Diese noch kürzere Schreibweise wird für einfache Entweder-oder-Abfragen verwendet.

([Bedingung]) ? entweder : oder;

Bei dieser Schreibweise wird bei erfüllter Bedingung (also true) entweder zurückgegeben, bei Nichterfüllung (false) oder. Von daher müssen Sie bei dieser Schreibweise das Ergebnis der bedingten Anweisung mit dem =-Operator an eine Variable übergeben.

ergebnis = (papst == "katholisch") ? "RICHTIG" : "FALSCH";

Wenn also der Wert der Variablen papst katholisch ist, erhält die Variable ergebnis den Wert RICHTIG, ansonsten FALSCH.

# Fallunterscheidung – switch

Bedingte Anweisungen mit if sind sehr einfach und erfüllen ihre Aufgabe sehr gut. Der Nachteil ist, dass Sie nur zwei Fälle unterscheiden können, nämlich true oder false. Wie sieht es jedoch aus, wenn Sie mehrere Fälle unterscheiden möchten? Sie könnten nun so viele if-Abfragen notieren, bis alle Fälle ausgewertet sind, oder aber Sie verwenden switch (dt. Schalter), denn damit können Sie eine beliebige Anzahl von Fällen in einer Abfrage bearbeiten. Gehen Sie einmal von folgendem Beispiel aus: Sie möchten eine Variable, die einen Wert von 1 bis 12 haben soll, so überprüfen, dass entsprechend der Zahl der Name eines Kalendermonats ausgegeben wird, z. B. 1 = Januar, 5 = Mai oder 11 = November.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Monatsnamen //-->
<html>
  <head>
    <title>Listing 2.2</title>
  </head>
  <body>
    <script type="text/javascript">
      <!--
        var monat;
        var monatsname;

        monat = prompt("Bitte geben Sie eine Zahl zwischen 1 und 12 ein!","");
        switch(monat)
        {
          case "1":
            monatsname = "Januar";
            break;
          case "2":
            monatsname = "Februar";
            break;
          case "3":
            monatsname = "M�rz";
            break;
          case "4":
            monatsname = "April";
            break;
          case "5":
            monatsname = "Mai";
            break;
          case "6":
            monatsname = "Juni";
            break;
          case "7":
            monatsname = "Juli";
            break;
          case "8":
            monatsname = "August";
            break;
          case "9":
            monatsname = "September";
            break;
          case "10":
            monatsname = "Oktober";
            break;
          case "11":
            monatsname = "November";
            break;
          case "12":
            monatsname = "Dezember";
            break;
          default:
            monatsname = "Ungültige Zahl";
            break;
        }
        alert(monatsname);
      //-->
    </script>
  </body>
</html>

Listing 2.2: Eine switch-Anweisung in JavaScript (das vollständige Listing in HTML-Form finden Sie auf der Buch-CD)

In Listing 2.2 wird zuerst eine Eingabe vom Benutzer gefordert und in der Variablen monat gespeichert. Anschließend folgt die Anweisung switch und in runden Klammern dahinter die Variable, die den zu überprüfenden Wert enthält (in diesem Fall monat). Danach folgt der Anweisungsblock in geschweiften Klammern. Zuerst wird das reservierte Wort case (dt. Fall) notiert und dahinter der Wert. Für case "1" bedeutet dies: »Wenn der Wert der Variablen monat gleich "1" ist, dann führe die nachfolgenden Anweisungen aus.« Nach dem Doppelpunkt folgen die auszuführenden Anweisungen, und die switch-Anweisung wird mit der break-Anweisung beendet.

Jede Eingabe eines Benutzers ist immer eine Zeichenkette, egal ob er nun nur Zahlen oder auch Buchstaben eingegeben hat. Aus diesem Grund werden Werte, für die Sie eine Fall notieren, auch in Anführungszeichen notiert.

Die Angabe von break ist nicht zwingend erforderlich. Fehlt die Anweisung aber, würden auch die Anweisungen des nächsten Falls ausgeführt werden. Dies kann zwar gelegentlich gewollt sein, ist aber eher selten erwünscht.

Zum Schluss folgt im Anweisungsblock das reservierte Wort default. Die Anweisungen, die nach default notiert wurden, werden immer dann ausgeführt, wenn keiner der angegebenen Fälle eingetreten ist, z. B. hat der Benutzer eine Zahl kleiner 1 oder größer 12 angegeben oder einen Buchstaben etc.

# Zusammenfassung

Variablen ermöglichen es, während eines Programmablaufs einen Wert zu speichern.
Variablen müssen mit var definiert werden.
Variablen dürfen nur mit den Buchstaben von a bis z und von A bis Z, den Zahlen von 0 bis 9 und dem Unterstrich _ bezeichnet werden. Alle anderen Zeichen sind nicht erlaubt.
Um einen Wert an eine Variable zuweisen zu können, müssen Sie den Zuweisungsoperator = verwenden.
Für die Grundrechenarten Addition, Subtraktion, Multiplikation und Division stehen die Operatoren +, –, * und / zur Verfügung.
Vergleiche werden mit den Vergleichsoperatoren ==, !=, >, <, >= und <=durchgeführt.
Die logischen Operatoren && und || ermöglichen das Verknüpfen mehrerer Vergleiche.
Zeichenketten werden mit dem +-Operator verknüpft.
Das Ausführen von Code lässt sich mit der if-Anweisung an eine Bedingung knüpfen. Je nachdem, welches Ergebnis die Bedingung liefert, wird dann einer von zwei Anweisungsblöcken ausgeführt.
Mehrere Bedingungen lassen sich mit den Anweisungen switch und case auswerten.

# Fragen und Übungen

Welche Operatoren müssen Sie einsetzen, um Additionen, Subtraktionen, Multiplikationen oder Divisionen durchzuführen?
Welche Unterschiede gibt es zwischen den logischen Operatoren && und ||?
Mit welcher Funktion können Sie Eingaben vom Benutzer fordern?
Mit welchem Operator können Sie Zeichenketten miteinander verknüpfen?
Schreiben Sie ein Script, das vom Benutzer einmal die Eingabe seines Vornamens und einmal seines Nachnamens fordert. Verbinden Sie die beiden Zeichenketten mit einer Begrüßungsfloskel, und geben Sie diese im Browser aus.

← Grundlagen Funktionen und Schleifen →