|
|
|
Quelltext
<script language="JavaScript">
<!--
string="";
function app(cc) {
string+=cc;
document.form1.text1.value=string;
}
function cclear() {
string="";
document.form1.text1.value=string;
}
function calc() {
if(string.length > 0) {
inp="out="+string;
eval(inp);
} else {
out="0";
}
document.form1.text1.value=out;
string=""+out;
}
function upda() {
string=""+document.form1.text1.value;
}
//-->
</script>
</head>
<body onLoad="cclear()">
<form name="form1" method="POST" onSubmit="{upda(); calc(); return false;}">
<table border>
<tr><td colspan=5><input type="text" size=16 maxlength=80 name="text1" value="" onChange="upda()"></tr>
<tr>
<td align=center><input type="button" value=" 7 " onClick="app('7')">
<td align=center><input type="button" value=" 8 " onClick="app('8')">
<td align=center><input type="button" value=" 9 " onClick="app('9')">
<td align=center><input type="button" value=" / " onClick="app('/')">
<td align=center><input type="button" value=" C " onClick="cclear()">
</tr><tr>
<td align=center><input type="button" value=" 4 " onClick="app('4')">
<td align=center><input type="button" value=" 5 " onClick="app('5')">
<td align=center><input type="button" value=" 6 " onClick="app('6')">
<td align=center><input type="button" value=" * " onClick="app('*')">
<td align=center><input type="button" value=" ( " onClick="app('(')">
</tr><tr>
<td align=center><input type="button" value=" 1 " onClick="app('1')">
<td align=center><input type="button" value=" 2 " onClick="app('2')">
<td align=center><input type="button" value=" 3 " onClick="app('3')">
<td align=center><input type="button" value=" - " onClick="app('-')">
<td align=center><input type="button" value=" ) " onClick="app(')')">
</tr><tr>
<td align=center><input type="button" value=" 0 " onClick="app('0')">
<td>
<td align=center><input type="button" value=" . " onClick="app('.')">
<td align=center><input type="button" value=" + " onClick="app('+')">
<td align=center><input type="button" value=" = " onClick="calc()">
</tr>
</table>
</form>
</body>
Erläuterung
Die Funktion "app" bewirkt, daß das als Argument übergebene Zeichen
an die Zeichenkette "string" angehängt wird. Die so entstandene Zeichenkette
wird dann im Formularfeld "text1" angezeigt.
Die Funktion "cclear" löscht die Zeichenkette "string" und das Eingabefeld
"text1".
In der Funktion "calc" erfolgt die eigentliche Berechnung mittels der in
JavaScript eingebauten Funktion "eval".
Die Funktion "upda" wird aufgerufen, wenn für das Eingabefeld "text1"
das Ereignis "onChange" eintritt, d.h. wenn der Anwender die im Textfeld
dargestellte Zeichenkette manuell verändert hat. In diesem Fall wird
die eingegebene Zeichenkette in die Variable "string" übernommen.
Referenz
[forms-array]
[form-Objekt]
[elements-array]
[element-Objekt]
[eval]
| action | gibt an, welche Aktion mit dem Formular verknüpft ist. |
elements[]  | ist ein Feld, das die einzelnen Bestandteile des Formulars enthält (siehe unten). |
| length | Anzahl der Elemente im Feld elements[]. "document.forms[].length" ist äquivalent zu "document.forms[].elements.length". |
| method | Methode, mit der die eingegebenen Daten versendet werden sollen (also "GET" oder "POST"). |
| encoding | entspricht dem ENCTYPE-Feld im <FORM>-Tag |
Methoden:
| submit() | Mit der Methode submit() kann ein Formular von JavaScript aus abgeschickt werden, ohne daß der Anwender den Submit-Knopf betätigt hat. |
| reset() | Entsprechend für reset() |
Ereignisse:
| onSubmit() | Das Ereignis onSubmit() tritt ein, wenn der Anwender den Submit-Knopf drückt, bzw. bei Formularen mit nur einem Textfeld die Return-Taste betätigt. |
| onReset() | Entsprechend für onReset() |
elements[], elements.length
Das elements-Array ist ein Kind des document.forms-Objektes.
Das Feld enthält alle innerhalb eines Formulars verwendeten
Formularelemente (Eingabefelder, Buttons). document.form1.elements.length
gibt die Anzahl der Formularelemente im Formular mit dem Namen "form1" an.
Ebenso wie beim forms-Array beginnt die Indizierung des
elements-Arrays bei 0 und es sind wieder drei Schreibweisen möglich,
um z.B. auf das erste Element (nämlich das Textfeld mit dem Namen "text1")
des Formulars "form1" zuzugreifen: "document.form1.elements[0]" sowie
"document.form1.text1" oder "document.form1["text1"]".
element-Objekt
Elemente sind wiederum Objekte mit Eigenschaften, Methoden und Ereignissen:
| Objekt | Eigenschaften | Methoden | Ereignisse |
|---|---|---|---|
| button | name value | click() | onClick() |
| checkbox | checked defaultChecked name value | click() | onClick() |
| hidden | name value | ||
| password | defaultValue name value | focus() blur() select() | |
| radio | checked defaultChecked length name value | click() | onClick() |
| reset | name value | click() | onClick() |
| select | length name options selectedIndex | blur() focus() | onBlur() onChange() onFocus() |
| options (Kind-Objekt von select) | defaultSelected index length name selected text value | ||
| submit | name value | click() | onClick() |
| text | defaultValue name value | focus() blur() select() | onBlur() onChange() onFocus() onSelect() |
| textarea | defaultValue name value | focus() blur() select() | onBlur() onChange() onFocus() onSelect() |
Eigenschaften:
| checked | angekreuzt ? |
| defaultChecked | standardmäßig angekreuzt ? |
| defaultSelected | standardmäßig ausgewählt ? |
| defaultValue | Default-Wert |
| length | Anzahl der Elemente in einer Gruppe |
| name | Name des Elements |
| options | Feld der Optionen |
| selected | ausgewählt ? |
| selectedIndex | Index der ausgewählten Option (bei Mehrfachselektion der ersten) |
| text | beschreibender Text |
| value | Wert des Elements |
kennzeichnet Eigenschaften, die nur gelesen, nicht
aber geschrieben werden können.
Methoden:
| blur() | Abgeben des "Input-Focus" (siehe focus). |
| click() | Es wird diejenige Aktion ausgelöst, die auch ein Mausklick des Anwenders auf das entsprechende Element verursacht hätte. |
| focus() | Heranholen des "Input-Focus": Das Feld erhält den (blinkenden) Eingabe-Cursor und ist bereit für eine Eingabe von der Tastatur. |
| select() | Ein Textbereich wird selektiert. |
Ereignisse:
| onBlur() | Der "Input-Focus" wurde abgegeben. |
| onChange() | Der Wert des Feldes hat sich geändert. |
| onClick() | Das Element wurde mit der Maus angeklickt. |
| onFocus() | Das Element hat den "Input-Focus" erhalten. |
| onSelect() | Der Text (oder ein Teil davon) wurde selektiert. |
| x=1; y=2; summe=eval("x+y"); | x=1; y=2; anweisung="summe=x+y"; eval(anweisung); | anw1="x=1;" anw2="y=2;" anw3="summe=x+y;" eval(anw1+anw2+anw3); |
| Auf der nächsten Seite entwickeln wir ein Formular, das mitdenkt. |
|
Wegen der besseren Wartbarkeit
ist es unbedingt anzuraten, Formulare und Formularelemente über ihren
Namen anzusprechen: beim späteren
Zufügen oder Entfernen von Formularen bzw. Formularelementen ändern
sich die numerischen Indizes, die Namen aber nicht.