vorheriges KapitelInhaltsverzeichnisIndexInfoseitenächstes Kapitel


Erstellen Sie einen Zufallslinkgenerator

Zusammenfassung

Fragen und Antworten



Tag 12


Kapitel 24 - Mit JavaScript arbeiten

Nun, da Sie so ungefähr verstehen, worum es bei JavaScript geht, ist es an der Zeit, sich einige der praktischen Anwendungen anzuschauen, die JavaScript bietet.


In diesem Kapitel werden Sie lernen, wie Sie die folgenden Aufgaben ausführen können:



Erstellen Sie einen Zufallslinkgenerator

Ein Zufallslinkgenerator ist im Prinzip ein Link, der Sie jedesmal, wenn Sie ihn anklicken, zu unterschiedlichen Orten bringt. Bisher war die einzige Art, so einen Link zu implementieren, die Anwendung eines CGI-Skripts. Mit JavaScript kann jedoch jegliche bisherige Server-seitige Verarbeitung nun vom Web-Browser selbst vorgenommen werden.


In den folgenden Abschnitten werden Sie lernen, wie Sie drei verschiedene Arten von Zufallslinkgeneratoren konstruieren können. Der erste verwendet ein internes <Skript>-Tag und eine einzige Funktion, der zweite Event-Handler, und der dritte untersucht die Anwendung von Arrays innerhalb eines Skripts.


Ein internes <Skript>-Tag ist im Gegensatz zur üblichen Praxis in der <BODY>-Sektion eines HTML-Dokuments eingebettet und nicht in der <HEAD>-Sektion.


Übung 24.1: Der interne Zufallslinkgenerator

Da der JavaScript-Code für diesen Generator in ein Standard-HTML-Dokument aufgenommen werden wird, lassen Sie uns jetzt den Text-Editor oder HTML-Editor öffnen, den Sie normalerweise für das Schreiben von Webseiten verwenden, und eine Datei namens random.html erzeugen.


In dieser Datei erzeugen Sie eine grundlegende Dokumentenstruktur wie die folgende. Sie sollten alle Dokumentenelemente aus den vorigen Kapiteln wiedererkennen, einschließlich der <A>...
</A>
-Tag-Kombination aus der drittletzten Zeile. Wenn Sie dieses Dokument so, wie es jetzt ist, darstellten, bekämen Sie so etwas wie in Abbildung 24.1 zu sehen.


Icon

<HTML>
<HEAD>
<TITLE>Random Link Generator</TITLE>
</HEAD>
<BODY>
<H1>My random link generator</H1>
<P>Visit a <A HREF="dummy.html"> randomly selected </A>
site from my list of favorites.</P>
</BODY>
</HTML>


Icon

siehe Abbildung

Abbildung 24.1:
Die Zufalls-Link-Seite

Jetzt ist es an der Zeit, etwas JavaScript-Code hinzuzufügen, um den Link in einen Zufallslinkgenerator umzuwandeln. Zuerst fügen Sie ein <Skript>-Tag in der <HEAD>-Sektion direkt nach dem <TITLE>-Tag-Block ein:


<TITLE>Random Link Generator</TITLE>
<Script LANGUAGE="JavaScript">
<!- der Inhalt des Skripts muss vor anderen Browsern verborgen werden
der JavaScript-Code gehoert hierher.
// Skriptende ->
</Skript>
</HEAD>


Im nächsten Schritt fügen wir den Code hinzu, der die Zufallslinks erzeugt, wobei wir uns auf eine Liste Ihrer Lieblingssites beziehen. Innerhalb des <Skript>-Tags - und des Kommentar-Tags - werden Sie zwei Funktionen erzeugen: eine namens picklink() (Link auswählen) und eine namens random() (Zufall). Lassen Sie uns mit picklink() anfangen. Um die Funktionen zu erzeugen, werden Sie zuerst die Rahmenstruktur so erzeugen:


function picklink() {
Ihr JavaScript-Code gehoert hierher.
}


Hier kommt der eigentliche Code, der die picklink()-Funktion ausmacht, zusammen mit einer Liste von vier Sites, die ausgewählt werden können.


function picklink() {
var linknumber = 4 ;
var linktext = "nolink.html" ;

var randomnumber = random() ;
var linkselect = Math.round( (linknumber-1) * randomnumber) + 1 ;

if ( linkselect == 1 )
{ linktext="http://www.netscape.com/" }
if ( linkselect == 2 )
{ linktext=" http://www.lne.com/Web/" }
if ( linkselect == 3 )
{ linktext="http://java.sun.com/" }
if ( linkselect == 4 )
{ linktext="http://www.realaudio.com/" }

document.write('<A HREF="' + linktext + '">randomly selected</A>') ;
}


Um Ihnen verstehen zu helfen, was dieser Code tut, werden wir ihn abschnittweise untersuchen. Die ersten zwei Zeilen, die auf die Funktionsdefinition folgen, stellen einige Arbeitsvariablen der Funktion auf: linknumber sagt der Funktion, von wie vielen Links sie auswählen kann, wenn Sie einen Zufallslink auswählt, und linktext ist eine Arbeitsvariable, die den Wert der URL für den ausgewählten Zufallslink festhält.


Die nächste Zeile - var randomnumber = random() ; - definiert eine Variable namens randomnumber (Zufallszahl) und weist ihr einen zufällig ausgewählten Wert zwischen 0 und 1 zu, indem Sie die random()-Funktion aufruft (Sie werden random() definieren, nachdem wir mit picklink() fertig sind). Die nächste Zeile nimmt die Variable randomnumber und benutzt sie, um eine zweite Zahl namens linkselect (Linkauswahl) zu erzeugen, die eine ganze Zahl zwischen 1 und dem in linknumber gesetzten Wert enthalten wird.


Die dann folgenden if-Aussagen überprüfen die zufällig ausgewählten Werte, die linkselect zugewiesen wurden. Wenn eine Übereinstimmung gefunden wird, weist er der Variablen linktext eine URL zu. Sie können hier eine beliebige Anzahl von URLs hinzufügen, vergessen Sie jedoch nicht, den Wert von linknumber zu ändern, damit der widerspiegelt, wie viele Links Sie definiert haben.


Nachdem Sie linktext einen URL zugewiesen haben, besteht der nächste Schritt darin, den physikalischen Link zu erzeugen, indem Sie eine document.write()-Methode verwenden. Das erreichen Sie, indem Sie die folgende Zeile eingeben:


document.write('<A HREF="' + linktext + '">randomly selected</A>') ;


Der Wert innerhalb der Klammern nutzt die Fähigkeit von JavaScript, Textketten zu addieren. In diesem Fall werden '<A HREF="', die Werte von linktext und '">randomly selected</A>' addiert, um ein korrekt geformtes Link-Tag zu bilden.


Nachdem picklink() abgearbeitet ist, müssen wir als nächste Funktion random() definieren, welches eine zufällig ausgewählte Zahl zwischen 0 und 1 auswählt. Diese Version benutzt das Date(Datums)-Objekt, um eine Zufallszahl zu erzeugen. Das Date-Objekt ist eine Möglichkeit, das aktuelle Datum und die Uhrzeit des Systems in JavaScript zu erhalten.


function random() {
var curdate = new Date();
var work = curdate.getTime() + curdate.getDate();
return ((work * 29 + 1) % 1-24 ) / 1024;
}


JavaScript definiert einen besseren Zufallszahlgenerator als die eingebaute Math.random()-Funktion. Seit Netscape 2.0 und der Beta-Version von 3.0 ist die Math.random()-Funktion jedoch nur in der Unix-Implementierung von Netscape verfügbar. Dies hat sich in der 3.0-Version von Netscape allerdings geändert. Da Netscape 3.0 die Math.random()-Funktion unterstützt, können Sie den Aufruf von random() in picklink() durch diese ersetzen und die Funktionsdefinition löschen. Bedenken Sie aber, daß Sie durch diese Änderung die Kompatibilität zu Benutzern von Netscape 2.0 unter Windows verlieren.

Nachdem Sie nun sowohl picklink() als auch random() innerhalb des <Skript>-Teils des HTML-Codes definiert haben, brauchen Sie bloß noch das ursprüngliche <A HREF=>-Tag der grundlegenden Rahmenstruktur durch den neuen Link zu ersetzen, der durch picklink() erzeugt wurde. Sie können dies auf verschiedene Weisen erledigen, die einfachste Methode besteht jedoch darin, einen Aufruf von picklink() innerhalb des Inhaltsteils Ihres Dokuments einzubetten, wie hier gezeigt wird:


<P>Visit a <Script LANGUAGE="JavaScript">picklink()</Skript>
site from my list of favorites.</P>


Einige JavaScript-Puristen könnten argumentieren, daß Sie <Skript>-Blöcke nur innerhalb der <HEAD>-Sektion eines HTML-Dokuments einfügen sollten, und damit meistens recht haben. Um aber zu demonstrieren, wie interne Skriptaufrufe funktionieren, und um dem Zweck dieser Übung gerecht zu werden, müssen die Regeln manchmal gebrochen werden. In der folgenden Übung werden Sie jedoch einen Mechanismus kennenlernen, der es ermöglicht, einen Zufallslinkgenerator zu erzeugen, der ohne die Verwendung von internen <Skript>-Tags auskommt.


Das vollständige Dokument

Hier ist die endgültige Zufallslink-HTML-Seite mit dem vollständigen JavaScript. Sie finden dieses Beispiel auch auf der CD:

<HTML>
<HEAD>
<TITLE>Random Link Generator</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!- der Inhalt des Skripts soll vor anderen Browsern verborgen bleiben
function picklink() {
// Vergessen Sie nicht, linknumber zu aendern, damit es die Anzahl der von Ihnen definierten Links reflektiert
var linknumber = 4 ;
var linktext = "nolink.html" ;
var randomnumber = random() ;
var linkselect = Math.round( (linknumber-1) * randomnumber) + 1 ;
// Fuegen Sie hier soviele Links hinzu, wie Sie wollen
if ( linkselect == 1 )
{ linktext="http://www.netscape.com/" }
if ( linkselect == 2 )
{ linktext="http://www.webcom.com/taketwo/" }
if ( linkselect == 3 )
{ linktext="http://java.sun.com/" }
if ( linkselect == 4 )
{ linktext="http://www.realaudio.com/" }
document.write('<A HREF="' + linktext + '">randomly selected </A>') ;
}
function random() {
var curdate = new Date();
var work = curdate.getTime() + curdate.getDate();
return ((work * 29 + 1) % 1-24 ) / 1024;
}
// Skriptende ->
</Skript>
</HEAD>
<BODY>
<H1>My random link generator</H1>
<P>Visit a <SCRIPT LANGUAGE="JavaScript">picklink()</Skript>
site from my list of favorites.</P>
</BODY>
</HTML>



Übung 24.2: Ein Zufallslinkgenerator setzt einen Event-Handler ein

Abgesehen davon, daß es schlechter Stil ist, interne <Skript>-Tags zu verwenden, kann es auch unvorhersehbare Probleme erzeugen, wenn Bilder auf der Seite abgebildet werden. Der sicherste Weg, solche Schwierigkeiten zu vermeiden, besteht deshalb darin, Skripten ausschließlich im <HEAD>-Block einzusetzen, wenn dies irgendwie praktisch durchführbar ist.


Diese Situation erzeugt jedoch ein Problem für den Zufallslinkgenerator, da dieser den Wert eines jeden Links jedesmal verändern muß, wenn er verwendet wird. Wenn Sie <Skript>-Tags nicht im <BODY> eines Dokuments einsetzen können, wie können Sie dann einen Link zufällig auswählen?


Jedesmal wenn Sie einen Link, einen Button oder irgendein Formularelement anklicken, generiert Netscape ein Ereignissignal, das von einem der Event-Handler eingefangen werden kann, die in Kapitel 23, »JavaScript«, erwähnt wurden. Indem Sie diese Tatsache und auch die Tatsache, daß jeder Link innerhalb eines Dokuments eigentlich als Objekt gespeichert ist, auf das JavaScript sich beziehen kann, ausnutzen, werden Sie es erstaunlich einfach finden, Ihr existierendes Skript zu ändern, um die Notwendigkeit zu vermeiden, ein internes <Skript>-Tag einzufügen.


Sehen Sie sich zuerst die Veränderungen an, die im Inhaltsteil des Dokuments vorgenommen werden müssen, um es an die Verwendung eines Event-Handler anzupassen. In dieser Übung wird das interne <Skript>-Tag durch ein normales <A>-Tag ersetzt, wie hier gezeigt wird:


<P>Visit a <A HREF="dummy.html">randomly selected</A>
site from my list of favorites.</P>


Als nächstes verbinden Sie einen onClick-Event-Handler mit dem Link, indem Sie den Handler als ein Attribut des <A>-Tags einfügen. Wenn onClick als Attribut benutzt wird, muß der ihm zugeordnete Wert eine gültige JavaScript-Instruktion oder einen Funktionsaufruf darstellen. Für dieses Beispiel wollen Sie die picklink()-Funktion aufrufen, die zuvor erstellt wurde, und erreichen, daß die URL, den sie auswählt, die Standard-URL überschreibt, der im <A>-Tag als HREF="dummy.html" definiert wird.


Dieser Job läßt sich einfach erledigen, da jeder Link eigentlich als Objekt vom Typ link gespeichert ist und da der link-Typ die gleichen Eigenschaften wie das location-Objekt enthält, das in Kapitel 23 erwähnt wurde. Deshalb müssen Sie nur der HREF-Eigenschaft des Links einen neuen Wert zuordnen, und zwar im onClick-Event-Handler, wie hier gezeigt wird:


<P>Visit a <A HREF="dummy.html"
onClick="this.href=picklink()">randomly selected</A>
site from my list of favorites.</P>


Das Schlüsselwort ist ein spezieller Wert, der JavaScript anweist, auf das aktuelle Objekt zu verweisen, ohne sich um den genauen Namen oder Ort kümmern zu müssen. In unserem Beispiel zeigt this auf das link-Objekt, das mit dem Link verbunden ist, und this.href weist auf die href-Eigenschaft dieses Objekts hin. Wenn Sie deshalb this.href mit einem neuen Wert versehen, ändern Sie dadurch die Bestimmung des URL des Links.

Wenn der onClick-Handler eingerichtet ist, müssen Sie als nächstes die picklink()-Funktion umändern. Da Sie physisch nichts mehr auf die Webseite schreiben, können Sie die document.write()-Funktion entfernen. Statt dessen benötigen Sie jedoch eine Möglichkeit, mit der Sie den Wert von linkselect an die this.href-Eigenschaft zurücksenden können.


Sie erreichen das, indem Sie die return-Aussage verwenden, die einen Wert von einem Funktionsaufruf zurücksendet, wie hier gezeigt wird:


return linktext;


Diese return-Aussage bringt die Funktion dazu, den Wert von linktext zurückzusenden, der eine zufällig ausgewählte URL darstellt, der von picklink() ausgewählt wurde. Fügen Sie die return-Zeile innerhalb der picklink()-Funktion anstelle der letzten document.write()-Zeile ein.



