Javascript in HTML-Code
|
JS-Einbettung
Das Beispiel rechts zeigt, wie Javascript-Code mit Hilfe
eines <script>-Elements in den HTML-Quelltext eingebettet wird.
►
Der gesamze Text zwischen <script>
und </script> wird als Javascript interpretiert. (In Beispiel
lediglich eine alarm-Anweisung, die ein Textfenster anzeigt.).
►
Jede Webseite kann beliebig viele <script>-Elemente
enthalten.
►
<script>-Elemente können sich (fast) an jeder
beliebigen Stelle einer Webseite befinden. Guter Stil ist jedoch nur die Einbettung
in den <head> </head> einer Webseite.
►
Mit <script>-Elementen kann man theoretisch auch
andere Programmiersprachen einbetten. Javascript ist die einzige Script-Sprache, die bei
allen Browsern vorausgesetzt werden kann. Alle anderen Script-Sprachen
sind auf ein Betriebssystem oder einen Browser beschränkt, oder müssen eigens
installiert werden.
|
Ältere Form der Einbettung von Javascript-(JS)-Quelltext (Code) in den HTML-Quelltext
einer Webseite:
<script type="text/javascript">
</script>
|
Diese (bessere) Form der JS-Einbettung gibt die
→
MIME-Type application/javascript von Javascript an.
♥
Verwenden sie in neuen Webseiten nur diese Variante, und ändern sie alte
Webseiten bei der nächsten Revision.
|
Neue Version mit einer anderen
→
MIME-Type:
<script type="application/javascript">
</script>
|
|
Diese Form der JS-Einbettung ist falsch und sollte nicht verwendet werden,
obwohl sie noch immer von den meisten Browsern 'verstanden' wird.
|
Nicht verwenden:
<script language="Javascript">
</script>
|
JS im <head>
Innerhalb des <head>-Elements einer Webseite
ist der bevorzugte Platz für Javascript-Code.
Hier bringen sie alle globalen JS-Variablen und alle JS-Funktionen unter.
Der JS-Code kann auch direkt (sofort) ausführbare Elemente enthalten. Beachten sie dabei,
dass zum Zeitpunkt der Ausführung noch kein Element des <body>
existiert, d.h. man kann mit DOM-Methoden noch nicht auf die Elemente (Texte, Bilder, ...) der
Webseite zugreifen.
|
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>...</body>
</html>
|
JS im <body>
Die Einbettung von <script>-Elementen in
das <body>-Element einer Webseite sollte man nach
Möglichkeit vermeiden. Sie ist nur dann notwendig, wenn mit der
document.write-Methode Text direkt in eine Webseite geschrieben werden soll.
Diese Methode sollte man nicht mehr verwenden, z.B. weil sie nicht
→ XHTML
kompatibel ist.
Weit bessere Möglichkeiten zum Schreiben von Text und HTML-Elementen bieten
→ DOM-Methoden.
|
<html>
<head>...</head>
<body>
<script type="text/javascript">
</script>
</body>
</html>
|
JS-Bibliothek
Es besteht die Möglichkeit, JS-Code in eine eigene Datei
*.js auszulagern. Solche externe JS-Dateien werden am besten
im <head> einer Webseite eingebunden.
Das ist für wiederverwendbaren JS-Code sinnvoll: Eine JS-Bibliothek wird
vom Browser nur einmal geladen, kann aber mit beliebig vielen Webseiten verwendet
werden.
In solchen Dateien sind allgemein verwendbare JS-Funktionen gut aufgehoben.
Sie können so wesentlich einfacher verwaltet werden: Jede Änderung wirkt
sich automatisch auf alle Webseiten aus, welche diese JS-Bibliothek verwenden.
Eine externe JS-Datei kann jeden beliebigen JS-Code enthalten, jedoch
keine HTML-Elemente wie z.B.
<script>
In fast alle Seiten dieses Webs werden Javascript-Bibliotheken eingebunden.
|
Einbindung einer JS-Bibliothek (Datei *.js ) in eine Webseite:
<html>
<head>
<script type="text/javascript" src="lib.js" />
</head>
<body>...</body>
</html>
|
Browser ohne JS-Fähigkeit
In der IT-'Urzeit' gab es einige Browser (Netscape<2, M$IE<3), die über
keine Javascript-Fähigkeiten verfügten. Um zu verhindern, dass der JS-Code
innerhalb von <script>-Elementen
irrtümlich als HTML-Code interpretiert wird, wurden HTML-Kommentare eingefügt.
Diese Form der Codierung schadet zwar nicht, ist jedoch heute völlig
überflüssig.
|
|
XML-Kompatibilität
Der offene →
XML-Standard verlangt eine deutliche Abgrenzung von Code-Bereichen, die von
der XML-Interpretation ausgenommen werden sollen (CDATA).
Das ist für →
XHTML notwendig, aber auch für alle anderen Mitglieder der XML-Familie.
Die zusätzliche Abgrenzung mag kompliziert erscheinen, ermöglicht jedoch die
Verwendung von Javascript nicht nur auf Webseiten, sondern zusammen mit beliebigen
Mitgliedern der XML-Familie, z.B.
→ SVG Objekt-Grafik.
|
<script type="text/javascript">
// <![CDATA[
// JS-Code
// ]]>
</script>
|
Das <noscript>-Element
Dieses Element kann beliebig oft innerhalb des
<body>-Elements vorkommen. Der darin enthaltene HTML-Code wird nur
dann ausgeführt, wenn ein Browser kein Javascript versteht,
oder Javascript abgeschaltet wurde.
Das Element wird kaum verwendet, bietet die Möglichkeit, versteckte
Stichworte für die automatische Bewertung der Webseite (Spiders, Bots, ...)
unterzubringen, ist jedoch nicht mehr zeitgemäß.
|
<noscript>
Javascript einschalten !
</noscript>
|
Das Internet bietet Berge von Informationen zum Thema Javascript
Javascript (JS) wurde 1995 von
SelfHTML
