Diesen Artikel teilen
Infos zum Artikel
Artikel-Thema: Dokument-Objekt in Javascript nutzen
Beschreibung: Mit dem 🎨 Dokument-Objekt der aktuellen Seite kann man in Javascript die verschiedensten ✅ dynamischen Möglichkeiten umsetzen.
Wie bereits eingangs erwähnt, ist document.write einer der ersten Befehle, die man beim Lernen von Javascript erlebt. Der Zusatz document.* teilt dem Browser mit, dass auf dem aktuellen Dokument, ergo auf der gerade geöffneten und geladenen Webseite ein bestimmter Text geschrieben werden soll - eben der Auftrag write. Wäre document. nicht davor gestanden, wüsste Javascript nicht wirklich, was es mit dem Text anfangen soll.
Das Dokument-Objekt ist eine wichtige Funktion in Javascript, um auf der aktuellen Seite Veränderungen durchführen zu können. Der Browser erhält über den Javascript-Befehl die Anweisung, was oder wo auf der Seite verändert werden soll und die Möglichkeiten reichen von einer anderen Hintergrundfarbe bis zum Titel der Seite, man kann auch herausfinden, von welcher Seite man gekommen ist oder wann die aktuelle Seite zuletzt verändert wurde.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
Damit stehen viele Möglichkeiten zur Verfügung, die allesamt mit dem aktuellen Dokument in Zusammenhang stehen. Die Adressierung in Javascript erfolgt beim Dokument-Objekt immer auf die gleiche Art und Weise, nämlich mit dem voreingestellten
document.<
wobei < der jeweilige Befehl ist, der durchgeführt werden soll.
Beispiel 1: Hintergrundfarbe
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Eine Möglichkeit besteht darin, dass man die Hintergrundfarbe ändert. Der Befehl
document.bgColor = '#eaeaea';
sorgt beim Aufruf dafür, dass sich die Hintergrundfarbe in die angegebene Farbe ändert. Man könnte daher je nach Situation verschiedene Farben auswählen und für einen netten Effekt sorgen.
Beispiel 2: Seitentitel
Ebenfalls ändern kann man den Seitentitel der aktuellen Seite und zwar mit
document.title = "Das ist jetzt etwas anderes";
Beispiel 3: letztes Bearbeitungsdatum
Mit dem Dokument-Objekt lassen sich die verschiedensten Informationen abfragen wie etwa auch das letzte Datum, wann die Seite verändert worden ist.
document.lastModified
könnte zum Beispiel mit document.write verbunden werden.
Beispiel 4: referrer oder: woher kommst du?
Eine weitere Option besteht beim Dokument-Objekt in Javascript beim Abfragen des referrer, also jener Seite, von der aus man die aktuelle Seite hat erreichen kann.
document.referrer
könnte mit document.write genutzt werden, um die letzte Seite anzeigen zu lassen.
Die vorgestellten Lösungen - man könnte dies noch um Cookies, Öffnen und Schließen von Popups und einigen weiteren Parametern erweitern - sind interessante und dynamische Lösungen, die gerade nach der Etablierung der HTML-Seiten als Homepages gerne eingesetzt wurden.
Aber in der Zwischenzeit gibt es mit PHP eine Skriptsprache, die viele dieser Lösungen wie etwa das Abfragen des Referrer auch beherrschen und manches ist nicht mehr gefragt. Eine Änderung des Titels macht beim Konkurrenzkampf in den Suchmaschinen keinen Sinn und die Hintergrundfarbe ändert man seitenübergreifend per CSS.
Trotzdem ist es wichtig, diese Funktionen zu kennen, um sie zu verstehen, wenn etwa das Objekt document beim Einbinden von Werbecodes angesprochen wird und man daher erkennen kann, was dieser Javascript-Code bewerkstelligt und wie man ihn einsetzen kann.
Ein wesentlicher Vorteil bei diversen Effekten mit Javascript ist die Tatsache, dass man das aktuelle Fenster und/oder Dokument direkt ansprechen kann. Mit dem Fenster-Objekt kann man festlegen, ob es sich in der Größe verändern darf, beim Dokument-Objekt kann man die Hintergrundfarbe ändern oder andere Daten abrufen.
Weitere Möglichkeiten gibt es mit den Event-Handler. Das sind die berühmten Funktionen rund um Links, wie der Mouseover-Effekt, aber auch bei Formularfeldern gibt es Möglichkeiten. Einige dieser Optionen sind aber durch CSS schon abgelöst worden. Eine andere Variante ist die umfangreiche Bibliothek jQuery, mit der mittels AJAX auch PHP-Abfragen von Datenbanken gelingen, ohne die Seite neu laden zu müssen.
Themenseiten
Artikel-Thema: Dokument-Objekt in Javascript nutzen
Beschreibung: Mit dem 🎨 Dokument-Objekt der aktuellen Seite kann man in Javascript die verschiedensten ✅ dynamischen Möglichkeiten umsetzen.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel