Webtechnologien Teil 15: JavaScript - Teil I

Webtechnologien 

Teil 15: JavaScript - Teil I 

Webtechnologien - WS 2013/14 - Teil 15/JavaScript I 28.10.13 1

Literatur 

[15-1] Flanagan, David: JavaScript. Kurz & Gut. O'Reilly, 4. Auflage, 2012 

[15-2] Lubkowitz, Mark: Webseiten programmieren und gestalten. Galileo 

Computing, 2003 

[15-3] Münz, Stefan: . Addison-Wesley, 2005 

[15-4] Steyer, Ralph: JavaScript. Addison-Wesley, 2007 

[15-5] Steyer, Ralph: Das JavaScript Codebook. 2. Auflage, Addison-Wesley, 2005 

[15-6] Flanagan, David: JavaScript – Das umfassende Referenzwerk. O'Reilly, 6. 

Auflage, 2012 (1.200 Seiten) 

[15-7] Nix, Markus: Musterhaft - Design Patterns mit JavaScript. Linux Enterprise, 

1/2.2004, S.62-65 

[15-8] Stefanov, Stoyan: JavaScript Patterns. O'Reilly, 2011 

Webtechnologien - WS 2013/14 - Teil 15/JavaScript I 

2

Web – Literatur und Werkzeuge 

[W1] 

[W2] 

[W3] 

[W4] 

http://www.ecma-international.org/publications/files/ECMA-ST/Ecma- 

262.pdf 

http://de.wikipedia.org/wiki/JavaScript 

Zum Prüfen auf syntaktische Korrektheit: JSLint 

http://www.jslint.com 

Zum schnellen Testen: JavaScript Shell 

http://www.squarefree.com/shell 


3

Realisierung aktiver Inhalte 

Von 480.000 untersuchten Websites benutzten 2005: 

44,0% JavaScript 

6,0% Flash 

2,4% iframes 

1,5% Java-Applets 

0,3% VBScript 

Zitiert nach CT 9/2005, S. 93 

Dank Ajax und Bibliotheken wie JQuery ist der Anteil heute viel höher. 


4

Geschichte 

• Ursprünglich von Netscape ab 1995 entwickelt 

• Standardisiert durch die ECMA: 

ECMAScript in den Versionen 1 bis 3 und 5 

• Aktuelle Version: 1.8.5 

• Wie bei CSS gibt es bei den Browsern viele Inkompatibilitäten, 

besonders bei ECMAScript5 und HTML5 

• JS = JavaScript 

• JavaScript hat nichts mit Java zu tun... 

• Mit JS wird auf dem Browser aktiver Code ausgeführt. 

• Es gibt auch Server, die dies auch auf der Serverseite ausführen – 

dies wird hier nicht behandelt. 

• Auch Versionen von PDF haben JavaScript integriert. 


5

Versionen I 

Unterstützung der JavaScript-Versionen nach Browsern: 

JavaScript JScript Netscape Explorer Opera Firefox 

1.0 1.0 2.0 3.0 3.0 - 

1.1 2.0 3.0 3.0 3.0 - 

1.2 - 4.0 4.0, teilweise - 

1.3 3.0 4.05-4.7 5.0 5.0 - 

1.4 - ab 6.0 - 6.0 - 

- 5.0 5.0-6.0 - 

1.5 5.5 ab 6.0 ab 8.0 ab 7.0 ab 1.0 

1.6 - - ab 1.5 

1.7 - - ab 2.0 

1.8 - ab 9.0 ab 3.0 

Die Korrespondenzen innerhalb einer Zeile sind meist nur Ähnlichkeiten. 


6

Versionen II – ECMA 262 

• ECMAv1 entspricht JavaScript 1.3 und JScript 3.0 

• ECMAv2 ist eine redaktionelle Überarbeitung von ECMAv1 

• ECMAv3 entspricht JavaScript 1.5 

• ECMAv4 ist nie frei gegeben worden 

• ECMAv5.1 ist aktuell 

http://www.ecma-international.org/publications/files/ECMA- 

ST/Ecma-262.pdf 

• ECMAv6 ist in Arbeit 

In diesem Teil wird JavaScript in der Version 1.5 behandelt. 

Die aktuelle Version ist 1.8.5 von 2010. 

Siehe http://de.wikipedia.org/wiki/JavaScript 


7

Aufrufen und Einbinden I 

 

... JavaScript... 

 

 

 

 

 

• JavaScript kann innerhalb des Kopfes oder an beliebiger Stelle im Body stehen. 

• Die Statements werden innerhalb der Datei von vorn nach hinten ausgeführt. 

• Deklarationen sollten aber möglichst vorne im Kopf stehen. 

• Wenn die externe Dateiform benutzt wird, dürfen in der *.js-Datei keine HTML- 

Kommentare stehen. 


8

Bemerkungen 

• Vermeiden Sie einen leeren Inhalt bei den Tags, also nicht: 

 

schreiben. Schreiben Sie es so wie in der vorherigen Folie: 

 

 

• Das Type-Attribut kann weggelassen werden, der Defaultwert ist 

text/javascript. 

• Auch die Angabe von "JavaScript" kann weggelassen werden, da 

JavaScript der Default ist 

(dies sollte jedoch unterlassen werden). 


9

Aufrufen und Einbinden II – Alte Browser 

 

... JavaScript... 

 

• Müssen versionsspezifische Konstrukte benutzt werden, sollte die 

niedrigste, erforderliche Versionsnummer angegeben werden. Die 

Angabe der Version im SCRIPT-Tag führt dazu, dass der umschlossene 

Teil ab einschließlich der angegebenen Version ausgeführt wird. 

• Zwischen "JavaScript" und der Versionsangabe dürfen keine Blanks 

stehen. 

• Default ist die Version 1.0, wobei "JavaScript1.0" nicht angegeben 

werden sollte, da der Explorer damit nicht klar kommt. 

 

....Normaler HTML-Code... 

 

• Für Browser mit ausgeschaltetem JS kann JS-freier Code durch das 

noscript-Element geklammert werden. 


10

Aufruf über eine URL I - Adresszeile 

javascript: Name-Der-JS-Routine [Parameter] 

• Wenn als Protokoll in der Adresszeile "javascript" benutzt wird, rufen 

JavaScript-fähige Browser das in der URL angegebene Script auf - anstatt 

eine Seite zu laden. 

• Überall, wo in der Datei eine URL stehen kann, kann über diesen 

Mechanismus ein JS-Statement ausgeführt werden. 

Dies wird "Inline-Referenz" genannt. 

• Derselbe Mechanismus kann auch in Formularen beim action-Attribut 

benutzt werden. 

Beispiel: 

... Text ... 

Dies wird selten verwendet und sollte vermieden werden. 


11

Syntax 

• Bezeichner sind Groß-/Kleinschreibung-sensitiv. 

Bezeichner müssen mit einem Buchstaben beginnen, gefolgt von 

Buchstaben, Ziffer oder Unterstrich ("_"). 

• Bezeichner sollten kürzer als 32 Zeichen sein. 

• Reservierte Bezeichner können nicht umdefiniert werden und werden 

immer klein geschrieben. 

• Leerzeichen haben keine Bedeutung; wo ein Leerzeichen stehen 

kann, kann auch ein Zeilenende stehen. 

Aber: Ist der Rest auf einer Zeile ein gültiges, aber unvollständiges 

Statement, dann interpretieren die Browser dies fälschlicherweise als 

vollständig, 

d.h. jedes Statement vollständig in eine Zeile schreiben. 

• Kommentare 

– // bis zum Ende der Zeile wie in C++ und Java 

– /* ... */ über Zeilenenden hinweg 


12

Variablen, Typen und Zuweisungen 

var variable [= Expression] [, variable [= Expression] ...]; 

variable= Expression; 

• Variablen sollten deklariert werden; dies erfolgt ohne Typangabe. 

• Variablen müssen deklariert werden, wenn sie lokal zu einer Funktion sein 

sollen. 

• Es wird empfohlen immer alle Variablen zu deklarieren. 

• Der Typ einer Variablen ist der Typ der Daten auf der rechten Seite der 

zuletzt ausgeführten Zuweisung (wie in PHP). 

• Variablen können gleich bei der Deklaration einen Wert und damit einen 

Typ erhalten. 


13

Ganze Zahlen (integer und real) 

var dez= 16; 

var okt= 016; 

var hex= 0x16; 

var float= 1.6e4; 

// Oktal! 

• Die Typen von Zahlen werden wie in C/C++/Java behandelt: 

– "Normale" Darstellung: Dezimal 

– Vorlaufende 0: Oktal 

– Vorlaufendes 0x: Hexadezimal 

– Punkt und/oder Exponent ("e"): floating point 

• Floating Point-Variablen sind 64 bit lang 

(entspricht double in Java) 

• In JavaScript werden integer, float und double zu number zusammen 

gefasst, siehe dazu 

http://www.html-seminar.de/javascript-datentypen.htm. 


14

Zeichenketten (Strings) I 

var num= 1; 

var zeich= "1"; 

var char= '1'; 

(1) char= zeich+zeich; /* ergibt "11" */ 

(2) num= num+num; /* ergibt 2 */ 

(3) zeich= ""+num; /* ergibt "2" */ 

• Zeichenketten werden in einfache oder doppelte Anführungszeichen - 

jedoch nicht gemischt - eingeschlossen. 

• Die Operation "+" zwischen Strings setzt die Strings zusammen, 

während bei Zahlen addiert wird (also wie in Java). 

• Der Typ des Ausdrucks wird durch die Konvertierung bestimmt, siehe 

Zeile (3). Hier wird der numerische Wert in eine Zeichenkette 

konvertiert und mit dem leeren String verbunden. 


15

Zeichenketten (Strings) II - Typ 

Beispiel Ergebnis Typ 

" Bäume haben " + 8 " Bäume haben 8" String 

" Bäume haben " + 7*7 " Bäume haben 49" String 

7 + 6 +" Bäume haben " "13 Bäume haben " String 

" Bäume haben " + 4 + 8 " Bäume haben 48" String 

"7" * 8 56 Integer 

"7" + 8 "78" String 

Tipp: Lassen Sie alle Tricks! 


16

Zeichenketten (Strings) III 

Das Escape-Zeichen in Strings ist der Backslash "\": 

\n New Line 

\r Carriage Return (dieselbe Zeile) 

\t Horizontaler Tabulator vorwärts 

\f Form Feed: Seitenvorschub 

\b Backspace: eine Zeichenposition zurück 

\" " selbst 

\' 

' selbst 

\\ \ selbst 

\ooo Zeichen aus ISO 8859-1 mit drei Oktalziffern o 

\xhh Zeichen aus ISO 8859-1 mit zwei Hexadezimalziffern h 

\uhhhh Zeichen aus ISO 8859-1 mit vier Hexadezimalziffern h 


17

typeof-Operator 

Beispiel 

var ID= 7; 

typeof ID; 

var ID= "Hallo!"; 

typeof ID; 

var ID= false; 

typeof ID; 

Ergebnis von typeof 

"number" 

"string" 

"boolean" 

Um den aktuellen Typ eines Objekts herauszubekommen, wird der 

typeof-Operator benutzt. 

Darüber hinaus gibt es noch folgende Typen: 

(1) "function" 

(2) "object" 

(3) "undefined" als besonderer "Typ" 


18

Konstanten und Vergleichsoperatoren 

Konstanten 

true (wahr) 

false (falsch) 

Operator Bedeutung Bemerkungen 

== Gleichheit Wertgleichheit NACH Konvertierung 

!= Ungleichheit Ungleichheit NACH Konvertierung 

< Kleiner als 

> Größer als 

= Größer-gleich als 

=== Identität Wertgleichheit OHNE Konvertierung 

!== Nicht-Identität Ungleichheit OHNE Konvertierung 


19

Arithmetische Operatoren I 

Operator Erläuterung Beispiel Ergebnis 

+ Addition 2+2 4 

- Subtraktion 2-1 1 

* Multiplikation 2*3 6 

/ Division 16/4 4 

% Modulo 7%3 1 

++ Inkrement a= 10; 

a++ 

11 

-- Dekrement a= 10; 

--a 

9 


20

Arithmetische Operatoren II 

Statement Ergebnis Wert von a Wert von b 

a= 5; 

b= 1.5; 

a++ + b 6.5 6 1.5 

++a + b 8.5 7 1.5 

a-- + b 8.5 6 1.5 

--a + b 6.5 5 1.5 

Die Post-Operation wird am Ende des Statements ausgeführt, 

die Pre-Operation vor dem Auswerten des (Teil-)Ausdrucks. 


21

Logische und Bit-Operatoren 


&& Und/And true && false false 

|| Oder/Or true && false true 

! Nicht/Negation !True false 


& Bitweises Und 1010 & 0110 0010 

| Bitweises Oder 1010 | 0110 1110 

~ Bitweise Negation ~ 1010 0101 

^ Bitweises XOR 1010 ^ 0110 1100 

