Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / Das document objekt


Das document Objekt
Ein document beschreiben: write()
Ein document beschreiben und Werte aus einem Formular übergeben

Das document Objekt

Mit dem document Objekt hatten wir schon zu tun, insbesondere im Kapitel Zugriffe auf Formularelemente, da die Formulare Kinder sind von document und folglich über die Syntax document.Name_des_Formulars angesprochen werden können. document wiederum ist ein Kindobjekt von window, so dass man über Name_des_Fensters.document auch Dokumente anderer Fenster ansprechen kann, wir kommen darauf zurück, zum Beispiel in dem Kapitel Mit Javascript auf Frames zugreifen. Betrachten wir aber zuerst eine Funktion von document, die einem öfter begegnet, nämlich write().

Ein document beschreiben: write()

Mit der Funktion write() kann man ein document beschreiben. Wir werden anhand eines Beispiels die grundsätzliche Vorgehensweise darstellen. Anschliessend werden wir diskutieren, wo diese Funktion sinnvoll eingesetzt werden kann.

<script language=JavaScript>
function aufblenden1()
{
fenster2=window.open("","fenschterle", 'width=567,height=200,scrollbars=yes');
fenster2.focus();
fenster2.document.open();
fenster2.document.write("Schon toll, man kann Live irgendwas in ein Fenster schreiben");
fenster2.document.close();
}
</script>
<A href=javascript:aufblenden1()>hier</A>

Will man sehen, was passiert, muss man hier clicken. Alles klar ? Wir schreiben direkt ins Fenster. Zugegenermassen ist der Nutzwert noch nicht so richtig klar und er wird auch im folgenden Beispiel nicht richtig klar, aber im übernächsten Beispiel dann schon.

Ein document beschreiben und Werte aus einem Formular übergeben

Etwas sinnvoller könnte man die Funktion einsetzen, wenn man irgendwelche Eingaben des Users abgreift. Man könnte so zum Beispiel ein Spiel oder Quiz programmieren ohne die Eingaben des Users serverseitig zu verarbeiten.

<script language=JavaScript>
function aufblenden2()
{
FName=document.banane.kirsche.value;
fenster2=window.open("","fenschterle", 'width=567,height=200,scrollbars=yes');
fenster2.focus();
fenster2.document.open();
fenster2.document.write("Hallo "+FName+" wie gehts denn so ?");
fenster2.document.close();
}
</script>
<form name=banane>
Gib mal Deinen Namen ein <input type=text name=kirsche><input type=button value="geht los" onClick=aufblenden2();
</form>

Gib mal Deinen Namen ein

Ein interessanter Effekt, den man ausnutzen kann, ergibt sich, wenn man das document nicht mit document.close() schliesst. Man kann dann dieses Dokument continuierlich beschreiben. Wer sich jetzt nicht richtig vorstellen kann, von was die Rede ist, der kann hier clicken. Und ? Alles klar ? Man gibt unten etwas ein und das wird dann oben reingeschrieben. Der JavaScript, der das macht, sieht so aus.

<html><head><title>Javascript document.open</title>
<script language=JavaScript>
function oeffnen()
{
parent.oben.document.open();
}
function aufblenden3()
{
Eingabe=parent.unten.document.bananen.kirschen.value;
parent.oben.document.write(Eingabe+"<br>");
parent.unten.document.bananen.kirschen.value="";
}
</script>
</head><body onload=oeffnen()>
<form name="bananen">
Gib mal was ein <input type=text name="kirschen"><input type=button value="abschicken" onClick=aufblenden3();>
</form><br><br>
</body></html>

Wer es lokal nachbauen will, braucht die HTML Seiten, die man sich hier runterladen kann. Wer das jetzt für eine Spielerei hält, der irrt unter Umständen, weil es hierfür praktische Anwendungen gibt. In diesem konkreten Fall, hat man lediglich einen Chat programmiert, der es einem erlaubt, sich mit sich selbst zu unterhalten, was ja nur für ausgeprägte Autisten interessant ist. Es ist aber möglich, diesen Ansatz mit einem serverseitig arbeitenden Skript zu kombinieren. Der serverseitig arbeitende Skript würde einen kleinen JavaScript produzieren, diesen in einen nichtsichtbaren Frame schiessen. Dieser kleine Skript kann dann irgendwelche Inhalte in einen Frame schiessen. Man erreicht so, dass man an eine bestehende Seite Inhalte anfügen kann, ohne dass diese flackert, oder sogar, dass man mitten in eine HTML Seite neue Inhalte laden kann, ohne die Seite neu zu laden. Ein Beispiel für diese Technik ist z.B. dieser Chat, den man hier betrachten und hier downloaden kann.

vorhergehendes Kapitel