JavaScript - Einbindung in HTML

1. JavaScript - Einbindung in HTML

1.1. Definition von JavaScript-Bereichen in HTML
1.1.1. direkte Einbindung
1.1.2. Einbindung separater Dateien
1.2. JavaScript-Befehle in HTML-tags als Antwort auf Ereignisse

1.1. Definition von JavaScript-Bereichen in HTML

Für die Einbindung von Scriptsprachen wurde das <script ...>-tag in den HTML-Standard eingeführt. JavaScript-Bereiche werden durch <script type="text/javascript"> ... </script> eingebunden. Zwischen dem einführenden und dem ausführenden tag wird der Quelltext eingebaut. Browser, die kein JavaScript kennen, ignorieren die tags, jedoch nicht den dazwischen stehenden Quelltext. Um dadurch bedingte Fehlinterpretationen zu vermeiden, sollte der Quelltext zusätzlich als HTML-Kommentar markiert werden. Dies ist jedoch lediglich eine Empfehlung und keine unbedingte Pflicht. Die Compiler/Interpreter stören sich an diesen Markierungen nicht. Die Einleitung eines HTML-Bereiches bekommt dadurch die Form <script type="text/javascript"></script>. Die Beendigung des Kommentars muß dabei durch // als JavaScript-Kommentar getarnt werden, da die Beendigung sonst als JavaScript-Befehl interpretiert wird.

1.1.1. direkte Einbindung

Es empfiehlt sich, kleinere Scripte direkt in HTML-Seiten einzubinden:

<html> <head> <title>Hello World</title> <script type="text/javascript">  </script> </head> <body> </body> </html>

Der Befehl alert("Hello World"); produziert eine Bildschirmmeldung mit dem Inhalt "Hello World".

1.1.2. Einbindung separater Dateien

Will man die gleichen JavaScript-Funktionen in mehreren HTML-Seiten verwenden oder werden die Scripte größer, sollte der Quelltext besserer Übersichtlichkeit halber in separate Dateien ausgelagert werden:

<html> <head> <title>Hello World</title> <script type="text/javascript" src="helloworld.js"> </script> </head> <body> </body> </html>

Nun muß allerdings eine separate Datei mit dem Namen "helloworld.js" angelegt werden. Diese enthält in unserem Fall nur einen Befehl:

alert("Hello World");

1.2. JavaScript-Befehle in HTML-tags als Antwort auf Ereignisse

Als Reaktion auf Ereignisse wie beispielsweise Benutzereingaben lassen sich einzelne Befehle oder Gruppen von Befehlen auch in normale tags einbinden.

<body onLoad="alert("Hello World")">

Diese Einbindung in das <body ...>-tag bewirkt prinzipiell das gleiche wie die vorigen Beispiele, nur daß die Meldung erst nach dem Abschluß des Ladevorganges ausgegeben wird.

<form> <input type=button value="Hello World" onClick="alert("Hello World")"> </form>

Diese Variante bewirkt die Ausgabe der Meldung beim Clicken auf den durch das <input ...>-tag erzeugten Button.

Ereignisse nach HTML-Standard 4.0 des W3-Konsortiums oder JavaScript-Spezifikation
Ereignis	Bedeutung Anwendung
`onAbort`	Abbruch vor vollständigem Laden für Bilder (<img> -tag)
`onBlur`	Verlassen eines Seitenelementes (normalerweise durch Aktivieren eines anderen Seitenelementes) vorwiegend für Formularelemente wie Textfelder und Buttons (<textarea>, <input>, <select>, <button> -tags), aber auch <a>, <area>, <label> -tags
`onChange`	Änderung für Formularelemente (<textarea>, <input>, <select> -tags)
`onClick`	Click auf ein Seitenelement für alle sichtbaren Seitenelemente
`onDblClick`	Doppelclick auf ein Seitenelement für alle sichtbaren Seitenelemente
`onError`	Fehler beim Laden für Bilder (<img>-tag)
`onFocus`	Aktivieren eines Seitenelementes vorwiegend für Formularelemente wie Textfelder und Buttons (<textarea>, <input>, <select>, <button> -tags), aber auch <a>, <area>, <label> -tags
`onKeyDown`	Hereindrücken einer Taste auf der Tastatur für alle Seitenelemente, die sich aktivieren lassen, im aktivierten Zustand
`onKeyPress`	erfolgter Tastendruck (drücken und loslassen) für alle Seitenelemente, die sich aktivieren lassen im aktivierten Zustand
`onKeyUp`	Loslassen einer Taste auf der Tastatur für alle Seitenelemente, die sich aktivieren lassen im aktivierten Zustand
`onLoad`	erfolgtes Laden einer Seite für Seiten (<body>, <frameset> -tags)
`onMouseDown`	Hereindrücken einer Maustaste über einem Seitenelement für alle sichtbaren Seitenelemente
`onMouseMove`	Bewegung des Mauszeigers unabhängig von Maustasten für alle Seitenelemente, die sich aktivieren lassen im aktivierten Zustand
`onMouseOut`	Mauszeiger verläßt den Anzeigebereich eines Seitenelementes für alle sichtbaren Seitenelemente
`onMouseOver`	Mauszeiger bewegt sich auf den Anzeigebereich eines Seitenelementes für alle sichtbaren Seitenelemente
`onMouseUp`	Loslassen einer Maustaste über einem Seitenelement für alle sichtbaren Seitenelemente
`onReset`	Zurücksetzen eines Formulars Formulare (<form> -tag)
`onSelect`	Markieren von Text Text enthaltende Elemente von Formularen (<textarea>, <input> -tags)
`onSubmit`	Senden eines ausgefüllten Formulares Formulare (<form> -tag)
`onUnLoad`	Verlassen einer Seite für Seiten (<body>, <frameset> -tags)
`href`	Aktivieren eines Verweises Verweise (<a> -tag) Dieses Ereignis stellt eine Sonderform dar, da es nicht hauptsächlich für Ausführung von Skriptbefehlen gedacht ist, sondern normalerweise andere HTML-Seiten lädt. Die Notation der Befehlszeile weicht daher von der anderer Eventhandler ab. Dem Befehl muß immer der URL-Bezeichner "javascript:" vorangestellt werden: `<a href="javascript: Befehl">`

Autor: Ulrich Kritzner