3. Klassen und Objekte in JavaScript

3. Klassen und Objekte
in JavaScript
3.1 Browser – Klassen bzw. -Objekte
3.2 HTML – Klassen bzw. -Objekte
3.3 Vordefinierte Klassen
3.4 Nutzerdefinierte Klassen
WS 07/08
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
3.1 Browser - Klassen bzw. -Objekte
JavaScript ist eine objektbasierte Scriptsprache, d.h.
1.
JavaScript kennt Klassen und Objekte. Attributwerte der Objekte können auf die
übliche Weise verändert werden, z.B.:
objektname.attributname = neuer_wert;
Methoden werden wie üblich aufgerufen:
objektname.methodenname(...);
2.
Es fehlen die für objektorientierte Sprachen typischen Konzepte wie Vererbung und
Polymorphie.
Programmieren für das Web
V 2: 24. Oktober 2007
1/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.1 Browser - Klassen bzw. -Objekte
Zur Erinnerung (s. auch: http://www.sn.schule.de/~fischer/gw_neu)
Klasse:
ein „Bauplan“ für gleichartig strukturierte Objekte. Sie wird beschrieben durch
ihre Attribute (mit jeweiligem Wertebereich) und ihre Methoden.
Objekt: identifizierbare Einheit der Wirklichkeit oder unserer Anschauung. Es wird
beschrieben durch seine Attribute (mit konkretem Attributwert). Alle
Objekte, die aus einer Klasse erzeugt werden, haben die gleichen Attribute,
aber unterschiedliche Attributwerte und verfügen über die gleichen Methoden.
Programmieren für das Web
V 2: 24. Oktober 2007
2/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
3.1 Browser - Klassen bzw. -Objekte
UML-Notation:
Klasse
FENSTER
hoehe : 10, 20, ....
breite : 10, 20, ...
...
fenster_vergroessern()
fenster_verkleinern()
...
Objekt
mein_aktuelles_fenster : FENSTER
hoehe = 200
breite = 400
...
fenster_vergroessern()
fenster_verkleinern()
...
Programmieren für das Web
V 2: 24. Oktober 2007
3/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.1 Browser - Klassen bzw. -Objekte
JavaScript unterscheidet folgende vier Gruppen/Arten von Klassen:
•
Browser – Klassen bzw. -Objekte:
Objekte dieser Klassen werden beim Laden eines HTML-Dokuments automatisch
erzeugt.
•
HTML – Klassen bzw. -Objekte:
Objekte dieser Klassen werden durch die entsprechenden HTML-Tags erzeugt.
•
Vordefinierte Klassen:
Objekte dieser Klassen werden i.a. mittels eines Konstruktors erzeugt. Danach kann
man auf die in der Klassendefinition festgelegten Attribute und Methoden zugreifen.
•
Nutzerdefinierte Klassen:
Der Programmierer muss zunächst die Klasse definieren (Klassenname,
Attributnamen, Methodennamen festlegen und Methoden programmieren). Dann
können mittels eines Konstruktors Objekte erzeugt und auf deren Attribute und
Methoden zugegriffen werden.
Programmieren für das Web
V 2: 24. Oktober 2007
4/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu :3.1 Browser - Klassen bzw. -Objekte
Wichtige Browser-Klassen bzw. -objekte sind:
window, document, location, navigator, ...
Beim Laden eines HTML-Dokuments in ein Browserfenster werden für dieses Dokument
alle oben genannten und weitere Objekte automatisch erzeugt.
Nachfolgend werden ausgewählte Attribute und Methoden der genannten Klassen bzw.
Objekte vorgestellt.
Programmieren für das Web
V 2: 24. Oktober 2007
5/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.1 Browser - Klassen bzw. -Objekte
WINDOW
toolbar :
menubar :
scrollbars :
locationbar :
resizable :
top (pageYOffset) :
left (pageXOffset) :
height (outerHeight)
width (outerWidth) :
...
yes/no
yes/no
yes/no
yes/no
yes/no
10, 20, ...
10, 20, ...
: 10, 20, ...
10, 20, ...
Beispiele:
kap3\k31_01fen.html
kap3\k31_02fen.html
open(<url>, <name>,
open(<url>,<name>[,<attribute>])
[<fensterattribute>])
close()
close()
prompt(<hinweis>,
<eingabetext>)
prompt(<eingabetext>, <eingabe>)
alert(<text>)
alert(<text>)
confirm(<text>)
print()
...
Ein Beispiel für den Aufruf der Methode open(<url>, <name>, [<fensterattribute>]):
neuesFenster1 = window.open("","fenster1",
"height=300,width=400,resizable=no,top=20,left=20");
Programmieren für das Web
V 2: 24. Oktober 2007
6/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.1 Browser - Klassen bzw. -Objekte
Die Methoden prompt(<eingabetext>, <eingabe>) und alert(<text>)
wurden bereits in einem Beispiel aus Kapitel 1 zur Ein- und Ausgabe genutzt:
// Deklaration einer Variablen
var na;
// Erzeugung eines Eingabefensters und Wertzuweisung
na = window.prompt("Geben Sie Ihren Namen ein: ","");
// Ausgabe in einem Meldungsfenster
window.alert("Hallo, " + na + "! \n \n" +
"Viel Erfolg beim Erstellen interaktiver Webseiten!");
Beispiel: kap1\k1_04alert.html
Programmieren für das Web
V 2: 24. Oktober 2007
7/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.1 Browser - Klassen bzw. -Objekte
Jetzt wird ein komplexeres Beispiel zur Arbeit mit mehreren Fenstern vorgestellt:
k31_03fa.html:
HTML-Dokument mit Formular zur Addition zweier Brüche
k31_03fm.html:
HTML-Dokument mit Formular zur Multiplikation zweier Brüche
k31_03fstart.html: HTML-Dokument, aus dem per Knopfdruck die beiden obigen
Dokumente jeweils in einem neuen Fenster aufgerufen werden
Ausschnitt aus dem Quelltext von k31_03fstart.html:
function fenster_add() {
var fa = open("k31_03fa.html", "f1", "scrollbars=no,toolbar=no,...");
}
Beispiele:
kap3\k31_03fa.html, kap3\k31_03fm.html, kap3\k31_03fstart.html
Programmieren für das Web
V 2: 24. Oktober 2007
8/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.1 Browser - Klassen bzw. -Objekte
Bisher wurden die vordefinierten Methoden jeweils innerhalb eines JavaScript-Bereiches
aufgerufen.
Man kann aber z.B. die Methode print() auch aus einem Verweis heraus aufrufen:
<a href="javascript:window.print()">Diese Seite drucken</a>
Beispiel:
kap3\k31_04print.html
Programmieren für das Web
V 2: 24. Oktober 2007
9/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.1 Browser - Klassen bzw. -Objekte
DOCUMENT
background :
bgColor :
fgColor :
link :
alink :
vlink :
...
URL eines Bildes
blue, ...
yellow, ...
red, ...
green, ...
black, ...
open()
close()
clear()
write(<text1>, [<...>, ..., <...>])
writeln(<text1>, [<...>, ..., <...>])
...
Die Attribute wurden früher im Body-Tag des Dokuments
festgelegt:
<body bgColor='yellow'>
Die Hintergrundfarbe kann aber auch per Knopfdruck
verändert werden:
<input type = "button"
name = "b_rot"
value = " rot"
onclick = "document.bgColor='red'">
Beispiele: kap3\k31_05doc.html
Programmieren für das Web
V 2: 24. Oktober 2007
10/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.1 Browser - Klassen bzw. -Objekte
Man kann auch während der Laufzeit Text in ein Dokument in einem neuen Fenster
schreiben: (Wichtig: Fenster und danach auch das Dokument öffnen bzw. schließen)
var neuesFenster;
function erzeugeFenster () {
neuesFenster = open("","displayWindow",
"height=300,width=300,top=10,left=10,scrollbars=yes");
neuesFenster.document.open();
with (neuesFenster.document) {
write("<html><head><title>On the fly</title></head>");
write("<body><h2>On-the-fly</h2>");
write("<hr>Dieses Dokument wurde on-the-fly, ");
write("dh. zur Laufzeit, erzeugt.");
write("<hr></body></html>");
}
neuesFenster.document.close();
}
Beispiele: kap3\k31_06doc.html
Programmieren für das Web
V 2: 24. Oktober 2007
11/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu 3.1 Browser - Klassen bzw. -Objekte
LOCATION
hash :
host :
hostname :
href :
pathname :
port :
protocol :
...,
...,
...,
...,
...,
...,
...,
reload()
replace()
..., ...
...
...
...
...
...
...
Die Attribute dieses Objekts liefern Informationen
über Anker, Teil des Hostnamens, Server, komplette
URL, usw.
Beispiel: kap3\k31_07loc.html
Mittels des Attributs „href“ können auch neue
Dokumente geladen werden:
var neuesFenster;
function laden(adresse) {
neuesFenster = open("", "Fenster1","...");
neuesFenster.location.href = adresse;
}
Beispiele:
kap3\k31_08loc.html, kap3\k31_09loc.html
Programmieren für das Web
V 2: 24. Oktober 2007
12/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu 3.1 Browser - Klassen bzw. -Objekte
NAVIGATOR
appCodeName :
appName :
appVersion :
userAgent :
...
...,
...,
...,
...,
..., ...
...
...
...
Die Attribute dieses Objekts liefern Informationen
über den Browser, der momentan lokal benutzt wird.
Beispiel: kap3\k31_10nav.html
...
Programmieren für das Web
V 2: 24. Oktober 2007
13/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
3.2 HTML - Klassen bzw. -Objekte
Alle mittels eines HTML-Tags in einem HTML-Dokument erzeugten Elemente werden
von JavaScript als Objekte angesehen, die beim Laden der Seite in ein Browserfenster
erzeugt werden.
Die wichtigsten davon sind:
•
Textabsatz:
<p>...</p>
•
Liste:
<ul> <li>...</li>...<li>...</li></ul>
<ol> <li>...</li>...<li>...</li></ol>
•
Tabelle:
<table>...
<tr><th>...</th><th>...</th></tr>
<tr><td>...</td><td>...</td></tr>
...
</table>
•
Verweis:
<a href = “
•
Bild:
<img src = “...“ alt=“...“>
Programmieren für das Web
V 2: 24. Oktober 2007
“>...</a>
14/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.2 HTML - Klassen bzw. -Objekte
und Formulare <form action = ““>...</form> mit den verschiedenen Elementen:
•
Schaltfläche:
<input type = “button“ name = “...“ ...>
•
Einzeiliges Textfeld:
<input type = “text“ name = “...“ ...>
•
Passwortfeld:
<input type = “password“ name = “.“ size = “.“ >
•
Mehrzeiliges Textfeld: <textarea name = “...“>
</textarea>
•
Auswahlliste:
<select name = “...“ size = “...“ >
<option name = “...“ value = “...“>...</option>
...
<option name = “...“ value = “...“>...</option>
</select>
•
Radiobutton:
<input type = “radio“ name = “r1“ ... [checked]>
•
Checkbox:
<input type = “checkbox“ name = “r1“...[checked]>
Programmieren für das Web
V 2: 24. Oktober 2007
15/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.2 HTML - Klassen bzw. -Objekte
Alle Objekte, die beim Laden eines HTML-Dokuments
erzeugt werden, sind in eine Hierarchie eingeordnet:
1. Stufe: Window-Objekt
2. Stufe: Browser-Objekte: Document, Navigator, ...
3. Stufe: HTML-Objekte: Bilder, Verweise, Formulare
4. Stufe: Formularelemente
Beispiel: kap3\k32_01html.html
Programmieren für das Web
V 2: 24. Oktober 2007
16/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
3.3 Vordefinierte Klassen
Wichtige vordefinierte Klassen sind:
Math, Number, String, Date, Array, Function, ...
Für diese Klassen sind alle Attribute (mit Wertebereich) und Methoden vordefiniert, d.h.
für diese Klassen ist bereits festgelegt:
• Name und Wertebereich für jedes Attribut
• Name der Methode, Anzahl und Reihenfolge der formalen Parameter der Methoden
Bevor man auf Attribute und Methoden zugreifen kann, muss ein Objekt der jeweiligen
Klasse mittels eines Konstruktors erzeugt werden (ausser für die Klasse „Math“). Der Zugriff
erfolgt dann über
objektname.attributname = ...;
objektname.methodenname(<liste der aktuellen parameter>);
Programmieren für das Web
V 2: 24. Oktober 2007
17/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.3 Vordefinierte Klassen
Die Klasse „Math“ ermöglicht den Zugriff auf mathematische Konstanten und StandardFunktionen. Es wird kein Konstruktor benötigt, aber beim Aufruf von Attributen und
Methoden muss in diesem Fall immer der Klassenname angegeben werden.
MATH
PI
...
abs(<zahl>)
ceil(<zahl>)
floor(<zahl>)
power(<z1>, <z2>)
random()
round(<zahl>)
sin(<zahl>)
...
Programmieren für das Web
V 2: 24. Oktober 2007
Aufruf verschiedener Standardfunktionen:
for (var i = 1; i <= nn; i++) {
zz = 1 + (Math.ceil(100 * Math.random()) % 6);
write("<tr><td>" + i + "</td>"
+ "<td>" + zz + " </td></tr>")
}
Beispiel: kap3\k33_01math.html
18/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.3 Vordefinierte Klassen
NUMBER
MAX_VALUE: …, …
MIN_VALUE: …, …
NaN
NEGATIVE_INFINITY
POSITIVE_INFINITY
toString([<basis>])
Konstruktor:
var x = new Number();
var y = new Number(3.5);
Mittels der Methode „toString()“ kann eine Zahl in eine Zahl in
einem anderen Zahlensystem umgewandelt und als Zeichenkette
dargestellt werden:
function ausgabe(w) {
var x = new Number(parseInt(w));
alert("Eingegebene Zahl: " + x +
"\n als Zeichenkette: " + x.toString() +
"\n\n Zahl zur Basis
2 als Zeichenkette: " +
x.toString(2) +
"\n Zahl zur Basis
8 als Zeichenkette: " +
x.toString(8) +
"\n Zahl zur Basis 10 als Zeichenkette: " +
x.toString(10) +
"\n Zahl zur Basis 16 als Zeichenkette: " +
x.toString(16));
}
Beispiel: kap3\k33_02number.html
Programmieren für das Web
V 2: 24. Oktober 2007
19/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.3 Vordefinierte Klassen
STRING
length:
Konstruktor:
1, 2, …
charAt(<zahl>)
charCodeAt(<zahl>)
concat(<string2>)
fontcolor(<farbe>)
fontsize(<zahl>)
indexOf(<string>, <pos>)
substr(<pos>, [<laenge>])
toLowerCase()
toUpperCase()
...
Programmieren für das Web
V 2: 24. Oktober 2007
var txt1 = new String();
var txt2 = new String(“Hallo“);
Wichtig:
Das 1. Zeichen einer Zeichenkette steht immer an der
Position 0.
Beispiel: kap3\k33_03string.html
20/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.3 Vordefinierte Klassen
DATE
getDate()
getDay()
getFullYear()
getHours()
getMinutes()
getMonth()
getSeconds()
getTime()
getYear()
setDate(<tag>)
setFullYear(<jahr> [,<monat> [,<tag>]])
setHours(<std> [,<min> [,<sek>]])
setMinutes(<min> [,<sek>])
...
Programmieren für das Web
V 2: 24. Oktober 2007
Mögliche Aufrufe des Konstruktors:
var heute = new Date();
var z1 = new Date(“April 20, 2006 12:00:00“)
var z2 = new Date (06, 4, 20);
Bemerkungen:
getDay()
liefert
getDate()
liefert
getMonth()
liefert
getTime()
liefert
getYear()
liefert
getFullYear() liefert
21/29
Zahl: 0 (So) bis 6 (Sa)
Tag des Monats (1 bis 31)
Zahl: 0 (Jan.) bis 11 (Dez.)
Zahl: Millisek. seit 01.01.1970, 0.00
Jahreszahl (i.a. zweistellig)
Jahreszahl (vierstellig)
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.3 Vordefinierte Klassen
var heute = new Date();
function zeit_anzeigen () {
// var heute = new Date();
var std = heute.getHours();
var min = heute.getMinutes();
var zeit;
if (min < 10) {zeit = std + ".0" + min;} else
{zeit = std + "." + min;}
alert("Beim Laden dieser Seite war es " + zeit + " Uhr.");
}
Aufruf:
onclick = "zeit_anzeigen()"
Beispiele: kap3\k33_04date.html, kap3\k33_05date.html, kap3\k33_06date.html,
kap3\k33_07date.html
Programmieren für das Web
V 2: 24. Oktober 2007
22/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.3 Vordefinierte Klassen
ARRAY
length: 0, 1, 2, …
concat(<feld>)
join(<zeichen>)
reverse()
sort([<vgl_fkt>])
...
Wichtig:
• Bei der Erzeugung eines Objekts der Klasse „Array“ muss man
keine maximale Anzahl von Elementen festlegen.
• Elemente eines Objekts der Klasse „Array“ können sowohl
Zahlen als auch Zeichenketten enthalten.
Mögliche Aufrufe des Konstruktors:
var feld1 = new Array();
var feld2 = new Array("Anna", 10, "Otto");
Beispiel: kap3\k33_08array.html
(Definition zweier Objekte, Attribut, Methode „join(<zeichen>)“)
Programmieren für das Web
V 2: 24. Oktober 2007
23/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.3 Vordefinierte Klassen
Wichtig:
• Die Methode „sort()“ sortiert lexikografisch.
• Gibt man als aktuellen Parameter der Methode „sort()“ eine Vergleichsfunktion an,
so können Zahlen der Größe nach sortiert werden.
Beispiele: kap3\k33_09array.html (Sortieren von Namen)
kap3\k33_10array.html (Sortieren von Zahlen ohne Vergleichsfunktion)
kap3\k33_11array.html (Sortieren von Zahlen mit Vergleichsfunktion)
Programmieren für das Web
V 2: 24. Oktober 2007
24/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.3 Vordefinierte Klassen
Die nachfolgende Prozedur zerlegt die als Zeichenkette übergebene Ziffernfolge in
einzelne Ziffern, speichert diese in einem Feld und sortiert anschließend dieses Feld.
function auslesen(st){
var a = new Array();
var n = st.length - 1;
with (document) {
write("<h2> Auslesen von Zahlen aus einem ");
write("Eingabe-Textfeld </h2>");
write("Es wurden folgende Ziffern eingelesen: <br>");
for (var j = 0; j <= n; j++){
a[j] = parseInt(st.charAt(j));
write(a[j], " - ");
}
a.sort();
write("<br><br> Jetzt sind die Ziffern sortiert: <br>");
for (var i = 0; i <= n; i++ ) {
write(a[i] , " - ");}
}
}
Beispiel:
Programmieren für das Web
V 2: 24. Oktober 2007
25/29
kap3\k33_12array.html
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.3 Vordefinierte Klassen
Bei jeder Definition einer Funktion oder Prozedur erzeugt JavaScript intern ein Objekt
der Klasse „Function“. Neben der bisher benutzten „klassischen“ Funktionsdefinition,
gibt es darüber hinaus auch eine Kurzschreibweise:
quadratzahl = new Function ("x", "return x * x");
(vgl. MSW Logo: define “quadratzahl [[x] [output :x * :x])
FUNCTION
arguments[]: …, …
caller:
…, …
length:
…, …
Dies hat zur Folge, dass eine Funktion auch eine variable
Anzahl von aktuellen Parametern haben kann:
Beispiel:
kap3\k33_13funct.html
toString()
Programmieren für das Web
V 2: 24. Oktober 2007
26/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
3.4 Nutzerdefinierte Klassen
Bei der Arbeit mit eigenen Klassen und Objekten sind folgende Schritte notwendig:
1.
Festlegen von Klassen-,
Attribut- und
Methodennamen
2.
Programmieren der
Methoden
3.
Erzeugen von Objekten
4.
Änderung von Attributwerten
oder Aufruf von Methoden
Programmieren für das Web
V 2: 24. Oktober 2007
// Definition einer neuen Klasse
function adresse(name, plz, ort) {
// Festlegen der Attribute
this.name = name;
this.plz = plz;
this.ort = ort;
// Festlegen der Methode
this.ausgabe = ausgabe;
}
// Definition der Methode
function ausgabe() {
with (document) {
write("<b>Name: </b>"+this.name + " ");
write("<b>PLZ:
</b>"+this.plz + " ");
writeln("<b>Ort:
</b>"+this.ort + "<br>");
}
}
// Instanz erzeugen
person1 = new adresse("Timmermann", "01156", "Dresden");
// Methodenaufruf
person1.ausgabe();
27/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.4 Nutzerdefinierte Klassen
Beispiele: kap3\k34_01eklasse.html (ein Objekt einer nutzerdefinierten Klasse)
kap3\k34_02eklasse.html (mehrere Objekte einer nutzerdefinierten Klasse)
// globale Variable
var person = new Array();
var i = 0;
// Definition einer neuen Klasse
...
//Anlegen eines Objekts und Ausgabe der Attributewerte
function o_erz(a,b,c,d,e) {
person[i] = new Adresse(a,b,c,d,e);
document.form1.ausgabe.value =
document.form1.ausgabe.value + (i+1) + ". Datensatz: „
+ person[i].name + " - „
+ person[i].vname + " - „
+ person[i].strasse + " - „
+ person[i].plz + " - „
+ person[i].ort + "\n";
i++;
}
Beispiel: kap3\k34_02eklasse_sp.html
Programmieren für das Web
V 2: 24. Oktober 2007
28/29
© Dr. Bettina Timmermann
TU-Dresden
Browser-Klassen | HTML-Klassen | Vordefinierte Klassen | Nutzerdefinierte Klassen
3. Klassen und Objekte in JavaScript
noch zu: 3.4 Nutzerdefinierte Klassen
Aber man kann auch zu einer vordefinierten Klasse weitere eigene Methoden
hinzufügen. Dazu ist notwendig:
1. Definition der
eigenen Methode
2. neue Methode der
Klasse hinzufügen
3. Objekt erzeugen
4. Methode aufrufen
function datumsAusgabe(){
// Definition einer eigenen Methode
tag = this.getDate();
monat = 1 + this.getMonth();
jahr = this.getYear();
if ((jahr > 99) && (jahr < 1900)) jahr += 1900;
return tag + "." + monat + "." + jahr;
}
//neue Methode der Klasse Date hinzufuegen
Date.prototype.ausgabe = datumsAusgabe;
function teste_ausgabe(){
//Objekt erzeugen
var jetzt = new Date();
//Methode aufrufen
return jetzt.ausgabe();
}
Beispiel: kap3\k34_04emeth.html bzw. auch kap3\k34_03emeth.html
Programmieren für das Web
V 2: 24. Oktober 2007
29/29
© Dr. Bettina Timmermann
TU-Dresden