Webtechnologien Teil 15: JavaScript

Transcription

Webtechnologien
Teil 15: JavaScript - Teil I
Webtechnologien - WS 2015/16 - Teil 15/JavaScript I
04.12.15 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: <Professionelle Websites>. 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
2
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: JSLint
http://www.jslint.com
[W4]
Zum schnellen Testen: JavaScript Shell
http://www.squarefree.com/shell
3
Geschichte
• Ursprünglich von Netscape ab 1995 entwickelt
• Standardisiert durch die ECMA:
ECMAScript in den Versionen 1 bis 3 und 5
Die Version 6 ist in Arbeit.
• Aktuelle Version: 1.8.5 (2010)
• Wie bei CSS gibt es bei den Browsern 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.
4
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
http://www.ecma-international.org/publications/files/ECMAST/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
5
Aufrufen und Einbinden I
<script language="JavaScript">
... JavaScript...
</script>
<script language="JavaScript" src=URL type="application/x-javascript">
</script>
<script language="JavaScript" src=URL type="text/javascript">
</script>
•
•
•
•
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 möglichst vorne im Kopf stehen. Die Deklarationen
benutzende Befehle sollten möglichst hinten in der HTML-Datei stehen.
Wenn die externe Dateiform benutzt wird, dürfen in der *.js-Datei keine HTMLKommentare stehen.
6
Aufrufen und Einbinden II – Alte Browser
<script language="JavaScript1.2">
... JavaScript...
</script>
•
•
•
Müssen versionsabhängige 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 Leerzeichen
stehen.
Default ist die Version 1.0, wobei "JavaScript1.0" nicht angegeben
werden sollte, da der Explorer damit nicht klar kommt.
<noscript>
....Normaler HTML-Code...
</noscript>
•
Für Browser mit ausgeschaltetem JS kann JS-freier Code durch das
noscript-Element geklammert werden.
7
Aufruf über eine URL
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 JavaScript-Statement ausgeführt werden.
Dies wird "Inline-Referenz" genannt.
Derselbe Mechanismus kann auch in Formularen beim action-Attribut
benutzt werden.
Beispiel:
<a href="javascript:alert('blabla');">... Text ... </a>
Dies wird selten verwendet und sollte vermieden werden.
8
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
9
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.
10
Ganze Zahlen (integer und real)
var
var
var
var
•
•
•
dez=
16;
okt=
016;
hex=
0x16;
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 zum Typ number
zusammen gefasst, siehe dazu
http://www.html-seminar.de/javascript-datentypen.htm.
11
Zeichenketten (Strings) I
var num= 1;
var zeich= "1";
var char= '1';
(1) char= zeich+zeich;
(2) num= num+num;
(3) zeich= ""+num;
•
•
•
/* ergibt "11" */
/* ergibt 2
*/
/* 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.
12
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!
13
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
14
typeof-Operator
Beispiel
Ergebnis von typeof
var ID= 7;
typeof ID;
"number"
var ID= "Hallo!";
typeof ID;
"string"
var ID= false;
typeof ID;
"boolean"
Um den aktuellen Typ eines Objekts herauszubekommen, wird der
typeof-Operator benutzt, er bestimmt aber nicht den Typ. Dies erfolgt
durch eine Zuweisung.
Darüber hinaus gibt es noch folgende Typen:
(1) "function"
(2) "object"
(3) "undefined" als besonderer "Typ"
15
Konstanten und Vergleichsoperatoren
Konstanten
true (wahr)
false (falsch)
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
16
Arithmetische Operatoren I
Operator
Erläuterung
Beispiel
2+2
Ergebnis
+
Addition
-
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
4
17
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
a= 5;
b= 1.5;
Die Post-Operation wird am Ende des Statements ausgeführt,
die Pre-Operation vor dem Auswerten des (Teil-)Ausdrucks.
18
Logische Operatoren
Operator
Erläuterung
Beispiel
Ergebnis
&&
Und/And
true && false
false
||
Oder/Or
true && false
true
!
Nicht/Negation
!true
false
19
Zuweisungen
Operator
Erläuterung
Beispiel
Ergebnis
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
=
20
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.ä.
21
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.
22
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.
23
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.
•
24
While-Schleife II
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.print in Java.
25
For-Schleife I
for (Init; Condition; Increment) {
...
}
for (Variable in Objekt) {
...
}
Das For-Konstrukt
entspricht
dem aus C/C++/Java.
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].
26
For-Schleife II
var i;
for (i= 0; i<7; i++) {
document.writeln("hi <br>");
}
</script>
•
•
•
•
Dieses JavaScript-Stück gibt 7 Zeilen mit einem "hi" aus.
document.writeln() hat dieselbe Bedeutung wie printf() in C
gefolgt 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.
Dabei werden keine weiteren <script>-Tags mit JS-Code ausgeführt.
Bei allen for-Schleifen lässt sich die Laufvariable per var deklarieren:
for (var Variable; Condition; Increment) { ...
for (var Variable in Objekt) { ...
27
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.
28
Eine Ausnahme werfen...
throw Ausdruck;
try {
...Anweisungen...
}
Eine Ausnahme signalisieren.
Block mit Anweisungen, deren
Ausnahmen behandelt werden
catch(Variable) {
...Anweisungen...
}
Die Nummer der Ausnahme wird der
Variablen zugewiesen und die
Anweisungen ausgeführt.
finally {
...Anweisungen...
}
Block mit Anweisungen, die immer
nach try/catch ausgeführt werden
29
Prozeduren und Funktionen
function Name([Parameterliste]) {
/* Deklaration */
...
}
...
Name([Parameterliste]);
/* Aufruf */
...
function Name([Parameterliste]) {
...
return Expression;
}
....
Variable= Name([Parameterliste]);
•
•
•
/* Deklaration */
/* 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.
30
Funktionen I - Beispiele
function Mod(Wert,Divi) {
Resultat= Wert%Divi;
return Resultat;
}
value= Mod(23,7);
/* Deklaration */
/* nicht deklariert */
/* Aufruf */
function Modulo(Wert,Divi) {
if (Divi==0) {
return undefined; /* Schlüsselwort */
} else {
Resultat= Wert%Divi;
return Resultat;
}
}
value= Modulo(23,7);
31
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.
32
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.
33
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);
op= minus;
sum= op(2,3);
plus(2,3)=5
plus(2,3)=5
plus(2,3)=-1
34
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.
35
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.
36
Deklarationen II
<html><head>
<title>JS-Test2</title>
</head><body>
var p= 10;
var q= 10;
var r= 10;
function ff(r,s,t) {
var p= 9;
r= 2;
}
document.write(p+" "+q+" "+r+"<br>");
ff(q, 20, 30);
document.write(p+" "+q+" "+r+"<br>");
var s= p+q+r;
document.write(s);
</script></body></html>
37
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
38
Vordefinierte Funktionen (Auszug) I
Funktion
Erläuterung
eval(String)
Interpretiert den String als JavaScript und liefert das
Ergebnis
parseFloat(String)
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.
parseInt(String)
Wandelt String in Integer um,
Es gelten dieselben Bemerkungen wie bei parseFloat()
39
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.
40
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. 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.
41
Objekt-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.
42
Objekt-Konstruktor II
function Person(vor,nach) {
this.vorname= vor;
this.nachname= nach;
}
/* Konstruktor */
...
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.
43
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.
Siehe dazu:
http://www.w3schools.com/js/js_object_prototypes.asp
44
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
45
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.
46
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")
/* Generierung */
king.abWann();
document.write(kroenung);
/* ??? */
Output:
Ab heute ist er's!
function kroenung() { document.write("Ab heute ist er's!
"); }
47
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.
48
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 ArrayElemente mit den Listenwerten in der angegebenen Reihenfolge
versehen – wie in PHP.
49
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.
50
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 kann wie ihr
Typ unterschiedlich sein.
51
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.
52
Implementierung der Objekte II
•
•
Mit der Funktion Object() lassen sich leere Objekte erzeugen.
Ein impliziter Aufruf von Object() erfolgt bei der Benutzung des JSONFormats.
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.
53
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.
54
Nach dieser Anstrengung etwas Entspannung...
55

Webtechnologien Teil 15: JavaScript

Transcription

Similar documents

Unwiderstehlich - Zimmertheater Heidelberg

Leseprobe