 JavaScript 05 - Die Funktion
Wie man eine Sammlung von JavaScript-Anweisungen zusammenfasst damit man diese Zusammenfassung von Anweisungen später aufrufen kann, beschreibe ich hier.
Anweisungen in Blöcken zusammenfassen
Die Aufgabe das aktuelle Datum in ein HTML-Dokument zu schreiben, besteht aus mehr als nur einer Anweisung. Solche Anweisungen wird man in einem Anweisungsblock zusammenfassen. Will man dann das Datum anzeigen, möchte man alle Anweisungen dieses Blocks ausführen lassen, und nur diese.
Eine Sammlung von Script-Anweisungen gruppiert man in einem Anweisungsblock. Der Anweisungblock beinhaltet dann alle Anweisungen die notwendig sind, die gestellte Aufgabe zu erfüllen. Die Sammlung von Anweisungen hat eine bestimmte Funktion.
Anweisungen zusammenfassen
Notiert man eine oder mehrere Anweisungen innerhalb geschweifter Klammern und gibt dem Anweisungsblock einen Namen, nennt man das eine Funktion. Vor dem Namen der Funktion steht das englische Wort für Funktion: function .
Der Anweisungsblock soll die Funktion haben , das aktuelle Datum anzuzeigen. Daher der Name "DatumAnzeigen".
Den Namen habe ich selbst bestimmt und nenne die Funktion 'DatumAnzeigen' damit ich später leicht die Aufgabe dieser Funktion erkennen kann.
Man kann die Funktionsnamen frei festlegen solange nicht gegen bestehende Regeln  verstoßen wird.
Tipp: Nehmen sie Bezeichnungen aus der deutschen Sprache.
Syntax
<script type="text/javascript" language="JavaScript">
<!--
function DatumAnzeigen()
{
JavaScript-Anweisung1;
JavaScript-Anweisung2;
JavaScript-Anweisung3;
}
// -->
</script>
Alle Anweisungen (rot) innerhalb der geschweiften Klammern (blau) gehören zur Funktion mit dem Namen 'DatumAnzeigen()'.
Ach ja, hinter dem Namen der Funktion steht immer ein Klammernpaar (runde Klammern)! Das würde ich ihnen zu diesem Zeitpunkt gerne noch vorenthalten, weil ich darauf noch nicht eingehen möchte. Ohne diese beiden runden Klammern aber, wäre die Definition der Funktion nicht vollständig.
Wie man Anweisungen zu einer Funktion zusamenfasst, habe ich auf dieser Seite mal wieder nach meiner eigenwilligen Methode "ins kalte Wasser werfen und dann in der Kindersprache erklären" aufgezeigt. Wie immer habe ich einige Bereiche ausgelassen, von denen ich glaube, das sie im Augenblick für das Verstehen eher irritierend wären.
Wenn sie die Seiten 1 bis 4 bereits gelesen hatten, konnten sie meinen Erklärungsversuchen zur JavaScript-Funktion an diesem Beispiel folgen (denke ich).
Wenn sie ein praktisches Beispiel kennenlernen möchten, lesen sie doch die unten stehenden Erklärungen zur Funktion der Datumsanzeige.
Erkärungen und praktisches Beispiel
Aufgabenstellung:
Wir basteln einen Function-Container, der alle Anweisungen enthält das aktuelle Datum zu schreiben. Dazu zwischendurch die 3 erklärenden Schritte a bis c.
a) Dem System Information entnehmen
JavaScript kennt Objekte. Was immer das sein mag, interessant ist jetzt erst mal das Objekt 'Date()'. Dieses Objekt gehört dem System.
Das System stellt uns dieses Objekt aber gerne zur Verfügung und wir nutzen es genauso gerne, weil in diesem Objekt eine Menge Informationen stecken: aktueller Tag, Uhrzeit, Monat, Wochentag, Jahr, ... .
Quelle: SELFHTML
Das Objekt Date ist für alle Berechnungen mit Datum und Zeit zuständig. Dabei gibt es, wie in der EDV üblich, einen fixen historischen Zeitpunkt, der intern als Speicherungs- und Berechnungsbasis dient. In JavaScript ist dies - wie in der C- und Unix-Welt - der 1. Januar 1970, 0.00 Uhr. Die Einheit, in der in JavaScript intern Zeit berechnet wird, ist eine Millisekunde.
Wie ich schon sagte gehört das Objekt 'Date()' dem System, daher dürfen wir damit nicht herumspielen. Deshalb fertigen wir erst mal eine Kopie davon an und schreiben diese Informationen in die Variable 'jetzt'. In der ersten Anweisung steht nun: Die Variable 'jetzt' ist eine (neue) Kopie von Date()
var jetzt = new Date();
Die Variable 'jetzt' gehört uns. Damit können wir nun weiter arbeiten und entnehmen was wir benötigen: Jahr, Monat und Tag
var Jahr = jetzt.getFullYear();
Resultat: Die Variable 'Jahr' enthält nun den Wert
var Monat = jetzt.getMonth();
Resultat: Die Variable 'Monat' enthält nun den Wert
var Tag = jetzt.getDate();
Resultat: Die Variable 'Tag' enthält nun den Wert
b) Eigenwilliger Monatswert
Upps da gibts einen Fehler (so scheint es), ist aber nicht wirklich so. Das Date-Objekt beginnt beim Zählen der Monate mit 0 (Null) für Januar, dann weiter mit 1 für Februar, ... , 11 für Dezember. Addieren wir eine 1 (Eins) hinzu, stimmt für unsere spätere Datumsanzeige wieder alles.
var Monat = jetzt.getMonth()+1;
Resultat: Die Variable 'Monat' enthält nun den Wert
c) Schreibanweisung
Sie erinnern sich an die Schreibanweisung write():
Innerhalb der runden Klammern kann (in Anführungszeichen eingeschlossen) ein Text stehen. Dort könnte aber auch etwas anders eingetragen sein.
Der Fachmann spricht: Ich übergebe der write()-Funktion den Text "Datum".
document.write("Datum");
Resultat: Datum [der übergebene Text wird geschrieben]
Ein Variablenname wird ohne Anführungszeichen eingetragen.
document.write(Jahr);
Resultat:
[der in der Variablen 'Jahr' abgelegte Wert wird geschrieben]
Gegenpobe:
document.write("Jahr");
Resultat: Jahr [der übergebene Text wird geschrieben]
Die Funktion DatumAnzeigen()
So ist die Funktion DatumAnzeigen() aufgebaut:
Zuerst werden die 3 benötigten Datumswerte ermittelt und in Variablen abgelegt. Dann wird eine kombinierte Schreibanweisung für Text und Variablenwerte notiert.
<script type="text/javascript">
<!--
function DatumAnzeigen()
{
var jetzt = new Date(); // Systemwert kopieren
var Tag = jetzt.getDate(); // Tageswert entnehmen
var Monat = jetzt.getMonth()+1; // Monatswert entnehmen
var Jahr = jetzt.getFullYear(); // Jahreswert entnehmen
document.write("Aktuelles Datum: " + Tag + "." + Monat + "." + Jahr);
}
//-->
</script>
Die zu schreibenden Fragmente werden mit dem Pluszeichen aneinander gehängt.
Diese Funktion (schwarz), in eine JavaScript-Deklaration (rot) eingebettet, wird nun im Head-Bereich des HTML-Dokuments notiert. Die Funktion wird beim Lesen der HTML-Datei vom Browser ebenfalls eingelesen.
Die Funktion wird bei der Anzeige der Seiteninhalte des HTML-Dokuments allerdings nicht gleich ausgeführt! Sie steht lediglich auf Abruf bereit.
Das Resultat des Aufrufs wäre:
Die Funktion zur Datumsanzeige aufrufen
Zum Thema Funktionsaufruf habe ich eine separate Seite erstellt.
 Weiter zur Seite 'Funktionen aufrufen'
Mehrfachverwendung
Die im Head-Bereich der Seite deklarierte Funktion können sie nun innerhalb der Seite beliebig oft aufrufen. Möchten sie die Datums-Funktion auch auf anderen Seiten nutzen und nicht jedesmal in die Seiten einkopieren, müssten sie solche Funktionen 'etwas zentraler', also nicht innerhalb einer Seite ablegen.
Wie das funktioniert lesen sie auf der Seite 'externe JavaScript-Dateien'.
externe JavaScript-Datei
Regeln Funktionsnamen
Hier noch die Kurzfassung der Regeln für die Vergabe eigener (Funktions)Namen
- das erste Zeichen muss ein Buchstabe sein
- Groß- und Kleinbuchstaben erlaubt
- Groß- und Kleinschreibung werden unterschieden
- dürfen nur aus Buchstaben und Ziffern bestehen
- dürfen keine Leerzeichen enthalten
- dürfen keine deutschen Sonderzeichen enthalten (1 Ausnahme)
- einziges erlaubtes Sonderzeichen ist der Unterstrich '_'
- dürfen nicht mit einem reservierten Wort identisch sein
Tipp: Nehmen sie Bezeichnungen aus der deutschen Sprache, reservierte Wörter sind in der Regel englische Bezeichnungen (Bis auf das Wort 'Name', das in beiden Sprachen gleich ist, gibt es dann bei keiner Bezeichnung Ärger).
|
Home
ZURÜCK