Die vollständige Übung

Wenn Sie den kompletten Text dieses HTML-Dokuments untersuchen, werden Sie feststellen, daß er der Übung 24.1 ähnelt, mit dem Unterschied, daß das interne <Skript>-Tag entfernt und die document.write-Aussage durch eine return-Anweisung ersetzt wurde:


<HTML>
<HEAD>
<TITLE>Random Link Generator with events</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!- der Inhalt des Skripts soll vor anderen Browsern verborgen bleiben
function picklink() {
var linknumber = 4 ;
var linktext = "nolink.html" ;
var randomnumber = random() ;
var linkselect = Math.round( (linknumber-1) * randomnumber) + 1 ;
if ( linkselect == 1 )
{ linktext="http://www.netscape.com/" }
if ( linkselect == 2 )
{ linktext="http://www.webcom.com/taketwo/" }
if ( linkselect == 3 )
{ linktext="http://java.sun.com/" }
if ( linkselect == 4 )
{ linktext="http://www.realaudio.com/" }
return linktext;
}
function random() {
var curdate = new Date();
var work = curdate.getTime() + curdate.getDate();
return ((work * 29 + 1) % 1-24 ) / 1024;
}
// Skriptende ->
</Skript>
</HEAD>
<BODY>
<H1>My random link generator</H1>
<P>Visit a <A HREF="dummy.html"
onClick="this.href=picklink()">randomly selected</A>
site from my list of favorites.</P>
</BODY>
</HTML>



Übung 24.3: Ein Zufallslinkgenerator, der ein Array verwendet

Das einzige Problem bei dem vorigen Beispiel ist es, daß Sie zusätzliche if-Tests für jeden neuen Link hinzufügen müssen, den Sie in Ihre Zufallsliste von Lieblingslinks aufnehmen wollen. Um diese Schwierigkeit zu umgehen und die Erscheinung des Skripts beträchtlich zu vereinfachen, bietet JavaScript einen Mechanismus, mit dem Sie Listen von Variablen erzeugen können - diese werden auch Arrays genannt.


Ein Array ist eine Liste von Variablen, auf die derselbe Variablenname hinweist. Zum Beispiel könnte ein Array namens mylinks[] eine Liste aller Links enthalten, die von der picklink()-Funktion verwendet werden. Der Wert eines jeden Links in der Liste wird dann durch die Plazierung eines numerischen Werts innerhalb der eckigen Klammern zugeordnet, angefangen mit 1: die erste Variable kann mit mylinks[1] gefunden werden, die zweite in mylinks[2] usw.


Ein Array ist eine geordnete Menge von Werten. Sie erreichen einen Wert in einem Array durch einen einzigen Array-Namen und die Position des Werts innerhalb des Arrays. Wenn Sie z.B. ein Array mit den Namen Ihrer Freunde hätten (namens friends), das die Werte »Bob«, »Susan«, »Tom« und »Pierre« enthielte, wäre friends[1] »Bob«, friends[2] wäre »Susan« usw.

Arrays in JavaScript funktionieren ein wenig anders als Arrays, die Sie von anderen höheren Programmiersprachen wie C++ kennen. In Wirklichkeit sind die Arrays in diesem Beispiel Objekte, jedoch läßt JavaScript es zu, daß Sie sie als Arrays behandeln. Beachten Sie auch, daß im Unterschied zu Arrays in vielen anderen Sprachen JavaScript-Arrays vom Index 1 starten und nicht vom Index 0.

Um die Fähigkeiten von Arrays ausnutzen zu können, müssen Sie zuerst eine kleine Funktion schreiben, die als constructor-Methode bekannt ist. Diese Funktion wird benötigt, da Arrays in Wirklichkeit Objekte sind. Der MakeArray()-Constructor sieht so aus:


function MakeArray(n) {
this.length = n;
for (var i = 1; i <= n; i++)
{ this[i] = 0 }
return this
}


Diese Funktion erzeugt ein Array mit n Elementen, wobei die Anzahl der Elemente in der Nullposition gespeichert wird (thearray[0]). Sie müssen diese Funktion jedesmal dann in Ihren JavaScript-Code aufnehmen, wenn Sie Arrays in einem Programm verwenden wollen. Nachdem die MakeArray()-Funktion definiert worden ist, können Sie das zuvor besprochene mylinks[]-Array definieren, indem Sie die folgende Aussage schreiben, bei der Wert gleich der Anzahl der Elemente ist, die im Array angegeben werden sollen.


mylinks = new MakeArray( Wert )


Es gibt hier ein wenig Verwirrung bei den Arrays, ob der Index bei Null oder Eins anfängt. Technisch gesehen starten JavaScript-Arrays bei Null, so wie in anderen Sprachen. Wenn Sie jedoch makeArray() anwenden, um Arrays zu erzeugen, wird das erste Element im Index 1 gespeichert und die Anzahl der Elemente im Index 0.

In Netscape 2.0 mußten Sie Ihren eigenen Constructor schreiben, um Arrays zu erzeugen. Mit Netscape 3.0 und höher verfügt JavaScript über seine eigene Constructor-Funktion und Sie können - manche würden auch sagen Sie sollten - diese statt einer eigenen verwenden. Um diesen Constructor anstelle von MakeArray() zu verwenden, würden Sie folgendes schreiben:

mylinks = new Array( Wert )


Diese Zeile erzeugt ein Array, dessen erstes Element die Null ist, anstatt das erste Element im Array unter dem Index 0 abzulegen. In diesem Beispiel werden wir statt dessen die Methode mit makeArray() anwenden.

Sie können das mylinks[]-Array dann einfach mit Werten auffüllen, indem Sie sie einfach so zuordnen, wie Sie es mit jeder anderen Variablen täten. So können Sie z.B. in der Zufallslinkübung Code zur <Skript>-Sektion hinzufügen, der ein Array mit der Anzahl von Links erzeugt und dann diese Linknamen im Array speichert. Hier folgt ein Beispiel mit einem Array, das fünf Elemente enthält, denen jeweils ein URL zugeordnet wurde.


<SCRIPT LANGUAGE="JavaScript">
<!- der Inhalt des Skripts darf in anderen Browsern nicht auftauchen

mylinks = new MakeArray( 5 ) ;

mylinks[1] = "http://www.netscape.com/" ;
mylinks[2] = "http://www.lne.com/Web/" ;
mylinks[3] = "http://java.sun.com/" ;
mylinks[4] = "http://www.realaudio.com/" ;
mylinks[5] = "http://www.worlds.com/" ;


Nachdem die Liste der URLs definiert wurde, können wir die ursprüngliche picklink()-Funktion modifizieren, so daß sie einen Link von denen im Array auswählt, anstatt eine Reihe von if-Tests zu verwenden. Hier ist der neue Code für picklink():


function picklink() {
linknumber = mylinks[0] ;
randomnumber = random() ;
linkselect = Math.round( (linknumber-1) * randomnumber ) + 1 ;
return mylinks[ linkselect ] ;
}


Was genau hat sich bei dieser Funktion geändert? Beachten Sie zuerst den Wert, der linknumber zugeordnet wurde. In den vorhergehenden Beispielen mußten Sie diesen Wert manuell einstellen (z.B. linknumber=5), jetzt aber stellen Sie ihn auf die Anzahl der Elemente im mylink[]-Array ein. Sie tun das, indem Sie den Wert verwenden, der automatisch vom MakeArray()-Constructor in mylinks[0] gespeichert wurde. Dieses »nullte« Element enthält die Anzahl der Elemente im Array.


Beachten Sie auch, daß diese Version von picklink() viel kleiner als die vorhergehende Version ist, da wir alle if-Tests der vorigen Übungen entfernt und an ihrer Stelle eine einzige return mylinks[ linkselect ]-Aussage eingefügt haben. Diese Aussage bewirkt, daß der Wert, der innerhalb von mylinks[ linkselect ] enthalten ist, zurückgesendet wird, wobei linkselect eine Zufallszahl zwischen 1 und dem Wert von linknumber ist.


Sie können die picklink()-Funktion sogar noch weiter zusammenfassen, indem Sie alle Arbeitsvariablen entfernen und einfach alle mathematischen Operationen innerhalb der return-Aussage durchführen, so wie hier:


function picklink() {
return mylinks[ ( Math.round( ( mylinks[0] - 1) * random() ) + 1 ) ] ;
}



Das vollständige Zufallslink-Skript mit einem Array

Diese endgültige Version des Skripts integriert alle Veränderungen, die wir in dieser Übung vorgenommen haben, einschließlich dem Hinzufügen der MakeArray()-Constructor-Funktion, der Erzeugung des Link-Arrays und der Modifizierungen an picklink().


<HTML>
<HEAD>
<TITLE>Random Link Generator with an Array</TITLE>
<Script LANGUAGE="JavaScript">
<!- der Inhalt des Skripts muss vor anderen Browsern versteckt werden

mylinks = new MakeArray( 5 );

mylinks[1] = "http://www.netscape.com/" ;
mylinks[2] = "http://www.lne.com/Web/" ;
mylinks[3] = "http://java.sun.com/" ;
mylinks[4] = "http://www.realaudio.com/" ;
mylinks[5] = "http://www.worlds.com/" ;

function picklink() {
return mylinks[ ( Math.round( ( mylinks[0] - 1) * random() ) + 1 ) ] ;
}

function MakeArray( n ) {
this.length = n;
for (var i = 1; i <= n; i++)
{ this[i] = 0 }
return this ;
}

function random() {
var curdate = new Date();
var work = curdate.getTime() + curdate.getDate();
return ((work * 29 + 1) % 1-24 ) / 1024;
}
// Skriptende ->
</Skript>

</HEAD>
<BODY>
<H1>My random link generator</H1>
Click <A HREF="dummy.html" onClick="this.href=picklink()">here</A>
to visit a randomly selected site from my list of favorites.
</BODY>
</HTML>


Um Ihrer Liste neue Links hinzuzufügen, erhöhen Sie einfach den Wert, der durch new MakeArray (Wert) zugeordnet wird, und fügen der Liste im Anschluß an die bereits definierten Array-Elemente neue Links hinzu.


Übung 24.4: Formularüberprüfung

Wenn Sie sich an Kapitel 18, »Formulare«, zurückerinnern, werden Sie sich an das von uns erstellte Beispiel des »Surrealist Census« erinnern, das in Abbildung 24.2 gezeigt wird. Dieses Formular befragte den Leser über verschiedene Dinge, einschließlich seines Namens, Geschlechts und einiger anderer bizarrer Optionen.


Was passiert, wenn dieses Formular übermittelt wird? Bisher hatten wir angenommen, daß sich auf der Server-Seite ein CGI-Skript befände, das die Daten des Lesers überprüfen, sie dann in einer Datenbank oder Datei speichern und dem Leser für seine Mühe danken würde.


Was aber würde passieren, wenn der Leser das Formular nicht korrekt ausfüllte - wenn er z.B. den Namen ausließe oder keinen Wert für das Geschlecht eingäbe? Das CGI-Skript könnte das alles überprüfen und eine Fehlermeldung zurückschikken. Da aber die Überprüfung auf einem anderen Rechner mit dem CGI-Skript durchgeführt wird und da alle Daten und Fehlermeldungen über das Netzwerk hin- und zurückgeschickt werden müssen, kann dieser Vorgang sehr langsam vonstatten gehen und wertvolle Ressourcen des Server beanspruchen.


JavaScript erlaubt es Ihnen, Formulare auf der Browserseite zu überprüfen, bevor das Formular überhaupt auf den Server gelangt. Das spart sowohl Ihnen als auch Ihren Lesern Zeit, da alles schon auf der Leserseite korrigiert wird, und wenn die Daten erst mal tatsächlich zu Ihrem CGI-Skript gelangen, sind sie garantiert korrekt.


Lassen Sie uns mal einen Blick darauf werfen, wie der Surrealist Census mit JavaScript überprüft werden würde.


siehe Abbildung

Abbildung 24.2:
The Surrealist Census

Jedesmal wenn Sie den Submit-Button auf einem Formular anklicken, werden von JavaScript und Netscape zwei Ereignisse ausgelöst: ein onClick-Ereignis sowie ein onSubmit-Ereignis. Das, welches Sie interessiert, ist das onSubmit-Ereignis, an das wir eine JavaScript-Funktion anhängen werden. Wenn dann das onSubmit-Ereignis eintritt, wird die JavaScript-Funktion aufgerufen werden, um die Daten zu überprüfen.


Um eine JavaScript-Funktion an das onSubmit-Ereignis anzuhängen, definieren Sie onSubmit als ein Attribut des <FORM>-Tags, so wie hier:


<FORM METHOD="POST"
ACTION="http://www.mcp.com/cgi-bin/post-query"
onSubmit="return checkform( this )">


In diesem Beispiel ist der Wert, der onSubmit zugeordnet wird, ein Aufruf der Funktion namens checkform - die wir in Kürze definieren werden. Zuerst aber erfordern die return-Aussage am Anfang des onSubmit-Felds und die this-Aussage innerhalb der Klammern der checkform()-Funktion einige weitere Erklärungen.


Zuerst zu this. Jedesmal, wenn Sie eine Funktion aufrufen, können Sie ihr eine Liste von Parametern, wie Zahlen oder Zeichenketten, oder andere Objekte schikken, indem Sie sie innerhalb der Klammern der Funktion einfügen. Im vorhergehenden Beispiel wird this benutzt, um einen Bezug an das Formular-Objekt weiterzuleiten, das mit dem aktuellen Formular verbunden ist.


Zweitens die return-Anweisung. Diese Aussage wird benutzt, um einen Wert zurück zur internen Netscape-Routine zu übermitteln, die den onSubmit-Event-Handler aufgerufen hat. Wenn z.B. die checkform()-Funktion den Wert false zurückschickt - nachdem das Formular überprüft wurde -, wird der Übermittlungsprozeß dadurch gestoppt, daß der return-Befehl den Wert false an Netscape zurück übermittelt. Wäre der return-Befehl nicht enthalten gewesen, würde der Wert false zu Netscape zurückgeschickt werden, und der Übermittlungsprozeß würde auch dann auftreten, wenn von der checkform()-Funktion Probleme entdeckt worden wären.



Das Überprüfungs-Skript (Validation Skript)

Wie Sie es schon vorher getan haben, definieren Sie jetzt das <Skript>-Tag innerhalb des <HEAD>-Blocks und definieren checkform() als Funktion. Aber dieses Mal müssen Sie auch eine Variable definieren, um das Formularobjekt zu erhalten, das durch den Aufruf der Funktion abgesendet wurde, wie ich bereits erwähnt habe. Der Code für die Funktionserklärung sieht so aus:


<Skript>
<!- hier beginnt das Skript
function checkform( thisform ) {


In diesem Beispiel gibt die checkform(thisform)-Aussage dem Objekt, das das aktuelle Formular repräsentiert, den Namen thisform. Indem Sie auf das thisform-Objekt zugreifen, können Sie alle Felder, Optionsfelder, Kontrollkästchen und Buttons im aktuellen Formular ebenfalls adressieren, da sie alle als Subobjekte von thisform behandelt werden.


Da das klar ist, können Sie jetzt mit dem ersten Test anfangen, der prüft, ob ein Name ins Namenstextfeld eingetragen wurde. Im HTML-Code für dieses Formular wurde dem <INPUT>-Tag für dieses Feld ein Namensattribut, genannt theName, gegeben, und zwar so:


<INPUT TYPE="TEXT" NAME="theName">


Dies ist der Name, den Sie verwenden, um dieses Feld als Subobjekt von thisform zu definieren. Als Ergebnis davon kann man sich auf das Feld theName als thisform.theName beziehen. Auf den Inhalt des Felds kann man sich als thisform.theName.value beziehen.


Wenn Sie diese Information und einen if-Test anwenden, ist es einfach, den Inhalt von theName daraufhin zu testen, ob ein Name darin eingetragen wurde, indem Sie folgendes schreiben:


if ( thisform.theName.value == null || thisform.theName.value == "" ) {
alert ("Please enter your name") ;
thisform.theName.focus() ;
thisform.theName.select() ;
return false ;
}


Das Symbol ||, das im if-Test des vorigen Beispiels gezeigt wurde, weist JavaScript an, die Aktionen innerhalb der Klammern auszuführen, wenn einer der beiden Tests wahr ist. Deshalb wird das ||-Symbol gewöhnlich auch als OR-Operator bezeichnet.

In der ersten Zeile wird thisform.theName.value getestet, um herauszufinden, ob es einen null-Wert enthält oder ob es leer ist (""). Wenn ein Feld erst erzeugt wird und überhaupt keine Information enthält, sagt man, daß es null enthält; dies unterscheidet sich von einem einfachen leeren Feld oder einem, das nur Leerzeichen enthält. Wenn eine dieser Situationen sich als wahr erweist, passiert folgendes: Eine alert()-Nachricht wird angezeigt (ein Pop-up-Dialogfeld mit einer warnenden Meldung), der Cursor wird aufs neue durch thisform.theName.focus() im Feld plaziert, das Feld wird durch thisform.theName.select() ausgewählt und die Funktion wird durch eine return-Aussage abgebrochen, die den Wert false zugeordnet bekam.


Wenn ein Name eingetragen wurde, besteht der nächste Schritt darin, zu prüfen, ob ein Geschlecht eingetragen wurde. Sie tun dies, indem Sie den Wert von theSex prüfen. Da jedoch alle Elemente in einer Gruppe von Optionsfeldern denselben Namen besitzen, müssen Sie sie als Array behandeln. Somit können Sie den Statuswert des ersten Optionsfelds testen, indem Sie testform.theSex[0].status anwenden, den des zweiten Optionsfelds durch testform.theSex[1].status usw. Wenn ein Optionsfeld ausgewählt wurde, gibt der Status den Wert true zurück; andernfalls wird der Wert false zurückgesendet.


Im Unterschied zu Arrays, die durch MakeArray erzeugt wurden, starten Array-Elemente in Formularen vom Index 0.

Um zu prüfen, ob eines der theSex-Optionsfelder ausgewählt wurde, definieren Sie eine neue Variable namens selected und geben ihr den Wert false. Dann erzeugen Sie eine for-Schleife durch alle Elemente, und wenn sich herausstellt, daß der Status eines der Optionsfelder true ist, setzen Sie selected=true. Wenn Sie schließlich die Schleife beendet haben und selected immer noch false ist, stellen Sie eine Alarmmeldung dar und verlassen die Funktion, indem Sie return false aufrufen. Der für diese Tests erforderliche Code wird hier gezeigt:


var selected = false ;
for ( var i = 0; i <= 2 ; ++i ) {
if ( testform.theSex[i].status == true )
{ selected = true }
}
if ( selected == false ) {
alert ("Please choose your sex") ;
return false ;
}


Wenn beide Tests erfolgreich durchgeführt werden, rufen Sie return mit dem Wert true auf, um Netscape wissen zu lassen, daß es jetzt mit der Übertragung des Formulars weitermachen kann, und beenden dann die Funktionsdefinition mit einer abschließenden Klammer:


return true
}



Der vollständige Surrealist Census mit JavaScript-Überprüfung

siehe Abbildung

Abbildung 24.3:
Eine Warnmeldung

Wenn das JavaScript-Skript, das in diesem Abschnitt diskutiert wurde, in das ursprüngliche Surrealist-Census-HTML-Dokument aus Kapitel 18 integriert wird, ergibt das ein Web-Formular, das seinen Inhalt testet, bevor er für weitere Verarbeitung zum CGI-Skript übermittelt wird. Auf diese Weise werden dem CGI-Skript keine Daten mehr gesendet, bis alles korrekt ist, und wenn ein Problem auftritt, übernimmt Netscape die Aufgabe, den Leser über die Schwierigkeit zu informieren (siehe Abbildung 24.3).


Damit Sie nicht zur Übung bis Kapitel 17 zurückblättern müssen, um den HTML-Quellcode für das Formular zu erhalten, folgt hier das komplette Formular mit dem vollständigen JavaScript-Code:


<HTML>
<HEAD>
<TITLE>The Surrealist Census - With JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!- hier beginnt das Skript
function checkform( thisform ) {
if (thisform.theName.value == null || thisform.theName.value == "" ) {
alert ("Please enter your name") ;
thisform.theName.focus() ;
thisform.theName.select() ;
return false ;
}
var selected = false ;
for ( var i = 0; i <= 2 ; ++i ) {
if ( thisform.theSex[i].status == true )
{ selected = true }
}
if ( selected == false ) {
alert ("Please choose your sex") ;
return false ;
}
return true
}
// Skriptende ->
</Skript>
</HEAD>

<BODY>
<H1>The Surrealist Census</H1>
<P>Welcome to the Surrealist Census. Please fill out the following
form to the best of your abilities.</P>
<P>Use <STRONG>Submit</STRONG> to submit your results.
<HR>
<FORM METHOD="POST"
ACTION="http://www.mcp.com/cgi-bin/post-query"
onSubmit="return checkform( this )" >
<P>
<STRONG>Name: </STRONG>
<INPUT TYPE="TEXT" NAME="theName">
</P>
<P>
<STRONG>Sex: </STRONG>
<INPUT TYPE="RADIO" NAME="theSex" VALUE="male">Male
<INPUT TYPE="RADIO" NAME="theSex" VALUE="female">Female
<INPUT TYPE="RADIO" NAME="theSex" VALUE="null">Null
</P>
<P>
<STRONG>Contains (Select all that Apply): </STRONG><BR>
<INPUT TYPE="CHECKBOX" NAME="humor">Vitreous Humor<BR>
<INPUT TYPE="CHECKBOX" NAME="fish">Fish<BR>
<INPUT TYPE="CHECKBOX" NAME="glycol">Propylene Glycol<BR>
<INPUT TYPE="CHECKBOX" NAME="svga">SVGA Support<BR>
<INPUT TYPE="CHECKBOX" NAME="angst">Angst<BR>
<INPUT TYPE="CHECKBOX" NAME="catcon">Catalytic Converter<BR>
<INPUT TYPE="CHECKBOX" NAME="vitamin">Ten Essential Vitamins and Nutrients<BR>
</P>
<P>
<INPUT TYPE="SUBMIT" VALUE="Submit Your Votes" >
<INPUT TYPE="RESET" VALUE="Clear Form" ></P>
</FORM>
<HR>
</BODY>
</HTML>



Zusammenfassung

JavaScript bietet viele aufregende neue Möglichkeiten für Web-Entwickler. In diesem Kapitel hatten Sie die Gelegenheit, verschiedene mögliche Anwendungen von JavaScript kennenzulernen, unter anderem die Erzeugung von kleinen Stükken von HTML-Code und die Überprüfung von Formulardaten.


JavaScript ist jedoch nicht die einzige Möglichkeit, Code für Webseiten zu erzeugen. Java - der große Bruder von JavaScript - ermöglicht der Web-Publikationsumgebung sogar noch größere Flexibilität und Fähigkeiten. Morgen werden Sie herausfinden, wie Java funktioniert und wie es sich von anderen Sprachen, einschließlich JavaScript, unterscheidet.



Fragen und Antworten

Frage:

Ich bin ehrlich verwirrt. Ein für allemal, starten JavaScript-Arrays mit 0 oder mit 1?

Antwort:

JavaScript-Arrays starten mit Null so wie in anderen Sprachen. Wenn Sie jedoch die für Netscape 2.0 empfohlene Methode der Erzeugung von Arrays mit dem MakeArray()-Constructor verwenden, werden Sie ein Array bekommen, das mit 1 anfängt (die Anzahl der Array-Elemente wird im Element Null gespeichert). Dies ist enorm verwirrend; Arrays sollten durchgehend entweder mit Null oder Eins anfangen, aber nicht mit beiden. Ab Netscape 3.0 werden Sie wahrscheinlich den eingebauten Constructor vorfinden, der das Array mit dem Index Null beginnen läßt.

Frage:

Ich arbeite gerne mit JavaScript; es ist einfach und leicht zu verstehen. Es scheint mir, daß JavaScript eine tolle Sprache für CGI oder für andere Programme abgäbe, die auf der Server-Seite laufen. Geht das?

Antwort:

Netscape hatte die gleiche Idee! Server-seitiges JavaScript ist eine der Fähigkeiten, die in neueren Netscape-Server-Umgebungen integriert wurden. Diese Umgebung beinhaltet eine Komponente, die als LiveWire bekannt ist. Diese bietet Server-seitige JavaScript-Fähigkeiten und verfügt über viele Features für die Verwendung von JavaScript als CGI-Sprache und die Vorverarbeitung von HTML-Dateien bevor diese zum Browser geschickt werden. LiveWire wird ausführlicher in Kapitel 27, »Hinweise, Tricks und Tips zu Web-Servern«, besprochen.


Copyright ©1998 by SAMS, einem Imprint der Markt&Technik Buch- und Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X


vorheriges KapitelTop Of PageInhaltsverzeichnisIndexInfoseitenächstes Kapitel