HTML 4 in 14 Tagen 24Mit JavaScript arbeiten

Erstellen Sie einen Zufallslinkgenerator

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:

Erzeugen Sie einen Zufallslinkgenerator

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:

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:

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