Funktionen |
|
Funktion definieren |
|
Mit Hilfe von Funktionen können Sie eigene, in sich abgeschlossene JavaScript-Prozeduren programmieren, die Sie dann über den Aufruf der Funktion ausführen können. Dabei können Sie bestimmen, bei welchem Ereignis (zum Beispiel, wenn der Anwender einen Button anklickt) die Funktion aufgerufen und ihr Programmcode ausgeführt wird. JavaScript-Code, der nicht innerhalb einer Funktion steht, wird beim Einlesen der Datei vom WWW-Browser sofort ausgeführt!
Eine Funktion ist ein Anweisungsblock. Sie können eigene Funktionen innerhalb eines JavaScript-Bereichs oder in einer separaten JavaScript-Datei definieren. An erlaubten Stellen, z.B. innerhalb der einleitenden HTML-Tags <body...> und <a href...>, oder in einem Formular-Tag wie <input...>, können Sie eine solche selbst definierte Funktion dann mit Hilfe eines Event-Handlers aufrufen. Oder Sie rufen eine Funktion innerhalb einer anderen Funktion auf.
function PrimzahlCheck(Zahl) { var Grenzzahl = Zahl / 2; var Check = 1; for(i = 2; i <= Grenzzahl; i++) if(Zahl % i == 0) { alert(Zahl + " ist keine Primzahl, weil teilbar durch " + i); Check = 0; } if(Check == 1) alert(Zahl + " ist eine Primzahl!"); } </script> |
Mit dem Schlüsselwort function leiten Sie die Definition einer Funktion ein. Dahinter folgt, durch ein Leerzeichen getrennt, ein frei wählbarer Funktionsname, im Beispiel: PrimzahlCheck. Vergeben Sie einen Funktionsnamen, der das, was die Funktion leistet, ungefähr beschreibt. Beachten Sie dabei die Regeln für selbst vergebene Namen.
Unmittelbar hinter dem Funktionsnamen folgt eine öffnende Klammer. Wenn die Funktion keine Parameter erwarten soll, notieren Sie dahinter sofort wieder eine schließende Klammer. Wenn die Funktion Parameter übergeben bekommen soll, notieren Sie innerhalb der Klammer die Namen der Parameter. Die Namen der Parameter sind frei wählbar. Bei den Parameternamen gelten die gleichen Regeln wie beim Funktionsnamen. Mehrere Parameter werden durch Kommata voneinander getrennt. Im obigen Beispiel erwartet die Funktion PrimzahlCheck einen Parameter Zahl.
Der gesamte Inhalt der Funktion wird in geschweifte Klammern { und } eingeschlossen. Diese Klammern dürfen niemals fehlen!
Die Anweisungen innerhalb der Funktion können sehr unterschiedlicher Natur sein. Da können Sie z.B. Objekte manipulieren, übergebene Parameter verarbeiten und ändern, Berechnungen anstellen usw. Sie können innerhalb von Funktionen auch andere Funktionen aufrufen. Welche Anweisungen innerhalb einer Funktion stehen, hängt davon ab, was die Funktion leisten soll. Im obigen Beispiel wird ermittelt, ob die übergebene Zahl eine Primzahl ist. Wenn es keine ist, wird für jede Zahl, durch die sie teilbar ist, eine entsprechende Meldung ausgegeben. Wenn es eine Primzahl ist, wird am Ende ausgegeben, daß es sich um eine Primzahl handelt.
Anzeigebeispiel: So sieht's aus
Sie können eine selbst definierte Funktion aufrufen, um den darin enthaltenen JavaScript-Code auszuführen.
<html> <head> <title>Zahl auf Primzahl checken</title> <script language="JavaScript"> <!-- function PrimzahlCheck(Zahl) { var Grenzzahl = Zahl / 2; var Check = 1; for(i = 2; i <= Grenzzahl; i++) if(Zahl % i == 0) { alert(Zahl + " ist keine Primzahl, weil teilbar durch " + i); Check = 0; } if(Check == 1) alert(Zahl + " ist eine Primzahl!"); } //--> </script> </head> <body> <form name="PrimzahlFormular"> Geben Sie eine Zahl ein, die Zahl wird auf Primzahl gecheckt:<br> <input type=text name="Eingabezahl"> <input type=button value="auf Primzahl checken" onClick="PrimzahlCheck(document.PrimzahlFormular.Eingabezahl.value)"> </form> </body> </html> |
Das obige Beispiel zeigt eine komplette HTML-Datei. Darin ist ein JavaScript-Bereich definiert, in dem wiederum die Funktion PrimzahlCheck() definiert ist. Im Dateikörper der HTML-Datei steht ein Formular mit einem Eingabefeld und einem Button. Im Eingabefeld kann der Anwender eine Zahl eingeben. Wenn er auf den Button klickt, wird die JavaScript-Funktion aufgerufen und ermittelt, ob es sich bei der Eingabe um eine Primzahl handelt.. Dazu enthält der Button den Event-Handler onClick= (= beim Anklicken). Dahinter wird die JavaScript-Funktion mit der eingegebenen Zahl aufgerufen.
Die Funktion rufen Sie mit ihrem Funktionsnamen auf. Dahinter folgt die öffnende Klammer. Wenn die Funktion keine Parameter erwartet, notieren Sie hinter der öffnenden gleich eine schließende Klammer. Wenn die Funktion Parameter erwartet, müssen Sie für jeden Parameter einen erlaubten Wert übergeben.
Anzeigebeispiel: So sieht's aus
Eine Funktion kann einen ermittelten Wert an die aufrufende Instanz zurückgeben.
<html> <head> <title>Bruttobetrag aus Nettobetrag errechnen</title> <script language="JavaScript"> <!-- function BruttoBetrag(Netto, Prozente) { var Ergebnis = Netto * (1 + (Prozente / 100)); return Ergebnis; } function SchreibeBrutto(Betrag, Prozentsatz) { var Wert; Wert = BruttoBetrag(Betrag, Prozentsatz); document.BruttoForm.Ergebnisfeld.value = Wert; } //--> </script> </head> <body> <form name="BruttoForm"> Nettobetrag: <input type=text name="NettoEingabe"><br> Prozentsatz: <input type=text name="ProzentEingabe"><br> <p>Kommabetrag mit Punkt eingeben!</p> <input type=button value="Brutto ermitteln" onClick="SchreibeBrutto(document.BruttoForm.NettoEingabe.value,document.BruttoForm.ProzentEingabe.value)"> <p> Ergebnis: <input type=text name="Ergebnisfeld"> </form> </body> </html> |
Das obige Beispiel zeigt eine komplette HTML-Datei. Darin ist ein JavaScript-Bereich definiert, in dem wiederum die zwei Funktionen BruttoBetrag(...) und SchreibeBrutto(...) definiert sind. Im Dateikörper der HTML-Datei steht ein Formular mit je einem Eingabefeld für einen Nettobetrag und einen Prozentwert. Wenn der Anwender auf den darunter definierten Button klickt, wird die Funktion SchreibeBrutto(...) aufgerufen. Diese wiederum ruft die Funktion BruttoBetrag(...) auf.
Da die Funktion BruttoBetrag(...) ihr errechnetes Ergebnis an die aufrufende Instanz zurückgibt, wird in SchreibeBrutto(...) eine Variable mit dem Namen Wert definiert, die diesen Rückgabewert speichert. Das Ergebnis, das in dieser Variablen gespeichert ist, schreibt die Funktion schließlich in ein Feld, das innerhalb des Formulars eigens für diesen Zweck eingerichtet wurde: das Eingabefeld mit dem Namen Ergebnisfeld.
Es gibt ein paar Funktionen, die bereits in JavaScript integriert sind. Solche Funktionen können Sie aufrufen, ohne sie selbst zu definieren.
<html> <head> <title>Bruttobetrag aus Nettobetrag errechnen</title> <script language="JavaScript"> <!-- function Simple() { var Ergebnis = eval("1+1"); alert("1 + 1 = " + Ergebnis); } //--> </script> </head> <body> <a href="javascript:Simple()">Wieviel ist 1+1?</a> </body> </html> |
Das obige Beispiel zeigt eine komplette HTML-Datei. Darin ist ein JavaScript-Bereich definiert, in dem wiederum eine Funktionen Simple() definiert ist. Innerhalb des Dateikörpers der HTML-Datei steht ein Verweis. Beim Anklicken dieses Verweises wird die Funktion aufgerufen. Sie gibt das Ergebnis von 1+1 in einem Meldungsfenster aus. Zur Berechnung des Ergebnisses wird zuvor die JavaScript-Standardfunktion eval(...) aufgerufen (eval = evaluate = berechne).
Die Syntax, um in Verweisen JavaScript-Funktionen aufzurufen, wird bei den Event-Handlern näher beschrieben.
Eine Übersicht aller JavaScript-Standardfunktionen finden Sie im Abschnitt Objektunabhängige Funktionen.
weiter: | Steuerzeichen und besondere Notationen |
zurück: | Objekte, Eigenschaften und Methoden |