Javascript Tutor - Lektion 6
Objekte, Eigenschaften und Methoden.
Was ist ein Objekt? Ein Objekt in Javascript ist ein Fenster, ein Frame, ein Bild, ein Formular, eine Textbox, das Dokument selbst, ein Radio-Button... das verstehst Du, ja?
Was ist eine Eigenschaft? Eine Eigenschaft ist ein Merkmal eines Objekts... der Ort des Dokuments, die Hintergrundfarbe eines Dokuments, ob eine Checkbox angeklickt wurde, die Breite eines Bildes etc.
Was ist eine Methode? Eine Methode ist im Grunde eine Funktion. Eine Methode tut etwas. Zum Beispiel ist close() eine Methode. window.close() schließt ein Fenster. Nicht allzu schwierig, oder?
Dies sind die grundlegenden Erklärungen dieser drei Begriffe (Objekt, Eigenschaft und Methode). Tatsächlich kann es etwas schwieriger werden, aber für unsere Belange reicht das erst mal.
Also, was machen wir nun mit Objekten, Eigenschaften und all diesen Dingen?? Nun, wir brauchen noch ein wenig mehr Hintergrundwissen. Nimm zum Beispiel mal dieses Texteingabefeld.
Dies ist der HTML Code für dieses Formular...
<FORM NAME="myform"> <INPUT TYPE="text" NAME="mytextbox" VALUE=""> </FORM>
Folge mir nun weiter. Wir haben das Browserfenster...
window
Im Fenster ist dieses Dokument...
window.document
Im Dokument befindet sich ein Formular...
window.document.form
Im Formular ist ein Texteingabefeld...
window.document.form.input
Und dieses Feld hat einen Wert...
window.document.form.input.value
(Jetzt ist der Wert noch leer, aber leer ist auch ein Wert.)
Dies ist die Objekthierarchie. So verweist Du auf verschiedene Eigenschaften verschiedener Objekte auf der Seite. Eine mögliche Objekthierarchie könnte sein...
welt.staat.bundesland.stadt.strasse.haus.person.name
Dies definiert die Eigenschaft Name einer Person. Wie steht's mit der Größe?
welt.staat.bundesland.stadt.strasse.haus.person.groesse
So musst Du anfangen, über eine einfache Webseite zu denken, wenn Du seine Objekte und deren Eigenschaften verändern willst.
Lass uns zurück gehen zum Texteingabefeld, das wir oben gesehen haben. Der HTML Code war
<FORM NAME="myform"> <INPUT TYPE="text" NAME="mytextbox" VALUE=""> </FORM>
Und wir können theoretisch auf jeden Wert in diesem Texteingabefeld verweisen wie folgt...
window.document.form.input.value
Nun gibt es aber noch eine Sache, ein Dokument kann ja mehrere Formulare enthalten, also nutzen wir zur Unterscheidung der Formular den Bezeichner NAME. Beachte, dass das obige Formular myform heißt. Das gleiche gilt für Formularfelder. Ein Formular kann mehrere Felder enthalten, also erhalten diese auch ihren eigenen NAMEn (in diesem Fall gibt es nur ein Eingabefeld, dessen Name mytextbox ist).
Wenn wir nun den Namen des Formulars und den Namen des Feldes nutzen, können wir nun auf dieses spezielle Feld zugreifen wie folgt...
window.document.myform.mytextbox.value
Ok Joe, Sag nun aber mal, was wir nun damit anfangen?
Nun, mein Junge, probier das mal...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function HelloBox()
{
alert (window.document.myform.mytextbox.value);
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="mytextbox" VALUE="">
</FORM>
<BR>Gib etwas in das Feld ein und klicke <A HREF="javascript:HelloBox()">hier</A>.
</BODY>
</HTML>
|
Toll, würde ich sagen. Verstehst Du, was passiert? Studiere es solange, bis Du's kapierst.
| << Zurück Weiter >> |
 |
 |
