Die kleine JavaScript-Datenbank
Um einen neuen Eintrag vorzunehmen, füllen Sie bitte die folgenden Felder aus und klicken dann auf Eintrag hinzufügen.
Alle bisherigen Einträge anschauen können Sie, indem Sie Einträge anschauen anklicken.
Sie können die Datensätze auch als Cookie-Datei abspeichern und wieder laden (BETA: funktioniert nur mit weniger als 20 Datensätzen, nimmt beim Laden nur die neuesten Sätze und zeigt die anderen als 'undefinded' an).
Der Sourcecode
1 <SCRIPT LANGUAGE="JavaScript">
2 // Formular auf fehlende Einträge überprüfen. Ist alles da, nächste Funktion aufrufen.
3
4 function check(form) {
5 if (form.elements[0].value == "" || form.elements[1].value == "" || form.elements[2].value == "") {
6 alert("Geben Sie bitte die fehlenden Daten ein!")
7 } else {
8 testResults (form)
9 }
10 }
11
12 // Die Alterseingabe überprüfen. Sie muss aus Zahlen bestehen. Masterfunktion für die nächste Funktion.
13
14 function testResults (form) {
15 TestVar = isNumberString (form.elements[2].value)
16 if (TestVar == 1) {
17 addrec()
18 } else {
19 alert("Geben Sie bitte eine gültige Altersangabe ein!")
20 }
21 }
22
23 // Slavefunktion der obigen. Vergleicht jedes Zeichen der Eingabe mit Referenzstring.
24
25 function isNumberString (InString) {
26 var RefString="1234567890"
27 for (Count=0; Count < InString.length; Count++) {
28 TempChar = InString.substring (Count, Count+1)
29 if (RefString.indexOf (TempChar, 0) == -1) {
30 return (false)
31 }
32 }
33 return (true)
34 }
35
36 // Initialisiert die Datenbank. Setzt Variablen auf Null und erstellt neuen Array.
37
38 function init() {
39 recidx = 0
40 record = new Array ()
41 }
42
43 // Erstellt zweidimensionalen Array und weist die Eingaben zu. Zählt Anzahl Datensätze und löscht Formular.
44
45 function addrec() {
46 record[recidx] = new Array ()
47 record[recidx][0] = document.bio.firstname.value
48 record[recidx][1] = document.bio.lastname.value
49 record[recidx][2] = document.bio.age.value
50 record[recidx][3] = document.bio.sex[1].checked
51 record[recidx][4] = document.bio.income.selectedIndex
52
53 recidx++
54 document.bio.clear.click()
55 }
56
57 /* Prüft, welche Anzeige-Version gewählt ist (Standard oder sortiert).
58 Definiert neues Fenster für Anzeige der Datensätze.
59 Zeigt zuerst die Anzahl Datensätze.
60 Ändert wenn nötig das Geschlecht (Standard ist weiblich).
61 Definiert, in welcher Reihenfolge die Daten angezeigt werden.
62 Erstellt einen Button, um das Fenster zu schliessen.
63 */
64
65 function viewrec() {
66 stufe = new Array ()
67
68 if(document.bio.order.checked) {
69 ordered()
70 } else {
71 viewwin = window.open("","Anzeige","status=no,scrollbars=yes,width=640,height=400")
72 viewwin.document.writeln("<H2>" + recidx + " Einträge zurzeit:</H2><P><HR><P>")
73 for(var j = 0; j < recidx; j++) {
74 if (record[j][3] == true) {
75 sex = "weiblich"
76 } else {
77 sex = "männlich"
78 }
79 if (record[j][4] == 0) {
80 stufe[j] = "< 10'000"
81 }
82 if (record[j][4] == 1) {
83 stufe[j] = "10'000 - 20'000"
84 }
85 if (record[j][4] == 2) {
86 stufe[j] = "20'000 - 40'000"
87 }
88 if (record[j][4] == 3) {
89 stufe[j] = "40'000 - 80'000"
90 }
91 if (record[j][4] == 4) {
92 stufe[j] = "> 80'000"
93 }
94 viewwin.document.write("<H3>" + record[j][0] + " " + record[j][1] + "</H3>")
95 viewwin.document.write("<H4><I>Alter: </I>" + record[j][2] + "<BR><I>Sex: </I>" + sex + "<BR><I> Einkommensstufe: </I>" + stufe[j] + "<P><HR><P>")
96 }
97 viewwin.document.writeln("<P><FORM><INPUT TYPE=button VALUE='Ansichtsfenster schliessen' onClick='window.close()'></FORM>")
98 }
99 }
100
101 /* Definiert neuen zweidimensionalen Array.
102 Ändert wenn nötig das Geschlecht (Standard ist weiblich).
103 Holt Daten aus dem Eintrag-Array, kombiniert sie und weist sie dem neuen Array zu.
104 Sortiert den neuen Array alphabetisch.
105 */
106
107 function ordered() {
108 sorted = new Array ()
109 sorted[recidx] = new Array ()
110
111 for (var m = 0; m < recidx; m++) {
112 if (record[m][3] == true) {
113 sexO = "w"
114 } else {
115 sexO = "m"
116 }
117 sorted[m] = (record[m][0] + " " + record[m][1] + ", " + record[m][2] + ", " + sexO)
118 }
119
120 sorted.sort()
121 viewOrderedWin()
122 }
123
124 /* Definiert neues Ausgabefenster für die sortierte Ausgabe.
125 Zeigt Anzahl Einträge an.
126 Zeigt die sortierten Datensätze an.
127 */
128
129 function viewOrderedWin() {
130 viewOwin = window.open("","Anzeige_sortiert","status=no,scrollbars=yes,width=640,height=400")
131 viewOwin.document.writeln("<H2>" + recidx + " Einträge zurzeit:</H2><P>")
132 for(var k = 0; k <= recidx; k++) {
133 viewOwin.document.write("<H3>" + sorted[k] + "</H3><P><HR><P>")
134 }
135 viewOwin.document.writeln("<P><FORM><INPUT TYPE=button VALUE='Ansichtsfenster schliessen' 136 onClick='window.close()'></FORM>")
137 }
138
139 // Bereitet die Daten zum Schreiben als Cookie vor
140
141 function cookieMonster() {
142 cMonster = new Array ()
143 cMonster[recidx] = new Array ()
144 stufeC = new Array ()
145
146 for (var r = 0; r < recidx; r++) {
147 if (record[r][3] == true) {
148 sexC = "w"
149 } else {
150 sexC = "m"
151 }
152 if (record[r][4] == 0) {
153 stufeC[r] = "< 10'000"
154 }
155 if (record[r][4] == 1) {
156 stufeC[r] = "10'000 - 20'000"
157 }
158 if (record[r][4] == 2) {
159 stufeC[r] = "20'000 - 40'000"
160 }
161 if (record[r][4] == 3) {
162 stufeC[r] = "40'000 - 80'000"
163 }
164 if (record[r][4] == 4) {
165 stufeC[r] = "> 80'000"
166 }
167 cMonster[r] = (record[r][0] + " " + record[r][1] + ", " + record[r][2] + ", " + sexC + ", " + stufeC[r])
168 }
169
170 cMonster.sort()
171 cookieMonsterWrite()
172 }
173
174 // Schreibt die Datensätze als Cookies auf die Festplatte und erinnert sich damit an sie, wenn der User zwischendurch
175 // ausgeloggt war.
176
177 var arr
178 function cookieMonsterWrite() {
179 arr = new Array ()
180 var theDate = new Date ()
181 theDate.setMonth(theDate.getMonth()+1)
182 for (var n = 0; n <= recidx; n++) {
183 arr[n] = "Cookie" + n
184 document.cookie = arr[n] + "=" + cMonster[n] + "; expires=" + theDate.toGMTString()
185 }
186 }
187
188 // Cookies mit den gespeicherten Einträgen laden
189
190 var number = 0
191 var cookieLoad
192 function getIt() {
193 cookieLoad = new Array ()
194 var str = document.cookie
195 if (str != "") {
196 var str1 = str.split(";")
197 for (var o = 0; o < str1.length; o++) {
198 var pivot = str1[o].split("=")
199 cookieLoad[o] = pivot[1]
200 number++
201 }
202 }
203 viewCookieWin()
204 }
205
206 // Neues Fenster für die Cookie-Ansicht
207
208 function viewCookieWin() {
209 viewCwin = window.open("","Cookie_Anzeige_sortiert","status=no,scrollbars=yes,width=640,height=400")
210 viewCwin.document.writeln("<H2>" + number + " Einträge zurzeit:</H2><P>")
211 for(var p = 0; p < number; p++) {
212 viewCwin.document.write("<H3>" + cookieLoad[p] + "</H3><P><HR><P>")
213 }
214 viewCwin.document.writeln("<P><FORM><INPUT TYPE=button VALUE='Ansichtsfenster schliessen' 215 onClick='window.close()'></FORM>")
216 }
217
218 </SCRIPT>
219 </HEAD>
220
221 <BODY BGCOLOR="#FFFFFF" onLoad="init()">
222
223 <P><H2>Die kleine JavaScript-Datenbank</H2></P>
224 <FORM NAME="bio">
225 <P>
226 <H3>Geben Sie bitte die vollständigen Daten ein:</H3>
227 Vorname <INPUT TYPE="text" SIZE="10" NAME="firstname"> Nachname <INPUT TYPE="text" SIZE="10"
228 NAME="lastname"> Alter <INPUT TYPE="text" SIZE="3" NAME="age">
229 </P>
230 <P>
231 <INPUT TYPE="radio" NAME="sex">Mann<BR><INPUT TYPE="radio" CHECKED NAME="sex">Frau
232 </P>
233 <P>
234 Einkommensstufe:<BR>
235 <SELECT NAME="income" SIZE="1">
236 <OPTION><10'000
237 <OPTION>10'000 bis 20'000
238 <OPTION SELECTED>20'000 bis 40'000
239 <OPTION>40'000 bis 80'000
240 <OPTION>>80'000
241 </SELECT>
242 </P>
243 <HR WIDTH=85% NOSHADE>
244 <P>
245 <INPUT TYPE="reset" NAME="clear" VALUE="Formular löschen"><P>
246 <INPUT TYPE="button" NAME="add" VALUE="Eintrag hinzufügen" onClick="check(form)">
247 <INPUT TYPE="button" NAME="view" VALUE="Einträge anschauen" onClick="viewrec()"><INPUT TYPE="checkbox" NAME="order">in alphabetischer Reihenfolge<P>
248 <INPUT TYPE="button" NAME="save" VALUE="Datensätze speichern (max. 20)" onClick="cookieMonster()">
249 <INPUT TYPE="button" NAME="load" VALUE="Datensätze laden" onClick="getIt()"><P>
250 </P>
251 </FORM>
Erläterungen zum Sourcecode
Bevor Sie sich mit dem Sourcecode oder den Erläuterungen dazu beschäftigen, sollten Sie sich das gesamte Dokument ausdrucken (9 Seiten A4). Sie vereinfachen sich damit die Arbeit wesentlich.
Die Funktion init() wird gebraucht, um die Datenbank beim Laden der Seite zu initialisieren. Sie erstellt einen Array für die Daten und setzt die Anzahl Datensätze auf Null. Addrec() erstellt einen Unter-Array und weist diesem die eingegebenen Daten zu. Die Anzahl Datensätze wird um eins erhöht und der Formularinhalt gelöscht.
Die Funktion viewrec() prüft zuerst, ob die Checkbox für die sortierte Ansicht aktiviert ist. Wenn nicht, öffnet sie ein neues Browserfenster, in das die Daten geschrieben werden. Der Loop von Zeile 73 bis 96 wiederholt sich solange, bis alle Sätze ausgegeben sind. Dabei wird zunächst das Geschlecht angepasst: Als Standard ist weiblich aktiviert. Wenn diese Variable durch die Eingabe nicht geändert wurde, ist sie wahr, die Ausgabe wird nicht angepasst. Ist die Variable falsch, wechselt die Geschlechtsanzeige auf männlich. Ähnlich wird auch das Einkommensniveau angepasst. Eingelesen wird hier in Zeile 51 nur der ausgewählte Index aus der Liste, dem dann der entsprechende Wert wieder zugeordnet werden muss. Die Zeilen 94 und 95 schliesslich definieren das Aussehen des Datensatzes im Anzeigefenster.
Die nächste Funktion, ordered(), wird aufgerufen, wenn die Checkbox für die sortierte Ansicht aktiviert ist. Hier wird ein neuer zweidimensionaler Array erstellt, der die zu sortierenden Datensätze zwischenspeichert. Auch hier wird dann die Geschlechtsvariable angepasst, bevor die Daten als String dem Array zugewiesen werden. Zeile 120 sortiert diesen Array alphabetisch, dann wird das Fenster für die Ausgabe aufgerufen. Dieses funktioniert genau gleich wie viewrec(): Ein Loop sorgt dafür, dass alle Sätze ausgegeben werden.
Die Funktion cookieMonster() bereitet die Daten auf das Speichern als Cookie vor. Wie in den schon beschriebenen Funktionen werden dafür zunächst das Geschlecht und die Einkommensstufe angepasst. Dann wird der Array mit einem String, der die Daten kombiniert, gefüllt und alphabetisch sortiert. Schliesslich wird die für das Schreiben verantwortliche Funktion cookieMonsterWrite() aufgerufen.
Auch diese Funktion erstellt zuerst einen neuen Array, in dem die Einträge in die Cookie-Datei geordnet werden. Dann wird die Gültigkeitsdauer auf einen Monat festgelegt und mit einem Loop die einzelnen Cookies benannt und als String in die Datei geschrieben.
Eingelesen werden die Cookies zu einem späteren Zeitpunkt durch die Funktion getIt(). Diese checkt zuerst, ob überhaupt entsprechende Cookies vorliegen. Sind solche vorhanden, werden die Datensätze voneinander getrennt, bevor schliesslich das neue Ausgabefenster aufgerufen und mit den einzelnen Sätzen gefüllt wird.
© 1997 mva for Windows Guide Schweiz