Webseiten programmieren und gestalten

# Funktionen und Schleifen

Nur durch eifriges Schleifen gewinnt der Jade seinen vollen Wert.
– Tang Hsiän Dsu, chinesischer Bühnendichter

# Funktionen definieren

Der eigentliche Nutzen von Funktionen sind eine übersichtlichere Programmierung und die Vermeidung von Redundanz im Quellcode. Außerdem können Sie an beliebiger Stelle eines HTML-Dokuments auf eine solche Funktion zugreifen, beispielsweise dann, wenn Sie auf eine Benutzeraktion warten möchten.

Funktionen werden entweder zentral im HTML-Dokument (head-Bereich) oder extern in einer JavaScript-Datei definiert. Eine Funktion wird vom reservierten Wort function eingeleitet, gefolgt vom Bezeichner der Funktion.

function nameDerFunktion()

In diesem Fall ist nameDerFunktion der Bezeichner der definierten Funktion. Der Bezeichner darf, ähnlich wie Bezeichner von Variablen, nur aus Buchstaben, Zahlen und dem Unterstrich »_« bestehen. Auch dürfen die Bezeichner keinem reservierten Wort entsprechen, z. B. var, function, alert usw. In geschweiften Klammern folgen anschließend die auszuführenden Anweisungen bei Aufruf der Funktion.

function nameDerFunktion()  
{  
  [Anweisungsblock]  
}

Die runden Klammern hinter dem Bezeichner der Funktion müssen dort notiert werden. Ich werde später noch genauer darauf eingehen. Möchten Sie z. B. eine Funktion definieren, die beim Aufruf den Text »Hallo« in einem Dialogfeld ausgibt, würde der JavaScript-Code dafür wie folgt aussehen:

function sagHallo()  
{  
  alert("Hallo");  
}

JavaScript unterscheidet bei Funktionen ebenfalls zwischen Groß- und Kleinschreibung. SAGHALLO ist also nicht die gleiche Funktion wie saghallo.

# Funktionen aufrufen

Anhand des Bezeichners einer Funktion können Sie diese nun aus dem JavaScript-Code heraus aufrufen. Dazu notieren Sie den Namen der Funktion, gefolgt von runden Klammern und einem Semikolon. Die Funktion sagHallo würde also so aufgerufen werden:

sagHallo();

In einem vollständigen HTML-Dokument könnte dies wie folgt aussehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Funktionen definieren und aufrufen //-->
<html>
  <head>
    <title>Listing 3.1</title>
    <script type="text/javascript">
      <!--

        function sagHallo()
        {
          alert("Hallo");
        }

      //-->
    </script>
  </head>
  <body onLoad="sagHallo()">
  </body>
</html>

Listing 3.1: Die Definition und der Aufruf einer Funktion in JavaScript

Das Ereignis onLoad wird immer dann ausgeführt, wenn ein HTML-Dokument geöffnet worden ist. Dies bedeutet in Listing 3.1, dass die Funktion sagHallo dann ausgeführt wird, wenn das Dokument geöffnet wird. Der Benutzer wird in diesem Fall mit einem »Hallo«-Meldungsfenster auf der Webseite begrüßt.

# Funktionen und Parameter

Manchmal ist es aber notwendig, an eine Funktion bestimmte Parameter zu übergeben, z. B. zum Berechnen der Quadratzahl eines Zahlenwerts. Beim Definieren der Funktion müssen Sie solche Überlegungen berücksichtigen. Bleiben Sie einmal bei dem Beispiel der Quadratzahlen. Sie möchten dem Benutzer die Möglichkeit bieten, eine Zahl einzugeben, von der er dann das Quadrat erhält. Die Funktionsdefinition dafür müsste wie folgt aussehen:

function quadratZahl(zahl)  
{  
  produkt = zahl * zahl;  
  ...  
}

