Webtechnologien Teil 11: JavaScript - Teil...

18.12.19 1Webtechnologien - WS 2019/20 - Teil 11/JavaScript I

Webtechnologien

Teil 11: JavaScript - Teil I

2Webtechnologien - WS 2019/20 - Teil 11/JavaScript I

Literatur

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

[11-2] Lubkowitz, Mark: Webseiten programmieren und gestalten. Galileo Computing, 2003

[11-3] Münz, Stefan: <Professionelle Websites>. Addison-Wesley, 2005

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

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

[11-6] Flanagan, David: JavaScript – Das umfassende Referenzwerk. O'Reilly, 6. Auflage, 2012 (1.200 Seiten)

[11-7] Nix, Markus: Musterhaft - Design Patterns mit JavaScript. Linux Enterprise, 1/2.2004, S.62-65

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

[11-9] http://eloquentjavascript.net/

[11-10] http://www.fh-wedel.de/~si/seminare/ws07/Ausarbeitung/11.javascript/


Web – Literatur und Werkzeuge

[W1] http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

[W2] http://de.wikipedia.org/wiki/JavaScript

[W3] Zum Prüfen auf syntaktische Korrektheit: JSLinthttp://www.jslint.com

[W4] Zum schnellen Testen: JavaScript Shellhttp://www.squarefree.com/shell

[W5] Editoren zum schnellen Ausprobierenhttps://js.do/ https://jsfiddle.net/


Geschichte

• Ursprünglich von Netscape ab 1995 entwickelt

• Standardisiert durch die ECMA

• Aktuelle Versionen: 1.8.5 (2010) und 5.1 bzw. 6 (2015)

• Wie bei CSS gibt es bei den Browsern Inkompatibilitäten, besonders bei ECMAScript5/6 und HTML5

• JS = JavaScript

• JavaScript hat nichts mit Java zu tun...

• Mit JS wird im Browser aktiver Code ausgeführt.

• Es gibt auch Server, die dies auf der Serverseite ausführen – dies wird hier nicht behandelt.

• Auch Versionen von PDF haben JavaScript integriert.


Versionen – 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 und realisiert:http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

• ECMAv6 seit Juni 2015 fertig– http://www.ecma-international.org/ecma-262/6.0/ECMA-262.pdf

– http://tc39.github.io/ecma262/#sec-let-and-const-declarations

• Version 7 wird derzeit erarbeitet.

In diesem Teil wird JavaScript in der Version 1.8.5 behandelt.


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 komplettieren einige Browser dies fälschlicherweise,d.h. jedes Statement vollständig in eine Zeile schreiben.

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

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


Aufruf über eine URL oder Inline-Referenz

• Wenn als Protokoll in der Adresszeile "javascript" benutzt wird, rufen die 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 JavaScript-Statement ausgeführt werden.Dies wird "Inline-Referenz" genannt.

• Derselbe Mechanismus kann auch in Formularen beim action-Attribut benutzt werden.

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

Beispiel:

<a href="javascript:alert('blabla');">... Text ... </a>

Dies sollte vermieden werden.


Variablen, Typen und Zuweisungen

• Variablen sollten deklariert werden; dies erfolgt ohne Typangabe durch var.

• Variablen müssen deklariert werden, wenn sie lokal zu einer Funktion sein sollen. Dies ist in PHP anders!

• Parameter von Funktionen müssen auch deklariert werden.

• 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.

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

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

variable= Expression;


Ganze Zahlen (integer und real)

• 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)

• Es werden integer, float und double zum Typ number zusammen gefasst.

• Intern wird nur double implementiert, d.h. es gibt intern keine Integer-Werte.

var dez= 16;var okt= 016; // Oktal!var hex= 0x16;var float= 1.6e4;


Zeichenketten (Strings) I

• 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 (6). Hier wird der numerische Wert in eine Zeichenkette konvertiert und mit dem leeren String verbunden.

