SELFPHP Produktempfehlung
Windows Server 2008	SQL Server 2008	Microsoft Expression

Das Skript beginnt mit der folgenden Zeile:

<script type="text/javascript" src="profiles.js"></script>

Wie Sie wissen, ist profiles.js die zuvor von Ihnen erstellte Skriptdatei, die das Array mit allen Datensätzen definiert. Sie sollten diese Datei später zusammen mit der Webseite auf dem Webserver veröffentlichen und beide Dateien im selben Verzeichnis ablegen. Mit dem Attribut src="profiles.js" wird der Browser angewiesen, profiles.js in den Arbeitsspeicher des Besuchers zu laden. Die »Datenbank« befindet sich dann somit ebenfalls auf dem Computer des Besuchers, sodass der Browser jederzeit darauf zugreifen kann.

PROFITIPP: Wenn die Datenbank sehr groß ist, kann dies zu langen Übertragungszeiten führen. Sie sollten außerdem daran denken, dass einige Besucher mit älteren Computern arbeiten könnten, die eine geringe Arbeitsspeicherkapazität aufweisen. Diese Computer können umfassende Datenbestände nicht oder nur langsam bearbeiten. Sie sollten Clientskripts deshalb nur verwenden, um Datenbanken mit wenigen Datensätzen abzufragen. Die Praxis hat gezeigt, dass Datenbanken mit mehr als ca. 5.000 Datensätzen zu Problemen führen können, wenn die Bearbeitung auf dem Client-Computer erfolgt.

Innerhalb des Skriptbereichs der Webseite wird eine Funktion deklariert, die mit SearchDatabase bezeichnet ist. Wenn der Besucher später einen Text in das Textfeld eingibt und auf Suchen klickt, wird dieser Funktion der Inhalt des Textfeldes SuchenNach als Parameter übergeben und in der Variablen strSearchString gespeichert. Die Anweisung

if (strSearchString == "") {

prüft, ob in strSearchString kein Text ("") enthalten ist. In diesem Fall wird eine entsprechende Meldung ausgegeben und die Ausführung des Skripts beendet. Hat der Besucher etwas eingegeben, wird ein neues Array erstellt, das die einzelnen Felder eines Datensatzes aufnehmen wird. Im Anschluss daran wird der Tabellenkopf mit einigen writeln-Anweisungen generiert.

Jetzt beginnt eine Schleife, die alle Einträge des Arrays profiles mit der Eingabe des Benutzers überprüft. Die Schleife beginnt mit der Ordnungszahl des ersten Array-Eintrags (0) und endet mit der Ordnungszahl des letzten Eintrags. Diese wird mit der internen JavaScript-Funktion length ermittelt (profiles.length).

Innerhalb der Schleife werden zwei neue Variablen erzeugt. In strCurArrEntrUp wird der aktuelle Eintrag des Arrays profiles gespeichert. Die Variable strSrchForUp speichert die Eingabe des Benutzers. Die interne JavaScript-Funktion toUpperCase wandelt den Inhalt einer Zeichenfolgenvariablen in Großbuchstaben um. Die Anweisungen

var strCurArrEntrUp = profiles[zaehler].toUpperCase();
var strSrchForUp = strSearchString.toUpperCase();

führen somit dazu, dass in strCurArrEntrUp der aktuelle Array-Eintrag und in strSrchForUp die Benutzereingabe in Großbuchstaben abgelegt wird. Auf diese Weise können beide Variablen miteinander verglichen werden, ohne die Groß- und Kleinschreibung berücksichtigen zu müssen. Die Anweisung

if (strCurArrEntrUp.indexOf(strSrchForUp) != -1) {

prüft, ob die Besuchereingabe im aktuellen Array-Eintrag enthalten ist. Dazu wird die interne Funktion indexOf für die Variable strCurArrEntrUp aufgerufen. Die Funktion ermittelt, ob die in Klammern angegebene Zeichenfolge (die Besuchereingabe) in der Variablen enthalten ist, für die die Funktion aufgerufen wurde (der aktuelle Array-Eintrag). Wenn die Besuchereingabe im Array-Eintrag vorkommt, sorgt die Anweisung

strEntries = profiles[zaehler].split(";");

dafür, dass der Array-Eintrag an den Semikola getrennt wird und die einzelnen Zeichenfolgen als gesonderte Einträge im Array strEntries gespeichert werden. Das Trennen eines Textes erfolgt mit der internen JavaScript-Funktion split. Geben Sie in Klammern an, an welchem Zeichen der Text getrennt werden soll.

Die einzelnen Elemente des Arrays strEntries werden nun als neue Zeile an die zuvor erzeugte Tabelle angehängt. Sobald die Schleife beendet ist, wird noch der abschließenden Tag für das Tabellenende mit writeln eingefügt.

Ihre letzte Aufgabe besteht darin, dem Browser mitzuteilen, dass die Befehle der soeben programmierten Funktion nach einem Klick auf die Schaltfläche Suchen ausgeführt werden sollen. Wechseln Sie dazu wieder zur Entwurfsansicht, und markieren Sie die Schaltfläche. Der Aufgabenbereich Tageigenschaften zeigt nun alle Eigenschaften und Ereignisse der markierten Schaltfläche an.

Blättern Sie im Aufgabenbereich Tageigenschaften nach unten, bis das Ereignis oncklick angezeigt wird. Sie müssen möglicherweise den Knoten vor dem Kategoriennamen Ereignisse öffnen, damit darunter alle Ereignisse aufgelistet werden.

Klicken Sie in das Feld rechts neben onclick, um den JavaScript-Code anzugeben, der ausgeführt werden soll, wenn das Ereignis (der Besucher klickt auf die Suchen-Schaltfläche) eintritt. Tragen Sie den folgenden Code ein:

SearchDatabase(document.getElementById('SuchenNach').value)

Schließen Sie Ihre Eingabe mit einem Druck auf die (¢)-Taste ab. Expression Web 2 verändert daraufhin das Tag der Suchen-Schaltfläche, indem es ihm die entsprechende onclick-Ereignisdefinition hinzufügt. In der Codeansicht können Sie dies sehen:

<input name="Submit1" type="submit" value="Suchen" onclick="SearchDatabase(document.getElementById('SuchenNach').value)" />

Copyright © 2010 Microsoft Deutschland GmbH Alle Rechte vorbehalten.