Jetzt anmelden...

Login
Passwort
Registrieren

JavaScript Tutorial #7

Funktionen programmieren

Funktionen sind Codeblöcke, die bei ihrer Ausführung ganz bestimmte Aufgaben erledigen. Mit Funktionen können wir unser Programm in kleinere Teilprogramme unterteilen (Modularisierung) und damit strukturieren.

Kommentare [0] 69 Views

Stefan 05.05.2020

Infos zum Artikel

Kategorie JavaScript
Autor Stefan
Datum 05.05.2020

Schnelles Beispiel

  • Funktionen sind spezielle Anweisungen, die jeweils ganz bestimmte Aufgaben erfüllen, wenn Sie ausgeführt werden:

<script>

    // Definition der Funktion
    function meineFunktion(){
        document.write("This is my function!");
    }

    // Aufruf der Funktion
    meineFunktion(); // This is my function!

</script>

Was sind Funktionen?

Eine JavaScript-Funktion ist ein Codeblock, der dazu geschrieben wurde, um ganz bestimmte Aufgaben zu erfüllen. Eine Funktion wird ausgeführt, indem Sie im Programm aufgerufen wird.

Funktionen gehören zum Handwerkszeug eines jeden Programmierers. Die beiden wichtigsten Vorteile von Funktionen sind:

  • Modularisierung: Mit Funktionen können wir unser Programm in kleinere Programmteile ("Unterprogramme") aufteilen. Dadurch wird unser Code strukturierter und übersichtlicher.
  • Kein doppelter Code: Bestimmte Vorgänge, die sich wiederholen bzw. häufiger benötigt werden, müssen nur einmal durch eine Funktion beschrieben werden. Danach können sie durch einen einfachen Funktionsaufruf immer wieder ausgeführt werden.

Der Grundaufbau einer JavaScript-Funktion sieht so aus:

JavaScript Funktion Schaubild

Wir wollen nun nach diesem Muster eine Funktion schreiben, die uns beim Aufruf 7 Sternchen und einen Zeilenumbruch am Bildschirm ausgibt:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
<title>Funktionen mit JS</title>

    <script>
        // Definition der Funktion
        function meineFunktion(){
            document.write("******* <br>");
        }
    </script>
    
</head>
<body>

    <script>
        // Aufruf der Funktion
        meineFunktion();
    </script>

</body>
</html>

Das Ergebnis sieht dann so aus:

*******                        

Bei Funktionen unterscheiden wir zwischen Definition und Aufruf:

  • Die Definition einer Funktion ist die Implementierung ("Bauplan") und beschreibt, wie sie arbeiten soll. In unserem Beispiel wird die Funktion im head-Bereich definiert.
  • Aufruf: Sobald die Funktion definiert wurde, kann sie beliebig oft ausgeführt ("gestartet") werden. Dazu schreiben wir den Namen der Funktion und die Parameterklammern an die gewünschte Stelle.

Wir können die Funktion mehrmals ausführen...

// Code darüber
    <script>
        meineFunktion();
        meineFunktion();
        meineFunktion();
    </script>
// Code darunter

... und bekommen im Browser dann entsprechend das angezeigt:

*******
*******
*******
  • JavaScript ebook

Parameter

Bei Parametern handelt es sich um Werte, die in eine Funktion "hineingegeben" werden. Die Funktion kann mit diesen Werten anschließend arbeiten.

Beschrieben werden die Parameter in den runden Klammern der Funktionsdefinition.

Programmieren wir nun eine Funktion mit zwei Parametern. Die Funktion soll die beiden Parameter-Werte addieren und das Ergebnis am Bildschirm anzeigen:

function addiere(zahl1, zahl2){
    var erg = zahl1 + zahl2;
    document.write(erg);
}

Wie wir sehen, werden mehrere Parameter in den runden Klammern durch Komma voneinander getrennt.

Und jetzt rufen wir die Funktion entsprechend auf:

addiere(4,6); // 10

Achtung: Die Anzahl der übergebenen Werte beim Funktionsaufruf sollte mit der Anzahl der Parameter in der Funktionsdefinition sein.

Variablen übergeben

In unserem Beispiel oben haben wir der Funktion addiere() zwei Literale übergeben. Selbstverständlich sind auch Variablen als Parameter möglich:

var z1 = 4;
var z2 = 6;
addiere(z1,z2); // 10

Rückgabewert

Funktionen in JavaScript können einen Rückgabewert haben. Rückgabewert bedeutet, dass eine Funktion nach ihrem Aufruf einen bestimmten Wert an das Programm zurückliefert. Dieser Wert kann zum Beispiel eine Zahl, eine Zeichenkette oder ein Wahrheitswert sein (um nur einige Möglichkeiten zu nennen).

Der Rückgabewert wird innerhalb einer Funktion mit einer return-Anweisung beschrieben.

Erweitern wir unsere Funktion addiere() entsprechend:

function addiere(zahl1, zahl2){
    return (zahl1 + zahl2);
}

Mit dem Funktionsaufruf wird der Rückgabewert angefordert, mit dem dann weitergearbeitet werden kann:

var ergebnis = addiere(4,6); //10

Der Rückgabewert ist 10. Dieser Wert wird in unserem Beispiel in der Variablen ergebnis gespeichert.

Rufen wir die Funktion dagegen auf und "greifen" uns den zurückgelieferten Wert nicht in einer Variable oder geben ihn nicht mit document.write() am Bildschirm aus, ist der Wert verloren und "verpufft".

Funktionen als Maschinen

Stellen sie sich eine Funktion mit Parameter- und Rückgabewerten ruhig als eine Maschine vor, in die von außen "etwas reinkommt" (Parameter) und am Ende nach einer Verarbeitung etwa in Form eines Rückgabewerts "rauskommt".

JavaScript Funktion Schaubild

Gültigkeit von Variablen

Es gibt einen wichtigen Zusammenhang zwischen Variablen und Funktionen. Denn es macht einen Unterschied, ob eine Variable außerhalb oder innerhalb einer Funktion definiert ist:

  • Globale Variablen: Diese werden außerhalb von Funktionen definiert und sind überall im Programm gültig. Sie können außerhalb und innerhalb von Funktionen eingesetzt werden.
  • Lokale Variablen: Diese werden innerhalb einer Funktion definiert. Sie sind deshalb nur innerhalb der Funktion gültig und können außerhalb davon nicht eingesetzt werden.

Mal sehen, was das konkret bedeutet 🧐

<script>

    function sayMyName(){
        var katze = "Simba"; //lokale Variable
    }

    document.write(katze); // Fehler!

</script>

Wir definieren die Variable katze innerhalb der Funktion sayMyName(). Die Variable ist damit eine lokale Variable. Der Versuch, auf diese außerhalb der Funktion zuzugreifen, kann nicht funktionieren, da sie dem Programm außerhalb der Funktion nicht bekannt ist. Wir erhalten in der JavaScript-Konsole daher eine entsprechende Fehlermeldung (Can't find variable: katze).

Umgekehrt ist das natürlich kein Problem:

<script>

    var katze = "Simba"; //globale Variable

    function sayMyName(){
        document.write(katze); // Simba
    }

</script>

Da jede Funktion ihren eigenen Gültigkeitsbereich hat, können wir in unterschiedlichen Funktionen Variablen mit demselben Namen definieren.

Verhalten bei Parameter-Variablen

Parameter stellen lokale Kopien des in die Funktion eingegebenen Werts dar:

<script>
var katze = "Simba";

function sayMyName(katzeP){
    katzeP = "Bailey";
}

sayMyName(katze);
document.write(katze); // Simba

</script>

Die Funktion sayMyName() erhält beim Aufruf den Wert der Variablen katze als Argument. Dieses Prinzip nennt man pass-by-value:

  • Pass-by-value: Werden Variablen beim Funktionsaufruf eingesetzt, werden deren Werte in die Parametervariable kopiert. Es wird also nur der Inhalt von Variablen in die Funktion übertragen, nicht die Variablen selbst.

Wenn wir also nun innerhalb der Funktion den Wert der Parametervariablen ändern, hat dies keine Auswirkung auf die ursprüngliche Variable außerhalb der Funktion. Deshalb hat in unserem Beispiel die globale Variable katze am Ende des Codes unverändert den Wert "Simba".

Funktionen auslagern

Bisher haben wir unsere Funktionen stets im head-Bereich der Website definiert. Das ist OK, aber hat den Nachteil, dass diese Funktionen auch nur auf der gleichen Seite abrufbar sind.

Wenn wir Funktionen programmübergreifend nutzen wollen, müssen wir sie in einer externen Datei auslagern.

Die externe Datei hat die Endung .js. Es gibt dort keinen <script></script> Tag:

//Datei extern.js

function meineFunktion1(){
    document.write("This is sunshine ");
}

function meineFunktion2(){
    document.write("This is rain");
}

Die externen Funktionen binden wir im head-Bereich mit einem src-Attribut im script-Tag ein. Auf die Funktionen können wir dann wie gewohnt im body-Bereich der Seite zugreifen:

<!DOCTYPE html><html lang="en"><head>

    <script src="extern.js"></script> // Einbinden der .js-Datei

</head><body>
        
<script>
    meineFunktion1();
    meineFunktion2();
</script>

</body></html>

So ist das 😀

Übungen

einfach

Definieren Sie im head-Bereich Ihrer Seite eine Funktion, die beim Aufruf den Text "You get, what you see" ausgibt. Rufen Sie die die Funktion anschließend im body-Bereich zweimal auf.

Lösung ein-/ausblenden

mittel

  1. Schreiben Sie eine Funktion namens gibProdukt(). Diese besitzt zwei Parameter für Zahlen-Werte. Innerhalb der Funktion sollen die beiden Werte miteinander multipliziert und das Ergebnis am Ende der Funktion zurückgeliefert werden.
  2. Rufen Sie die Funktion nun mit zwei beliebigen Ganzzahlen auf und speichern den Rückgabewert in einer Variablen namens produkt. Nutzen Sie document.write(), um den Wert der Variablen produkt am Bildschirm anzuzeigen.

Lösung ein-/ausblenden

schwer

Schreiben Sie eine Funktion namens getFigur() mit einem Parameter für die Übergabe einer Zeichenkette.

Sofern beim Funktionsaufruf die übergebene Zeichenkette "Mario" lautet, wird ein Mario-Bild am Bildschirm angezeigt. Lautet die Zeichenkette dagegen "MegaMan", kommt - gut geraten! - das MegaMan-Bild zum Vorschein. Bei jeder anderen Zeichenkette folgt eine Fehlermeldung ("Fehler, bitte gültige Figur eingeben").

Hier die beiden, schön pixeligen Grafiken (rechte Maustaste -> Bild speichern unter...):

Lösung ein-/ausblenden

Falconbyte unterstützen

Kommentar schreiben

Nur angemeldete und aktivierte Benutzer können kommentieren.

Alle Kommentare

Es gibt bislang noch keine Kommentare zu diesem Thema.

FALCONBYTE.NET

Handmade with 🖤️

© 2018-2020 Stefan E. Heller

Impressum | Datenschutz

facebook programmieren lernen twitter programmieren lernen youtube programmieren lernen