Am heutigen Tag wollen wir uns um das navigator-Objekt und zwei wichtige Unterobjekte von window, location und history sowie die wichtigsten derjenigen Objekte kümmern, die man als Top-Level-Objekte (Objekte, die direkt an jeder Stelle in einem JavaScript zur Verfügung stehen) bezeichnet. Dies sind die Objekte
Ebenso soll heute auf dem Plan stehen, wie Browser und Plattformen beim Laden einer Webseite automatisch erkannt werden und wie man dann darauf reagieren kann. Etwa zu verschiedenen Webseiten weiterleiten.
Um Arrays haben wir uns ja schon an Tag 15 gekümmert. Hier soll nur noch die Auflistung der wichtigsten Eigenschaften und Methoden angegeben werden. Das Array-Objekt wurde in JavaScript 1.1 eingeführt und JavaScript 1.3 fügte die Methode toSource() hinzu und überarbeitete die length-Eigenschaft sowie die Methoden push() und splice().
Spezifiziert die Funktion, die den Prototyp eines Objekts kreiert | |
Erlaubt das nachträgliche Hinzufügen von Eigenschaften zu einem Array-Objekt |
Tabelle 18.1: Eigenschaften von Array
Die Eigenschaften constructor und prototype werden bei fast allen Objekten bereitstehen und nachfolgend nur noch erwähnt.
Tabelle 18.2: Methoden von Array
Die Methoden toSource(), toString() und valueOf() werden bei fast allen Objekten bereitstehen und nachfolgend nur noch erwähnt.
Das Objekt Boolean dient dazu, Boolsche Objekte zu erstellen. Diese können in JavaScript wie einfache boolsche Werte verwendet werden, denn JavaScript ruft bei der Angabe von Boolean-Objekten in entsprechenden Situationen automatisch die zugehörigen Methoden valueOf() auf, um den enthaltenen Wert auszulesen. Das Objekt hat nur wenige Methoden (toSource(), toString() und valueOf()) und Eigenschaften (constructor und prototype) und wegen der ähnlichen Anwendung wie die boolschen Werte eine nicht so große Bedeutung. Der Nutzen von Boolean zeigt sich, wenn eine explizite Umwandlung eines Ausdrucks in einen Wahrheitswert gewünscht ist.
Das Objekt Date ist in JavaScript für Aktionen rund um Datum und Zeit zuständig. Der 1. Januar 1970, 0.00 Uhr ist der interne Zeitnullpunkt, der als Speicherungs- und Berechnungsbasis für alle Operationen dient. Ein Datumsobjekt kann mit folgenden Konstruktoren erzeugt werden:
new Date()
new Date(millisekunden)
new Date(DatumsString)
new Date(Jahr, Monat, Tag,
[, Stunde, Minute, Sekunde, Millisekunde])
new Date(Jahr, Monat, Tag,
[, Stunde, Minute, Sekunde])
Wir wollen uns die nachfolgenden drei Varianten anschauen:
var [Objektname] = new Date()
var [Objektname]= new Date(Jahr,Monat,Tag)
var [Objektname]
= new Date(Jahr,Monat,Tag,Stunden,Minuten,Sekunden)
Variante (1) erzeugt eine Objektinstanz, in der das zum Zeitpunkt der Programmausführung aktuelle Datum und die aktuelle Uhrzeit (Systemzeit des Rechners) gespeichert wird. Die Varianten (2) und (3) initialisieren das neue Date-Objekt mit bestimmten Werten (also einem bestimmten Datum und einer bestimmten Uhrzeit). Alle Initialisierungswerte bei Variante 2 und 3 (Monat, Stunden oder Minuten) müssen in Zahlenform angegeben werden.
Das Objekt Date besitzt nur die Eigenschaften constructor und prototype, aber eine ganze Reihe von Methoden, von denen eine Auswahl der wichtigsten hier folgt.
Tabelle 18.3: Methoden von Date
Das Objekt Function ist ein selten verwendetes Objekt. Es dient dazu, einen alternativen Weg zur Definition einer Funktion beschreiten zu können. Es wird genau genommen ein Function-Objekt erzeugt, was es ermöglicht, in JavaScript objektorientierter zu arbeiten. Wir wollen nicht näher darauf eingehen, sondern nur ein kleines Beispiel demonstrieren.
Erstellen Sie die Datei Funktion.htm:
<HTML>
<SCRIPT language="JavaScript">
berechne = new Function("a","b","return a + b");
alert(berechne(1,2));
</SCRIPT>
<BODY>
</BODY>
</HTML>
Mit dem Objekt Math stehen Ihnen diverse Funktionen, Methoden und Eigenschaften für Berechnungen zur Verfügung. Eine Instanz des Objekts brauchen Sie nicht eigens erzeugen, da es sich um ein so genanntes »built in«-Objekt handelt. Sie haben automatisch Zugriff auf Eigenschaften und Methoden von Math über die folgende Syntax:
Math.[Eigenschaft/Methode]
Das Objekt Math besitzt eine ganze Menge von Konstanten und Eigenschaften. Hier nur eine kleine Auswahl.
Das Objekt Math besitzt eine ganze Reihe von Methoden, welche Sie sehr wahrscheinlich zum großen Teil nicht benötigen werden. Hier folgt aber eine kleine Auswahl.
Tabelle 18.5: Methoden von Math
Das Objekt Number dient zur Unterstützung der Arbeit mit nummerischen Werten. Bei vielen Berechnungen ist es sehr hilfreich. Besonders, wenn Bedingungen eintreten wie Unendlichkeit oder irgendwelche Grenzwerte. Es fungiert als ein Objekt-Wrapper für primitive nummerische Werte.
Ein Wrapper dient dazu, mit Hilfe des new-Schlüsselworts jeweils ein Objekt-Gegenstück zu einem primitiven Datentyp zu erstellen.
Der Number-Konstruktor sieht so aus:
new Number([nummerischer Wert])
Man setzt dieses Objekt ein, um Zugriff auf spezielle darüber verfügbare Methoden zu haben oder nummerische Objekte zu erstellen, denen man bestimmte Eigenschaften noch hinzufügen möchte.
Repräsentation von »Negativ-unendlich«; wird bei einer Berechnung bei einem Überlauf zurückgegeben. | |
Repräsentation von »Positiv-unendlich«; wird bei einer Berechnung bei einem Überlauf zurückgegeben. |
Tabelle 18.6: Eigenschaften von Number.
Daneben gibt es noch die allgemeinen Eigenschaften prototype und constructor.
Das Objekt stellt nur die allgemeinen Methoden toSource(), toString() und valueOf() bereit.
Das Objekt RegExp ist eines der leistungsfähigsten Objekte, auf das man unter JavaScript zugreifen kann. Es ist aber auch eines der komplexesten, weshalb es hier nur sehr komprimiert vorgestellt wird. Es handelt sich um ein Objekt, mit dem sehr detailliert Informationen zum Suchen von Ausdrücken spezifiziert werden können. Dazu gibt es eine umfangreiche Liste von Eigenschaften und Methoden, aber vor allem eine ganze Familie von Token mit spezieller Bedeutung. Da das Thema extrem umfangreich ist1 und andererseits ein nur sehr spezialisiertes Anwendungsgebiet abdeckt, soll explizit auf den Anhang und weiterführende Literatur verwiesen werden.
Ein sehr spannendes Objekt ist screen. Das Objekt beinhaltet keine Methoden, aber einige Eigenschaften. Darüber haben Sie Zugriff auf diverse plattformspezifische Informationen beim Anwender, genau genommen im Wesentlichen die Auflösung und die beim Anwender verfügbaren Farben.
Wir wollen diese screen-Informationen in Zusammenhang mit der Abfrage der Browserversion am Ende des Kapitels in einem umfangreichen Beispiel einsetzen, um eine Schablone zu schaffen, die verschiedene Plattformen trennen und damit optimal bedienen kann.
Höhe des verfügbaren Bildschirms in Pixeln, d.h. minus Elementen, die den Bereich einschränken, wie die Taskbar in Windows. | |
Tabelle 18.7: Eigenschaften von screen
String-Manipulationen gehören zu den wichtigsten Aktionen bei komplexeren Scripten. Das Objekt String ist deshalb eines der wichtigsten Objekte. Damit können Sie mit verschiedensten Methoden Zeichenketten manipulieren. Eine Instanz von String brauchen Sie nicht eigens erzeugen, da es sich um ein so genanntes »built in«-Objekt handelt. Eine Zuweisung der Form
var text="irgend ein Text";
erzeugt automatisch ein String-Objekt. Eine Verwendung des new- Schlüsselwortes in der Form
var text = new String("irgend ein Text");
Eigenschaften hat das Objekt nur wenige (length zur Speicherung der Anzahl von Zeichen einer Zeichenkette sowie prototype und constructor). Dafür gibt es aber umso mehr Methoden.
Tabelle 18.8: Methoden von String
Daneben gibt es noch die allgemeinen Methoden toString(), toSource() und valueOf().
Wir wollen den Einsatz von String-Methoden mit mehreren Beispielen üben.
Das Beispiel zeigt den Einsatz von den Methoden, welche HTML-Befehle nachbilden sowie die Konvertierung in Groß- und Kleinbuchstaben. Erstellen Sie die Datei String1.htm:
<HTML>
<SCRIPT language="JavaScript">
var meinText = "Das ist der Text aller Texte";
var vglText = "Dat is nur zum Vergleich da. ";
document.write(vglText + meinText.big());
document.write("<BR>");
document.write(vglText + meinText.blink());
document.write("<BR>");
document.write(vglText + meinText.bold());
document.write("<BR>");
document.write(vglText + meinText.fixed());
document.write("<BR>");
document.write(vglText + meinText.fontcolor("red"));
document.write("<BR>");
document.write(vglText + meinText.fontcolor("blue"));
document.write("<BR>");
document.write(vglText + meinText.fontcolor("green"));
document.write("<BR>");
document.write(vglText + meinText.fontsize(1));
document.write("<BR>");
document.write(vglText + meinText.fontsize(7));
document.write("<BR>");
document.write(vglText + meinText.fontsize(5));
document.write("<BR>");
document.write(vglText + meinText.italics());
document.write("<BR>");
document.write(vglText + meinText.small());
document.write("<BR>");
document.write(vglText + meinText.strike());
document.write("<BR>");
document.write(vglText + meinText.sub());
document.write("<BR>");
document.write(vglText + meinText.sup());
document.write("<BR>");
document.write(vglText + meinText.toLowerCase());
document.write("<BR>");
document.write(vglText + meinText.toUpperCase());
document.write("<BR>");
</SCRIPT>
<BODY>
</BODY>
</HTML>
Das Beispiel zeigt den Einsatz von den Methoden, welche in Texten verschiedene Operationen ausführen. Erstellen Sie die Datei String2.htm:
<HTML>
<SCRIPT language="JavaScript">
var meinText = "Das ist der Text aller Texte";
var text1 = " Die ";
var text2 = "Antwort ";
var text3 = "ist ";
var text4 = "42";
document.write(meinText.charAt(2));
document.write(" ");
document.write(meinText.charAt(6));
document.write(" ");
document.write(meinText.charAt(8));
document.write(" ");
document.write(meinText.charAt(9));
document.write("<BR>");
document.write(meinText.charCodeAt(2));
document.write(" ");
document.write(meinText.charCodeAt(6));
document.write(" ");
document.write(meinText.charCodeAt(8));
document.write(" ");
document.write(meinText.charCodeAt(9));
document.write("<BR>");
document.write(
meinText.concat(text1,text2,text3,text4));
document.write("<BR>");
document.write(meinText.indexOf("i"));
document.write("<BR>");
document.write(meinText.search("aller"));
document.write("<BR>");
document.write(meinText.replace("aller", "welcher"));
document.write("<BR>");
document.write(meinText.lastIndexOf("e"));
document.write("<BR>");
</SCRIPT>
<BODY>
</BODY>
</HTML>
Das abschließende Beispiel zu diesem Thema zeigt wie das zweite Beispiel den Einsatz von den Methoden, welche in Texten verschiedene Operationen ausführen. Erstellen Sie die Datei String3.htm:
<HTML>
<SCRIPT language="JavaScript">
var meinText = "Der Wert der Zahl PI: 3.14.";
neuArray = meinText.match(/d/gi);
document.write(neuArray);
document.write("<BR>");
str=meinText.slice(3,-5);
document.write(str);
document.write("<BR>");
document.write("(1,2): ", meinText.substr(1,2))
document.write("<BR>");
document.write("(-2,2): ", meinText.substr(-2,2))
document.write("<BR>");
document.write("(1): ", meinText.substr(1))
document.write("<BR>");
document.write("(-10, 2): ", meinText.substr(1,10))
document.write("<BR>");
document.write("(10, 2): ", meinText.substr(10,2))
document.write("<BR>");
</SCRIPT>
<BODY>
</BODY>
</HTML>
Über das Top-Level-Objekt navigator hat man Zugriff auf den verwendeten Browser des Anwenders. Dies ist besonders dann wichtig, wenn Browser-spezifische Anweisungen verwendet werden (damit sind sowohl Script-Anweisungen - insbesondere die Verwendung von Mischkonstellationen - und sogar HTML oder Style Sheets gemeint). Eine Instanz von navigator braucht nie extra erzeugt werden, da es sich um ein »built in«-Objekt handelt.
Das Objekt hat die folgenden Eigenschaften:
Tabelle 18.9: Eigenschaften von navigator
Das Objekt navigator
hat nur wenige Methoden. Bis auf javaEnabled
(),
mit der die Java-Fähigkeit (Java - nicht JavaScript) eines Browsers getestet
werden kann (true) und plugins.refresh()
, um neu installierte PlugIns
verfügbar zu machen, sind sie auch nicht so wichtig.
Praktische Beispiele zum Einsatz von dem navigator-Objekt werden wir im letzten Abschnitt zur Trennung von Browser- und Plattformwelten sehen.
Über das history-Objekt - ein direktes Unterobjekt von window - hat man Zugriff auf die zuvor geladenen Seiten im Browser des Anwenders. Maßgeblich ist dabei die Liste, wie sie in der History-Liste des Browsers gespeichert ist. Eine Instanz des Objektes history steht automatisch bereit und sämtliche Eigenschaften und Methoden lassen sich für nachfolgende Syntax direkt verwenden:
history.[Eigenschaft/Methode]
Das Objekt besitzt im Wesentlichen die Eigenschaft length, worüber die Anzahl der Einträge in der aktuellen History-Liste dokumentiert wird. Die anderen Eigenschaften
current,
next
previous
(aktuelle Seite in der Historie, nächste und vorherige) funktionieren nicht auf allen Browsern. An Methoden steht die folgende Liste zur Verfügung:
Tabelle 18.10: Methoden von history
Das location-Objekt - ein weiteres direktes Unterobjekt von window - repräsentiert den kompletten URL, der mit einem window-Objekt verknüpft ist. Jede der Eigenschaften von dem location-Objekt steht für einen anderen Bestandteil des URL. Wenn man die allgemeine Struktur eines URL zugrunde legt, sieht er so aus:
protocol//host:port/pathname#hash?search
http://www.rjs.de:84/mainframe.htm#Anfang?x=7&y=2
Jeder der einzelnen Bestandteile des URL steht als Bezeichner einer Eigenschaft des location-Objekts zur Verfügung und kann direkt verwendet werden.
Tabelle 18.11: Eigenschaften von location
Erzwingt ein Reload von dem aktuell im Fenster angezeigten Dokument. | |
Lädt den angegebenen URL über den aktuellsten History-Eintrag. |
Tabelle 18.12: Methoden von location.
Am wichtigsten an dem location-Objekt dürfte sein, dass man damit aus JavaScript heraus eine neue Seite in den Browser laden kann. Mit dem location-Objekt kann man auf folgende zwei Weise eine neue Webseite in den Browser laden:
window.location.href="http://www.rjs.de/"
window.location="http://www.rjs.de /"
Bei der Arbeit mit Event-Handlern sollte window.location dem einfachen Verwenden von location vorgezogen werden. Das Objekt location ist keine Eigenschaft des document-Objekts; dort gibt es ein Äquivalent document.URL.
Den praktischen Einsatz des location-Objekts werden wir bei der Trennung von Browsern sehen.
Wir haben nun alles an notwendigem Rüstzeug zusammen, um Browser und Plattformen per JavaScript zu identifizieren und entsprechend darauf zu reagieren. Reagieren soll bei uns bedeuten, es werden verschiedene Seiten je nach Clientvoraussetzung geladen oder ähnlich differenzierende Schritte unternommen (die Ausarbeitung sei hier außer Acht gelassen - das sind dann nur noch Details). Dabei wollen wir verschiedene Stufen durchspielen - von der Entscheidung, ob überhaupt JavaScript bereitsteht, über das einfache Aufteilen nach Internet Explorer und Netscape Navigator bis zum differenzierten Aufteilen nach Versionsnummer, Bildschirmeckdaten und Betriebssystem.
Eine der grundlegenden Unterteilungen in Webprojekten ist die, dass erst Mal unterschieden wird, ob bei einem Client JavaScripte ausgeführt werden können oder nicht. JavaScript ist eine ideale Technik zum Trennen von Browser-Welten. Aber was ist, wenn JavaScript deaktiviert ist? Eine Abfrage per JavaScript, ob JavaScript aktiviert ist, ist ja nicht möglich. Oder doch? Es geht wirklich. Indirekt. Man nutzt die Tatsache, dass eine JavaScript-Aktion bei deaktiviertem JavaScript überhaupt nicht funktioniert. Wenn man auf einer Webseite eine automatische Weiterleitung per JavaScript durchführt (wir wollen dies in der Folge mit dem gerade beschriebenen Unterobjekt von window machen - location), wird diese bei deaktiviertem JavaScript nicht ausgeführt und die Seite bleibt stehen. Wenn ein zusätzlicher HTML-<META>-Tag, der nach einem Zeitintervall (unbedingt länger als das Weiterleitungsintervall des JavaScripts) automatisch auf ein Teilprojekt ohne JavaScript weiterleitet, trennt die Welten.
Erstellen Sie die nachfolgende Datei Trennung1.htm und nachfolgende die beiden Dateien OhneJS.htm und MitJS.htm, die einfach nur eine kurze Begrüßung oder so enthalten sollen (das ist nicht wesentlich):
<HTML>
<HEAD>
<META http-equiv="refresh" content="8;URL=OhneJS.htm">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
function JSweiter() {
location.href="MitJS1.htm";
}
function JSoderNicht() {
window.setTimeout('JSweiter()',1000);
}
</SCRIPT>
<BODY onLoad="JSoderNicht()">
</BODY>
</HTML>
Um die beiden Browser-Welten bzw. ihr globales Eventhandling zu trennen, kann man bei aktiviertem JavaScript im Browser auf verschiedene Varianten zurückgreifen. Es gibt einmal die einfachste Version, in der ein ähnliches Prinzip wie in dem Fall von deaktiviertem JavaScript verwendet wird. Man bedient sich einer Anweisung, die jeweils von der nicht gewünschten Browservariante nicht verstanden wird, und wertet die Reaktion aus. Etwa wie im Beispiel mit einer if-Struktur. Der Zugriff auf das jeweilige Objekt liefert nur dann den Wert wahr, wenn es auch unterstützt wird. Dabei benutzt man zur Identifizierung des Internet Explorer das Objekt all, das nur von diesem unterstützt wird, und zur Identifizierung des Navigator das Objekt layers, das nur dieser versteht.
Erstellen Sie die nachfolgende Datei Trennung2.htm und danach die beiden Dateien IE1.htm und NC1.htm, die wieder nur eine kurze Grußbotschaft oder so zu enthalten brauchen:
<HTML>
<SCRIPT LANGUAGE="JavaScript">
function BrowserTrennen()
{
if (document.all)
{
location.href="IE1.htm";
}
if (document.layers)
{
location.href="NS1.htm";
}
}
</SCRIPT>
<BODY onload="BrowserTrennen()">
</BODY>
</HTML>
So elegant und zuverlässig dieser Trick ist - er nutzt jeweils einen Mangel des unerwünschten Browsers aus. Wenn irgendwann dieser jeweilige Mangel beseitigt wird, wird die Überprüfung nicht mehr greifen. Eine andere Variante trennt die beiden Browser einfach über explizite Abfrage des jeweiligen Browsers mittels des navigator-Objekts und dessen Eigenschaft appName.
Erstellen Sie die nachfolgende Datei Trennung3.htm:
<HTML>
<SCRIPT LANGUAGE="JavaScript">
function BrowserTrennen()
{
if(navigator.appName == "Netscape")
{
location.href="NC1.htm";
}
if(navigator.appName == "Microsoft Internet Explorer")
{
location.href="IE1.htm";
}
}
</SCRIPT>
<BODY onload="BrowserTrennen()">
</BODY>
</HTML>
Abbildung 18.7: Willkommen in der Microsoftwelt
Die explizite Abfrage des jeweiligen Browsers mittels des navigator- Objektes und dessen Eigenschaft appName auf diese Art ist die meistgenutzte Variante, um einfach nur beide Browser-Welten zu trennen - selbst von vielen professionellen Seiten. Leider wird die Eigenschaft appName von einigen Partnerfirmen der Browserhersteller gelegentlich für Werbezwecke missbraucht. So liefert beispielsweise T-Online den Netscape Navigator mit einer veränderten appName-Eigenschaft aus, weshalb eine Abprüfung auf Gleichheit mit "Netscape" durch Scripte false liefern kann, obwohl der Browser ursprünglich diesen Wert in der Eigenschaft gesetzt hatte.
Um diesem Mangel zu begegnen, darf man nicht einfach nur auf Gleichheit prüfen, sondern darauf, ob eine bestimmte Zeichenkette im Wert der Eigenschaft enthalten ist (das ist selbst bei veränderter appName-Eigenschaft so gut wie immer noch der Fall). Dabei helfen die Methoden des String- Objekts. Etwa indexOf(), die wir gleich noch einsetzen, oder search(), womit in dem String nach dem Vorkommen der Zeichenkette gesucht wird und nicht unbedingte Gleichheit notwendig ist. Aber auch einige andere der Methoden des String-Objekts sind da ganz nützlich.
Erstellen Sie die nachfolgende Datei Trennung4.htm:
<HTML>
<SCRIPT LANGUAGE="JavaScript">
var browser=navigator.appName;
function BrowserTrennen()
{
if(browser.search("Netscape")==-1)
{
location.href="IE1.htm";
}
else
{
location.href="NS1.htm";
}
}
</SCRIPT>
<BODY onload="BrowserTrennen()">
</BODY>
</HTML>
Im Vergleich wird der Wert -1 zurückgegeben, wenn die Zeichenkette nicht vorkommt. So funktioniert das Verfahren viel zuverlässiger. Wenn die Zeichenkette Netscape vorkommt, wird der else-Zweig ausgewählt, falls die Bedingung erfüllt ist, der if-Zweig.
Das nächste Beispiel trennt mehr Bedingungen. Dabei sollen zwei Betriebssysteme (Mac und PC), Browsertypen, Browserversionen und die Bildschirmauflösung eine Rolle spielen. Das Beispiel ist nur für den Fall des Navigator auf PC-Ebene zu Ende notiert, aber die restlichen Fälle sind vollkommen identisch. Das Beispiel verwendet den ?:-Operator und noch ein paar JavaScript-Feinheiten, die Sie aber kennen sollten (Trennen5.htm):
<HTML>
<SCRIPT LANGUAGE="JavaScript">
function BrowserTrennen()
{
var plattform = navigator.appVersion.indexOf('Mac') != -1 ? "mac" : "pc";
var browser = navigator.appName.indexOf('Netscape');
var browsver = parseInt(navigator.appVersion);
var bildschirmHoehe = screen.height;
if(plattform=="pc")
{
if(browser!=-1) // Netscape
{
switch(browsver)
{
case 2:
switch(bildschirmHoehe)
{
case 480:
alert("Hallo PC NC 2 mit 480 Hoehe");
break;
case 600:
alert("Hallo PC NC 2 mit 600 Hoehe");
break;
case 768:
alert("Hallo PC NC 2 mit 768 Hoehe");
break;
default:
alert("Hallo PC NC 2 mit grosser Hoehe");
break;
}
break;
case 3:
switch(bildschirmHoehe)
{
case 480:
alert("Hallo PC NC 3 mit 480 Hoehe");
break;
case 600:
alert("Hallo PC NC 3 mit 600 Hoehe");
break;
case 768:
alert("Hallo PC NC 3 mit 768 Hoehe");
break;
default:
alert("Hallo PC NC 3 mit grosser Hoehe");
break;
}
break;
case 4:
switch(bildschirmHoehe)
{
case 480:
alert("Hallo PC NC 4 mit 480 Hoehe");
break;
case 600:
alert("Hallo PC NC 4 mit 600 Hoehe");
break;
case 768:
alert("Hallo PC NC 4 mit 768 Hoehe");
break;
default:
alert("Hallo PC NC 4 mit grosser Hoehe");
break;
}
break;
default:
switch(bildschirmHoehe)
{
case 480:
alert("Hallo PC NC 2 mit 480 Hoehe");
break;
case 600:
alert("Hallo PC NC 2 mit 600 Hoehe");
break;
case 768:
alert("Hallo PC NC 2 mit 768 Hoehe");
break;
default:
alert("Hallo PC NC 2 mit grosser Hoehe");
break;
}
break;
}
}
else // IE
{
// analog
}
}
else
{
// analog
}
}
</SCRIPT>
<BODY onLoad="BrowserTrennen()">
</BODY>
</HTML>
Beide bisher genannten Varianten trennen die beiden Browser-Welten strikt. Oft ist das jedoch nicht unbedingt notwendig. Teile der beiden Welten sind gut kompatibel und man möchte vielleicht diese gemeinsam behandeln. Was jedoch unbedingt getrennt werden muss ist das globale Eventhandling über die jeweils inkompatiblen event-Objekte. So ganz trivial ist dies nicht, da bei der Microsoft-Variante des globalen Eventhandlings bereits im <SCRIPT>-Tag Attribute gesetzt werden müssen. Die Trennung von den Ereignisbehandlungsmodellen kann mit einem kleinen Trick erfolgen. Eine dritte Variante zur automatischen Trennung des Eventhandlings von Browsern (ohne den Rest der Seite auseinander zu dividieren) beruht darauf, dass man zwei getrennte <SCRIPT>-Container benutzt. Der erste <SCRIPT>-Container wird von jedem Browser geladen, verstanden und ausgeführt. Es handelt sich um einfachste JavaScript- Anweisungen. Wenn Sie an dieser Stelle bereits ältere Browserversionen abhalten wollen, können Sie auf language="JavaScript1.2" oder höher abfragen (sinnvoll). Im ersten <SCRIPT>-Container wird dann über eine if- Schleife abgefragt, ob explizit ein Netscape-Browser verwendet wird. Andere Browser werden den in der Schleife enthaltenen Code ignorieren und deshalb keine Probleme bereiten.
Die zweite <SCRIPT>-Container verwendet die spezielle Microsoft- Terminologie für das JavaScript-Eventhandling, aber dies ist auch für Netscape-Browser kein Problem. Die unbekannten Attribute werden einfach ignoriert, und es kommt normalerweise zu keinem Fehler. Die das zweite Script vollkommen ausfüllende if-Schleife hält den Netscape- Browser von den Anweisungen des Explorer ab und so werden Netscape- Browser damit keine Probleme bekommen. Erstellen Sie die Datei Trennen6.htm:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
var browser=navigator.appName;
if(browser.search("Netscape")!=-1)
{
alert("Netscape");
}
//-->
</SCRIPT>
<SCRIPT FOR=document EVENT=onclick language="JavaScript">
<!--
if(browser.search("Netscape")==-1)
{
alert("Microsoft");
}
-->
</SCRIPT>
<BODY>
</BODY>
</HTML>
Laden Sie die Datei. Im Internet Explorer tut sich nur etwas, wenn Sie in die Webseite klicken.
Wir haben heute eine ganze Anzahl von Objekten kennen gelernt, auf die man mit JavaScript zugreifen kann. An erster Stelle sind dabei navigator und String zu nennen, aber auch Array, Date und Math sind sehr wichtig. Das Objekt Number wird Ihnen wahrscheinlich ebenso gelegentlich über den Weg laufen, während die restlichen Objekte sehr spezialisierte Anwendungen erlauben und in »Otto-Normal-Scripten« nicht so oft vorkommen werden.
Insbesondere haben wir mittlerweile genügend JavaScript-Techniken parat, um Browser und Plattformen per JavaScript zu identifizieren und entsprechend darauf reagieren zu können.
Frage:
Wie weit muss die Trennung von Browser- und Plattformwelten in der
Praxis gehen?
Antwort:
Grundsätzlich sollte man die Browsertypen trennen, wenn man
Style Sheets einsetzt oder globales Event-Handling betreiben
möchte. Aber auch andere Indikatoren sprechen für eine Trennung
der Browsertypen. Dazu ist die Abfrage, ob JavaScript aktiviert ist
oder nicht, eigentlich eine Selbstverständlichkeit, wenn wesentliche
Aspekte des Webprojekts davon abhängen. Wenn kein JavaScript
aktiviert ist, kann man auch viele Rückschlüsse über die
Verwendungsmöglichkeit von anderen Techniken ziehen. Entweder
liegt ein ganz alter Browser vor - dann gehen weder Tabellen noch
Frames, Java-Applets oder viele neue Multimedia-Erweiterungen.
Oder der Anwender hat JavaScript nur deaktiviert. Dann kann man
aber beim Anwender eine gewisse Feindlichkeit gegen so einen
»Firlefanz« annehmen. Es ist in jedem Fall nicht unwahrscheinlich,
dass dann auch Grafiken und alles, was sich sonst noch ausschalten
lässt, deaktiviert ist. Ob man noch weiter differenzieren muss, kann
bezweifelt werden. Besser ist es, wenn man auf Techniken
verzichtet, die eine größere Zielgruppe ausschließen.
Frage:
Ist so eine differenzierte Aufteilung wie in Beispiel 9 überhaupt in der
Praxis zu finden?
Antwort:
Ja. Sogar noch abgestufter. Etwa ob Flash-Formate verstanden
werden, welche Farbtiefe vorhanden ist, welche PlugIns usw. Man
findet so etwas oft dann, wenn Animationen auf der Webseite
vorhanden sind, die auf Style Sheets, Bildgrößen und
Positionierungen abgestimmt sind.
Testen Sie das Math- und das Date-Objekt mit verschiedenen Beispielen. Dies ist ja in dem Kapitel nicht explizit gemacht worden. Nehmen Sie sich auch nochmals Arrays vor und wenden Sie einige der besprochenen Methoden an.
Erstellen Sie ein Script, das die Java-Fähigkeit eines Browsers abfragt.
Wenn Sie viel Zeit und Lust haben - vervollständigen Sie Beispiel 9.
Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.
if(navigator.appName == "Netscape")
berechne = new Function("a","b","return a * b + 5");
Viele Objekte können im Rahmen dieses JavaScript-Lehrgangs nur angerissen werden, aber wenn ein Objekt den Rahmen wirklich sprengt, dann dieses.