Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

document.write(html)

Schwierigkeitsgrad:

 

Beschreibung:

Mit Hilfe der Methode "write()" des Objekts "document" können sie HTML-Code in ein Dokument einfügen.
Damit handelt es sich um eine der mächtigsten Funktionen von JavaScript.
Dieser Abschnitt soll ihnen zeigen, was sie damit alles machen können und wie dynamische Webseiten mit JavaScript gestaltet werden.

Was ist das?

Dynamische Webseitengestaltung - darunter versteht man, dass Inhalte und Design getrennt vorliegen und entweder der gleiche Inhalt mit verschiedenen Designs, oder das gleiche Design mit verschiedenen Inhalten angezeigt werden kann.

Tipp:
document.write() kann nur beim Aufruf der Seite ausgeführt werden. Wird diese Methode aufgerufen nachdem die Seite im Browser geladen wurde (z.Bsp. durch Klick auf einen Button), löscht dieser Aufruf den Inhalt der gerade angezeigten Seite, bevor die neuen Daten eingefügt werden.

Das heißt, es gibt eine Art "Datenbank" und eine "Musterseite" welche die angeforderten Daten erzeugt. Und genau das können sie mit "document.write()" umsetzen - aber davon sind wir im Moment noch weit entfernt.
In dieser ersten Einführung möchte ich sie zunächst mit dem Objekt "document" und der Methode "write()" selbst vertraut machen. Wie sie JavaScript Pseudodatenbanken erzeugen und nutzen wird in einem nachfolgenden Artikel erklärt werden.

Das Objekt "document" repräsentiert die aktuell geladene HTML-Seite und bietet verschiedene Eigenschaften, die seinen Inhalt beschreiben, sowie Methoden, um den Inhalt des Objekts zu modifizieren. So gibt es zum Beispiel das Array "document.images[]", welches alle in die HTML integrierten Bilder repräsentiert.

Die für uns interessanten Methoden:

document.clear() löscht den Inhalt der gerade angezeigten Seite
document.open() öffnet einen Ausgabestrom auf eine neue (leere) HTML-Seite, in welche dann mit document.write() geschrieben werden kann. (die gerade geladene Seite wird dabei gelöscht)
document.close() schließt den Ausgabestrom
document.write(html) schreibt den durch den Parameter übergebenen HTML-Code in die aktuelle Datei
document.writeln(html) wie oben, beginnt allerdings nach dem eingegebenen Code eine neue Zeile

Beispiel:

Ein klassisches Beispiel für die Anwendung von document.write() ist die Berechnung der Fakultät.

Der Quellcode:

<HEAD>

    <SCRIPT language="JavaScript">
      <!-- Fakultaet (Autor: All-Community.de)
        function fac(n) {
          if (n==0) { return 1 }
          else { return n * fac(n-1) };
        }
      //-->
    </SCRIPT>

</HEAD>

<BODY>

    <!-- Fakultaeten von 1 bis 9 ausgeben -->

    <SCRIPT language="JavaScript">
      for (var i=1; i<10; i++) {
        document.writeln("<P>Fakult&auml;t von "+i+" = "+fac(i)+"</P>");
      };
    </SCRIPT>

</BODY>

Das Ergebnis:

Das mag noch nicht sehr beeindruckend wirken - aber es lassen sich natürlich auch sinnvollere Dinge einfügen - das aktuelle Datum, die Dateigröße, das Datum der letzten Änderung oder ihr persönliches Copyright...

Der Phantasie sind keine Grenzen gesetzt, und: auch scheinbar professionelle Lösungen, wie Navigationsskripte, die Verzeichnisbäume nachbilden, JavaScript Offline-Suchmaschinen (wie auf vielen CD-Publikationen) und andere Skripte machen sich das gleiche einfache Prinzip zu nutze...

 

Autor: Thomas Meyer

Home: www.All-Community.de

 Kontakt: