JavaScript von Christian Wenz
Browserübergreifende Lösungen

	Kapitel 5 Erste Schritte
		5.1 JavaScript-Objekte
		5.2 Browser-Erkennung
		5.3 Event-Handler
		5.4 Fragen & Aufgaben

Kapitel 5 Erste Schritte

Der schwerste Anfang ist der Anfang vom Ende
– Hans-Helmut Dickow

Ziel dieses Kapitels ist, einige erste Grundtechniken vorzustellen, die Sie in den folgenden Kapiteln benötigen. Beispielsweise wird gezeigt, wie der Browser des Benutzers erkannt werden kann und wie bestimmte Browser auf bestimmte Seiten weitergeleitet werden können. Außerdem werden öfter benötigte mathematische Methoden, wie etwa die Rundungsfunktion oder die Generierung von Zufallszahlen, vorgeführt, und das sogar an einem praxisnahen Beispiel. Zu guter Letzt erhalten Sie eine Übersicht über die häufigsten Event-Handler von JavaScript. Damit nähern Sie sich schon stark der JavaScript-Programmierung im Produktivbetrieb, und im nächsten Kapitel, »Fenster I«, wird direkt in die Materie eingestiegen.

5.1 JavaScript-Objekte

Wie bereits im vorherigen Kapitel angekündigt, gibt es in JavaScript einige Objekte, die einem die Programmierung erleichtern, so zum Beispiel das Array-Objekt. In diesem Abschnitt werden zwei weitere Objekte anhand eines kurzen Beispiels vorgestellt, die Objekte Date (für Datumsfunktionen) und Math (für mathematische Berechnungen).

5.1.1 Das Objekt Date

Bei dem Date-Objekt handelt es sich um ein Objekt, von dem man eine Instanz erzeugen kann, und zwar – analog zu Arrays – folgendermaßen:

var d = new Date()

Die Variable d ist eine Datumsvariable und enthält das aktuelle Datum (inklusive Uhrzeit) auf dem lokalen Rechner (nicht auf dem Server), und zwar das Datum zu dem Zeitpunkt, zu dem die Instanz erzeugt worden ist. Wenn also nach der Generierung der Variablen d eine lange Schleife folgt, die mehrere Sekunden dauert, ändert d seinen Wert nicht.

Bei der Erzeugung der Instanz kann man die Datumsvariable auch direkt mit (anderen) Werten belegen. Dazu gibt es zwei Möglichkeiten:

var d = new Date(Jahr, Monat, Tag)

bzw.

var d = new Date(Jahr, Monat, Tag, Stunde, Minute, Sekunde)

Bitte beachten Sie untenstehende Hinweise, insbesondere die für den Monatswert!

Man kann mit geeigneten Methoden den Wert der Variablen d ändern, beispielsweise Tag, Monat und Jahr. Natürlich hat das überhaupt keine Auswirkung auf die Systemzeit des Clients oder des Servers, das wäre ja aus Sicherheitsgründen völliger Wahnsinn, sondern lediglich der Wert der Variablen ändert sich.

Zu den Standardanwendungen des Date-Objekts gehören die Anzeige des aktuellen Datums sowie die Berechnung, wie viel Zeit zwischen zwei Daten liegt. Im folgenden sollen diese beiden Möglichkeiten anhand von Beispielen erläutert werden.

Tagesdatum

Hat man erst einmal eine Instanz des Date-Objekts erzeugt, kann man das genaue Datum mit entsprechenden Methoden abfragen. Wie unter UNIX generell üblich, speicherte JavaScript 1.0 jedes Datum als die Anzahl der Millisekunden seit dem 1. Januar 1970; in neueren Versionen ist das nicht mehr so. Da es ein wenig aufwendig wäre, aus diesem Wert die interessanteren Daten wie etwa die Jahreszahl herauszufinden, gibt es hierfür vorgefertigte Methoden. Eine komplette Liste befindet sich in der Referenz, in Tabelle 5.1 finden Sie lediglich die wichtigsten Methoden.

**Tabelle 5.1** Die wichtigsten Methoden des Date-Objekts
Methode	Beschreibung
getDate()	Aktueller Tag der Datumsvariablen (1..31)
getMonth()	Aktueller Monat der Datumsvariablen minus Eins (0..11)
getYear()	Aktuelles Jahr der Datumsvariablen; für Wertebereich siehe Abschnitt »Y2K«
getHours()	Aktuelle Stunde der Datumsvariablen (0..23)
getMinutes()	Aktuelle Minute der Datumsvariablen (0..59)
getSeconds()	Aktuelle Sekunde der Datumsvariablen (0..59)
getMilliseconds()	Aktuelle Millisekunden der Datumsvariablen (0..999)

Hiermit ist es recht einfach, das aktuelle Datum auszugeben. Will man auf Monatsnamen nicht verzichten, muss man diese wieder in einem Array speichern:

<HTML>
<HEAD>
<TITLE>Tagesdatum</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
var monatsnamen = new MakeArray(12)
monatsnamen[0] = "Januar"; monatsnamen[1]="Februar"
monatsnamen[2] = "März"; monatsnamen[3]="April"
monatsnamen[4] = "Mai"; monatsnamen[5]="Juni"
monatsnamen[6] = "Juli"; monatsnamen[7]="August"
monatsnamen[8] = "September"; monatsnamen[9]="Oktober"
monatsnamen[10] = "November"; monatsnamen[11]="Dezember"
function tagesdatum(){
   var d = new Date()
   var datumsstring = d.getDate()
   datumsstring += "."+monatsnamen[d.getMonth()]
   datumsstring += "."+d.getYear()
   document.write(datumsstring)
}

function MakeArray(n){
   for (var i=0; i<n; i++)
      this[i] = 0
   this.length = n
}
//--></SCRIPT>
</HEAD>
<BODY>
<H3>Tagesdatum</H3>
Guten Tag, heute ist der
 <SCRIPT LANGUAGE="JavaScript"><!--
 tagesdatum()
 //--></SCRIPT>
!
</BODY>
</HTML>

Y2K

Auch JavaScript ist vom ominösen Jahr-2000(Y2K-)Problem betroffen, allerdings ist das hier nicht so schlimm wie in weiten Teilen der Wirtschaft. Probleme bereiten hier (natürlich) wieder ältere Browser, insbesondere der Netscape Navigator 2 und zum Teil der Internet Explorer 3. Die Crux liegt in der Methode getYear(). Je nach Browser werden manche Jahre anders interpretiert. Tabelle 5.2 zeigt auf, welche Rückgabewerte die verschiedenen Browser bei den jeweiligen Zeiträumen haben. Dabei bedeutet »volle Jahreszahl« eine vierstellige Jahreszahl (außer natürlich bei Jahreszahlen vor 1000); »kurze Jahreszahl« bedeutet eine zweistellige Jahreszahl im 20. Jahrhundert, also etwa »99« statt »1999«.

**Tabelle 5.2** Die Jahreszahlbehandlung der verschiedenen JavaScript-Versionen
Zeitraum	JS 1.0	JS 1.1/1.2	JS 1.3 und höher
<1970	Nicht unterstützt	Volle Jahreszahl	Jahreszahl minus 1900 (1800 wird durch -100 dargestellt)
1970..1999	Jahreszahl minus 1900	Kurze Jahreszahl	Jahreszahl minus 1900
³ 2000	Jahreszahl minus 1900	Volle Jahreszahl	Jahreszahl minus 1900

Tabelle 5.2 wirkt erschreckend, aber in der Praxis kann man relativ einfach einen Ausweg finden. Üblicherweise liegen alle verwendeten Daten im Bereich von 1970 bis ins 21. Jahrhundert hinein. Eine Jahreszahl kleiner als 200 ist also um 1900 zu niedrig; andere Jahreszahlen sind – nehmen wir einfach einmal an – korrekt. Man kann also eine Funktion schreiben, die das Y2K-sichere Jahr zurückgibt:

function getYearY2K(d){
   var y = d.getYear()
   if (y<200)
      return y+1900
   else
      return y
}

Ab JavaScript 1.3 (also insbesondere ab Netscape Navigator 4.06) gibt es eine Methode getFullYear(), die grundsätzlich kein verkürztes Datum zurückgibt, sondern stets die volle Jahreszahl. Alle Browser, die ab dem heutigen Zeitpunkt erscheinen, sollten diese Methode unterstützen. Bis jedoch die Verbreitung dieser Browser so groß ist, dass man den »zurückgebliebenen Rest« vernachlässigen kann, muss noch einige Zeit vergehen. Aus diesem Grund sollten Sie sich noch eine Zeitlang mit getYearY2K() begnügen. Eine Alternative besteht darin, ein eigenes Datumsobjekt zu schreiben; das nötige Rüstwerkzeug bekommen Sie im Kapitel »Arrays«.

Mit Daten rechnen

In JavaScript Version 1.0 wurden Datumswerte intern als Zahl der seit dem 1. Januar 1970 verstrichenen Millisekunden gespeichert. Diese auf den ersten Blick merkwürdig anmutende Vorgehensweise bietet einen großen Vorteil: Rechenoperationen werden dadurch ermöglicht, die ansonsten nur sehr schwer und kompliziert zu implementieren gewesen wären.

Die Hauptanwendung ist hier die Berechnung der Differenz zweier Datumswerte. Wie viele Tage oder Stunden dauert es noch bis zum 1.1.2001? Wie viele Tage bin ich alt? Um wie viele Stunden ist mein Bruder/meine Schwester/mein Hund älter/jünger?

Sie nutzen dazu die Methode getTime() und ganz wenig Mathematik. Die Methode getTime() gibt die Zeit in der Datumsvariablen im Format »Millisekunden seit 1.1.1970« zurück. Wenn zwei Datumsvariablen vorliegen, deren zeitliche Differenz berechnet werden muss, so kann der Millisekundenwert beider Variablen voneinander abgezogen werden, und man hat das Ergebnis. Dieses liegt dann zwar in Millisekunden vor, aber die Umrechnung in handlichere Werte ist recht einfach. Eine Division durch 1 000 ergibt Sekunden (eine Sekunde dauert 1 000 Millisekunden); 1 000 ¥ 60 ergibt die Minuten (analog: 60 Sekunden sind eine Minute) und so fort. Die Division durch 1 000 ¥ 60 ¥ 60 ¥ 24 gibt die Zeit in Tagen an.

Noch wissen Sie nicht, wie man Benutzereingaben mit JavaScript abfängt; aus diesem Grund muss im folgenden Beispiel zum Testen an einer Variablen »herumgeschraubt« werden. Das Beispiel mit den Geburtsdaten ist heikel, wenn man vor dem 1. Januar 1970 geboren ist (aus Gründen der Abwärtskompatibilität), also wird nun die zeitliche Differenz des aktuellen, lokalen Datums zum »echten« Jahrtausendwechsel, also dem 1.1.2001, berechnet:

<HTML>
<HEAD>
<TITLE>Jahrtausendwechsel</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
var d = new Date(89, 9, 3)  //3.10.1989
var d2 = new Date(2001, 0, 1)  //1.1.2001
function differenz(){
   var dtime = d.getTime()
   var d2time = d2.getTime()
   var diff = d2time – dtime
   var diffstring = (diff/1000) + " Sekunden"
   diffstring += " oder " + (diff/(1000*60)) + " Minuten"
   diffstring += " oder " + (diff/(1000*60*60)) + " Stunden"
   diffstring += " oder " + (diff/(1000*60*60*24)) + " Tage"
   document.write("Zeitunterschied: " + diffstring)
}
//--></SCRIPT>
</HEAD>
<BODY>
<H3>Zeitunterschied</H3>
<SCRIPT LANGUAGE="JavaScript"><!--
   differenz()
//--></SCRIPT>
</BODY>
</HTML>

Abbildung 5.1 So viel Zeit vergeht noch bis zum 1. Januar 2001

Lokales Datumsformat

Mit der Methode toLocaleString() können Sie einen Datumswert an die lokalen Einstellungen (das heißt, Sprachversion des Betriebssystems und lokale Spracheinstellungen) anpassen. So recht funktionieren will das aber erst mit dem Internet Explorer 5.5, der die entsprechenden Informationen direkt aus den Daten in der Systemsteuerung holt (unter Windows, bei anderen Betriebssystemen stehen diese Informationen an anderer Stelle). In Tabelle 5.3 sehen Sie, wie drei Browserversionen das aktuelle Datum nach Anwendung von toLocaleString() ausgeben – bei identischen Einstellungen in der Systemsteuerung.

**Tabelle 5.3** Die Ergebnisse von toLocaleString()
Browser	Ausgabe (am 31. Dezember 2000, 12 Uhr mittags)
Netscape Navigator 4.7x	Sunday, December 31, 2000 12:00:00
Internet Explorer 5.0x	12/31/2000 12:00:00
Internet Explorer 5.5	Sonntag, 31. Dezember 2000 12:00:00

5.1.2 Das Objekt Math

