Funktionen erklären und aufrufen

Eine Möglichkeit für das Coden ist die Zusammenfassung komplizierter Berechnungen und mehrerer Anweisungen unter einem einheitlichen Namen.

Beispiel: Es sollen folgende Berechnungen durchgeführt werden, wobei nur die Zahl 7 ersetzt werden soll

zuerst:

7 * (3 - 5 / (2 - 7)) + 3 * 7

dann wird die Zahl 7 mit der Zahl 6 ersetzt, alle andern Zahlen bleiben gleich

6 * (3 - 5 / (2 - 6)) + 3 * 6

dann wird die Zahl 6 mit der Zahl 9 ersetzt, alle andern Zahlen bleiben gleich

9 * (3 - 5 / (2 - 9)) + 3 * 9

und so könnte das endlos weitergehen - natürlich auch mit der Änderung der anderen Zahlen.

Das bedeutet es wird immer dasselbe gerechnet und es ändert sich nur die Zahlen in unterschiedlichen Stellen dieser Rechnerei.

Mathematische Lösung

Die Zahlen werden durch Platzhalter, also Variablen, ersetzt.

Die Berechnung lautet dann allgemein:

ergebnis = a * (b - c / (d - a)) + b * a

Wobei im obersten Beispiel a,b,c,d folgende Werte haben:

a = 7
b = 3
c = 5
d = 2

Lösung aus Sicht des Programmierens

Dafür dient die Funktion. Zuerst wird beschrieben, was diese tun soll und anschließend kann diese bei Bedarf aufgerufen werden.

Zuerst erhält die Funktion einen Namen, unter der diese immer wieder aufrufen werden kann. Der Name der Funkion sei zahlenverwurschteln.

zahlenverwurschteln

Nun wird mitgeteilt wer zahlenverwurschtelt wird. Dies geschieht durch die Nennung der Variablen a,b,c,d. Die Variablen werden neben dem Funktionsnamen in Klammern gesetzt. Mehrere Variablen werden durch einen Beistrich getrennt. Dies sieht dann so aus:

zahlenverwurschteln(a,b,c,d)

Damit das Programm weiß, dass Sie hier eine Funktion für das Programm deklarieren, wird das Wort function vor den Namen gesetzt:

function zahlenverwurschteln(a,b,c,d)

Anschließend werden die Anweisungen, die unter dem Aufruf der Funktion veranlasst werden, innerhalb geschwungener Klammern aufgeschrieben.

function zahlenverwurschteln (a,b,c,d) {
        ergebnis = a * (b - c / (d - a)) + b * a;
        }

Um den errechneten Wert bzw. das Ergebnis übergeben zu können, verwendet man das Wort return.

return ergebnis;

Damit lautet die vollständige Deklaration der Funktion:

function zahlenverwurschteln(a,b,c,d){
    ergebnis = a * (b - c / (d - a)) + b * a;
    return ergebnis;
}

Die { } - Klammern werden zwecks Übersichtlichkeit wie oben gesetzt. Damit ist die Funktion vollständig erklärt.

Funktion verwenden

Jetzt muss diese nur noch verwendet werden. Dies geschieht durch Nennung des Funktionsnamens. In den Klammern werden die Werte, die die Funktion berechnen soll, angeführt. Das Ergebnis der Berechnung wird an eine Variable ergebnis übergeben.

Damit lautet die Anweisung die Funktion aufzurufen und den Wert an die Variable ergebnis zu übergeben.

ausgabe = zahlenverwurschteln(7,3,5,2);

Anschließend wird der Wert der Variablen mit zusätzlichem Kommentar zur Variablen ausgabe im Browser dargestellt.

Es ist zu beachten das in Fenstern, die vom Betriebssystem verwendet werden \n für new line also einen Zeilenumbruch steht.

Im Gegensatz dazu wird der Html-Tag <br> für die Angabe eines Zeilenumbruches in einer Html Seite verwendet.

Beispiel 2:

 function zahlenverwurschteln (a,b,c,d){
     alert("Wert der Variablen a: " + a + "\nWert der Variablen b: " + b);
     ergebnis = a * (b - c / (d - a)) + b * a;
     return ergebnis;
     alert("Funktion erfolgreich durchgeführt");
     }
     
 ausgabe = zahlenverwurschteln(7,3,5,2);
 document.write("Nach der Durchführung der Berechnung : <br>Die Variable <b>ergebnis</b> hat den Wert: " + ausgabe);

Anwendung 2

Achtung, die return-Anweisung beendet einen Funktionsaufruf sofort! - Egal was anschließend noch dort steht!

In JavaScript auch möglich

Name der Funktion einer Variablen zuweisen

 var add = function zahlenverwurschteln (a,b,c,d){
     x = a * (b - c / (d - a)) + b * a;
     return x;
     }
     
 var ergebnis = add(7,3,5,2);
 alert(ergebnis);

Der Funktionsaufruf erfolgt mit den Variablennamen und den Parametern.

Anonyme Funktion

Erhält die Funktion bei Ihrer Definition keinen Namen, dann spricht man von einer anonymen Funktion

 function (a,b,c,d){
     x = a * (b - c / (d - a)) + b * a;
     return x;
     }

verkürzte Schreibweise einer anonymen Funktion

( ) => { }

Umwandlung der Schreibweise einer Funktion mittels einem Pfeil:

aus

wird

 (a,b,c,d) => a * (b - c / (d - a)) + b * a);

Links vom Pfeil befinden sich die Argumente zwischen den runden Klammern => rechts vom Pfeil befindet sich die Funktionanweisungen die normalerweise zwischen den geschwungenen Klammern stehen.

Und wenn in der anonymen Funktion mehrere Anweisungen anzugeben sind:

 (a,b,c,d) => {
     a * (b - c / (d - a)) + b * a;
     alert(ergebnis);
     return ergebnis;
     }

Die namenlose Funktion kann einer Variablen zugwiesen werden

 var add = function(a,b,c,d){
     x = a * (b - c / (d - a)) + b * a;
     return x;
     }
     
 var ergebnis = add(7,3,5,2);
 alert(ergebnis);

anonyme Funktion [IIFE] die sofort ausgeführt wird

 (() => {
    var a = "test";
    alert(a);
 })();

Dazu sind 3 Schritte notwendig.

1. Die Definition der Funktion innerhalb von runden Klammern setzen
2. Anschließend 2 runden Klammern nach der Funktionserklärung setzen damit sie sofortaufgerufen und ausgeführt wird.
3. Diese Anweisung mit einem Strichpunkt beenden

Stufenweise erkährt:

1. anonyme Funktion: function () { … }
2. Diese Funktion in runden Klammern setzen, damit der Inhalt innerhalb dieser Klammern zuerst erledigt wird:
   [ Das ist wie in der Mathematik wenn folgendes zu rechnen ist 2*(3 + 4)] -> zuerst 3+4 und dann *2
   (function () {})
   
   ( inhaltZwischenDenKlammern ) = ( function () {} )
   
   
3. Führe den inhaltZwischenDenKlammern als Funktion aus. Entspricht einem normalen Funktionsaufruf!
   
   (inhaltZwischenDenKlammern) ();
   
   inhaltZwischenDenKlammern ();
   
4. Zusammengefasst: (function () { … }) () ;

Nicht vergessen! Schließe die Anweisung mit einem ; ab.

Funktion als Parameter

Eine Funktion kann als Parameter einer anderen Funktion übergeben werden!

Closure

Funktion die die Umgebungsvariable verwenden

Da innerhalb einer Funktion eine weitere Funktion tätig werden kann, hat diese innere Funktion die Fähigkeit auf die Variable der äußeren Funktion zuzugreifen. Dies nennt man ein Closure - auf deutsch eine Umschließung

Beispiel 3:

Jedesmal wenn auf das Wort Klicken geklickt wird, wird der counter um 1 erhöht. Das Ergebnis wird unter dem Wort Klicken angezeigt.

<head>
    <script>
      
       function aussenFunktion() {
            var x = 0;
            
          return function() {
                  x = x + 1;
                  return x;
          }
        }
        var count = aussenFunktion();
    </script>
</head>
<body>
    <div>Klicken</div>
    <div class="ausgabe">Noch keine Ausgabe vorhanden</div>
    <script>
        var anweisung = aektschn;
        var art_des_signals = "click";
        var akteur = document.querySelector("div");

        function aektschn() {
            document.querySelector(".ausgabe").innerHTML = count();
        }
        akteur.addEventListener(art_des_signals, anweisung);
    </script>
</body>

Anwendung 3

Eine Funktion verwenden um ein Objekt zu erzeugen

Wird der Funktionsname mit new aufgerufen wird ein Objekt erzeugt!

Beispiel

 function Person(vorname, alter) {
     this.myname = vorname
     var myalter = alter;
     this.sage_mein_alter = function(){
         return myalter-10;
     }
 }

 roland = new Person("Roland",60);