Websiteentwicklung: JavaScript: Objekte: screen, window, document, navigator

Allgemeines

JavaScript stellt viele Objekte von vornherein fertig zur Verfügung, beispielsweise:

Zweck bzw. repräsentierter Gegenstand	Objektname
Browser-Fenster	window
HTML-Dokumente	document
mathematische Berechnungen	Math oder Number
Zeichenkettenbehandlung	String
Arrays	Array
Ereignisbehandlung	Event Handling

In diesem Kapitel werden die Objekte zum Bildschirm, zu Fenstern und über den gerade verwendeten Webbrowser behandelt; das nächste Kapitel geht ein auf die Behandlung von booleschen Werten, Tagesdaten und Zahlen; darauf folgt je ein gesondertes Kapitel für die Objekte Math, String, Array und Event Handling.

Bildschirm / Screen

Das Objekt „Screen“ repräsentiert den Bildschirm des Users. Es wird häufig ausgelesen, um die Ausgabeseite der Bildschirmgröße anzupassen. Leider sind die Rückgabewerte des Screen-Objektes nicht immer vollkommen zuverlässig. Die zuverlässigeren Eigenschaften des Window-Objektes sind aber leider nicht bei allen Browsern und manchmal auch nicht auf die gleiche Weise verfügbar.

Das Screen-Objekt verfügt über folgende Eigenschaften:

• width - die Bildschirmbreite
• height - die Bildschirmhöhe
• availWidth - die für das Browserfenster zur Verfügung stehende Breite
• availHeight - die für das Browserfenster zur Verfügung stehende Höhe
• colorDepth - die Farbtiefe

Bildschirmbreite / width

Syntax:

 var iB = screen.width;

Bildschirmhöhe / height

Syntax:

 var iH = screen.height;

Browser-Fensterbreite / availWidth

Syntax:

 var iB = screen.availWidth;

Browser-Fensterhöhe / availHeight

Syntax:

 var iH = screen.availHeight;

Farbtiefe / colorDepth

Dieses Kapitel bzw. dieser Abschnitt wird durch intensive Zusammenarbeit sicher schnell besser. Der Hauptautor freut sich über jeden, der mitmacht. Versucht dich vielleicht nur an den schon vorgegebenen Inhalt und an die Form (bei Listen z.B.) anzupassen. Aber wenn etwas nicht passt, rührt sich der Hauptautor bestimmt. Kaputtmachen kannst du nicht viel – also sei mutig. Danke.

In diesem Wert speichert das Screen-Objekt die Anzahl Bits der Farbinformation pro Pixel. Ein Wert von 8 bedeutet also 2⁸=256 Farben. In Netscape-Browsern kann dieser Wert bei internen Farbpaletten auch in der Eigenschaft „screen.pixelDepth“ gespeichert sein (wird vom Internet-Explorer nicht unterstützt!)

Syntax:

 var Breite = screen.colorDepth;

Fenster / window

Dieses Kapitel bzw. dieser Abschnitt wird durch intensive Zusammenarbeit sicher schnell besser. Der Hauptautor freut sich über jeden, der mitmacht. Versucht dich vielleicht nur an den schon vorgegebenen Inhalt und an die Form (bei Listen z.B.) anzupassen. Aber wenn etwas nicht passt, rührt sich der Hauptautor bestimmt. Kaputtmachen kannst du nicht viel – also sei mutig. Danke.

Das „window“-Objekt ist in der JavaScript-Objekt-Hierarchie das übergeordnete Objekt für alles, was im Browserfenster abgehandelt wird. Es erlaubt vielfältige Abfragen und Festlegungen von Eigenschaften sowie die Neuerzeugung von Dokumenten-Fenstern. Die Methoden und Eigenschaften des aktuellen Fensters können über „window.Eigenschaft/Methode“ oder „self.Eigenschaft/Methode“ angesprochen werden. Wenn - wie z. B. im Falle von Frames - mehrere Fenster verwaltet werden, müssen entweder Objektnamen oder hierarchische Begriffe wie „top“ oder „parent“ verwendet werden.