Mit diesem Objekt, von dem man im übrigen keine Instanz erzeugen muss, können mathematische Berechnungen ausgeführt werden. Dabei spreche ich nicht von elementaren Funktionen wie etwa den vier Grundrechenarten (die, wie bereits bekannt, durch entsprechende Operatoren abgedeckt sind), sondern von den trigonometrischen Funktionen (Sinus, Kosinus etc.) oder den Exponentialfunktionen (x »hoch« y, Logarithmus etc.). In der Praxis kommen diese Funktionen jedoch eher selten vor, weswegen hier auf die Referenz verwiesen wird. Viel interessanter ist da schon die Generierung von Zufallszahlen.

Zeitbasierender Zufall

Auch wenn sporadisch auftretende Systemabstürze das Gegenteil vermuten lassen, ist im Computerbereich eigentlich nichts richtig zufällig. Oft jedoch will man seinem Besucher das Element Zufall bieten, beispielsweise könnte man sich einen zufälligen Link vorstellen. Eine Reihe von Links wird (beispielsweise in einem Array) gespeichert, und wenn ein Besucher die Seite aufruft, wird ein Link »zufällig« ausgewählt und angezeigt. Das »zufällig« ist aber hier ein Problem: Ein Computer kann keine Zufälle produzieren, er kann nur berechnen.

Aus diesem Grund muss man einen kleinen Umweg einschlagen und ein mehr oder minder zufälliges Element in die Berechnung bringen. Ein gutes Beispiel hierfür ist das aktuelle Datum (im bekannten Format »Millisekunden seit 1.1.1970«). Diese Zahl ist zumindest einigermaßen zufällig und schwer zu beeinflussen. Hat man etwa sechs Links zur Auswahl, so könnte man den Sechserrest der aktuellen Zeit (also den Rest einer Division durch sechs, eine Zahl zwischen 0 und 5) verwenden, um einen Link mehr oder minder zufällig auszuwählen.

Aus Gründen der Browserkompatibilität empfiehlt es sich, die aktuelle Zeit zuerst durch zehn zu teilen und das Ergebnis dann zu runden, weil der Internet Explorer 3 gern nur durch zehn teilbare Zeitwerte ausspuckt. In diesem Falle wären mögliche Sechserreste nur die Zahlen 0, 2 und 4, was die Auswahl der Links halbiert.

Zum Runden verwendet man die Funktion Math.round(), die den übergebenen Parameter rundet, wie Sie es in der Schule gelernt haben: Ab 0,5 wird aufgerundet, davor abgerundet. Alternativ können Sie auch Math.ceil() verwenden, das aufrundet, oder Math.floor(), das abrundet.

Der folgende Code ist zweigeteilt. Am Anfang stehen Variablen wie etwa die Links, die leicht angepasst werden können, mitunter auch von Leuten, die sich in JavaScript nicht so gut auskennen. Der zweite Teil enthält das eigentliche Programm. Dieses Vorgehen hat den Vorteil, dass der Pflegeaufwand für die Seite nicht mehr so hoch ist, da auch andere Leute Rahmenparameter anpassen können, ohne dass Sie Angst haben müssen, dass in Ihrer Programmierung herumgepfuscht wird.

<HTML>
<HEAD>
<TITLE>Zufallslink</TITLE>
</HEAD>
<BODY>
<H3>Zufallslink</H3>
<SCRIPT LANGUAGE="JavaScript"><!--
var urls = new MakeArray(3)
urls[0] = "http://www.galileo-press.de"
urls[1] = "http://www.spiegel.de"
urls[2] = "http://www.muelltonne.de"
// ab hier: nichts mehr verändern! – Der Webmaster
var d = new Date()
var t = d.getTime()
t = Math.round(t/10)  //durch 10 teilen und runden
var zufallsurl = urls[t % 3]
document.write(tag("A HREF='"+zufallsurl+"'"))
document.write(zufallsurl)
document.write(tag("/A"))
// Funktionen
function MakeArray(n){
   for (var i=0; i<n; i++)
      this[i] = 0
   this.length = n
}
function tag(s){ return "<"+s+">" }
//--></SCRIPT>
</BODY>
</HTML>

Abbildung 5.2 Ein zufälliger Link

Eingebauter Zufall

Den obigen Aufwand muss man zum Glück nicht treiben. Das Math-Objekt hat auch die Methode random(), die eine Zufallszahl zwischen 0 und 1 zurückliefert:

var z = Math.random()

Natürlich verwendet der Netscape Navigator auch einen Berechnungsalgorithmus für die Erzeugung der »Zufallszahl«, und auch dieser Algorithmus ist von der aktuellen Zeit abhängig. Auf den ersten Blick ist diese Zahl jedoch nicht besonders nützlich, da beispielsweise in obiger Anwendung eine Zahl zwischen null und fünf benötigt wird. Mit einem kleinen Trick kann man sich aber hier behelfen. Wird nämlich die Zufallszahl mit sechs multipliziert und dann abgerundet, so erhält man eine ganze Zahl zwischen null und fünf:

var z = Math.floor(6*Math.random())

Allgemein kann man das auch in einer Funktion schreiben. Die Funktion random2(n) erzeugt eine ganze Zahl zwischen 0 und n:

function random2(n){
   return Math.floor((n+1)*Math.random())
}

Hiermit kann das Beispiel mit dem Zufallslink umgeschrieben werden:

<HTML>
<HEAD>
<TITLE>Zufallslink</TITLE>
</HEAD>
<BODY>
<H3>Zufallslink</H3>
 <SCRIPT LANGUAGE="JavaScript"><!--
var urls = new MakeArray(3)
urls[0] = "http://www.galileo-press.de"
urls[1] = "http://www.spiegel.de"
urls[2] = "http://www.muelltonne.de"
// ab hier: nichts mehr verändern! -Der Webmaster
var zufallsurl = urls[random2(3)]
document.write(tag("A HREF='"+zufallsurl+"'"))
document.write(zufallsurl)
document.write(tag("/A"))
// Funktionen
function random2(n){
   return Math.floor((n+1)*Math.random())
}
function MakeArray(n){
   for (var i=0; i<n; i++)
      this[i] = 0
   this.length = n
}
function tag(s){ return "<"+s+">" }
//--></SCRIPT>
</BODY>
</HTML>

Dieses Vorgehen hat leider auch einen kleinen Nachteil: Die Funktion Math.random() ist beim Netscape Navigator 2 ausschließlich in der Unix-Version implementiert.

5.2 Browser-Erkennung

Während des gesamten Buchs werde ich mich über die Inkompatibilitäten der Browser beschweren und Sie beschwören, diese immer zu berücksichtigen, um nicht aus reiner Faulheit und/oder Arroganz einen möglichen Kunden zu verlieren. Oft werden Alternativen zu inkompatiblen Methoden angeboten, so dass gewisse Features auch auf möglichst vielen Browsern laufen. In diesem Abschnitt wird eine andere Lösung aufgezeigt. Man kann nämlich versuchen, den Browser-Typ und die Browser-Version des Benutzers zu erkennen und gewisse Browser auf spezielle Seiten, die für diesen Browser »optimiert« (ein schreckliches Wort) worden sind, umzuleiten. Wenn Sie also auf Ihren Seiten die neuesten Effekte verwenden, sollten Sie auf Ihrer Homepage den Browser des Besuchers erkennen und nur Nutzer mit neuen Browsern auf Ihre effektbeladene Seite weiterleiten; der Rest darf eine schlankere, kompatiblere Version der Seiten (die Sie hoffentlich erstellt haben!) betrachten.

Die Browser-Erkennung wurde mittlerweile von Netscape praktisch perfektioniert; der »Client Sniffer« ist weit bekannt und erkennt fast alle Unterversionen der meisten bekannten JavaScript-fähigen Browser. In der Praxis braucht man das freilich nicht so genau. Oft kann man abfragen, ob ein Browser ein Objekt unterstützt (dazu in späteren Kapiteln mehr), oder es gibt eine Möglichkeit, die Funktionalität auch mit der Urversion, also JavaScript 1.0, nachzubilden (siehe beispielsweise Arrays). Ebenso kann man mit den verschiedenen Werten für das LANGUAGE-Attribut des <SCRIPT>-Tags operieren. Wenn man jedoch mehrere Seiten in seiner Anwendung hat, die erst ab JavaScript 1.1 funktionieren, und man dann Benutzer älterer Browser schon auf der (JavaScript 1.0-kompatiblen) Homepage auf einen alternativen, schlankeren Bereich weiterleiten will, kann sich eine Browser-Erkennung lohnen. Star Division setzt so etwas beispielsweise ein – ohne jedoch eine schlankere Version der Seiten parat zu haben.

Für die Erkennung der Browser-Version gibt es ein eigenes Objekt, navigator. Man braucht davon keine Instanz zu erzeugen, sondern kann direkt darauf zugreifen. Das Objekt hat drei interessante Eigenschaften. Bei zwei Browsern, einem Netscape 4.75 unter Windows 98 und einem Internet Explorer 5.01 unter Windows 95, haben diese Eigenschaften die in Tabelle 5.4 aufgeführten Werte:

**Tabelle 5.4** Werte des navigator-Objekts bei zwei exemplarischen Browsern
Eigenschaft	Netscape 4.75 deutsch	Internet Explorer 5.01 deutsch
navigator.appName	Netscape	Microsoft Internet Explorer
navigator.userAgent	Mozilla/4.75 [de] (Win98; U)	Mozilla/4.0 (compatible; MSIE 5.01; Windows 98)
navigator.appVersion	4.75 [de] (Win98; U)	4.0 (compatible; MSIE 5.01; Windows 98)

Sie sehen insbesondere, dass man eigentlich mit navigator.appName schon einmal zwischen Netscape und Internet Explorer unterscheiden kann. Doch leider haben einige frühere Versionen des Internet Explorer als navigator.appName auch Netscape angegeben. Daher muss man auf navigator.userAgent zurückgreifen. Diese Eigenschaft hat den Aufbau Mozilla/Versionsnummer, und dahinter plattformspezifische Informationen. Bei der Versionsnummer ist der Internet Explorer so ehrlich und gibt (in vielen Versionen) zu, meistens in Sachen JavaScript eine Version hinter dem Netscape-Pendant zurückzuliegen. Der Internet Explorer 5 ist in Sachen JavaScript in etwa auf Höhe des Netscape Navigator 4, also fängt navigator.userAgent mit Mozilla/4.0 an. Insbesondere kann man also von der Zeichenkette hinter Mozilla/ keine direkten Rückschlüsse auf die Browserversionsnummer ziehen!

Ausführliche Informationen zur Browser-Erkennung finden Sie unter http://devedge.netscape.com/docs/examples/javascript/browser_type.html. In diesem Abschnitt werden nur die Versionsnummern von Netscape Navigator und Internet Explorer bestimmt. Unter der angegebenen URL finden Sie noch detailliertere Informationen, auch für Browser wie etwa Opera.

Wann ist es Netscape?

Wie Sie bereits gesehen haben, kann man mit navigator.appName nicht auf den Browser-Hersteller schließen, auch nicht dann, wenn navigator.userAgent mit Mozilla beginnet. Statt dessen muss man zusätzlich feststellen, ob man nicht einen anderen Browser hat. Andere Browser erkennt man an den folgenden Kriterien:

navigator.userAgent enthält die Zeichenkette compatible (typisch für Internet Explorer).

navigator.userAgent enthält die Zeichenkette Opera (Opera-Browser).

navigator.userAgent enthält die Zeichenkette WebTV (WebTV-Browser).

Da es zwischen Groß- und Kleinschreibung Unterschiede geben kann, empfiehlt es sich, vor den Überprüfungen navigator.userAgent in Kleinbuchstaben umwandeln. Hierzu verwendet man die Methode Zeichenkette.toLowerCase().

var ua = navigator.userAgent.toLowerCase()
var netscapebrowser = (ua.indexOf("mozilla")!=-1 && 
ua.indexOf("compatible")==-1 && ua.indexOf("opera")==-1)

Wann ist es der Internet Explorer?

Der Internet Explorer ist viel einfacher zu erkennen. Wie Sie bereits gesehen haben, schreibt der Internet Explorer in navigator.userAgent seine Versionsnummer in der folgenden Form: MSIE Versionsnummer. Es muss also einfach das Vorhandensein der Zeichenkette MSIE geprüft werden, bzw. nach der Umwandlung in Kleinbuchstaben, die Existenz der Zeichenkette msie:

var ua = navigator.userAgent.toLowerCase()
var netscapebrowser = (ua.indexOf("mozilla")>-1 && 
ua.indexOf("compatible")==-1 && ua.indexOf("opera")==-1)
var iebrowser = (ua.indexOf("msie")>-1)

Versionsnummer erkennen

Die Eigenschaft navigator.appVersion enthält die Zeichenkette nach Mozilla/ aus navigator.userAgent, zumindest für Netscape-Browser. Es gibt hier zwei Möglichkeiten, um die Versionsnummer herauszubekommen. Die Erste besteht darin, die Versionsnummer aus navigator. appVersion herauszuschneiden (die Versionsnummer endet vor dem ersten Leerzeichen), und dann mit eval() oder mit einer Multiplikation mit 1 in eine numerische Variable umzuwandeln:

var ua = navigator.userAgent.toLowerCase()
var netscapebrowser = (ua.indexOf("mozilla")!=-1 && 
ua.indexOf("compatible")==-1 && ua.indexOf("opera")==-1)
var iebrowser = (ua.indexOf("msie")>-1)
var av = navigator.appVersion

var version = av.substring(0, av.indexOf(" ")) *1

var version2 = av.substring(0, av.indexOf(".")) *1

In der Variablen version2 wird die Versionsnummer vor dem Punkt gespeichert, also im obigen Beispiel jeweils 4.

Hinweis

Der Netscape 6 meldet sich mit Versionsnummer 5.0. Da es keine Version Netscape 5 mehr geben wird, ist diese Unterscheidung eindeutig.

Die Versionsnummer eines Netscape-Browsers wurde nun direkt ermittelt. Beim Internet Explorer muss man etwas trickreicher vorgehen. Es wird an dieser Stelle darauf verzichtet, mühsam anhand einer umfangreichen Tabelle die Versionsunterschiede zwischen den Internet Explorer-Versionen herauszuarbeiten; nachfolgend kurz die Regeln, woran man die Versionen 3, 4 und 5.x erkennt:

IE3: version2 muss kleiner als 4 sein (ist 2 oder 3).

IE4: version2 muss 4 sein.

IE5: version2 ist ebenfalls 4, und navigator.userAgent enthält die Zeichenkette »MSIE 5.«).

In der folgenden, endgültigen Variante des Codes steht in der Variablen versionsnummer die Versionsnummer des Browsers, also eine ganze Zahl zwischen zwei und sechs:

var ua = navigator.userAgent.toLowerCase()
var netscapebrowser = (ua.indexOf("mozilla")!=-1 && 
ua.indexOf("compatible")==-1 && ua.indexOf("opera")==-1)
var iebrowser = (ua.indexOf("msie")>-1)
var av = navigator.appVersion
var version = av.substring(0, av.indexOf(" ")) *1
var version2 = av.substring(0, av.indexOf(".")) *1
if (netscapebrowser)

   var versionsnummer = version2

else if (iebrowser){

   if (version2<4)

      versionsnummer=3

   if (version2==4 && ua.indexOf("msie 5")==-1)

      versionsnummer = 4

   if (version2==4 && ua.indexOf("msie 5")>-1)

      versionsnummer = 5

}

Sie sehen hier, dass man den Code für den Internet Explorer beim Erscheinen einer neuen Version stets anpassen muss. Zwar könnte man versuchen, eine Gesetzmäßigkeit zu erkennen, und beispielsweise davon ausgehen, dass der Internet Explorer 6 in navigator.userAgent die Zeichenkette MSIE 6 enthält, aber zum einen hatte Microsoft immer mal wieder eine Überraschung bei navigator.userAgent parat, und was spricht zum anderen gegen eine Version 5.75¹?

Eine kleine Anekdote am Rande: Auf manchen Seiten durchsuchte man navigator.userAgent nach der Zeichenkette Mozilla/4.0; damit wollte man Internet Explorer 4 und Netscape Navigator 4 erkennen. Das ging ganz gut, auch bei den Unterversionen Netscape Navigator 4.01 bis 4.08. Die nächste Version hatte jedoch die Versionsnummer 4.5, und so kam es, dass eine gewisse Funktionalität ausgerechnet beim neuesten Browser auf dem Markt nicht funktioniert. Aus diesem Grund sollten Sie nie explizit auf eine Versionsnummer prüfen, sondern auf eine Mindestversionsnummer. Schreiben Sie also nicht

if (version2==4)

sondern:

if (version2>=4)

Weiterleitung

Alle Angaben zur URL der aktuellen Seite sind im location-Objekt gespeichert, das wiederum ein Unterobjekt des window-Objekts ist. Das window-Objekt kennen Sie ja bereits ein wenig, beispielsweise von window.alert(). Man greift also auf das location-Objekt mit window.location zu. Das window-Objekt ist jedoch das Standardobjekt unter JavaScript, der Name kann also weggelassen werden. Ein einfaches location (bzw. alert()) reicht also zum Aufruf aus.

