Diese Seite dient mir zum üben der Web-Programmiersprachen

Funktionen

Ein Programm besteht aus vielen Bausteinen. Einige davon tauchen immer wieder auf. Es gibt ganze Biblioteken mit solchen Bausteinen. Diese Programmstücke nennt man Funktionen. In ihnen steckt eine Abfolge von Befehlen, die außerhalb des Hauptprogrammes laufen. Sie bekommen einen Namen und können so leicht in den eigenen Code eingebunden werden. Das erspart viel Schreibarbeit und Zeit, macht den Code übersichtlicher und vereinfacht die Wartung oder Fehlersuche.

Vor dem Namen der Funktion steht der Schlüsselbegriff function, nach dem Namen stehen runde Klammern, die selbst wenn sie leer sind, unbedingt vorhanden sein müssen. Dann folgt, wie bei den if-Abfragen, die geschwungende Klammer, indenen die Befehle eingefasst sind.

function Funktionsname(){
   Befehl 1;
   Befehl 2;
   Befehl 3;
   ...
}

Funktionen erstellen und einbinden

Funktionen können an jeder beliebigen Stelle definiert werden. Sie könnten sogar eingesetzt werden, bevor sie definiert wurden. Üblicherweise wird sie am Anfang des Programmes erstellt, oder sie stehen in einer externen Datei. Es gibt Dateien mit einer ganzen Sammlung an Funktionen (Biblioteken). Die Einbindung dieser Dateien erfolgt mit dem Attribut src welches im script-Tag steht. Wenn mehrere Dateien eingebunden werden sollen, braucht man mehrere script-Tags, die dann leer bleiben können. Sie werden direkt nachdem sie geöffnet wurden wieder geschlossen.

<script src="funktion.js" type="text/javascript"> </script>

Ist die Funktion erstellt, passiert nichts. Sie muss erst aufgerufen werden, indem man ihren Namen mit den runden Klammern nennt.

function hallo(){
let name = prompt("Wie ist dein Name?");
alert ("Hallo " + name);
}
hallo();

Gültigkeitsbereich der Variablen

Variablen die im Hauptprogramm erstellt wurden nennt man auch globale Variablen sie haben überall ihre Gültigkeit und können auch überall verändert werden, selbst in einer Funktion. Sie darf in der Funktion nicht noch einmal deklariert werden, es endsteht sonst eine neue Variable mit dem gleichen Namen, die nicht mit der globalen Variable identisch ist. Variablen die innerhalb von Funktionen erstellt wurden, sind auch nur innerhalb der Funktion gültig.
Um nicht durcheinander zu kommen, sollte in Funktionen auf globale Variablen verzichtet werden. Es ist eine häufige Fehlerquelle, die so schwer zu finden ist.

Nun ist es oft notwendig das eine Funktion mit Werten aus dem Hauptprogramm arbeitet. Eine bessere Variante zu den globalen Variablen ist der Übergabewert. Dieser steht in den Klammern, nach dem Namen der Funktion. (Gemeint ist der Befehl welche im Hauptprogramm die Funktion auslöst) Er wird auch als Parameter oder Argument der Funktion bezeichnet. Es kann jeder Datentyp drin stehen, meist ist es eine Variable.
In der Funktion selbst steht in den Klammern eine neue Variable die den Wert der Funktion aufnimmt. Sie muss nicht mit let deklariert werden, die Funktion weiß selbst das diese Variable neu ist. Sie gilt nur innerhalb der Funktion.

function hallo(name){
   alert("Hallo" + name);
}
let eingabe = prompt("Wie ist dein Name?");
hallo(eingabe);

Die Funktion heißt "hallo" und wird nach "let eingabe" ausgelöst. In den Klammern der Funktion steht nun die Variable "eingabe". Damit startet die Funktion mit dem Wert von "eingabe" und speichert diesen in eine neue Variable, die "name" heißt und in den Klammern nach dem Funktionsnamen steht. Mit dieser lokalen Variable arbeitet nun die Funktion ohne die globale Variable zu verändern. So ist es möglich die Funktion immer wieder mit verschiednen Übergabewerten zu starten. Es ist auch möglich mehreren Werten auf einmal zu übergeben. Diese müssen mit einem Komma getrennt werden.

function hallo(name, alter){
   alert("Name: " + name + "<br>");
   alert("Alter: " + alter);
}
let eingabe = prompt("Wie ist dein Name?");
let eingabe2 = prompt("Wie ist dein Alter?");
hallo(eingabe, eingabe2);

Rückgabewert

Ist die Funktion durch, gibt sie ihr Ergebnis mit Hilfe eines Rückgabewertes zurück. Dafür kommt der return-Befehl zum Einsatz. Dieser beendet automatisch die Funktion. Der Wert, welcher ins Hauptprogramm zurück gegeben werden soll, muss dabei in der gleichen Zeile wie der return-Befehl stehen.

function quadrat(x){
   return x * x;
}

In diesem Beispiel ist x eine Zahl. Diese Funktion gibt das Quadrat von x zurück. Der return-Befehl kann auch Variablen zurück geben, wie im folgenden Beispiel. x bekommt den Wert 3, das ergebnis wird mit return zurück geschickt. Dessen Wert befindet sich nun in der Variable wert.

function quadrat(x){
   let ergebnis = 2 * x - x + 5;
   return ergebnis;
}
let wert = quadrat(3);
alert (wert);

Jede Funktion kann nur einen Rückgabewert besitzen, wenn mehrere Werte übermittelt werden sollen, kann man diese in einem array schreiben.


Übungsaufgabe

Der Anwender wird nach einem Wert gefragt, der in einer Funktion verdoppelt werden soll.
Ein weiteres Programm soll das gleiche tun, aber die Abfrage und Ausgabe soll im Hauptprogramm statt finden. Es wird dafür ein Übergabe- und Rückgabewert benötigt.

Hier geht es zur Lösung (in der Funktion)
Hier geht es zur Lösung (mit der Funktion)

Ein array besitzt beliebige Zahlen, die alle in einer Funktion verdoppelt werden sollen. Die Ergebnisse sollen im ursprünglichen array abgelegt und im Hauptprogramm ausgegeben werden. Es sind keine globalen Variablen erlaubt.

Hier geht es zur Lösung