|
Ansteuern von Formularelemente
radio button
checkbox
select box
Menü und Untermenü in einer select
box
| Ansteuern
von Formularelemente |
|
Im Gegensatz zu anderen, serverseitig arbeitenden
Programmiersprachen wie Perl, PHP, VBS (ASP) etc. die Eingaben
des Users über einen QUERY_STRING erhalten, kann in JavaScript
auf die Formularelemente über einen objektorientierten
Ansatz zugegriffen werden. Das Verfahren ist also 1) völlig
anders, als bei serverseitig arbeitenden Programmiersprachen
und b) wesentlich komplizierter. Der prinzipielle Aufbau von
HTML Formularen wurde schon sehr oft in diesen Handbüchers
beschrieben, zum Beispiel in Formulare. Will man mit JavaScript
auf Formularelemente zugreifen, so will man sie in der Regel,
völlig anders als bei serverseitig arbeitenden Programmiersprachen,
die Eingaben des Users in der Regel nicht an den Server übertragen,
obwohl dies über Umwege natürlich möglich ist.
Im Zusammenhang mit JavaScript versucht man in der Regel die
Menüführung einer Site zu optimieren. Hat man zum
Beispiel sehr viele Menüpunkte, kann man diese in einer
select box aufblenden. Der User kann dann den entsprechenden
Menüpunkt auswählen und wird auf die entsprechende
Seite weitergeleitet. Das ist dann kompakter, als das Aufblenden
der einzelnen Hyperlinks. Denkbar ist aber auch, dass man
z.B. ein Quiz oder ein Spiel hat, das rein clientseitig läuft
und man die Werte, die der User eingibt abfangen will, um
sie dann in einem Array zu parken. Genauso gut möglich
ist aber, dass mehrere Themen hat zu welchen wieder mehrere
Unterthemen gehören. Man könnte die Menüführung
dann so gestalten, dass der User zuerst ein Thema wählt
und in eine andere select Box die Unterthemen aufgeblendet
werden. Das wäre dann eine sehr kompakte Menüführung,
die es erlaubt, schnell durch einen komplexen Themenbaum zu
navigieren. Wie gesagt, ist das Ansteuern der einzelnen Formularelemente
in JavaScript kompliziert, insbesondere ist es anders für
jedes Formularelement. Wir zeigen anhand des folgenden Beispiels,
wie die einzelnen Formularelemente angesteuert werden können.
<script language="JavaScript">
function zeigen()
{
test_wert=document.spiel.FNAME.value;
hobby_wert=document.spiel.hobby[document.spiel.hobby.selectedIndex].value;
geschlecht1_wert=document.spiel.geschlecht[0].checked;
geschlecht2_wert=document.spiel.geschlecht[1].checked;
inhalt=document.spiel.Inhalt.value;
if(document.spiel.geschlecht[0].checked)
{
geschlecht=document.spiel.geschlecht[0].value;
}
if(document.spiel.geschlecht[1].checked)
{
geschlecht=document.spiel.geschlecht[1].value;
}
boxen=new Array;
for(i=0;i<=3;i++)
{
if(document.spiel.abschluss[i].checked)
{
boxen.push(document.spiel.abschluss[i].value);
}
}
abschluss=boxen.join(" ");
alert("Hallo "+test_wert+"\nDein Hobby ist
also "+hobby_wert+". Du bist "+geschlecht+
".\nDamit Du nicht vergisst, wass du eingegeben hast:\n"+inhalt+"\n
Du hast dir folgende Titel erworben:\n"+
abschluss);
}
</script>
</head>
<body>
<form name=spiel>
<input type=hidden name=test value="ist nur ein Test">
<table>
<tr><td>Name </td><td><input type=text
name=FNAME></td></tr>
<tr><td>Hobby</td><td><select name=hobby><option
value="schwimmen">schwimmen<option value="lesen">lesen<option
value="Rad fahren">Rad fahren</select></td></tr>
<tr><td>Geschlecht</td><td>m <input
type=radio name=geschlecht value="männlich"
checked> w <input type=radio name=geschlecht value="weiblich"></td></tr>
<tr><td colspan=2 align=middle><textarea rows=5
cols=40 name=Inhalt></textarea></td></tr>
<tr><td>berufliche Abschlüsse</td><td>Abitur
<input type=checkbox name=abschluss value="Abitur">
Diplom <input type=checkbox name=abschluss value="Diplom">
Magister <input type=checkbox name=abschluss value="Magister">
Ingenieur <input type=checkbox name=abschluss value="Ingenieur"></td></tr>
<tr><td colspan=2 align=middle><input type=button
value="zeigen" onClick=zeigen()></td></tr>
</table>
</form></body>
Schauen wir uns das Formular hier
an.
Das Beispiel zeigt, wie man in JavaScript die
Werte, die in ein Formular eingegeben wurden, wieder auslesen
kann. Einfach mal ein paar Werte eingeben und auf zeigen clicken.
Was das kleine Programm macht, ist eigentlich selbserklärend.
Wir sehen aber, dass das Auslesen der Werte durchaus nicht
trivial ist und auch nicht für alle Formularelemente
gleich. Fangen wir mit den trivialen Fällen an. Die Werte
aus einer Text Box, einem versteckten Feld oder aus einem
Textfeld auslesen ist einfach. Wir geben lediglich den Pfad
zu diesem Feld an und zu guter letzt, was wir von diesem Feld
sehen wollen, den Wert oder den Namen, wobei man sich wohl
meistens für den Namen interessiert. Das geht dann nach
dem Schema document.Name_des_Formulars.Name_des_Formularelementes.value_oder_name.
Diesen Wert übergeben wir dann an eine Variable und das
war es dann auch schon. Der radio button, die select box und
die checkbox allerdings bereiten uns Probleme, hier ist das
nicht mehr so einfach. Schauen wir uns das im Detail an.
Wir wollen den Wert haben, den der User tatsächlich
angeclickt hat, der also checked ist, folglich müssen
wir erstmal abtesten, welcher Wert überhaupt checked
ist. Die Zeile
document.spiel.geschlecht[0].checked
sagt uns das. Ist der Wert checked für den ersten radio
button, erhalten wir true, wenn nicht false. Alle radio buttons
zusammen bilden hierbei einen Array. Wäre der Fall komplizierter,
hätten wir eine beliebig grosse Anzahl an radio buttons,
müssten wir, wie wir es auch mit den Checkboxen machen,
alle Elemente des Arrays in einer for Schleife auslesen. Bei
den radio buttons, die uns als Ergebnis true liefern, interessieren
wir uns auch für den eigentlichen Wert, den wir mit
document.spiel.geschlecht[0].value
auslesen.
Das Verfahren bei der checkbox ist ähnlich,
allerdings ist es hier noch etwas komplizierter, da wir 1)
mehrere davon haben und 2) unter Umständen auch mehrere
Werte erhalten können, wenn jemand mehr als einen beruflichen
Abschluss hat. Auf alle Checkboxen kann wieder mit einem Array
zugegriffen werden. Wir lesen in einer for Schleife alle Werte
aus. Wieder erhalten wir für
document.spiel.abschluss[1].checked
den Wert true, wenn diese Box angeclickt wurde und den Wert
false, wenn diese nicht angeclickt wurde. Bei den Boxen, die
true sind, interessiert uns wieder der Wert, den wir mit
document.spiel.abschluss[i].value
abfangen. Das reicht uns aber noch nicht, da, wie bereits
erwähnt, jemand ja auch mehrere berufliche Abschlüsse
haben kann. Wir lesen also die Werte anschliessend noch in
einen Array aus dem wir dann später via join wieder eine
Zeichenkette machen.
Die select box tanzt nun endgültig aus
der Reihe. Auch hier haben wir es wieder mit einem Array zu
tun. Um festzustellen, welche Option angewählt wurde,
schreiben wir
document.spiel.hobby[selectedIndex]
was uns die Position der angewählten Option innerhalb
des Array hobby angibt, in unserem Fall kann das eine Zahl
zwischen 0 und 2 sein. Wenn wir wissen, welches Element angewählt
wurde, können wir auch den dazugehörigen Wert ermitteln,
das ist es ja, was wir haben wollen. Wenn wir also
document.spiel.hobby[document.spiel.hobby.selectedIndex].value
schreiben, haben wir den Wert, der angewählten Option.
Nachdem wir nun alle Elemente des Formulars rausgefischt haben,
können wir diese in einem alert Fenster anzeigen. Es
sind kompliziertere Verhältnisse denkbar, aber sie lassensich
alle nach einem Schema lösen, das dem hier vorgestellten
ähnelt.
| Menü
und Untermenü in einer select box |
|
Die über DHTML realisierte Menuesteuerung
ist ja allseits bekannt. Man hat einen Menüpunkt fährt
mit der Maus über diesen Punkt ein neues Menü klappt
auf unter welchem sich dann wieder neue Menüs verbergen.
Bis zu einem gewissen Umfang ist das möglich. Es sind
aber Anwendungsfälle denkbar, wo es so viele Menüpunkte
gibt, etwa Foren oder Meinungsportale, dass dies kein gangbarer
Weg mehr ist. Eine mögliche Lösung sähe dann
so aus.
<html><head><title>test</title>
<script language="JavaScript">
autoren=new Array();
autoren["Thomas Mann"]=new Array;
autoren["Thomas Mann"][0]="Buddenbrocks";
autoren["Thomas Mann"][1]="Zauberberg";
autoren["Thomas Mann"][2]="Felix Krull";
autoren["Thomas Mann"][3]="Joseph und seine
Brüder";
autoren["Thomas Mann"][4]="Lotte in Weimar";
autoren["Goethe"]=new Array;
autoren["Goethe"][0]="Faust";
autoren["Goethe"][1]="Iphiginie auf Tauris";
autoren["Goethe"][2]="Egmont";
autoren["Goethe"][3]="Torquato Tasso";
autoren["Goethe"][4]="Götz von Berlichingen";
autoren["Adorno"]=new Array;
autoren["Adorno"][0]="Minima Moralia";
autoren["Adorno"][1]="Ästhetische Theorie";
autoren["Adorno"][2]="Negative Dialektik";
autoren["Adorno"][3]="Aufklärung als Massenbetrug";
autoren["Adorno"][4]="Drei Studien zu Kant";
autoren["Mario Vargas Llosa"]=new
Array;
autoren["Mario Vargas Llosa"][0]="Conversación
en la catedral";
autoren["Mario Vargas Llosa"][1]="La guerra
del fin del mundo";
autoren["Mario Vargas Llosa"][2]="La casa verde";
autoren["Mario Vargas Llosa"][3]="tia Julia
y el escribidor";
autoren["Mario Vargas Llosa"][4]="Pantaleón
y los usurpadores";
function zeigen()
{
gewaehlter_Wert=document.banane.eins.options[document.banane.eins.options.selectedIndex].value;
for(i=0;i<autoren[gewaehlter_Wert].length;i++)
{
optionen=new Option(autoren[gewaehlter_Wert][i]);
document.banane.zwei.options[i]=optionen;
document.banane.zwei.options[i].value=autoren[gewaehlter_Wert][i];
}
}
function zeigen2()
{
alert("Sie haben "+document.banane.zwei.options[document.banane.zwei.options.selectedIndex].value+"
gewählt");
}
</script>
<body>
<form name="banane">
<select name="eins" onChange=zeigen();>
<option value="Thomas Mann">Thomas Mann
<option value="Goethe">Goethe
<option value="Adorno">Adorno
<option value="Mario Vargas Llosa">Mario Vargas
Llosa
</select>
<select name="zwei" onChange=zeigen2();>
<option value="Buddenbrocks">Buddenbrocks
<option value="Zauberberg">Zauberberg
<option value="Felix Krull">Felix Krull
<option value="Joseph und seine Brüder">Joseph
und seine Brüder
<option value="Lotte in Weimar">Lotte in Weimar
</select>
</form>
</body>
</html>
Schauen wir uns
hier
an, was dieses Skript macht.
Wir haben also eine
Anzahl von Schriftstellern und wollen effizient auf deren
Werke zugreifen. Wir wählen also einen aus. In der zweiten
Box erscheinen dann deren Werke. Wählen wir dort dann
ein Werk aus, wird uns dieses augeblendet. Wie deutlich zu
erkennen, ist dieser Skript nicht einfach. Gehen wir es step
by step durch
. Der ganze Skript basiert auf einem zweidimensionalen associative
array, das heisst, die erste Dimension ist ein Array, bei
dem der Index eine Zeichenkette ist, näheres siehe Arrays,
Hashes, mehrdimensionale Arrays (Hashes). Die erste Dimension
speichert den Autor, die zweite Dimension dessen Werke. Wählen
wir nun in der ersten select box eine Option aus, wird der
event handler onChange aktiviert.
Näheres hierzu unter event
handler. Anschliessend fischen wir uns mit der Zeile
gewaehlter_Wert=document.banane.eins.options[document.banane.eins.options.selectedIndex].value;
(siehe oben) die angewählte Option heraus. Wir müssen
jetzt verstehen, dass gewaehlter_wert einer der Schriftsteller
ist (Goethe,Thomas Mann, Mario Vargas Llosa oder Adorno).
Folglich ist erhalten wir mit autoren[gewaehlter_wert] einen
der vier Arrays. Folglich ist z.B. autoren["Thomas Mann"][1]
Buddenbrocks, autoren["Goethe"][2] Iphigenie auf
Tauris, autoren["Mario Vargas Llosa"][3] La casa
verde etc. etc.. autoren[gewaehlter_wert].length gibt uns
die Anzahl der Elemente zurück, in unserem Falle also
5 (Arrays starten bei 0, folglich ist der höchste Index
eines Arrays,der 5 Elemente hat, 4.) Diese fünf Optionen
wollen wir nun in die zweite select box schiessen. Wir haben
also innerhalb der for Schleife (siehe Schleifen) folgende
drei dubiosen Zeilen.
1) optionen=new Option(autoren[gewaehlter_Wert][i]);<br>
2) document.banane.zwei.options[i]=optionen;<br>
3) document.banane.zwei.options[i].value=autoren[gewaehlter_Wert][i];<br>
Mit 1) richten wir hierbei eine neue Option
ein, die den Namen (Namen ist hier das was der User sieht)
autoren[gewaehlter_wert][i] hat. Wurde also Goethe gewählt,
hat die Option in der ersten Runde den Wert Faust, in der
zweiten Iphigenie auf Tauris, in der dritten Egmont, in der
vierten Torquato Tasso und der fünften Götz von
Berlichingen. Die zweite, genau so spannende Fragen lautet
nun, wo wird diese Option eingefügt. Das bestimmen wir
in 2). Wenn wir uns in einer for Schleife befinden, dann sehen
wir sicher ein, dass i in jeder Runde einen hochzählt.
Wir überschreiben also in 2) in jeder Runde durch einen
neuen Wert. Fehlt nur noch der value, also nicht das, was
der User sieht, sondern das, was tatsächlich übergeben
wird. Das machen wir in 3). Der Option, die gerade angesprochen
wird, weisen wir einen Wert zu. Das war es dann. Mag sein,
dass das nicht gerade ein ästhetischer Hochgenuss ist,
aber es ist ein Verfahren, eine effiziente Menüsteuerung
zu realisieren, wenn sehr viele Themen vorhanden sind (Meinungsportale,
Foren, Automärkte etc. etc.).
|
 |