Rechtsshift 1010 >> 2 0010 

>>> Null-Füll-Rechtsshift 1010 >> 1 0101 


22

Bemerkung 

• Beim Rechtsshift um 1 bit gibt es zwei Möglichkeiten zur 

Behandlung des Vorzeichenbits: 

– Es wird das Vorzeichen-Bit verdoppelt. 

– Es wird als höchstes Bit eine 0 benutzt unabhängig vom alten 

Vorzeichenbit, was bedeutet, dass negative Zahlen positiv werden. 

Daher gibt es zwei Rechts-Shift-Operatoren. 

• Das niederwertigste Bit geht in jedem Fall verloren. 

Dies gilt genauso für C, C++, Java und PHP. 


23

Zuweisungen 


= Zuweisung A = 5 5 

+= Addition mit Zuweisung A +=5 10 

+= Anfügung mit Zuweisung B= "Schön" 

B += "heit" 

-= Subtraktion mit Zuweisung A -= 2 8 

*= Multiplikation mit Zuweisung A *= 2 16 

/= Division mit Zuweisung A /=4 4 

%= Modulo mit Zuweisung A %= 3 1 

&= Bit-Und mit Zuweisung A &= 3 1 

^= Bit-XOR mit Zuweisung A ^= 3 2 

|= Bit-Oder mit Zuweisung A |= 7 7 

= 2 12 

>>>= Null-Füll-Rechtsshift mit Zuweisung A >>>= 2 3 

"Schönheit" 


24

IF-Konstrukt I 

if (Bedingung) { 

... 

} else { 

... 

} 

if (Bedingung) { 

... 

} 

• Das IF-Konstrukt entspricht dem von C/C++/Java. 

• Die geschweiften Klammern können bei nur einem Statement im Block 

weggelassen werden (wovon dringend abgeraten wird). 

• Hinter jeder Anweisung innerhalb der Blöcke muss ein ";" stehen, 

nicht jedoch nach einem IF-Konstrukt. 

• Es gibt keine Zusammenfassungen geschachtelter Konstrukte wie elif 

o.ä. 


25

IF-Konstrukt II 

(condition) ? TruePart : FalsePart 

Beispiel: 

Zeit= '7 ' + (Zeit>12) ? 'PM': 'AM'; 

• Eine derartige IF-Konstruktion kann auch als Teil von Ausdrücken 

benutzt werden (wovon abgeraten wird). 

Dies gilt genauso für C, C++, Java und PHP. 


26

Switch-Konstrukt I 

switch(Expression) { 

case Const: ...; 

break; 

case Const: ...; 

break; 

default: ...; 

} 

switch(Tag) { 

case "Montag": ...; 

break; 

case "Dienstag": ...; 

break; 

default: ...; 

} 

• Dies entspricht dem von C/C++/Java, wobei die Art der Konstanten hinter 

dem case offener ist: es sind hier auch Strings erlaubt. 

• Const kann auch ein Ausdruck mit Konstanten sein. 

• Die Datentypen der Ausdrücke hinter dem case und dem anschließenden 

Doppelpunkt können bei den einzelnen Fällen unterschiedlich sein. 

• Das Switch wird in sequentieller Reihenfolge mit dem Ausdruck hinter dem 

switch, also der Expression mit der Identität === solange verglichen bis 

ein wahr heraus kommt. 


27

While-Schleife I 

while (Bedingung) { 

... 

} 

do { 

... 

} while (Bedingung); 

• Die Bedingung der while-Schleife wird initial geprüft und die Schleife 

solange durchlaufen bis die Bedingung falsch ist. 

• Die do-Schleife wird mindestens einmal durchlaufen; solange diese Prüfung 

den Wert True liefert, wird die Schleife erneut durchlaufen. 

• Das do-while-Konstrukt wird mit einem Semikolon abgeschlossen. Dies ist 

das einzige Kontrollkonstrukt mit einem Semikolon als Abschluss. 

• Das scheinbar überflüssige Semikolon stellt eine leere Anweisung dar. 


28

While-Schleife II 

 

var i= 0; 

