 |
Text-Eingabe in eine Prompt-BoxEine prompt-Box ist ein Dialogfenster, welches ein Eingabefeld, einen OK-Button und einen Abbrechen-Button enthält. Die Box kann mit einem Aufforderungstext und einem vorbelegten Eingabefeld aufgerufen werden, die beide in der Argumentklammer anzugeben sind. Als Ergebnis des Aufrufes erhält man nach Drücken des OK-Buttons den eingegebenen Text; wenn "Abbrechen" gedrückt wird, meldet die Variable Nullzurück. Gerade haben Sie,
eine Prozedur hinter sich, die diese Art der Eingabe nutzt.Der zugehörige Code ist im Head untergebracht und lautet:
<script language="JavaScript">
var ergebnistext=prompt("Wie heißenSie?","");
if(ergebnistext==""||ergebnistext==null)
history.back();
else
alert("Hallo, "+ergebnistext);
</script> |
Sinnvolle(?) Anwendungen dieser Eingabemöglichkeitwäre etwa die Personalisierung, also Anrede des Lesersmit dem Namen. Wie sie wahrscheinlich hier oben im Textsehen können, funktioniert das höchst unzureichend.Auch das Erfragen eines Paßworts, das den Seitenzugangauf einen bestimmten Personenkreis beschränkt, hatnur mäßigen Sinn. Mit JavaScript allein läßtsich der richtige Wert nur unzureichend verstecken.
Text-Eingabe in Formularelemente
sind
aus HTML bekannt. Sie sind für Eingaben bestimmt und
ihre Ergebnisse können bei HTML im wesentlichen nur übernommen
und etwa per E-Mail an der Seitenautor geschickt werden. Alle
können nun mit JavaScript ausgewertet, manipuliert und
ihre Ergebnisse überprüft werden. Speziell Texte
können in die Typen: 'text' und 'textarea'
eingegeben werden. Um ein Formularelement auswerten zu können,
muß es adressierbar sein. Dazu gibt es zwei Möglichkeiten.
- Mit den Mitteln von HTML kann jedes Formularelement
einen eindeutigen Namen erhalten. Der Aufruf eines Elementes
in Javascript erfolgt hierarchisch in der Form: document.formularname.elementname
- In JavaScript werden alle Formulare und ihre Elemente
in speziellen Arrays gespeichert, die in der Reihenfolge
des Auftretens im von 0 beginnend durchnumeriert werden.
Unabhängig von den Namen kann das erste Formular
mit document.form[0], das dritte mit document.form[2]
angesprochen werden. Für jedes Formular wird weiterhin
ein Array elements[] geführt, in dem die
Formularelemente abgelegt sind, wieder in der Reihenfolge
ihres Auftretens numeriert.
Eintrag in einem Textfeld
Der Text ist mit der Eigenschaft 'value' verknüpft.
Ein solcher kann bei Öffnung des Feldes vorgegeben werden,
z.B. um den Nutzer aufzufordern. Er kann vom Nutzer ungeändert
übernommen oder überschrieben werden. Es folgt eine
solche Eingabe, die mit Hilfe einer Funktion "auswert",
die zuvor im Head definiert wurde, ausgewertet (was denn sonst?)
wird um geeignet zu reagieren, wenn etwa keine Eingabe erfolgte.
Der Fortschritt gegen die Möglichkeiten von HTML besteht
darin, daß hier nun Texteingaben auf Plausibilität
geprüft und ggf. zurückgewiesen werden können
(wenn etwa in einen E-Mail-Adresse kein '@' vorkommt).
<script language="JavaScript">
function auswert()
{
if (document.form5.namensfeld.value=="Name?")
alert("Faulheit wird bestraft werden!");
else alert("ok "
+ document.form5.namensfeld.value + "!");
}
</script>
<form name="form5">
<input type=text size=30 name="namensfeld"
value="Name?">
<input type=button value="fertig"
onClick="auswert()">
</form>
|
Textfeld und Button werden wie üblich angelegt, der
Button wertet das Ereignis aus, daß er angeklickt
wird.
Eintrag in ein Textarea
Im Prinzip genauso erfolgt der Zugriff auf <texarea>.
Dieses ist ein eigenes Tag, das geöffnet und geschlossen
werden muß und einen Container für den Text bildet.
Der Inhalt heißt wieder "value" und kann
vom Programm vorgegeben, vom Nutzer verändert
und dann vom Programm wieder gelesen werden.
<form name="show">
<textarea name="board" cols=30 rows=10
wrap="virtual"></textarea>
<input type=button value="fertig"
onClick="alert(document.show.board.value)">
</form> |
Bitte den Lebenslauf eintippen:
Listbox
Die Listbox, auch Listenfeld oder Auswahlfeld genannt,
ermöglicht zwar keine direkte Nutzereingabe, sie gehört
aber hierher, weil sie die Auswahl unter angebotenen Möglichkeiten
bietet. Sie hat in HTML eigene Tags, in Kurzform <select
...><option...></select>. Mit JavaScript
gibt es Eingriffsmöglichkeiten, mit denen ein Listenfeld
nachträglich manipuliert werden kann.
Mit geringem Aufwand und sicherer Funktion in allen Browsern
lassen sich platzsparende
Menüs oder Stichwortlisten
für Suchhilfen anlegen.
Hier sollen nur die grundsätzlichen Zugriffsmöglichkeiten
kurz aufgelistet werden. Zunächst der HTML-Aufruf,
der Voraussetzung für weitere Eingriffe ist:
<form name="list">
<select name="wahl" onChange="auswahl()">
<option>Überschrift
<option value="eins">Erster
<option value="zwei">Zweiter
<option value="drei">Dritter
<option value="vier">Vierter
<option value="fünf">Fünfter
</select>
</form> |
Die Auswertungsfunktion, die hier auswahl() heißt,
und nur das Ergebnis anzeigt, bedarf genauerer Betrachtung.
Hier lautet sie
function auswahl()
{
num=window.document.list.wahl.selectedIndex;
if(num>0)alert(window.document.list.wahl.options[num].value);
} |
Man sieht, der Zugriff erfolgte unter Nutzung meiner Namen
für Formular (=list) und Auswahlfeld (=wahl).
Nur bei den Options, die ja auch eigene Namen besitzen,
wurde anders verfahren. Alle Seitenelemente sind über
innere Arrays zugänglich, hier wären das forms[i],
elements[j], options[k], sofern man nur die passenden
Zählerwerte kennt.
Mögliche Zugriffe auf Auswahlfelder, bei denen Werte
erfragt oder gesetzt werden sind:
| defaultSelected |
Vorauswahl einer Option erfragen oder setzen (hier
Option 0) |
|
| length |
Zahl der Options |
|
| selected |
ist eine Option gewählt? Hier wird Option 0
abgefragt |
|
| selectedIndex |
Nummer der gewählten Option |
|
| text |
Text der gewählten Option (hier Option 4) |
|
| value |
Wert (=value) der gewählten Option
(hier Option 4) |
|
Da bei allen Zugriffen auch Werte gesetzt werden können,
hat man die Möglichkeit, Auswahlfelder nachträglich,
etwa in Abhängigkeit von Formulareingaben oder dem
Browser des Nutzers zu verändern.
Die Veränderung, Löschung oder Ergänzung
von Options ist möglich. Einzelheiten entnehme man
dem folgenden Beispielcode:
<script>
window.document.list.wahl.options[3].text="Hier
ist jetzt der Dritte!";
window.document.list.wahl.options[2]=null;
window.document.list.wahl.options[5]=new
Option;
window.document.list.wahl.options[5].text="Sechster";
</script>
|
Dieses Script wird unmittelbar nach Aufbau des obigen Auswahlfeldes
aufgerufen und bewirkt Veränderungen, die in der Tabelle,
die erst danach angelegt wird, für scheinbare Unstimmigkeiten
sorgen.
|
|
|
DIENSTE
