Was ist JavaScript?

Einbettung von Skripten

JavaScripts können an beliebiger Stelle eingefügt werden, sowohl in den Header- als auch in den Body-Teil. Im Header definiert man am besten Funktionen und allgemein benötigte Variablen. Im Body schreibt man die Zeilen, die schon während des Ladens des Dokuments ausgeführt werden sollen.

Man kann das Skript direk im HTML-Code einfügen. Dabei sollte man den Code durch einen HTML-Kommentar davor schützen, von nicht JavaScript-fähigen Browsern interpretiert zu werden. Dies sieht so aus.

<script language="JavaScript">
<!--
document.writeln("Ausgabe mit JavaScript");
//-->
</script>

Man kann den Code aber auch in eine eigene Datei schreiben, das ist besonders zu empfehlen, wenn der Code in mehreren Seiten benötigt wird. Man verwendet für die Dateien meisten die Endung "js".

<script language="JavaScript" src="meincode.js" type="text/javascript"></script>

Aufruf von Skripten

Skriptzeilen können beliebig zwischen den HTML-Code geschrieben werden. Sie werden dann ausgeführt, wenn die HTML-Seite in den Browser geladen wird:

<script language="JavaScript">
<!--
if(navigator.appName == "Netscape")
    document.writeln("Schön, dass du mit einem Netscape-Browser hier bist!");
else
   document.writeln("Hast Du es schon einmal mit Netscape versucht?");
//-->
</script>

Skripte können an viele HTML-Elemente angeschlossen werden und werden bei bestimmten Ereignissen, wie z.B. einem Mausklick oder beim verlassen eines Formularfeldes aufgerufen.

Dafür sollte man die Skripte als Funktionen schreiben. Eine Funktion wird z.B. definiert mit:

function historie(eintraege) {
       history.back(-eintraege);
}


Die HTML-Elemente stellen diverse Ereignisse mit Namen on... zur Verfügung. abhängig von diesen Ereignissen können JavaScript-Funktionen aufgerufen werden.

Hier ein Beispiel für einen Button:

Sein Verhalten resultiert aus folgendem Code:

<script language="JavaScript">
function bgcolor(field, color) {
   document.Demo.item(field).style.backgroundColor = color;
}

function alarm( ) {
   window.alert("Hilfe, ich bin geclickt");
}
</script>

<form name="Demo">
<input type="button" style="background-color: lightblue" name="knopf" value="Klick mich"
onmouseover="bgcolor(0, 'yellow');" onmouseout="bgcolor(0, 'lightblue');" onclick="alarm();">
<input type="button" style="background-color: lightred" name="knopf" value="Klick mich"
onmouseover="bgcolor(1, 'lightgreen');" onmouseout="bgcolor(1, 'lightred');" onclick="alarm();">
</form>

© Mario Boller-Olfert 2000-2002 - E-Mail:Kontaktformular - 123-Byte - Homepage