Die runden Klammern nach dem Funktionsbezeichner dienen also zur Angabe von Parametern. Jeden Wert, den Sie an eine Funktion übergeben möchten, müssen Sie in den runden Klammern als Parameter, getrennt durch Kommata, angeben. Im Anweisungsblock einer Funktion können Sie nun durch Angabe des Parameterbezeichners auf diese Werte zugreifen. Der Parameter zahl wurde in den runden Klammern als solcher definiert und im Anweisungsblock der Funktion verwendet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Quadratzahl //-->
<html>
  <head>
    <title>Listing 3.2</title>
    <script type="text/javascript">
      <!--

        function quadratZahl(zahl)
        {
          produkt = zahl * zahl;
          alert("Das Qudrat von "+zahl+" lautet: "+produkt);
        }

        function eingabe()
        {
          eineZahl = prompt("Geben Sie eine Zahl ein!","");
          quadratZahl(eineZahl);
        }

      //-->
    </script>
  </head>
  <body>
    <a href="javascript:eingabe()">Hier klicken, um eine Zahl einzugeben!</a>
  </body>
</html>

Listing 3.2: Programmbeispiel für die Eingabe einer Zahl und die anschließende Ausgabe des Quadrates

In Listing 3.2 wurden zwei Funktionen deklariert: quadratZahl(zahl) und eingabe(). Die Funktion eingabe() wird dann ausgeführt, wenn der Benutzer auf den Verweis klickt. Als Verweisziel wurde dabei mit dem »Protokoll« javascript: eine JavaScript-Funktion angegeben. Klickt der Benutzer nun auf diesen Verweis, fordert ihn die Funktion zur Eingabe einer Zahl auf. Die Eingabe wird in der Variablen eineZahl gespeichert. Anschließend führt eingabe() eine weitere Funktion aus und übergibt dieser Funktion die eingegebene Zahl: quadratZahl(eineZahl).

Der Name der zu übergebenden Variable muss übrigens nicht mit dem Namen des Parameters identisch sein. Die Variable, die Sie übergeben, kann also zahl lauten und der Parameter wert.

Der Vorteil von Funktionen liegt auf der Hand: Der Benutzer kann so lange eine Zahl eingeben, wie er das gerne möchte. Erinnern Sie sich noch an den Passwortschutz aus Kapitel 22.4, Einfacher Passwortschutz? Dort konnte der Benutzer nur einmal versuchen, das korrekte Passwort einzugeben. Mit dem Wissen um Funktionen können Sie die Aufforderung zur Eingabe des Passworts so lange wiederholen lassen, bis es korrekt ist. Das erweiterte HTML-Dokument sieht dann wie folgt aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Erweiterter Passwortschutz //-->
<html>
  <head>
    <title>Listing 3.3</title>
    <script type="text/javascript">
      <!--
        var passwort = "PASSwort";

        function frageNachPasswort()
        {
          eingabe = prompt("Bitte geben Sie das Passwort ein!","");
          if(eingabe != passwort)
          {
            frageNachPasswort();
          }
        }
      //-->
    </script>
  </head>
  <body onLoad="frageNachPasswort()">
    <h1>Das Passwort ist korrekt.</h1>
  </body>
</html>

Listing 3.3: Die Eingabe des Passworts wird so lange wiederholt, bis die Eingabe korrekt ist.

# Rückgabewerte

Die prompt-Anweisung ist im Grunde genommen nichts weiter als eine Funktion, die zwei Parameter erwartet und anschließend einen Wert zurückgibt – in diesem Fall die Tastatureingabe des Benutzers. Solche Rückgabewerte können Sie auch in Ihren selbst definierten Funktionen verwenden. Dabei müssen Sie die Anweisung return, gefolgt von der Variablen oder dem festen Wert, notieren, die bzw. der zurückgegeben werden soll bzw. sollen.

return eineVariable;

Mit dem =-Operator können Sie den Rückgabewert in einer Variablen speichern. Auf die Funktion quadratZahl() angewendet, würde das folgenden Code ergeben:

function quadratZahl(zahl)  
{  
  produkt = zahl * zahl;  
  return produkt;  
}

Ein entsprechender Aufruf dieser Funktion könnte so lauten:

ergebnis = quadratZahl(eineZahl);

Auch eine direkte Weiterverarbeitung wäre möglich. Mit dem folgenden Beispiel wird das Ergebnis der Berechnung sofort mit der alert-Anweisung im Browser ausgegeben:

alert(quadratZahl(eineZahl));

Ebenfalls können die beiden Anweisungen in der Funktion quadratZahl() verkürzt werden:

function quadratZahl(zahl)  
{  
  return zahl * zahl;  
}

Beachten Sie aber, dass solche Verkürzungen nicht unbedingt sauberer Programmierstil sind, da die Lesbarkeit des Quellcodes durch extreme Verkürzungen stark beeinträchtigt wird. Da Programmierer aber schreibfaul sind, werden Sie immer wieder auf solche Verschachtelungen stoßen.

# Schleifen

Mit Schleifen können Sie Programmieranweisungen auf elegante Art und Weise so lange wiederholen, bis eine oder mehrere bestimmte Bedingungen erfüllt sind. Die einfachste Form dieser Schleifen ist die while-Schleife.

# Die while-Schleife

Bei while-Schleifen (dt. solange) wird der Anweisungsblock erst dann ausgeführt, wenn die Bedingung nicht erfüllt ist. Die Syntax für eine while-Schleife lautet:

while([Bedingung])  
{  
  [Anweisungsblock]  
}

Als Bedingung können Sie Konstruktionen mit allen möglichen Vergleichsoperatoren in Kombination mit logischen Operatoren notieren. Anstatt wie vorher bei falscher Eingabe des Passworts die Funktion erneut aufzurufen, können Sie nun mit der while-Schleife dieses Problem eleganter lösen. Außerdem können Sie die Wiederholung der Eingabe auf drei Versuche beschränken.

