11.3.10) Zugriff auf HTML-Dokumente

Grundlagen zum document-Objekt

Ein document-Objekt ist ein Element des window-Objekts. Da es den Zugriff auf die Elemente einer Webseite ermöglicht, besitzt es weitere Unterobjekte. So können Sie über das Unterobjekt forms auf Formulareigenschaften und -elemente zugreifen, sobald sich ein Formular <form>…</form> auf einer Webseite befindet.

js-114-1.jpg
Hierarchie des document-Objekts

Der Aufbau der Webseite bestimmt dabei das Vorhandensein von Instanzen eines Unterobjekts. Enthält beispielsweise ein HTML-Dokument kein Formular, besitzt das document-Objekt auch keine Objektreferenzen auf Formulare.



Unterobjekt anchors

Mit diesem Objekt haben wir Zugriff auf die Verweisanker einer Webseite. Über die folgende HTML-Anweisung wird z.B. ein Verweisanker definiert: 

<a name="absatz2">&Überschrift zum 2.Absatz</a>

js-115-1.jpg



Unterobjekt applets

Dieses Objekt erlaubt den Zugriff auf Java-Programme, die speziell für den Gebrauch im Browser erstellt wurden, sogenannte Java-Applets.

js-115-2.jpg



Unterobjekt forms

Ein Formular wird z.B. auf einer Webseite verwendet, um Informationen zu erfassen und an einen Empfänger, z.B. ein Skript auf dem Webserver, zu übertragen. Wie die Daten eingegeben werden, ist von den Eingabeelementen im Dokument abhängig. In Zusammenhang mit den Formularen in einem HTML-Dokument besitzt das f orms-Objekt weitere Unterobjekte, die den Unterelementen des <form>-Tags in HTML entsprechen.

Formular

Ein Formular wird zur Eingabe von Daten verwendet, die nach dem Absenden verarbeitet werden sollen. Die Auswertung kann dabei auf unterschiedliche Weise erfolgen. Die einfachste Art ist es, die Daten per E-Mail an eine bestimmte Person zu senden. Oder sie werden an ein Programm, meist ein in den Programmiersprachen PHP oder Perl geschriebenes Skript, auf dem Server geschickt und dort ausgewertet. In diesem Fall müssen die Adresse des Programms (action), der zu übertragende Datentyp (encoding) und das zu verwendende Übertragungsverfahren (method) bekannt sein.

Den Aufbau des Formulars finden wir in den Eigenschaften und Methoden des forms-Objekts wieder.

js-116-1.jpg
js-116-2.jpg

Beispiel: formular_auslesen.html

Es steht beispielsweise der folgende HTML-Quelltext als erstes Formular in einem HTML-Dokument. 

<form name="Formular"  action="test.php"  method="post"  enctype="text/plain" target="_top"> </form>

Der JavaScript-Code zum Auslesen dieser Formulardaten lautet:

formular_auslesen.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Unterobjekt forms</title>
  <script type="text/javascript">
      function formauslesen()
      {
        var text = "";
 
        text ='name: ' +  document.forms[0].name + '\n'
            + 'action: ' + document.forms[0].action + '\n'
            + 'method: ' + document.forms[0].method + '\n'
            + 'encoding: ' + document.forms[0].encoding + '\n'
            + 'target: '+ document.forms[0].target + '\n'
            + 'length: '+ document.forms[0].length;
 
        alert(text);
      }
  </script>
</head>
<body onLoad="formauslesen();">
  <h3>Auslesen der Formulardaten</h3>
  <form name="Formular" action="test.php" method="post" enctype="text/plain" target="_top">
  </form>
 
</body>
</html>

Wir können nicht nur die Eigenschaften des gesamten Formulars ermitteln. Die Funktionalität und Interaktivität eines Formulars verbirgt sich in den einzelnen Elementen, die in den vorhergehenden Abschnitten beschrieben wurden und im Array document.FormName.elements[].Eigenschaft des Formulars gespeichert sind. Mit der Angabe eines Index können wir ein bestimmtes Element des Formulars ansprechen, z.B. das vierte Element (mit dem Index 3) über document.FormName.elements[3].Eigenschaft. Kennen wir den Namen des Elements, können wir es direkt ansprechen und dessen Eigenschaften abfragen bzw. ändern: z.B. document.FormName.ElementName.Eigenschaft= Wert.



Eingabefelder

In HTML-Dokumenten kann in diesen Feldern Text ein- oder ausgegeben werden. Zur Verfügung stehen hierbei drei verschiedene Arten von Eingabefeldern: <input type=„text“> für einzeilige Felder, <input type=„textarea“> für mehrzeilige Felder und <input type=„password“> für nicht lesbare Passworteingaben.

js-117-1.jpg

Um die einzelnen Eingabefelder anzusprechen, existieren in JavaScript die jeweils entsprechenden Objekte text, textarea und password. Alle drei Objekte besitzen die folgenden Eigenschaften und Methoden:

js-117-2.jpg

Versteckte Felder

Innerhalb eines Formulars können wir mit der Angabe <input type=„hidden“ …> zusätzliche Informationen verschicken. Diese Felder werden nicht angezeigt. Mit JavaScript können wir folgende Eigenschaften des hidden-Elements abfragen.

js-117-3.jpg



Kontroll- und Optionsfelder

Eine Auswahl können wir in einem HTML-Dokument durch Kontroll-(checkbox) oder Optionsfelder (radio buttons) ermöglichen. Der Unterschied in der Verwendung der beiden Felder besteht darin, dass über Kontrollfelder genau eine Einstellung vorgenomnn werden soll (ja/nein). Optionsfelder werden innerhalb einer Gruppe zusammen-gefasst, und es kann nur eine Option der Gruppe gewählt werden (z.B. eine Auswahl der Pizza: entweder groß, klein oder mittelgroß).

js-118-1.jpg
js-118-2.jpg



Auswahllisten

Auswahllisten ermöglichen eine Selektion von einer oder mehreren (multiple) Optionen. Diese Listen werden in HTML mit dem HTML-Tag <select> erzeugt und in JavaScript durch das gleichnamige Objekt select repräsentiert.

js-118-3.jpg
js-119-1.jpg
js-119-2.jpg

Das ''options''-Array

Die Einträge der Auswahlliste sind über das Feld options erreichbar. Der Index des Eintrags wird in eckigen Klammern angegeben. Die Listenelemente besitzen folgende Eigenschaften:

js-119-3.jpg


Beispiel: auswahlliste.html

Die Funktion durchlauf zeigt alle Eigenschaften eines option-Elements als Textausgabe in einem mehrzeiligen Textfeld an. Dazu werden über eine for-Schleife die Eigenschaften jedes Eintrags des Formularelements mit dem Namen auswahl ausgelesen und eine Zeichenkette erzeugt. Diese wird der Eigenschaft value des textarea-Elements zugewiesen und im Textfeld ausgegeben. Die Zeilenumbrüche werden durch die Escapesequenzen \n erzeugt.

auswahlliste.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Formulareigenschaften : Auswahlliste</title>
  <script type="text/javascript">
      function durchlauf()
      {
        var text = "";
 
        for (i = 0; i < document.formular.auswahl.length; i++)
        {
          text = text +
              'index: ' +  document.formular.auswahl.options[i].index + '\n'
              + 'defaultSelected: ' + document.formular.auswahl.options[i].defaultSelected + '\n'
              + 'selected: ' + document.formular.auswahl.options[i].selected + '\n'
              + 'text: ' + document.formular.auswahl.options[i].text + '\n'
              + 'value: '+ document.formular.auswahl.options[i].value + '\n' +
              '==========================\n';
        }
 
        document.formular.ausgabe.value = text;
      }
  </script>
</head>
<body onLoad="durchlauf();">
  <h3>Anzeige der Eigenschaften der ausgewählten Elemente</h3>
  <form action="" name="formular">
    <select name="auswahl" size="4" multiple onChange="durchlauf();">
 
      <option value="Tier1">Der laute Hahn</option>
      <option value="Tier2" selected>Die sanftmütige Katze</option>
      <option value="Tier3">Der treue Hund</option>
      <option value="Tier4">Der störrische Esel</option>
    </select>
    <hr><br>
    <textarea cols="30" rows="25" name="ausgabe"></textarea>
 
  </form>
</body>
</html>

Die Auswahlliste auswahl befindet sich in einem HTML-Formular mit dem Namen formular. Die Funktion durchlauf() wird nach dem Laden der Webseite aufgerufen (onLoad=„durchlauf()“). Nach jeder geänderten Auswahl wird die Anzeige ebenfalls aktualisiert(onChange).



Schaltflächen

Eines der wichtigsten Elemente eines Formulars sind die Schaltflächen (buttons). Sie dienen zum Starten von Operationen, indem die entsprechende Schaltfläche betätigt wird.

js-120-1.jpg

Die Eigenschaften erlauben das Auslesen des Formularnamens (form), des Namens der Schaltfläche (name), des Typs (type) sowie der Beschriftung der Schaltfläche (value).

Schaltflächen können mit der Ereignisabfrage onClick auf das Anwählen mit der Maus oder auf das Drücken der Eingabetaste reagieren. Ansonsten bleiben diese Schaltflächen wirkungslos. Eine Ausnahme bilden die zwei Schaltflächen Submit und Reset zum Versenden und Zurücksetzen der eingegebenen Daten. Diese beiden standardmäßigen Schaltflächen dienen dazu, die eingegebenen Daten eines Formulars ohne Zuhilfenahme von JavaScript zu versenden oder zu löschen. Durch den Einbau einer Ereignisbehandlung für das Ereignis onSubmit wäre es beispielsweise möglich, vor dem Versenden der Daten diese auf Vollständigkeit zu prüfen bzw. beim Löschen eine Sicherheitsabfrage einzufügen.



Eingaben prüfen

Eingabefelder überprüfen

Die am meisten genutzte Funktion des f orms-Objekts ist die Überprüfung, ob alle Felder eines Formulars ausgefüllt wurden. Zu Beginn erstellen Sie ein Formular mit einem Eingabefeld und einer Schaltfläche submit zum Abschicken der Daten. Vor dem Abschicken der Formulardaten wird das Ereignis onSubmit ausgelöst und dadurch die Funktion testen ausgeführt.

Beispiel: form_tester.html

Zur Überprüfung der Eingabe wird das Ereignis onSubmit verwendet. Es ruft beim Betätigen der Schaltfläche absenden die Funktion testen() auf. Um das Versenden der Daten bei einer fehlerhaften Eingabe zu verhindern, gibt return den Rückgabewert der Funktion zurück. Ist die Eingabe korrekt, liefert die Funktion den Wert true und die Aktion wird ausgeführt. Liefert die Funktion testen() jedoch den Wert false, werden die Formulardaten nicht abgesendet.

form_tester.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Eingabe testen</title>
  <script type="text/javascript">
      function testen()
      {
        if (document.Eingabe.Feld.value == "")
        {
          alert("Sie müssen etwas eingeben!")
          document.Eingabe.Feld.focus();
          return false;
        }
        else
        {
          alert("Vielen Dank!");
          return true;
        }
      }
  </script>
</head>
<body>
  <div align="center">
  <h3>Überprüfen der Eingabe</h3>
    <form action="" name="Eingabe" onSubmit="return testen();">
 
      <input type="Text" name="Feld">
      <input type="submit" name="absenden" value="Testen">
    </form>
  </div>
</body>
</html>

Das Beispiel können wir erweitern, indem wir z.B. den Mauscursor automatisch in das fehlerhafte Eingabefeld setzen. Die Methode zum Setzen des Cursors ist focus(). Durch die Angabe des entsprechenden Formularfeldes geben wir an, in welches Feld der Cursor gesetzt werden soll. In dem vorigen Beispiel könnten wir nach der Fehlermeldung die Methode document.Eingabe.Feld.focus(); angeben. Bei umfangreichen Formularen mit vielen Eingabefeldern erleichtern wir somit dem Anwender die Suche nach dem fehlerhaften Eingabefeld.


Beispiel: auf_zahlen_testen.html

Mithilfe des Objekts string haben wir die Möglichkeit, die Daten eines Eingabefeldes auf bestimmte Zeichen zu kontrollieren. Das folgende Beispiel testet den Wert eines Eingabefeldes auf numerische Daten. Ist die Eingabe eine Zahl, wird der Wahrheitswert true als Resultat zurückgegeben. Besteht die Eingabe nicht aus einer Zahl, wird false zurückgeliefert. Wir können den Test auch mithilfe von regulären Ausdrücken realisieren.

auf_zahlen_testen.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Eingabe testen</title>
  <script type="text/javascript">
    function NumTest(eingabe)
    {
      var daten ="0123456789";
      for(i = 0; i < eingabe.length; i++) {
        if(daten.indexOf(eingabe.charAt(i)) < 0 )
        {
          alert(eingabe + " ist keine gültige nummerische Eingabe.");
          return false;
        }
      }
      return true;
    }
  </script>
</head>
<body>
  <div align="center">
  <h3>Testen auf nummerische Daten</h3>
  <p>Geben Sie bitte Zahlen in das Eingabefeld ein:</p>
 
    <form action="" name="formular" onSubmit="return NumTest(eingabe.value);">
      <input type="text" name="eingabe">
      <input type="submit" name="absenden" value="Testen">
    </form>
  </div>
</body>
</html>


Abfrage eines Optionsfeldes

Der Test, ob mindestens ein Optionsfeld gewählt wurde, ist etwas umfangreicher.

Beispiel: form_tester_options.html

Die grundlegende Vorgehensweise bei dieser Abfrage ist, dass zuerst die Anzahl der Optionsfelder ermittelt werden muss. Danach prüfen wir über eine Zählschleife die Eigenschaft checked jedes Optionsfeldes. Wurde kein Element ausgewählt, wird eine Fehlermeldung angezeigt.

form_tester_options.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Test, ob ein Optionsfeld ausgewählt wurde</title>
  <script type="text/javascript">
      function optionstest()
      {
        var j = false;
        for(i = 0; i < document.RadioForm.Abfrage.length; i++)
          if(document.RadioForm.Abfrage[i].checked)
          {
            j = true;
            break;
          }
 
        if(!j)
        {
          alert("Sie müssen mindestens eine Option auswählen.")
          return false;
        }
        return true;
      }
  </script>
</head>
<body>
  <div align="center">
  <h3>Test, ob ein Optionsfeld ausgewählt wurde</h3>
  <form action="" name="RadioForm" onSubmit="return optionstest();">
 
    <input type="radio" value="1" name="Abfrage">Option 1<br>
    <input type="radio" value="2" name="Abfrage">Option 2<br>
    <input type="radio" value="3" name="Abfrage">Option 3<br>
    <input type="submit" name="x1" value="Testen">
  </form>
  </div>
</body>
</html>


Sicherheitsabfrage beim Zurücksetzen

Ein weiteres Beispiel zur Arbeit mit Formularen ist die Sicherheitsabfrage beim Zurücksetzen der eingegebenen Daten. Normalerweise werden alle Eingaben sofort gelöscht, sobald der Anwender die reset-Schaltfläche eines Formulars betätigt. Dies kann jedoch in einigen Fällen ungewollt sein. Die folgende Funktion ermittelt über ein Bestätigungsfenster, ob die Daten wirklich gelöscht werden sollen.

Beispiel: reset_abfrage.html

Die Funktion warnung() fängt das Zurücksetzen des Formulars ab und blendet ein Fenster zum Bestätigen des Vorgangs ein. Bestätigt der Anwender das Löschen der Daten, liefert die Funktion den Wert true zurück und das Zurücksetzen der Daten wird durchgeführt. Um den Löschvorgang abzubrechen, wird das Bestätigungsfenster über die Schaltfläche Abbrechen geschlossen und der Wert false wird zurückgeliefert. Die Daten bleiben erhalten. Diese Abfragefunktion beim Betätigen der reset-Schaltfläche mit der Ereignisabfrage onReset() im <form>-Tag aufgerufen.

reset_abfrage.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Sicherheitsabfrage beim Zurücksetzen</title>
  <script type="text/javascript">
    function warnung()
    {
      return confirm("Wollen Sie wirklich alle Eingaben zurücksetzen?");
    }
  </script>
</head>
<body>
  <div align="center">
  <h3>Sicherheitsabfrage beim Zurücksetzen</h3>
  <p>Geben Sie etwas in das Eingabefeld ein <br>und klicken Sie auf "Zurücksetzen".</p>
 
    <form action="" name="formular" onReset="return warnung();">
      <textarea cols="20" rows="10" name="eingabe"></textarea>
      <br>
      <input type="submit" value="Senden">
      <input type="reset" value="Zurücksetzen">
    </form>
  </div>
</body>
</html>



Verschiedene Formulare

Auf einer Webseite können sich mehrere Formulare befinden. Damit jedes Element eines Formulars eindeutig angesprochen werden kann, werden die verschiedenen Formulare separat betrachtet.

js-123-1.jpg
Schematische Darstellung mehrerer Formulare und ihrer Elemente als Arrays


Beispiel: mehrere_formulare.html

Eine Webseite enthält zwei Formulare, die zur Eingabe von Personenangaben und Suchbegriffen dienen. Dem ersten Formular weisen wir über onSubmit=„readForm1()“ die Ausführung der Funktion readForm1() zu. Nach dem Abschicken des zweiten Formulars soll die Funktion readForm2() ausgeführt werden.

mehrere_formulare.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Mehrere Formulare auslesen</title>
  <script type="text/javascript">
      function readForm1()
      {
        alert('Eingabefeld "' + document.Formular1.IhrName.name + '" mit dem Wert "' + document.Formular1.IhrName.value + '"');
        alert('Optionsfeld "' + document.Formular1.Geschlecht[0].name + '" mit dem Wert "' + document.Formular1.Geschlecht[0].value + '"; ausgewählt=' + document.Formular1.Geschlecht[0].checked);
        alert('Optionsfeld "' + document.Formular1.Geschlecht[1].name + '" mit dem Wert "' + document.Formular1.Geschlecht[1].value + '"; ausgewählt=' + document.Formular1.Geschlecht[1].checked);
        return;
      }
 
      function readForm2()
      {
        alert('Eingabefeld "' + document.forms[1].elements[0].name + '" mit Wert "' + document.forms[1].elements[0].value + '"');
        alert('Schaltfläche "' + document.forms[1].elements[1].name + '" mit Wert "' + document.forms[1].elements[1].value + '"');
        return;
      }
  </script>
</head>
<body>
  <h3>Mehrere Formulare auslesen</h3>
  <h4>1.Formular</h4>
 
  <form action="" method="get" name="Formular1" onSubmit="readForm1();">
    <input type="text" name="IhrName" value="Ihr Name">
    <p><input type="radio" name="Geschlecht" value="männlich">männlich
    <br><input type="radio" name="Geschlecht" value="weiblich">weiblich
    <p><input type="submit" name="Suchen" value="Absenden">
  </form>
 
  <hr>
 
  <h4>2.Formular</h4>
  <form action="" method="get" name="Formular2" onSubmit="readForm2();">
 
    <input type="text" name="Suchfeld" value="Suchbegriff">
    <p><input type="submit" name="Suchanfrage" value="Suchen">
  </form>
</body>
</html>

Die einzelnen Elemente sind mit ihrer HTML-Definition als Objekte im Dokumentenmodell verankert. Ein Element kann jetzt auf verschiedene Weise referenziert werden. Im Folgenden werden die verschiedenen Möglichkeiten für das Auslesen des ersten Elements im ersten Formular aufgelistet. Alle Varianten greifen auf den Wert des Eingabefelds IhrName zu, das ein Element des ersten Formulars mit dem Namen Formular1 ist.

Verschiedene Möglichkeiten, ein Formularelement anzusprechen:

document.forms[0].elements[0].value
document.forms[0].elements["IhrName"].value
document.forms[0].IhrName.value
document.forms["Formular1"].elements[0].value
document.forms["Formular1"].elements["IhrName"].value
document.forms["Formular1"].IhrName.value
document.Formular1.IhrName.value

Die Variante document.Formular1.IhrName.value mit der direkten Angabe der Objektnamen ist der am häufigsten verwendete Zugriff auf ein Formularelement.

Optionsfelder (radio buttons) nehmen eine Sonderstellung ein. Da mehrere Optionsfelder in einer Gruppe zusammengefasst werden können und somit den gleichen Namen haben, können sie nicht direkt über diesen Namen angesprochen werden. Sie können deshalb nur über den Index angesprochen werden, z.B. document.Formular.elements[0], oder über das Namenfeld document.Formular.Optionsname[0].



Unterobjekt images

Um die Eigenschaften von Grafiken auslesen und ändern zu können, nutzen Sie das Objekt images.

js-125-1.jpg

Der Zugriff auf die einzelnen Grafiken erfolgt über einen Index, den Sie hinter dem Objektnamen images in eckigen Klammern angeben, z.B. document.images[0]. Sie können eine Grafik auch direkt mit dem Namen ansprechen, den Sie ihr vorher mit dem Attribut name innerhalb des <img>-Tags gegeben haben, z.B. document.BildName.

Für Grafiken, die Sie nachträglich mit JavaScript anzeigen möchten, müssen Sie jedoch eigene Grafikobjekte erzeugen. Das ist beispielsweise notwendig, wenn Sie Grafiken durch andere Grafiken per JavaScript ersetzen wollen.

js-126-1.jpg

Zum Erzeugen eines Objekts vergeben Sie einen Variablennamen, den Sie mit new Image() initialisieren. Dem erzeugten Objekt können Sie jetzt über die Eigenschaft src die entsprechende Grafikdatei zuweisen.

Ein sehr häufig genutzter Effekt im Internet ist der MouseOver-Effekt. Er wird deshalb sogenannt, weil sich eine Grafik ändert, sobald sich die Maus über einem Link oder einer Grafik befindet (onMouseOver).

Grafiken auswechseln

js-126-2.jpg
Anzeige verschiedener Grafiken beim Überfahren unterschiedlicher Verweise mit der Maus

Die angezeigte Grafik erhält die Bezeichnung bild, mit der wir über JavaScript angesprochen werden kann. Sobald sich die Maus über einem Link befindet, wird die Grafik durch das entsprechende Bild ersetzt. Wird der Link verlassen, soll eine leere Grafik angezeigt werden.


Beispiel: images_bildtausch.html

Zuerst erstellen Sie den HTML-Code mit einer unsichtbaren Grafik und den Hyperlinks. Die nicht sichtbare Grafik images/blank.gif dient als Platzhalter für die dynamisch erscheinende Grafik. Beim Überfahren der Hyperlinks mit der Maus wird statt der Platzhalter-Grafik eine andere Grafik angezeigt.

images_bildtausch.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Grafik austauschen</title>
  <script type="text/javascript">
      function zurueck()
      {
        document.bild.src = "images/blank.gif";
      }
  </script>
</head>
<body>
  <div align="center">
  <h3>Grafik austauschen</h3>
  <img src="images/blank.gif" name="bild" alt="" title=""><br>
 
  <a href="#" onMouseOver="document.bild.src='images/fruehling.gif';" onMouseOut="zurueck();">Frühling</a> -
  <a href="#" onMouseOver="document.bild.src='images/sommer.gif';" onMouseOut="zurueck();">Sommer</a> -
  <a href="#" onMouseOver="document.bild.src='images/herbst.gif';" onMouseOut="zurueck();">Herbst</a> -
  <a href="#" onMouseOver="document.bild.src='images/winter.gif';" onMouseOut="zurueck();">Winter</a>
  <p>Führen Sie die Maus über die Verweise, <br>um die verschiedenen Grafiken anzuzeigen.</p>
  </div>
 
</body>
</html>


Beispiel: images_diashow.html

Mit diesem Beispiel realisieren wir eine Diashow, wobei die Reihenfolge der Anzeige mithilfe einer Navigation steuerbar ist.

Die Steuerung der Grafikanzeige realisieren wir hier über Formular-Schaltflächen. Wir können zu diesem Zweck auch Hyperlinks einsetzen. Beide unterstützen die Ereignisabfrage onClick, mit der der Grafikwechsel ausgelöst wird. Übergeben wird die Nummer der Schaltfläche, damit in der Funktion eine Unterscheidung für die anzuzeigende Grafik vorgenommen werden kann.

An das Ende der Webseite images_diashow.html fügen wir den folgenden JavaScript-Code ein: 

<script type="text/JavaScript">
  wechsel(0); 
</script>

Damit rufen wir die Funktion wechsel() auf, zeigen die erste Grafik an und füllen nach dem Laden der Webseite das Eingabefeld mit der Erläuterung zum ersten Bild.

images_diashow.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Diashow</title>
  <script type="text/javascript">
      var bilder = new Array("blau.jpg", "land.jpg", "winter.jpg", "wueste.jpg");
      var bildlegende = new Array("Das blaue Meer.", "Alle Vöglein sind schon da...", "Sonnenuntergang im Winter", "Fata Morgana");
      var count = 0;
 
      function wechsel(stelle)
      {
        if (stelle == 0)
          count = 0;
        if ((stelle == 1) && (count > 0))
          count--;
        if ((stelle == 2) && (count < bilder.length - 1))
          count++;
        if (stelle == 3)
          count = bilder.length - 1;
 
        document.bild.src = "images/" + bilder[count];
        document.legende.ausgabe.value = bildlegende[count];
      }
  </script>
</head>
<body>
  <div align="center">
    <h2>Dia-Show</h2>
    <form action="" name="legende">
 
      <input type="button" value="<<" onClick="wechsel(0);">
      <input type="button" value=" < " onClick="wechsel(1);">
      <input type="button" value=" > " onClick="wechsel(2);">
      <input type="button" value=">>" onClick="wechsel(3);"><br>
      <input type="Text" name="ausgabe" size="30" readonly>
      </form>
    <p><img src="images/blau.jpg" border="0" width="320" height="240" name="bild" alt="Bildanzeige"></p>
    <script type="text/javascript">
        wechsel(0);
    </script>
 
  </div>
</body>
</html>



Über das Objekt links haben Sie per JavaScript Zugriff auf die Verweise in einem HTML-Dokument. Der Zugriff erfolgt über deren Index. Über links[i] haben wir Zugriff auf die URL, auf die der Link verweist.

js-129-1.jpg


Beispiel: links.html

Zu Beginn werden im <body>-Tag zwei Links definiert. Im folgenden Skript werden die Informationen für jeden Link über Meldungsfenster ausgegeben.

links.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
  <title>Objekt: links</title>
</head>
<body>
  <h3>Auslesen der hinterlegten Hyperlinks</h3>
  <p>Hier sind die Links: <a href="http://www.google.at/" name="link1">Austrian Google</a> | 
  <a href="form.html" target="_blank" name="link2">Zum Formular</a>
 
  <script type="text/javascript">
    for(i = 0; i < document.links.length; i++)
    {
      alert((i + 1) + ". Link:" + "\n" +
            "Name: " + document.links[i].name + "\n" +
            "Ziel: " + document.links[i].target + "\n" +
            "Verweis: " + document.links[i] + "\n" +
            "Text: " + document.links[i].text + "\n");
    }
  </script>
</body>
</html>