vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Woche 3

Tag 19

Die Webseite als Objekt

Heute wollen wir die Webseite im Browser unter dem Objekt-Gesichtspunkt und dem JavaScript-Zugriff darauf betrachten. Zentraler Angelpunkt ist dabei das Objekt document, welches die Webseite repräsentiert, mit seinen zahlreichen Eigenschaften (von denen viele selbst wiederum Objekte sind) und Methoden. Eine wesentliche Anwendung für den umfangreichen Praxisteil am Ende ist der Einsatz von dem document-Unterobjekt Image bzw. dessen zugeordnetem Objektfeld images. Das letzte Beispiel in dem Kapitel geht als weitere Anwendung von document auf Cookies ein.

Um die Hintergründe dieser Verwaltung einer Webseite zu verstehen, wollen wir den Tag mit einem kleinen Exkurs zu dem DOM-Konzept und zu Dynamic HTML beginnen.

Dynamic HTML und DOM

Wesentliche Grundlagen für die Behandlung einer Webseite als Objekt und Zugriff darauf mittels JavaScript sind zwei Begriffe:

DOM

Dem Zugriff auf eine Webseite unter dem Objekt-Gesichtspunkt liegt ein Konzept zugrunde, das DOM (Document Objekt Model) heißt. Darin wird eine HTML-Seite nicht als statisch aufgebaute, fertige und nicht unterscheidbare Einheit, sondern als differenzierbare Struktur betrachtet. Dies ermöglicht die Behandlung von Bestandteilen der Webseite auch dann, wenn die Webseite bereits in den Browser geladen ist. Und zwar eine Behandlung, die weit über die einfache Interpretation durch den Browser von oben nach unten hinausgeht.

Das Konzept beinhaltet verschiedene Teilaspekte. Es veranlasst beispielsweise einen Browser, eine HTML-Seite zwar wie eine gewöhnliche Textdatei zu lesen und entsprechende HTML-Anweisungen auszuführen. Darüber hinaus wird der Browser jedoch beim Laden der Webseite alle ihm im Rahmen des Konzepts bekannten und einzeln identifizierbaren Elemente einer Webseite bezüglich ihres Typs, ihrer relevanten Eigenschaften und ihrer Position innerhalb der Webseite indizieren. Dies ist eine Art dynamische Datenbank im Hauptspeicher des Rechners, die beim Laden der Webseite aufgebaut und beim Verlassen der Seite wieder gelöscht wird. Ähnliche Elemente werden dabei bei der Indizierung auf gleiche dynamische Datenstapel (Stacks) für die Seite abgelegt, d.h. in der Denkweise einer relationalen Datenbank in den gleichen Datenbanktabellen eingetragen. Auf diese Weise hat der Browser nach dem Laden der Webseite genaue Kenntnis über alle relevanten Daten sämtlicher eigenständig für ihn ansprechbarer Elemente in der Webseite. Welche das jedoch sind und was er damit anstellen kann, das kann sich je nach Browser erheblich unterscheiden.

Jedes Element (etwa ein bestimmter HTML-Tag) ist in einem eigenen Datensatz abgespeichert, der bei Bedarf auch während der Lebenszeit der Webseite upgedatet wird. Etwa wenn mittels eines Scripts die Position eines Elementes in der Webseite verändert oder über Style Sheets nach dem vollständigen Laden der Webseite das Layout eines Elementes dynamisch verändert wird.

Das DOM-Konzept geht auf die Firma Netscape zurück und wurde mit dem Navigator 2.0 erstmals 1995 in Verbindung mit JavaScript der Öffentlichkeit präsentiert. Microsoft integrierte die hinter dem DOM- Konzept liegende Idee ab dem Internet Explorer 3.0 in Verbindung mit VBScript (wenngleich vollkommen unterschiedlich implementiert).

Ursprünglicher Entstehungsgrund von dem DOM-Konzept war, dass man die Beziehung von einigen Standardobjekten des Browsers zueinander über eine Hierarchie beschreiben wollte (siehe dazu Tag 15). Über das DOM- Konzept wurde, um ein Beispiel zu nennen, das die Webseite beschreibende Dokumentenobjekt mit Namen document in der Hierarchie in einem Fensterobjekt mit Namen window (dem Anzeigebereich des Browsers) angeordnet.

Das anfangs eingesetzte DOM-Konzept erlaubte noch keinen Zugriff auf einzelne Elemente innerhalb einer Webseite oder sonstwelchen Komponenten innerhalb eines dieser Standardobjekte. Jedoch kamen über die einzelnen Phasen der DOM-Versionen immer mehr Komponenten (auch Webseiten-Elemente) hinzu, auf die gezielt zugegriffen werden konnte. Leider verfolgten bei der Umsetzung der DOM-Idee die beiden großen Browserkontrahenten verschiedene Strategien1, weshalb es mittlerweile zu zahlreichen Inkompatibilitäten zwischen den Browsern kommt.

In dem DOM-Konzept der Version 3.0 des Navigator kann bereits auf PlugIns, Applets und Bilder zugegriffen werden. Andere Elemente wie Überschriften oder Blöcke in Webseiten sind noch nicht erreichbar. Erst ab der Version 4.0 des Navigator (Communicators) kann zudem auf Formulare, Stilinformationen, Anker, Links oder Frames zugegriffen werden. Damit sind zwar die wichtigsten Elemente einer Webseite erreichbar, jedoch beileibe noch nicht alle Elemente. Aber auch die allgemeine Ereignisbehandlung wird im DOM-Konzept geregelt.

Insbesondere war Netscape in Hinsicht auf diese objektorientierte Sichtweise von Webseite und Browser der Zeit (des W3C - nicht der Technik) ein wenig zu weit voraus. Viele gut durchdachte und intelligente Ansätze wurden in das Netscape-Konzept integriert und auch in die gerade aktuellen Navigator-Versionen implementiert. Nur - nicht immer straft das Leben den, der zu spät kommt. Manchmal wird auch der bestraft, der zu früh kommt. Den straft das Internet über dessen konservativen »Reichsverweser« - das W3C. Obwohl wir - wie schon mehrfach angedeutet - diese Sackgasse2 der DOM-Geschichte nicht intensiv verfolgen wollen, soll das Konzept zumindest kurz angerissen werden. Das DOM-Modell von Netscape stellt zum Zugriff auf die Ingredienzien einer Webseite noch eine weitere Struktur zur Verfügung - Layer bzw. Schichten, welche auf Seiten von HTML über den <LAYER>-Tag realisiert werden. Die Idee kann man sich vorstellen, als ob jedes einzelne Element einer Webseite auf eine Klarsichtfolie gezeichnet wird. Jeder der Folien wird gekennzeichnet und dann werden alle Folien in einer festgelegten Reihenfolge in Schichten übereinander gelegt.

Zusätzlich wurde in dem Navigator 4.0 eine besondere Art von Style Sheets eingeführt - die JavaScript-Assisted Style Sheets (JSSS)3. In Verbindung damit ergänzt der Navigator 4.0 seine bisherige Objekt-Hierarchie und führt für Webseiten ein neues Objekt ein, das - was leider verwirrend ist - jedoch den gleichen Namen wie das bisher die Webseite repräsentierende bekommt - document. Das neue Objekt kommt immer dann zum Tragen, wenn in Verbindung mit der Webseite diese Style Sheets zum Einsatz kommen (es befindet sich in der Objekthierarchie auch an tieferer Ebene wie das namensgleiche Objekt, das die Webseite repräsentiert). JSSS benutzt JavaScript, um darüber auf die Elemente auf der Webseite zuzugreifen. Innerhalb eines Style-Sheet-Containers existiert über das neue document-Objekt für jedes Element der Webseite ein eigenes Objekt mit verschiedenen Formatinformationen und Kennzeichnungen. Außerhalb des Style-Sheet-Containers wirkt das alte document-Objekt weiter.

Die Konzeption von Microsoft hingegen stellt zur Unterstützung der DOM- Philosophie ab dem Internet Explorer 4.0 ein eigenes Objekt zur Verfügung (das Objekt all), das bereits überall (nicht nur für die Bereiche der Style Sheets) in der Webseite den Zugang auf sämtliche Inhalte der Seite erlaubt. Das DOM-Modell von Microsoft kann mittlerweile sowohl über VBScript als auch JavaScript angesprochen werden und beinhaltet zudem - im Gegensatz zu dem Netscape-Modell - eine konkrete und weitgehend vollständige Ereignisbehandlung für sämtliche (!) eigenständigen Elemente einer Webseite. Netscape beschränkt die Ereignisbehandlung auf DOM- Ebene wie angedeutet auf wenige ausgewählte Objekte.

Zusammenfassend kann man sich unter DOM die eigenständige Behandlung von Elementen einer Webseite in Verbindung mit Scripten und Style Sheets im Rahmen einer HTML-Seite vorstellen.

Dynamic-HTML

Dynamic-HTML oder DHTML ist ein Begriff, der eng mit dem direkt zuvor beschriebenen DOM zusammenhängt. Teilweise werden DOM und Dynamic-HTML synonym verwendet. Der Begriff ist jedoch weder eindeutig, noch standardisiert oder sonstwie geschützt. Insbesondere legen verschiedene Interessengruppen den Begriff unterschiedlich aus. Es gibt überdies verschiedene Schreibweisen, die aber alle im Wesentlichen das Gleiche meinen. Microsoft schreibt seine Variante Dynamic HTML (mit großem D), Netscape dagegen dynamic HTML (mit kleinem d). Bei aller Differenz in der konkreten Auslegung - die wichtigsten Protagonisten im Internet verstehen unter dynamischem HTML die Veränderungen einer Webseite, nachdem die Seite bereits beim Client (also im Browser) angelangt ist.

Wenn nun unter dem DOM-Konzept (welches ja sowohl Netscape als auch Microsoft - wenn auch technisch unterschiedlich - unterstützen) temporär alle notwendigen Daten gespeichert sind, um Elemente einer im Browser geladenen Webseite wiederzufinden, können diese Komponenten angesprochen, ausgewertet oder verändert werden.

Das document-Objekt

Das document-Objekt ist sicher eines der in dem Buch am meisten explizit verwendeten Objekte. Es ist die Repräsentation der verschiedenen ansprechbaren Elemente einer Webseite und besonders deshalb für uns wichtig, weil darüber die Möglichkeit besteht, HTML-formatierten Text in das angezeigte Dokument über Scripte zu schreiben. Es ist also die Basis für dynamisch generierten Text. In der Objekthierarchie von JavaScript liegt das Objekt unterhalb des window-Objekts und enthält die Unterobjekte all (nur Internet Explorer), anchors, applets, embeds, forms, images, layers (nur Netscape Navigator), links und plugins (dies ist jedoch teilweise Browser-abhängig). Eine Objektinstanz von document wird automatisch erzeugt, wenn der Browser einen einleitenden <BODY>-Tag in der HTML- Datei vorfindet.

Sowohl das Objektfeld forms als auch das von einigen document-Eigenschaften und -Methoden generierte Style-Objekt behandeln wir gesondert an den nächsten beiden Tagen.

Das Objekt document besitzt über die Unterobjekte hinaus diverse Eigenschaften, die sowohl abzufragen als auch teilweise zu ändern sind. In der nachfolgenden Tabelle finden Sie die Eigenschaften, die aber nicht konsequent in allen Browsern unterstützt werden (da hilft oft nur testen, was ja allgemein eine Notwendigkeit ist).

Eigenschaften

Eigenschaft

Beschreibung

alinkColor

Die Farbe für Verweise zu bereits besuchten Verweiszielen, wie sie bei der Zusatzangabe alink im <BODY>-Tag oder vom Anwender in seinen Browser-Einstellungen festgelegt wurde.

all

Über dieses Unterobjekt hat man Zugriff auf sämtliche Inhalte der Webseite (das Objekt gehört allerdings nicht zur offiziell unter JavaScript unterstützten Objektmenge und wird nur beim Microsoft Internet Explorer unterstützt). Das all-Objekt verfügt über Methoden, mit denen Sie beispielsweise sowohl HTML-Tags in eine Webseite dynamisch einfügen als auch entfernen können. Das Objekt besitzt insbesondere selbst ein weiteres Unterobjekt (style), worüber alle Stilinformationen von sämtlichen Elementen in der Webseite abgefragt und meist auch geändert werden können. Dies erfolgt über die Syntax

document.all.tags["(Tagname)"].[index].style.[Eigenschaft/
Methode]

Beispiel:

document.all.tags("H2")[0].style.color

In dem Beispiel sprechen Sie die erste Überschrift der Ordnung 2 in dem Dokument an.

Neben dem Namen können Sie auch wieder über eine ID arbeiten (darauf kommen wir nochmals am letzten Tag bei Style Sheets zu sprechen). Dies funktioniert über die Syntax

document.all.[id].style.[Eigenschaft/Methode]

Die Stil-Eigenschaften vom all-Objekt unterscheiden sich in der Schreibweise ein wenig von der Schreibweise bei den CSS1-Attributen. Dies führt oft zu Fehlern, da es nur geringe Unterschiede sind. Im Allgemeinen gilt, dass der Bindestrich bei CSS1-Attributen bei den Eigenschaften des all-Objekts entfällt und der nachfolgende Buchstabe groß zu schreiben ist (Groß- und Kleinschreibung ist zu beachten)

Beispiele:

aus font-size wird fontSize,

aus background-color wird backgroundColor

aus text-align wird textAlign.

Wenn man diese Regel einhält, werden in den meisten Fällen die Eigenschaften des all-Objektes direkt aus den CSS1-Attributen herzuleiten sein. Beispiel 5 zeigt das Objekt in einem vollständigen Quelltext.

anchors

Ein Verweisanker-Objektfeld. Mit document.anchors[0] greift man auf den Namen des ersten Verweisankers in der Datei, mit document.anchors[1] auf den Namen des zweiten Verweisankers zu usw. Die Eigenschaft length (die document-Eigenschaft anchors als Objektfeld gesehen hat wiederum selbst Eigenschaften) beinhaltet die Anzahl der in der Datei definierten Verweisanker. Über name und text können Sie den Namen und Text eines Ankers bestimmen, die Eigenschaften x und y sind die Position des Ankers in Pixeln - relativ zur linken oberen Ecke des Dokuments.

applets

Ein Objektfeld für den Zugriff auf Java-Applets in einer HTML-Datei. Ein Objekt hat alle in Java als public deklarierten Eigenschaften als Eigenschaften. Über applets kann u.a. auch die Anzahl der Java-Applets in einer Webseite bestimmt werden.

bgColor

Angabe der Hintergrundfarbe der HTML-Datei, wie sie bei der Zusatzangabe bgcolor im <BODY>-Tag oder vom Anwender in seinen Browser-Einstellungen festgelegt wurde.

classes

Die Eigenschaft kreiert ein Style-Objekt, worüber die Stilangaben eines HTML-Tags mit Hilfe des dort angegebenen class-
Attributs spezifiziert werden können. Syntax:

document.classes.[className].[tagName]

Die Angabe className ist der Wert von dem class-Attribut und tagName der Name von einem beliebigen HTML-Tag, beispielsweise H5 oder P. Wenn der Wert von tagName als all gesetzt wird, werden darüber sämtliche HTML-Tags referenziert.

cookie

Eine Eigenschaft für die Cookie-Verwaltung.

embeds

Ein Array, das als Einträge jedes PlugIn in dem Dokument enthält.

fgColor

Die Textvordergrundfarbe der HTML-Datei, wie sie bei der Zusatzangabe text im <BODY>-Tag oder vom Anwender in seinen Browser-Einstellungen festgelegt wurde.

formName

Für jedes benannte Formular in einem Dokument wird eine eigene Eigenschaft erstellt. Der Name von dieser Eigenschaft ist der Wert von dem HTML-name-Attribut.

forms

Ein Objektfeld für den Zugriff auf die Formulare, welche innerhalb der HTML-Datei definiert wurden. Mit document.forms[0] erfolgt der Zugriff auf das erste Formular usw. Die Eigenschaft length (die document-Eigenschaft forms als Objektfeld gesehen hat wiederum selbst Eigenschaften) beinhaltet die Anzahl der in der Datei definierten Formulare.

height

Höhe des Dokuments in Pixeln.

ids

Die Eigenschaft kreiert ein Style-Objekt, worüber die Stilangaben eines HTML-Tags mit Hilfe des dort angegebenen id-Attributs spezifiziert werden können. Syntax:

document.ids.[idWert]

images

Ein Array, das die Bilder der Webseite als Elemente enthält. Das Objektfeld hat selbst die Eigenschaft

complete,

ein Boolean-Wert der anzeigt, ob ein Bild komplett geladen ist. Dazu gibt es die Eigenschaften

border

height

hspace

lowsrc

name

src

vspace

width

