Grundlagen

Übersicht

Die rasante Entwicklung des WWW (World Wide Web) machte HTML (HyperText Markup Language) als Seitenbeschreibungssprache des Internet populär. Reine HTML Seiten sind statisch, d.h. es gibt wenig Interaktion, keine Prüfungen bei Eingaben, wenig Effekte.

Beispiele für einfache Effekte sind:

Ein Beispiel für Listen und dynamisch aufgebaute Hilfetexte, die sie in Anwendungen eingebaut werden kann, ist in Mehrfachlisten gezeigt.

Ein Beispiel für eine Eingabeprüfung ist in der folgenden Geschäftseingabemaske einer Bankanwendung dargestellt:
Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Dabei sind Prüfungen bzw. Formatierungen auf den Feldern:

Betrag: Formatierung
von, bis: gültiges Datum
Kundensatz: Verhältnis zu anderen Feldern.

Beispiele für kleine Anwendungen, die ganz in JavaScript geschrieben sind:

Entstehungsgeschichte

JavaScript wurde im Dezember 1995 von Netscape (Netscape Communication Corp.) entwickelt, um Interaktivität und Animation in Webseiten integrieren zu können, die auf dem Netscape Browser dargestellt werden konnten.

Microsoft integrierte eine Version von JavaScript (JScript) in ihren Internet Explorer.

Beide Versionen wurden jeweils weiterentwickelt und waren nicht kompatibel zueinander. Deshalb wurde von der europäischen Organisation ECMA (??) 1997 der Standard ECMAScript verabschiedet. ECMAScript wurde dann 1998 als internationaler Standard ISO/IEC 16262 verabschiedet. Heute sind beide Sprachen ECMAScript Implementierungen.

JavaScript Versionen

JavaScript wird sowohl auf Seite von Clients als auch auf Serverseite verwendet. Auch außerhalb von Browseranwendungen existieren Einsatzgebiete.

Folgendes Schaubild verdeutlicht die einzelnen Komponenten:

Core JavaScript

Der Kern der Sprache, d.h. der Teil, der in allen Komponenten zu finden ist, besteht aus

den Schlüsselworten,
der Syntax und Semantik der Anweisungen und der Grammatik,
Regeln für Ausdrücke, Variablen und Literale,
dem zugrunde liegenden Objektmodell und
den vordefinierten Objekten, wie "Array", "Date" und "Math".

Client-side JavaScript

Browser, wie der Netscape Communicator oder MS Internet Explorer interpretieren JavaScript Kode, der in HTML Seiten eingebettet ist.

Server-side JavaScript

Auf der Seite von Servern kann JavaScript verwendet werden, um auf Client-Anfragen hin, eine Verbindung zu einer Datenbank aufzubauen, Daten abzufragen (oder zu Ändern) und als Ergebnis, eine HTML Seite zurück zum Client zu senden (funktioniert nur bei einigen Web-Servern, z.B. in einer Netscape Serverumgebung).

Im Gegensatz zu Client Side JavaScript, wird auf Serverseite der HTML Kode (mit JavaScript) in ausführbaren Bytecode übersetzt. Dieser Kode wird dann vom Webserver in seiner JavaScript Laufzeitumgebung ausgeführt.

Diese zwei Schritte (Entwicklung, Ausführung) sind nachfolgend verdeutlicht.

Entwicklung:

Ausführung bei Anfrage von Client:

JavaScript Engines

Es existieren so genannte JavaScript Engines, die in eigene Anwendungen (NT, Unix) einbettbar sind, so dass JavaScript als Script Sprache (für Anwender) verwendbar ist. Dadurch braucht man sich nicht in der eigenen Anwendung selbst eine Sprache auszudenken und einen Interpreter zu schreiben.

Folgende frei verfügbare JavaScript Engines sind weit verbreitet:

Spidermonkey,: JavaScript Engine des Netscape Navigators (in C++ geschrieben)
Rhino: JavaScript Engine von Netscape
JScript-Engine von Microsoft
FESI (Free ECMA Script Interpreter)

Erste Schritte

Scripts können in HTML eingebettet werden. Dazu existiert das Tag "script" mit dem Attribut "language" zur Angabe der Script-Sprache. JavaScript wird mittels des Wertes "JavaScript" angegeben.

Beispiel 1.1-1

<html>

<head>

</head>

<body>
<script language="JavaScript">

        document.write("Hello World!")

</script>


</body>

</html>

Der JavaScript Kode wird einfach zwischen Anfang- und Endtag geschrieben. Das Programm besteht hier aus der Anweisung "document.write...". Diese Anweisung ist ein Methodenaufruf der vordefinierten Methode "write" des Objektes "documment".

