Websiteentwicklung: JavaScript: Operatoren und Ausdrücke

<< Werte und Variablen | Inhaltsverzeichnis | Index | Dialogboxen >>

Wikipedia hat einen Artikel zum Thema:

JavaScript

Operatoren

Wenn innerhalb eines JavaScript-Programms einer Variablen ein Wert zugewiesen wird, wenn Werte, Variablen oder Eigenschaften von Objekten miteinander verglichen, verkettet, berechnet werden, dann geschieht dies durch Operatoren.

Einfache Zuweisung

Den einfachen Zuweisungsoperator verwendeten wir schon – ohne Kopfzerbrechen – in unserem ersten Hallo-Welt-Programm. Dieser Operator, das Gleichheitszeichen „=“, weist den JavaScript-Interpreter des Browsers an, der Variablen oder Objekteigenschaft links vom „=“ den Wert rechts davon zuzuweisen.

var MwSt1=19                  //Der Variablen "MwSt1" wird der Wert "19" zugewiesen

txtText1.value="Hallo Welt!"  //Der Eigenschaft "value" des Textfeldes "txtText1" 
                              //wird der Wert "Hallo Welt!" zugewiesen

Achtung: Die Verwechslung des Zuweisungsoperators „=“ mit dem Vergleichsoperator „==“ ist eine häufige und meist schwer zu findende Fehlerquelle!

Rechnen

Zum Rechnen dienen die arithmetischen Operatoren, zunächst jene für die bekannten Grundrechenarten:

`+`
	Addition	`var Summe = 9 + 4; //"Summe" erhält den Wert 13.`
`-`
	Subtraktion	`var Differenz = 9 - 4; //"Differenz" erhält den Wert 5.`
`*`
	Multiplikation	`var Produkt = 9 * 4; //"Produkt" erhält den Wert 36.`
`/`
	Division	`var Quotient = 9 / 4; //"Quotient" erhält den Wert 2,25.`

und zusätzlich:

`%`
	Modulo	Rest einer ganzzahligen Division ermitteln.
		`var Rest = 9 % 4; //"Rest" erhält den Wert 1.`

Achtung: Bei beiden Divisionen muss der „mathematische Sündenfall“ – die Division durch „0“ vermieden werden.

Außerdem gibt es noch:

`++`
	Der so genannte Inkrementoperator (lat. incrementum = Wachstum; incrementare = vergrößern) für eine verkürzte Schreibweise, um den Wert einer Variablen um 1 hochzuzählen.
	a++; /* Der Wert der Variablen "a" wird um 1 erhöht - ist also jetzt 10. Man könnte auch a=a+1; schreiben, aber Programmierer tippen ungern. */
`--`
	Der so genannte Dekrementoperator (lat. decrementare = vermindern) für eine verkürzte Schreibweise, um den Wert einer Variablen um 1 zu verringern.
	b--; /* Der Wert der Variablen "b" wird um 1 verringert - ist also jetzt 3. Man könnte auch b=b-1; schreiben, aber ... s.o. */

Der aus anderen Programmiersprachen bekannte DIV-Operator – das Ergebnis (nicht der Rest!) einer ganzzahligen Division – fehlt in JavaScript. Er kann aber leicht nachgebildet werden durch eine Funktion fDiv (siehe unten)

function fDiv(n1, n2)
  {
  // Simulation einer ganzahligen Division - Möglichkeit 1:
  // erst dividieren, dann auf Ganzzahl abrunden. 
  if ( n1*n2 > 0 ) return Math.floor( n1/n2 );
              else return Math.ceil ( n1/n2 );
  }

function fDiv(n1, n2)
  {
  // Simulation einer ganzahligen Division - Möglichkeit 2:
  // erst den ganzzahligen Rest abziehen, dann dividieren. 
  return ( n1 - (n1 % n2) ) / n2;
  }

Punktrechnung geht vor Strichrechnung

Bei längeren Rechnungen gilt die aus der Schule bekannte Regel – es werden also zunächst Multiplikation und Division durchgeführt, dann Addition und Subtraktion. Eine abweichende Berechnungsreihenfolge kann durch Klammern eingefordert werden.

(3 + 5) * 7   // ergibt 8 *  7 = 56
 3 + 5  * 7   // ergibt 3 + 35 = 38

Zeichenkettenvereinigung

+: Mit dem Operator „ $+$ “ wird bei Zeichenketten keine Addition, sondern eine Verkettung durchgeführt.

var Text1="Hallo "; //Der Variablen Text1 wird "Hallo " zugewiesen
var Text2="Welt!";  //Der Variablen Text2 wird "Welt!" zugewiesen

txtText.value=Text1 + Text2; 
/* Der Eigenschaft value des Textfeldes "txtText" wird das Ergebnis 
   der String-Verkettung zugewiesen. Im Textfeld erscheint "Hallo Welt!"  */

Logische Ausdrücke

Logische Operatoren dienen dazu, boolsche Werte (Wahrheitswerte „true“ oder „false“) miteinander zu verknüpfen – z. B. um mit Hilfe der Vergleichsoperatoren komplexere Bedingungen für bestimmte Abläufe zu formulieren.

Die logischen Operatoren für NICHT, UND, ODER

!: das logische NICHT (engl. NOT), die so genannte Negation.; !A ist „true“ wenn A „false“ ist und umgekehrt.
&&: das logische UND (engl. AND), die so genannte Konjunktion.; A && B ist dann und nur dann „true“, wenn sowohl A als auch B „true“ sind,
||: das logische ODER (engl. OR), die so genannte Disjunktion.; A || B ist „true“, wenn einer der beiden Werte A oder B „true“ ist oder beide(!) es sind. Dies unterscheidet das logische ODER vom umgangssprachlichen ODER, das meistens von einem ENTWEDER/ODER (logisches XOR, auch Alternative genannt) ausgeht.

Einen rein logischen XOR-Operator hat JavaScript nicht – diese logische Verknüpfung kann aber bei Bedarf durch zusammengesetzte JavaScript-Ausdrücke dargestellt werden, z. B. als ((A && !B) || (!A && B)) oder ((A || B) && !(A && B)). Alternativ kann auch der Vergleichsoperator != als XOR-Operator für logische Werte verwendet werden.

Auch andere logische Operatoren wie NAND, NOR oder die Implikation lassen sich mit Hilfe der 3 JavaScript-Operatoren NOT, AND und OR nachbauen – werden aber eher selten benötigt.

Einen guten Überblick über die Funktionsweise logischer Operatoren geben die Wahrheitstafeln oder Wahrheitstabellen:

Negation
(logisches NICHT)

Konjunktion
(logisches UND)

Disjunktion
(logisches ODER)

A	! A
true	false
false	true

A	B	A && B
false	false	false
true	false	false
false	true	false
true	true	true

A	B	A \|\| B
false	false	false
true	false	true
false	true	true
true	true	true

var x=3;
var bPruef = (x>1) && (x<5); 
/*         bPruef ist true, denn beide Bedingungen sind wahr 
           x ist sowohl groesser als 1 als auch kleiner als 5 */

var x=3;
var bPruef = (x>1) && (x<3); 
/*         bPruef ist false, die zweite Bedingung ist nicht erfuellt 
           x ist zwar groesser als 1 aber nicht kleiner als 3 */


var x=3;
var bPruef = (x>1) || (x<3); 
/*         bPruef ist true,  die zweite Bedingung ist zwar nicht erfuellt 
           x ist zwar groesser als 1 aber nicht kleiner als 3
           aber beim logischen ODER reicht eine erfuellte Bedingung */

var x=1;
var bPruef = (x>5) || (x!=1); 
/*         bPruef ist false, beide Bedingungen sind nicht erfuellt 
           x ist weder groesser als 5 noch ungleich 1 */

var bTest  = true;
var bPruef = bTest && !bTest;
/*         bPruef ist immer false, unabhaengig vom Wert von bTest,
           denn eine UND-Verknuepfung zwischen einer Aussage und
           ihrer Negation kann nicht true sein - eine Aussage und
           ihre Negation können nicht gleichzeitig true sein. */
            
var bTest  = false;
var bPruef = bTest || !bTest;
/*         bPruef ist immer true, unabhaengig vom Wert von bTest,
           denn eine ODER-Verknüpfung zwischen einer Aussage und
           ihrer Negation kann nicht false sein - eine Aussage und
           ihre Negation koennen nicht gleichzeitig false sein. */

Bedingte Zuweisung mit dem Konditional-Operator

Syntax:

var Auswertung
Auswertung = (Bedingung) ? AlternativeTrue : AlternativeFalse

Einer Bedingung folgt ein Fragezeichen als Operator, dann der Rückgabewert für true und durch einen Doppelpunkt abgetrennt der Rückgabewert für false.

Der Konditionaloperator kann Werte jedes Datentyps liefern – z. B. Number, Boolean oder auch String.

Ein praktisches Beispiel:

<html>

