JavaScript/Tutorials/Einstieg/Funktionen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
45min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
keine

Funktionen helfen Programmierern, einzelnen Programmteilen einen Namen zu geben und diese mehrfach wiederzuverwenden.

Das Grundprinzip ist leicht: Man ruft eine Funktion mit unterschiedlichen Parametern auf. Die Funktion erfüllt eine bestimmte Aufgabe anhand der Parameter und gibt das Ergebnis zurück. Je nach Parameter wird die Funktion üblicherweise auch andere Resultate liefern.

Beispiel: Aufbau einer Funktion
function funktionsname(Parameterliste) {
  // Anweisungen
}

Jede Funktion hat einen Namen, eine Parameterliste und einen Rückgabewert. Die Parameter sind Eingabewerte für die Funktion. Sie stehen innerhalb der Funktion als Variablen zur Verfügung. Das heißt, dass man über die Parameter Daten in die Funktion hineingibt, in der Funktion dann verarbeitet und das Verarbeitungsergebnis dann über den Rückgabewert an den Aufrufer der Funktion zurückgibt.

Betrachten wir hierzu ein Beispiel, das Ziehen der Quadratwurzel:

Beispiel: 9. Funktion WurzelZiehen ansehen …
'use strict';
var eingabe,
    ergebnis,
    text;

  function wurzelZiehen(zahl) {
    zahl = parseFloat(zahl);
    ergebnis = Math.sqrt(zahl);
    return ergebnis;
  }
 
  eingabe = prompt('Bitte geben Sie eine Zahl ein!', eingabe);
 
  wurzelZiehen(eingabe);
  text = 'Die Wurzel von ' + eingabe + ' ist ' + ergebnis + '.';
  document.write(text);
Nachdem die Variablen deklariert wurden, wird eine Funktion wurzelZiehen() erzeugt, aber nicht ausgeführt.

Die geschweiften Klammern kennzeichnen Start und Ende des Anweisungsblocks.
Damit bei einer Eingabe eines Buchstabens oder ähnlichem keine Fehlermeldung NaN ausgeworfen wird, wird die übergebene Variable überprüft und, wenn nötig mit parseFloat passend formatiert.
Die Funktion zieht mit Math.sqrt() die Wurzel aus der übergebenen Zahl und weist sie der Variablen ergebnis zu. Der Rückgabewert der Funktion ist die Variable ergebnis und wird durch das Schlüsselwort return gekennzeichnet. Mit diesem Befehl wird die Funktion also beendet und gleichzeitig der Inhalt von ergebnis an den Aufrufer von wurzelZiehen zurückgegeben.

Wenn eine Zahl eingabe eingegeben wird, wird die Funktion wurzelZiehen(eingabe); aufgerufen und ihr die Variable eingabe übergeben. Der Rückgabewert wird in der Variablen ergebnis abgelegt. Dieses wird dann wieder ausgegeben.
Beachten Sie: Die Überprüfung der Eingabe mit parseFloat sollte schon bei der Eingabe erfolgen, sodass an die Funktion wurzelZiehen nur gültige Zahlen übergeben werden. Aus Gründen der Einfachheit wurde hier auf eine solche Schleife verzichtet.
In einer normalen Webseite kann durch die Verwendung von input type="number" sichergestellt werden, dass nur Zahlen eingegeben werden können.

Wie Sie sicherlich gesehen haben, entstehen beim Wurzelziehen nur in den seltensten Fällen ganze Zahlen. Da die Dezimalzahlen nicht besonders ansehnlich sind, können Sie sie auch runden:

Beispiel: 10. Runden einer Zahl ansehen …
<script>
'use strict';
  var eingabe,
      ergebnis,
      gerundet,
      text;
  
  //Helferfunktionen
  function wurzelZiehen(zahl) {
    ergebnis = Math.sqrt(zahl); 
    runden(ergebnis); 
    return gerundet;
  }
  
  function runden(zahl) {
    gerundet = zahl.toFixed(2);
    return gerundet;
  }
	  
  eingabe = prompt('Bitte geben Sie eine Zahl ein!', eingabe);
  eingabe = parseFloat(eingabe);	
  if (isNaN(eingabe)) {
    alert('Der eingebenene Wert:' + eingabe + ' ist keine Zahl!');
  }
  
  wurzelZiehen(eingabe);
  text = 'Die Wurzel von ' + eingabe + ' ist ' + ergebnis + ', gerundet ' + gerundet + '.';
  document.write(text);	

</script>
Direkt nach der Eingabe wird die erhaltene Variable überprüft und, wenn nötig mit parseFloat passend formatiert.

In einer Abfrage wird überprüft, ob die Variable ungültig ist. Wenn das der Fall ist, wird eine Fehlermeldung mit alert() ausgegeben.
Die Funktion wurzelZiehen() ruft nach der Berechnung die Funktion runden() auf und übergibt ihr die Variable ergebnis.
Anschließend wird die Zahl mit toFixed(2) auf 2 Nachkommastellen gekürzt und der Variablen gerundet übergeben, die als Rückgabewert zurückgegeben wird.

Anschließend werden sowohl das genaue Ergebnis als auch die gerundete Zahl ausgegeben.
Empfehlung:
Programmieren Sie Funktionen so allgemein wie möglich, damit Sie sie mehrfach und unter möglichst verschiedenen Bedingungen einsetzen können.

Vorteile einer solchen Programmierung nach dem Grundsatz DRY (Don't repeat yourself!) sind:

  • kürzere Programme
  • bessere Lesbarkeit von Programmcode
  • ein besser zu wartender Code bei künftigen Überarbeitungen

Im Laufe der Zeit sammelt sich so eine Bibliothek an wiederverwendbaren Helfer-Funktionen, die Ihnen viel Arbeit sparen.

Exkurs: Objekte[Bearbeiten]

Objekte helfen Programmierern, Daten strukturiert handzuhaben und sogar Programme in sinnvolle Teilbereiche zu untergliedern. Man stelle sich einen Datensatz zu einer Bestellung oder eine Spielfigur in einem Browser-Game vor, in beiden Fällen benötigt man ein passendes Objekt. Objekte können in JavaScript sehr vielfältig gestaltet sein, je nach Zweck des Programmierers.

Beispiel: Objektliteral
var data = {
  id : "17283",
  firstName : "Hans",
  name : "Meier",
  type : "Bestellung",
  items : [2231, 188832, 231231, 3123, 123]
}
In diesem Objektliteral ist die Datenstruktur eines einfachen Datensatzes wie z.B. für eine Bestellung in einem Webshop abgebildet.

Das obige Beispiel definiert ein ganzes Objekt. Man kann auch durch eine Reihe von Anweisungen ein solches Objekt erstellen:

Beispiel: Objekt dynamisch erstellt
var data = new Object();

data.id = "17283";
data.firstName = "Hans";
data.name = "Meier";
data.type = "Bestellung";
data.items = [2231, 188832, 231231, 3123, 123];
Das Objekt data wird zunächst als leeres Objekt instanziiert. Anschließend werden ihm seine Eigenschaften zugewiesen. Das Ergebnis ist das gleiche, wie im obigen Beispiel, nur auf andere Weise erstellt.