was jeweils den gleichnamigen HTML-Attributen bei dem Tag entspricht. Wichtig für viele Einsätze bei der Arbeit mit Bildern ist auch die direkte Verwendung des Image()-Konstruktors zur Erstellung von Bildobjekten. Darüber kann explizit ein Bild geladen werden, das nicht sofort in der Webseite angezeigt wird. Dazu finden Sie mehr in Beispiel 9 und 10.

lastModified

Datum und Uhrzeit der letzten Änderung der Datei im internationalen Format nach GMT (Greenwhich-Zeit).

layers

Ein Array, das jeden Layer der Webseite als Elemente enthält (nur Netscape).

linkColor

Angabe der Farbe für Verweise zu noch nicht besuchten Verweiszeilen, wie sie bei der Zusatzangabe link im <BODY>-Tag oder vom Anwender in seinen Browser-Einstellungen festgelegt wurde.

links

Ein Objektfeld für den Zugriff auf Verweise, die innerhalb der HTML-Datei definiert wurden. Mit document.links[0] erfolgt der Zugriff auf den ersten Link usw. Die Eigenschaft length (die document-Eigenschaft links als Objektfeld gesehen hat wiederum selbst Eigenschaften) beinhaltet die Anzahl der in der Datei definierten Verweise. Das Objektfeld hat selbst die Eigenschaften

hash

host

hostname

href

pathname

port

protocol

search

die identisch mit den gleichnamigen Eigenschaften des location-Objekts sind sowie die Eigenschaften

target

für die gleichnamige HTML-Angabe,

text

für den Inhalt des korrespondierenden <A>-Tags und die Eigenschaften x und y mit der Position des Links in Pixeln - relativ zur linken oberen Ecke des Dokuments.

location

Der vollständige URL der HTML-Datei. Die Eigenschaft gilt als deprecated und wurde durch document.URL ersetzt.

plugins

Ein Array, das jedes PlugIn der Webseite als Elemente enthält.

referrer

Der URL der HTML-Datei, von der aus die aktuelle HTML-Datei aufgerufen wurde, als String.

tags

Die Eigenschaft kreiert ein Style-Objekt, worüber die Stilangaben eines HTML-Tags spezifiziert werden können.

Syntax:

document.tags.[tagName]

Dabei ist tagName der Name eines beliebigen HTML-Tags, beispielsweise H1 oder BLOCKQUOTE.

title

Der Titel der HTML-Datei, wie er bei <TITLE> angegeben ist.

URL

Der vollständige URL der HTML-Datei (die Ablösung von
location).

vlinkColor

Farbe für Verweise zu bereits besuchten Verweiszeilen, wie sie bei der Zusatzangabe vlink im <BODY>-Tag oder vom Anwender in seinen Browser-Einstellungen festgelegt wurde.

width

Die Breite des Dokuments.

Tabelle 19.1: Eigenschaften von document

Methoden

Die wichtigsten Methoden von dem Objekt document dürften die zum Schreiben in die Seite und dem Behandeln von Ereignissen sein. Das Objekt document besitzt aber noch mehr interessante Methoden:

Methoden

Beschreibung

captureEvents()

Überwacht im Rahmen des globalen Ereignisbehandlungsmodells Anwenderereignisse innerhalb des Dokumentfensters. Ereignisse außerhalb (beispielsweise Titelleiste, Menüleisten) werden nicht überwacht (wird nur von Netscape verstanden).

close()

Hiermit wird ein Dokument geschlossen. Dies erzwingt die sofortige Anzeige der bis dahin vorhandenen Daten. Man verwendet diese Methode normalerweise in Verbindung mit document.open().

contextual(

context1,
...[contextN,]
affectedStyle)

Die Methode spezifiziert den Stil eines einzelnen HTML-Tags, wobei man verschiedene Tags schachteln kann, sodass nur die so verschachtelten Tags betroffen sind. Die
Parameter sind über die oben genannten Eigenschaften spezifizierte HTML-Tags, denen eine bestimmte Stilinformation zugewiesen wird. Etwa wird so jedem EM-Tag innerhalb einer H1-Überschrift die Farbe Blau zugewiesen:.

<STYLE TYPE="text/JavaScript">
contextual(document.tags.H1,
document.tags.EM).color="blue";
</STYLE>

Auch ohne den <STYLE>-Container kann man die Methode nutzen. Dann verwendet man wie den <SCRIPT>-Container:

<SCRIPT LANGUAGE="JavaScript1.2">
document.contextual(document.tags.H1,
document.tags.EM).color="blue";
</SCRIPT>

Mehr dazu finden Sie in Beispiel 3 und 4.

getSelection()

Ermittelt, welchen Text ein Anwender im Dokument selektiert hat, und gibt den Inhalt als String zurück.

handleEvent()

Im Rahmen des globalen Ereignisbehandlungsmodells Übergabe eines Ereignisses an ein Element, das in der Lage ist, auf das Ereignis zu reagieren (wird nur von Netscape verstanden)

open()

Die Methode öffnet ein Dokument zum Schreiben. Optional kann der Dateityp als Mime-Typ-Parameter übergeben werden. Erlaubt sind die Angaben text/html, text/plain, image/gif, image/jpeg, image/x-bitmap oder diverse PlugIn-Typen.

releaseEvents()

Veranlasst das Fenster oder das Dokument, aufgefangene Events des angegebenen Typs entlang der Objekthierarchie weiterzureichen.

routeEvent()

Weiterleitung eines Events.

write(), writeln()

Schreiben von HTML-formatiertem Text in das Dokumentfenster. Im Unterschied zu write() wird bei writeln() noch ein Zeilenumbruchzeichen am Ende eingefügt. Bitte beachten Sie, dass dies in einem HTML-Dokument keinen Zeilenumbruch bewirkt.

Tabelle 19.2: Methoden von document

Praktischer Einsatz von document

Da das document-Objekt so grundlegend für die Verbindung von den Elementen der Webseite und JavaScript ist, soll in diesem Abschnitt eine größere Anzahl an praktischen Beispielen mit dem document-Objekt und seinen Unterobjekten, Eigenschaften und Methoden durchexerziert werden.

Beispiel 1:

Das erste Beispiel testet diverse Eigenschaften vom document-Objekt, die Eigenschaften von HTML-Elementen aus der Webseite abfragen. Beachten Sie, dass wir diese Informationen über alert() ausgeben. Damit dort nur definierte Zeilenumbrüche entstehen, wird das Sonderzeichen \n für einen Umbruch im Mitteilungsfenster verwendet. Außerdem wird das Script im Bodybereich ganz am Ende notiert. Das ist ein sinnvoller Trick, wenn man auf Elemente in einer Webseite zugreifen möchte und diese vor einer Ausführung des Scripts vorhanden sein müssen (Doc1.htm):

<HTML>
<HEAD>
<TITLE>Meine Homepage</TITLE>
</HEAD>
<BODY TEXT="#001100" BGCOLOR="#EEFFFF"
LINK="#FF0000"
ALINK="#FFF000" VLINK="#FFAA00">
<A NAME="Anfang">
<H1>
Willkommen
</H1>
</A>
<applet
code=UhrApplet.class
width=100
height=80 >
</applet>
<A NAME="Ende">
<H4>
Hier ist das Ende erreicht
</H4>
</A>
<SCRIPT LANGUAGE="JavaScript">
var text =
"alinkColor: " + document.alinkColor+
"\nanchors[0].name: " + document.anchors[0].name+
"\nanchors[0].text: " + document.anchors[0].text+
"\nanchors[0].x: " + document.anchors[0].x+
"\nanchors[0].y: " + document.anchors[0].y+
"\nanchors[1].name: " + document.anchors[1].name+
"\nanchors[1].text: " + document.anchors[1].text+
"\nanchors[1].x: " + document.anchors[1].x+
"\nanchors[1].y: " + document.anchors[1].y+
"\napplets: " + document.applets+
"\nbgColor: " + document.bgColor+
"\nfgColor: " + document.fgColor+
"\nheight: " + document.height+
"\nlastModified: " + document.lastModified+
"\nlinkColor: " + document.linkColor+
"\ntitle: " + document.title+
"\nvlinkColor: " + document.vlinkColor+
"\nwidth: " + document.width;
alert(text);
</SCRIPT>
</BODY>
</HTML>

Abbildung 19.1:  Details der Webseite beim IE

Abbildung 19.2:  Details der Webseite beim Navi-gator

Laden Sie die Webseite in verschiedene Browser. Sie werden sehen, dass nicht alle Eigenschaften unterstützt werden.

Beispiel 2:

Das zweite Beispiel geht nun den umgekehrten Weg wie Beispiel 1 und setzt über das document-Objekt einige Eigenschaften der Webseite. Hier funktioniert im Navigator nicht alles (doc2.htm):

<HTML>
<SCRIPT LANGUAGE="JavaScript">
function lade()
{
document.bgColor = "red";
document.fgColor = "white";
document.title = "Meine Homepage";
}
</SCRIPT>
<BODY onLoad="lade()">
<H1>
Willkommen
</H1>
<H4>
Hier ist das Ende erreicht
</H4>
</BODY>
</HTML>

Abbildung 19.3:  Der Navigator setzt weder Titel noch Vordergrundfarbe

Abbildung 19.4:  Der Internet Explorer kann es

Beispiel 3:

Das dritte Beispiel soll den Einsatz der Methode contextual() in Verbindung mit dem <STYLE>-Container zeigen (doc3.htm):

<HTML>
<STYLE TYPE="text/JavaScript">
contextual(document.tags.H1,
document.tags.EM).color="yellow";
</STYLE>
<BODY>
<H1>Willkommen <EM>AUF MEINER</EM> Homepage
</H1>
<EM>Dat is normales em
</EM>
<H1>Hier ist das Ende erreicht
</H1>
</BODY>
</HTML>

Abbildung 19.5:  In der Überschrift ist der  Tag verändert

Beispiel 4:

Beispiel vier demonstriert contextual() in Verbindung mit dem <SCRIPT>- Container und dem Einsatz der tags-Eigenschaft (doc4.htm):

<HTML>
<SCRIPT LANGUAGE="JavaScript1.2">
document.contextual(document.tags.DIV, document.tags.I).color="yellow";
</SCRIPT>
<BODY>
<H1>Willkommen <I>AUF MEINER</I> Homepage
</H1>
<DIV>
DIV oder nicht DIV, <I>das ist hier die Farbe</I>.
</DIV>
</BODY>
</HTML>

Abbildung 19.6:  In DIV-Bereich ist der Tag verändert



Beispiel 5:

Wir wollen nun das Microsoft-spezifische Objekt all in der Praxis testen. Erstellen Sie dazu die Datei Dok5.htm:

<HTML>
<SCRIPT LANGUAGE="JavaScript">
function lade()
{
document.all.tags("h1")[0].style.color="red";
document.all.tags("h1")[1].style.color="blue";
document.all.tags("h3")[0].style.color="yellow";
document.all.tags("BODY")[0].style.backgroundColor=
"cyan";
document.all.tags("SPAN")[0].style.fontStyle="italic";
document.all.tags("DIV")[0].style.fontSize="44";
}
</SCRIPT>
<BODY onLoad="lade()">
<CENTER>
<H1>Willkommen
</H1>
<H3>auf
</H3>
<H1>meiner
</H1>
<H1>Homepage
</H1>
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
<DIV>DIVDIDIV DIVDIDIV
</DIV>
<SPAN>SPANSPAN SPAN SPANSPAN
</SPAN>
<BR>
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
<H3>Hier ist das Ende erreicht
</H3>
</CENTER>
</BODY>
</HTML>