Das location-Objekt hat mehrere Eigenschaften und Methoden. Zunächst ist für Sie die Eigenschaft href interessant, die die gesamte URL enthält. Ab Netscape Navigator 2 bzw. Internet Explorer 4 erhält man diese auch, wenn man direkt auf location zugreift, aber der Internet Explorer 3 fällt mal wieder aus der Reihe. Aus diesem Grund sollten Sie immer location.href verwenden.

Das war auch schon alles, was wissenswert war. Der folgende Code zeigt noch einmal exemplarisch auf, wie verschiedene Browser auf verschiedene Seiten umgeleitet werden. Achten Sie darauf, wie verschachtelte if-Anweisungen vermieden werden: Wenn location.href mit einem neuen Wert besetzt wird, wird die Ausführung des Skripts sofort beendet.

var ua = navigator.userAgent.toLowerCase()
var netscapebrowser = (ua.indexOf("mozilla")!=-1 && 
ua.indexOf("compatible")==-1 && ua.indexOf("opera")==-1)
var iebrowser = (ua.indexOf("msie")>-1)
var av = navigator.appVersion
var version = av.substring(0, av.indexOf(" ")) *1
var version2 = av.substring(0, av.indexOf(".")) *1
if (netscapebrowser)
   var versionsnummer = version2
else if (iebrowser){
   if (version2<4)
      versionsnummer=3
   if (version2==4 && ua.indexOf("msie 5")==-1)
      versionsnummer = 4
   if (version2==4 && ua.indexOf("msie 5")>-1)
      versionsnummer = 5
}
//Weiterleitung
if (netscapebrowser&&versionsnummer==2)
   location.href="nn2.html"
if (netscapebrowser&&versionsnummer==3)
   location.href="nn3.html"
if (netscapebrowser&&versionsnummer==4)
   location.href="nn4.html"
if (netscapebrowser&&versionsnummer==5)
   location.href="nn6.html"
if (iebrowser&&versionsnummer==3)
   location.href="ie3.html"
if (iebrowser&&versionsnummer==4)
   location.href="ie4.html"
if (iebrowser&&versionsnummer==5)
   location.href="ie5.html"

5.3 Event-Handler

Im Kapitel »Vorbereitung« schon angesprochen, werden hier noch kurz einige Event-Handler vorgestellt. Dies dient nur dazu, Ihnen einen groben Überblick zu geben; konkrete Anwendungen folgen in den nächsten Kapiteln.

onBlur: Wenn ein Fenster oder Formularfeld den Fokus verliert (nicht mehr im Vordergrund ist bzw. den Cursor enthält)

onChange: Wenn der Wert eines Formularfelds geändert wird

onClick: Beim Klicken auf einen Link oder auf ein Formularelement

onFocus: Wenn ein Fenster oder Formularfeld den Fokus erhält (Mausklick)

onLoad: Beim Laden eines Dokuments

onMouseover: Wenn mit der Maus über einen Link gefahren wird

onMouseout: Wenn der Link mit der Maus wieder verlassen wird (nach onMouseover)

onUnload: Beim Verlassen eines Dokuments

Wie Event-Handler eingesetzt werden, ist ja auch bereits bekannt. In geeigneten HTML-Tags dienen die Event-Handler als Attributsname. Der Wert des Attributs ist dann das JavaScript-Kommando, das beim Eintreten des Ereignisses ausgeführt werden soll.

5.4 Fragen & Aufgaben

1.	Wie kann man mit getTime() feststellen, ob ein Jahr ein Schaltjahr ist?

2.	Simulieren Sie eine Lottoziehung (6 aus 49 plus Zufallszahl). Achten Sie darauf, dass keine Zahl zweimal gezogen wird.

3.	Fassen Sie zwei Beispiele in diesem Kapitel zusammen: Die Zufalls-URL soll nicht als Link angezeigt, sondern direkt aufgerufen werden.

4.	Wie kann man das letzte Listing in diesem Kapitel, die Weiterleitung der verschiedenen Browser, kürzer formulieren? (Tipp: Die URLs sind nach einem bestimmten Schema aufgebaut.)

¹ Wie gesagt, aktuell ist Version 5.5, die sich nun schon seit einigen Monaten auf dem Markt ist

<< zurück

<top>

vor >>