<head>
  <title>JavaScript - Konditional-Operator</title>
  <script type="text/javascript">

    function fCondit()
    {
    var x=Math.abs(parseInt(prompt("Bitte eine Zahl X eingeben:")));
    var A=(x>100) ? x+" ist groesser als 100" : x+" ist nicht groesser als 100";
    // Alternativ mit if else:
    // var A
    // if ( x>100 )
    // {
    //   A = x+" ist groesser als 100";
    // }
    // else
    // {
    //   A = x+" ist nicht groesser als 100";
    // }
    alert(A);
    }

  </script>
  <noscript>Bitte JavaScript einschalten</noscript>
</head>

<body>
  <h3>JavaScript - Konditional-Operator</h3>
  <form action="JavaScript_Condit.html" method="post" name="Form1">
    <input type="button" name="btnCondit" value=" ? " onClick="fCondit()">
  </form>
</body>

</html>

Auch logische Operatoren werden – wie Vergleichsoperatoren – selten isoliert eingesetzt, sondern häufig in Verbindung mit IF-Abfragen und DO / WHILE - Schleifen zur Steuerung des Programmablaufes. Eine eingehendere, praktische Darstellung in Beispielen folgt deshalb im Kapitel Programmablauf und Kontrollstrukturen.

Erweiterte Zuweisungen

Neben dem einfachen Zuweisungoperator, der oben als Erstes eingeführt wurde, gibt es Operatoren, die eine Zuweisung mit einer arithmetischen Operation oder einer Zeichenkettenvereinigung oder einer Bit-Operation verbinden:

+=: zahl1+=zahl2 wirkt wie zahl1=zahl1+zahl2. Der Zuweisungsoperator += erhöht den Wert der links stehenden Variablen um den Wert des rechts stehenden Operanden.; string1+=ausdruck wirkt wie string1=string1+ausdruck. An den Wert der Stringvariablen links vom Operator wird der String-Wert von ausdruck gehängt und dieser neue verkettete String der Variablen string1 zugeweisen.; Genauso kann man Subtraktionen, Multiplikationen oder Divisionen auf diese Weise als Zuweisung schreiben, dafür dienen entsprechend die Operatoren -=, *= und /=.
&=: intVar &= numAusdruck wirkt wie intVar = intVar & numAusdruck. Der Zuweisungsoperator &= weist das Ergebnis einer bitweisen UND-Verknüpfung des links und des rechts stehenden Operanden dem links stehenden Operanden zu, der eine Variable sein muss.; Genauso kann man statt intVar = boolVar | numAusdruck abkürzend schreiben intVar |= numAusdruck.

Vergleiche

Mit den Vergleichsoperatoren vergleichen Sie zwei Werte (z. B. Inhalte von Variablen, Eigenschaften von Objekten) miteinander. Das Ergebnis eines Vergleiches ist entweder „true“ oder „false“ und kann zur Steuerung des weiteren Programmablaufes verwendet werden.

Die Vergleichsoperatoren sind:

==: ist „true“, wenn die beiden Ausdrücke links und rechts von „==“ gleich sind. Bitte keinesfalls mit dem Zuweisungsoperator „=“ verwechseln!
===: ist „true“, wenn die beiden Ausdrücke links und rechts von „===“ gleich und vom gleichen Typ sind.
!=: ist „true“, wenn die beiden Ausdrücke links und rechts von „!=“ ungleich sind.
!==: ist „true“, wenn die beiden Ausdrücke links und rechts von „!==“ ungleich oder von ungleichem Typ sind.
>: ist „true“, wenn der Ausdruck links von „>“ größer ist als der rechte. (Eselsbrücke für „>“ und „<“: das „größere“ (breitere) Ende des „>“ zeigt auf den größeren Ausdruck, das „kleinere“ Ende (die „Spitze“) auf den kleineren Ausdruck.)
>=: ist „true“, wenn der Ausdruck links von „>=“ größer oder gleich dem rechten Ausdruck ist.
<: ist „true“, wenn der Ausdruck links von „<“ kleiner ist als der rechte.
<=: ist „true“, wenn der Ausdruck links von „<=“ kleiner oder gleich dem rechten Ausdruck ist.

Die Vergleiche auf größer oder kleiner funktionieren nicht nur mit Zahlen sondern auch mit Zeichen und Zeichenketten. Diese werden zeichenweise als ASCII-Code verglichen. So kommt es zum vielleicht unerwarteten Umstand, dass "A" (ASCII=65) kleiner ist als "a" (ASCII=97).