In JavaScript sind neben Texten auch Berechnungen möglich. Soll ein Ergebnis einer Berechnung ausgegeben werden, ist der Ausdruck für die Berechnung als Argument von "write" anzugeben.

Beispiel 1.1-2

<html>

<head>

</head>

<body><script language="JavaScript">

       
document.write(2+3*4)

</script>

</body>

</html>

Im Folgenden wird der HTML Rahmen weggelassen, insofern nicht zusätzliche Eigenschaften von HTML erforderlich sind.

Mehrere Anweisungen werden nacheinander hingeschrieben. Wenn mehrere Anweisungen in einer Zeile stehen sollen, sind die Anweisungen mit Semikolon zu trennen.

Viele Programmierer, die von C her gewohnt sind, Anweisungen mit Semikolon abzuschließen, verwenden diese Schreibweise auch in JavaScript.

Innerhalb von "write" sind auch HTML Elemente erlaubt. Damit lassen sich dann WEB Seiten erzeugen.

Beispiel 1.1-3

<script language="JavaScript">


  

      

        document.write('2+3*4 = <b>');

       
document.write(2+3*4);

       
document.write('</b>');

            

</script>

Programme sollten der besseren Lesbarkeit und damit der leichteren Wartbarkeit mit Kommentaren versehen werden. Kommentare werden von JavaScript Interpreter einfach überlesen.