(1) var num= 1;(2) var zeich= "1";(3) var char= '1';

(4) char= zeich+zeich; /* ergibt "11" */(5) num= num+num; /* ergibt 2 */(6) zeich= ""+num; /* ergibt "2" */


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!


Zeichenketten (Strings) III

\n New Line

\r Carriage Return (dieselbe Zeile)

\t Tabulator vorwärts

\f Form Feed: Seitenvorschub

\b Backspace: eine Zeichenposition zurück

\" " selbst

\' ' selbst

\\ \ selbst

\xhh Zeichen aus Latin-1 (ISO 8859-15) mit zwei Hexziffern h

\uhhhh Zeichen aus Unicode mit vier Hexadezimalziffern h

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


typeof-Operator

Beispiel Ergebnis von typeof

var ID= 7;

var typ= typeof ID;

"number"

var ID= "Hallo!";

var typ= typeof ID;

"string"

var ID= false;

var typ= typeof ID;

"boolean"

Um den aktuellen Typ eines Objekts herauszubekommen, wird der typeof-Operator benutzt, er bestimmt aber nicht den Typ. Dies erfolgtdurch eine Zuweisung.

Darüber hinaus gibt es noch folgende Typen: (1) "function"(2) "object"(3) "undefined" als besonderer "Typ"


Konstanten und Vergleichsoperatoren

Operator Bedeutung Bemerkungen

== Gleichheit Wertgleichheit NACH Konvertierung

!= Ungleichheit Ungleichheit NACH Konvertierung

< Kleiner als

> Größer als

<= Kleiner-gleich als

>= Größer-gleich als

=== Identität Wertgleichheit OHNE Konvertierung

!== Nicht-Identität Ungleichheit OHNE Konvertierung

Konstantentrue (wahr)false (falsch)


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


Arithmetische Operatoren II

Statement Ergebnis Wert von a Wert von b

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.

a= 5; b= 1.5;


Logische Operatoren


&& Und/And true && false false

|| Oder/Or true || false true

! Nicht/Negation !true false


Zuweisungen


= Zuweisung A = 5 5

+= Addition mit Zuweisung A +=5 10

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

"Schönheit"

-= Subtraktion mit Zuweisung A -= 2 8

*= Multiplikation mit Zuweisung A *= 2 16

/= Division mit Zuweisung A /=4 4

%= Modulo mit Zuweisung A %= 3 1


IF-Konstrukt I

• 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.ä.

if (Bedingung) {...

} else {...

}

if (Bedingung) {...

}


IF-Konstrukt II

• 0 bis 11 entspricht 1 bis 12 AM, 12 bis 24 entspricht 1 bis 12 PM.

• Eine derartige IF-Konstruktion kann auch als Teil von Ausdrücken benutzt werden (wovon abgeraten wird).

(condition) ? TruePart : FalsePart

Beispiel:

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

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


Switch-Konstrukt I

• 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.

switch(Expression) {case Const: ...;break;case Const: ...;break;default: ...;

}

switch(Tag) {case "Montag": ...;break;case "Dienstag": ...;break;default: ...;

}


While-Schleife I

• 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 die Prüfung der Bedingung 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.

while (Bedingung) {...

}

do {...

} while (Bedingung);


While-Schleife II

<script> var i= 0; while (i<7) { document.write("hi"); i++; }</script>

• Dieses JavaScript-Stück gibt "hihihihihihihi" aus.

• document.write() hat dieselbe Bedeutung wie write() in C bzw. system.out.write() in Java.


For-Schleife I

for (Init; Condition; Increment) {...

}

Das For-Konstruktentsprichtdem aus C/C++/Java.

for (Variable in Objekt) {...

}

Die Schleife wird für jedeEigenschaft des Objektesdurchlaufen.

• 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].

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


For-Schleife II

<script> var i; for (i= 0; i<3; i++) { document.writeln("hallo <br>"); }</script>

• Dieses JavaScript-Stück gibt 3 Zeilen mit einem "hallo" aus.

