Stil mit {stil}

Jul 2008

Funktionen in JavaScript – Grundlagen

Funktionen sind ein Block von Anweisungen mit einem Namen. Der Funktionsblock wird einmal definiert und kann über den Namen mehrfach im Programm aufgerufen werden, um eine Aufgabe wiederholt durchzuführen.

Schlüssel- Name  Argument Argument
wort 
    |       |       |      |
    
function steuer( betrag, satz ) 
{
   var mwst = betrag * satz / 100;        // <-+
   var summe = betrag + mwst;             //   +  Anweisungsblock
   return summe;                          // <-+
}
…

var brutto = steuer( 200, 16 );             // Funktionsaufruf

Nicht nur aufgrund der Schreibersparnis sind Funktionen ein Basisbaustein von Javascript – vielmehr ist es kaum möglich, auch nur das kleineste Skript ohne Funktionen zu programmieren. Funktionen verzögern die Ausführung von Anweisungen, bis ein bestimmtes Ereignis eintritt – z.B. das Laden des Dokuments oder das Abschicken eines Formulars. Der Javascript-Interpreter führt die Anweisungen im Block einer Funktion erst aus, wenn eine Anweisung wie var brutto = steuer(200, 16); die Funktion mit ihrem Namen aufruft.

Gerade weil Funktionen in Javascript so fundamental sind, sind sie genial einfach und das Beispiel oben zeigt eigentlich schon alles, was man über Funktionen wirklich wissen muss.

Syntax

function machWas( arg1, arg2 )
{
   Anweisung;
       Anweisung; 
       …
       Anweisung;
}

• Einer Funktion beginnt mit dem Schlüsselwort function gefolgt vom Namen der Funktion,
• gefolgt von einem Paar runder Klammern mit den Argumenten der Funktion.
• Kommas trennen die Argumente der Funktion – wenn eine Funktion keine Argumente hat, bleibt die Klammer leer.
• Die Anweisungen der Funktion stehen in einem Paar geschweifter Klammern.

Funktionsnamen dürfen genauso wie Variablennamen keine Leer- oder Sonderzeichen enthalten (nur der Unterstrich „_“ ist erlaubt) und sollten nicht länger als 32 Zeichen sein.

Am Ende des Funktionsblocks sollte eine return-Anweisung stehen, um die Kontrolle wieder an die Stelle im Code zurück zu geben, von der aus die Funktion aufgerufen wurde. Das Schlüsselwort return kann ein Wert zurück geben – wenn die Funktion keine return-Anweisung oder return ohne einen Wert notiert, gibt die Funktion undefined zurück.

function changeStyle( obj, color )
{
   obj.style.color = color;
   obj.style.borderColor = color;
}

var elem = document.getElementById( 'myBlock' );
changeStyle( elem, "rot" );

Die Funktion changeStyle() benutzt keine return-Anweisung – der Javascript-Interpreter ersetzt die Anweisung changeStyle( elem, "rot" ); bei der Programmausführung einfach durch den Anweisungsblock der Funktion.

Javascript-Funktionen aufrufen

Der Aufruf einer Funktion darf vor oder nach der Deklaration der Funktion stehen, aber die Argumente müssen vor dem Aufruf bekannt sein.

Im Funktionsaufruf stehen die Argumente in der Reihenfolge, in der sie bei der Deklaration der Funktion aufgeführt sind.

var autor = new Array( 'Thomas Mann',    'Neal Adams', 'William Shakespeare' );
var title = new Array( 'Der Zauberberg', 'Batman',     'Ein Sommernachtstraum' );

showBooks(         title,   autor,    2 );
                     |        |       |
function showBooks( myTitle, myAutor, num )
{
   var text = "";
   for (var i=0; i<num; i++) {
      text += myAutor[i] + ": " + myTitle[i] + "\r\n";
   }
   var list = document.getElementById( 'showBooks' );
   list.innerHTML = text; 
}

Das Skript deklariert zwei Arrays: autor und title mit je drei Elementen. Nach dem Aufruf showBooks( title, autor, 2 ); iteriert die Funktion durch die Arrays und listet die ersten beiden Buchtitel und ihre Autoren.

Argumente von Funktionen beschränken sich also nicht auf einfache Datentypen wie Zahlen oder Texte, sondern auch Arrays, Objekte und sogar Funktionen bilden reguläre Argumente.

Und noch ein Hinweis: Als locker typisierte Sprache prüft Javascript den Typ der Argumente nicht und überlässt es allein dem Programmierer, den Typ der Argumente sicher zu stellen.

Argumente von Funktionen

Argumente von Funktionen in JavaScript sind eher eine unverbindliche Empfehlung. Fehlende Argumente gelten als undefined und führen nicht zu einem Fehler.

Ein Funktionsaufruf kann mehr Argumente übergeben, als die Funktion erwartet:

function summe( x, y )
{
   var add = x + y;
   return add;
}

summe( 4, 5, 17 );   // gibt 9 zurück

summe( x, y ) addiert die ersten beiden Argumente und ignoriert den überflüssigen dritten Parameter. Cool – aber wozu soll das gut sein?

Auch wenn der Funktionsaufruf mehr Argumente notiert als die Deklaration, bietet Javascript einen Zugriff auf die überzähligen Argumente – allerdings nicht in der Form benannter Variablen.

Die Argumente einer JavaScript-Funktion sind in einem Objekt arguments organisiert. arguments[i] stellt einen alternativen Zugriff auf die Argumente zur Verfügung. Die Eigenschaft arguments.length gibt die Anzahl der Argumente zurück. Diese Technik birgt zusätzliche Flexibilität:

function mittel()
{
   var summe = 0; 
   for (var i=0, j=arguments.length; i<j; i++) {
      summe += arguments[i];
   }
   return summe/arguments.length;
}

mittel( 15, 30, 50, 25 ); // gibt 30 zurück

Das Arguments-Objekt kann wie eine lokale Variable nur innerhalb der Funktion benutzt werden. Auch wenn arguments eine Eigenschaft length besitzt und ein Skript mit arguments[i] wie durch ein Array iteriert – arguments ist kein Array, sondern ein Objekt.

Den Wert von Argumenten ändern

Änderungen von Werten von Argumenten innerhalb einer Funktion haben keinen Einfluss auf den Wert des Arguments außerhalb der Funktion.

var betrag = 200;
var brutto = allInclusive( betrag );

function allInclusive( b )
{
   var mwst = b * 16 / 100;
   b = b + mwst;
   alert( "Betrag in allInclusive " + b );  // Hier ist b jetzt 232
   return b;
}

alert( "Betrag " + betrag + "\n" + "inkl. MwSt " + brutto );  
// Ausgabe:
// Betrag  200
// inkl. MwSt 232

Das Skript definiert eine Variable betrag mit dem Wert 200. Der Aufruf var brutto = allInclusive(betrag); verändert das Argument durch die Anweisung b = b + mwst; und die alert-Anweisung innerhalb der Funktion allInclusive gibt dementsprechend Betrag in allInclusive 232 aus.

Die alert-Anweisung am Ende des Skript-Fragments allerdings zeigt, dass der Funktionsaufruf die Variable betrag nicht geändert hat.