Kommentrare werden entweder (wie in der Programmiersprache C in "/*" und "*/" eingeschlossen oder aber (wie in Java oder C++) in einer Zeile nach der Zeichenfole "//" angefügt.

Beispiel 1.1-4

<script language="JavaScript">


        



        /* Kommentar über

           mehrere Zeilen.

       
*/

        document.write('2+3*4 = <b>');

        document.write(2+3*4); // Kommentar in einer Zeile

        document.write('</b>');

            

</script>

Eine weitere vordefinierte Methode ist "alert". Damit lassen sich Hinweisfenster realisieren. Im nachfolgenden Beispiel ist die JavaScript Methode innerhalb einer HTML Form verwendet.

Beispiel 1.1-5

<html>

<head>

<body>



<form>

  <button


    name="Knopf"

    onClick="alert('Hallo, 
Welt!')"> 

    Dr&uuml;ck 
mich

  </button>

</form>



</body>

</html>

Im Folgenden wird auf die Script Tags verzichtet, um den Fokus auf das Wesentliche der einzelnen Sprachelement zu legen.

Werte, die ein Benutzer in eine HTML Form eingibt, können in mit JavaScript bearbeitet werden:

Beispiel 1.1-6

<body>



<form>

<p>Eingabe:

    <input type="text" name="Eingabe" size="15">

</p>

<p>Ausgabe:

    <input type="text" name="Ausgabe" size="15">

</p>

<p> 

    <button 

        name="Knopf"

        onClick="Ausgabe.value=Eingabe.value.length">


        Ausführen

   
</button>

</p>

</form>



</body>

"length" ist eine Methode der Klasse "String", die die Länge eines Stringobjektes ermittelt.

Nun sehen wir uns ein größeres Beispiel an, an dem erste einige Sprachelemente vorab gezeigt werden, bevor jedes Sprachelement genau untersucht wird.

Beispiel 1.1-7

<script language="JavaScript">



var lower = 0;   // untere Grenze

var upper = 300; // obere Grenze

var step = 20;   // Schrittweite

var fahr = lower;

var celsius;



document.write("Umrechnung von Fahrenheit in Celsius<br>");

while ( fahr <= upper) { celsius = (5.0/9.0) * (fahr-32.0); // berechnen document.write(fahr + ' ' + celsius); // ausgeben document.write("<br>"); fahr = fahr + step; // erhoehen } </script>

Übung 1.1-1

Schreiben Sie ein JavaScript Programm, das eine HTML Tabelle mit der Umrechnung von Fahrenheit nach Celsius ausgibt.

Die Tabelle soll folgendes Layout haben:

Ausgabe

Hinweis:

Die Tags für Tabellen am Beispiel von

1-1	1-2	1-3
2-1	2-2	2-3

sind:

Die nachfolgenden Abschnitte erklären nun genauer die einzelnen Sprachelemente von JavaScript. Jeder Abschnitt ist dabei wie folgt gegliedert:

eine allgemeine Erklärung des Sprachkonstruktes,
eine Definition des Konstruktes,
ein oder mehrere Beispiele,
Programme zur Verdeutlichung und
Übungen.

Ab jetzt werden englische Bezeichnungen in den Erklärungen und Programmbeispielen verwendet!

Programme

Ein JavaScript Programm ist besteht aus einer Menge von Objekten, die definieren, welche Aktionen ausgeführt werden. Die Abarbeitungsreihenfolge ist durch die Aufschreibungsreihenfolge und die Semantik der einzelnen Sprachkonstrukte vorgegeben.

Variablen, Werte und Literale

Variablen

Variablen in Programmiersprachen bilden die Grundlage zum internen Speichern von Werten, mit denen im Verlauf eines Programms gearbeitet werden soll. Ein Variable ist als Container zum Speichern von Werten anzusehen, der über die Ausführungszeit des Programms unterschiedliche Werte annehmen kann.

Im Rechner sind Variablen im Hauptspeicher des Rechners abgelegt.

Deklarationen von Variablen

Vor der ersten Verwendung muss eine Variable deklariert werden. Variablendeklarationen sind wie folgt anzugeben::

var name = expression

name = expression

Damit wird eine Variable mit Namen "name" deklariert und der Wert des Ausdrucks "expression" zugewiesen. Das Zeichen "=" ist der Zuweisungsoperator.

Ebenso kann man mehrere Variablen auf einmal deklarieren.

var name1, name2

name1 = value1

name2 = value2

Variablen können nicht nur Zahlen speichern, Texte oder auch Zeichenketten oder Strings genannt, sind auch ablegbar.

Regeln für Namen von Variablen

Namen für Variablen sollten mit dem Inhalt und der anwendungsbezogenen Verwendung in Zusammenhang stehen. Da JavaScript vom Browser interpretiert wird, sind sehr lange Namen zu vermeiden.

Ein Name besteht aus einer Folge von Buchstaben, Ziffern und dem Unterstich "_", beginnend mit einem Buchstaben. Zu beachten ist, dass bei Variablennamen zwischen Groß- und Kleinbuchstaben unterschieden wird. So sind "fahrenheit" und "Fahrenheit" zwei unterschiedliche Namen. Daraus ergibt sich, dass Sonderzeichen, wie z.B. Satzzeichen und Operationssymbole oder auch das Zeichen "$" nicht verwendet werden dürfen.

Reservierte Wörter von JavaScript dürfen nicht zur Namensgebung verwendet werden. Die folgende Tabelle zeigt die reservierten JavaScript Schlüsselworte. (Einige der Wörter sind momentan erlaubt, sollten aber wegen zukünftiger ECMA Erweiterungen schon jetzt nicht verwendet werden.)

abstract	enum	int	synchronized
boolean	export	interface	this
break	extends	long	throw
byte	false	native	throws
case	final	new	transient
catch	finally	null	true
char	float	package	try
class	for	private	var
const	function	protected	void
continue	goto	public	volatile
debugger	if	return	while
default	implements	short	with
do	import	static
double	in	super
else	instanceof	switch

Das folgende Beispiel zeigt gültige Variablennamen.

Initialisierung von Variablen

Variablen sollten vor der ersten Verwendung initialisiert, d.h. mit einem Anfangswert versehen werden. Eine nicht explizit initialisierte Variable bekommt automatisch den Wert "null" zugewiesen.

Initialisiert wird entweder beim Deklarieren oder als Zuweisung eines Wertes vor der Verwendung:

Wenn eine Variable nicht initialisiert wurde, so erhält sie den Wert "undefined". Wird nun eine solche Variable ausgewertet, so hängt das Ergebnis davon ab, wie sie deklariert wurde:

eine Variable mit Wert "undefined", die ohne "var" deklariert wurde, produziert bei der Auswertung einen Laufzeitfehler;
mit "var" wird in dem Fall "undefined" bei Strings und "NaN" bei Zahlen erzeugt.

Am nachfolgenden Beispiel erkennt man, dass auch der Wert "undefined" verwendet werden kann (i2="undefined").

Übung 1.4-2

Verwenden Sie das Programm aus Übung 1 und verwenden Sie die unterschiedlichen Arten der Initialisierung. Versuchen Sie auch, die Namen der Variablen zu ändern.

Wo ist im nachfolgenden Programm der Fehler ?

Übung 1.4-2

Werte, Datentypen

In Programmiersprachen, wie C oder Pascal muss bei einer Deklaration stets der Typ der Variablen angegeben werden (z.B. "int x=0; float y" in C). Dieses Konzept nennt man "strong typing". In JavaScript hingegen wird das "loose typing" Konzept verwendet. D.h. der JavaScript Interpreter verwaltet die Datentypen selbst. Es wird stets aus dem Kontext der Datentyp (Zahl oder String) abgeleitet.

Die folgenden elementaren Datentypen werden unterstützt:

Zahlen, wie 18 oder 3.14,
Boolean, das sind die Wahrheitswerte true und false,
Strings, wie "Heute ist Vorlesung" und
der spezielle Wert null,
der spezielle Wert undefined.

Typekonvertierung

Java ist eine dynamisch getypte Sprache. Deshalb kann eine Variable sowohl einen Integerwert, als auch einen String aufnehmen.

Somit führt folgendes Programmstück nicht zu einem Fehler.

var answer = 42;

...

answer = "Ende der Veranstaltung?";

In Ausdrücken mit dem Operator "+" (Stringverkettung) wird ein Integerwert in einen String konvertiert. In Ausdrücken mit anderen Operatoren, wird nicht von Integer nach String konvertiert!

Literale

Literale repräsentieren Werte, mit denen gearbeitet werden kann. Man unterscheidet:

boolesche Literale,
Integer,
Gleitkommazahlen (floating point numbers),
Strings,
Arrayliterale (werden später behandelt) und
Objektliterale (werden später behandelt).

Boolean

Es gibt die zwei booleschen Werte, die Wahrheitswerte true (wahr) und false (falsch).

Floating Point Literale

Ein Float kann folgende Bestandteile haben:

einen Integer,
einen Dezimalpunkt ("."),
einen Nachkommaanteil und
einen Exponenten.

Integer

Integer können mit unterschiedlicher Basis verwendet werden. Normalerweise wird als Basis 10 verwendet. Somit ist 123 der Wert Einhundertdreiundzwanzig.

Eine führende Null gibt an, dass die nachfolgenden Ziffern oktal zu interpretieren sind (Basis 8).

Führende 0x oder 0X geben an, dass es sich um hexadezimale Integer handelt (Basis 16).

Strings

Ein String Literal ist eine Folge von Null oder mehreren Zeichen, die in einfachen Anführungsstrichen (') oder doppelten Anführungsstrichen (") eingeschlossen sind.

Beispiele

"Text ohne Sonderzeichen"
'Text mit Sonderzeichen \n'

Methoden, wie String.length, für Strings können auf String Literale angewendet werden.

Die folgende Tabelle zeigt die Sonderzeichen, die innerhalb in Strings verwendet werden können.

Zeichen	Bedeutung
\b	Backspace
\f	Form feed
\n	New line
\r	Carriage return
\t	Tab
\'	Single quote
\"	Double quote
\\	Backslash
\XXX	Zeichen mit Kode XXX (XXX in 0 bis 377), \251 ist Zeichen Copywrite ©
\xXX	Zeichen mit hexadezimalem Kode XX (XX in 0 bis FF), \xA9 ist Zeichen Copywrite ©
\uXXXX	Zeichen mit hexadezimalem Kode XXXX für Unicodezeichen, \u00A9 ist Zeichen Copywrite ©

Das Zeichen Backslash ist das Escape Zeichen. Damit lassen sich auch Anführungsstriche oder das Zeichen "\" selbst in String Literalen verwenden.

Übung 1.4-3

Versuchen Sie die Ersatzdarstellungen an Beispiel Programmen.

Ausdrücke und Operatoren

Mit Werten, ganz gleich ob Literale oder Werte von Variablen und Operationssymbolen, lassen sich komplexe Ausdrücke zur Berechnung von Werten bilden. Hier werden die Operatoren vorgestellt und erklärt, welche Regeln für Ausdrücke gelten.

Ausdrücke

Ein Ausdruck wird als Folge von Operatoren und Operanden gebildet. Er ist eine Menge von Literalen, Variablen, Operatoren und Ausdrücken, die zu einem Wert auswertbar sind; ein Wert kann dabei eine Zahl, ein String oder ein Wahrheitswert sein.

Man kann zwei Arten von Ausdrücken unterscheiden:

Ausdrücke, die einer Variablen einen Wert zuweisen und
Ausdrücke, die einfach einen Wert darstellen.

x = 18 // Zuweisung

x + 3 * 2 // Wert 24

Die Zuweisung verwendet den Zuweisungsoperator "=". "+" und "*" sind arithmetische Operatoren.

Operatoren

JavaScript kennt folgende Arten Operatoren:

Zuweisungsoperatoren,
Vergleichsoperatoren,
arithmetische Operatoren,
Operatoren zur bitweisen Manipulation von Zahlen,
logische Operatoren,
Stringoperatoren und
Spezialoperatoren.

Weiterhin lassen sich Operatoren unterscheiden nach der Anzahl der erforderlichen Operanden: unäre, binäre und tenäre Operatoren.

x + y            
// binärer arithmetischer Operator

-x // unärer arithmetischer Operator

x++ // unärer arithmetischer Operator

(x=y) ? a : b // tenärer Operant für bedingte Bewertung

Zuweisungsoperatoren

Der Zuweisungsoperator "=" wird verwendet, um einer Variablen einen Wert zuzuweisen.

Variable = Ausdruck

Dabei wird zuerst der Wert des Ausdrucks ermittelt, dann wird der Variablen das Ergebnis zugewiesen.

Die restlichen Zuweisungsoperatoren sind lediglich Schreibvereinfachungen mit folgender Bedeutung:

Ausdruck	Bedeutung
x += y	x = x + y
x -= y	x = x - y
x *= y	x = x * y
x /= y	x = x / y
x %= y	x = x % y
x <<= y	x = x << y
x >>= y	x = x >> y
x &= y	x = x & y
x ^= y	x = x ^ y
x \|= y	x = x \| y

Die Bedeutung der einzelnen Operatoren (+, - , *, ...) wird in den nächsten Abschnitten erklärt.

Vergleichsoperatoren

Ein Vergleichsoperator vergleicht seine Operanden und liefert als Ergebnis einen Wahrheitswert. Die Operanden können Zahlen oder Strings sein. Bei Strings wird die lexikographische Ordnung zugrunde gelegt.

Die folgende Tabelle zeigt die Vergleichsoperatoren.

Operator	Bedeutung	Erklärung	Beispiel, das "true" ergibt (Annahme: x = 3; y = 4;)
==	gleich	liefert "true", wenn beide Operanden gleich sind; haben die Operanden unterschiedlichen Typ, wird konvertiert.	3 == x "3" == x '3' == "3"
!=	ungleich	liefert "true", wenn beide Operanden nicht gleich sind; haben die Operanden unterschiedlichen Typ, wird konvertiert.	x != 4 y != "3"
===	Strict gleich	liefert "true", wenn beide Operanden gleich sind und den gleichen Typ haben	3 === x
!==	Strict ungleich	liefert "true", wenn beide Operanden ungleich sind und/oder verschiedene Typen haben	x !== "3" 3 !== '3' y !== 3
>	größer	liefert "true", wenn der linke Operand größer als der rechte ist	y > x
>=	größer oder gleich	liefert "true", wenn der linke Operand größer oder gleich dem rechten Operand ist	y >= x x >= '3'
<	kleiner	liefert "true", wenn der linke Operand kleiner als der rechte ist	x < y
<=	kleiner oder gleich	liefert "true", wenn der linke Operand kleiner oder gleich dem rechten Operand ist	x <= y y <= "5"

Arithmetische Operatoren

Arithmetische Operatoren zusammen mit numerischen Werten erzeugen in Ausdrücken einen einzelnen numerischen Wert.

Nachfolgend sind diese Opertoren aufgelistet.

Operator	Bedeutung	Erklärung	Beispiel
+	Addition	binärer Operator für Addition	5 + 2 ergibt 7
-	Subtraktion	binärer Operator für Subtraktion	5 - 2 ergibt 3
*	Multiplikation	binärer Operator für Multiplikation	5 * 2 ergibt 10
/	Division	binärer Operator für Division Achtung: in C oder Java ist "/" ganzzahlige Division, wenn beide Operanden Integer sind; somit ist dort 5/2=2	5 / 2 ergibt 2.5
%	Modulo	binärer Operator zur Ermittlung des ganzzahligen Rests nach Division	5 % 2 ergibt 1
++	Inkrement	unärer Operator zur Erhöhung um 1. ++x liefert Wert nach Erhöhung um 1; x++ liefert Wert vor Erhöhung um 1;	x = 3; ++x ergibt 4 und setzt x auf 4 x++ ergibt 3 und setzt x auf 4
--	Dekrement	unärer Operator zur Verminderung um 1. ++x liefert Wert nach Verminderung um 1; x++ liefert Wert vor Verminderung um 1;	x = 3; --x ergibt 2 und setzt x auf 2 x-- ergibt 3 und setzt x auf 2
-	Negation	unärer Operator zum Negieren des Operanden	x = 3; -x ergibt -3

Beispiel 1.5-3

Bitoperatoren

In Java existieren Operatoren zur Manipulation einzelner Bits in numerischen Werten. Diese Operatoren nehmen die Bitrepräsentation (32 Bits) der Operanden und verknüpfen auf Bitebene. Das Ergebnis ist wieder ein numerischer Wert.

Die Bitrepräsentation von 5 ist

Die Bitrepräsentation von 3 ist

Das Ergebnis von "bitweisem UND" von 5 und 3 ist 1

5	:	1	0	1
3	:	0	1	1
5&3	:	0	0	1

Das Ergebnis von "bitweisem ODER" von 5 und 3 ist 7

5	:	1	0	1
3	:	0	1	1
5\|3	:	1	1	1

Die nachfolgende Tabelle beschreibt die Operatoren.

Operator	Bedeutung	Erklärung	Beispiel
&	bitweis AND	ergibt in einer Position 1, wenn beide Operanden an der Position 1 haben	5 & 3 ergibt 1
\|	bitweis OR	ergibt in einer Position 1, wenn einer von beiden Operanden an der Position 1 haben	5 \| 3 ergibt 7
^	bitweis XOR	exklusive ODER, d.h. ergibt in einer Position 1, wenn genau einer von beiden Operanden an der Position 1 haben	5 ^ 3 ergibt 6
~	bitweis NOT	negiert bitweise	~5 ergibt -6
<<	left Shift	a << b verschiebt a bitweise um b Positionen nach links, wobei rechts 0en nachrücken wird	5 << 3 ergibt 40
>>	sign progagating right shift	a >> b verschiebt a bitweise um b Positionen nach rechts, wobei das Vorzeichen beibehalten wird	5 >> 3 ergibt 0
>>>	Zero fill right shift	a >>> b verschiebt a bitweise um b Positionen nach rechts, wobei das Vorzeichen beibehalten link On nachrücken wird	5 >> 3 ergibt 0

Das Ergebnis von "bitweisem NOT" von 5 ist -6

5	:	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	1
~5	:	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	0	1	0

Zur Erinnerung: Zahlen im Zweierkomplement

6	:	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	1	0
Komplement	:	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	0	0	1
+1	:	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1
-6 = Komplement +1	:	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	0	1	0

Das Ergebnis von "bitweisem exklusivem ODER" von 5 und 3 ist 6

5	:	1	0	1
3	:	0	1	1
5^3	:	1	1	0

Das Ergebnis von "Links Shift" von 5 um 3 Stellen ist 6

5	:	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	1
5<<2	:	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	1	0	0	0

Das Ergebnis von "Recht Shift" von 5 um 1 Stelle ist 2

5	:	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	1
5>>2	:	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0

Übung 1.5-1

Schreiben Sie ein Programm, dass eine Zahl mit 2, 4, 8 und 16 multipliziert, ohne den Multiplikationsoperator zu verwenden.

Logische Operatoren

Normalerweise werden logische Operatoren im Zusammenhang mit Wahrheitswerten verwendet. In JavaScript sind logische Operatoren etwas mächtiger, sie können in Ausdrücken mit nicht booleschen Operanden, auch andere Werte zurück liefern.

Operator	Bedeutung	Verwendung	Erklärung
&&	logical AND	expr1 && expr2	liefert das Ergebnis von expr1, wenn expr1 zu false auswertbar ist; ansonsten expr2. D.h. wenn && mit booleschen Werten verwendet wird, ist das Ergebnis true, wenn beide Operanden true sind, ansonsten false.
\|\|	logical OR	expr1 \|\| expr2	liefert das Ergebnis von expr1, wenn expr1 zu true auswertbar ist; ansonsten expr2. D.h. wenn \|\| mit booleschen Werten verwendet wird, ist das Ergebnis tue, wenn zumindest einer der beiden Operanden true ist, ansonsten false.
!	logical NOT	!expr	liefert false, wenn der Operand true ist, ansonsten true

Ausdrücke werden stets zu false ausgewertet, wenn sie folgende Werte annehmen:

"null"
"" (leerer String)
"undefined"

Folgender Kode verdeutlicht "&&"

a1=true && true // t && t returns true

a2=true && false // t && f returns false

a3=false && true // f && t returns false

a4=false && (3 == 4) // f && f returns false

a5="Cat" && "Dog" // t && t returns Dog

a6=false && "Cat" // f && t returns false

a7="Cat" && false // t && f returns false

Folgender Kode verdeutlicht "||"

o1=true || true // t || t returns true

o2=false || true // f || t returns true

o3=true || false // t || f returns true

o4=false || (3 == 4) // f || f returns false

o5="Cat" || "Dog" // t || t returns Cat

o6=false || "Cat" // f || t returns Cat

o7="Cat" || false // t || f returns Cat

Folgender Kode verdeutlicht "!"

n1=!true // !t returns false

n2=!false // !f returns true

n3=!"Cat" // !t returns false

Logische Ausdrücke werden stets von links nach rechts ausgewertet unter Berücksichtigung der folgenden Regeln:

false && Restergibt false
true || Restergibt true
Rest wird nie ausgewertet

Durch diese Regeln können keine Seiteneffekte ( wie sie z.B. in C zu schwer zu findenden Fehlern führen) in JavaScript auftreten.

Stringoperatoren

Zeichenketten oder Strings können mit dem binären Operator "+" verkettet werden . Die Konkatenation von Strings kann auch mittels der zusammengesetzten Zuweisung "+=" verwendet werden:

s1 = "Die Vorlesung "

s2 = "Prorammieren in Java"

s1 += s2 + " geht weiter."

// Die Vorlesung Prorammieren in Java geht weiter.

Spezielle Operatoren

In JavaScript existieren noch spezielle Operatoren, die teilweise erst später behandelt werden.

die bedingte Bewertung,
der Kommaoperator,
"delete",
"new",
"this",
"typeof" und
"void".

Bedingte Bewertung

Der Konditionsoperator ist der einzige Operator mit drei Operanden. Er wird für die bedingte Bewertung verwendet und hat die Syntax:

condition ? val1 : val2

mit der Bedeutung:

der Wert ist der Wert von val1, falls condition zu true auswertbar ist, ansonsten val2.

status = (age >= 18) ? "adult" : "minor";

Das folgende Beispiel ermittelt, ob ein Jahr ein Schaltjahr ist.

Übung 1.5-2

Schreiben Sie ein Programm, das entscheidet, ob ein Jahr ein Schaltjahr ist oder nicht.

Hinweis:

Ein Jahr ist ein Schaltjahr, wenn es ohne Rest durch 4 teilbar ist, nicht aber durch 100. Alle 400 Jahre ist die 100er Regel aufgehoben.

Kommaoperator

Der Kommaoperator "," wertet seine beiden Operanden aus und das Ergebnis ist der Wert des zweiten Operanden. Dieser Operator wird meistens im Zusammenhang mit For-Schleifen verwendet (-> später).

Syntax

expr1 , expr2

delete

Der Operator "delete" wird verwendet, um

Objekte,
Eigenschaften von Objekten (-> später) oder
Elemente eines Arrays (->später)

zu löschen.

Syntax:

    delete objectName
    delete objectName.property
    delete objectName[index]
    delete property         // nur innehalb with Anweisung

Variablen können nur mit delete gelöscht werden, wenn sie nicht mit "var" deklariert wurden. Das Löschen gibt den Speicherplatz für die Verwendung für andere Objekte frei.

Nach Ausführung der delete-Anweisung hat der Ausdruck den Wert true, wenn das Löschen möglich war, ansonsten false und das Element oder die Eigenschaft haben den Wert "undefined".

new

Mit new können neue Instanzen von selbst definierten Objekten erzeugt werden.

Wir werden dies später zusammen mit Objekten behandeln.

this

this referenziert das aktuelle Objekt.

Wir werden dies später zusammen mit Objekten behandeln.

typeof

Durch den Operator typeof kann man den Operanden prüfen ohne ihn auszuwerten. Das Ergebnis ist ein String, der den Typ des Operanden angibt.

Systanx:

typeof operand

typeof (operand)

void

Der Operator void wird verwendet, um den Operanden auszuwerten ohne dass ein Wert zurück gegeben wird.

Syntax:

void expression

void (expression)

Die Verwendung werden wir später kennen lernen.

Operator Prioritäten

Die Priorität (Vorrang) eines Operators bestimmt die Reihenfolge, in der die Operatoren innerhalb eines Ausdrucks ausgewertet werden. Wie in der Mathematik auch, können die Prioritäten durch Klammerung (runde Klammern) überschrieben werden.

Die nachfolgende Tabelle definiert die Prioritäten der Operatoren. Je weiter ein Operator am Ende der Tabelle ist, desto größer ist seine Priorität. Operatoren in einer Zeile haben die selbe Priorität.

Priority	Operator Typ	Operator
low	comma	,
↓	assignment	= += -= *= /= %= <<= >>= >>>= &= ^= \|=
	conditional	?:
	logical or	\|\|
	logical and	&&
	bitwise or	\|
	bitwise xor	^
	bitwise and	&
	equality	== !=
	relational	< <= > >=
	bitwise shift	<< >> >>>
	addition/subtraction	+ -
	multiply/divide	* /
	negation/increment	! ~ - + ++ -- typeof void delete
	call	()
	create instance	new
high	member	. []

Übung 1.5-3

Verdeutliche Sie sich die o.a. Funktionen, indem Sie aussagekraeftige Beispiele entwickeln und ausprogrammieren.

Beispiel 1.3-1
<html> <head> </head> <body> <script language="JavaScript"> document.write("first statement<br>"); document.write("second statement<br>"); document.write("<b>last</b> statement"); </script> </body> </html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.4-1
<html> <head></head><body> <script language="JavaScript"> var x = 2; var y, z; y = 3; z = x * y; document.write('z: ' + z); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.4-2
<html> <head></head><body> <script language="JavaScript"> var Test = 2; var test, x123; var serach_string; var testInteger; document.write("Keine Ausgabe!"); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.4-3
<html> <head></head><body> <script language="JavaScript"> var i1 = 2; var i2; var i3; var s1 = "Test"; var s2; i2 = 123; document.write("i1: " + i1 + "<br>"); document.write("i2: " + i2 + "<br>"); document.write("i3: " + i3 + "<br>"); document.write("s1: " + s1 + "<br>"); document.write("s2: " + s2 + "<br>"); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.4-4 (Laufzeitfehler)
<html> <head></head><body> <script language="JavaScript"> var i1; var s1; s2 = s1; document.write("i1: " + i1 + "<br>"); document.write("i2: " + i2 + "<br>"); document.write("s1: " + s1 + "<br>"); document.write("s2: " + s2 + "<br>"); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.4-5
<html> <head></head><body> <script language="JavaScript"> var i1; i2 = i1; var s1; s2 = s1; document.write("i1: " + i1 + "<br>"); document.write("i2: " + i2 + "<br>"); document.write("s1: " + s1 + "<br>"); document.write("s2: " + s2 + "<br>"); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.4-6
<html> <head></head><body> <script language="JavaScript"> var x = 1; /* Integer / var y = 8; / Integer / var s = "8"; / String */ var res; res = x + y; document.write("x + y: " + res + "<br>"); res = x + s; document.write("x + s: " + res + "<br>"); res = x - s; document.write("x - s: " + res + "<br>"); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.4-8
<html> <head></head><body> <script language="JavaScript"> document.write( 12 + "<br>"); document.write( 012 + "<br>"); document.write( 0x12 + "<br>"); document.write( -0x12 + "<br>"); document.write( 0XaF + "<br>"); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.4-9
<html> <head></head><body> <script language="JavaScript"> document.write( "Text ohne Sonderzeichen" + "<br>"); document.write( "Backslash \\" + "<br>"); document.write( "Double quote \"" + "<br>"); document.write( "Copywrite \251" + "<br>"); document.write( "Copywrite \0xA9" + "<br>"); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.4-10
<html> <head></head><body> <script language="JavaScript"> var str = "Anführungsstriche \" und \' und Baskslash \\ "; document.write(str + "<br>"); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.5-1
<html> <head></head><body> <script language="JavaScript"> var x = 2; var y; y = y * x + 1; document.write(y + "<br>"); y = 2 ; y = y * x + 1; document.write(y + "<br>"); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.5-2
<html> <head></head><body> <script language="JavaScript"> var x = 3; var y = 4; document.write( x == y ); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

5	:	1	0	1
3	:	0	1	1
5&3	:	0	0	1

5	:	1	0	1
3	:	0	1	1
5\|3	:	1	1	1

5	:	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	1
~5	:	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	0	1	0

5	:	1	0	1
3	:	0	1	1
5^3	:	1	1	0

Beispiel 1.5-6
<html> <head></head><body> <script language="JavaScript"> var year = 2002; var str = ""; /* einfacher, aber falscher Algorithmus */ str = (year % 4 == 0) ? "ein" : "kein"; document.write(year + " ist " + str + " Schaltjahr."); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.5-7
<html> <head></head><body> <script language="JavaScript"> var x; var y; var z = (x=1,y=2); document.write(z); </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

Beispiel 1.5-8
<html> <head></head><body> <script language="JavaScript"> var x = 1; y = 2; document.write(delete x + "<br>"); document.write(x + "<br>"); /* x existiert noch / document.write(delete y); / y existiert nicht mehr */ </script> </body></html>	Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.

5	:	1	0	1
3	:	0	1	1
5&3	:	0	0	1

5	:	1	0	1
3	:	0	1	1
5\|3	:	1	1	1

5	:	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	1
~5	:	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	1	0	1	0

5	:	1	0	1
3	:	0	1	1
5^3	:	1	1	0