• document.writeln() hat dieselbe Bedeutung wie write() in Cgefolgt von einem Newline ('\n'), was in HTML keine Bedeutung hat.

• Wenn mit document.write(ln) Tags ausgegeben werden, so werden sie danach als HTML-Konstrukte durch den Browser interpretiert.

• Bei allen for-Schleifen lässt sich die Laufvariable per var deklarieren:

for (var Variable; Condition; Increment) { ...

for (var Variable in Objekt) { ...


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.


Eine Ausnahme werfen...

throw Ausdruck;

try { ...Anweisungen...}

catch(Variable) { ...Anweisungen...}

finally { ...Anweisungen...}

Eine Ausnahme signalisieren.

Block mit Anweisungen, derenAusnahmen behandelt werden

Die Nummer der Ausnahme wird derVariablen zugewiesen und dieAnweisungen ausgeführt.

Block mit Anweisungen, die immernach try/catch ausgeführt werden


Prozeduren und Funktionen I

• Zwischen Prozeduren und Funktionen besteht nur der Unterschied, dass letztere ein return haben.

• Parameterlisten sollten deklariert werden, müssen aber nicht.

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

function Name([Parameterliste]) { ...}...Name([Parameterliste]);...

function Name([Parameterliste]) {...return Expression;

}....Variable= Name([Parameterliste]);

Deklaration

Aufruf

Deklaration

Aufruf


Prozeduren und Funktionen II - Beispiele

function Mod(Wert,Divisor) { var Resultat= Wert%Divisor; return Resultat;}

value= Mod(23,7);

function Modulo(Wert,Divisor) { if (Divi==0) { return undefined; } else { var Resultat= Wert%Divisor; return Resultat; }}

value= Modulo(23,7);


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:

x= fun(....); 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.


function plus(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?

Funktionsreferenz I

• Wird der Name einer Routine ohne "()" benutzt, so ist damit eine Referenz auf die Funktion gemeint, also deren Adresse.

function minus(a,b) {return a-b;

}


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+"<br>");var op= plus;sum= op(2,3);document.write("plus(2,3)="+sum+"<br>");op= minus;sum= op(2,3);document.write("plus(2,3)="+sum+"<br>");

plus(2,3)=5plus(2,3)=5plus(2,3)=-1


Funktionsreferenz III – Anonyme Funktionen

(01) var f= function(text) {(02) document.write('<p>'+text+'<p>');(03) };(04) f('Hallo world');(05) var glob= 'Global';(06) var c= function() {(07) document.write('<p>'+glob+'<p>');(08) };(09) glob= 'Bye world';(10) f= c;(11) f();

Hallo world

Bye world

• Anonyme Funktionen sind Funktionen ohne Namen, die als Werte fungieren (Funktionsreferenzen), hier (01-03) bzw. (06-08).

• In (10) wird die Funktionsreferenz der Variablen f zugewiesen.


Zugriff auf Argumente

• 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.

• Beide Beispiele sind gleichwertig.

• Mit diesem Array können dynamisch viele Parameter verarbeitet werden.

• Parameter können Defaultwerte haben: Zuweisung in der Deklaration, z. B. function q1(val= 1) { ... }

function q1(val) { return val*val;}

function q2() { return arguments[0]*arguments[0];}


Deklarationen I

• Es gibt globale und lokale Variablen.• Lokale Variablen werden innerhalb Funktionen deklariert und

verdecken globale gleichen Namens. Globale Variablen werden wie in Java einfach benutzt.

• Deklarierte Parameter werden wie lokale Variablen behandelt.

var p= 8; var q= 9; var r= 10; function fun(r,s,t) { var p= 99; q= 2; r= 0; } fun(q, 20, 30); var s= p+q+r;

Welche Werte haben am Ende p, q und r?


Deklarationen II

<script language="JavaScript"> var p= 8; var q= 9; var r= 10; function fun(r,s,t) { var p= 99; q= 2; r= 0; } document.write(p+" "+q+" "+r+"<br>"); fun(q, 20, 30); document.write(p+" "+q+" "+r+"<br>"); var s= p+q+r; document.write(s);</script>


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.

• Deklaration als Parameter ohne Typangabe

• Deklaration einer lokalen Variablen ohne Typangabe

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

In PHP ist dies ein bisschen anders!


Objektorientierung?

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

• 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. Erst ab Version 6.

• Dadurch können Objekte, die ursprünglich vom "gleichen Typ" waren, unterschiedliche Eigenschaften haben.

• Dies gilt auch für Methoden eines Objekts.


Objekt-Konstruktor I

• 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.

function KlassenName([Param1, Param2,..]) { // Konstruktorthis.Attribut1= Param1; // neues Attributthis.Attribut2= Param2; // neues Attribut...

}

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


Objekt-Konstruktor II

• Mit der Punkt-Schreibweise wird auf die Komponenten, hier die Attribute, des Objekts zugegriffen.

• Alle so erzeugten Attribute sind lokal zum Objekt.

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...


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 können.

• 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.Siehe dazu: http://www.w3schools.com/js/js_object_prototypes.asp


Beseitigung von Objekten und Attributen

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

• Dies gilt auch für Attribute als Teile von Objekten:

Mit delete lassen sich auch Attribute in Objekten löschen, z.B.

delete obj.Nachname

var str= new String("Das ist ein langer String.");...delete str; /* str hat nun den Wert undefined */


Abfrage nach der Existenz von Attributen

• Da Attribute dynamisch erzeugt und gelöscht werden können, gibt es die Möglichkeit, den aktuellen Zustand des Objektes abzufragen: in.

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

if ("Vorname" in kaiser) {kaiser.Vorname= "Ferdinand";

}


Methoden I

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

}function Person(vor,nach) {

this.vorname= vor;this.nachname= nach;this.abWann= kroenung; // Funktionsreferenz

}var king= new Person("Gustav","Adolf");king.abWann();

Ab heute ist er's!

Output:Die letzte Zeile gibt"Ab heute ist er's!" aus.


Methoden II

• Methoden werden wie Attribute behandelt.

• In der Zeile mit " this.abWann" muss Kroenung ohne Klammern angegeben werden; mit Klammern würde die Routine aufgerufen und deren Wert dem Attribut zugewiesen werden.


Zusammenbau von Objekten I

var obj= new Object();// Objekt ohne Eigenschaften obj.x= 10; // Erzeugen eines neuen Attributs 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 einen Objekt-Wert im JSON-Format.

Objekte sind intern als assoziative Arrays (Java: Maps) implementiert.


Zusammenbau von Objekten 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.


Arrays I

• 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(Zeile 1) 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.

(1) var ArrayName= new Array(Size);(2) ...(3) ArrayName[0]= ...;(4) ...= ArrayName[1]...;


Arrays II

• 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.

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"];


Arrays III

• Arrays sind spezialisierte Formen von Objekten, d.h. es können auch Attribute ausgelesen und zugewiesen werden.

• 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 mit einem Datenverlust verkleinert.


Mehrdimensionale Felder

for(var i= 0;i<Limit;i++) { Feld[i]= new Array(10);}

Hier wird eine Matrix zusammengebaut.Die Elemente werden dann mit Feld[x][y] angesprochen.

• Mehrdimensionale Felder müssen Dimension für Dimension z.B. in einer For-Schleife zusammengebaut werden, indem jeweils ein neues Array als Wert einer Array-Zelle zugewiesen wird.

• Dies kann beliebig tief erfolgen.

• Die Länge der Elemente der 2. und folgenden Dimension können wie ihr Typ unterschiedlich sein.


Nach dieser Anstrengung etwas Entspannung...

Webtechnologien Teil 11: JavaScript - Teil...

Documents

Transcript of Webtechnologien Teil 11: JavaScript - Teil...