JavaScript ist dazu bestimmt, die Seitengestaltung zu unterstützen. HTML als Beschreibungssprache wurde geschaffen, weil die fertige Präsentation unabhängig von der Bildschirmauflösung funktionieren soll. Mit HTML allein kann man das Wort Gestaltung getrost vergessen. JavaScript schafft insofern Abhilfe, als es die Bildschirmdaten des Nutzers ermitteln und innerhalb der Präsentation Anpassungsmaßnahmen organisieren kann. Dafür gibt es zunächst einige Eigenschaften des Objektes „screen“, die man zwar nicht setzen, wohl aber lesen und berücksichtigen kann. Weitere Möglichkeiten bietet das Objekt „window“, dessen Möglichkeiten zur Bestimmung des Darstellungsbereiches auf dieser Seite ebenfalls beschrieben werden.
Bildschirmdaten ermitteln, das Objekt screen
Hier die Übersicht der Eigenschaften von screen. Die rechte Spalte zeigt die aktuellen Werte Ihres Bildschirms an:
availHeight | verfügbare Höhe, also Vollbild minus Taskbar | Pixel |
availLeft | Abstand der linken Kante des verfügbaren Schirmbereiches vom Rand in Pixeln, also Breite einer links angeordneten Taskbar | Pixel |
availTop | Abstand der oberen Kante des verfügbaren Schirmbereiches vom Rand in Pixeln, also Breite einer oben liegenden Taskbar | Pixel |
availWidth | verfügbare Breite, also Vollbild minus Taskbar | Pixel |
colorDepth | Farbtiefenzahl in Bits, die zur Darstellung der Farbe eines Pixels verwendet wird. Kann auch als undefined (Netscape) oder null (MS Internet Explorer) wiedergegeben werden. | Bit |
height | Höhe des kompletten Anzeigebereiches also z.B. 480, 600 oder 768 Pixel | Pixel |
pixelDepth | Farbauflösung | Bit |
width | Breite des kompletten Anzeigebereiches also z.B. 640, 800 oder 1024 Pixel | Pixel |
Wie und wann ermittelt man diese Daten? Es gibt mehrere Möglichkeiten und es hängt davon ab, wozu man sie nutzen möchte.
Da sich die Daten während einer Sitzung kaum ändern werden, kann man diejenigen, die man benötigt, bei Laden der Startseite ermitteln und, soweit sie nicht sogleich zu Konsequenzen führen, einer Variablen zuweisen.
var aufloes = screen.width + "*" + screen.height; var farbtiefe = screen.pixelDepth; ...
Will man sie einfach nur anzeigen, wie ich es in der Tabelle oben getan habe, dann lautet der Code innerhalb jeder Tabellenzelle ähnlich, wie der der letzten Zelle der ersten Zeile:
<td> <script language="JavaScript"> document.write(screen.availHeight); </script> Pixel </td>
Die Daten können aber auch zu Konsequenzen führen. Etwa zu freundlichen Hinweisen, wenn die Seitendarstellung behindert oder die Farbtiefe zu gering ist:
var verschwendung = Math.round(1000-(screen.availHeight*screen.availWidth)/(screen.height*screen.width)*1000)/10; if (verschwendung>1)alert("Sie verschwenden " + verschwendung + "% des kostbaren Platzes auf dem Bildschirm!"); if (screen.pixelDepth<32)alert("Sie werden von meinen Bildern enttäuscht sein,nwenn sie nicht mindestens 256 Farben eingestellt haben!");
oder schließlich die wichtige Reaktion auf die Fenstergröße. Sie erzeugen etwa einen Satz durchgestylter Startseiten für drei verschiedene Bildbreiten mit den Namen welcome.htm (für 640 Pixel), st_800.htm und st_1024.htm. In den Kopf der Seite welcome.htm schreiben Sie nun:
if(screen.width > 800) window.location.href = "st_1024.htm"; if (screen.width > 640) window.location.href = "st_800.htm";
Fensterdaten ermitteln mit dem Objekt window
Das Objekt window ist in der Objekthierarchie von JavaScript das oberste Objekt, denn es ist bildet den Container für alle Anzeigen.Über das Objekt window, das auch mit self anzusprechen ist, können Daten des Dokumentenfensters erfragt werden. Im Zusammenhang mit visible funktioniert das alles nicht beim IExplorer. Deshalb sind in der Tabelle nur solche Abfragen enthalten, die der IExplorer wenigstens ohne Fehlermeldung ignoriert. Dabei fallen eine Reihe an sich interessanter Möglichkeiten weg: menubar, personalbar, scrollbars, statusbar, toolbar.
Hier die Tabelle der Daten. Alle werden beim Seitenstart ermittelt und in die rechte Spalte eingetragen. Das ist bei den window-Daten nicht unbedingt sachgemäß. Wenn auf solche bedienabhängigen Daten reagiert werden soll, müssen sie unmittelbar vor ihrer Verwendung bestimmt werden.
defaultStatus | Text der Statuszeile | |
innerHeight | Höhe des tatsächlichen Browserfensters | Pixel |
innerWidth | Breite des tatsächlichen Browserfensters | Pixel |
name | Name des Fensters | |
outerHeight | Höhe des gesamten Fensters | Pixel |
outerWidth | Breite des gesamten Fensters | Pixel |
pageXOffset | Fensterstartposition von links, scrollabhängig, hier wird Position beim Seitenstart angezeigt | Pixel |
pageYOffset | Fensterstartposition von oben, scrollabhängig, hier wird Position beim Seitenstart angezeigt | Pixel |
status | zeigt oder setzt den Inhalt der Statuszeile |
Viel Spass beim Lernen und beim Erstellen eigener JavaScripts.