JavaScript/Funktionen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In JavaScript gibt es sowohl selbst definierte Funktionen als auch objektunabhängige, vordefinierte Funktionen.

Inhaltsverzeichnis

[Bearbeiten] Objektunabhängige Funktionen

Objektunabhängige Funktionen sind im Gegensatz zu selbst definierten Funktionen in JavaScript bereits vordefiniert. Das heißt, Sie können diese Funktionen jederzeit aufrufen, ohne sie vorher selbst definieren zu müssen, da sie bereits in JavaScript integriert sind.

Üblicherweise sind die hier sogenannten objektunabhängigen Funktionen an das window-Objekt gekoppelt und deshalb im globalen Namensraum verfügbar. Man kann zu ihrem Aufruf das window-Objekt davor notieren (z.B. window.alert()), oder aber auch weglassen, wenn es im gegenwärtigen Geltungsbereich (Scope) keine andere "lokale" Funktion gleichen Namens gibt (z.B. alert()).

[Bearbeiten] Selbst definierte Funktionen

[Bearbeiten] Funktion definieren

Mit Hilfe von Funktionen können Sie eigene, in sich abgeschlossene JavaScript-Prozeduren programmieren, die Sie dann über den Aufruf der Funktion ausführen können. Dabei können Sie bestimmen, bei welchem Ereignis (zum Beispiel, wenn der Anwender einen Button anklickt) die Funktion aufgerufen und ihr Programmcode ausgeführt wird. JavaScript-Code, der nicht innerhalb einer Funktion steht, wird beim Einlesen der Datei vom WWW-Browser sofort ausgeführt!

  • JavaScript 1.0
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Das generelle Erzeugen und Verwenden von Funktionen ist denkbar einfach:

Beispiel
  var summe = function (Argument1, Argument2) { // (1)
    var sum = Argument1 + Argument2;            // (2)
    return sum;                                 // (3)
  };
  alert(summe(40, 2));                          // (4)
  1. Erzeugt eine Funktion, die zwei Argumente erwartet und weist sie der Variablen "summe" zu.
  2. Der Funktions-Körper. Hier wird die Logik der Funktion notiert. In diesem Beispiel eine einfache Addition.
  3. Eine Funktion kann einen Wert zurückgeben, hier wird das Ergebnis der Addition zurückgegeben. return ist optional.
  4. Ruft die Funktion alert auf und übergibt als Parameter den Rückgabewert der Funktion summe.

In JavaScript ist es kein Ausführungsfehler, wenn an eine Funktion mehr oder weniger Argumente übergeben werden, als in ihrer Signatur definiert sind. Falls zu wenige Argumente übergeben wurden, werden die fehlenden Argumente mit undefined initialisiert. Falls zu viele Argumente übergeben wurden, kann man auf diese mittels arguments zugreifen.

Im weiteren wird detaillierter auf die Unterschiede beim Erzeugen einer Funktion und das Verhalten dieser eingegangen.

[Bearbeiten] Funktionen erzeugen

Es gibt in Javascript 3 Möglichkeiten ein Funktionsobjekt zu erzeugen:

  • Als Funktionsausdruck (function expression):
Beispiel
var foo = function ([Argument1[, Argument2[,]]]) { /* tue etwas, optional Rückgabe mit return */ };
  • Als Funktionsdeklaration (function declaration):
Beispiel
function foo ([Argument1[, Argument2[,]]]) { /* tue etwas, optional Rückgabe mit return */ };
  • Über den Funktions-Konstruktor:
Beispiel
var foo = new Function('[Argument1[, Argument2[, …]]]', '"tue etwas"; return "Gib etwas zurück"');

Letzteres ist ähnlich eval, es nimmt einen String und macht Javascript-Code daraus. Genauso wie im Fall von eval gilt auch hier: nicht verwenden.

Der Unterschied zwischen Funktionsdeklarationen und -ausdrücken ist oft schwer zu erkennen. ECMAScript unterscheidet anhand des Kontextes. Wenn function foo () {} z.B. Teil einer Zuweisung ist, wird es als Funktionsausdruck interpretiert. Genauso wenn es innerhalb von Klammern notiert wird, da ( und ) als "grouping operator" definiert sind, und als solche nur Ausdrücke beinhalten können. Ein paar Beispiele:

Beispiel
function foo () {};           // Deklaration, da keine Zuweisung oder Gruppierung.
 
var bar = function foo () {}; // Ausdruck, da eine Zuweisung. Wenn man nur diese Zeile ausführt, hat man also keine Variable "foo", 
                              // die auf eine Funktion referenzieren würde.
 
new function foo () {};       // Ausdruck, da es Teil eines "new"-Ausdruckes ist.
 
(function foo () {});         // Ausdruck, aufgrund des Gruppen-Operators.

Die Unterschiede zwischen den beiden Varianten sind gering.

Funktionsdeklarationen werden unabhängig davon, wo sie im Quelltext stehen, gleich zu Beginn geparst und interpretiert. In folgendem Beispiel wird Hallo Welt ausgegeben obwohl die Funktion foo im Quelltext erst nach seinem Aufruf deklariert wird:

Beispiel
alert(foo());
 
function foo () {
  return 'Hallo Welt';
}

Das kann in manchen Fällen zu unerwartetem Verhalten führen.

Beispiel
if (true) {
  function foo () {
    return 'first';
  }
} else {
  function foo () {
    return 'second';
  }
}
foo(); // Manche Javascript-Engines führen die erste Funktion aus, manche die zweite.

Um dennoch Funktion haben zu können, die von Bedingungen abhängig sind, muss man sie als Funktionsausdruck erstellen und einer Variable zuweisen:

Beispiel
var foo;
if (true) {
  foo = function () {
    return 'first';
  };
} else {
  foo = function () {
    return 'second';
  };
}
foo(); // Jede Javascript-Engine führt die erste Funktion aus.

[Bearbeiten] Funktionen aufrufen

Alle Funktionen, die selbst definierten sowie die vordefinierten, können aufgerufen werden, um den darin enthaltenen JavaScript-Code auszuführen.

  • JavaScript 1.0
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
    function PrimzahlCheck (Zahl) {
      Zahl = parseInt(Zahl, 10);
        if (isNaN(Zahl)) {
          alert('Sie müssen eine Zahl eingeben!');
          return;
        }
      var Grenzzahl = Zahl / 2;
      var Check = 1;
        for (var i = 2; i <= Grenzzahl; i++)
          if (Zahl % i == 0) {
            text = Zahl + ' ist keine Primzahl, weil teilbar durch ' + i;
            Check = 0;
          }
      if (Check == 1)
      text = Zahl + ' ist eine Primzahl!';
	  var ausgabe = document.getElementById('ausgabe');
	  ausgabe.innerHTML = text;
    }

Das obige Beispiel zeigt eine komplette HTML-Datei. Darin ist ein JavaScript-Bereich definiert, in dem wiederum die Funktion PrimzahlCheck() definiert ist. Im Dateikörper der HTML-Datei steht ein Formular mit einem Eingabefeld und einem Button. Im Eingabefeld kann der Anwender eine Zahl eingeben. Wenn er auf den Button klickt, wird die JavaScript-Funktion aufgerufen und ermittelt, ob es sich bei der Eingabe um eine Primzahl handelt. Dazu enthält der Button den Event-Handler onclick (= beim Anklicken). Dahinter wird die JavaScript-Funktion mit der eingegebenen Zahl aufgerufen.

Die Funktion rufen Sie mit ihrem Funktionsnamen auf. Dahinter folgt die öffnende Klammer. Wenn die Funktion keine Parameter erwartet, notieren Sie hinter der öffnenden gleich eine schließende Klammer. Wenn die Funktion Parameter erwartet, müssen Sie für jeden Parameter einen erlaubten Wert übergeben. Im Beispiel erwartet die Funktion einen Parameter. Wenn Sie mehrere Parameter übergeben, trennen Sie diese durch Kommata.

[Bearbeiten] arguments innerhalb einer Funktion

arguments ist innerhalb von Funktionen eine System-Variable die sich ähnlich wie ein Array verhält. Sie hat eine Eigenschaft length der die Anzahl der übergebenen Argumente entnommen werden kann. Zugriff auf die Werte der einzelnen Argumente erhält man über arguments[0] bis arguments[arguments.length - 1], dies sind die der Funktion übergebenen Werte in genau dieser Reihenfolge.

Ähnlich wie ein Array, aber nicht genauso, da arguments die Methoden die ein Array hat (z.B. splice()) nicht besitzt. Um diese dennoch anwenden zu können kann man sich mittels .call() bzw. .apply() behelfen.

Beispiel
// foo verwendet die Arraymethode splice um das erste übergebene Argument abzuschneiden, und gibt dieses neue Array zurück.
var foo = function () {
    return [].splice.call(arguments, 1);
  };
foo(1, 2, 3, 4); // Gibt ein Array [2, 3, 4] zurück.

Es ist prinzipiell eine schlechte Idee und davon abzuraten ein Argument oder eine Variable mit dem Namen "arguments" zu erstellen.

[Bearbeiten] Funktionen mit Rückgabewert

Eine Funktion kann einen oder mehrere ermittelte Werte an die aufrufende Instanz zurückgeben.

  • JavaScript 1.0
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
    function BruttoBetrag (Netto, Prozente) {
      var Ergebnis = Netto * (1 + (Prozente / 100));
      return Ergebnis;
    }
 
    function SchreibeBrutto (Betrag, Prozentsatz) {
      var Wert = BruttoBetrag(Betrag, Prozentsatz);
	  var ausgabe = document.getElementById('ausgabe');
	  ausgabe.innerHTML = Wert;
    }

Das obige Beispiel zeigt eine HTML-Datei, in deren Dateikopf ein JavaScript-Bereich definiert ist, in dem wiederum die zwei Funktionen BruttoBetrag(...) und SchreibeBrutto(...) definiert sind. Im Dateikörper der HTML-Datei steht ein Formular mit je einem Eingabefeld für einen Nettobetrag und einen Prozentwert. Wenn der Anwender auf den darunter definierten Button klickt, wird die Funktion SchreibeBrutto(...) aufgerufen. Diese wiederum ruft die Funktion BruttoBetrag(...) auf.


Da die Funktion BruttoBetrag(...) ihr errechnetes Ergebnis an die aufrufende Instanz zurückgibt, wird in SchreibeBrutto(...) eine Variable mit dem Namen Wert definiert, die diesen Rückgabewert speichert. Das Ergebnis, das in dieser Variablen gespeichert ist, schreibt die Funktion schließlich in den Absatz mit der id ausgabe.


Funktionen können ein oder mehrere return-Statements beinhalten. Diese beenden die Funktion und definieren den Rückgabewert. Falls return innerhalb einer Funktion nicht aufgerufen wird, wird die Funktion nach deren letztem Statement verlassen und undefined zurückgegeben.

Beachten Sie: Zwischen return und dem Wert, der zurückgegeben werden soll, dürfen keine Zeilenumbrüche sein.
Beispiel
var foo = function () {
    return
      true;
  };
foo(); // Gibt undefined zurück, da nach return ein Zeilenumbruch kommt

[Bearbeiten] Variablen Scope

Mit Scope ist die Gültigkeit oder Sichtbarkeit einer Variable gemeint. Javascript erzeugt für jede Funktion einen neuen Scope. Es kann nur auf Variablen aus dem aktuellem oder übergeordneten Scopes zugegriffen werden.

Beispiel
var bar = 1;
var foo = function () {
    var baz = 2;
    return bar + baz;
  };
foo(); // Gibt 3 zurück
bar + baz; // Erzeugt einen Ausführungsfehler, da baz nicht definiert wurde.

Javascript hat keinen Blockscope, d.h. Variablen die z.B. innerhalb eines if-Blocks gesetzt wurden sind auch außerhalb von diesem sichtbar. Weitere Feinheiten zu Scope in JavaScript finden Sie im Tutorial zum Umgang mit Callback-Funktionen.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke