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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Weiterführende HTML-Elemente / Script-Bereiche in HTML</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie in HTML Bereiche für JavaScript oder vergleichbare Script-Sprachen definieren können">
<meta name="keywords" content="SELFHTML, HTML, JavaScript, Scripts, <script>, <noscript>, type=, src=, charset=, defer">
<meta name="author" content="Stefan Münz, selfhtml@teamone.de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DC.Publisher" content="selfhtml@teamone.de">
<meta name="DC.Date" content="2001-10-27T08:00+01:00">
<meta name="DC.Identifier" content="http://selfhtml.teamone.de/html/transit/scripts.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.Create" content="2001-10-27T08:00+01:00">
<meta name="SELF.Version" content="1">
<meta name="SELF.Pagetype" content="Information">
<meta name="SELF.Path" content="SELFHTML == ../../index.htm // HTML == ../index.htm // Weiterführende HTML-Elemente == index.htm">
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Weiterführende HTML-Elemente</b></a></td>
</tr></table>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#EEEEEE" class="doc" width="110"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></td>
<td bgcolor="#EEEEEE" class="doc" valign="bottom" width="100%"><h2>Script-Bereiche in HTML</h2></td>
</tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" valign="top" align="center">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" border="0" alt="Informationsseite">
</td>
<td bgcolor="#FFFFFF" valign="top" nowrap>
<p>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#definieren"><b>Script-Bereich definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#noscript"><b>Noscript-Bereich definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#weitere"><b>Weitere Angaben zum Script</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#weitere_infos"><b>Weitere Informationen</b></a><br>
</p>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"><img src="../../src/netsc2.gif" width="30" height="30" border="0" alt="Netscape 2.0"> <a class="an" name="definieren">Script-Bereich definieren</a></h2>
<p>Sie können im Dateikopf, also zwischen <code><head></code> und <code></head></code>, oder auch innerhalb des Dateikörpers, also zwischen <code><body></code> und <code></body></code>, einen oder mehrere Script-Bereiche definieren. Innerhalb von Script-Bereichen können Sie Anweisungen der verwendeten Script-Sprache notieren.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/script.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
<script type="text/javascript">
<!--
function Zeit() {
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
if(Jahr < 999) Jahr += 1900;
var Vortag = ((Tag < 10) ? "0" : "");
var Vormon = ((Monat < 10) ? ".0" : ".");
var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr;
document.write("<h1>" + Datum + "<\/h1>")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
Zeit();
//-->
</script>
<p>Aktuelle Nachrichten ...</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit <code><script></code> leiten Sie einen Script-Bereich ein, mit <code></script></code> beenden Sie den Bereich. Innerhalb des Bereichs können Sie Anweisungen der verwendeten Script-Sprache notieren. Aus Sicht von HTML wird alles, was innerhalb des Bereichs steht, als "nackter Text" betrachtet. Dabei kann es allerdings zu Konflikten zwischen einer Sprache wie JavaScript und einem streng SGML-konformen <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/textauszeichnung.htm#html_parser"><b>HTML-Parser</b></a> kommen. Ein solcher Parser betrachtet den Script-Bereich als beendet, sobald er auf die nächste Zeichenfolge <code></</code> stößt. Wenn Sie innerhalb von JavaScript diese Zeichenfolge benötigen, wie im obigen Beispiel in der letzten Anweisung, wo mit Hilfe von <code>document.write</code> eine Überschrift erster Ordnung ins Dokument geschrieben wird. Am Ende des ausgegebenen Textes ist dort <code><\/h1></code> notiert statt <code></h1></code>. Der Backslash dient in JavaScript dazu, ein nachfolgendes Zeichen zu maskieren, was im Beispiel an der Stelle aus JavaScript-Sicht aber keine weitere Bedeutung hat und nichts weiter bewirkt. Der Backslash ist auch nicht für den JavaScript-Interpreter gedacht, sondern für penible HTML-Parser.</p>
<p>Um zu verhindern, dass ältere Browser den Inhalt des Script-Bereichs irrtümlich als Text ausgeben, empfiehlt es sich, den Inhalt in einen <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/kommentare.htm"><b>Kommentar</b></a> zu setzen, so wie im obigen Beispiel. In der letzten Zeile des Scriptbereichs notieren Sie dann am besten einen einzeiligen <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../javascript/sprache/regeln.htm#kommentare"><b>JavaScript-Kommentar</b></a>, eingeleitet durch <code>//</code>, gefolgt vom schließenden HTML-Kommentar <code>--></code>. Der JavaScript-Kommentar ist erforderlich, um Fehlermeldungen in scriptfähigen Browsern zu unterdrücken. Berücksichtigen Sie, dass vor und nach dem HTML-Kommentar ein Zeilenumbruch zwingend erforderlich ist.</p>
<p>Innerhalb des einleitenden <code><script></code>-Tags geben Sie mit dem Pflichtattribut <code>type=</code> an, welche Script-Sprache Sie innerhalb des Bereichs benutzen möchten. Als Wert weisen Sie den <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../diverses/mimetypen.htm"><b>Mime-Type</b></a> der Script-Sprache zu. Die gängigste Angabe ist dabei <code>text/javascript</code> für JavaScript.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Das immer noch sehr vielgenutzte Attribut <code>language=</code>, mit dem viele Web-Designer im einleitenden <code><script></code>-Tag die Script-Sprache angeben (z.B. <code>language="JavaScript"</code> oder <code>language="JavaScript1.2"</code>), gehört nicht zum HTML-Standard und erzeugt ungültiges HTML. Die Browser kennen das <code>language</code>-Attribut zwar und werten es aus, aber für modernere Browser reicht auch das Attribut <code>type=</code> zur Erkennung der Sprache aus.</p>
<p>Auf die Script-Befehle wird hier nicht näher eingegangen. Lesen Sie dazu das JavaScript-Kapitel innerhalb dieser Dokumentation.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <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>
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"><img src="../../src/netsc2.gif" width="30" height="30" border="0" alt="Netscape 2.0"> <a class="an" name="noscript">Noscript-Bereich definieren</a></h2>
<p>Sie können einen Bereich definieren, der nur angezeigt wird, wenn die verwendete Script-Sprache nicht verfügbar ist, das Script also nicht ausführbar ist. Dies ist der Fall, wenn der Browser die Scriptsprache nicht kennt, oder wenn der Anwender das Interpretieren der Scriptsprache in den Einstellungen seines Browsers ausgeschaltet hat.</p>
<p>Wichtig ist eine solche Angabe beispielsweise, wenn Ihre Seiten intensiv JavaScript benutzen, um Inhalte anzuzeigen oder Verweise auszuführen. In solchen Fällen ist ein Projekt ohne JavaScript kaum nutzbar. Mit einem Noscript-Bereich können Sie einen entsprechenden Hinweis einbauen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/noscript.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
<script type="text/javascript">
<!--
function Zeit() {
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Monat = Jetzt.getMonth() + 1;
var Jahr = Jetzt.getYear();
if(Jahr < 999) Jahr += 1900;
var Vortag = ((Tag < 10) ? "0" : "");
var Vormon = ((Monat < 10) ? ".0" : ".");
var Datum = Vortag + Tag + Vormon + Monat + "." + Jahr;
document.write("<h1>" + Datum + "<\/h1>")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
Zeit();
//-->
</script>
<noscript>
<h1>Guten Tag!</h1>
</noscript>
<p>Aktuelle Nachrichten ...</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Das Beispiel enthält genau die gleichen Scripts wie weiter oben bei <img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"> <a href="#definieren"><b>Script-Bereich definieren</b></a> beschrieben. Diesmal wurde jedoch zusätzlich an Browser gedacht, die kein JavaScript kennen, oder bei denen JavaScript ausgeschaltet ist. Für solche Browser wird an der Stelle, an der bei script-fähigen Browsern die script-erzeugte <code>h1</code>-Überschrift mit dem aktuellen Datum eingesetzt wird, einfach eine gewöhnliche <code>h1</code>-Überschrift mit dem Inhalt <code>Guten Tag!</code> notiert.</p>
<p>Mit <code><noscript></code> leiten Sie einen Noscript-Bereich ein, mit <code></noscript></code> beenden Sie ihn. Dazwischen werden <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#block_elemente"><b>Block-Elemente</b></a> erwartet, also beispielsweise Überschriften, Textabsätze oder <code>div</code>-Bereiche.</p>
<p>Web-Browser, die das <code>noscript</code>-Element kennen, zeigen den Inhalt dazwischen nur dann an, wenn der Anwender die benutzte Scriptsprache, etwa JavaScript, deaktiviert hat. Web-Browser, die gar keine Scriptsprachen kennen, kennen zwar auch das <code>noscript</code>-Element nicht, aber einer alten Regel gemäß ignorieren sie die Auszeichnung einfach und zeigen den Inhalt des Elements ganz normal an.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <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>
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie4.gif" width="30" height="30" border="0" alt="MSIE 4.0"><img src="../../src/netsc3.gif" width="30" height="30" border="0" alt="Netscape 3.0"> <a class="an" name="weitere">Weitere Angaben zum Script</a></h2>
<p>Es gibt in HTML eine Reihe weiterer Optionen für Script-Bereiche, die als Attribute im einleitenden <code><script></code>-Tag notiert werden können:</p>
<p>Mit dem Attribut <code>src=</code> können Sie ein Script einbinden, das in einer separaten Datei notiert ist. Das ist von Vorteil, wenn Sie ein Script auf vielen Seiten verwenden wollen. Dann brauchen Sie das Script nur noch zu referenzieren, statt es jedesmal in der Datei zu notieren. Der Script-Bereich in der Datei kann in diesem Fall leer bleiben, aber auch noch zusätzlich ein lokales Script enthalten. Ein Beispiel für das Einbinden externer JavaScript-Dateien und genauere Hinweise dazu finden Sie im Abschnitt <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../javascript/intro.htm#javascriptdateien"><b>JavaScript in separaten Dateien</b></a>.</p>
<p>Wenn Sie mit <code>src=</code> ein externes Script einbinden, können Sie zusätzlich mit dem Attribut <code>charset=</code> den <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../inter/zeichensaetze.htm"><b>Zeichensatz</b></a> bestimmen, nach dem die externe Quelle behandelt werden soll. Das ist beispielsweise wichtig, wenn Sie in einem Script deutsche Umlaute und Sonderzeichen nicht maskieren, z.B. bei HTML-Ausgaben. In diesem Fall können Sie <code>charset="ISO-8859-1"</code> angeben, um dem Browser mitzuteilen, dass er im Zweifelsfall diesen Zeichensatz verwenden soll. Erlaubt sind Zeichensatzangaben, wie sie auf der Web-Adresse <img src="../../src/en.gif" width="16" height="10" border="0" alt="englischsprachige Seite"> <a target="_top" href="http://www.iana.org/assignments/character-sets"><b>http://www.iana.org/assignments/character-sets</b></a> angegeben sind.</p>
<p>Ein weiteres Attribut namens <code>defer</code> (Standalone-Attribut) soll verhindern, dass ein Script dynamisch Text schreibt. Einzelne JavaScript-Anweisungen wie <code>document.write()</code> werden dadurch unterbunden. Beachten Sie, dass dieses Attribut bislang jedoch nur von neueren Versionen des MS Internet Explorers interpretiert wird.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <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> 
</td></tr></table>
<h2 class="Sh2"><a class="an" name="weitere_infos">Weitere Informationen</a></h2>
<p>In der <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../referenz/index.htm"><b>HTML-Referenz</b></a> finden Sie genaue Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#script"><b>Element-Referenz</b></a> für Script-Bereiche<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#script"><b>Attribut-Referenz</b></a> für Script-Bereiche<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#noscript"><b>Element-Referenz</b></a> für Noscript-Bereiche<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#noscript"><b>Attribut-Referenz</b></a> für Noscript-Bereiche</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td bgcolor="#EEEEEE" class="doc" align="right"><a href="../attribute/allgemeine.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td bgcolor="#FFFFFF"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../attribute/allgemeine.htm"><b>Allgemeine Universalattribute</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="stylesheets.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurück"></a></td>
<td bgcolor="#FFFFFF" width="100%"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="stylesheets.htm"><b>Stylesheet-Bereiche in HTML</b></a>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> </td></tr>
</table>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Weiterführende HTML-Elemente</b></a></td>
</tr></table>
<p>© 2001 <img src="../../src/mail.gif" width="15" height="10" border="0" alt="E-Mail"> <a href="mailto:selfhtml@teamone.de">selfhtml@teamone.de</a></p>
</body>
</html>
|