// Pruefung auf Gleichheit bei Text
var bPruef = sEingabe=="Ende"; 
/*           Der Variablen "bPruef" wird bei ihrer Erstellung der Wert 
             des Vergleichsausdrucks "sEingabe=='Ende'" zugewiesen, sie 
             hat daher den Datentyp Boolean, sie ist eine boolesche 
             Variable.

             Wenn sEingabe den Wert "Ende" enthaelt, wird der booleschen
             Variable "bPruef" der Wert true zugewiesen.

             Achtung!
             Auch bei diesem Vergleich ist der Unterschied
             zwischen Gross- und Kleinschreibung von Belang! 
             "Ende" ist nicht gleich "ende" oder "ENDE"  */


// Pruefung auf Gleichheit bei Zahlen
var bPruef = x==3;
/*           Wenn x den Wert 3 enthaelt, 
             wird die Variable "bPruef" mit dem booleschen Wert true 
             initialisiert. */

// Pruefung auf Gleichheit + Typ-Gleichheit 
var x="3"  //Textvariable
var y=3;   //numerische Variable
var bPruef1 = x==y;
var bPruef2 = x===y;
/*           bPruef1 ist true - JavaScript wandelt die Stringvariable,
             den Text, zum Vergleich in eine numerische Variable.

             bPruef2 ist false - JavaScript stellt fest, dass es sich um 
             eine numerische und eine Stringvariable handelt.  */

// Pruefung auf Ungleichheit bei Text
var bPruef = sEingabe!="Ende"; 
/*           wenn sEingabe irgendeinen anderen Wert ausser "Ende"
             enthaelt, ist die boolesche Variable bPruef true.

// Pruefung auf Ungleichheit bei Zahlen
var bPruef = x!=3;
/*           wenn x irgendeinen anderen Wert ausser 3 enthaelt, 
             ist die boolesche Variable bPruef true.

// Pruefung auf Typ-Ungleichheit
var x="3"  //Textvariable
var y=3;   //numerische Variable
var bPruef1 = x!=y;
var bPruef2 = x!==y;
/*           bPruef1 ist false - JavaScript wandelt die Stringvariable,
             den Text, zum Vergleich in eine numerische Variable und 
             stellt Wertgleichheit fest - die Behauptung von
             Ungleichheit ist also unzutreffend, false.

             bPruef2 ist true - JavaScript stellt fest, dass es sich um 
             eine numerische und eine Stringvariable handelt (Variablen 
             verschiedenen Typs) und bewertet die Variablen daher als 
             nach strengem Masstabe ungleich.  */

// Pruefung auf "groesser" bei Zahlen
var x=3;
var y=3;
var bPruef = x>y
/*           bPruef wird false, weil x nicht groesser als y ist. */


// Pruefung auf "groesser" bei Text
var x="A";
var y="a";
var bPruef = x>y
/*           bPruef wird false, weil der ASCII-Wert von "A", naemlich 65
             nicht groesser ist als der von "a" (97). */


var x="ab";
var y="aaxxxxxxx";
var bPruef = x>y
/*           bPruef wird true, weil bei gleichem erstem Zeichen ("a") 
             das zweite Zeichen "b" groesser ist als "a" */

var x="abxx";
var y="ab";
var bPruef1 = x>y
var x="ab" + 0x00;   
var y="ab";
var bPruef2 = x>y
/*           bPruef1 und bPruef2 werden true, weil in der Länge der kürzeren Variablen beide gleich
             aber dann x länger als y */

// Pruefung auf "groesser oder gleich" bei Zahlen
var x=3;
var y=3;
var bPruef = x>=y
/*           bPruef wird true, weil x groesser als y oder gleich y 
             (in diesem Falle gleich) ist. */

// Pruefung auf "kleiner" bei Zahlen
var x=3;
var y=5;
var bPruef = x<y
/*           bPruef wird true, weil x kleiner als y ist. */


// Pruefung auf "kleiner oder gleich" bei Zahlen
var x=3;
var y=3;
var bPruef = x<=y
/*           bPruef wird true, weil x gleich y ist. */

Die Beispiele sind etwas wirklichkeitsfremd konstruiert. Meistens werden die Vergleichsoperatoren im Zusammenhang mit IF-Abfragen oder DO- und WHILE-Schleifen eingesetzt. Wir werden darauf im Kapitel Programmablauf und Kontrollstrukturen und seinen Unterkapiteln über bedingte Anweisungen und Schleifen noch weiter eingehen.

Bit-Operationen

Bit-Operatoren sind etwas für Spezialisten. Der zu verknüpfende Wert wird in ein Bitmuster (z.B. 01001000) überführt und der Bit-Operator paarweise auf je 2 einzelne Bit angewendet. „0“ wird als „false“, „1“ als „true“ behandelt und dann werden die logischen Operatoren paarweise angewendet. Die Anwendungszwecke dieser Operatoren in JavaScript sind eher begrenzt. Der Vollständigkeit halber seien sie hier dennoch aufgeführt:

~: ist ein einstelliger – man sagt auch „unärer“ – Operator: Das bitweise NOT „~0“ wird zu „1“, „~1“ wird zu „0“
&: verknüpft zwei Bitmuster durch bitweises AND. „0“ & „1“ wird zu „0“, „1“ & „1“ wird zu „1“
|: verknüpft zwei Bitmuster durch bitweises OR . „0“ | „1“ wird zu „1“, „0“ | „0“ wird zu „0“
^: verknüpft zwei Bitmuster durch bitweises XOR . „0“ ^ „1“ wird zu „1“, „1“ ^ „1“ wird zu „0“
<<: verschiebt ein Bitmuster bitweise um x Zeichen nach links
>>: verschiebt ein Bitmuster bitweise um x Zeichen nach rechts
>>>: verschiebt einen Ausdruck bitweise um x Zeichen nach rechts (ohne das Vorzeichen zu berücksichtigen)

Wegen der relativ geringen Bedeutung dieser Operatoren für die Erstellung dynamischer Webseiten werden sie in diesem Wikibook weder genauer erläutert noch werden Beispiele für ihre Anwendung gegeben. Weitergehende Erläuterungen finden sich beispielsweise im Wikibook C-Programmierung und einige kurze Beispiele außerdem für die Programmierspache Perl.

Weitere, besondere Operatoren

delete: dient zum Löschen eines Objektes oder einer Variablen.
in: prüft, ob ein Objekt eine Eigenschaft enthält.
instanceof: stellt fest, ob ein Objekt eine Instanz einer bestimmten Klasse ist.
new: erstellt eine (neue) Instanz eines Objektes.
typeof: ermittelt den Typ eines Objekts (ist eigentlich vom Sinn her eine Funktion)
void: unterdrückt einen Rückgabewert.

Die detaillierte Auseinandersetzung mit diesen Spezialoperatoren findet an Stellen statt, wo wir diese zu einem konkreten Einsatzzweck benötigen. Eine rein theoretische Besprechung wäre an dieser Stelle sinnlos.

Ausdrücke

Aus mehreren Variablen und Operatoren zusammengesetzte Ausdrücke werden vom JavaScript-Interpreter von links nach rechts abgearbeitet. Wie bei den arithmetischen Operatoren gibt es zudem eine Rangfolge der Operatoren:

( ) als Gruppierung
der Feldzugriffsoperator: .
( ) und [ ] Klammern und bereits besprochene Vektoren/Arrays haben den höchsten Rang, das heißt sie werden zuerst ausgewertet.
Operatoren für nur einen Operanden: ! ~ - ++ --. Sie haben die zweithöchste Priorität, wobei mit „-“ das Vorzeichen einer Zahl gemeint ist, nicht die Subtraktion.
die Punktrechnung: * / %
die Strichrechnung: - +
die Bitverschiebungen: << >> >>>
die Vergleichsoperatoren: < <= > >=
die Vergleichsoperatoren: == === != !==
der Bitoperator: &
der Bitoperator: ^
der Bitoperator: |
der logische Operator: &&
der logische Operator: ||
der Konditional-Operator: ?:
die Zuweisungsoperatoren: = += -= <<= >>= &= ^= |=

Empfehlung: Angesichts dieser komplexen und nicht auf den ersten Blick einleuchtenden Geltungsreihenfolge empfiehlt es sich:

öfter Klammern auch dort zu setzen, wo sie nicht notwendig sind;
eine schwierige, zusammengesetzte Bedingung gegebenenfalls in mehrere einfachere Bedingungen zu teilen, die ineinander geschachtelt, d. h. von einander unabhängig überprüft werden.

Dadurch werden nicht nur Fehler vermieden, sondern Programmierer können den Programmtext dadurch auch leichter nachvollziehen.

Durch die empfohlene Aufteilung zusammengesetzter Bedingungen in mehrere einfache Bedingungen, können zudem Fehler leichter ausgemacht werden, wozu Programmierer vorübergehend Dialogboxen einsetzen können, die im nächsten Kapitel besprochen werden.

Aufgaben + Lösungen

<< Werte und Variablen | Inhaltsverzeichnis | Index | Weblinks | Dialogboxen >>