Wir haben bereits das onClick-Ereignis kennengelernt. Im folgenden Beispiel nutzen wir den Body-Tag zum Start unserer zwei Funktionen. Per „onLoad“ führen wir die erste Funktion sofort beim Start aus. Wird das Browserfenster beendet, sorgt „onUnload“ für das Ausführen der zweiten Funktion.
<script type="text/javascript">
function Start()
{
alert("Guten Tag. Du hast einen " + navigator.appName + " Browser!");
}
function Ende()
{
alert("Auf Wiedersehen!");
}
</script>
Wir haben bereits in einem früheren Beispiel den Aufruf einer Funktion per Schaltfläche gesehen. Wir können JavaScript-Funktionen aber auch per Link ausführen. Dazu wird im a-Tag per href definiert, dass es sich um auszuführendes JavaScript handelt. Nach einem Doppelpunkt erfolgt die Angabe des Funktionnamens. Vergessen Sie nicht das abschließende Semikolon.
<script type="text/javascript">
function Zufallszahl()
{
alert("Der Zufall will es so: " + Math.random());
}
</script>
<a href="JavaScript:Zufallszahl();">Klick mich!</a>
Im folgenden Beispiel erzeugen wir per HTML eine Textbox für die Eingabe einer Zahl sowie eine Schaltfläche. Wird diese geklickt, führen wir die Funktion „Quadrat“ aus. Diese Funktion legt eine Variable „Ergebnis“ an. Gleichzeitig holt sich die Funktion aus dem Dokument, in dem die Form „Formular“ definiert ist, den Wert (Value) des Elementes „Eingabe“. Dieser Wert wird mit sich selbst multipliziert und per „alert();“ ausgegeben.
<script type="text/javascript">
function Quadrat()
{
var Ergebnis = document.Formular.Eingabe.value * document.Formular.Eingabe.value;
alert("Das Quadrat von " + document.Formular.Eingabe.value + " ist " + Ergebnis);
}
</script>
<form enctype="application/x-www-form-urlencoded" method="get">
<input name="Eingabe" size="3" type="text" />
<input onclick="Quadrat()" type="button" value="Berechne" />
</form>