1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: JavaScript / Sprachelemente / Objekte, Eigenschaften und Methoden</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Welche Aufgabe Objekte in JavaScript haben, was es mit Methoden und Eigenschaften auf sich hat, und wie Sie eigene Objekte definieren.">
<meta name="keywords" content="SELFHTML, JavaScript, Objekte, Eigenschaften, Mehtoden, Objektfunktionen, with, this">
<meta name="author" content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="robots" content="noindex, nofollow">
<meta name="DC.Publisher" content="SELFHTML e. V.">
<meta name="DC.Date" content="2005-08-22T21:21:39+02:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/javascript/sprache/regeln.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype" content="page">
<link rel="alternate" type="application/atom+xml" title="SELFHTML-Weblog (Atom, gesamt)" href="http://aktuell.de.selfhtml.org/weblog/atom-feed">
<link rel="alternate" type="application/rss+xml" title="SELFHTML-Weblog (RSS, Auszge)" href="http://aktuell.de.selfhtml.org/weblog/rss-feed">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="Sprachelemente" href="index.htm">
<link rel="next" title="Funktionen" href="funktionen.htm">
<link rel="prev" title="Variablen und Werte" href="variablen.htm">
<link rel="first" title="Allgemeine Regeln fr JavaScript" href="regeln.htm">
<link rel="last" title="Event-Handler" href="eventhandler.htm">
</head>
<body>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Sprachelemente</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../../index.htm"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">Objekte, Eigenschaften und Methoden</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#vordefinierte">Vordefinierte JavaScript-Objekte</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#verwenden">Vordefinierte JavaScript-Objekte verwenden</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#eigene">Eigene Objekte definieren</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#eigenschaften">Eigenschaften von Objekten</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#methoden">Objektmethoden</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#existenzabfrage">Abfragen ob ein Objekt existiert</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#with">Mehrere Anweisungen mit einem Objekt ausfhren (with)</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#this">Auf aktuelles Objekt Bezug nehmen (this)</a><br>
</p>
</td>
</tr><tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2><a class="an" name="vordefinierte">Vordefinierte JavaScript-Objekte</a></h2>
<p>Objekte sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit objektgebundenen Funktionen (Methoden).</p>
<p>Dass JavaScript eine Erweiterung von HTML darstellt, liegt vor allem an den vordefinierten Objekten, die Ihnen in JavaScript zur Verfgung stehen. ber diese vordefinierten Objekte knnen Sie beispielsweise einzelne Elemente eines HTML-Formulars abfragen oder ndern.</p>
<p>Ein Objekt kann eine Teilmenge eines bergeordneten Objekts sein. Die JavaScript-Objekte sind deshalb in einer Hierarchie geordnet. Das hierarchiehchste Objekt ist in JavaScript das Fensterobjekt (<code>window</code>). Fenster haben Eigenschaften wie einen Namen, eine Gre usw. Der Inhalt eines Fensters ist das nchstniedrigere Objekt, nmlich das im Fenster angezeigte Dokument (in JavaScript das Objekt <code>document</code>). In der Regel ist der Fensterinhalt eine HTML-Datei. Eine solche Datei kann bestimmte durch HTML-Tags definierte Elemente enthalten, wie zum Beispiel Formulare, Verweise, Grafikreferenzen usw. Fr solche untergeordneten Elemente gibt es wieder eigene JavaScript-Objekte, zum Beispiel das Objekt <code>forms</code> fr Formulare. Ein Formular besteht seinerseits aus verschiedenen Elementen, zum Beispiel aus Eingabefeldern, Auswahllisten oder Buttons zum Absenden bzw. Abbrechen. In JavaScript gibt es dafr ein Objekt <code>elements</code>, mit dem Sie einzelne Felder und andere Elemente innerhalb eines Formulars ansprechen knnen.</p>
<p>Neben den hierarchisch geordneten JavaScript-Objekten gibt es auch solche, die nicht direkt in die Hierarchie passen. Das sind zum Beispiel Objekte fr Datums- und Zeitrechnung, fr mathematische Aufgaben oder fr Zeichenkettenverarbeitung.</p>
<p>Eine bersicht der vordefinierten JavaScript-Objekte finden Sie in der <img src="../../src/kap.gif" width="15" height="13" alt="Kapitel"> <a href="../objekte/index.htm">JavaScript-Objektreferenz</a>. Dort werden zu jedem Objekt die verfgbaren <img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#eigenschaften">Eigenschaften</a> und <img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#methoden">Methoden</a> vorgestellt.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="verwenden">Vordefinierte JavaScript-Objekte verwenden</a></h2>
<p>JavaScript-Objekte knnen Sie jederzeit verwenden.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/datumzeit.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head>
<body>
<script type="text/javascript">
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var NachVoll = ((Minuten < 10) ? ":0" : ":");
if (Jahr < 2000)
Jahr = Jahr + 1900;
document.write("<h2>Guten Tag!<\/h2><b>Heute ist der " +
Tag + "." + Monat + "." + Jahr + ". Es ist jetzt " +
Stunden + NachVoll + Minuten + " Uhr<\/b>");
</script>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel wird innerhalb eines <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../intro.htm#javascriptbereiche">JavaScript-Bereichs</a> mit Hilfe des vordefinierten JavaScript-Objekts <code>Date</code> das aktuelle Datum und die aktuelle Uhrzeit ermittelt und HTML-formatiert ausgegeben.</p>
<p>Zuerst muss dazu eine neue <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="variablen.htm">Variable</a> angelegt werden. Im Beispiel ist das die Variable <code>Jetzt</code>. Diese Variable soll auf Daten des <code>Date</code>-Objekts zugreifen knnen. Dies geschieht durch ein Ist-Gleich-Zeichen hinter dem Variablennamen. Dahinter folgt das <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="reserviert.htm">reservierte Wort</a> <code>new</code>, und dahinter, durch ein Leerzeichen getrennt, der Aufruf von <code>Date()</code> zum Erzeugen einer neuen Instanz des Objekts <code>Date</code>.</p>
<p>Um die einzelnen Daten der Objektinstanz von <code>Date</code>, also Tag, Monat, Jahr usw. anzusprechen, stehen entsprechende <img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#methoden">Methoden</a> zur Verfgung. Diese Methoden, z.B. <code>getDate()</code> oder <code>getHours()</code>, haben als Rckgabewert jeweils einen Datums-/Uhrzeit-Bestandteil. So liefert <code>getDate()</code> beispielsweise den aktuellen Tag des Monats und <code>getHours()</code> die aktuelle Stundenzahl des Tages. Im Beispiel wird fr jeden der bentigten Bestandteile eine Variable definiert. In der Variablen <code>Tag</code> wird beispielsweise durch Aufruf von <code>Jetzt.getDate()</code> der aktuelle Tag des Monats gespeichert.</p>
<p>Die Anweisung im Beispiel, die mit <code>NachVoll ...</code> beginnt, kann an dieser Stelle nicht nher erlutert werden. Die Anweisung ist eine Vorbereitung zur sauberen Formatierung der Uhrzeit.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Die einzelnen Methoden des im Beispiel verwendeten Objekts <code>Date</code>, wie zum Beispiel <code>getDate()</code>, werden bei der Referenz des Objekts <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/date.htm">Date</a> beschrieben.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5" title="Opera 5"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="eigene">Eigene Objekte definieren</a></h2>
<p>Sie knnen eigene Objekte definieren, wenn Sie streng objektorientiert in JavaScript programmieren wollen.</p>
<p>Um ein eigenes Objekt anzulegen, sind zwei Schritte ntig. Zuerst mssen Sie das Objekt selbst und seine Eigenschaften "deklarieren". Im zweiten Schritt knnen Sie anschlieend eine Instanz dieses Objekts definieren. Mit dieser Objektinstanz knnen Sie dann Programmprozeduren durchfhren.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/hintergrundfarbobjekt.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
<script type="text/javascript">
function Farbe (R, G, B) {
this.R = R;
this.G = G;
this.B = B;
this.hex = "#";
}
function HintergrundWechseln () {
var Hintergrund = new Farbe("E0", "FF", "E0");
document.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;
}
</script>
</head><body bgcolor="#FFFFFF">
<h1>Das eigene Farb-Objekt mit JavaScript</h1>
<a href="javascript:HintergrundWechseln()">Hintergrundfarbe wechseln</a>
</body>
</html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Um ein neues Objekt und seine Eigenschaften anzulegen, mssen Sie innerhalb eines <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../intro.htm#javascriptbereiche">JavaScript-Bereichs</a> oder innerhalb einer <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../intro.htm#javascriptdateien">separaten JavaScript-Datei</a> eine eigene <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="funktionen.htm">Funktion</a> definieren, die so aussehen kann wie im Beispiel die Funktion <code>Farbe(...)</code>. Der Name, den Sie der Funktion geben (im Beispiel der Name <code>Farbe</code>) ist zugleich der Name des Objekts, das Sie mit dieser Funktion anlegen. Als Parameter, die die Funktion erwartet, notieren Sie die Eigenschaften, die Ihr Objekt haben soll. Die Parameternamen sind zugleich die Namen der Objekteigenschaften. Im Beispiel sind das die Eigenschaften <code>R</code>, <code>G</code> und <code>B</code>, denn es soll ein Objekt angelegt werden, das Rot-, Grn- und Blauwert einer Farbe speichern kann. <code>R</code>, <code>G</code> und <code>B</code> sind dabei brigens <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="regeln.htm#namen">selbstvergebene Namen</a>! Innerhalb der Funktion notieren Sie alle Anweisungen so wie im Beispiel gezeigt: fr jede Eigenschaft, die bei den Funktionsparametern festgelegt wurde, notieren Sie eine Anweisung, beginnend mit dem <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="reserviert.htm">reservierte JavaScript Wort</a> <code>this</code>, gefolgt von einem Punkt und dem Parameternamen. Dahinter notieren Sie ein Gleichheitszeichen, und hinter dem Gleichheitszeichen nochmals den Parameternamen. Am Ende jeder Anweisung muss ein Strichpunkt stehen.<br>
Natrlich knnen Sie fr jedes Objekt auch feste (nicht durch Parameter beeinflusste) Eigenschaften definieren. Im Beispiel ist die Eigenschaft <code>hex</code> eine feste Eigenschaft, die fr jede Instanz des Objektes existiert. Notieren Sie dazu hinter dem Eigenschaftsnamen den jeweiligen Wert der Eigenschaft.</p>
<p>Nachdem das Objekt angelegt ist, knnen Sie an anderen Stellen innerhalb Ihres JavaScripts Instanzen dieses Objekt definieren. Dies geschieht mit Hilfe einer <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="variablen.htm">Variablen</a> und dem reservierten JavaScript Wort <code>new</code>. Im Beispiel wird eine zweite Funktion <code>HintergrundWechseln()</code> definiert. Darin wird zunchst eine Variable <code>Hintergrund</code> angelegt. Diese Variable soll Daten des angelegten Objekts <code>Farbe</code> enthalten. Dies geschieht durch ein Gleichheitszeichen hinter dem Variablennamen. Dahinter folgt das Wort <code>new</code> und dahinter, durch ein Leerzeichen getrennt, der Name der Funktion, mit der das gleichnamige Objekt angelegt wurde, im Beispiel <code>Farbe</code>. Als Parameter werden dieser Funktion irgendwelche brauchbaren Werte bergeben, im Beispiel <code>"33"</code>, <code>"99"</code> und <code>"C0"</code> (typische hexadezimale Farbwerte, wie sie in HTML zum Einsatz kommen).</p>
<p>Anschlieend ist die Variable <code>Hintergrund</code> an das Farbobjekt gebunden, und ber sie lassen sich die Eigenschaften des Objekts setzen oder abfragen. Im Beispiel steht die Anweisung:<br>
<code>document.bgColor = Hintergrund.hex + Hintergrund.R + Hintergrund.G + Hintergrund.B;</code><br>
Damit wird die Hintergrundfarbe der aktuell angezeigten Seite verndert. Normalerweise knnte man <code>document.bgColor</code> so etwas zuweisen wie <code>"#C0C0EE"</code>. Auch im Beispiel wird ein Farbwert dieser Art zugewiesen, jedoch zusammengesetzt aus den Einzeleigenschaften des Farbobjekts, das in der Instanz <code>Hintergrund</code> gespeichert ist. Die Funktion <code>HintergrundWechseln()</code> wird aufgerufen, wenn der Anwender auf den Verweis klickt, der in der HTML-Datei enthalten ist.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Bereits Opera 5 erlaubt das Definieren von eigenen Objekten. Das obige Beispiel wird allerdings erst im Opera 7 korrekt ausgefhrt. Dies liegt daran, dass Opera erst ab Version 7 die Eigenschaft <code>document.bgColor</code> untersttzt.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="eigenschaften">Eigenschaften von Objekten</a></h2>
<p>Objekte knnen Eigenschaften haben. Ein selbst definiertes Objekt "Mensch" knnte zum Beispiel die Eigenschaften Name, Alter, Geschlecht und Muttersprache haben. Vordefinierte JavaScript-Objekte haben ebenfalls Eigenschaften. So hat das Objekt <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/math.htm">Math</a> zum Beispiel eine Eigenschaft "PI" (<code>Math.PI</code>). Auf diese Weise lsst sich mit der mathematischen Konstante PI rechnen, ohne deren genauen Wert zu kennen.</p>
<p>Eigenschaften von Objekten knnen Sie innerhalb Ihres JavaScript-Codes jederzeit auslesen, und in vielen Fllen knnen Sie die Werte von Eigenschaften auch ndern. So knnen Sie beispielsweise dem im Browser-Fenster angezeigten Dokument einen neuen, gltigen <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../html/allgemein/referenzieren.htm#uri">URI</a> zuweisen. Dadurch erreichen Sie, dass der WWW-Browser einen Sprung zu der zugewiesenen Adresse so ausfhrt, als ob der Anwender auf einen entsprechenden Verweis klicken wrde.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/erkennseite.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title></head><body>
<h1>Die Seite, die Sie genau erkennt</h1>
<script type="text/javascript">
var BrowserName = navigator.appName;
var BrowserVersion = navigator.appVersion;
document.write("<p>Ah ja, Sie verwenden also den <b>" + BrowserName +
"<\/b>, und zwar in der Version <b>" + BrowserVersion +
"<\/b><\/p>");
</script>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Im Beispiel werden innerhalb eines <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../intro.htm#javascriptbereiche">JavaScript-Bereichs</a> zwei Eigenschaften des vordefinierten JavaScript-Objekts <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/navigator.htm">navigator</a> in zwei entsprechenden Variablen namens <code>BrowserName</code> und <code>BrowserVersion</code> gespeichert. Das <code>navigator</code>-Objekt stellt Ihnen ber seine Eigenschaften verschiedene Informationen ber den verwendeten WWW-Browser des Anwenders zur Verfgung. Im obigen Beispiel werden die Eigenschaften des Browser-Namens (gespeichert in der Objekteigenschaft <code>navigator.appName</code>) und der Browser-Version (gespeichert in der Objekteigenschaft <code>navigator.appVersion</code>) ermittelt. Anschlieend werden die ermittelten Daten mit <code>document.write()</code> dynamisch ins Browser-Fenster geschrieben.</p>
<p>Objekteigenschaften sprechen Sie an, indem Sie zuerst den Namen des Objekts notieren, dahinter einen Punkt, und dahinter den Namen der Eigenschaft. Dabei sind keine Leerzeichen erlaubt!</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="methoden">Objektmethoden</a></h2>
<p>Objekte knnen Methoden haben. Das sind Funktionen, die Aktionen ausfhren, aber im Gegensatz zu alleinstehenden <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="funktionen.htm">Funktionen</a> an ein bestimmtes Objekt gebunden sind. Viele vordefinierte JavaScript-Objekte haben Methoden. So gibt es zum Beispiel das vordefinierte JavaScript-Objekt <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/history.htm">history</a>, in dem die bereits besuchten URIs eines Browser-Fensters gespeichert sind. Dazu gibt es eine Methode <code>history.back()</code>, mit der Sie in JavaScript einen Rcksprung zu einer bereits besuchten Adresse erzwingen knnen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/gehwohin.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Geh wo hin</title></head><body>
<p><a href="javascript:history.back();">Geh hin wo Du herkommst</a></p>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt einen Verweis mit einer speziellen Syntax. Diese Syntax erlaubt Ihnen, beim Anklicken des Verweises JavaScript-Code aufzurufen. Im Beispiel ist das ein Aufruf der Methode <code>back()</code> des Objekts <code>history</code>.</p>
<p>Objektmethoden sprechen Sie an, indem Sie zuerst den Namen des Objekts notieren, dahinter einen Punkt, dahinter den Namen der Methode, und dahinter eine ffnende und eine schlieende Klammer. Dabei sind keine Leerzeichen erlaubt! Einige Methoden knnen auch Parameter beim Aufruf erwarten. Diese Parameter mssen Sie dann zwischen der ffnenden und der schlieenden Klammer bergeben.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Mehr zu der Aufrufsyntax bei Verweisen erfahren Sie im Abschnitt ber <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="eventhandler.htm">Event-Handler</a>.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="existenzabfrage">Abfragen ob ein Objekt existiert</a></h2>
<p>Es gibt viele JavaScript-Objekte, und es ist oft schwer durchschaubar, welcher Browser in welcher Version welches Objekt interpretiert. Objekte, die nicht interpretierbar sind, fhren in den Browsern zu Fehlermeldungen. So kann es vorkommen, dass ein Script, das mit Netscape 4.7 oder Internet Explorer 5.0 wunderbar funktioniert, bei Netscape 4.0 oder Internet Explorer 4.0 zu Fehlermeldungen fhrt, weil ein Objekt nicht bekannt ist. Deshalb gibt es eine Mglichkeit, den Aufruf von Eigenschaften und Methoden eines Objekts von einer Abfrage abhngig zu machen, ob das Objekt dem Browser berhaupt bekannt ist.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/objektabfrage.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html>
<head><title>Test</title>
</head>
<body>
<h1>Objekt-Abfrage</h1>
<script type="text/javascript">
if (!document.images) {
document.write("<p>Schade, Ihr Browser kennt das image-Objekt nicht - Sie verpassen was!<br>");
} else {
document.write("<p>Gut, Ihr Browser kennt das image-Objekt!<br>");
}
if (document.all) {
document.write("Ihr Browser kennt Microsofts all-Objekt!<\/p>");
} else {
document.write("Ihr Browser kennt nicht Microsofts all-Objekt.<\/p>");
}
</script>
</body>
</html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Mit einer <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="bedingt.htm">bedingten Anweisung</a> <code>if (...)</code> knnen Sie berprfen, ob ein Objekt verfgbar ist. Als Ausdruck fr die Bedingung notieren Sie innerhalb der Klammern hinter <code>if</code> einfach das Objekt, nach dem Sie fragen. Wenn das Objekt verfgbar ist, wird intern der Wert <code>true</code> (<i>wahr</i>) zurckgegeben. In dem Zweig der if-else-Abfrage, die diesen Fall verarbeitet, knnen Sie dann loslegen und zum Beispiel Befehle verwenden, die dieses Objekt verwenden. In dem anderen Zweig der if-else-Abfrage knnen Sie dann beispielsweise eine eigene Meldung ausgeben, dass dieses JavaScript leider Befehle verwendet, die der Browser des Anwenders nicht interpretiert.</p>
<p>Im obigen Beispiel werden mit <code>document.write</code> unterschiedliche Stze ins Browser-Fenster geschrieben. Dazu wird zunchst gefragt, ob das Unterobjekt <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/images.htm">document.images</a> <b>nicht</b> verfgbar ist (die verneinte Abfrage ergibt sich durch das Ausrufezeichen vor dem Objekt). Ist das Objekt also nicht verfgbar, dann wird im Beispiel ausgegeben, dass dies sehr schade sei usw. Im anderen Fall, also wenn das Objekt verfgbar ist, wird eine erfreutere Reaktion ausgegeben.</p>
<p>Im zweiten Teil des Beispiels wird die Verfgbarkeit des Unterobjekts <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/all.htm">document.all</a> abgefragt, das nur einigen Browsern bekannt ist, unter anderem dem Internet Explorer. Auch dabei werden im Beispiel wieder je nach Verfgbarkeit zwei unterschiedliche Stze ausgegeben. An diesem Beispiel ist auch ersichtlich, dass die Abfrage der Verfgbarkeit von Objekten auch zur Browser-Groberkennung dienen kann - vorausgesetzt, man kennt sich bei den vordefinierten JavaScript-Objekten aus und wei, welche Objekte nur von bestimmten Browsern interpretiert werden.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="with">Mehrere Anweisungen mit einem Objekt ausfhren (with)</a></h2>
<p>Hin und wieder kommt es vor, dass Sie mehrere Anweisungen in Folge notieren, die alle mit dem gleichen Objekt arbeiten. Fr diesen Zweck knnen Sie, wenn Sie wollen, eine spezielle verkrzte Schreibweise verwenden.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/title.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
with (document) {
open();
write("<p>Diese Seite hat den Titel " + title + "<\/p>");
close();
}
</script>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Mit <code>with (Objektname)</code> leiten Sie eine solche Schreibweise ein (<i>with = mit</i>). Da normalerweise mehrere Anweisungen folgen, die dieses Objekt verwenden, mssen Sie alle diese Anweisungen in geschweifte Klammern einschlieen.</p>
<p>Im obigen Beispiel wird mit dem <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/document.htm">document</a>-Objekt gearbeitet. Innerhalb der geschweiften Klammern werden die Methoden <code>open()</code>, <code>write()</code> und <code>close()</code> sowie die Eigenschaft <code>title</code> verwendet. Sie alle gehren zum <code>document</code>-Objekt. Normalerweise mssten Sie notieren: <code>document.open()</code> oder <code>document.title</code>. Durch die spezielle Syntax mit <code>with(document)</code> entfllt dies.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Es ist auch mglich, untergeordnete Objekte auf diese Weise anzusprechen, z.B.:</p>
<pre>
with (document.MeinFormular.Feld_1)
value = "Stefan";
</pre>
<p>Achten Sie darauf, dass die aufgerufene Eigenschaft auch tatschlich existiert. Wenn diese fehlt, erhalten Sie eine JavaScript-Fehlermeldung.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="this">Auf aktuelles Objekt Bezug nehmen (this)</a></h2>
<p>Es gibt Flle, in denen es eindeutig ist, auf welches Objekt sich ein Befehl bezieht. In solchen Fllen knnen Sie eine verkrzte Schreibweise benutzen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/alertthis.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html><head><title>Test</title>
</head><body>
<form name="Eingabe">
<input type="text" name="Feld">
<input type="button" value="OK" onclick="alert(this.form.Feld.value)">
</form>
</body></html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Mit dem Schlsselwort <code>this</code> knnen Sie auf ein aktuelles Objekt Bezug nehmen. Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert. Wenn der Anwender auf den Button klickt, tritt der <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="eventhandler.htm">Event-Handler</a> <code>onclick</code> in Aktion, der als Attribut in dem HTML-Tag fr den Button notiert ist. Im Beispiel wird in einem Meldungsfenster der Wert ausgegeben, den der Anwender in dem Eingabefeld eingegeben hat. Normalerweise wrde der Befehl so notiert:<br>
<code>alert(document.Eingabe.Feld.value)</code><br>
Da der Befehl jedoch innerhalb des Formulars steht, auf das er sich bezieht, drfen Sie auch schreiben:<br>
<code>alert(this.form.Feld.value)</code><br>
Das Wort <code>form</code> ist dabei vom <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/forms.htm">forms</a>-Objekt abgeleitet.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="funktionen.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="funktionen.htm">Funktionen</a>
</td></tr>
<tr>
<td class="doc"><a href="variablen.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="variablen.htm">Variablen und Werte</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Sprachelemente</a></td>
</tr>
</table>
<p>© 2007 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
