Werbung einblenden Werbung ausblenden


Home/ Tutorials / JavaScript Handbuch / Funktionen


Aufrufen von Funktionen in JavaScript
Übergabe von Parametern an eine Funktion
Übergabe eines Arrays als Parameter
Gültigkeitsbereich von Variablen
Die Variable wird innerhalb der Funktion nicht neu deklariert
Gültigkeitsbereich wenn die Variable gar nicht deklariert wurde
Einen Funktionswert zurückgeben
call by reference und call by value

Aufrufen von Funktionen in JavaScript

Mit Funktionen wurde in diesem Handbuch bereits gearbeitet, weil es in JavaScript, im Gegensatz zu anderen Programmierprachen wie PHP oder Perl, gar nicht möglich ist, irgendewelche Beispiele zu schrauben, ohne hierbei Funktionen zu verwenden. Funktionen können in JavaScript auf zwei unterschiedliche Art und Weisen aufgerufen werden.

über event handler siehe event handler
oder über einen Hyperlink nach dem Schema <A href=javascript:test()>Funktionsaufruf</A>

Von beiden Varianten wurde bereits üppig Gebrauch gemacht und sie sind eigentlich auch selbserklärend. Zu klären gibt es eigentlich nur drei Fragen.

1) Wie werden Parameter übergeben
2) Was kann als Parameter übergeben werden
3) Was ist der Gültigkeitsbereich für eine Variable

Übergabe von Parametern an eine Funktion

Die Übergabe von Parametern an eine Funktion ist easy an straightforward und sieht so aus.

<script language="javascript">
function helloworld(a,b)
{
alert(a+" sagt: "+b);
}
</script>
<A href=javascript:helloworld("Andrés%20Ehmann","Hallo%20Welt");>hier</A>

Wenn man wissen will, was das Programm macht, kann man hier clicken. Wie es funktionniert ist eigentlich klar. Die übergebenen Parameter "Andrés%20Ehmann" und "Hallo%20Welt" werden in der Funktion helloworld() an die Stelle gesetzt, wo a bzw. b steht. Wundern kann man sich höchstens über %20. Damit wird das Leerzeichen codiert, da ein Leerzeichen bei der Übergabe von Zeichenketten nicht akzeptiert wird.

Übergabe eines Arrays als Parameter

Man kann nach diesem Schema nicht nur Variablen, sondern auch Array übergeben, wie folgendes kleine Beispiel zeigt.

<script language=javascript>
obst=new Array("Kirschen","Tomaten","Himbeeren");
function eins(a)
{
obst.push(a);
zwei(obst);
}
function zwei(b)
{
for(i=0;i<obst.length;i++)
{
alert(b[i]);
}
}
</script>
<A href=javascript:eins("Kiwi");>hier</A>

Erstmal machen wir uns klar, was dieses Programm macht, indem wir hier clicken. Nun ? Also, dieses Programm ruft zuerst die Funktion eins() auf, die als Parameter "Kiwi" übergeben bekommt. Kiwi wird dann dem Array hinzugefügt. Der Array Obst wird dann via Parameter b der Funktion zwei() übergeben, die ihn wiederum ausliest. Wenn man das Programm öfter laufen lässt, hat man übrigens immer mehr Kiwis, weil die Vorgänger ja mitgespeichert wurden.

Gültigkeitsbereich von Variablen

Der Gültigkeitsbereich einer Variablen kann unterschiedlich sein. Eine globale Variable ist überall im Programm gültig. Verändert eine Funktion den Wert einer Variablen, dann gilt dieser geänderte Wert für alle anderen Funktionen. Eine lokale Variable ist nur in der Funktion gültig, für die sie deklariert wurde. Das heisst, wird der Wert dieser Variablen geändert und gibt es noch eine zweite Variable gleichen Namens irgendwo im Programm, dann wird der Wert dieser zweiten Variable nicht geändert. Um den Gültigkeitsbereich einer Variablen auf lokal, also nur innerhalb einer Funktion gültig, zu stellen, muss sie innerhalb der Funktion deklariert werden.
Um den Gültigkeitsbereich für eine Variable auf eine Funktion zu beschränken, ist die Variable innerhalb der Funktion zu deklarieren. Das sieht dann so aus.

<script language=javascript>
var test="All you need is love";
function money()
{
var test;
test="All you need is money";
alert("aus der money Funktion: "+test);
love();
}
function love()
{
alert("aus der love Funktion: "+test);
}
</script>
<A href=javascript:money()>hier</a>

Wer es ausprobieren will, kann hier clicken. Was passiert. Die Variable test hat ursprünglich den Wert "All you need is love". Innerhalb der Funktion money wird dieser Wert auf auf "All you need is money" umgestellt und aufgeblendet. Anschliessend wird die Funktion love aufgerufen. Die Funktion love arbeitet nun nicht mit dem modifizierten Wert sondern mit dem Orginalwert, das zweite alert Fenster, dass innerhalb der Funktion love aufgerufen wird, zeigt uns "all you need is love".
Global ist eine Variable unter drei Bedingungen. Wenn sie gar nicht deklariert wurde, wenn sie ausserhalb einer Funktion deklariert wurde oder wenn sie innerhalb einer Funktion aber ohne var deklariert wurde (im letzten Fall wurde ihr dann halt schlicht ein Wert zugewiesen). Betrachten wir das gleiche Beispiel nochmal mit minimalen Variationen, aber mit einem völlig anderen Ergebnis.

Die Variable wird innerhalb der Funktion nicht neu deklariert

<script language=javascript>
var test="All you need is love";
function money2()
{
test="All you need is money";
alert("aus der money Funktion: "+test);
love2();
}
function love2()
{
alert("aus der love Funktion: "+test);
}
</script>
<A href=javascript:money2()>hier</a>

Wer es ausprobieren will, kann hier clicken. Wie deutlich zu sehen, deklarieren wir die Variable Test innerhalb der Funktion money2() nicht. Das hat die Konsequenz, dass der modifizierte Wert auch in der Funktion love2() gilt. Wir erhalten beide Male "all you need is money".

Gültigkeitsbereich wenn die Variable gar nicht deklariert wurde

Deklariert man die Variable schlicht gar nicht, ist sie global, wie das folgende Beispiel zeigt. Das bedeutet, dass eine Variable, der innerhalb einer Funktion zwar ein Wert zugewiesen wurde, die aber nicht deklariert wurde, überall gültig ist, wie folgendes Beispiel zeigt.

<script language=javascript>
function money3()
{
test="All you need is money";
alert("aus der money Funktion: "+test);
love3();
}
function love3()
{
alert("aus der love Funktion: "+test);
}
</script>
<A href=javascript:money3()>hier</a>

Wer es ausprobieren will, kann hier clicken. Wie deutlich zu sehen, ist die Variable test in beiden Funktionen vorhanden, wir erhalten "all you need is money". Der langen Rede kurzer Sinn. Lokal ist eine Variable nur, wenn sie innerhalb einer Funktion mit
var Variablen_Name;
bzw.
var Variablen_Name="Man kann auch gleich einen Wert zuweisen";
deklariert wurde. Bei allen anderen denkbaren Konstellationen ist die Variable global.

Einen Funktionswert zurückgeben

Mit return() kann man mehrere Dinge erreichen. Man kann erreichen, dass eine Funktion an einer bestimmten Stelle abgebrochen wird, etwa weil eine Bedingung erfüllt ist. Man kann mit return aber auch einen bestimmten Wert zurückgeben. Normalerweise gibt eine Funktion ja immer den letzten Wert zurück. Machen wir uns das anhand einiger Beispiele klar. Den letzten Rückgabewert einer Funktion aufblenden
Das ist der einfachste denkbarste Fall, den das ist das, was passiert, wenn man nichts tut. Betrachten wir folgendes Beispiel.

<script language="javascript">

function zitate()
{
test4="Der Glaube ist gut, doch bringt er nichts von der Stelle. Der Zweifel in ehrlicher Männerfaust, der sprengt die Pforten zur Hölle";
test4="Den du nicht vergessest Genius, wirst ihn heben übern Schlammpfad, mit den Feuerflügeln";
test4="Oh greife weiter, weiter Sturm, und nimm auf deine starken Schwingen, den höchsten Stern, den kleinsten Wurm, uns endlich alle heimzubringen";
}

function show_me()
{
zitate();
alert(test4);
}
</script>
<a href=javascript:show_me()>hier</a>

Wir erhalten, wie man sehen kann folgendes, indem man hier clickt den letzten Wert. Das ist zwar das, was wir uns erhofft hatten, aber leider passiert es nicht auf die Art und Weise, wie wir uns das erhofft hatten. Im eigentlichen Sinne gibt die Funktion gar nichts zurück. Es wird lediglich die globale Variable test4 auf den entsprechenden Wert gestellt, das ja hintereinander weg drei verschiedene Werte zugewiesen werden. Wir können natürlich auch mit dieser Methode einen anderen Wert als den letzten erhalten, indem wir die Funktion mit return abbrechen.

<script language="javascript">

function zitate2()
{
test4="Der Glaube ist gut, doch bringt er nichts von der Stelle. Der Zweifel in ehrlicher Männerfaust, der sprengt die Pforten zur Hölle";
test4="Den du nicht vergessest Genius, wirst ihn heben übern Schlammpfad, mit den Feuerflügeln";
return;
test4="Oh greife weiter, weiter Sturm, und nimm auf deine starken Schwingen, den höchsten Stern, den kleinsten Wurm, uns endlich alle heimzubringen";
}

function show_me2()
{
zitate2();
alert(test4);
}
</script>
<a href=javascript:show_me2()>hier</a>

Wir erhalten, wie man sehen kann indem man hier clickt, den vorletzten Wert, da wir ja das Abarbeiten der Funtion Zitate vor dem letzten Wert mit return abgebrochen haben. Da der Wert der globalen Variable test4 dann den Wert "Den du nicht vergessest Genius, wirst ihn heben übern Schlammpfad, mit den Feuerflügeln" hat, wird dieser Wert dann auch angezeigt. Da diese Methode aber im eigentlichen Sinne nichts zurückgibt, merkt man daran, dass das nicht geht.

<script language="javascript">
function zitate4()
{
test4="Der Glaube ist gut, doch bringt er nichts von der Stelle. Der Zweifel in ehrlicher Männerfaust, der sprengt die Pforten zur Hölle";
test4="Den du nicht vergessest Genius, wirst ihn heben übern Schlammpfad, mit den Feuerflügeln";
return;
test4="Oh greife weiter, weiter Sturm, und nimm auf deine starken Schwingen, den höchsten Stern, den kleinsten Wurm, uns endlich alle heimzubringen";
}
</script>
<a href=javascript:alert(zitate4())>hier</a>

Wir erhalten ein alert Fenster aber keine Rückgabe, wir erhalten "undefined". Das sieht so aus. Die globale Variable test4 ist lediglich innerhalb des JavaScriptbereiches sichtbar, deswegen haben die vorigen Beispiele funktionniert, aber sie kann und wird so nicht im eigentlichen Sinne zurückgegeben. Zurückgeben im eigentlichen Sinne kann man nur eine lokale Variable. Diese wiederum muss dann mit return exportiert werden.

<script language=javascript>
function zitate5()
{
var test5;
test5="Der Glaube ist gut, doch bringt er nichts von der Stelle. Der Zweifel in ehrlicher Männerfaust, der sprengt die Pforten zur Hölle";
return test5;
test5="Den du nicht vergessest Genius, wirst ihn heben übern Schlammpfad, mit den Feuerflügeln";
test5="Oh greife weiter, weiter Sturm, und nimm auf deine starken Schwingen, den höchsten Stern, den kleinsten Wurm, uns endlich alle heimzubringen";
}
</script>

<a href=javascript:alert(zitate5())>hier</a>

Das funktionniert dann, wovon man sich überzeugen kann, indem man hier clickt.

call by reference und call by value

Alle Beispiele bisher übergaben die Parameter an die Funktion mit call by value. Das ist zumindest in JavaScript der Normalfall. Die Methode call by reference ist, zumindest für JavaScript insofern etwas spitzfindig, weil man in der Praxis bei der Programmierung mit JavaScript selten darauf stösst. Es ist aber eine Unterscheidung, die in allen Programmiersprachen gemacht wird und da wir gerade dabei sind, erläutern wir das kurz. Bei call by reference wird nicht die Variable selbst übergeben, sondern ein Zeiger auf diese Variable, was bei JavaScript ja auch möglich ist, indem man den Zeiger auf die Instanz eines Objektes übergibt. Wird nun der Zeiger eines Objektes an eine Funktion als Parameter übergeben und von einer anders lautenden Variable aufgenommen, dann wird der Wert der Variablen trotzdem verändert, weil die beiden Zeiger zwar unterschiedlich heissen, aber trotzdem auf dasselbe Objekt verweisen. Das klingt zwar kompliziert, ist aber trotzdem viel Lärm um nichts. Wir machen uns das anhand eines Beispieles klar.

<script language=javascript>
var mein_objekt=new Object();
mein_objekt.der_wert="Wahrhaft hochschätzen kann nur, wer sich nicht selbst sucht";
function aphorismus(irgendwas)
{
irgendwas.der_wert="Ich habe nicht viel erlebt, aber viel gelesen, Jorge Luis Borges";
aufblitz();
}
function aufblitz()
{
alert(mein_objekt.der_wert);
}
</script>
<A href=javascript:aphorismus(mein_objekt)>hier</A>

Wie üblich drückt man mal wieder auf hier um zu sehen was passiert. Im Gegensatz zu allen Beispielen vorher, in denen ein Wert (call by value) übergeben wurde, wird hier eine Referenz auf ein Objekt (call by reference) übergeben. Diese Referenz wird dann in der Funktion aphorismus entsprechende eingesetzt, mit der Wirkung, dass die Funktion direkt verändert wird.

vorhergehendes Kapitel