Funktionen werden mit dem Namen aufgerufen, mit dem sie definiert sind. Wenn die Funktion aufgerufen wird, werden die internen Anweisungen abgearbeitet und Ergebnisse über das Schlüsselwort return dem Aufrufer übergeben.

Anweisung 1; 
Anweisung 2; 
Funktionsname(); 
Anweisung 3;

Nach der Funktionsdefinition kann die Funktion per Funktionsaufruf ausgeführt werden. Im Folgenden wird zwischen Anweisung 2 und Anweisung 3 die Funktionen werden nur dann ausgeführt, wenn sie explizit aufgerufen werden.

Funktionen mit Parametern

Beim Aufruf der Funktion können Werte übergeben werden, mit denen in der Funktion gearbeitet werden soll. Diese Werte werden Parameter genannt. Es können beliebig viele Parameter beim Funktionsaufruf übergeben werden. Die Parameter werden bei der Definition und beim Aufruf durch Kommata getrennt in den runden Klammern angegeben. Die Übergabe der Parameter erfolgt immer als Wert, d. h., Änderungen der Parameterwerte innerhalb der Funktion haben keine Auswirkung auf den Wert des übergebenen Parameters außerhalb der Funktion. Übergeben Sie als Parameter Objekte, können Sie deren Werte in einer Funktion jedoch dauerhaft verändern.

function Funktionsname (Parameterl, Parameter2)
{
 // JavaScript - Anweisungen return Rueckgabewert;
 Anweisung 1;
 Anweisung 2;
 x = Funktionsname(Parameterl, Parameter2);
 Anweisung 3;
}

Kurzvariante

Statt:

function Funktionsname (x)
{
 return x*x;
}

kann man auch nur schreiben:

function Funktionsname (x) x*x;

Variable Paramaterliste

Über das Feld arguments man ebenfalls auf alle Parameter einer Funktion zugreifen. Der Zugriff erfolgt dabei allerdings über den Index des Parameters und nicht über den Parameternamen. Die Anzahl der übergebenen Parameter erhält man über arguments.length. Auf diese Weise können einer Funktion eine variable Parameterliste übergeben werden.

Beispiel: args_funktion.html

args_funktion.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Funktion mit unbestimmter Anzahl an Parametern</title>
</head>
<body>
<p>Die Funktion
<pre>function test(par1, par2) {
 
}</pre> wird mit zusätzlichen Parametern aufgerufen:
<pre>test(10, 11, 12, 13, 14, 15, 16);</pre>
 
<p>&nbsp;</p>
<p><b><u>Ergebnis:</u></b></p>
 
    <script type="text/javascript">
 
     function test(par1, par2)
     {
       document.write("Parameter 1 mit dem Wert: " + par1 + "<br>");
       document.write("Parameter 2 mit dem Wert: " + par2 + "<br><br>");
 
       for(i = 2; i < arguments.length; i++)
         document.write("Zusätzlicher Parameter " + (i - 1) + " mit dem Wert: " + arguments[i] + "<br>");
     }
 
     test(10, 11, 12, 13, 14, 15, 16);
 
    </script>
  </body>
</html>

Beispiel: funktion.html

funktion.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Funktionsaufrufe</title>
</head>
<body>
  <h3>Berechnen einer Kreisfläche</h3>
  <p>nach der Formel: <code>A = &pi; / 4 * d<sup>2</sup></code></p>
 
  <script type="text/javascript">
 
    function flaeche(d)
    {
      var PI = 3.141592653589793;
      var A  = (PI / 4) * d * d;
      return A;
    }
 
    var ergebnis = 0;
    var durchmesser = 10;
    ergebnis = flaeche(durchmesser);
    document.write("d=", durchmesser, "m;<br>A=", ergebnis, "m<sup>2<\/sup><br>");
 
  </script>
</body>
</html>

Beispiel: funktion_schleife.html

funktion_schleife.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Funktionsaufrufe</title>
</head>
<body>
  <h3>Berechnen mehrerer Kreisflächen</h3>
  <p>nach der Formel: <code>A = &pi; / 4 * d<sup>2</sup></code></p>
 
  <script type="text/javascript">
 
    function flaeche(d)
    {
      return Math.PI / 4 * d * d;
    }
    for (durchmesser = 0; durchmesser <= 100; durchmesser +=5)
      document.write("d=", durchmesser, "m; A=", flaeche(durchmesser), "m<sup>2<\/sup><br>");
 
  </script>
</body>
</html>

Weitere Möglichkeiten für die Definition von Funktionen

Funktionsdefinition von Bedingungen abhängig machen

Eine Funktionsdefinition kann auch von einer Bedingung abhängig gemacht werden. Auf diese Weise können Sie z. B. Funktionen mit gleichen Namen, aber unterschiedlichen Funktionalitäten definieren.

Beispiel: if_funktion.html

Die Wirkungsweise der Funktion operation() wird vom Inhalt der Variablen name abhängig gemacht. Auf diese Weise können Sie die Funktionalität eines Programms auf andere Weise vom Wert einer Variablen abhängig machen.

if_funktion.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Funktionsdefinition von Bedingung abhängig machen</title>
</head>
<body>
<p>Anhand des Variablenwerts <code>name="Addition"</code> soll
<br>die Funktion definiert werden, die zwei Zahlen addiert.
<p>Das Ergebnis sollte also lauten:
<pre>operation(10, 11) = 21;</pre>
 
 
<p>&nbsp;</p>
<p><b><u>Ergebnis:</u></b></p>
 
    <script type="text/javascript">
 
     name = "Addition";
     if(name == "Addition") {
       function operation(zahl1, zahl2) { return zahl1 + zahl2; }
     }
     else {
       function operation(zahl1, zahl2) { return zahl1 - zahl2; }
     }
     document.write(name, " -> operation(10, 11) = ", operation(10, 11));
 
    </script>
<hr>
<p>* erst ab JavaScript 1.5
  </body>
</html>

Funktionen in Ausdrücken definieren

Durch die Definition von Funktionen in Ausdrücken haben Sie eine weitere Möglichkeit, die Programmausführung dynamisch zu ändern. Statt eines Funktionsnamens wird die gesamte Funktionsdefinition im Ausdruck angegeben. Der einzige Unterschied zur üblichen Funktionsdefinition liegt im Weglassen des Funktionsnamens. Deshalb werden diese Funktionen auch als anonyme Funktionen bezeichnet.

Beispiel: ausdr_funktion.html

In der ersten Anweisung wird die Funktionsdefinition einer Variablen zugewiesen. Der Variablenname steht somit für den Funktionsnamen und kann wiederum in Ausdrücken verwendet werden. Im zweiten Anwendungsfall wird der Funktion TueEtwas () als Parameter eine Funktion übergeben. Der übergebenen Funktion wird in der return-Anweisung der Wert 10 als Parameter übergeben. Der Funktionsaufruf der Funktion TueEtwas () beinhaltet im ersten Fall die vollständige anonyme Funktionsdefinition. Im zweiten Fall wird die Variable quadrat übergeben, die wiederum auf eine Funktionsdefinition verweist.

ausdr_funktion.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Funktion in Ausdrücken definieren</title>
</head>
<body>
<pre>
     var quadrat = function (zahl) { return zahl * zahl; }
     document.write(quadrat(10));
 
     function TueEtwas(f)
     {
       return f(10);
     }
 
     document.write(TueEtwas(function(value) { return value * value; }));
     document.write(TueEtwas(quadrat));
</pre>
 
<p>&nbsp;</p>
<p><b><u>Ergebnis:</u></b></p>
 
    <script type="text/javascript">
 
     var quadrat = function (zahl) { return zahl * zahl; }
     document.write(quadrat(10) + "<br>");
 
     function TueEtwas(f)
     {
       return f(10);
     }
 
     document.write(TueEtwas(function(value) { return value * value; }) + "<br>");
     document.write(TueEtwas(quadrat));
 
    </script>
 
  </body>
