JavaScript: 4.3 Selbsterstellte Funktionen

< blät tern >

4.3 Selbsterstellte Funktionen

Neben den bereits vordefinierten Funktionen können Sie auch selber Funktionen schreiben. Das lohnt sich immer dann, wenn ein Anweisungsblock an verschiedenen Stellen Ihres Programms immer wieder benutzt wird bzw. wenn eine bestimmte Aufgabe immer wieder ausgeführt werden soll. Z.B. könnten Sie für mathematische Anwendungen eine Funktion schreiben, die berechnet, ob eine Zahl eine Primzahl ist oder nicht.

Neben der Einsparung von mehrfacher Schreibarbeit, die Sie durch den Einsatz von Funktionen erreichen, bieten sie auch noch andere Vorteile. Im Allgemeinen werden Ihre Programme dadurch übersichtlicher und verständlicher, weil Sie nicht mehr viele Anweisungen zur Erledigung einer Aufgabe schreiben müssen, sondern nur den Funktionsaufruf. Außerdem ermöglichen Sie so die Arbeit im Team – ein Kollege schreibt eine Funktion, ein anderer schreibt die HTML-Seite mit dem Skript, das den Aufruf der Funktion enthält. Auch wenn insbesondere dieser letzte Vorteil für Sie an dieser Stelle noch nicht relevant ist, lohnt es sich, sich jetzt schon mit Funktionen zu beschäftigen.

Eine Funktionsdefinition wird in JavaScript stets mit dem Wort function eingeleitet. Danach folgt von einem Leerzeichen getrennt der Funktionsname mit anschließenden runden Klammern. Der Funktionsname darf genau wie die Namen von Variablen aus den Buchstaben des Alphabets, Ziffern und dem Unterstrich bestehen und darf nicht mit einer Ziffer beginnen. Die Klammern kennzeichnen eine Funktion als solche und können Parameter enthalten, die man der Funktion übergeben kann, wie wir später noch sehen werden. Innerhalb der darauffolgenden geschweiften Klammern wird die Anweisungskette geschrieben, die bei Aufruf der Funktion ausgeführt werden soll:

Syntax der Funktionsdefinition

<script type="text/javascript">

  function Funktionsname() {
    Anweisungen innerhalb der Funktion
  }

</script>

Zwei Beispiele zur Veranschaulichung der Syntax:

1. Skriptbeispiel function()

<html>
  <head>
    <title>Beispiel einer Funktion</title>
      <script type="text/javascript">
        function schreiben() {
          document.write("Diesen Text schreibt eine Funktion!<br>");
        }
     </script>
  </head>
  <body>
    <script type="text/javascript">
     schreiben();
     schreiben();
     schreiben();
     schreiben();
  </script>
</body>
</html>

Ansehen

In diesem sehr einfachen Beispiel für eine Funktion in JavaScript enthält die Funktion lediglich eine Anweisung, die den Text "Diesen Text schreibt eine Funktion!" gefolgt vom HTML-Tag für einen Zeilenumbruch ausgibt. Die Definition der Funktion schreiben() erfolgt hier in einem script-Element im Kopf des Dokuments. Beim Aufruf der Funktion im body-Element – im Skript steht der Funktionsname gefolgt vom Klammerpaar, genau wie bei den vordefinierten Funktionen – springt der Interpreter zur Definition der Funktion und führt die dort stehende Anweisung aus. Im Beispiel wird also nur eine Textzeile ins Dokument geschrieben. Durch den mehrfachen Aufruf der Funktion wird der gleiche Text hier insgesamt viermal ausgegeben.

Bitte beachten Sie, dass die Anweisungen tatsächlich erst beim Funktionsaufruf ausgeführt werden. Bei der Definition "überliest" der Interpreter die Zeilen zwischen öffnender und schließender geschweifter Klammer der Funktion einfach.

Sicherlich macht es nur bedingt Sinn, solch kurze Funktionen wie im obigen Beispiel zu schreiben, denken Sie aber an längere oder kompliziertere Anweisungsfolgen. Man könnte diese zwar auch mit einem Editor kopieren und an der gewünschten Stelle wieder einfügen; sollte dies aber häufiger geschehen, würde auch ein entsprechend langer und umfangreicher Quelltext entstehen. Und wenn Sie die kopierte Skriptpassage dann einmal ändern wollen, müssen Sie das an vielen Stellen tun. Mit der einmaligen Erstellung der Funktion und dem sehr kurzen Aufruf an der entsprechenden Stelle im Programm kann man diese Problematik nun recht einfach und komfortabel umgehen.