Von den vielfältigen Methoden und Eigenschaften soll hier nur ein Ausschnitt dargestellt werden, um das Fensterhandling allgemein zu erklären. Ausführlichere Objektreferenzen finden sich unter

• SELFHTML/relativ vollständiger Auszug (deutsch)
• Vollständige JavaScript 1.5 Referenz (engl.)

Drei Methoden des Window-Objektes haben wir bereits im Kapitel Dialogboxen kennengelernt - nämlich jene zur Erzeugung modaler Fenster (Dialogboxen) mit

• alert(),
• confirm() oder
• prompt()

Leider werden viele der Eigenschaften des Window-Objektes vom Internet-Explorer nicht unterstützt:

• innerheight - die Höhe des inneren Browserfensters
• innerWidth - die Breite des inneren Browserfensters
• outerHeight - die Gesamthöhe des Browserfensters
• outerWidth - die Gesamtbreite des Browserfensters
• pageXOffset - die horizontale Position innerhalb der Seite
• pageYOffset - die vertikale Position innerhalb der Seite

Die folgenden Eigenschaften werden vom „Internet-Explorer“ und „Opera“ nicht unterstützt:

• locationbar - die Adresszeile
• menubar - die Menüleiste
• personalbar - die Favoritenleiste
• scrollbars - Bildlaufleisten
• statusbar - Eigenschaft Statusleiste vorhanden
• toolbar - Werkzeugleiste

Die folgenden Eigenschaften werden von „Internet-Explorer“, „Opera“ und „Firefox“ unterstützt, können aber bei den beiden letztgenannten per Einstellung abgeschaltet werden:

• defaultStatus
• status

Letzlich bleiben 2 Eigenschaften übrig die von allen Browsern unterstützt werden:

• closed - ist true, wenn das mit open() geöffnete Fenster wieder geschlossen wurde (kann nur gelesen werden)
• name - der Name des Fensters (kann gelesen und geändert werden)

Die Verwendung dieser beiden Eigenschaften werden wir bei den Methoden mitbesprechen.

Dokument / document

Das Document-Objekt ermöglicht JavaScript den logischen Zugriff auf alle Elemente eines HTML-Dokuments. Es ist eines der wichtigsten JavaScript-Objekte und wird in diesem Buch in einem eigenen Kapitel behandelt.

history

Das Object „history“ ist mit einer Eigenschaft und drei Methoden ausgestattet. Als direktes Unterobjekt von „window“ kann es auch ohne vorangestelltes „window.“ angesprochen werden. Die korrekte Fensteridentifikation ist jedoch bei mehreren geöffneten Fenstern (z.B. in Framesets) zwingend.

• Eigenschaft
  • length - die Anzahl der besuchten Seiten

• Methoden
  • back() - springt im Verlauf eine Seite zurück
  • forward() - springt wieder vor (nach einem „history.back“)
  • go(n) - springt im Verlauf die mit „n“ angegebene Anzahl von Seiten vor (n > 0) oder zurück (n < 0)

Eigenschaft(en)

Es steht nur eine einzige Eigenschaft (length) zur Verfügung.

length

 var iAnz = history.length;

Methoden

back()

Für das Auslösen des Rückwärtssprunges reicht folgende Syntax:

 history.back();

Sehr beliebt (und entsprechend häufig anzutreffen) ist folgender kurzer Link:

 <a href="javascript:history.back()">zurück zur letzten Seite</a>

forward()

Für das Auslösen des Vorwärtssprunges reicht folgende Syntax:

 history.forward();

Sehr beliebt (und entsprechend häufig anzutreffen) ist folgender kurzer Link:

 <a href="javascript:history.forward()">und wieder vorwärts</a>

go()

