Wie wird ein beliebiger Link in JavaScript angelegt ?

Die wohl bekanntesten Beispiele für die Notwendigkeit in HTML Links mit Hilfe von JavaScript einzusetzen, sind die "Vor-" und "Zurück-" Links. Obwohl diese genau die gleichen Funktionen wie die "Vor-" und "Zurück-"Buttons eines Browsers erfüllen, werden sie doch sehr gern z.B. zur besseren Navigationsmöglichkeit auf HomePages benutzt.

Die in dem nachfolgenden Beispiel gezeigten Funktionen entsprechen darum auch genau dem "Vor"- und "Zurück"-Button eines Browsers. Also, der hier angezeigte "Zurück"-Link verweist auf das HTML-Dokument, welches vor dem aktuell angezeigten HTML-Dokument aufgerufen wurde. Der "Vor"-Link weist auf das dem gerade aktuellen HTML-Dokument folgende HTML-Dokument.
(Der "Vor"-Link macht natürlich nur dann einen Sinn, wenn zuvor der "Zurück"-Link benutzt wurde.)

  <a href="javascript:history.back()"
   onMouseOver="{window.status='Zurück'; return true;}"
   onMouseOut="{window.status=''; return true;}">
  <img src= "rueck.gif" width=30 height=30 border=0>
   Zurück</a>
  <a href="javascript:history.forward()"
   onMouseOver="{window.status='Vorwärts'; return true;}"
   onMouseOut="{window.status=''; return true;}">
  <img src= "vor.gif" width=30 height=30 border=0>
   vorwärts

Mit der Anweisung "javascript:" im <a href=... >-Tag wird ein Link nicht auf ein anderes Dokument, sondern auf eine JavaScript-Funktion umgelenkt. Zum Vorwärts- und Rückwärtsblättern werden die Methoden des history-Objekts verwendet.

Das nahezu einzige history-Objekt ist history.length. Es gibt an, wieviele Einträge im history-Array eines Browsers vorhanden sind. Das history-Array enthält alle bisher besuchten Seiten einer Sitzung (wird also der Browser beendet, wird auch das history-Array gelöscht).

Die Methoden des history-Objektes sind:

back()zum vorhergehenden Dokument zurück
forward()vorwärts zum nächsten Dokument
(nur, wenn man vorher mit dem "Zurück"-Button zum aktuellen Dokument gelangt ist)
go(n)um n Seiten vorwärts (n - positiv) bzw. rückwärts (n - negativ).

Wenn man nun noch mit der Maus über die beiden oben angezeigten Links fährt, wird in der Status-Zeile des Browsers nicht wie sonst die URL angezeigt, sondern ein vorgegebener Text (in unserem Beispiel Vorwärts bzw. Zurück).

Innerhalb des <a href= ...> -Tags werden für die zwei Ereignisse onMouseOver und onMouseOut mit window.status=... je eine Aktion definiert.

Das heißt nun:
Für den Fall, daß die Maus in den Link bewegt wird, wird mit window.status=... eine Meldung in die Statuszeile des Browsers geschrieben. Wird die Maus jetzt wieder vom Link wegbewegt, wird die angezeigte Meldung in der Statuszeile gelöscht.

Ein anderes Beispiel:

  <a href= "dokument.htm" 
  onMouseOver="{window.status='Hier bitte nicht klicken!';
   return true;}"
  onMouseOut="{window.status='';
   return true;}"
  onClick="{alert('Sagte ich doch: Klicken ist zwecklos!');
   return false;}">
  Hier bitte nicht klicken!</a>
Hier bitte nicht klicken!

Hier wird allerdings zusätzlich bei einem Klick mit der Maus auf den Link durch Funktion "alert(...)" ein Fenster mit einer Fehlermeldung aufgerufen und als Ergebnis der Funktion "false" zurückgegeben. In diesem Fall bewirkt das, daß die im <a href= ...>-tag angegebene Seite nicht(!) aufgerufen wird.

Würde aber anstelle von "false" der Rückgabewert "true" stehen, würde die entsprechende Seite nach der angezeigten Meldung aufgerufen.

Fassen wir zusammen:

Mit Hilfe von JavaScript können eine ganze Reihe von Ereignissen weiterverarbeitet werden:

onMouseOver()Der Mauszeiger wurde über das Element bewegt.
onMouseOut()Der Mauszeiger wurde wieder aus dem Element heraus bewegt.
onClick()Der Anwender hat das Element angeklickt.
onLoad()Die HTML-Seite wurde geladen.
onUnload()Die HTML-Seite wird gerade verlassen.

Das Argument ist innerhalb einer runden Klammer anzugeben. Es beinhaltet genau die Aktion(en), die im Fall des eintretenden Ereignisses ausgeführt werden soll(en). Sollen mehrere Aktionen ausgeführt werden, werden alle betreffenden Einzel-Anweisungen von einer geschweiften Klammer ( { ... } ) eingefaßt.

Eine definierte Aktion sollte immer ein Ergebnis liefern:
Wenn als Ergebnis der Wert true (wahr, erfolgreich) zurückgeliefert wird, so setzt der Browser seine Arbeit unverändert fort. Wird hingegen false (falsch, gescheitert) zurückgegeben, so bricht der Browser die Aktion an dieser Stelle ab.

Zur sichtbaren Ausgabe von Fehlermeldungen und Abfragen von Eingabewerten besitzt das window-Objekt folgende Methoden:

alert()Ausgabe einer Fehlermeldung.
confirm()Abfrage einer Ja/Nein-Entscheidung.
Als Ergebnis wird true oder false zurückgeliefert.
prompt()Abfrage eines Textes, als Ergebnis wird der eingegebene Text zurückgeliefert.

status ist eine Eigenschaft von window-Objekt. Das Setzen von window.status bewirkt, daß ein entsprechender Text in der Statuszeile des Browsers angezeigt wird.

 

 
 
 
Support-Forum | Kontakt | Gästebuch | Übersicht | Komplex-Suche | AGB | Impressum | Datenschutz
Copyright © 2010 Juniors-Workstation. Alle Rechte vorbehalten.
Joomla! ist freie, unter der GNU/GPL-Lizenz veröffentlichte Software.
 
 
     
 
   
Design by windows vista forum and energiesparlampen