Laden Sie die Datei in verschiedene Browser. Der Navigator wird sich sehr pikiert zeigen, einen Fehler melden und nur HTML-formatierten Text anzeigen.

Abbildung 19.7:  Wer kann, der kann

Abbildung 19.8:  Ignoranz und deutliche Abscheu in der Statuszeile

Der Internet Explorer wird in Formatierungen schwelgen.

Beispiel 6:

In diesem Beispiel wird die Verwendung des images[]-Arrays demonstriert. Es wird dazu verwendet, nach dem Laden von verschiedenen Bildern einige ihrer Eigenschaften abzufragen und auszugeben (doc6.htm):

<HTML>
<BODY>
<IMG src="1.gif">
<br>
<IMG src="2.gif">
<br>
<IMG src="3.gif">
<br>
<IMG src="4.gif">
<br>
<IMG src="5.gif">
<br>
<IMG src="6.gif">
<br>
<SCRIPT LANGUAGE="JavaScript">
var text =
"Bild 1: " + document.images[0].height +
" " + document.images[0].width +
" " + document.images[0].src +
"\nBild 2: " + document.images[1].height +
" " + document.images[1].width +
" " + document.images[1].src +
"\nBild 3: " + document.images[2].height +
" " + document.images[2].width +
" " + document.images[2].src +
"\nBild 4: " + document.images[3].height +
" " + document.images[3].width +
" " + document.images[3].src +
"\nBild 5: " + document.images[4].height +
" " + document.images[4].width +
" " + document.images[4].src +
"\nBild 6: " + document.images[5].height +
" " + document.images[5].width +
" " + document.images[5].src;
alert(text);
</SCRIPT>
</BODY>
</HTML>

Abbildung 19.9:  Informationen zu den Bildern

Beispiel 7:

Beispiel 7 soll das Setzen der Eigenschaften von Bildern in der Webseite über die Verwendung des images[]-Array veranschaulichen (doc7.htm):

<HTML>
<SCRIPT LANGUAGE="JavaScript">
function lade()
{
for(i=0;i<6;i++)
{
document.images[i].border = "5";
document.images[i].height = "50";
}
}
</SCRIPT>
<BODY>
<IMG src="1.gif">
<br>
<IMG src="2.gif">
<br>
<IMG src="3.gif">
<br>
<IMG src="4.gif">
<br>
<IMG src="5.gif">
<br>
<IMG src="6.gif">
<br>
<FORM>
<INPUT type="Button" value="Klick" onClick="lade()">
</FORM>
</BODY>
</HTML>

Beachten Sie den Zugriff auf die Array-Elemente mit der for-Schleife (siehe Abbildung 19.10).

Abbildung 19.10:  Vor dem Klick im IE

Laden Sie die Datei in den Internet Explorer und klicken Sie auf die Schaltfläche im Formular (siehe Abbildung 19.11).

Abbildung 19.11:  Nach dem Klick im IE

Der Navigator wird mit dem Beispiel Probleme haben und die Grafiken nicht verändern.

Bei der Arbeit mit Bildern und Stilinformationen wird man mit document schnell an Grenzen stoßen und mit fehlender Unterstützung in Browsern zu kämpfen haben. Grundsätzlich bietet sich dann an, auf Style Sheets auszuweichen. Das werden wir an Tag 21 machen.

Beispiel 8:

Beispiel 8 überschreibt über die src-Eigenschaft von images Bilder von links nach rechts in dem Array. Die Anzahl der Bilder wird über document.images.length aus JavaScript heraus bestimmt (Doc8.htm):

<HTML>
<SCRIPT LANGUAGE="JavaScript">
var meineBilder= new Array();
function lade()
{
for(i=0;i<document.images.length;i++)
{
document.images[i].height = "75";
}
}

function tausche()
{
for(i=0;i<document.images.length-1;i++)
{
document.images[i].src = document.images[i+1].src;
}
}
</SCRIPT>
<BODY onLoad="lade()">
<IMG src="1.gif">
<IMG src="2.gif">
<IMG src="3.gif">
<IMG src="4.gif">
<IMG src="5.gif">
<IMG src="6.gif">
<br>
<FORM>
<INPUT type="Button" value="Klick" onClick="tausche()">
</FORM>
</BODY>
</HTML>

Laden Sie die Datei in einen Browser und klicken Sie auf die Schaltfläche im Formular.

Abbildung 19.12:  Vor dem Klick  im IE

Eine Permutation, in der das erste Bild bei einem Klick auf die letzte Position geschoben wird, ist mit diesem Aufbau nicht möglich. Es werden nur Referenzen auf Array-Einträge kopiert und ein Array-Eintrag geht bei jeder Aktion als eigenständige Referenz auf ein Bild verloren. Für so was wie eine Permutation werden wir aber auch noch eine Lösung sehen. Und zwar mit dem Ansatz, den das nächste Beispiel verfolgt - unter der Verwendung von Image selbst.

Abbildung 19.13:  Der Kürbis frisst sie alle

Beispiel 9:

In der nachfolgende Webseite wird erstmals nur ein einziges Bild angezeigt. Dieses steht dann in document.images[0].src zur Verfügung. Das Array- Element wird über das Script dynamisch mit verschiedenen Inhalten gefüllt. Hier verwenden wir explizit Image selbst, um über dessen Konstruktor Bild- Objekte zu erstellen und diesen Bilder zuzuweisen. Diese werden einem Array zugeordnet, bereits im Hintergrund geladen und erst dann aufgerufen, wenn Bedarf besteht, d.h. unter JavaScript eine Situation geschaffen wird, die ein bestimmtes Bild document.images[0].src zuweist (Doc9.htm):

