Habt ihr euch auch schon einmal gefragt, warum Google immer in der richtigen Sprache erscheint? Oder wieso bestimmte Seiten euer Betriebssystem “erraten”? All das ist ganz einfach per Javascript abfragbar.

In diesem Tutorial will ich euch zeigen, wie ihr mit Javascript verschiedene Informationen über den Benutzer abfragen könnt.

Vorraussetzungen:

• Basis HTML Kenntnisse

Lernziele:

• Arbeiten mit Variablen in Javascript
• Ausgeben von Werten mit Javascript

Hier könnt ihr euch ein Beispiel anschauen, von dem was wir erstellen werden.

Über vordefinierte Werte können wir per Javascript ganz einfach Informationen wie Bildschirmauflösung, Sprache, Betriebssystem etc. auslesen. So könnte man zum Beispiel die Seite automatisch in die richtige Sprache umwandeln lassen oder je nach Auflösung die Seite anders darstellen lassen.

In unserem Beispiel wollen wir die Werte aber einfach nur auslesen und ausgeben. Ausgeben tun wir sie indem wir vorher ein Textfeld erstellen und darein dann die Werte schreiben.

Das Auslesen der Werte habe ich in eine Funktion mit dem Namen “getInfo” geschrieben, die ich dann beim Laden des Dokuments aufrufe.

Hier der Code dazu:

So nun aber in aller Ruhe die Erkärung dazu:

var res = screen.width + “x” + screen.height Damit lesen wir die Bildschirmauflösung aus und speichern sie in der Variable “res”.

var jetzt = new Date();var zeit = jetzt.getHours() +”:”+jetzt.getMinutes()+”:”+jetzt.getSeconds();

Für die Zeit braucht es, wie ihr seht, etwas mehr Code. Zuerst erstellen wir quasi ein neues Datum mit “new Date()”. Danach lesen wir mit den Funktionen “getHours()”, “getMinutes()” und “getSeconds()” die Zeit aus. Das ganze speichern wir zusammen mit den Doppelpunkten in einer Variable.

Der Rest verläuft ähnlich:

• navigator.appName steht für den Namen des Browsers.
• navigator.appVersion steht für die Version des Browsers. Wobei wir diese mit substring(0, 4) auf 4 Zeichen beschränken.
• navigator.language steht für die Sprache die der Benutzer im Browser benutzt.
• navigator.browserLanguage steht im Internet Explorer für die Sprache die der Benutzer verwendet.
• navigator.platform steht für das Betriebssystem auf dem der Browser ausgeführt wird.

In unserem HTML Code werden wir später für jeden Wert ein Textfeld erstellen. In Javascript füllen wir diese dann mit:

document.getElementById(‘resolution’).value = res

Mit “.value” können wir den Inhalt des Textfeldes bestimmen. So verfahren wir dann auch mit den anderen Textfeldern. Mit “document.getElementById(‘ID DES ELEMENTS’)” greifen wir auf unsere Textfelder zu, die natürlich die richtige ID haben müssen!

Hier nun unser HTML Code:

Der Code sollte eigentlich klar sein. Es werden verschiedene Textfelder erstellt mit den jeweiligen IDs. Interessant ist das “readonly” welches wir zusätzlich hinzuschreiben. Damit bewirken wir, dass der User nicht in die Textfelder schreiben kann.

Experimentiert ein bisschen mit dem Code rum, wie wär’s zum Beispiel mit einer Zeit Anzeige auf der Website oder einer kleinen Box die den User in seiner Sprache begrüsst?
Fragen und Kommentare einfach in die Comments

MFG
Michael Ziörjen