Einführung in JavaScript Teil 4 (JavaScript Tutorial)

Tutorial erstellt von Dac-XP, letzte Änderung am 06.04.2008

Funktionen in JavaScript

JavaScript bietet -wie jede andere gebräuchliche Programmiersprache auch- die Möglichkeit, Anweisungen
in Funktionen zusammenzufassen und von jeder Stelle im Quellcode aufzurufen. Das verringert bei sich
wiederholenden Prozeduren den Arbeitsaufwand und erhöht die Übersichtlichkeit des Quelltextes.
Funktionen kann man auch in JavaScript-Eventhandlern (werden in einem späteren Kapitel behandelt) oder
anderen Funktionen aufrufen. Deklarieren kann man Funktionen entweder innerhalb eines JavaScript-Bereiches
oder innerhalb einer separaten JavaScript-Datei.

Aufbau einer Funktion

Ich erläutere den Aufbau einer Funktion erst einmal an einem kleinen Beispiel:

Code:

function addiere
Mit Hilfe des Schlüsselwortes „function“ wird eine Funktion eingeleitet. Darauf folgt der eigentliche Name
der Funktion (hier „addiere“), mit dessen Hilfe man die Funktion an einer anderen Stelle aufrufen kann.

Man sollte darauf achten, dass der Funktionsname möglichst selbstbeschreibend ist. Das erleichtert das
Arbeiten mit der Funktion ungemein. Man sollte auch noch auf die Regeln für selbstvergebene Namen beachten:

- Der Name darf nur aus Buchstaben und Zahlen bestehen
- Das erste Zeichen muss ein Buchstabe sein.
- Buchstaben dürfen groß oder klein geschrieben werden, es wird aber nach Groß- und Kleinschreibung unterschieden.
- Deutsche Umlaute (ö, ä, ü) und ß sind NICHT erlaubt.
- Der Name darf nicht mit einem bereits reserviertem Wort identisch sein.
- Als einziges Sonderzeichen ist der Unterstrich _ zugelassen.

Diese Regeln gelten nicht nur für Funktionen, sondern für alle selbst zu vergebenen Namen.

(zahl_1, zahl_2)
innerhalb der Klammern lassen sich Variablen deklarieren, die im Funktionsrumpf nutzbar sind. Die
Variablen hier benötigen kein Schlüsselwort „var“, wie man es vielleicht gewohnt ist. Diese – durch
ein Komma getrennten - Variablen innerhalb der Klammer nennt man „Parameter“. Beim Funktionsaufruf
schreibt man dann Werte (Zahlen, Strings…) in die Klammern, die in der Funktion verwendet werden können.

{ […] }
Die Blockklammern müssen in jedem Fall vorhanden sein. Egal ob die Funktion nur eine Anweisung beinhaltet
(wie in unserem Beispiel) oder mehrere.

return ergebnis;
Eine Funktion kann einen Wert zurückgeben. Das wird mit Hilfe des Schlüsselwortes „return“ bewirkt.
Der Rückgabewert kann ein Ergebnis sein oder nur den Status, ob die Funktion erfolgreich ausgeführt
wurde oder nicht. Es ist nicht möglich mehrere Werte auf einmal zurückgeben zu lassen. In unserem
Beispiel gibt die Funktion das Ergebnis der vorherigen Berechnung (zahl_1 + zahl_2) zurück.

Implementierung einer Funktion in den HTML-Code

Abschließend noch ein kleines Beispiel, wie man eine Funktion und deren Aufruf komplett in ein
HTML-Formular implementiert. Hierbei sieht man auch zum ersten Mal die Verwendung eines
Event-Handlers. Diese werden in einem späteren Kapitel behandelt.

Code:

<html>
<head>
    <title>JavaScript - Funktionen</title>

    <script language="javascript">
        var zaehler = 0;

        // Funktion definieren
        function machDas()
        {
            // Zähler erhöhen
            zaehler++;

            // Anzahl der Funktionsaufrufe in einer Dialogbox anzeigen
            alert("Die Funktion wurde bereits " + zaehler + " mal aufgerufen");
        }
    </script>

</head>
<body>

    
    <a onclick="machDas();">Klick mich!</a>

</body>
</html>

Der Funktionsaufruf erfolgt hier mit Hilfe des Event-Handlers „onclick“, der - wie der Name schon sagt –
auf einen Mausklick reagiert. Was die Funktion im Einzelnen macht, dürfte durch die Kommentierung und die
vorherigen Einsteigertutorials klar sein.

Das nächste Kapitel ist wieder ein wenig länger und beschäftigt sich mit Arrays. Bis dahin empfehle
ich, mit der bisher gelernten JavaScript-Syntax (Variablen, Kontrollstrukturen & Funktionen) ein wenig
zu experimentieren, um ein Gefühl für diese Sprache zu bekommen.

MfG DaC-XP!

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!

Photoshop

Cinema 4d

HTML / CSS

JavaScript

PHP

Flash

Fotografie

Terragen

Webserver

Informatik

Sonstige

Einführung in JavaScript Teil 4 (JavaScript Tutorial)