<HTML>
<SCRIPT LANGUAGE="JavaScript">
var meineBilder = new Array();
var zaehler = 0;
meineBilder[0] = new Image();
meineBilder[1] = new Image();
meineBilder[2] = new Image();
meineBilder[3] = new Image();
meineBilder[4] = new Image();
meineBilder[5] = new Image();

function lade()
{
document.images[0].height = "75";
meineBilder[0].src="1.gif";
meineBilder[1].src="2.gif";
meineBilder[2].src="3.gif";
meineBilder[3].src="4.gif";
meineBilder[4].src="5.gif";
meineBilder[5].src="6.gif";
zaehler=1;
}
function tausche()
{
document.images[0].src = meineBilder[zaehler].src;
if(zaehler<5)
{
zaehler=zaehler + 1;
}
else
{
zaehler=0;
}
}
</SCRIPT>
<BODY onLoad="lade()">
<IMG src="1.gif" height=75>
<br>
<FORM>
<INPUT type="Button" value="Klick" onClick="tausche()">
</FORM>
</BODY>
</HTML>

Laden Sie die Datei in einen Browser und klicken Sie mehrfach auf die Schaltfläche im Formular.

Abbildung 19.14:  Vor dem Klick

Hier haben wir eine Permutation auf einer Bildposition, in der der Reihe nach die geladenen Bilder angezeigt werden. Vom letzten Bild geht es wieder zum ersten.

Abbildung 19.15:  Und noch ein paar Klicks weiter

Abbildung 19.16:  Ein paar Klicks weiter

Beispiel 10:

Abschließend zu diesem Bilder-Thema wollen wir noch eine Animation auf dieser Basis und die Veränderung eines Bilds beim Überstreichen mit dem Mauszeiger demonstrieren. Letzteres ist die für die Anwendung von JavaScript schon fast berühmte Technik, beispielsweise einen Hyperlink - wie in dem Beispiel - beim Überstreichen mit der Maus mit einem anderen Bild zu versehen und damit eine Zusatzinformation zu verbinden. Bei dem Beispiel greifen wir für die Animation auf die Rekursion über window.setTimeout() und onMouseOver bzw. onMouseOut bei der Veränderung des grafischen Hyperlinks zurück (Doc10.htm):

<HTML>
<SCRIPT LANGUAGE="JavaScript">
var meineBilder = new Array();
var zaehler = 0;
meineBilder[0] = new Image();
meineBilder[1] = new Image();
meineBilder[2] = new Image();
meineBilder[3] = new Image();
meineBilder[4] = new Image();
meineBilder[5] = new Image();

function lade()
{
document.images[0].height = "75";
meineBilder[0].src="1.gif";
meineBilder[1].src="2.gif";
meineBilder[2].src="3.gif";
meineBilder[3].src="4.gif";
meineBilder[4].src="5.gif";
meineBilder[5].src="6.gif";
zaehler=1;
}

function tausche()
{
document.images[0].src = meineBilder[zaehler].src;
if(zaehler<5)
{
zaehler=zaehler + 1;
}
else
{
zaehler=0;
}
ani();
}

function rein()
{
document.images[1].src = meineBilder[4].src;
}
function raus()
{
document.images[1].src = meineBilder[2].src;
}

function ani()
{
setTimeout('tausche()',250);
}

</SCRIPT>
<BODY onLoad="lade()">
<CENTER>
<IMG src="1.gif" height=75>
<P>
<A href="JavaScript:ani()"
onMouseOver="rein()" onMouseOut="raus()">
<IMG src="3.gif" height=50 border=0>
</A>
</CENTER>
</BODY>
</HTML>

Laden Sie die Datei in einen Browser und bewegen Sie den Mauszeiger auf die untere Grafik. Eine zweite Grafik wird an ihrer Stelle angezeigt. Klicken Sie darauf, und die Animation wird gestartet.

Abbildung 19.17:  Mauszeiger außerhalb des Links

Hier haben wir eine Permutation auf einer Bildposition, in der der Reihe nach die geladenen Bilder angezeigt werden. Vom letzten Bild geht es wieder zum ersten.

Abbildung 19.18:  Mauszeiger innerhalb des Links. Zudem  läuft die Animation

Cookies

Dieses abschließende Thema soll das Cookie-Handling über das document- Objekt skizzieren. Ein Cookie ist immer eine kleine Textinformation, welche von einem Browser in ein im Browser vorgegebenes Verzeichnis geschrieben und von dort wieder ausgelesen werden kann. Internet Explorer und Netscape Naviagtor gehen dabei zwar einen etwas unterschiedlichen Weg bezüglich der konkreten Dateien. Der Navigator speichert normalerweise alle Einträge in einer einzigen Datei namens cookies.txt in dem im Browser dafür vorgesehenen Verzeichnis. Der Internet Explorer erstellt dagegen gewöhnlich für jedes Cookie eine eigene Datei im Cookies-Verzeichnis von Windows. Dabei können in der Regel maximal 20 davon verwaltet werden. Für deren Verwaltung ist die dort zu findende Datei index.dat zuständig.

Ausnahmsweise spielt aber diese unterschiedliche Handhabung auf Dateiebene für die Vorgehensweise unter JavaScript keine Rolle. Grundsätzlich kann ein Cookie mit document.cookie gesetzt werden. Ergänzend muss man für verschiedene Operationen auf String-Methoden wie substring(), charAt(), indexOf() oder lastIndexOf() zurückgreifen.

Generell besteht ein Cookie mindestens aus der Angabe des Namens und einer Wertzuweisung. Über den Bezeichner wird beim Auslesen ein Cookie wieder identifiziert. Der zugewiesene Wert ist die Information, welche man eigentlich speichern möchte. Eine wichtige optionale Eigenschaft ist die expires-Eigenschaft, mit der ein Gültigkeitsdatum eines Cookies gesetzt werden kann. Das Format:

Wdy, DD-Mon-YY HH:MM:SS GMT

Wdy ist eine String-Repräsentation des Tags der Woche (englisch), DD zweistellig der Monatstag, Mon eine aus drei Buchstaben bestehende String- Repräsentation des Monats (englisch) und YY das zweistellige Jahr. HH, MM, und SS sind zweistellige Angaben für die Stunden, Minuten und Sekunden (optional).

Beispiel:

expires=Wednesday, 09-Nov-01 20:15:40 GMT

Weitere optionale Eigenschaften sind domain, worüber der URL der Domain als String spezifiziert werden kann, für welche ein Cookie gültig ist, path zur Angabe von Verzeichnissen innerhalb dieser Domain (fehlt die Angabe, wird der Pfad des aktuellen Dokumentes angenommen) und secure als Boolean-Wert zur Festlegung, dass ein Cookie nur über einen sicheren (d.h. verschlüsselten) Pfad übertragen werden darf.

Die an die cookie-Eigenschaft von document zu übergebende Zeichenkette muss die gewünschten Angaben als durch Parameter getrennte Werte enthalten. Soweit ist es also ganz einfach, ein Cookie zu setzen. Etwa über

document.cookie = "meinCookie=123";

Oder wenn ein Haltbarkeitsdatum gesetzt werden soll:

document.cookie = 
"meinCookie=123; expires=Wednesday, 09-Nov-01 20:15:40 GMT";

Leider ist es nicht ganz so einfach, wenn man komplexere Informationen in einem Cookie speichern und wieder auslesen möchte. JavaScript bietet da erst einmal keine große Unterstützung. Cookie-Werte dürfen beispielsweise keine Leerzeichen und keine Sonderzeichen enthalten. Deshalb müssen solche Zeichen mit der Funktion escape()beim Schreiben maskiert und mit unescape() beim Lesen wieder entschlüsselt werden. Des Weiteren müssen verschiedene Aktionen wie das Bestimmen der Länge eines Wertes oder das Trennen an bestimmten Zeichen im String durchgeführt werden. Gott sei Dank muss das unter JavaScript nicht alles neu programmiert werden - man greift auf einen Satz von freien Funktionen für das Cookie- Management zurück, die ein Programmierer namens Bill Dortch entwickelt hat und unter http://www. hidaho.com/cookies kostenlos bereitgestellt werden. Mit dessen Funktionen

SetCookie(name,value,expires,path,domain,secure)

und

GetCookie(name)

zum Setzen und Lesen von beliebigen Angaben ist das Cookie- Management dann wirklich eine Kleinigkeit. Die zusätzliche Funktion

DeleteCookie(name,path,domain)

erlaubt das Löschen eines Cookies, indem das Verfalldatum auf den 1. Januar 1970 gesetzt wird. (Ein Trick, der eine Eigenschaft von Cookies ausnutzt.)

Zusammenfassung

Der Tag hat mit einem kleinen Exkurs zu dem DOM-Konzept und zu Dynamic HTML begonnen, welcher für das Verständnis von vielen Vorgängen im Zusammenhang mit dem Objekt document, seinen zahlreichen Eigenschaften (von denen viele selbst wiederum Objekte sind) und Methoden grundlegend ist. Grundsätzlich werden die Elemente einer Webseite über Objekt document und seine Unterobjekte repräsentiert. Von einfachen HTML-Formatierungsanweisungen über Bilder, PlugIns, Applets, Formulare hin zu Cookies.

Grundlage für den Zugriff auf eine Webseite unter dem Objekt- Gesichtspunkt ist das Document Object Model, in dem eine HTML-Seite nicht als statisch aufgebaute, fertige und nicht unterscheidbare Einheit, sondern als differenzierbare Struktur betrachtet wird. Dies ermöglicht die Behandlung von Bestandteilen der Webseite auch dann, wenn die Webseite bereits in den Browser geladen ist. Es ist auch die Basis dessen, was unter dynamischem HTML zu verstehen ist - die Veränderungen einer Webseite, nachdem die Seite bereits beim Client (also im Browser) angelangt ist.

Fragen und Antworten

Frage:
Formulare werden doch auch über das Objekt document angesprochen. Was ist damit?

Antwort:
Dazu kommen wir morgen in einem eigenständigen Kapitel.

Frage:
Wenn man mit dem Objekt document bereits so viele Dinge gestalten und auch dynamisch nach dem Laden einer Webseite verändern kann, wofür spricht dann noch der Einsatz von Style Sheets?

Antwort:
Style Sheets bieten einige entscheidende Vorteile. Da ist einmal die Trennung der Logik. Stilinformationen werden vollkommen separiert. Außerdem kann man mit Style Sheets noch viel mehr machen, als nur mit JavaScript und dem document-Objekt. Zu guter Letzt werden Style Sheets auch einheitlicher in den Browsern gehandhabt (wenngleich noch immer nicht perfekt).

Workshop

Erweitern Sie Beispiele um die Eigenschaften, welche nicht explizit durchgespielt wurden.

Nehmen Sie sich die Beispiele vor, in denen Eigenschaften beim Laden einer Webseite über JavaScript und document-Eigenschaften gesetzt wurden, und erweitern Sie diese Beispiele so, dass über Anwenderaktionen (Klick auf Schaltflächen, Hyperlinks, Mausbewegungen usw.) dynamische Veränderungen ausgelöst werden.

Kontrollfragen

Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.

  1. Stimmt das?
    var i = new image();
  2. Für was ist DOM die Abkürzung?
  3. Für was ist JSSS die Abkürzung?
  4. Was passiert im Netscape Navigator, wenn er das Objekt all vorfindet?
  5. Was ist referrer?



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


123

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH