4.6 Funktionen 

In diesem Kapitel wird document.write() ziemlich oft eingesetzt. Oft enthält die auszugebende Zeichenkette noch HTML-Tags. Bei manchen davon (etwa <script>) kommen einige Browser durcheinander. Abhilfe schaffen Sie hier, indem Sie nicht das gesamte Tag verwenden, sondern zumindest die spitzen Klammern als einzelne Zeichenketten behandeln und diese dann mit dem Plus-Operator verketten (hier vereinfacht am Beispiel des <p>-Tags):

document.write("<"+"p"+">" + "Galileo Press" + "<"+"/p"+">")

Bei vielen Anweisungen ist das recht aufwändig; vor allem die Tipparbeit verlangt viel Zeit und Konzentration. Hier (und noch in vielen anderen Situationen) kann man sich mit Funktionen behelfen. Unter einer Funktion versteht man einen Programmblock, der nicht sofort ausgeführt wird, aber explizit auf- bzw. abgerufen werden kann. So eine Funktion führt entweder ein paar Befehle aus (dann nennt man sie mitunter auch eine Prozedur), oder es wird ein Wert zurückgegeben. Eine Prozedur ist mit document.write() vergleichbar, während eine Funktion beispielsweise Zeichenkette.length entspricht.

Eine Funktion hat folgende Syntax:

function Funktionsname(Parameter1, Parameter2) {
   //Programmblock
   return Wert;
}

Die Anzahl der Parameter ist beliebig. Es kann auch kein Parameter verwendet werden (dann ist die Klammer leer). Innerhalb der Funktion können die Parameter dann unter dem Namen angesprochen werden, unter dem sie im Funktionskopf eingeführt wurden.

Die Zeile mit dem return ist optional. Der Befehl return sorgt dafür, dass die Funktion sofort verlassen wird (wie break). Wird hinter dem return ein Wert angegeben, so ist dieser der Rückgabewert der Funktion.

TippAus optischen Gründen sollten Sie sich bemühen, return durchgängig zu verwenden (wenn Sie es denn einsetzen). Tritt also in einem Zweig einer if-Abfrage eine return-Anweisung auf, sollten möglichst auch alle anderen Zweige mit return verlassen werden:

function Funktionsname(Parameter1, Parameter2) {
   if (variable == "irgendetwas") {
      return true;
   } else {
      return false;
   }
}

Im Gegensatz zu manchen anderen Programmiersprachen muss die Funktion nicht vor ihrem ersten Aufruf deklariert werden. Erkennt der JavaScript-Interpreter, dass ein Funktionsaufruf vorliegt, so wird das Dokument nach einer Funktion dieses Namens durchsucht.

Diese theoretische Einleitung soll anhand von praktischen Beispielen verdeutlicht werden. Prinzipiell geht es darum, dass an eine Funktion der Name eines Tags übergeben wird (beispielsweise "p" oder "span") und die Funktion dann entweder das Tag ausgibt (mit den dazugehörigen spitzen Klammern) oder das Tag als Zeichenkette zurückgibt. Somit wird auch das oben genannte Problem mit den spitzen Klammern gelöst.

Die erste Variante gibt das entsprechende Tag direkt mittels document .write() aus:

function tag_ausgeben(s) {
   document.write("<" + s + ">");
}
//Test-Aufruf
tag_ausgeben("p");
document.write("Galileo Press");
tag_ausgeben("/p");

In der zweiten Variante wird der return-Befehl verwendet. Die Funktion gibt also nichts direkt aus, sondern liefert einen Wert zurück, der dann im eigentlichen Programm weiterverwendet werden kann.

function tag(s) {
   return "<" + s + ">";
}
document.write(tag("p") + "Galileo Press" + tag("/p"));

Es sind noch zwei Fälle möglich:

Es werden weniger Parameter übergeben, als im Funktionsrumpf angegeben sind.

Es werden mehr Parameter übergeben, als im Funktionsrumpf angegeben sind.

Der erste Fall lässt sich recht schnell abhandeln. In diesem Fall hat der entsprechende Parameter den Wert null. Die Funktion tag() kann also erweitert werden, so dass eine leere Zeichenkette zurückgegeben wird, wenn kein Parameter übergeben worden ist:

function tag(s) {
   if (s == null) {
      return "";
   } else {
      return "<" + s + ">";
   }
}

Der zweite Fall ist nicht ganz so einfach. Die gute Nachricht vorweg: Alle Parameter, die an eine Funktion übergeben werden, sind in einem Array gespeichert. Es ist jedoch noch nicht offensichtlich, wie auf dieses Array zugegriffen werden kann. Der entsprechende Bezeichner heißt Funktionsname.arguments – und hier sehen Sie direkt, dass Sie keine reservierten Begriffe (etwa document, write etc.) als JavaScript-Funktionsnamen verwenden dürfen.

Die folgende Funktion gibt gleich eine ganze Liste von Tags aus. In einer for-Schleife wird das Array arguments durchlaufen, und alle Werte werden mit spitzen Klammern ausgegeben. Wie bereits oben angemerkt wurde, kann mit Arrayname.length die Anzahl der Elemente des Arrays bestimmt werden; in obigem Fall also Funktionsname.arguments. length!

function tag() {
   var returnstring = "";
   for (var i=0; i<tag.arguments.length; i++) {
      returnstring += "<" + tag.arguments[i] + ">";
   }
   return returnstring;
}

Der Aufruf

tag("p id='p1'", "span style='color: black;'", "b")

würde also folgende Zeichenkette als Ergebnis erhalten:

"<p id='1'><span style='color: black;'><b>"

Natürlich gibt es sinnvollere Einsatzgebiete für eine Funktion, als Workarounds für Browser-Bugs bereitzustellen. Kommen wir noch einmal zu Schleifen zurück. Es war ja immer etwas umständlich, ein Zeichen durch ein anderes auszutauschen. Mit einer Funktion kann man das Ganze etwas übersichtlicher gestalten:

function ersetzeZeichen(Zeichenkette, Position, Neu) {
   //Zeichenkette ist die betrachtete Zeichenkette.
   //Position ist die Position des Zeichens, das ersetzt
   //wird.
   //Neu ist das neue Zeichen.
   var neueZ = Zeichenkette.substring(0, Position);
   neueZ += Neu;
   neueZ += Zeichenkette.substring(Position+1,
      Zeichenkette.length);
   return neueZ;
}

Bei der Wahl der Variablennamen muss man Vorsicht walten lassen. Existiert die Variable auch außerhalb der Funktion, so wird keine neue Variable erzeugt, sondern auf die alte Variable zugegriffen. Umgekehrt kann man auf Variablen, die nur innerhalb einer Funktion auftreten, nicht von außen zugreifen. Man unterscheidet hier globale (außerhalb und innerhalb einer Funktion gültige) und lokale (nur innerhalb von Funktionen gültige) Variablen. Will man innerhalb einer Funktion eine lokale Variable erzeugen, deren Name schon an eine globale Variable vergeben ist, muss man der ersten Verwendung ein var voranstellen.

Folgendes Beispiel verdeutlicht das eben Gesagte:

var a=0;
var b=0;
function test() {
   a++;  //Zugriff auf globale Variable a
   var b=1;  //Neue lokale Variable. Sie
             //hat mit der globalen Variablen b nichts
             //zu tun
   var c=0;  //Neue lokale Variable
}

Funktionen können auch wie folgt definiert werden:

var ersetzeZeichen = function(Zeichenkette, Position, Neu) {
   var neueZ = Zeichenkette.substring(0, Position);
   neueZ += Neu;
   neueZ += Zeichenkette.substring(Position+1,
      Zeichenkette.length);
   return neueZ;
}

Danach können Sie die Funktion wie gehabt mit ersetzeZeichen() verwenden. Man spricht hier auch von anonymen Funktionen, denn nach function folgt kein Funktionsname. Später in diesem Buch werden Sie anonyme Funktionen das ein oder andere Mal einsetzen. Sie werden aber im weiteren Verlauf dieses Buches viele Anwendungsmöglichkeiten für Funktionen vorfinden; da wir erst am Anfang unserer JavaScript-Künste stehen, sind die Beispiele in diesem Kapitel besonders einfach gehalten.