Seit der Sprachversion 1.1 von JavaScript und seit HTML 4.0 ist es möglich, JavaScript-Code in separaten Dateien zu notieren. Das ist sehr nützlich, wenn Sie gleiche JavaScript-Funktionen in mehreren oder vielen HTML-Dokumenten verwenden wollen. So brauchen Sie den Code nur einmal zu notieren und können ihn beliebig oft referenzieren.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Say Hello!</title> <script src="say-something.js" charset="utf-8" defer> </script> </head> <body onload="sayHello()"> </body> </html>
function sayHello() { document.getElementsByTagName("body")[0].innerHTML = '<span style="font-size: 100px;">Hello World!</span>'; }
Das Beispiel zeigt ein HTML-Dokument, das einen Scriptbereich enthält, markiert durch <script>…</script>. Der Inhalt ist in diesem Fall jedoch leer. Stattdessen wird mit Hilfe des src-Attributs eine externe JavaScript-Datei namens say-something.js eingebunden.
Mit dem charset-Attribut können Sie eine Angabe zur Zeichenkodierung machen, die in der externen JavaScript-Datei verwendet wird. Das ist beispielsweise nötig, wenn das Script Ausgaben in einer Sprache wie Deutsch erzeugt, die nicht nur ASCII-Zeichen enthält (siehe auch: Zeichenkodierung).
Das defer-Attribut können Sie angeben, wenn das extern eingebundene Script erst dann ausgeführt werden darf, nachdem das HTML-Dokument (und damit dessen Dokumentobjekt-Struktur) vollständig geladen ist. Im obigen Beispiel ist das eigentlich nicht nötig, da der ausgeführte Scriptcode in einer Funktion steht, die durch den Event-Handler onload im <body>-Tag ausgeführt wird, was den gleichen Effekt hat. Das defer-Attribut ist ein Standalone-Attribut. Seine Wirkung tritt ein, wenn es notiert wird, wie im obigen Beispiel. Wenn Sie XHTML-konform arbeiten, notieren Sie es in der Form defer="defer".
Mit HTML5 wurde das defer-Attribut um ein weiteres Attribut ergänzt: nämlich um das Attribut async. Damit weisen Sie den Browser an, mit der Ausführung des externen Scripts sofort zu beginnen, sobald das möglich ist, auch dann, wenn das HTML-Dokument noch gar nicht vollständig geladen ist. Im Unterschied zum Default-Verhalten, das darin besteht, dass ein ladendes Script das weitere Laden des HTML-Dokuments erst mal verzögert, wird bei Angabe von async das HTML-Dokument weiter geladen (das Laden der Scriptdatei unterbricht also nicht das Laden des HTML-Dokuments).
Bei der Wertzuweisung an das src-Attribut gelten alle Möglichkeiten, die im Abschnitt über Referenzierung beschrieben sind. Sie können also lokal gespeicherte Scriptdateien referenzieren, aber auch solche von anderen Webservern. Lokal gespeicherte Scripts können Sie absolut oder relativ adressieren. Beispiele:
<script src="verzeichnis/datei.js">
<script src="/verzeichnis/unterverz/datei.js">
<script src="../datei.js">
<script src="http://www.example.org/verzeichnis/datei.js">
Die referenzierte Datei sollte, wenn es sich um ECMAScript/JavaScript handelt, die Dateinamenerweiterung .js erhalten. Die Datei muss eine reine Textdatei sein und darf nichts anderes als JavaScript-Code enthalten.
JavaScript-Code zwischen <script> und </script> wird ignoriert, wenn das einleitende <script>-Tag eine externe JavaScript-Datei einbindet. Sie können aber natürlich einen weiteren Scriptbereich notieren, in dem Sie Scriptcode direkt im HTML-Dokument notieren können.
Es kann passieren, dass ein JavaScript, das in einer separaten Datei notiert ist, lokal einwandfrei funktioniert, aber nach dem Hochladen der Dateien auf einen Webserver plötzlich nicht mehr. In diesem Fall muss in der Konfiguration des Webservers der MIME-Typ text/javascript für Dateien mit der Endung .js hinzugefügt werden. Alternativ können Sie auch probieren, im einleitenden <script>-Tag beim type-Attribut den MIME-Typ application/x-javascript anstelle von text/javascript zu notieren. Bei einigen Servern funktioniert es dann.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.