Zum Inhalt springen

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

Aus Wikibooks

<< Dynamisierung von Formularen | Inhaltsverzeichnis | Index | das Document-Objekt >>

Wikipedia hat einen Artikel zum Thema:


Allgemeines

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

Syntax: 

 var iB = screen.width;

Bildschirmhöhe / height

[Bearbeiten]

Syntax: 

 var iH = screen.height;

Browser-Fensterbreite / availWidth

[Bearbeiten]

Syntax: 

 var iB = screen.availWidth;

Browser-Fensterhöhe / availHeight

[Bearbeiten]

Syntax: 

 var iH = screen.availHeight;

Farbtiefe / colorDepth

[Bearbeiten]

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 28=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

[Bearbeiten]

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

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

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.


Geteilte Fenster / Frames

[Bearbeiten]

Dokument / document

[Bearbeiten]

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

[Bearbeiten]

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)

[Bearbeiten]

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

length
[Bearbeiten]
 var iAnz = history.length;

Methoden

[Bearbeiten]
back()
[Bearbeiten]

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()
[Bearbeiten]

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()
[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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
[Bearbeiten]

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
[Bearbeiten]

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

 var P=[window].location.protocol
host
[Bearbeiten]

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
[Bearbeiten]

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

 var H=[window].location.hostname


port
[Bearbeiten]

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
[Bearbeiten]

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
[Bearbeiten]

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
[Bearbeiten]

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

[Bearbeiten]
assign()
[Bearbeiten]

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()
[Bearbeiten]

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()
[Bearbeiten]

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

[Bearbeiten]

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.

Location Objekt unter Linux/Konqueror

Browser / Navigator

[Bearbeiten]

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

[Bearbeiten]
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

[Bearbeiten]
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. genauer erläutert
Unterobjekte
Objektname Kurzbeschreibung
mimeTypes MIME-Typen genauer erläutert
plugins Vorhandene Plug-Ins genauer erläutert

Anwendungsbeispiel: Eigenschaften lesen

[Bearbeiten]

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
Das Navigator-Objekt unter Linux / Firefox Das Navigator-Objekt unter Linux / Konqueror

Die Eigenschaften im Einzelnen

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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

[Bearbeiten]

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.

Abgerufen von „https://de.wikibooks.org/w/index.php?title=Websiteentwicklung:_JavaScript:_Objekte:_screen,_window,_document,_navigator&oldid=688181“