1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: JavaScript / Anwendungsbeispiele / Persnliche Seitenbesuche zhlen mit Cookies</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie mit Hilfe von JavaScript dem Anwender beim Aufruf einer Seite mitteilen knnen, wie oft er schon auf der Seite war. Realisiert mit Hilfe von Cookies.">
<meta name="keywords" content="SELFHTML, JavaScript, Zhler, Counter, Cookies, document.cookie">
<meta name="author" content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="DC.Publisher" content="Stefan Mnz">
<meta name="DC.Date" content="2005-08-22T21:21:39+02:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/javascript/beispiele/seitenbesuche.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype" content="page">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="Anwendungsbeispiele" href="index.htm">
<link rel="next" title="Formulareingaben berprfen" href="formulareingaben.htm">
<link rel="prev" title="Monatskalender" href="monatskalender.htm">
<link rel="first" title="Zwei Frames gleichzeitig ndern" href="zweiframes.htm">
<link rel="last" title="nderungen der Fenstergre berwachen" href="fensterueberwachen.htm">
</head>
<body>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Anwendungsbeispiele</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../../index.htm"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">Persnliche Seitenbesuche zhlen mit Cookies</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#hinweise">Hinweise zu diesem Beispiel</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#quelltext">Quelltext mit Erluterungen</a><br>
</p>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/seitenbesuche.htm">Anzeigebeispiel: So sieht's aus</a></p>
</td>
</tr><tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2><a class="an" name="hinweise">Hinweise zu diesem Beispiel</a></h2>
<p>Cookies (Kekse) sind ein nicht unumstrittenes Feature, das 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 mglich wie das platzieren von ausfhrbarem Code, also etwa Viren. Denn wenn Sie in einem JavaScript einen Cookie schreiben, knnen Sie nicht angeben, wohin der Cookie beim Anwender gespeichert wird. Das kontrolliert der WWW-Browser des Anwenders. Auerdem knnen 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 lsst sich also mit einem Eintrag in einer Konfigurationsdatei vergleichen - mit dem Unterschied, dass der Cookie keine Konfigurationsdaten des Anwenderrechners ansprechen kann.</p>
<p>Durch die Mglichkeit, Daten zu speichern, werden jedoch viele neue Anwendungsbereiche fr JavaScript mglich. So auch das hier beschriebene Beispiel. Denn um zeitlich auseinanderliegende Seitenbesuche zu zhlen, muss man die Anzahl der bisherigen Seitenbesuche irgendwo fest speichern, beim nchsten Seitenbesuch wieder auslesen, den Zhler um 1 erhhen und den neuen Wert wieder speichern. Genau das tut das hier beschriebene Beispiel.</p>
<h3 class="Inf">Beachten Sie:</h3>
<p>Das Zhlen von persnlichen Seitenbesuchen ist etwas anderes als das Zhlen aller Seitenbesuche. Um alle Zugriffe auf eine Seite zu verwalten, muss das Programm seine Zhlerstnde auf dem Server-Rechner ablegen. Deshalb funktioniert ein klassischer "Counter" nur mit CGI. Das hier beschriebene Script zhlt nur, wie oft ein bestimmter Anwender eine bestimmte Seite besucht.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="quelltext">Quelltext mit Erluterungen</a></h2>
<p>Das Beispiel zeigt eine vollstndige HTML-Datei. Der Zhler gilt fr diese eine Datei.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/seitenbesuche.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html>
<head>
<title>Pers&ouml;nliche Seitenbesuche z&auml;hlen mit Cookies</title>
<script type="text/javascript">
function WertHolen () {
var Wert = "";
if (document.cookie) {
var Wertstart = document.cookie.indexOf("=") + 1;
var Wertende = document.cookie.indexOf(";");
if (Wertende == -1)
Wertende = document.cookie.length;
Wert = document.cookie.substring(Wertstart, Wertende);
}
return Wert;
}
function WertSetzen (Bezeichner, Wert, Verfall) {
var jetzt = new Date();
var Auszeit = new Date(jetzt.getTime() + Verfall);
document.cookie = Bezeichner + "=" + Wert + "; expires=" + Auszeit.toGMTString() + ";";
}
function Zaehlerstand () {
var Verfallszeit = 1000 * 60 * 60 * 24 * 365;
var Anzahl = WertHolen();
var Zaehler = 0;
if (Anzahl != "")
Zaehler = parseInt(Anzahl);
Zaehler = Zaehler + 1;
WertSetzen("Zaehler", Zaehler, Verfallszeit);
return (Zaehler);
}
</script>
</head>
<body>
<h1>Eine Seite, die etwas ber Sie wei&szlig;...</h1>
<script type="text/javascript">
var x = Zaehlerstand();
document.write("<p>Dies ist Ihr <b>" + x + ".<\/b> Besuch auf dieser Seite!<\/p>");
</script>
<p>Benutzen Sie doch mal die Reload-Funktion Ihres Browsers ...</p>
</body>
</html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<h4>Cookie lesen und gespeicherten Wert ermitteln:</h4>
<p>Die <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/funktionen.htm">Funktion</a> <code>WertHolen()</code>, die im Beispiel definiert ist, ist allgemein geschrieben. Sie knnen diese Funktion nutzen, um einen Cookie auszulesen. Wenn die Datei schon einmal einen Cookie geschrieben hat, wird dessen Wert ermittelt und zurckgegeben. Wenn noch kein Cookie existiert, wird eine leere Zeichenkette <code>""</code> zurckgegeben.</p>
<p>Mit der Abfrage <code>if(document.cookie)</code> ermittelt die Funktion, ob bereits ein Cookie vorhanden ist. Wenn ja, wird dessen Wert ermittelt. Ein Cookie besteht normalerweise aus einem Bezeichner und einem Wert, zum Beispiel:<br>
<code>Zaehler=4</code><br>
Dabei ist <code>Zaehler</code> der Bezeichner und <code>4</code> der Wert, der diesem Bezeichner zugewiesen ist. Die Funktion <code>WertHolen()</code> holt sich den Wert, indem sie mit <code>indexOf()</code>-Befehlen den Anfang und das Ende des Wertes innerhalb des gespeicherten Cookies ermittelt. Diesen Wert weist sie der Variablen <code>Wert</code> zu. Die Variable <code>Wert</code> wird am Ende der Funktion zurckgegeben.</p>
<h4>Cookie schreiben und Wert setzen:</h4>
<p>Die Funktion <code>WertSetzen()</code>, die im Beispiel definiert ist, ist ebenfalls allgemein geschrieben. Diese Funktion erwartet drei Parameter:<br>
<code>Bezeichner</code> ist das Element vor dem Istgleichzeichen, zum Beispiel <code>Zaehler</code>.<br>
<code>Wert</code> ist der Wert, der dem Bezeichner zugewiesen und mit gespeichert werden soll.<br>
<code>Verfall</code> ist eine Zahl, die als Anzahl Millisekunden interpretiert wird. Jeder Cookie, der ber die aktuelle Browser-Sitzung hinaus gespeichert bleiben soll, muss eine Angabe dazu enthalten, wann der Browser den Cookie lschen soll. Das soll verhindern, das Cookies "ewig" gespeichert bleiben. Der Verfallszeitpunkt des Cookies muss in Form des GMT-Zeitformats angegeben werden. Darum brauchen Sie sich aber nicht zu kmmern, da die Funktion <code>WertSetzen()</code> dies automatisch erledigt. Die Funktion ermittelt zu diesem Zweck die aktuelle Zeit (<code>var jetzt = new Date();</code>). In der Variablen <code>Auszeit</code> errechnet sie einen zuknftigen Zeitpunkt aus dem bergebenen Parameter <code>Verfall</code> und dem ermittelten aktuellen Zeitpunkt.</p>
<p>Mit der Anweisung, die mit <code>document.cookie</code> beginnt, wird der Cookie geschrieben.</p>
<h4>bergeordnete Funktion zum Verwalten des Cookies:</h4>
<p>Die beiden allgemeinen Funktionen <code>WertHolen()</code> und <code>WertSetzen()</code> bentigen nun noch ein paar allgemeine Anweisungen, die den Cookie verwalten. Dies geschieht im Beispiel in der Funktion <code>Zaehlerstand()</code>. Zunchst definiert diese Funktion einen Verfallswert, der spter beim Schreiben des Cookies an die Funktion <code>WertSetzen()</code> bergeben wird. Mit dem Rechenausdruck <code>1000*60*60*24*365</code> wird die Millisekundenzahl eines Jahres ermittelt. Der Cookie soll also ein Jahr lang gespeichert werden.</p>
<p>Um die persnlichen Seitenbesuche des Anwenders zu verwalten, muss die Funktion <code>Zaehlerstand()</code> folgendes tun: sie muss erstens den aktuellen Zhlerstand ermitteln, zweitens den Zhler um 1 erhhen und drittens den neuen Zhlerstand wieder speichern. Wenn noch kein Cookie vorhanden ist, d.h. wenn der Anwender die Seite zum ersten Mal besucht, muss der Zhler auf 1 gesetzt und gespeichert werden.</p>
<p>Zuerst ruft die Funktion <code>Zaehlerstand()</code> deshalb die Funktion <code>WertHolen()</code> auf, um den aktuellen Zhlerstand zu ermitteln. Der Rckgabewert von <code>WertHolen()</code> wird in der Variablen <code>Anzahl</code> gespeichert. Wenn noch kein Cookie vorhanden ist, steht in <code>Anzahl</code> anschlieend eine leere Zeichenkette <code>""</code>. Ist ein Wert vorhanden, enthlt <code>Anzahl</code> den Wert in Form einer Zeichenkette. Da man mit Zeichenketten nicht rechnen kann, zum Hochzhlen des Zhlers jedoch ein numerischer Wert bentigt wird, wird im Beispiel noch eine numerische Variable namens <code>Zaehler</code> definiert. Mit der <code>parseInt()</code>-Methode wird dieser Variablen der Wert von <code>Anzahl</code> als Zahl zugewiesen.</p>
<p>Wenn ein Cookie vorhanden ist, wird der Zhler um 1 erhht. Anschlieend wird die Funktion <code>WertSetzen()</code> aufgerufen, die den Cookie speichert. Als Bezeichner wird das Wort <code>"Zaehler"</code> bergeben, als Wert der Inhalt der Variablen <code>Zaehler</code>, und als Verfallszeitpunkt der Inhalt der Variablen <code>Verfallszeit</code>.</p>
<p>Wenn kein Cookie vorhanden ist, wird die Funktion Funktion <code>WertSetzen()</code> genauso aufgerufen. Vorher wird jedoch der Inhalt der Variablen <code>Zaehler</code> auf 1 gesetzt.</p>
<p>Am Ende gibt die Funktion <code>Zaehlerstand()</code> mit Hilfe von <code>return()</code> zurck. Damit kann diese Funktion beispielsweise an anderer Stelle fr eine Ausgabe innerhalb der Seite aufgerufen werden, so wie im Beispiel. Dort ist im <code>body</code>-Bereich ein weiterer JavaScript-Bereich notiert. Innerhalb davon wird die Funktion <code>Zaehlerstand()</code> aufgerufen, und ihr Rckgabewert, also der aktuelle Zhler, wird in der Variablen <code>x</code> gespeichert. Anschlieend wird mit <code>document.write</code> HTML-Code ins Anzeigefenster des Browsers geschrieben, wobei die Variable <code>x</code> mit ausgegeben wird.</p>
<h3 class="Inf">Beachten Sie:</h3>
<p>Opera bis Version 6 und Safari 1.0 erlauben kein Setzen von Cookies im Protokoll <code>file://</code>.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="formulareingaben.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="formulareingaben.htm">Formulareingaben berprfen</a>
</td></tr>
<tr>
<td class="doc"><a href="monatskalender.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="monatskalender.htm">Monatskalender</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Anwendungsbeispiele</a></td>
</tr>
</table>
<p>© 2005 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
