7/00 7/00
Im ersten Teil des JavaScript-Kurses haben wir uns den Grundlagen der Programmiersprache gewidmet. Dieses Mal nutzen wir die Möglichkeiten in Verbindung mit den Standard-Elementen der HTML-Sprache, um die Webseiten um zusätzliche Optionen zu erweitern.
|
Die Arbeit mit Formularen stellt dabei eine wichtige Option dar, um in direkte Interaktivität mit dem Surfer zu treten. Schon bisher waren Formulare die wichtigsten Elemente im WWW, um Benutzereingaben möglich zu machen und entsprechend zu reagieren. Normalerweise wird dazu dem Anwender eine Seite mit unterschiedlichen Eingabefeldern zur Verfügung gestellt. Der Surfer kann diese Felder entsprechend ausfüllen und klickt danach auf einen Schalter, dem die spezielle Eigenschaft Submit zugeordnet wurde. Dadurch wird der Browser dazu veranlasst ein Programm am Web-Server aufzurufen, das am Beginn der Formulardefinition festgelegt wird. Diesem werden die eingegebenen Daten zur weiteren Verarbeitung zur Verfügung gestellt.
CGI und JavaScript
Der Vorteil der CGI-Programmierung liegt darin, dass der Client, also der Webbrowser über keine besonderen Fähigkeiten verfügen muss, da die Abarbeitung vollständig am Server erfolgt. Zusätzlich ist dies die einzige Möglichkeit, auf zentral abgespeicherte Datenbanken zuzugreifen, da diese schon vom Prinzip her an den Server gebunden sind. Diese Vorteile stehen dem Nachteil gegenüber, dass über serverseitige Skripts die direkte und schnelle Interaktion mit dem Benutzer nicht möglich ist. Wenn z.B. Eingaben auf ihre Gültigkeit überprüft werden sollen oder die Interaktivität in einer einfachen Berechnung besteht, ist es dennoch notwendig, den Weg über den Webserver zu nehmen.
|
Hier bietet sich JavaSciprt als Lösung an. Dabei kann JavaScript entweder als Untersützung zur serverseitigen Skriptausführung herangezogen werden oder diese in vielen Fällen sogar vollständig ersetzen. Eine Kombination bietet sich z.B. dann an, wenn der Benutzer Daten für eine Datenbank eingeben soll. Noch bevor diese an das Server-Programm übergeben werden, können mittels JavaScript die wichtigsten Gültigkeitsprüfungen durchgeführt werden. Damit wird die Eingabe für den Benutzer einfacher und der Datenverkehr zwischen Server und Browser kann minimiert werden. Zusätzlich bedeutet die clientseitige Vorbearbeitung auch eine Entlastung des Servers.
Beispiel
1: Kreisberechnung interaktiv
Wie JavaScript in Verbindung mit Formularen in der Praxis eingesetzt werden kann, wollen wir uns in der Folge an Hand von Beispielen ansehen. Diese sind so gewählt, dass sie einfach angepasst und in der eigenen Homepage verwendet werden können. Das erste Listing zeigt dabei bereits eine typische interaktive Anwendung. Der Benutzer kann eine Zahl als Radius für einen Kreis eingeben und erhält als Ergebnis den Umfang und die Fläche des Kreises. Diese Anwendung bietet sich geradezu für eine JavaScript-Lösung an, da der interaktive Vorgang in einer einfachen Berechnung besteht. Es ist deshalb nicht notwendig, die Daten an einen Server zu schicken, die "Arbeit" wird vollständig "vor Ort" im Browser erledigt.
|
Listing 1 selbst enthält wenig Neues in Bezug auf JavaScirpt. Es wird eine Funktion definiert, die die gewünschte Berechnung vornimmt. Im eigentlichen HTML-Bereich erzeugen wir ein Formular, das aus drei Standard-Eingabefeldern besteht. Das erste wird dabei verwendet, um die Eingabe des Benutzers entgegenzunehmen, die beiden anderen dienen uns für die Ausgabe des Ergebnisses. Formularfelder sind die einfachste Variante, um Zahlen oder Texte auch nach der vollständigen Darstellung der Seite auszugeben, ohne dass deshalb eine andere Seite aufgerufen werden müsste. Denn während die aktuellen Versionen von Netscape und Internet Explorer in der Lage sind, auch nachträglich ganze Textbereiche auszutauschen, ist dieses Feature bei den Amiga-Browsern, aber auch z.B. bei Opera, (noch) nicht verfügbar.
Wer bereits mit Formularen gearbeitet hat, dem werden zwei wichtige Unterschiede zur herkömmlichen Formularprogrammierung auffallen. Der erste ist jener, dass beim FORM-Tag kein Programm definiert wurde (ACTION), das am Server aufgerufen werden soll. Dies ist nicht notwendig, da alle Arbeiten direkt innerhalb der Seite durchgeführt werden. Es wäre grundsätzlich möglich, als ACTION den Aufruf der JavaScript-Funktion anzugeben. Doch damit hat z.B. AWeb einige Probleme, da die Übergabe der Parameter in einer Form erfolgt, die zu einer Fehlermeldung führt.
|
||||||||||||||||||||||||||||||||||||||||||||||||||
Darüber hinaus fehlt der SUBMIT-Schalter, um die Daten abzusenden. Dieser ist deshalb nicht notwendig, da wir auf die Methode onChange zurückgreifen. Diese wurde bei der Definition des Eingabefeldes für den Radius hinzugefügt. Sie bewirkt, dass immer, wenn der Benutzer den Wert im Feld ändert und dieses danach verlässt, d.h. den Focus von diesem entfernt, die Funktion kalkulation() aufgerufen wird.
Die Funktion selbst liest zuerst den Inhalt des Feldes radius aus. Dies erfolgt in der JavaScript-typischen Form über das Objekt Document, das die aktuelle HTML-Seite bezeichnet und den Namen des Formulares (in unserem Fall testformular). Dann wird mittels dieses Namens auf das Eingabefeld zugegriffen und die Eigenschaft value ausgelesen. Wer sich bereits mit der objektorientierten Vorgehensweise von JavaScript vertraut gemacht hat, dem wird diese Notation nicht neu sein. Einer der Vorteile liegt darin, dass beliebig viele Formulare auf einer Seite untergebracht werden können, deren Felder unabhängig und getrennt voneinander angesprochen werden können.
Die nächsten Schritte bestehen aus der einfachen Berechnung der Ergebnisse. Danach werden diese über denselben Weg in den Ergebnisfeldern ausgegeben. Denn die Eigenschaft value, die bei jedem Formularfeld zur Verfügung steht, kann sowohl ausgelesen als auch beschrieben werden. Damit ist die Arbeit bereits beendet, das Ergebnis steht dem Anwender zur Verfügung.
Neu ist in der Funktion die Verwendung der vordefinierten Funktionen der Klasse Math. Eine Auflistung finden Sie in der Tabelle »Mathematik auf die Schnelle«. Wichtig ist bei diesen lediglich, dass die Groß- und Kleinschreibung beachtet wird, da einige Browser andernfalls eine Fehlermeldung ausgeben. Da die Funktion zum Runden von Zahlen (round) keine Festlegung erlaubt, auf wie viele Stellen hinter dem Komma gerundet werden soll sondern immer nur ganzzahlige Ergebnisse zurückliefert, wird über den Umweg der Multiplikation mit 100 und der anschließenden Division des Ergebnisses dafür gesorgt, dass das Endergebnis mit zwei Kommastellen formatiert ausgegeben wird.
Beispiel 2: Überprüfung der Eingaben
|
In dieser einfachen Form wird noch keine Überprüfung vorgenommen, ob die Eingabe korrekt ist, d.h. ob tatsächlich eine Zahl eingegeben wurde. Dennoch gibt in JavaScript kein Browser eine Fehlermeldung aus, falls Sie stattdessen einen Text eingeben. Ist dies der Fall, und ist es deshalb nicht möglich, eine Berechnung durchzuführen, so wird in die Ergebniszellen der Wert »NaN« (»Not a Number«) eingetragen. Dies ist ein vordefinierter Wert in JavaScript, der angibt, dass das Ergebnis kein numerischer Wert ist. Bei der Interpretation der Eingaben unterscheiden sich die Browser allerdings teilweise sehr stark. So akzeptiert AWeb beispielsweise eine Eingabe, die aus Zahlen und Texten besteht. Sofern die Eingabe mit einer Zahl beginnt, werden für die Berechnungen nur jene Teile der Eingabe herangezogen, die vor dem ersten ungültigen Zeichen stehen. Geben Sie z.B. »34ali4?4« ein, so wird mit dem Wert 34 weitergerechnet. Der Internet Explorer ist hier strikter und verweigert die Berechnung. Er gibt stattdessen als Ergebnis den NaN-Wert aus.
Gerade im Zusammenhang mit Berechnungen ist eine weitere Methode
von JavaScript äußerst nützlich. Denn mit eval() hat JavaScript bereits einen
vollständigen Interpreter für mathematische Ausdrücke enthalten. Fügen Sie dazu
nach dem Auslesen des Radius im Skript die Zeile
radius=eval(radius);
ein. Mit dieser veranlassen Sie JavaScript, die Eingabe zu untersuchen und, falls möglich, diese zu berechnen. Geben Sie nach der Änderung als Wert einmal »3+5*2« ein, und sehen Sie sich das Ergebnis an.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- Hier gehts los
function kalkulation()
{ radius=document.testformular.eingabe.value;
umfang=Math.round(2*radius*Math.PI*100)/100;
inhalt=Math.round(Math.pow(radius,2)*Math.PI*100)/100;
document.testformular.ergebnis1.value=umfang;
document.testformular.ergebnis2.value=inhalt;
}
// Hier ist es aus! -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="testformular">
<h1>Berechnung von Kreisinhalt und Kreisradius</h1>
Bitte geben Sie im Feld für den Radius den gewünschten Radius
ein. Sobald Sie das Feld verlassen, wird das Ergebnis berechnet.
<p>
Radius: <input type=text size=20 name="eingabe" onChange="kalkulation()"><p>
<b>Ergebnisse:</b><br>
Umfang: <input type=text size=20 name="ergebnis1"><br>
Fläche: <input type=text size=20 name="ergebnis2"><p>
</FORM>
</BODY>
</HTML>
Listing 1: Berechnung von Kreisumfang und -Fläche (bitte klicken, um es auszuprobieren) |
Allerdings hat eval() auch einen entscheidenden Nachteil. Ist die Eingabe kein Ausdruck, der berechnet werden kann, liefert eval() eine Fehlermeldung zurück. Diese führt zwar nicht zum Abbruch des Programmes, doch sind die weiteren Berechnungen fehlerhaft. Im InternetExplorer wird darüber hinaus das Symbol für »Fehler auf der Seite« in der Statusleiste eingeblendet.
Eine Weiterentwicklung des ersten Beispiels stellt Listing 2 dar. Der Aufbau ist dabei sehr ähnlich, doch diesmal wird die Eingabe auf deren Gültigkeit überprüft. Dazu wurde eine eigene, kurze Funktion programmiert, die jedes Zeichen des Eingabefeldes überprüft, ob es sich dabei um eine Ziffer handelt. Andernfalls wird der Wert false zurückgegeben. Daraufhin wird der Anwender aufgefordert, die Eingabe noch einmal zu überprüfen. Die erste Änderung erfolgte direkt im Formular. Da dieses Mal der Umfang und Inhalt eines Rechteckes berechnet werden, sind zwei Eingaben notwendig. Deshalb macht es wenig, Sinn, gleich bei der Änderung eines Wertes die Berechnung zu beginnen, da der zweite Wert unter Umständen noch nicht verfügbar ist. Aus diesem Grund wurde ein Schalter eingefügt. Erst nach Anklicken desselben wird die JavaScript-Berechnung durchgeführt. Im Gegensatz zu herkömmlichen CGI-Formularen muss dieser Schalter nicht für die Standard-Funktionen »Submit« und »Reset« verwendet werden, sondern kann mit einer beliebigen Bezeichnung versehen sein. Entsprechend ist es auch möglich, mehrere Schalter in ein und dasselbe Formular einzubauen, die unterschiedliche Aktionen ausführen. Mit dem onKlick-Handler wird die JavaScript-Funktion aufgerufen.
Nach dem Auslesen der Felder erfolgt die Abfrage, ob es sich bei der Eingabe um einen numerischen Wert handelt. Ab der Version 1.1 von JavaScript ist dies mit der Funktion isNaN(Wert) möglich, die true zurückliefert, falls der übergebene Wert keine Zahl ist. Da jedoch viele Amiga-Browser noch mit dem JavaScript-Standard 1.0 arbeiten und deshalb diese Funktion nicht zur Verfügung steht, haben wir sie in Form von checkforNumber(Wert) nachgebildet. Diese Funktion liefert true als Ergebnis, falls der übergebene Wert eine Zahl ist.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- Hier gehts los
function checkforNumber(wert)
{ ergebnis=true;
for(i=0;i<wert.length;i++)
{ buchstabe=wert.substring(i,i+1);
if((buchstabe<"0" || buchstabe>"9") && buchstabe!=".")
{ ergebnis=false; i=wert.length;
}
} return ergebnis;
}
function kalkulation()
{ laenge=document.testformular.laengein.value;
breite=document.testformular.breitein.value;
if (checkforNumber(laenge)==false || checkforNumber(breite)==false)
{ alert("Sowohl Länge als auch Breite müssen eine Zahl sein!");
}
else
{ umfang=Math.round((2*laenge+2*breite)*100)/100;
inhalt=Math.round(laenge*breite*100)/100;
document.testformular.ergebnis1.value=umfang;
document.testformular.ergebnis2.value=inhalt;
}
document.testformular.laengein.focus();
}
// Hier ist es aus! -->
</SCRIPT>
</HEAD>
Listing 2: Die verfeinerte Version mit Prüfungen |
Im Rahmen dieser Funktion lernen wir auch einen weiteren Befehl von JavaScript kennen: Es handelt sich dabei um die for-Schleife. Sie dient dazu, die Befehle innerhalb dieser Schleife für eine definierte Anzahl von Wiederholungen durchzuführen. Die for-Schleife hat dabei drei Argumente. Der erste ist der Zähler, der für die Durchläufe herangezogen und dem gleichzeitig der Startwert zugewiesen wird. Danach folgt die Abbruchsbedingung. Das heißt, es wird jener Wert angegeben, bei dessen Erreichen oder Überschreiten die Schleife verlassen wird. Schließlich gibt der letzte Wert die Sprungweite an, mit der der Zähler erhöht bzw. erniedrigt werden soll. Neu ist dabei auch die Form, mit der der Zähler um eins erhöht wird: i++. Diese, auch von der Programmiersprache C bekannte Notation wurde in JavaScript übernommen. Sie steht für den Ausdruck i=i+1. Neben dieser Notation gibt es noch einige weitere, die in der Tabelle »Spezialoperatoren« zusammengefasst sind.
In der Schleife selbst wird der übergebene String Zeichen für Zeichen bearbeitet. Es wird überprüft, ob es sich bei jeder Stelle um eine Ziffer bzw. den Kommapunkt handelt. Ist das nicht der Fall, wird der Ergebniswert der Funktion auf false gesetzt und die Schleife beendet, indem der Zähler auf den Abbruchswert gesetzt wird. Die Zeichenkettenfunktionen, die notwendig sind, um diese Aufgaben zu erfüllen, sind in der Tabelle »Zeichenbearbeitung« zu finden.
Sollte bei der Überprüfung ein ungültiges Zeichen gefunden worden sein, wird dies dem Anwender mitgeteilt und er wird aufgefordert, nur Zahlen einzugeben. Andernfalls werden die Ergebnisse berechnet und ausgegeben. Im letzten Schritt wird der Eingabecursor wieder auf das Feld für die Länge gesetzt, um schnell die nächste Änderung vornehmen zu können. Dies erfolgt über die Methode focus(). Allerdings wird diese von Browser zu Browser unterschiedlich behandelt. Bei AWeb beispielsweise funktioniert in unserem Listing das Setzen des Focus nur, wenn keine Warnmeldung auf Grund einer fehlerhaften Eingabe notwendig ist. Andernfalls wird der Focus nach dem Bestätigen der Warnung zwar gesetzt, aber gleich wieder entfernt.
Die Möglichkeiten, die sich aus der Verbindung von Formularen und JavaScript ergeben, sind enorm. Die hier vorgestellten Beispiele können Ihnen als Ausgangspunkt dienen, um selbst interaktive Formulare zu erzeugen. Ihrer Phantasie sind dabei keine Grenzen gesetzt. In der nächsten Folge des Kurses befassen wir uns mit der Verwendung von Frames in Verbindung mit JavaScript und erstellen Navigationshilfen auf Skript-Basis.
|
||||||||||||||||||
© 2000 All Rights Reserved. Alle Rechte vorbehalten Franzis' Verlag GmbH Kommentare, Fragen, Korrekturen und Kritik bitte an Webmaster
AMIGA schicken.
Zuletzt aktualisiert am Datum.