Go erwartet einen Parameter als ganze Zahl. Bei positiven Zahlen springt go im Verlauf vor, bei negativen zurück.

 iS=parseInt(prompt("Bitte geben Sie die Anzahl der zu springenden Seiten an: ");
 history.go(iS);

location

Das Objekt „location“ ermöglicht den Zugriff auf den kompletten URL.

Folgende Eigenschaften und Methoden stehen zur Verfügung:

• Eigenschaften
  • href - der komplette URL
  • protocol - das verwendete Protokoll
  • host - Domain-Angabe oder IP-Adresse + Port-Nummer
  • hostname - entweder die Domain-Angabe oder IP-Adresse ohne Port-Nummer
  • port - die Portnummer des Webservers
  • pathname - der Pfad der im Browserfenster angezeigten Datei
  • hash - ein interner Verweis-Anker
  • search - ein Suchbegriff (kann hinter einem ? im URL mitgegeben werden)

• Methoden
  • reload() - lädt die Seite neu
  • replace() - überschreibt den aktuellen URL

Eigenschaften

Da das Objekt „location“ ein direktes Unterobjekt von „window“ ist, kann es normalerweise direkt ohne Angabe von „window“ aufgerufen werden. Lediglich bei mehreren geöffneten Fenster (z.B. in Frames) muss das Fenster spezifiziert werden, das Objekt also mit „window.location“ aufgerufen werden.

href

Die Eigenschaft „href“ kann lesend und schreibend verwendet werden. Beim Lesen erlaubt sie, den URL auszuwerten. Beim Schreiben wird die zugewiesene neue Adresse geladen. Die Kombination aus lesen, dann manipulieren und anschließend schreiben wird häufig verwendet, um eine neue Adresse kontrolliert, dynamisch nachzuladen.

 [window].location.href = "de.wikibooks.org"
 //sucht die Wikibooks-Homepage auf!

protocol

Liest das aktuelle Seitenprotokoll aus. (http:, ftp:, ...)

 var P=[window].location.protocol

host

Gibt die Hostadresse (Domain oder IP-Adresse) und die verwendete Portnummer (wenn diese explizit angegeben wurde) aus. Der HTTP-Standard-Port 80 wird normalerweise nicht ausgegeben.

 var H=[window].location.host

hostname

Gibt die Hostadresse (Domain oder IP-Adresse) ohne die verwendete Portnummer aus.

 var H=[window].location.hostname

port

Gibt die verwendete Portnummer aus (wenn diese explizit angegeben wurde!). Der HTTP-Standard-Port 80 wird normalerweise nicht ausgegeben. Diese Eigenschaft ist änderbar - kann aber Fehler provozieren, wenn der angesprochene Port vom Webserver nicht bedient wird.

 var p=[window].location.port

pathname

Gibt den Dateinamen der aktuellen Seite inklusive Pfad aus. Diese Eigenschaft kann auch schreibend benutzt werden - besser ist aber hier die Verwendung von „href“.

 var P=[window].location.pathname

hash

Gibt ein aktives, internes Verweisziel (mit vorangestelltem „#“) aus. Diese Eigenschaft ist änderbar und bewirkt dann einen Sprung zu dem internen Verweisziel. Auch beim Ändern ist die Raute „#“ (oder Gatter, Nummernzeichen, ...) mit anzugeben.

 var H=[window].location.hash

search

Wenn dem URL beim Aufruf ein „?beliebiger Text“ mitgegeben wurde, enthält „search“ den Teil hinter dem „?“. So kann man z.B. von einer Seite zur nächsten Informationen transportieren und auf der neuen Seite auswerten.

 var s=[window].location.search

Methoden

assign()

lädt eine neue Seite in ein Browserfenster oder einen Frame. Achtung: Dies ist eine Funktion, die nur Browser der Firma Microsoft verstehen, und zwar seit der Version 4.0 des Internet Explorers.

reload()

Die Methode „reload()“ lädt die aktuelle Seite neu. Ruft man die Methode mit dem optionalen Parameter „true“ auf, wird die Seite vom Webserver neu geladen.

replace()

Die Methode „replace()“ überschreibt den aktuellen URL in der History mit dem angegebenen Wert und lädt den neuen Wert. Der alte URL kommt anschließend in der History nicht mehr vor.

Beispiel

Ein kleines Beispiel für das Location-Objekt:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>JavaScript: Das Location-Objekt</title>
    <meta name="description" content="JavaScript: Das Location-Objekt">
    <meta name="author" content="S.Möller">
    <meta name="keywords" content="Titel">
    <script language="JavaScript" type="text/javascript">
        <!--
           function fShowLocation()
              {
              m=""
              m = m + " location.href = " + location.href + "\n";
              m = m + " location.protocol = " + location.protocol + "\n";
              m = m + " location.hostname = " + location.hostname + "\n";
              m = m + " location.host = " + location.host + "\n";
              m = m + " location.port = " + location.port + "\n";
              m = m + " location.pathname = " + location.pathname + "\n";
              m = m + " location.hash = " + location.hash + "\n";
              m = m + " location.search = " + location.search + "\n";
              alert(m);
              }
        //-->
    </script>
    <noscript>Bitte schalten Sie JavaScript ein!</noscript>
  </head>
  <body onLoad="fLocation()">
    <h3>JavaScript: Das Location-Objekt</h3>
    <a href="#aShowLocation">Zuerst hier klicken, um zum unteren Verweis zu springen!</a><br>
        <!-- Viel Platz zum Springen ! -->
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="javascript:fShowLocation()" name="aShowLocation">Dann hier klicken, um das Location-Objekt anzuzeigen</a>
    </form>
  </body>
</html>

Beispiel-Screenshot:

Die Datei wurde explizit mit „Port:80“ und dem angehängten „?Name=Moeller“ aufgerufen.

Browser / Navigator

Das Objekt navigator liefert Informationen über den Browser des Anwenders. Dies kann zum Beispiel dazu dienen, browserspezifischen Code zu schreiben, weil nicht alle Browser alle Objekte kennen bzw. gleichartig behandeln. Häufig wird eine sogenannte Browserweiche eingesetzt, um einen Besucher auf eine Seite zu leiten, die für den von ihm gerade verwendeten Browser gut geeignet ist. Die Angaben können jedoch gelegentlich in die Irre führen, weil einige Web-Browser (z. B. Opera und Firefox) entweder von Haus aus oder über Plugins (wie z. B. Firefox IE-Tab) dazu in der Lage sind, sich als anderes Produkt auszugeben.

Im Objekt navigator sind mehrere Eigenschaften, Methoden und Unterobjekte implementiert.

Eigenschaften + Methoden

Achtung: Nicht alle hier aufgeführten Eigenschaften und Methoden werden von allen Web-Browsern verstanden. Am ältesten und nahezu in jedem Browser auslesbar sind appCodeName, appName, appVersion und userAgent.

Kurze Liste der Eigenschaften und Methoden

Eigenschaften (nur Lesezugriff)

Eigenschaftsname	Kurzbeschreibung
appCodeName	der Projekt- oder Spitzname des Browsers.	genauer erläutert
appName	der Name des Browsers	genauer erläutert
appVersion	die Browser-Version	genauer erläutert
browserLanguage	Microsoft Internet Explorer: die Browser-Sprache	genauer erläutert
cookieEnabled	die Information, ob Cookies erlaubt sind	genauer erläutert
language	Netscape-Browser: die Browser-Sprache	genauer erläutert
platform	die Betriebssystem-Plattform	genauer erläutert
userAgent	die Identifikation des Browsers laut HTTP-Protokoll	genauer erläutert

Methoden

Methodenname	Kurzbeschreibung
javaEnabled()	Wenn vorhanden wird die Java-Virtual-Machine gestartet (deshalb Methode!) und „true" zurückgegeben.

Unterobjekte

Objektname	Kurzbeschreibung
mimeTypes	MIME-Typen	genauer erläutert
plugins	Vorhandene Plug-Ins	genauer erläutert

Anwendungsbeispiel: Eigenschaften lesen

Das Objekt navigator ist direkt verfügbar. Seine Eigenschaften und Methoden können ohne weitere Vorbereitung mit navigator.eigenschaftsName angesprochen werden.

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>JavaScript : Navigator-Object</title>
    <meta name="author" content="S.Möller">
    <script language="JavaScript">
        <!--
           function fShowNavigator()
              {
              m="";
              m=m+"Browser-Name : " + navigator.appName + "\n";
              m=m+"Browser-CodeName : " + navigator.appCodeName + "\n";
              m=m+"Browser-Version : " + navigator.appVersion + "\n";
              m=m+"Betriebs-System : " + navigator.platform + "\n";
              m=m+"Browser-HTTP-String : " + navigator.userAgent + "\n";
              m=m+"Cookies erlaubt : " + navigator.cookieEnabled + "\n";
              var bJava=navigator.javaEnabled()
              m=m+"Java aktiviert : " + bJava + "\n";
              alert(m);
              }
        //-->
    </script>
    <noscript>Bitte schalten Sie JavaScript ein !</noscript>
  </head>
  <body onLoad="fShowNavigator()">
     <h3>JavaScript : Navigator-Object</h3>
  </body>
</html>

Dieses Programm gibt beispielsweise Folgendes auf den Bildschirm:

Ausgabe im Firefox unter Linux	Ausgabe im Konqueror unter Linux

Die Eigenschaften im Einzelnen

Dieses Kapitel bzw. dieser Abschnitt wird durch intensive Zusammenarbeit sicher schnell besser. Der Hauptautor freut sich über jeden, der mitmacht. Versucht dich vielleicht nur an den schon vorgegebenen Inhalt und an die Form (bei Listen z.B.) anzupassen. Aber wenn etwas nicht passt, rührt sich der Hauptautor bestimmt. Kaputtmachen kannst du nicht viel – also sei mutig. Danke.

appCodeName

Die Angabe des Projekt- oder Spitznamens des Web-Browsers ist in der Praxis so gut wie wertlos, da hier sowohl Netscape-Browser als auch Microsoft-Browser den Wert „Mozilla“ abgelegt halten.

appName

der Name des Browsers

appVersion

die Browser-Version

browserLanguage

Achtung: dies ist eine Eigenschaft, die von Microsoft eingeführt wurde, Browser anderer Hersteller verstehen diese Eigenschaft meist nicht, aber stattdessen für den selben Inhalt navigator.language.

cookieEnabled

die Information, ob Cookies erlaubt sind

language

Achtung: dies ist eine proprietäre Eigenschaft, die von Netscape eingeführt wurde, d. h. Microsoft-Browser verstehen diese Eigenschaft nicht, aber stattdessen für den selben Inhalt navigator.browserLanguage.

platform

die Betriebssystem-Plattform

userAgent

die Identifikation des Browsers laut HTTP-Protokoll

Die Methoden im Einzelnen

Dieses Kapitel bzw. dieser Abschnitt wird durch intensive Zusammenarbeit sicher schnell besser. Der Hauptautor freut sich über jeden, der mitmacht. Versucht dich vielleicht nur an den schon vorgegebenen Inhalt und an die Form (bei Listen z.B.) anzupassen. Aber wenn etwas nicht passt, rührt sich der Hauptautor bestimmt. Kaputtmachen kannst du nicht viel – also sei mutig. Danke.

javaEnabled()

Wenn vorhanden wird die Java-Virtual-Machine gestartet (deshalb Methode!) und „true“ zurückgegeben.

Unterobjekte

Die beiden Unterobjekte regeln den Zugriff auf Inhalte, die nicht aus HTML-Dateien bestehen und die Verwaltung von Zusatz-Programmen, die die Fähigkeiten der Browser erweitern.

Mime-Typen / mimeTypes

Der Zugriff auf Multimedia-Dateien wie Bilder, Töne, Videos oder z. B. PDF-Dokumente wird über das Unterobjekt mimeTypes geregelt. „mimeTypes“ ist ein Array und hat folgende Eigenschaften:

• length - die Anzahl der Mime-Typen
• type - die Typenbezeichnung
• description - eine ausführlichere Beschreibung
• suffixes - die mit diesem Typ verknüpften Datei-Endungen
• enabledPlugin - ob eine Plugin für das Handling dieses Typs zur Verfügung steht.

Ein Beispielprogramm verdeutlicht den Zugriff auf dieses Unterobjekt. In einer Schleife werden alle „mimeTypes“ gelistet.

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>JavaScript : Navigator-Object: Mime-Types</title>
    <meta name="author" content="S.Möller">
    <script language="JavaScript">
    <!--
       function fShowMimeTypes()
       {
         document.open();
         document.write('<table>');
         for (var iT = 0; iT < navigator.mimeTypes.length; iT++)
         {
           document.write("<tr>");
           document.write("<td>" + navigator.mimeTypes[iT].type + "<\/td>");
           document.write("<td>" + navigator.mimeTypes[iT].suffixes + "<\/td>");
           document.write("<td>" + navigator.mimeTypes[iT].description + "<\/td>");
           if (navigator.mimeTypes[iT].enabledPlugin)
           {
              document.write("<td>"+navigator.mimeTypes[iT].enabledPlugin+"<\/td>");
           } else {
              document.write("<td>Plugin fehlt<\/td>");
           }
           document.write("<\/tr>");
         }
       document.write("<\/table>");
       document.close();
       }
    //-->
    </script>
    <noscript>Bitte schalten Sie JavaScript ein !</noscript>
  </head>
  <body onLoad="fShowMimeTypes()">
     <h3>JavaScript : Navigator-Object: Mime-Types</h3>
  </body>
</html>

Plugins / plugins

Im Unterobjekt plugins werden Erweiterungen des Browsers verwaltet. Auch „plugins“ ist ein Array. Folgende Eigenschaften stehen zur Verfügung:

• length - die Anzahl der Plugins
• name - der Name
• description - eine ausführlichere Beschreibung
• filename - die ausführbare Datei des Plugins

Ein Beispielprogramm verdeutlicht den Zugriff auf dieses Unterobjekt. In einer Schleife werden alle „plugins“ gelistet.

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>JavaScript : Navigator-Object: Plugins</title>
    <meta name="author" content="S.Möller">
    <script language="JavaScript">
        <!--
           function fShowPluginTypes()
              {
              document.open();
              document.write('<table>');
              for (var iP = 0; iP < navigator.plugins.length; iP++)
                 {
                 document.write("<tr>");
                 document.write("<td>" + navigator.plugins[iP].name + "<\/td>");
                 document.write("<td>" + navigator.plugins[iP].description + "<\/td>");
                 document.write("<td>" + navigator.plugins[iP].filename + "<\/td>");
                document.write("<\/tr>");
                }
              document.write("<\/table>");
              document.close();
              }
        //-->
    </script>
    <noscript>Bitte schalten Sie JavaScript ein !</noscript>
  </head>
  <body onLoad="fShowPluginTypes()">
     <h3>JavaScript : Navigator-Object: Plugins</h3>
  </body>
</html>

Aufgaben + Lösungen

Dieses Kapitel bzw. dieser Abschnitt wird durch intensive Zusammenarbeit sicher schnell besser. Der Hauptautor freut sich über jeden, der mitmacht. Versucht dich vielleicht nur an den schon vorgegebenen Inhalt und an die Form (bei Listen z.B.) anzupassen. Aber wenn etwas nicht passt, rührt sich der Hauptautor bestimmt. Kaputtmachen kannst du nicht viel – also sei mutig. Danke.

• Aufgaben
• Lösungen

<< HTML-Objekte | Objekte: Boolean, Date, Number >>

---