Funktionen

Funktionen sind Unterprogramme, welche meistens im Header einer HTML-Seite zu finden sind. Sie haben bereits viele Funktionen in Ihren Programmen genutzt wie z.B. parseInt(), parseFloat(), prompt(). Jetzt können Sie selbst eigene Funktionen hinzufügen. Es gibt verschiedene Arten von Funktionen. Wir fangen hier jetzt mit der einfachsten Funktion an.

Eine ganz einfache Funktion (engl. function)

Funktionen kann man sich vorstellen als Blöcke mit Namen. Funktionen sind sozusagen benannte Zusammenfassungen von mehreren Anweisungen. Das sieht dann z.B. wie folgt aus:
function lalala()
{
  alert("la");
  alert("la");
  alert("la");
}
Die obige Funktion können Sie zum Testen in Ihr Programm übernehmen. Hierzu müssen Sie den Quelltext einfach nur zwischen die Script-Tags in Ihre HTML-Seite einfügen.In Ihrem Programm können Sie die Funktion benutzen, indem Sie als Anweisung jetzt einfach nur folgendes schreiben:
lalala();
So oft Sie wollen können Sie jetzt die neue Funktion in Ihrem Programm an verschiedenen Stellen nutzen:
lalala();
document.write("und noch einmal bitte");
lalala();
alert("und weil es so schön war");
lalala()

Eine Funktion mit Übergabewerten

Was sind Übergabewerte?

Übergabewerte sind Werte, welche einer Funktion übergeben werden. Werte werden der Funktion übergeben, indem sie durch Komma getrennt in die runden Klammern des Funktionsaufrufes geschrieben werden. Solche Werte müssen nicht unbedingt zuvor in bereits existierenden Variablen gespeichert werden. Das kennen Sie z.B. bereits von der Funktion confirm():
confirm("Wollen Sie weitermachen?")
Die Zeichenkette "Wollen Sie weitermachen?" ist hier der zu übergebende Wert.
Es ist z.B. vorstellbar, dass Sie einen Text an eine Ausgabefunktion übergeben möchten. Wie würde das aussehen?
So:
var text="Hallo";
ausgabe( text );
oder so:
ausgabe("Hallo");
In beiden Fällen wird der Text "Hallo" an eine Funktion namens ausgabe() übergeben, die dann mit dem Text irgendetwas tut.

Beispiel: Aufruf der Funktion addiere()

Der folgende Funktionsaufruf addiere() arbeitet mit den zwei zu übergebenden Zahlen 53 und 123. Das Ergebnis der Addition soll in der globalen Variable ergebnis gespeichert werden.
// Addiere doch mal die zwei Zahlen 53 und 123!
addiere( 53, 123 );
Die Zahlen 53 und 123 sind hier die zu übergebenden Werte, d.h. die Übergabewerte. Anschließend an den Aufruf der Funktion soll man das Ergebnis - z.B. mit alert( ergebnis ) - ausgeben können.

Wie sieht die Funktion addiere() aus?

Die Funktion addiere() benötigt zwei Platzhalter für die zu übergebenden Zahlen. Die Platzhalter für zu übergebende Werte nennt man Parameter. Parameter funktionieren wie Variablen und man nutzt diese auch so - nur dass man diese nicht noch einmal zusätzlich irgendwo deklarieren muss.
// G L O B A L E  V A R I A B L E N
var ergebnis;   // In der Variable ergebnis wird das Rechenergebnis gespeichert.
                // Das Ergebnis kann nach dem Aufruf von addiere() ausgegeben werden.
 
/* F U N K T I O N addiere()
   Die folgende Funktion addiert zwei Zahlen.
   Das Ergebnis der Rechnung wird in der
   globalen Variable ergebnis gespeichert.
   Die Funktion wird nur dann ausgeführt,
   wenn sie im Hauptprogramm aufgerufen wird.
*/
 
function addiere( zahl1, zahl2 )
{
  ergebnis = zahl1 + zahl2;
}
 
// T E S T P R O G R A M M
 
// Eingabe von zwei zu addierenden Zahlen
 
var ZahlA, ZahlB;
var eingabe;
 
eingabe = prompt("Bitte geben Sie die Zahl 1 ein");
ZahlA   = parseFloat( eingabe );
 
eingabe = prompt("Bitte geben Sie die Zahl 2 ein");
ZahlB   = parseFloat( eingabe );
 
// Aufruf der Funktion
addiere( ZahlA, ZahlB );
 
// Ausgabe des Ergebnisses
document.write( "<br>Ergebnis: " + ergebnis );

Eine Funktion mit Rückgabewert (engl. return value) - Beispiel Begrüßungstest

Funktionen müssen Ergebnisse nicht in globalen Variablen speichern. Wenn es um einzelne Werte geht, die als Ergebnis weiterverarbeitet werden sollen, dann reicht es, diesen Wert mit der Anweisung return an die aufrufende Stelle im Hauptprogramm zurückzugeben. Dieses sehen Sie im folgenden Beispiel:
// Folgende Funktion erstellt einen Begrüßungstext,
// welcher im Hauptprogramm ausgegeben wird.
 
function hallihallo( name )
{
  var text = "Guten Tag " + name;
  return text;
}
 
// So kann man die Funktion im Hauptprogramm aufrufen
document.write( hallihallo( "Hubert" ) );
Addition mit Rückgabewert:
// Folgende Funktion addiert zwei Zahlen und gibt das Ergebnis zurück.
 
function addiere( zahl1, zahl2 )
{
  var erg = zahl1 + zahl2;
  return erg;
}
 
// So kann man die Funktion im Hauptprogramm aufrufen
document.write(  addiere( 2, 7) );
Eine Analogie aus dem realen Leben in Pseudocode:
Kopieren einer Vorlage
function Kopiere( anzahl, kopiervorlage )
{
  // Die produzierten Kopien werden hier gesammelt
  var kopien;
 
  // Die Namen der hier willkuerlich verwendeten
  // Funktionen geben schrittweise vor was zu tun ist
  // wie in einem richtigen Programm.
  geheZumKopierer();
  legeVorlageEin( kopiervorlage );
  tippeAnzahl( anzahl );
  drueckeStart();
  kopien = gedruckteKopienEinsammeln();
  zurueckZumAuftraggeber( kopien );
}

Übungen
siehe Menüpunkt Übungen->Funktionen

Diverse weitere Infos: