Unterobjekt forms

====== JavaScript - 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 '''' auf einer Webseite befindet. {{:inf:js:js-114-1.jpg?700&direct}}\\ 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:


&Überschrift zum 2.Absatz

{{:inf:js:js-115-1.jpg?700&direct}} \\ \\ ===== Unterobjekt applets ===== Dieses Objekt erlaubt den Zugriff auf Java-Programme, die speziell für den Gebrauch im Browser erstellt wurden, sogenannte Java-Applets. {{:inf:js:js-115-2.jpg?700&direct}} \\ \\ ==== 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 ''

''-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. {{:inf:js:js-116-1.jpg?700&direct}}\\ {{:inf:js:js-116-2.jpg?700&direct}}\\ \\ **Beispiel: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/formular_auslesen.html|formular_auslesen.html}}** Es steht beispielsweise der folgende HTML-Quelltext als erstes Formular in einem HTML-Dokument.

Der JavaScript-Code zum Auslesen dieser Formulardaten lautet: \\ Unterobjekt forms

Auslesen der Formulardaten

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: '''' für einzeilige Felder, '''' für mehrzeilige Felder und '''' für nicht lesbare Passworteingaben. {{:inf:js:js-117-1.jpg?700&direct}} 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: {{:inf:js:js-117-2.jpg?700&direct}} ==== Versteckte Felder ==== Innerhalb eines Formulars können wir mit der Angabe '''' zusätzliche Informationen verschicken. Diese Felder werden nicht angezeigt. Mit JavaScript können wir folgende Eigenschaften des ''hidden''-Elements abfragen. {{:inf:js:js-117-3.jpg?700&direct}} \\ \\ ===== 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ß). {{:inf:js:js-118-1.jpg?700&direct}}\\ {{:inf:js:js-118-2.jpg?700&direct}} \\ \\ ===== Auswahllisten ===== Auswahllisten ermöglichen eine Selektion von einer oder mehreren (multiple) Optionen. Diese Listen werden in HTML mit dem HTML-Tag

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. {{:inf:js:js-120-1.jpg?700&direct}} 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: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/form_tester.html|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. Eingabe testen

Überprüfen der Eingabe

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: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/auf_zahlen_testen.html|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. Eingabe testen

Testen auf nummerische Daten

Geben Sie bitte Zahlen in das Eingabefeld ein:

\\ ==== Abfrage eines Optionsfeldes ==== Der Test, ob mindestens ein Optionsfeld gewählt wurde, ist etwas umfangreicher. **Beispiel: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/form_tester_options.html|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. Test, ob ein Optionsfeld ausgewählt wurde

Test, ob ein Optionsfeld ausgewählt wurde

\\ ==== 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: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/reset_abfrage.html|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 '' \\ \\ ===== 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. {{:inf:js:js-123-1.jpg?700&direct}}\\ Schematische Darstellung mehrerer Formulare und ihrer Elemente als Arrays \\ **Beispiel: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/mehrere_formulare.html|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 auslesen

Mehrere Formulare auslesen

1.Formular

2.Formular

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''. {{:inf:js:js-125-1.jpg?700&direct}} 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 -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. {{:inf:js:js-126-1.jpg?700&direct}} 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 ==== {{:inf:js:js-126-2.jpg?800&direct}}\\ 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: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/images_bildtausch.html|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. Grafik austauschen

Grafik austauschen

Frühling - Sommer - Herbst - Winter

Führen Sie die Maus über die Verweise,
um die verschiedenen Grafiken anzuzeigen.

\\ **Beispiel: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/images_diashow.html|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:

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. Diashow

Dia-Show

Bildanzeige

\\ \\ ===== Unterobjekt links ===== Ü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. {{:inf:js:js-129-1.jpg?700&direct}} \\ **Beispiel: {{http://elearn.bgamstetten.ac.at/infowpf/addons/JS/links.html|links.html}}** Zu Beginn werden im ''''-Tag zwei Links definiert. Im folgenden Skript werden die Informationen für jeden Link über Meldungsfenster ausgegeben. Objekt: links

Auslesen der hinterlegten Hyperlinks

Hier sind die Links: Austrian Google | Zum Formular \\ \\