</html>

Lokale und globale Variablen

Die Variable d aus den vorherigen Beispielen besitzt einen Gültigkeitsbereich, der auf die Funktion beschränkt ist, d. h., außerhalb der Funktion kann nicht auf den Wert von d zugegriffen werden. Solche Variablen werden als lokale Variablen bezeichnet.

Globale Variablen, auf die jederzeit zugegriffen werden kann, werden außerhalb von Funktionen deklariert.

Beispiel: funktion_lokal_global.html

funktion_lokal_global.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Lokale und globale Variablen</title>
</head>
<body>
  <h3>Lokale und globale Variablen</h3>
  <script type="text/javascript">
 
    var x = 10;
    var y = 10;
    var z = 1;
 
    function Produkt(x, y)
    {
      var Ergebnis = x * y;
      document.write("<br>Werte innerhalb der Funktion: x = " + x + "; y = " + y + "; z = " + z + "<br>");
 
      document.write("Ergebnis in der Funktion: x * y = " + Ergebnis + "<br>");
      return Ergebnis;
    }
 
    document.write("Werte außerhalb der Funktion: x = " + x + "; y = " + y + "; z = " + z + "<br>");
 
    var MeinProdukt = x * y * Produkt(3, 4);
    document.write("<br>Ergebnis außerhalb der Funktion: x(global) * y(global) * (Ergebnis lokal) = " + MeinProdukt);
 
  </script>
</body>
</html>

Beachte: Viele Fehler in Skripts ergeben sich dadurch, dass globale und lokale Variablen durcheinander gebracht werden. Sie können beispielsweise den Wert einer globalen Variablen in einer Funktion verändern, obwohl Sie unter dem Namen eigentlich eine lokale Variable vermutet haben. Daher sollten zur besseren Übersicht alle lokalen Variablen einer Funktion mit einer var-Anweisung deklariert werden.

function MeineFunktion(x,y)
{
 var  LokaleVariable;
 ...        //   JavaScript   -  Anweisungen
}

Das Beispiel deklariert die Funktion MeineFunktion() mit den drei lokalen Variablen x,y und LokaleVariable. Generell zeugt es von gutem, strukturiertem Programmierstil, wenn Funktionen völlig ohne globale Variablen auskommen. Solche Funktionen sind auch in hohem Maße wiederverwendbar, da ihre Verarbeitungen nur von den Parametern abhängen, die ihnen beim Aufruf übergeben werden.

Vordefinierte Funktionen in JavaScript

Die folgenden Funktionen sind in JavaScript bereits vorhanden. Die Funktionsnamen sind reserviert und dürfen deswegen nicht für eigene Funktionsnamen verwendet werden.

Beispiel: parseFloat_parseInt.html

Die Anwendung der beiden Funktionen parseFloat() und parseInt() soll demonstriert werden. Als Eingabewerte werden Zeichenketten verwendet, die korrekte Zahlenwerte und gemischte Werte besitzen.

parseFloat_parseInt.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Existierende Funktionen in JavaScript</title>
</head>
<body>
  <h3>parseFloat() und parseInt()</h3>
  <script type="text/javascript">
 
    var a = "50";
    var b = "5.6abc";
 
    document.write('<p>a = "', a, '"; b = "', b, '";');
    document.write('<p>c = a + b');
    document.write('<br>c = ',a + b);
 
    document.write('<p>c = parseInt(a) + parseFloat(b)');
    document.write('<br>c = ',parseInt(a) + parseFloat(b));
 
    document.write('<p>c = parseFloat(a) + parseInt(b)');
    document.write('<br>c = ',parseFloat(a) + parseInt(b));
 
  </script>
</body>
</html>

Beachte: In HTML gibt es keine Eingabefelder, die speziell für Zahlen genutzt werden können. Die Eingaben werden immer als Zeichenkette betrachtet. Möchte man mit den Eingaben rechnen, so lässt sich mit isNaN z. B. überprüfen, ob die Eingabe als Zahl interpretiert werden kann. Danach habt man die Möglichkeit, die Zeichenkette über parseFloat oder parseint in eine Zahl des entsprechenden Typs umzuwandeln.

Debuggen von Funktionen

Es lässt sich nie ganz vermeiden, dass Fehler beim Erstellen und Ausführen eines JavaScripts auftreten. In diesem Abschnitt soll erläutert werden, wie Sie JavaScript-Fehler ausfindig machen und beseitigen. Die Art und Weise dieser Fehlersuche wird Debugging (deutsch: Entwanzen) genannt.

Beispiel: debug_variable.html

debug_variable.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Debugging</title>
</head>
<body>
  <script type="text/javascript">
    var +variable = true;
  </script>
</body>
</html>

In diesem Beispiel wird der Name der Variablen absichtlich falsch geschrieben. Ihr wird das Sonderzeichen [ vorangesetzt, das nicht in Variablennamen genutzt werden darf.

Firefox Fehler-Konsole

Für das Debuggen stellt der Browser Firefox eine Fehler-Konsole zur Verfügung, mit der Fehler in der CSS-Formatierung als auch in JavaScript sichtbar werden können.

Wähle daszu das Menü EXTRAS → FEHLER-KONSOLE.

Es öffnet sich ein neues Fenster, in dem die Meldungen des JavaScript-Interpreters anzeigt werden. Im Fenster wird eine Meldung angezeigt, dass der Variablenname nicht angegeben wurde (Fehler: missing variable name). Außerdem wird der Programmcode mit der entsprechenden Zeilennnummer angezeigt. Zur besseren Lokalisierung des Fehlers wird die Stelle noch mit einem Pfeil markiert.

Die Konsole lässt auch Eingaben von JavaScript-Anweisungen zu, sodass man die Zuweisung der Variablen auch direkt im Eingabefeld angeben und mit der Schaltfläche „Evaluieren“ überprüfen kann.

Firebug

Typische Fehler

Zuweisung oder Vergleich? Das einfache Gleichheitszeichen ist der Zuweisungsoperator. Um zwei Werte zu vergleichen, muss jedoch das Gleichheitszeichen zweimal angegeben werden. Da keine Fehlermeldung angezeigt wird, tritt dieser Fehler recht häufig auf.

var Test = 0;			
if (Test = 1)			
document.write 'Test war in Ordnung!');

Die fehlerhafte Verwendung des Zuweisungsoperators erzeugt keine Fehlermeldung. Der Variablen Test wird der Wert l zugewiesen, d. h., es wird kein Vergleich, sondern eine Zuweisung durchgeführt. Die if-Anweisung wertet alle Werte ungleich null zu true aus, sodass die Anweisung ausgeführt wird. Richtig muss es heißen:

var Test = 0;			
if (Test == 1)			
document.write 'Test war in Ordnung!');

Groß oder klein? JavaScript ist case-sensitive, d.h., die Groß- und Kleinschreibung wird in allen Variablennamen und Bezeichnern unterschieden. Bei größeren Skripten mit vielen Funktionen kann es passieren, dass z. B. ein Funktionsaufruf falsch geschrieben wird.

function AusgabeImBrowser()
{
 // JavaScript-Anweisungen
}
document.write(ausgabeImBrowser()) ;

Die Browser werden diesen Aufruf als Fehler ausgeben, da die aufgerufene Funktion nicht definiert ist. Die Funktion wird in der Definition mit einem großen A geschrieben und hat somit einen anderen Bezeichner.

JavaScript - Funktionen

Grundlagen zu Funktionen

Syntax einer Funktion

Funktionsaufruf