HTML-Dateien selbst erstellen
Dokumentation: JavaScript
JavaScript Anwendungsbeispiele

Persönliche Seitenbesuche zählen mit Cookies


 Kurzbeschreibung
 Quellcode
 Erläuterungen zum Quellcode
 Beispiel testen: so sieht's aus


Kurzbeschreibung

Cookies (Kekse) sind ein nicht unumstrittenes Feature, daß Netscape in JavaScript eingebaut hat. Cookies erlauben einem JavaScript-Programm, Daten auf der Festplatte des Anwenders zu speichern. Dies geschieht jedoch in kontrollierter Form. Ein "Ausspionieren" der Anwenderfestplatte ist dabei ebenso wenig möglich wie das Plazieren von ausführbarem Code, also etwa Viren. Denn wenn Sie in einem JavaScript einen Cookie schreiben, können Sie nicht angeben, wohin der Cookie beim Anwender gespeichert wird. Das kontrolliert der WWW-Browser des Anwenders. Außerdem können Cookies keine unkontrollierten Datenmengen auf den Anwenderrechner schreiben, sondern nur eine begrenzte Anzahl von Zeilen. Jede solcher Zeilen definiert eine Variable und weist dieser Variablen einen Wert zu. Ein Cookie läßt sich also mit einem Eintrag in einer Konfigurationsdatei vergleichen - mit dem Unterschied, daß der Cookie keine Konfigurationsdaten des Anwenderrechners ansprechen kann.

Durch die Möglichkeit, Daten zu speichern, werden jedoch viele neue Anwendungsbereiche für JavaScript möglich. So auch das hier beschriebene Beispiel. Denn um zeitlich auseinanderliegende Seitenbesuche zu zählen, muß man die Anzahl der bisherigen Seitenbesuche irgendwo fest speichern, beim nächsten Seitenbesuch wieder auslesen, den Zähler um 1 erhöhen und den neuen Wert wieder speichern. Genau das tut das hier beschriebene Beispiel.

Beachten Sie:

Das Zählen von persönlichen Seitenbesuchen ist etwas anderes als das Zählen aller Seitenbesuche. Um alle Zugriffe auf eine Seite zu verwalten, muß das Programm seine Zählerstände auf dem Server-Rechner ablegen. Deshalb funktioniert ein klassischer "Counter" nur mit CGI. Das hier beschriebene Script zählt nur, wie oft ein bestimmter Anwender eine bestimmte Seite besucht.

Das hier beschriebene Beispiel funktioniert nur mit Netscape. Der MS Internet Explorer kennt zwar auch Cookies, doch haben diese einen anderen Aufbau und richten sich nicht nach dem von Netscape eingeführten Schema. Das Beispiel ist jedoch so konzipiert, daß die Ausführung des Programmcodes beim MS Internet Explorer vermieden wird.

Quellcode

Beispiel
Anzeigebeispiel: So sieht's aus

Studieren Sie das Beispiel aufmerksam und lesen Sie anschließend die Erläuterungen dazu. Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen, z.B. (1). Diese Verweise gehören nicht zum Quellcode. Falls Sie das Beispiel in einen Editor kopieren, müssen Sie diese Verweise löschen. Andernfalls erhalten Sie JavaScript-Fehlermeldungen.

Quellcode:

 <html>
 <head>
 <title>Hier den Titel der Datei eingeben</title>
 <script language="JavaScript">
 <!--
 (1) 
 if(navigator.appName =="Netscape")
     Zaehlerstand();

 (2) function Zaehlerstand() 
    {
      var Zahlstart, Zahlende, Anzahl;
      (3) if(window.document.cookie) 
        {
         Zahlstart = window.document.cookie.indexOf("=") + 1;
         Zahlende = window.document.cookie.indexOf(";");
         if (Zahlende == -1) 
            Zahlende = window.document.cookie.length;
         Anzahl = parseInt(window.document.cookie.substring(Zahlstart, Zahlende));
         Anzahl++;
         window.document.cookie = "Zaehler=" + Anzahl + "; expires=31-Dec-97 GMT";
       }
      else
       {
         window.document.cookie = "Zaehler=1; expires=31-Dec-97 GMT";
         Anzahl = 1;
       }
     (4) window.alert("Dies ist Ihr " + Anzahl + ". Besuch auf dieser Seite!");
   }
 //-->
 </script>
 </head>
<body>
 
 Hier den Inhalt der HTML-Datei eingeben
 
 </body>
 </html>

Erläuterungen zum Quellcode

(1) JavaScript beim Aufruf der Datei ausführen
Das JavaScript im  Beispiel ist so konzipiert, daß es beim Aufruf der Seite automatisch ausgeführt wird. Das liegt daran, daß im definierten  JavaScript-Bereich am Anfang direkt JavaScript-Code steht. Zunächst steht dort eine  bedingte Anweisung mit if. Darin wird mit Hilfe des  navigator-Objekts abgefragt, welchen WWW-Browser der Anwender benutzt. Falls es sich um Netscape handelt, wird eine  Funktion Zaehlerstand() aufgerufen. Diese Funktion verwaltet den Cookie zum Setzen und Auslesen des Zählerstands. Falls der Anwender einen anderen WWW-Browser als Netscape benutzt, wird die Funktion nicht aufgerufen, und das JavaScript ist beendet. Auf diese Weise wird vermieden, daß Anwender, die zum Beispiel den MS Internet Explorer benutzen, eine fehlerhafte Ergebnisanzeige erhalten.

(2) Funktion Zaehlerstand()
In der Funktion Zaehlerstand() im  Beispiel werden zunächst einige benötigte  Variablen definiert:
Zahlstart und Zahlende sind zwei Werte, in denen festgehalten wird, an welcher Stelle innerhalb des Cookie-Eintrags der eigentliche Zählerstand steht. Anzahl ist eine Variable, in der der Zählerstand numerisch gespeichert wird. Mehr dazu weiter unten.

