View
7
Download
0
Category
Preview:
Citation preview
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/
3Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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/
4Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
5Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
6Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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
7Webtechnologien - WS 2019/20 - Teil 11/JavaScript 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>
Aufrufen und Einbinden
• JavaScript kann innerhalb des Kopfes oder an beliebiger Stelle im Body stehen. Es sollte möglichst hinten in der HTML-Datei stehen, CSS vorne.
• Die Statements werden innerhalb der Dateien von vorn nach hinten ausgeführt.
• Wenn die externe Dateiform benutzt wird, dürfen dort keine HTML-Kommentare stehen.
• Die Angabe language="JavaScript" kann weggelassen werden.
8Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
9Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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;
10Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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;
11Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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" */
12Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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!
13Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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 "\":
14Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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"
15Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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)
16Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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
17Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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;
18Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
Logische Operatoren
Operator Erläuterung Beispiel Ergebnis
&& Und/And true && false false
|| Oder/Or true || false true
! Nicht/Negation !true false
19Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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
20Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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) {...
}
21Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
22Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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: ...;
}
23Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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);
24Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
25Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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:
26Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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) { ...
27Webtechnologien - WS 2019/20 - Teil 11/JavaScript 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.
28Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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
29Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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
30Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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);
31Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
32Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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;
}
33Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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
34Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
35Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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];}
36Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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?
37Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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>
38Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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!
39Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
40Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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,..]); ...
41Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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...
42Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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
43Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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 */
44Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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";
}
45Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
46Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
47Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
48Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
49Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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]...;
50Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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"];
51Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
52Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
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.
53Webtechnologien - WS 2019/20 - Teil 11/JavaScript I
Nach dieser Anstrengung etwas Entspannung...
Recommended