Browserinformationen

So funktioniert das Script

Das Script hat nur zwei Teile: Zuerst sammelt es alle Angaben in einer Liste, dann baut es aus dieser Liste die Tabellenzeilen. Es braucht keinen Knopf, weil es beim Laden der Seite einmal durchläuft — das Script steht dafür unter der Tabelle, damit diese beim Ausführen schon existiert.

const zeilen = [
  ["Browsername", navigator.appName],
  ["Code-Name", navigator.appCodeName],
  ["Version", navigator.appVersion.substring(0, 4)],
  ["Plattform", navigator.platform]
];

Das ist ein Array, also eine Liste — und jeder Eintrag darin ist selbst wieder eine kleine Liste aus Beschriftung und Wert. Diese Schreibweise trennt sauber die Daten von der Darstellung: Wer eine weitere Zeile in der Tabelle haben möchte, schreibt hier ein Paar dazu und muss am restlichen Script nichts ändern. Wer eine Zeile nicht braucht, löscht sie einfach heraus.

Die Werte kommen aus zwei eingebauten Objekten, die jeder Browser bereitstellt: navigator beschreibt den Browser selbst, screen den Bildschirm. Beides steht immer zur Verfügung, ohne dass man etwas laden müsste. appVersion.substring(0, 4) schneidet aus der langen Versionsangabe die ersten vier Zeichen heraus — substring(von, bis) arbeitet dabei ab Position 0.

const javaAn = typeof navigator.javaEnabled === "function" && navigator.javaEnabled();

Hier steckt eine Vorsichtsmaßnahme, die im Original noch nicht nötig war. navigator.javaEnabled() ist eine veraltete Funktion, die manche Browser inzwischen entfernt haben — ein Aufruf würde dort das ganze Script mit einem Fehler abbrechen. typeof … === "function" prüft deshalb erst, ob es die Funktion überhaupt gibt. Nur wenn ja, wird sie durch das && auch tatsächlich aufgerufen. Dieses Muster ist bei alten Browser-Funktionen immer eine gute Idee.

const koerper = document.getElementById("bi-tabelle");
koerper.textContent = "";

In der Tabelle steht im HTML ein Hinweis für den Fall, dass JavaScript abgeschaltet ist. Läuft das Script, wird dieser Platzhalter mit textContent = "" entfernt: Einem Element einen leeren Text zuzuweisen löscht seinen kompletten Inhalt. Danach ist der Tabellenkörper leer und bereit für die echten Zeilen.

zeilen.forEach(function (zeile) {
  const reihe = document.createElement("tr");
  const bezeichnung = document.createElement("th");
  bezeichnung.textContent = zeile[0];

forEach ist die bequeme Art, eine Liste durchzugehen: Für jeden Eintrag ruft es die angegebene Funktion einmal auf und übergibt ihr den Eintrag — hier also das Paar aus Beschriftung und Wert. zeile[0] ist die Beschriftung, zeile[1] der Wert; gezählt wird ab 0. Mit document.createElement() entsteht ein neues, noch freischwebendes Element, das anschließend gefüllt wird.

reihe.appendChild(bezeichnung);
reihe.appendChild(wert);
koerper.appendChild(reihe);

appendChild() hängt ein Element als letztes Kind in ein anderes. Erst wandern die beiden Zellen in die Zeile, dann die fertige Zeile in den Tabellenkörper — genau in dem Moment erscheint sie auf dem Bildschirm. Das Original löste dieselbe Aufgabe mit document.write(), das den Tabellen-Code als Text in die Seite schrieb. Das funktioniert nur während des allerersten Seitenaufbaus; wird es später aufgerufen, löscht es die gesamte Seite. Der Weg über createElement hat diese Falle nicht und ist deshalb heute der übliche.

Zum Anpassen: Weitere interessante Werte sind navigator.languages (alle bevorzugten Sprachen), navigator.hardwareConcurrency (Zahl der Prozessorkerne) und window.devicePixelRatio (Bildpunkte pro CSS-Pixel, auf hochauflösenden Schirmen 2 oder mehr). Ein Paar wie ["Prozessorkerne", navigator.hardwareConcurrency] in der Liste genügt, und die Zeile erscheint.