(3) Cookie prüfen, Zähler ermitteln, erhöhen und speichern
Die Anweisung if(window.document.cookie) im  Beispiel prüft, ob bereits ein Cookie von der aktuellen Datei gesetzt wurde. Beim ersten Aufruf der Datei ist das natürlich noch nicht der Fall. In diesem Fall gibt es auch noch noch keinen vorhandenen Zählerstand. Der Cookie muß also zum ersten Mal geschrieben werden, und der Zähler wird dabei auf 1 gesetzt. Das geschieht im else-Zweig der Abfrage if(window.document.cookie). In der Anweisung window.document.cookie = "Zaehler=1; expires=31-Dec-97 GMT"; können Sie auch sehr gut den Aubau eines solchen Cookie-Eintrags erkennen. Mit window.document.cookie=... wird der Cookie auf den Rechner des Anwenders geschrieben und dort gespeichert. Wie Sie sehen, können Sie dabei nicht angeben, wo der Cookie gespeichert werden soll. Das entscheidet der WWW-Browser. Im Beispiel wird der Eintrag Zaehler=1 gespeichert. Dahinter folgt, durch ein Semikolon getrennt, ein "Verfallsdatum" für den Cookie. Mehr dazu weiter unten.

Wenn die Seite bereits einmal besucht und ein Cookie gesetzt wurde, verzweigt das Programm in den Anweisungsblock, der unterhalb if(window.document.cookie) steht. Dort gilt es zunächst einmal, den aktuellen Zählerstand auszulesen. Wie Sie bei der Anweisung zum Setzen eines Cookies bereits gesehen haben, ist ein Cookie nichts anderes als eine Zeile in einer Datei, also eine einfache Zeichenkette. Deshalb lassen sich darauf auch Eigenschaften und Methoden des  string-Objekts anwenden. Die beiden Anweisungen Zahlstart=... und Zahlende=... ermitteln mit Hilfe der string-Objektmethode indexOf() die Positionen innerhalb der Cookie-Zeichenkette, an denen die Zahl für den Zählerstand beginnt und aufhört. Falls der Cookie-Eintrag aus irgendeinem Grund fehlerhaft ist und das Begrenzungszeichen für das Zahlende (das Semikolon) nicht gefunden wird, wird als Zahlende einfach das Ende des gesamten Cookie-Eintrags festgelegt. Diese Sicherheitsabfrage geschieht mit der Abfrage if (Zahlende == -1) Zahlende = window.document.cookie.length;.

Um den Zähler um 1 zu erhöhen, muß er in Form einer Zahl vorliegen, mit der sich rechnen läßt. Deshalb muß der Teil der Cookie-Zeichenkette, der den Zählerstand enthält, in einen numerischen Wert umgewandelt werden. Das geschieht mit der Anweisung Anzahl = parseInt(window.document.cookie.substring(Zahlstart, Zahlende));. Die  objektunabhängige Funktion parseInt() leistet diese Umwandlung. Das Ergebnis, also der Zählerstand in numerischer Form, wird in der Variablen Anzahl gespeichert.

Mit Anzahl läßt sich rechnen. Die Anweisung Anzahl++; erhöht den in der Variablen gespeicherten Wert um 1.

Dieser neue Wert muß anschließend wieder als Cookie gespeichert werden. Denn was in der Variablen steht, geht verloren, sobald das Programm beendet ist. Nur weil ein Cookie auf den Rechner des Anwenders geschrieben wird, steht der Zählerstand beim nächsten Aufruf der Datei wieder zur Verfügung. Der Cookie wird wieder mit window.document.cookie= geschrieben. Eine Rückumwandlung des numerischen Werts in eine Zeichenfolge ist in solchen Fällen bei JavaScript nicht nötig. Sie können den numerischen Wert also einfach mit anderen Zeichenfolgen zu einer Zeichenkette verknüpfen, so wie im Beispiel.

(4) Zählerstand am Bildschirm ausgeben
Der aktuelle Zählerstand wird schließlich in einem Meldungsfenster am Bildschirm ausgegeben, damit der Anwender auch sieht, wie oft er schon die betreffende Datei aufgerufen hat. Natürlich können Sie auch andere Befehle benutzen, um den Zähler anzuzeigen, zum Beispiel window.document.write().

"Verfallsdatum" von Cookies
Jeder Cookie sollte ein Verfallsdatum erhalten. Falls Sie kein solches Datum angeben oder einen unrealistischen Wert (z.B. den 1. Januar 4000), setzt der WWW-Browser den Eintrag selbständig auf einen realistischen Wert. Ein Verfallsdatum notieren Sie hinter dem eigentlichen Cookie-Eintrag, durch ein Semikolon getrennt. Das Format muß so sein wie im obigen  Beispiel. Geben Sie Tag-Monat-Jahr durch Bindetriche getrennt und ohne Leerzeichen dazwischen ein. Das Jahr muß zweistellig notiert werden. Als Monatskürzel sind erlaubt: Jan (für Januar), Feb (für Februar), Mar (für März), Apr (für April), May (für Mai), Jun (für Juni), Jul (für Juli), Aug (für August), Sep (für September), Oct (für Oktober), Nov (für November), Dec (für Dezember). Am Ende müssen die drei Grossbuchstaben GMT (steht für Greenwich Meridian Time) stehen.


Blättern:
Taschenrechner     Dynamische grafische Buttons

HTML-Dateien selbst erstellen
Dokumentation: JavaScript
JavaScript Anwendungsbeispiele

© 1997  Stefan Münz, s.muenz@euromail.com