Javascript Tutor - Lektion 20
Formulare und Javascript
Bis jetzt haben wir nur wenig mit Formularen gemacht. Jetzt werden wir etwas mehr damit machen.
Übung: Nur zur Äufwärmung, erstelle ein Eingabefeld und einen Button. Wenn der Nutzer auf den Button klickt, wird das, was er eingegeben hat, in einem PopUp Fenster angezeigt.
Weil ich gerade daran denke, Du weißt, dass wenn Du Dir die Beispiele und Deine Scripte ansiehst, dass es mehrer Wege für eine Lösung gibt, und dass man den Code immer noch kürzen und verbessern kann. Mit der Zeit lernst Du bestimmt ein paar Tricks, wie man die Scripte sauberer und kompakter macht. Du solltest wissen, dass die Beispiel in dieser Anleitung in einfacher, lockerer und einfach zu verstehender Art und Weise erstellt wurden. Ich möchte, dass Du etwas lernst, und Dich nicht mit schwierigen Scripts verwirren. Wenn Dir jemand sagt, dass es auch eine andere Lösung gibt, hat er sicherlich recht. Aber sei gewiss, alles hier ist gute Code und vor allem einfach genug geschrieben, um von einem Anfänger verstanden zu werden.
Übung: Erstelle drei weitere Eingabefelder weiter unten auf der Seite. Ändere das Script so, dass beim Klick auf den Button der Inhalt des Feldes 1 in das Feld 2 wandert und das des Feldes 2 in Feld 3, das des Feldes 3 in Feld 4 und das des Feldes vier verschwindet und Feld 1 leer wird. Hinweis: Es gibt keine "Lösch"-Methode für Textfelder... Du kannst jedoch den Wert auf "" setzen.
Eine häufige Form eine Elementes ist der Radiobutton. Schau Dir mal folgendes Script an...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function FruitBox()
{
alert(window.document.myform.frucht.value);
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="radio" NAME="frucht" onClick="window.document.myform.frucht.value = 'Orangen'">Orangen & Mandarinen<BR>
<INPUT TYPE="radio" NAME="frucht" onClick="window.document.myform.frucht.value = 'Bananen'">Bananen<BR>
<INPUT TYPE="radio" NAME="frucht" onClick="window.document.myform.frucht.value = 'Pfirsiche'">Pfirsiche, Nektarinen & Pflaumen<BR>
Wähle Deine Lieblingsfrucht und <A HREF="javascript:FruitBox()">klicke hier</A>.
</FORM>
</BODY>
</HTML>
|
Es gibt hier ein paar Dinge, die Du verstehen musst. Erstens, beachte, dass es zwar drei verschiedene Elemente gibt, aber die Radiobutton denselben Namen haben. Daher haben sie nur einen Wert. Obwohl wir sehen, dass sie einzeln angesprochen und geändert werden können, sind sie eine Gruppe und können als ein einzelnes Eingabefeld betrachtet werden.
Zweitens, beim Aufruf des Dokuments ist der Wert diese Radiobutton "undefiniert". (Selbst wenn wir in HTML auf einen Button klicken, kommt der JS Wert als "undefiniert " zurück) Wenn wir einen Radiobutton wählen, setzt der EventHandler onClick den Wert der Gruppe. Wenn wir den Link klicken, liest die Funktion einfach den Wert, der durch onClick gesetzt wurde.
Verstehe, was hier passiert, bevor Du weitermachst.
| << Zurück Weiter >> |
 |
|
 |
