JavaSript in eine HTML Datei einbinden

JavaScript in HTML einbinden

Es gibt zwei Möglichkeiten ein JavaScript in eine HTML einzubinden. Die erste ist direkt in den Code der HTML Datei, so wie es hier auf den Demoseiten gemacht wird und die zweite, über eine externe Datei. Ein JavaScript über eine externe Datei in HTML einzubinden hat dabei mehrere Vorteile gegenüber der direkten Einbindung. Ein großes JavaScript direkt einzubinden, macht diese meist sehr unübersichtlich. Ein weiterer Vorteil ist, durch eine externe Datei, kann man das JavaScript auf mehreren Seiten verwenden. Das spart Platz und sollte das Script einmal angepasst werden, muss man es nur in der externen Datei und nicht auf jeder Seite ändern.

Ein JavaScript direkt in eine HTML Datei einbinden

ein JavaScript beginnt mit der Anweisung <script type="text/javascript"> oder <script language="javascript" type="text/javascript"> und endet mit </script>. Die language="javascript Version sollte nicht mehr verwendet werden, da sie in einigen Browsern nicht korrekt interpretiert wird. In Zukunft wird es den Typ <script type="application/javascript"> geben. Dieser wird aber noch nicht von allen Browsern unterstützt.

Bleiben wir in der Gegenwart und verwenden <script type="text/javascript">. Wo ein JavaScript in der HTML Datei steht ist durch keinerlei Anweisungen definiert. Das heißt Sie können ihn in den <head> oder auch in den <body> Bereich erstellen oder kopieren. Es hat sich jedoch eingebürgert den <head> Bereich zu nehmen. Dadurch liest der Browser den Code beim öffnen der Seite aus und dieser steht damit bei der Ausfürung schon zur Verfügung. Manchmal ist es aber notwendig das ein JavaScript schon beim öffnen ausgeführt wird. Als Beispiel sei auf der Startseite von scriptwelt.org die Anzeige der letzten Aktualisierung, im unteren Bereich genannt. In diesem Fall ist es erforderlich, den Script-Bereich innerhalb des HTML-Dateikörpers, also innerhalb von <body> und </body> zu notieren.

Einbinden von JavaScript Code in einer externen Datei

die elegantere Art Javascripts einzubinden ist durch eine externe Datei. Dazu müssen Sie in der HTML Datei, dem Browser zeigen, wo er das Script findet. Nehmen wir mal an sie wollen das Script mit dem Namen Test in einer externen Datei einbinden. Dazu müssen Sie im <head> Bereich <script src="Test.js" type="text/javascript"></script> einbinden. Das src steht für source = Quelle. Wichtig ist dabei den kompletten Quellpfad anzugeben. In unserem Fall nehmen wir mal an, beide sind im selben Verzeichnis. Die externe Script Datei muss dabei eine reine ASCII-Datei sein und darf nur JavaScript-Code enthalten. Die Datei muss dabei die Endung .js haben.

Noch eine Anmerkung für externe Datein. Eine externe Datei kann nur auf einem Webserver ausgefürt werden, wenn der MIME-Typ text/javascript für Dateien mit der Endung .js in der Konfiguration des Web-Servers aufgenommen ist. In der Regel ist dem so. es sei nur der Form halber erwähnt.

Der JavaScript Eventhandler

bleibt nun noch der Eventhandler. Dieser ist das Verbindungselement zwischen HTML und JavaScript. Nicht immer soll ein JavaScript gleich beim öffnen einer Datei ausgefürt werden, sondern erst bei einen bestimmten Ereignis. Als Bespiel sei die Demo des Javascripts hier genannt sein. Das Script wird erst ausgefürt, wenn man mit der Maus auf das Bild klickt. In dem Fall ist der Eventhandler onClick. In dem Beispiel wird das JavaScript bei einem click auf das Bild ausgefürt. Bitte beachten Sie: Eventhändler sind nur in bestimmten HTML Tags erlaubt. Bei unseren Besispiel sind es nach HTML 4.0:

Groß- und Kleinschreibung

anders als HTML unterscheidet JavaScript zwischen Groß- und Kleinschreibung. Eventhandler wie onClick oder omLoad gehören zum HTML Code und werden deshalb auch erkannt wenn sie klein geschrieben werden.

SCRIPT-Tag

Alle JavaScripte müßen zwischen einen SCRIPT-Tag eingeschlossen werden. Dieser Tag zeigt dem Browser, daß es sich um ein JavaScript handelt. Verzichtet man auf den Script Tag, würde der Browser das Script als HTML Code interpretieren und eine Ausführung wäre nicht möglich.

Sollte nun ein Besucher ohne JavaScript fähigen Browser auf Ihre Seite kommen, kann es vorkommen, daß sein Browser ihm den Code des JavaScript als Text auf der Webseite ausgibt. Um das zu verhindern ist es üblich den Code in einem HTML Kommentar zu schreiben. Da nun aber der JavaScript - interpreter daran gehindert werden muss den Kommentar als JavaScript zu deuten, wird dieser zum Abschluss mit dem JAvaScript Kommentar geschlossen. Hört sich kompliziert an, ist es aber nicht, wie das Beispiel beweist

NOSCRIPT-Tag

Sollte ein Besuche Ihrer Webseite JavaScript deaktiviert haben oder sein Browser unterstützt kein JavaScript, können Sie durch den Noscript Tag Hinweise für diese User ausgeben.

<NOSCRIPT>
Diese Seite wird nur mit JavaScript korrekt dargestellt. Bitte schalten Sie JavaScript in Ihrem Browser ein!
</NOSCRIPT>

JavaScript komprimieren

Auch wenn man die JavaScript-Dateien auslagert, können sie noch eine beachtliche Größe ereichen. Darum sollte man als Alternative eine Komprimierung der JavaScripte versuchen. Eine Methode ist das entfernen überflüssiger Kommentare und Leerzeichen. Achten Sie jedoch bitte aus die Copyrigh Kommentare, diese dürfen nicht entfernt werden!
Das Komprimieren von JavaScript ist auch via Online-Tools möglich. Als Beispiel möchte ich den

JavaScript und CSS Compressor von Sergej Müller

anführen. Jedoch sollte man bedenken, je mehr man komprimiert, um so unübersichtlicher wird das Script. Ausserdem sollte dringend nach der Komrimierung auf Funktionalität geprüft werden. Nicht immer ist das Ergebnis befridiegend.

Performance Optimierung via gzip- Kompression

Mit Hilfe von Gzip oder GNU zip lässt sich sehr effektiv JavaScript komprimieren. Die Auslieferung erfolgt unter Verwendung von mod_rewrite. Eine genaue Beschreibung habe ich bei Alinki.com gefunden.

Sie sehen, ein sehr komplexes Thema. Ich empfehle bei Interesse weiterführende Literatur.

JavaScript Rubrik