| 4/4 |
|
INHALT
Inhaltsüberprüfung von Formularen (2/4) Statements (3/4) Arrays (4/4) Cookies (4/4) |
. | Arrays Daten müssen für die Bearbeitung im Computer gut sortiert sein. JS ermöglicht diese Ordnung mit den Arrays. Diese sind ein Set von Unterelemente – Daten werden also in Gruppen organisiert. Ein Array kann beliebig viele Elemente und jedes Element beliebige Inhalte oder Datentypen haben. Arrays sind in JS recht einfach zu implementieren. Zuerst wird er mit einem Namen definiert, dann werden die Daten zugeordnet. Die Syntax sieht so aus:
Zum Beispiel erstellen wir einen Array mit dem Namen Zeitschriften. Dieser Array kann jetzt beliebig viele Einträge erhalten, beispielsweise GEO, Fit for Fun, Annabelle etc. Jedes dieser Elemente hat seine Indexnummer, beginnend mit Null, die seine Position im Array beschreibt. Das sieht dann so aus:
So gesehen, ist ein Array nichts anderes als ein Karteikasten, dessen Inhalt durch Indexnummern gekennzeichnet wird. Dadurch sind die einzelnen Elemente zum Beispiel für Funktionen leicht zugänglich. Arrays können mit drei eingebauten JS-Methoden manipuliert werden, join(), reverse() und sort(). Diese Methoden sind ziemlich simpel, reverse() invertiert einfach den gesamten Array, während sort() den Inhalt alphabetisch sortiert. Die join()-Methode liest ein einzelnes Element aus dem Array und konvertiert es in einen String. • Zweidimensionale Arrays: An und für sich sind gewöhnliche Arrays durch ihre Eindimensionalität ein recht simples Konzept. Mehr Flexibilität erhält man durch zwei Dimensionen, in denen jedes Element selber ebenfalls ein Array sein kann. Jedes Element kann dadurch selber wieder Elemente beinhalten. Eine Abwandlung des obigen Beispiels zeigt, was man sich darunter vorzustellen hat:
Hier wird zuerst ein Array Zeitschriften definiert, der für sich allein einfach ein Reihe von Zeitschriftentiteln speichern kann, ohne sie genauer zu spezifizieren oder zu sortieren. Wenn Sie gezielt nur auf die Musikmagazine zugreifen wollen, wird das in einem solchen eindimensionalen Array ziemlich schwierig, wenn nicht sogar unmöglich. JS kann anhand eines Eintrags nicht zwischen dem einen und dem anderen unterscheiden. Deshalb werden in diesem ersten Array zwei neue eingeführt, die zwar ihrerseits auch wieder nur eine Liste an Titeln speichern. Weil sie aber Unter-Arrays von Zeitschriften sind, können sie diese sortiert speichern. Zeitschriften[0] speichert die Musikmagazine, Zeitschriften[1] die Frauenzeitschriften. So können die Frauenzeitschriften im weiteren Verlauf eines Scripts von den Musikmagazinen getrennt behandelt und verarbeitet werden. Die kleine JavaScript-Datenbank Selbstverständlich könnte diese Datenbank noch ausgebaut werden, beispielsweise indem weitere Daten eingelesen oder das aktuelle Datum in den Satz integriert werden. Es wäre auch denkbar, eine Produkteliste einzubauen und Datensätze an eine bestimmte E-Mail-Adresse zu schicken, gleichsam eine Art einfaches Online-Bestellsystem zu entwickeln. Von diesem Beispiel können wir leider aus Platzgründen den Sourcecode nicht abdrucken. Sie finden ihn in einer kommentierten Fassung hier. Das Script besteht hauptsächlich aus insgesamt 12 Funktionen und zahlreichen Arrays. Dazu kommen verschiedene Loops und Variablen. Damit ist das meiste, was wir in diesem Workshop behandelt haben, irgendwo im Script integriert und es dient gleichzeitig als Beispiel, wie verschiedene Funktionen sich gegenseitig beeinflussen und zusammenarbeiten können. Die drei ersten Funktionen haben wir in diesem zweiten Teil des JavaScript-Workshops bereits besprochen – sie überprüfen, ob alle Eingabefelder ausgefüllt sind und ob die Altersangabe eine Zahl ist. Sie wurden nur leicht angepasst. 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 das Formular 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. Dann wird ein Loop gestartet, der sich solange wiederholt, bis alle Datensä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 von addrec() nur der ausgewählte Index aus der Liste, dem dann der entsprechende Wert wieder zugeordnet werden muss. Schliesslich definieren wir 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. Darauf wird dieser Array alphabetisch sortiert und 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 Sichern 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. Cookies Kurz, alle Schauermärchen, die Sie über Cookies lesen konnten, sind nicht wahr. Man wird durch sie nicht zum gläsernen User, und noch niemandem wurde mit einem Cookie die Festplatte geleert oder das Bankkonto geplündert. Cookies haben einen einzigen Zweck: Informationen über den User oder seine Eingaben in ein Formular auf dessen eigener Festplatte zu speichern, damit sie bei einem weiteren Besuch der Site wieder zur Verfügung stehen und nicht erneut eingegeben werden müssen. Auf diese Weise werden dann konfigurierbare Nachrichten-Sites wie ‘My Yahoo’ (http://www.myyahoo.com) oder auch das Diskussionsforum bei Windows Guide Online möglich. In letzterem werden das Datum des letzten Besuchs und der Index der neuesten Nachricht als Cookie gespeichert, damit bei einem nächsten Besuch nur die neuesten Meldungen angezeigt werden. Cookies werden automatisch in ein vom Browser generiertes ASCII-Textfile geschrieben und können damit absolut keinen Schaden anrichten. Wenn es Sie interessiert, welche von Ihnen besuchten Sites ein Cookie hinterlassen haben, werfen Sie mal einen Blick in die Datei cookies.txt, die Sie im Windows-Verzeichnis finden. Sowohl Navigator als auch der Internet Explorer bieten übrigens eine Option, mit der der Empfang von Cookies ganz unterbunden oder von einer Bestätigung abhängig gemacht werden kann. In diesem Workshop interessiert aber vor allem, wie das mit den Cookies funktioniert, wie sie auf die Platte geschrieben und wieder gelesen werden. Dazu wieder ein Beispiel:
Dieses Beispiel schreibt den Inhalt eines Formulars in ein Cookie-File. Dazu wird die Variable toCook mit den Inhalten gefüllt. Dann wird ein Datum gesetzt, bis zu dem das Cookie gültig bleibt (Zeile 3 und 4). Die zweite Funktion liest das Cookie zurück ins Formular. Hat die Cookie-Datei einen Inhalt hat (8), wird dieser in die Variable save eingelesen, die dann aufgetrennt wird: Der Name und das =-Zeichen vor den Daten werden gelöscht, damit direkt mit diesen gearbeitet werden kann. Zeile 11 teilt die beiden Teile des Inhalts und schreibt sie in einen Array. Auf diesen wird dann zugegriffen und der Inhalt wieder ins Formular eingefüllt. (mva) |
||||