while (i

For-Schleife I 

for (Init; Condition; Increment) { 

... 

} 

Das For-Konstrukt 

entspricht 

dem aus C/C++/Java. 

for (Variable in Objekt) { 

... 

} 

Die Schleife wird für jede 

Eigenschaft des Objektes 

durchlaufen. 

Für "for (Variable in Objekt) {...}" gibt es folgende Hinweise: 

• Die Reihenfolge der Schleifendurchläufe ist undefiniert. 

• Der Laufvariablen wird der Name des Attributes als String 

zugewiesen, nicht als Objekt. 

• Der Zugriff auf das Attribut selbst kann über das Objekt als 

assoziatives Array erfolgen: Objekt[Laufvariable]. 


30

For-Schleife II 

 

var i; 

for (i= 0; i

Break und Continue 

• In jeder For-/While-/Do-Schleife können break und continue 

benutzt werden: 

– Break: 

Die Schleife wird abgebrochen, alle Variablen behalten ihren 

augenblicklichen Wert. 

– Continue: 

Es wird unmittelbar zum internen Schleifenende gesprungen und 

die Abbruchbedingung geprüft. 

• Beide Konstrukte haben dieselbe Bedeutung wie in C/C++ und 

Java. 


32

Eine Ausnahme werfen... 

throw Ausdruck; 

Eine Ausnahme signalisieren. 

try { 

} 

...Anweisungen... 

Block mit Anweisungen, deren 

Ausnahmen behandelt werden 

catch(Variable) { 


} 

finally { 


} 

Die Nummer der Ausnahme wird der 

Variablen zugewiesen und die 

Anweisungen ausgeführt. 

Block mit Anweisungen, die immer 

nach try/catch ausgeführt werden 

Entweder wird catch oder finally benutzt, aber immer eins von 

beiden. 


33

Prozeduren und Funktionen 

function Name([Parameterliste]) { /* Deklaration */ 

... 

} 

... 

Name([Parameterliste]); /* Aufruf */ 

... 

function Name([Parameterliste]) { /* Deklaration */ 

... 

return Expression; 

} 

.... 

Variable= Name([Parameterliste]); /* Aufruf */ 

• Zwischen Prozeduren und Funktionen besteht nur der Unterschied, dass 

letztere ein return haben. 

• Parameterlisten können deklariert werden. 

• Parameterlisten können von Aufruf zu Aufruf unterschiedlich lang sein. 


34

Funktionen I - Beispiele 

function Mod(Wert,Divi) { /* Deklaration */ 

Resultat= Wert%Divi; /* nicht deklariert */ 

return Resultat; 

} 

value= Modu(23,7); /* Aufruf */ 

function Modulo(Wert,Divi) { 

if (Divi==0) { 

return undefined; /* Schlüsselwort */ 

} else { 

Resultat= Wert%Divi; 

return Resultat; 

} 

} 

value= Modulo(23,7); 


35

undefined und null 

• undefined ist der Wert einer angelegten Variablen, der noch nie 

etwas zugewiesen wurde (entspricht dem NULL in PHP). 

• Die Abfrage auf undefined sieht z.B. so aus: 

if (x==undefined) { 

... x hat undefined als Wert ... 

} 

• Werden nicht-existente Objekteigenschaften abgefragt, wird 

undefined geliefert. 

• null ist der Wert eines Objekts, das keinerlei Werte irgendeines 

Typs enthält. 


36

Funktionsreferenz I 

function plus(a,b) { 

return a+b; 

} 

function minus(a,b) { 

return a-b; 

} 

var sum= plus(2,3); 

var op= plus; // Referenz auf plus() 

sum= op(2,3); // Aufruf von plus(2,3) 

op= minus; 

sum= op(2,3); // welchen Wert hat sum? 

• Wird der Name einer Routine ohne "()" benutzt, so ist damit eine 

Referenz auf die Funktion gemeint, also dessen Adresse. 


37

Funktionsreferenz II - Das Beispiel dazu 

function plus(a,b) { 

return a+b; 

} 

function minus(a,b) { 

return a-b; 

} 

... 

var sum= plus(2,3); 

document.write("plus(2,3)="+sum+""); 

var op= plus; 

sum= op(2,3); 


op= minus; 

sum= op(2,3); 


plus(2,3)=5 

plus(2,3)=5 

plus(2,3)=-1 


38

Zugriff auf Argumente 

function q1(val) { 

return val*val; 

} 

function q2() { 

return arguments[0]*arguments[0]; 

} 

• Alle beim Aufruf übergebenen Argumente werden in einem Array 

Namens arguments[] mit der Länge arguments.length abgelegt. 

• Der Index des ersten Parameters ist 0. 

• Die beiden Beispiele sind gleichwertig. 

• Mit diesem Array können dynamisch viele Parameter verarbeitet 

werden. 


39

Deklarationen I 

• Es gibt globale und lokale Variablen. 

• Lokale Variablen werden innerhalb Funktionen deklariert und verdecken 

globale gleichen Namens. 

• Deklarierte Parameter werden wie lokale Variablen behandelt. 

var p= 10; 

var q= 10; 

var r= 10; 

function fun(r,s,t) { 

var p= 9; 

r= 2; 

} 

fun(q,20,30); 

var s= p+q+r; /* 9+10+10 oder 10+10+10 ? */ 

Mit der lokalen Deklaration von p würde s den Wert 29 erhalten, sonst 30. 


40

Deklarationen II 

 

JS-Test2 

 

 

var p= 10; 

var q= 10; 

var r= 10; 

function ff(r,s,t) { 

var p= 9; 

r= 2; 

} 

document.write(p+" "+q+" "+r+""); 

ff(q, 20, 30); 

document.write(p+" "+q+" "+r+""); 

var s= p+q+r; 

document.write(s); 

 


41

Deklarationen III 

Die Parameter werden call by value übergeben; 

daher hat die Zuweisung an Variable r innerhalb von fun() 

keinen Effekt auf irgendetwas im aufrufenden Teil. 

Es gibt also zwei Gründe zum Deklarieren (Ein Muss!): 

• Deklaration als Parameter ohne Typangabe 

• Deklaration einer lokalen Variablen ohne Typangabe 


42

Vordefinierte Funktionen (Auszug) I 

Funktion 

eval(String) 

IsNaN(Expression) 

IsFinite(Expression) 

parseFloat(String) 

parseInt(String) 

Erläuterung 

Interpretiert den String als JavaScript und liefert das 

Ergebnis 

Testet den Wert, ob er keine Zahl ist 

Testet den Wert, ob er innerhalb des Zahlenbereichs liegt 

Wandelt String in Float um 

Liefert NaN, wenn String mit einem nicht-numerischen Wert 

beginnt (NaN = Not a Number) 

Ist ein derartiges Zeichen innerhalb der Zahl, dann wird der 

bis zu diesem Zeichen bestimmte Wert zurückgeliefert. 

Wandelt String in Integer um, 

Es gelten dieselben Bemerkungen wie bei parseFloat() 


43

Vordefinierte Funktionen II 

var x= "6"; 

var y= "6.777"; 

var z= x+y; 

document.writeln(z); 

z= parseInt(x)+parseFloat(y); 

document.writeln(z); 

Es wird "66.777" gefolgt von "12.777" ausgegeben. 


44

Objektorientierung 

• In JavaScript wird nur von Objekten gesprochen. Es gibt keine 

Klassen (jedenfalls im Sinne von Java). 

• In JavaScript gibt es also nur Objekte. 

• Eigenschaften und Methoden werden nicht wie z.B. in Java/C++ 

vor der Erzeugung deklariert, sondern dynamisch den Objekten 

Stück für Stück zugewiesen. 

• Die Objekte werden daher Stück um Stück aufgebaut. 

Eine Definition einer Klasse gibt es nicht. 

• Dadurch können Objekte, die ursprünglich vom "gleichen Typ" 

waren, unterschiedliche Eigenschaften haben. 

• Dies gilt auch für Methoden eines Objekts. 


45

Klassen-Konstruktor I 

function KlassenName([Param1, Param2,..]) { // Konstruktor 

this.Attribut1= Param1; // neues Attribut 

this.Attribut2= Param2; // neues Attribut 

... 

} 

var obj= new KlassenName([Param1, Param2,..]); 

... 

• Ein Objekt wird mit einer Konstruktor-Funktion und dem Operator new 

definiert, die denselben Namen wie die gedachte Klasse hat. 

• Also Objekte, die mit derselben Funktion per new erzeugt wurden, bilden 

dadurch die Exemplare einer gemeinsamen fiktiven Klasse. 

• Das Schlüsselwort this verweist auf das eigene Objekt. 

• Die Attribute werden durch die Zuweisungen über this Stück für Stück 

definiert. 


46

Klassen-Konstruktor II 

function Person(vor,nach) { /* Konstruktor */ 

this.vorname= vor; 

this.nachname= nach; 

} 

... 

var king= new Person("Gustav","Adolf"); /* Generierung */ 

var vn= king.vorname; 

var nn= king.nachname; 

King.nachname= nn+" der Zweite";/* König von Schweden 1594–1632 */ 

... 

• Mit der Punkt-Schreibweise wird auf die Komponenten, hier die 

Attribute, des Objekts zugegriffen. 

• Alle so erzeugten Attribute sind lokal zum Objekt. 


47

Hinweise 

• Neue Attribute können dynamisch, also auch NACH der 

Erzeugung des Objekts hinzugefügt werden, so dass sich 

Objekte, die von der selben Konstruktorfunktion "abstammen", 

strukturell unterscheiden. 

• Es sollten Namenskonventionen eingehalten werden, z. B. dass 

Objektnamen mit kleinen Buchstaben beginnen und 

Konstruktorfunktionen mit großen. 

• Eine Vererbung, so wie in Java, gibt es nicht. Mit Hilfe des 

Prototype-Konstrukts lässt sich so etwas wie Vererbung 

nachbauen. 


48

Beseitigung von Objekten und Attributen 

var str= new string("Das ist aber ein langer String."); 

... 

delete str; /* str hat nun den Wert undefined */ 

• Mit delete lassen sich Objekte, die mit new erzeugt wurden, 

beseitigen. 

Dies gilt auch für Attribute von Objekten: 

• Mit delete lassen sich aber auch Attribute löschen, z.B. 

delete obj.Nachname 


49

Abfrage nach der Existenz von Attributen 

if ("Attribut" in Objekt) { ... Objekt.Attribut ... } 

if ("Vorname" in kaiser) { 

kaiser.Vorname= "Ferdinand"; 

} 

• Da dynamische Attribute erzeugt und gelöscht werden können, ist eine 

Möglichkeit erforderlich, mit der der aktuelle Zustand des Objektes 

abgefragt werden kann: in. 


50

Methoden I 

function kroenung() { 

document.write("Ab heute ist er's!"); 

} 

function Person(vor,nach) { 

this.vorname= vor; 

this.nachname= nach; 

this.abWann= kroenung; /* Funktionsreferenz */ 

} 

var king= new Person("Gustav","Adolf") /* Generierung */ 

king.abWann(); 

document.write(kroenung); /* ??? */ 

Output: 

Ab heute ist er's! 

function kroenung() { document.write("Ab heute ist er's! 

"); } 


51

Methoden II 

• Methoden werden wie Attribute behandelt. 

• Die vorletzte Zeile gibt "Ab heute ist er's!" aus. 

• Die letzte Zeile gibt den Source-Code von kroenung() aus: 

"function kroenung() { document.write("Ab heute ist 

er's!...");}„ 

• In der Zeile mit " this.abWann" muss Kroenung ohne Klammern 

angegeben werden, da sonst nicht der gelieferte Wert 

zugewiesen wird. 


52

Arrays I 

var ArrayName= new Array(Size); 

... 

ArrayName[0]= ...; 

...= ArrayName[1]...; 

• Es lassen nur 1-dimensionale Felder deklarieren und erzeugen. 

Mehrdimensionale müssen schrittweise aufgebaut werden. 

• Die Indices beginnen immer bei 0 und enden bei Size-1, also wie bei 

C/C++/Java. 

• Die Eigenschaft length liefert die Anzahl der Elemente, d.h. der Index 

läuft von 0 bis ArrayName.length-1. 

• Statt Size kann bei Array auch eine Liste angegeben werden, wobei das 

Feld so lang wird wie die Liste Elemente hat; dann werden die Array- 

Elemente mit den Listenwerten in der angegebenen Reihenfolge 

versehen – wie in PHP. 


53

Arrays II 

var Suess= new Array(4); 

Suess[0]= "Schokolade"; 

Suess[1]= "Bonbon"; 

Suess[2]= "Eis"; 

Suess[3]= "Lutscher"; 

var Suess= new Array("Schokolade","Bonbon","Eis","Lutscher"); 

var Suess= ["Schokolade","Bonbon","Eis","Lutscher"]; 

• Alle drei Formen sind äquivalent. 

• Ein new von einem Array mit einem Integer-Parameter erzeugt ein leeres 

Feld mit der angegebenen Anzahl von Elementen. 

• Ein Array mit einer Liste von Werten, auch unterschiedlichen Typs, 

erzeugt ein Feld mit den angegebenen dadurch vorbelegten Elementen. 


54

Mehrdimensionale Felder 

for(var i= 0;i

Implementierung der Objekte I 

Objekte sind intern als assoziative Arrays implementiert. 

var 

obj= new Object();// Objekt ohne Eigenschaften 

obj.x= 10; // Erzeugen einer neuen Eigenschaft 

obj.y= 20; // dasselbe 

obj["x"]= 15; // Alternative Schreibweise 

obj["y"]= 25; 

obj.sum= obj["x"]+obj.y; 

var obj= { x:10, y:20, sum:30 }; 

Das letzte Beispiel zeigt eine Objekt-Kodierung im JSON-Format. 


56

Implementierung der Objekte II 

• Mit der Funktion Object() lassen sich leere Objekte erzeugen. 

• Ein impliziter Aufruf von Object() erfolgt bei der Benutzung des JSON- 

Formats. 

var obj= { x:10, y:20, sum:30 }; 

var obj= new Object; 

obj.x= 10; 

obj.y= 20; 

obj.sum= 30; 

Beide Beispiele sind äquivalent. 


57

Noch einmal zu den Arrays 

• Arrays sind spezialisierte Formen von Objekten. 

• D.h. es können auch Attribute ausgelesen und zugewiesen 

werden, ohne dass es Probleme gibt. 

• Der Index muss zwischen 0 und 2**32 -1 liegen. 

• Der Längeneigenschaft eines Feldes length kann auch ein Wert 

zugewiesen werden; dann passiert folgendes: 

– Ist der Wert größer als die augenblickliche Länge, wird das Feld 

vergrößert. 

– Ist der Wert kleiner als die augenblickliche Länge, wird das Feld 

verkleinert einschließlich eines Datenverlustes. 


58

Prototypen I 

Konstruktor.prototype.Attribut= Ausdruck; 

Konstruktor.prototype.Methode= Funktion; 

• Methode ist der Name einer Methode, während Funktion eine 

Funktionsreferenz ist. 

• Zu jedem Konstruktor gibt es ein internes Objekt (prototype), das bei 

einem new() mit dem generierten Objekt verbunden ist. 

• Alles, was dem Objekt zugewiesen ist, ist lokal zu dem Objekt. 

• Alles, was dem Prototyp zugewiesen ist, ist global zu allen davon 

generierten Objekten. 

Dies gilt auch NACH der Erzeugung eines Objektes. 


59

Prototypen II 

Attr1 

Attr2 

Attr3 

… 

AttrN 

Prototype 

Attr1 

Attr2 

… 

AttrN 

Attr1 

Attr1 

Attr2 

… 

AttrN 

Attr1 

Attr2 

Objekt1 Objekt2 Objekt3 Objekt4 


60

Prototypen III 

• Es besteht damit eine Verbindung (Pointer) zwischen dem Prototyp- 

Objekt und dem eigentlichen Objekt (new) derart, 

– dass eine Erzeugung eines Attributs beim Objekt ein Attribut gleichen 

Namens im Prototyp-Objekt überdeckt. 

– dass eine Erzeugung eines Attributs beim Prototyp für alle bisherigen 

und zukünftigen Objekte ein neues Attribut definiert, es sei denn dieser 

Attributname ist in den jeweiligen Objekten schon definiert - dann 

überdeckt diese Definition die aus dem Prototyp. 

• Dies ist die Basis für einen Nachbau der Vererbung. 

• Wenn im Prototyp wiederum ein mit new() erzeugtes Objekt 

eingefügt wird, entsteht ein Verweis auf dessen Prototyp, so dass 

dessen Eigenschaften "vererbt" werden. 


61

Prototypen IV - Anwendungen 

• Die Prototypen dienen zur Definition von Methoden, die nur 

einmal zugewiesen werden brauchen, anstatt jeweils nach 

einem new(). 

• Damit korrespondierend werden im Prototypen auch die 

Attribute, die in den Methoden benutzt werden, definiert. 

• In den Konstruktoren werden die "globalen" (also im Prototyp 

definierten) Attribute vorbelegt und damit lokal zu dem Objekt 

gemacht. 

• M.a.W. die "static"-Attribute liegen im Prototyp, die lokalen im 

Objekt. 

• Von einem dynamischen Zusammenbau von Objekten 

wird abgeraten. 


62

Nach dieser Anstrengung etwas Entspannung... 


63

Webtechnologien Teil 15: JavaScript - Teil I

Sie wollen auch ein ePaper? Erhöhen Sie die Reichweite Ihrer Titel.

Template löschen?

Als Template speichern?