Hauptmenü

Untermenü

JavaScript - Objekte - Referenzen

1. Ein Problem

Durch diese Punkt-Schreibweise kann da schon mal ein ziemlich langer Rattenschwanz entstehen. Und da geht dann irgendwann die Übersichtlichkeit flöten. Ein abschreckendes Beispiel für den Zugriff auf Formularelemente gefällig? 


// Pseudocode!!!
document.formular.select.options
  [document.formular.select.selectedIndex].firstChild.nodeValue = 
  document.formular.input.value;

Das ganze müsst ihr euch jetzt in einer(!) Zeile vorstellen. Und glaubt mir, irgendwann verliert ihr da den Überblick. Deshalb sollte man sich von vornherein einen übersichtlichen Stil angewöhnen.

2. Referenzvariablen

Um obiges Code-Tohuwabohu zu vermeiden, kann man Objekte in Variablen zwischenspeichern. Man legt also eine Referenz (ein Hinweis) darauf an. Dabei hat man alle Freiheiten der Welt. Und das macht die Sache schon wieder ein wenig komplizierter. Obiges Pseudobeispiel könnte man auch so schreiben: 


// Pseudocode!!!
var form = document.formular;
var sel  = form.select;
var opt  = sel.options[sel.selectedIndex]
opt.firstChild.nodeValue = form.input.value;

Erläuterung

Hier wird für jedes benötigte Element eine eigene Referenzvariable angelegt. Dann geht man die Hierarchie nach unten durch und benutzt den jeweiligen Verweis für die Definition des untergeordneten Elements. Das muss man sich so vorstellen:

  • form für das Formular.
  • sel für ein entsprechendes <select>-Feld des Formulars form.
  • opt für das ausgewählte(!) <option>-Element des <select>-Feldes sel.
  • Der neue Text innerhalb des <option>-Elements wird aus dem Wert (value) des entsprechenden <input>-Feldes geholt.

Einige von euch werden hier sicherlich nur spanisch verstehen. Ich kann euch trösten, das ist zu Beginn ganz normal. Wartet einfach die Tutorials ab. Dann werde ich anhand einiger Beispiele darauf eingehen.

3. this

Dies ist ein Verweis auf sich selbst. Das kann ein eigenes Objekt oder auch ein HTML-Element sein. Gleichzeitig kann man darüber auch auf die entsprechenden Methoden und Eigenschaften zugreifen. Wichtig dabei ist, dass man diese Selbstreferenz direkt nur bei dem jeweiligen Objekt/HTML-Element nutzen kann. 


<input type="text" name="bla" value="3" onclick="alert (this.value);">

Will man dagegen die Referenz zum Beispiel in einer Funktion verwenden, so muss man sie als Parameter übergeben. Denn sonst weiß die Funktion nicht, mit welchem Objekt/HTML-Element sie es zu tun hat. 


function getInfo(val)
{
  alert (val.value);
}
<input type="text" name="bla" value="3" onfocus="getInfo (this);">

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt