Websiteentwicklung: JavaScript: Funktionen
Funktionen[Bearbeiten]
Funktionen dienen dazu, Anweisungen zusammenzufassen, die man in einem Programm mehrfach ausführen wird. Außerdem wird der Code innerhalb eines Funktionsblocks vom JavaScript-Interpreter nicht sofort ausgeführt, sondern erst beim Funktionsaufruf. Der Funktion können beim Aufruf eine oder mehrere Argumente zwischen Klammern mitgegeben werden. Wenn die Funktion ohne Argumente aufgerufen wird, muss dennoch ein leerer Klammernsatz „()“ hinter dem Schlüsselwort function angegeben werden. Oft werden die der Funktion übergebenen Werte auch als Parameter der Funktion bezeichnet. Streng genommen sind die Argumente die Werte, die ein Funktionsparameter annimmt. Die Begriffe Parameter und Argument werden in der Literatur zu JavaScript allerdings häufig synonym eingesetzt.
Ein zusätzlicher Vorteil für die Fehlervermeidung ist die Tatsache, dass – wie schon im Kapitel Werte und Variablen erwähnt – alle der Funktion übergebenen und alle innerhalb der Funktion mit „var“ definierten Variablen nur lokale Gültigkeit haben, von außerhalb der Funktion also nicht zufällig und ungewollt verändert werden können. Der Rückgabewert einer Funktion, den Wert, den die Funktion sozusagen ausliefert, definieren wir hinter dem Schlüsselwort return, gefolgt von der entsprechenden Variablen. Es gibt allerdings auch Funktionen, die keinen Rückgabewert übergeben. das Schlüsselwort return entfällt dann.
Syntax[Bearbeiten]
Definition[Bearbeiten]
Die allgemeine Syntax für eine Beispiel-Funktion „fName“lautet:
function fName(Variable_1, Variable_2, ..., Variable_n)
{
//Funktionszweck als Kommentar hinterlegen
Anweisung 1;
Anweisung 2;
...
Anweisung n;
return Variable;
}
Aufruf[Bearbeiten]
Die allgemeine Syntax für einen Funktionsaufruf der Funktion „fName“ lautet:
Variable=fName(Variable_1, Variable_2, ..., Variable_n)
Die aufrufende Variable erhält dann den Wert, der hinter dem Schlüsselwort return innerhalb der Funktion übergeben wird.
Zu theoretisch? Betrachten wir einige kleine Beispiele:
Beispiel: Quadratzahl[Bearbeiten]
Eine Funktion, die einen Parameter erwartet und einen Wert zurückgibt:
function fQuadrat(dZ)
{
// gibt das Quadrat einer als
// Parameter übergebenen Zahl zurück
var dQ=dZ*dZ;
return dQ;
}
Ein Funktionsaufruf könnte etwa lauten:
var dY=fQuadrat(dX);
Eine HTML-Seite mit zwei Textfeldern und einem Button könnte etwa so aussehen:
<html>
<head>
<title>Quadratzahl</title>
</head>
<body>
<script type="text/javascript">
function fQuadrat(dZ)
{
// ermittelt das Quadrat einer
// übergebenen Zahl
var dQ=dZ*dZ;
return dQ;
}
function fBerechne()
{
// ermittelt die 1. Zahl aus Textfeld 1
// ruft die Funktion fQuadrat auf mit
// dem Parameter 1. Zahl und schreibt
// das Ergebnis in das zweite Textfeld
var dX=parseFloat(document.frmQuadrat.txtZahl1.value);
var dY=fQuadrat(dX);
document.frmQuadrat.txtZahl2.value=dY;
}
</script>
<form method="get" name="frmQuadrat">
<h2>Berechnung der Quadratzahl einer Zahl</h2>
<b>Gib eine Zahl ein:</b>
<input type="text" name="txtZahl1"><br>
<b>Quadrat der Zahl:</b>
<input type="text" name="txtZahl2"><br>
<input type="button" name="btnStart" value="Quadrat berechnen"
onClick="fBerechne()">
</form>
</body>
</html>
Erläuterung: Die Funktion „fBerechne“ erwartet keinen Parameter und gibt auch keinen Wert zurück. Sie liest den Wert des ersten Textfeldes aus, wandelt ihn mit Hilfe der JavaScript-Methode „parseFloat“ in eine Dezimalzahl und ruft die Funktion „fQuadrat“ auf, übergibt als Parameter die ermittelte Zahl aus dem ersten Textfeld, bekommt die Quadratzahl ausgeliefert und schreibt das Ergebnis in das zweite Textfeld. Die Funktion „fBerechne“ ist über den EventHandler (Erklärung folgt später) „onClick“ mit dem Button „btnStart“ verknüpft.
Funktionen mit veränderlicher Anzahl an Argumenten[Bearbeiten]
JavaScript kann innerhalb der Funktion auch mit einer variablen Anzahl an Argumenten umgehen. Dazu gibt es das Argumenten-Array (näheres zu Arrays im Kapitel Arrays). Die Argumente können dann folgendermaßen ausgelesen werden :
var iAnz=FunktionsName.arguments.length // Anzahl der Argumente
var x1=FunktionsName.arguments[0]; //erstes Argument
var x2=FunktionsName.arguments[1]; //zweites Argument
...
var xn=FunktionsName.arguments[n-1]; //n-tes Argument
Funktionen mit fehlenden Argumenten[Bearbeiten]
Sollten Funktionen, die vom Anwender mit Übergabewerten versorgt werden müssen, ohne Werte aufgerufen werden, kann folgende Syntax für das Arbeiten mit Default-Werten sorgen:
function fTest(Wert)
{
var DefaultWert="0"
if(typeof Wert=="undefined")
{
return DefaultWert;
}
else
{
//Funktionsrumpf
Anweisung1;
...
Anweisung n;
return FunktionsWert;
}
}
Rekursive Funktionen[Bearbeiten]
Funktionen können sich auch selbst aufrufen – man spricht dann von rekursiver Programmierung. Besonderes Augenmerk ist dann darauf zu richten, dass die Funktion in jedem Fall ein vorgesehenes Ende erreicht, also nicht unendlich weiterläuft. Etwaige Abfragen auf Gleichheit sollten lieber durch Abfragen auf die Größe der Differenz (Unterschreitung eines vorher festgelegten sinnvollen Wertes) ersetzt werden. Zudem braucht rekursive Programmierung unter Umständen viel Arbeitsspeicher: bei mehrfacher, tief geschachtelter Rekursion kann es geschehen, dass der vorhandene Arbeitsspeicher nicht für den aktuellen Programmablauf ausreicht.
Das folgende Beispiel verdeutlicht die Funktion eines rekursiven Funktionsaufrufs an einer Beispielfunktion: Die Fakultät von n – geschrieben – als Wert der Multiplikation der ersten n positiven ganzen Zahlen also
<html>
<head>
<title>JavaScript - Rekursive Funktion</title>
<script type="text/javascript">
function fFakultaet()
{
var n=Math.abs(parseInt(prompt("Bitte eine positive, ganze Zahl eingeben:")));
var f=fFak(n);
alert("Fakultaet von " + n + " = " + f);
}
function fFak(n)
{
if(n==0)
{
return 1;
}
else
{
return n*fFak(n-1);
}
}
</script>
</head>
<body>
<h3>JavaScript - Rekursive Funktion</h3>
<noscript>Bitte JavaScript einschalten!</noscript>
<form name="Form1">
<input type="button" name="btnFakultaet" value="Fakultaet berechnen" onClick="fFakultaet()">
</form>
</body>
</html>
Aufgaben + Lösungen[Bearbeiten]