var eingabe = "";  
var zaehle = 0;  
while(eingabe != "PASSwort" && zaehle != 3)  
{  
  eingabe = prompt("Bitte geben Sie das Kennwort  
                    ein!","");  
  zaehle++;  
}  
if(eingabe != "PASSwort")  
{  
  alert("Tja, Sie haben hier nichts zu suchen");  
}  
else  
{  
  alert("Herzlich Willkommen");  
}

Zuallererst werden die beiden Variablen eingabe und zaehle definiert. Da der Benutzer bisher noch nichts eingegeben hat, wird der Variablen eingabe eine leere Zeichenkette zugewiesen. Außerdem muss die Variable zaehle auf den Wert 0 gesetzt werden. Als Bedingung für die while-Schleife wurde festgelegt, dass sie nur dann ausgeführt wird, wenn eingabe nicht den Wert "PASSwort" besitzt und zaehle nicht 3. Der Anweisungsblock der while-Schleife wird zu Beginn also auf jeden Fall durchlaufen. Anschließend bekommt eingabe die Tastatureingabe des Benutzers zugewiesen, und die Variable zaehle wird um 1 erhöht. Es wird erneut geprüft, ob eingabe nicht den Wert "PASSwort" enthält und zaehle nicht 3 ist. Folglich wird die Schleife entweder wiederholt oder verlassen. Anschließend wird mit einer if-Abfrage eine entsprechende Meldung ausgegeben.

Dieses Beispiel ließe sich nun gut in eine Funktion verpacken, die dann beim Öffnen des HTML-Dokuments ausgeführt würde.

# Die do-while-Schleife

Im Gegensatz zur while-Schleife wird eine do-while-Schleife mindestens einmal durchlaufen, bis auf eine bestimmte Bedingung geprüft wird. Die Syntax lautet wie folgt:

do  
{  
  [Anweisungsblock]  
}  
while([Bedingung])

Am Beispiel des Passwortschutzes würde sich dann also folgendes Codebeispiel ergeben:

var eingabe = "";  
var zaehle = 0;  
do  
{  
  eingabe = prompt("Bitte geben Sie das Kennwort ein!","");  
  zaehle++;  
}  
while(eingabe != "PASSwort" && zaehle != 3);

Die obligatorische Meldung nach der do-while-Schleife, ob das Passwort korrekt eingegeben wurde, habe ich außen vor gelassen, da sie zur Verdeutlichung nicht essenziell wichtig ist. Aber nun zum Beispiel: Nach der Definition der beiden Variablen eingabe und zaehle folgt der erste Durchlauf der do-while-Schleife. Es wird eine Eingabe vom Benutzer gefordert, und zaehle wird um 1 erhöht. Erst danach wird die Bedingung geprüft. Hat eingabe nicht den Wert "PASSwort" und zaehle nicht den Wert 3, wird die Schleife ein weiteres Mal durchlaufen.

# Die for-Schleife

Bei einer for-Schleife wird von vornherein eine Variable definiert, die die Schleifendurchläufe zählt, und eine Abbruchbedingung festgelegt. Die Syntax lautet:

for([Initialisierung]; [Bedingung]; [Anweisung])  
{  
  [Anweisungsblock]  
}

Als Initialisierung können Sie eine Variable definieren und ihr einen Wert zuweisen. Die Abbruchbedingung zum Beenden der Schleife wird als Bedingung notiert, und zusätzlich können Sie eine Anweisung angeben, die nach jedem Schleifendurchlauf ausgeführt wird. In der Regel sieht eine solche for-Schleife wie folgt aus:

for(var i = 0; i < 10; i++)  
{  
  document.write(i+"<br>");  
}

Zuerst wird die Variable i definiert und ihr der Wert 0 zugewiesen (var i = 0). Als Bedingung wurde festgelegt, dass die Schleife durchlaufen wird, solange i kleiner als 10 ist (i < 10). Nach jedem Schleifendurchlauf wird i dann um 1 erhöht (i++). Innerhalb des Anweisungsblocks werden dann mit document.write die Variable i und ein HTML-Zeilenumbruch ausgegeben. Die Ausgabe dieses Beispiels sieht so aus:

1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>

Für den Passwortschutz ist auch diese Form der Schleife verwendbar:

for(var i=0, eingabe=""; eingabe!="PASSwort" && i!=3; i++)  
{  
  eingabe = prompt("Bitte geben Sie das Kennwort ein!","");  
}

Insgesamt haben Sie also drei bis vier Zeilen Quellcode durch die for-Schleife eingespart, und man kann – je nach Geschmack – auch sagen, dass dieser Quellcode übersichtlicher geworden ist. Aus diesem Grund ist die for-Schleife bei Programmierern so beliebt – egal, welche Programmiersprache diese verwenden.

# Zusammenfassung

  • Funktionen werden in JavaScript mit dem Schlüsselwort function definiert. Anschließend folgt der Bezeichner der Funktion.
  • Bei der Bezeichnung einer Funktion sind nur Buchstaben, Zahlen und der Unterstrich erlaubt.
  • Um an eine Funktion Parameter übergeben zu können, müssen diese bei der Definition der Funktion in runden Klammern nach dem Funktionsbezeichner notiert werden. Mehrere Parameter werden durch Kommata voneinander getrennt.
  • Funktionen können auch Werte zurückgeben. Dies erfolgt mit dem Schlüsselwort return, gefolgt von einem Wert oder einer Variablen.
  • In JavaScript gibt es sowohl vor- als auch nachprüfende Schleifen.

# Fragen und Übungen

  1. Was ist der Unterschied zwischen vor- und nachprüfenden Schleifen?
  2. Welche vorprüfenden Schleifen gibt es?
  3. Welche nachprüfenden Schleifen gibt es?
  4. Wenn Sie Variablen als Parameter an eine Funktion übergeben, müssen diese dann den gleichen Bezeichner haben wie der Parameter?
  5. Wie können Sie innerhalb einer Funktion auf einen übergebenen Parameter zugreifen?
  6. Schreiben Sie ein Script mit einer for-Schleife, die zehnmal durchlaufen wird. Innerhalb der Schleife soll die Variable a bei jedem Durchlauf mit 2 multipliziert und zum Schluss ausgegeben werden.
  7. Schreiben Sie eine Funktion, die zwei Werte übergeben bekommt und daraus die Potenz errechnet. Der erste Wert soll die Basis und der zweite Wert der Exponent sein. Die Potenz soll dann als Wert zurückgegeben werden. Zum Berechnen der Potenz soll eine Schleife verwendet werden. Beachten Sie dabei auch die Exponenten 0 und 1.

← Objektorientierung →