JavaScript 06 - Funktionsaufruf
    
 Home • JavaScript • Funktionsaufruf  

  JavaScript 06 - Der Funktionsaufruf
00 01 02 03 04 05 06
Wie man eine Sammlung von JavaScript-Anweisungen (Funktion) ausführen lässt, beschreibe ich hier. Als Beispiel nehme ich die Funktion zum Schreiben des Datums, die Sie bereits kennen lernten:

So wurde die Funktion DatumAnzeigen() notiert: 

function DatumAnzeigen()
{
var jetzt = new Date();            // Systemdatum in ein neues Date-Opbjekt 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);
}
Die Funktion wurde im Head oder in einer externen Datei notiert und wartet (geduldig) darauf abgerufen zu werden. Sie wird bei der Anzeige der Seiteninhalte nicht gleich ausgeführt! Sie steht lediglich auf Abruf bereit.


  Funktionsaufrufe

Funktionen kann man auf unterschiedliche Weise aufrufen.
  • gleich beim Einlesen der HTML-Seite
  • nach einer Verzögerungszeit
  • an einem bestimmten Wochentag
  • in einer bestimmten Situation
  • bei einem bestimmten 'Event'
  • ...

Event-Handler in JavaScript einblenden


  Die Funktionsaufruf im BODY

Plaziert man den 'Auslöser' für den Start der JavaScript-Funktion (irgendwo) innerhalb der Inhalte der HTML-Seite, wird diese auslösende Anweisung beim Einlesen der Seite durch den Browser ebenfalls gelesen und ausgeführt.

Die auslösende Anweisung nennt man 'Aufruf'. Weil es der Aufruf einer Funktion ist entsprechend 'Funktionsaufruf'.



Im Body-Bereich kann man also eine Funktion aufrufen. Dabei müssen wir sie 'beim Namen nennen', schließlich könnten ja mehrere Funktionen existieren. Der Aufruf steht innerhalb des HTML-Dokuments genau dort, wo die Anzeige des Datums erfolgen soll.




Da dieser Aufruf eine JavaScript-Anweisung ist, steht er innerhalb einer JavaScript-Deklaration. Wie jede JavaScript-Befehlszeile wird auch diese Anweisung mit einem Semikolon (Strichpunkt) abgeschlossen. 

<script type="text/javascript" language="JavaScript">
<!--
DatumAnzeigen();
//-->
</script>

Resultat des Aufrufs:



  Durch ein Ereignis (Event) aufrufen

Funktionen können auch durch ein Ereignis aufgerufen (gestartet) werden. JavaScript-interne Funktionen die auslösende Ereignisse überwachen nennt man Event-Handler [ivent-händler].

So heißen die nun mal, ich deute die Namensgebung wie: 'Die können einen Event 'händeln' - mit einem Ereignis umgehen.

... onClick="DatumAnzeigen()" ...
Beispiele:

Funktion im Head der HTML-Datei: 
<script type="text/javascript" language="JavaScript">
<!--

function DatumAlert()
{
var jetzt = new Date();
var Jahr = jetzt.getFullYear();
var Monat = jetzt.getMonth()+1;
var Tag = jetzt.getDate();
alert("Aktuelles Datum: " + Tag + "." + Monat + "." + Jahr);
}

//-->
</script>
1)  Beim Anklicken soll das aktuelle Datum in einer Alert-Box angezeigt werden

zeige das Datum

im Body: 
<a onClick="DatumAlert()" href="javascript:void(0)">zeige das Datum</a>

2)  Bei MouseOver soll das aktuelle Datum in einer Alert-Box angezeigt werden

zeige das Datum

<a onMouseOver="DatumAlert()" href="javascript:void(0)">zeige das Datum</a>



Event-Handler

Es gibt etwa 20 verschiedene Event-Handler:

Event-Handler onLoad (beim Laden der Seite)
Event-Handler onFocus (wenn ein Opbekt den Focus erhält)
Event-Handler onBlur (wenn ein Opbekt den Focus verliert)
Event-Handler onChange (bei Änderung)
...

Aktionen auslösende Maus-Ereignisse:

Event-Handler onMouseOver (beim Überfahren des Elements mit der Maus)
Event-Handler onMouseOut (beim Verlassen des Elements mit der Maus)
Event-Handler onMouseDown (beim Niedergedrückthalten der Maustaste)
Event-Handler onMouseUp (bei losgelassener Maustaste)
Event-Handler onMouseMove (bei einer Mausbewegung)
Event-Handler onClick (beim Anklicken eines Objekts)
...

Aktionen auslösende Tastatur-Ereignisse:

Event-Handler onkeydown (bei einer gedrückter Taste)
...






So, das Thema 'JavaScript-Funktion aufrufen' 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 5 bereits gelesen hatten, konnten Sie meinen Erklärungsversuchen zur JavaScript-Funktion in diesem Beispiel folgen (denke ich).







 
JavaScript 06 - Funktionsaufruf
00 01 02 03 04 05 06
 


zur Seite 00: JavaScript-Demo

zur Seite 01: JavaScript-Einführung

zur Seite 02: JavaScript-Bereich deklarieren

zur Seite 03: JavaScript-Anweisungen

zur Seite 04: Kommentare in JavaScript

zur Seite 05: Anweisungen zusammenfassen - JavaScript-Funktion

NACH OBEN