Stil mit {stil}

Jul 2008

Funktionen in JavaScript – return in Funktionen und Event Handlern

Das Schüsselwort return macht genau das, was man von ihm erwartet: Es gibt einen Wert zurück. return kann jeden Datentyp zurückgeben: Boolean, Zahlenwerte, Strings, Arrays und Objekte. Der Aufruf von return führt dazu, dass die Funktion sofort verlassen und die Kontrolle an die aufrufende Funktion zurückgegeben wird.

      function berechnen()
      {
         // Anweisungen 
+-----+  var wert = summe( 15,85 ); <-----+    
|         // Anweisungen                  |
|      }                                  |
|                                         |
+---> function summe( x, y )              |
      {                                   |
         var add = x + y;                 |
         return add;         +------------+
      }

Eine Funktion kann mehrere return-Anweisungen enthalten. Trifft der Javascript-Interpreter auf ein return, bricht er die Ausführung der Funktion sofort ab und kehrt zum Aufruf der Funktion zurück.

function changeElem()
{
   if (!document.getElementById( 'fact' )) {
      return;
   } 
   var elem = document.getElementById( 'fact' );
   // Verarbeitung

}

Die einfache Prüfung am Anfang des Skripts (if (!document.getElementById( 'fact' ))) verhindert den wohl häufigsten Fehler in Skripten: den Zugriff auf ein nicht-existierendes Element. Findet die Funktion kein Element mit der id fact, beendet return die Funktion changeElem() sofort und der Javascript-Interpreter gibt die Kontrolle wieder an die aufrufende Funktion zurück.

Verwirrend für Einsteiger ist die Frage, wohin der Rückgabewert einer Funktion geliefert wird. Die goldene Regel für return ist:

1. »Normale« Funktionen geben die Steuerung an die Stelle im Programm zurück, an der die Funktion aufgerufen wurde. Gibt eine Funktion einen Wert zurück, geht der Wert an die linke Seite der Anweisung: var simple = add( x, y );
2. Event Handler geben die Steuerung an den Browser zurück. Jedes Event hat einen Rückgabewert, der standardmäßig auf true gesetzt ist.

return in Event Handlern

Als »Event Handler« werden Javascript-Funktionen bezeichnet, die bei einem bestimmten Ereignis aufgerufen werden – z.b. eine Funktion checkForm(), die beim Absenden eines Formulars die Eingaben des Benutzers prüft.

Event Handler geben per Default true zurück, was vom Browser als „führe jetzt die ursprüngliche Aktion durch“ interpretiert wird.

Der Rückgabewert von Event Handlern geht an den Browser, der anhand des return-Werts entscheidet, ob er die vorgegebene Funktion – z.B. das Absenden eines Formulars – durchführen soll. Wenn der Benutzer also „nein“ in das Eingabefeld schreibt, darf das Formular nicht abgeschickt werden. Das ist die Mimik für die Validierung von Formulareingaben.

HTML-Markup

<form action="formaction.php" method="get" id="fact">
<fieldset>
   <p>Postleitzahl <input type="text" name="plz" id="plz" /> 
      <em id="msg" style="color: red"> &nbsp; </em></p>
   <p><input type="submit" value="Absenden" /></p>
</fieldset>
</form>

Javascript

window.onload = handleForm;

function handleForm()
{
   var form = document.getElementById( 'handleForm' );
   form.onsubmit = checkForm;
}

Der Event Handler onsubmit gibt per Vorgabe true zurück. Wenn das Ereignis onsubmit eintritt und die Funktion checkForm() false zurückgibt, wird dem Event Handler der Wert false zugewiesen und der Browser schickt die Formularwerte nicht an die Adresse, die im action-Attribut angegeben ist.

function checkForm()
{
   var eingabe = document.getElementById( 'handleEvent' );
   if (/\d{5}/.test( eingabe.value )) { 
      return true;        // Formular absenden
   } else {
   	var text = document.createTextNode( ' Keine gültige Postleitzahl ' );
   	msg = document.getElementById( 'msg' );
      msg.replaceChild( text, msg.firstChild );
      return false;       // Formular nicht absenden
   }
} 

checkForm() liest den eingegebenen Wert und wenn die Eingabe eine fünfstellige Zahl ist (if (/\d{5}/.test( eingabe.value ))), ruft die Funktion return true; auf, damit der Browser die Formulareingaben an den Server überträgt. Bei allen anderen Eingaben verhindert return false; die Übermittlung der Formularwerte.

Lokale und globale Variablen

Variablen in Funktionen, die durch das Schlüsselwort var deklariert sind, gelten nur innerhalb der Funktion. Code außerhalb der Funktion kann auf diese Variablen nicht zugreifen – eine lokale Variable ist entstanden. Wird außerhalb der Funktion eine Variable mit demselben Namen deklariert, benutzt die Funktion immer die lokale Variable aus ihrem Funktionskörper. Man spricht bei dieser Mimic auch von einem »Gültigkeitsbereich« der Variablen – ihrem »Scope«.

var simple = 20;      // eine globale Variable simple
var global = 50;

function abc() {
   var simple = 100;  // die lokale Variable heißt zwar auch simple, aber hat als
                      // lokale Variable den Vorzug. Mit ihr arbeitet die Funktion.
   
   var local = 2000;  // eine lokale Variable
   
   global = 15;       // ändert die globale Variable global
}

Diese Technik hat eine angenehme Nebenwirkung: Lokale Variable geben beim Verlassen der Funktion ihren Speicherplatz frei.

Auf die globale Variable hingegen kann der gesamte Code der Anwendung zugreifen – allerdings auch Code aus Skripten, die nebem dem eigenen Skript in ein HTML-Dokument eingebunden sind. Das ist gefährlich: Wenn ein anderes Skript eine Variable mit demselben Namen deklariert und dieser Variablen einen Wert zuweist, funktioniert mein eigenes Skript nicht mehr wie vorgesehen. Das macht globale Variablen so unbeliebt.

In JavaScript entstehen globale Variablen auf dreierlei Weise:

1. wenn sie nicht durch var deklariert wurden,
2. bei einer Deklaration außerhalb aller Funktionen,
3. bei einer Wertzuweisung innerhalb einer Funktion, ohne dass die Variable zuvor durch das Schlüsselwort var deklariert wurde.

In JavaScript entstehen durch das Vergessen des Schlüsselworts var vor einem Variablennamen ungewollt globale Variablen – ein unangenehmes Fehlerpotential. So überlebt die Variable auch nach dem Verlassen der Funktion und wenn die Funktion häufig aufgerufen wird, entsteht u.U. ein Speicherleck.

JSLint von Douglas Crockford prüft JavaScript-Programme auf ein derartiges Fehlerpotential.