Es folgt ein etwas umfangreicheres Skript als Beispiel, das die Verwendungsmöglichkeiten von Funktionen deutlicher macht:

2. Skriptbeispiel function()

<script type="text/javascript">      
  
  var anzahlAufrufe = 0;  
    
  function zaehlen() {          
    anzahlAufrufe++;          
    alert(anzahlAufrufe + ". Funktionsaufruf"); 
  }    
    
</script>  
      
<body>    
  <a href="javascript:zaehlen()">Start</a>  
</body>

Ansehen

In diesem Beispiel wird die Funktion namens zaehlen() ausgeführt, wenn Sie auf den Link Start klicken. Sie bekommen dann ein kleines Ausgabefenster mit einer Meldung über die Anwendungshäufigkeit der Funktion. Diesen Vorgang können Sie beliebig oft wiederholen.

Um die Funktion zaehlen() aufzurufen, wurde ein sogenannter Inline-Aufruf in dem <A>-Tag benutzt. Statt im Attribut href die Adresse einer anderen Seite anzugeben, wurde hier der eigentliche Funktionsaufruf geschrieben. Am Wort javascript erkennt der Browser, dass es sich hier nicht um einen normalen Hyperlink handelt, sondern um eine JavaScript-Anweisung. Durch Klicken auf den Text "Start" wird die Funktion aufgerufen. Auch hier springt der Interpreter dabei wieder zur Definition der Funktion zaehlen() und führt die dort stehenden Anweisungen aus. Zuerst wird also die Variable anzahlAufrufe um eins erhöht, dann folgt die Ausgabe.

Interessant ist die Variable anzahlAufrufe. Wie Sie sehen, steht die Anweisung var anzahlAufrufe = 0; außerhalb der Funktion, also außerhalb der zugehörigen geschweiften Klammern. Diese Anweisung wird also, wie Sie es aus den bisherigen Lerneinheiten kennen, ausgeführt, wenn der Benutzer die Seite aufruft, und zwar nur einmal. Während die Anweisungen innerhalb der Funktion bei jedem Klick auf den Link wieder und wieder abgearbeitet werden, wird diese Zuweisung nur einmal zu Beginn ausgeführt. So wird gewährleistet, dass die Funktion tatsächlich die Anzahl ihrer Aufrufe zählen kann.

Um Funktionen sinnvoll einzusetzen, gibt es eine Regel, an die Sie sich nach Möglichkeit halten sollten:

Grundsätzlich können Sie script-Elemente mit Funktionsdefinitionen überall in einer HTML-Seite unterbringen. Sinnvollerweise definieren Sie Funktionen allerdings im Kopf der HTML-Seite, da dieser Teil als erstes vom Browser gelesen wird. Das heißt, dass die script-Elemente mit Funktionsdefinitionen innerhalb des head-Elements stehen sollten. Wenn Sie Funktionen an beliebigen Stellen im HTML-Dokument definieren, erhöht sich die Wahrscheinlichkeit, Fehler zu machen: Wenn eine Funktion bereits aufgerufen wird, bevor ihre Definition geladen wurde, kommt es zu einer Fehlermeldung. Außerdem bewahren Sie sich eine gewisse Übersichtlichkeit, wenn Sie Ihre selbst erstellten Funktionen im Kopf der Seite bündeln.

Noch besser ist es, wenn Sie Ihre selbst geschriebenen Funktionen in eine zweite Datei (im folgenden Beispiel mit dem Namen funktionen.js) auslagern und diese dann per
<script src="funktionen.js" type="text/javascript">
in das HTML-Dokument einbinden. Das bietet den Vorteil, dass Sie eine Funktion nicht nur in der Datei benutzen können, in der Sie sie definiert haben, sondern in allen HTML-Dokumenten, die die Datei mit den Funktionsdefinitionen einbinden.

Übung 4.5:
Programmieren Sie die Funktion schreiben() aus dem Beispiel und speichern Sie sie in einer eigenen Datei.
Übung 4.6:
Schreiben Sie Ihr erweitertes Rechenprogramm aus Übung 4.4 und das auf eval() basierende Programm aus Übung 4.3 in jeweils eine Funktion. Speichern Sie die beiden Funktionen in einer eigenen Datei. Gestalten Sie dann eine HTML-Seite, in der Sie für beide Funktionen einen Link unterbringen, mit dem sie aufgerufen werden können.

< blät tern >