Eine Besonderheit von Javascript sind bereitgestellte Objekte zum
Zugriff auf die Elemente eines HTML-Dokuments. Am Einfachsten kann auf
HTML-Elemente zugegriffen werden, wenn diese mit einem id Attribut
versehen werden. Zum Beispiel kann auf eine wie folgt definierte
ungeordnete Liste
<ul id="list"></ul>
in Javascript durch den Methodenaufruf
var list = document.getElementById("list");
zugegriffen werden. Das Ergebnis dieses Aufrufs ist ein Javascript-Objekt, das verwendet werden kann, um auf Eigenschaften der Liste zuzugreifen oder um diese zu manipulieren. Zum Beispiel können wir der Liste neue Items hinzufügen, wie wir später sehen werden.
Um mit Javascript auf die Elemente eines Dokumentes zugreifen zu
können, darf das Programm erst aufgerufen werden, wenn die Seite
komplett geladen ist. Dies können wir durch einen Eventhandler
erreichen, den wir dem body Tag wie folgt zuordnen können.
<body onload="processForm();">
...
</body>
Falls eine Javascript-Funktion processForm definiert ist, wird diese
aufgerufen, nachdem das Dokument geladen wurde.
Eine solche Funktion können wir wie folgt definieren.
function processForm() {
var query = window.location.search;
if (query != "") {
...
}
}
Hierdurch wird mit dem Schlüsselwort function eine Funktion mit dem
Namen processForm ohne Argumente definiert. Im Rumpf dieser Funktion
wird der Query-Parameter der URL mit Hilfe der Eigenschaft
window.location.search abgefragt und in der Variablen query
gespeichert. Eine bedingte Anweisung testet, ob der Query-String leer
ist. Falls nicht, wird der Rumpf der bedingten Anweisung ausgeführt,
in dem wir die Formulareingaben verarbeiten können.
Zur Verarbeitung der Formulareingaben benötigen wir einige Funktionen auf Zeichenketten, die wir im Folgenden exemplarisch einführen. Mit der folgenden Anweisung erzeugen wir aus dem Query-String ein Array, dass Formulareingaben enthält.
var params = query.substring(1).split("&");
Wenn zum Beispiel in der Variablen query die Zeichenkette
"?message=Hallo&priority=urgent" gespeichert ist, hat das Array
params nach dieser Anweisung den Wert ["message=Hallo", "priority=urgent"].
Wir verwenden hier die Methode substring, die einen Teilstring ab
der gegebenen Position selektiert. Da das erste Zeichen ? an
Position Null steht, wird es durch diesen Aufruf abgeschnitten. Die
Methode split zerlegt einen String anhand des gegebenen
Trennzeichens, hier "&". Als Ergebnis wird ein Array der Teilstrings
zurückgegeben, die zwischen den Trennzeichen stehen.
Wir können nun das Array params in einer Schleife durchlaufen und in
jedem Schritt dem in der Variablen list gespeicherten HTML-Element
ein Item hinzufügen.
for (var i = 0; i < params.length; i = i+1) {
var item = document.createElement("li");
var text = document.createTextNode(params[i]);
item.appendChild(text);
list.appendChild(item);
}
Hier verwenden wir eine for-Schleife, die sich deutlich von einer
Zählschleife in Python unterscheidet. Der Kopf der for-Schleife
definiert eine Variable i, die alle Indizes des Arrays params
durchläuft. Die beiden ersten Zeilen des Schleifenrumpfes verwenden
Methoden zum Erzeugen von HTML-Elementen und Text-Knoten. In der
Variablen item wird ein neu erzeugtes li Element gespeichert, die
Variable text speichert einen neuen Text-Knoten mit dem aktuellen
Name-Wert-Paar der Formulareingabe.
Die beiden letzten Zeilen des Schleifenrumpfes verwenden die Methode
appendChild, um das neu erzeugte List-Item der in der Variablen
list gespeicherten Liste hinzuzufügen.
Wenn wir nach Definition der Funktion processForm das definierte
Formular ausfüllen und absenden werden daraufhin der in der selben
Seite enthaltenen Liste die Formulareingaben hinzugefügt.