Ein Optionspreisrechner in Javascript
Javascript ist eine von Netscape entwickelte Scriptsprache, die u.a. von dem Web-Browser von Netscape und dem Internet Explorer interpretiert werden kann. Ein Javascript-Programm kann direkt Bestandteil eines Html-Dokumentes sein.Im folgenden wird ein einfaches Javascript-Programm zur Berechnung eines Optionspreises vorgestellt. Wenn Sie Veränderungen an dem Programm vornehmen wollen, können Sie das gerne tun. Sie müssen sich nur die Datei "rechner.html" auf Ihrem Rechner speichern. Diese Datei verändern Sie nach Ihren Wünschen und laden sie dann in einen Browser.
Eine umfassende Einleitung in Html, Javascript und einige weitere Techniken für das Programmieren von Web-Seiten finden Sie zum Beispiel in dem Dokument selfhtml.
Der Optionspreisrechner
So sieht der Programmtext aus. Und das ist das Ergebnis.Das Programm, Schritt für Schritt
Die graphische Oberfläche
Ein Html-Dokument besteht aus einem Kopf, der sich zwischen<head> und </head> befindet, und dem sichtbaren Text, der zwischen <body> und </body> steht. Die graphische Oberfläche, die Sie in dem Beispiel sehen, also die Eingabefelder und Buttons, wird direkt durch Html-Befehle erzeugt und diese stehen im Textteil des Dokumentes.
Sehen wir uns zunächst den Teil des Dokumentes an, der nach <body> steht.
<form name="Eingabeformular">
<table>
<tr>
<td align=right>Kurs:</td>
<td><input name="Kurs" type=text size=10 maxlength=10></td>
</tr>
.
.
.
</table>
.
.
.
</form>
|
Durch <form>, </form> wird eine Umgebung für ein Formular definiert.
Ein Formular, das neben Eingabefeldern auch etwa Auswahllisten und Radio-Buttons enthalten kann, wird verwendet, um Daten abzufragen. Diese Daten können an den Server zurückgeschickt , an eine e-Mail Adresse versandt, oder von einem Javascript-Programm ausgewertet werden.
In unserem Beispiel erhält das Formular noch einen Namen durch den Befehl name="Eingabeformular". Mit diesem Namen kann das Formular dann von Javascript aus angesprochen werden.
Die Tags (ein Html-Befehl zwischen "<" und ">" wird "tag" genannt) <table>, <tr> und <td> dienen der Anordnung der Elemente des Formulars: Mit <table> wird -auch außerhalb von Formularen- eine Tabelle eingeleitet und mit <tr> eine Zeile in diese Tabelle begonnen. Zwischen <td> und </td> stehen dann die einzelnen Einträge.
<table>
<tr>
<td align=right>Kurs:</td>
<td><input name="Kurs" type=text size=10 maxlength=10></td>
</tr>
.
.
.
</table>
|
align=right) der ersten Tabellenspalte ausgerichtet wird. Der zweite Eintrag ist eine Eingabezeile und wird im nächsten Absatz erläutert. Die Tabellenzeile wird mit <tr> beendet, die Tabelle mit <table>.
Ein einzeiliges Eingabefeld wird durch das Tag <input type=text> programmiert, und sieht dann so aus:
</input> gibt es nicht.
Insgesamt sieht der Befehl in unserem Beispiel so aus :
<td><input name="Kurs" type=text size=10 maxlength=10></td>
|
size gibt die Größe des angezeigten Feldes (in Anzahl von Zeichen) und maxlength die maximale Länge der Eingabe an.
Das <input> Tag darf nur innerhalb einer <form>, </form> Umgebung stehen. Eine Anordnung innerhalb einer Tabelle ist nicht notwendig.
Die weiteren Eingabefelder sehen so aus:
<tr>
<td align=right>Ausübung:</td>
<td><input name="Ausuebung" type=text size=10 maxlength=10></td>
</tr><tr>
<td align=right>Laufzeit:</td>
<td><input name="Laufzeit" type=text size=10 maxlength=10></td>
</tr><tr>
<td align=right>Volatilität:</td>
<td><input name="Volatilitaet" type=text size=10 maxlength=10></td>
</tr><tr>
<td align=right>Zinssatz:</td>
<td><input name="Zinssatz" type=text size=10 maxlength=10></td>
</tr><tr>
<td align=right>Dividende:</td>
<td><input name="Dividende" type=text value=0 size=10 maxlength=10></td>
</tr>
|
value kann ein Vorgabewert angegeben werden.
Eine andere Möglichkeit, eine Information abzufragen, bieten Radio-Buttons. Dabei kann genau eine von mehreren Möglichkeiten ausgewählt werden, wie z.B., ob eine Option europäisch oder amerikanisch ausgeübt werden kann, oder ob sie vom Typ Call oder Put ist.
Der Quellcode dazu sieht so aus:
<table>
</tr>
<td align=left>
<input type=radio name="Europaeisch" checked value="true"> Europäisch
<br>
<input type=radio name="Europaeisch" value="false"> Amerikanisch
</td>
<td align=left>
<input type=radio name="Call" checked value="true"> Call
<br>
<input type=radio name="Call" value="false"> Put
</td>
</tr>
</table>
|
<input type=radio> definiert. Die Auswahlmöglichkeit besteht dabei zwischen all den Radiobuttons, denen der gleiche Name im Parameter name zugewiesen wird. Unterschieden werden die Buttons innerhalb einer Auswahl durch den Parameter value. Mit dem Wort checked kann eine Vorauswahl getroffen werden. Die Beschriftung der Buttons erfolgt nach dem input-Tag. Das <br> Tag erzwingt einen Zeilenumbruch.
Um die Berechnung zu starten, klickt der Anwender den Button mit der Beschriftung Berechnen an. Ein weiterer Button ermöglicht das Löschen der Eingaben. Die zugehörigen Html-Befehle sehen so aus:
<td>
<input type=button value="Berechnen" onClick="Berechnen()">
</td>
<td>
<input type=button value="Löschen" onClick="Loeschen()">
</td>
|
<input type=button value="Click"> erzeugt den Button:
Dem Parameter onClick wird der Name eines Javascript-Unterprogrammes mitgeteilt, das aufgerufen werden soll, wenn der Button angeklickt wird. Dieses Programm werden wir dann im nächsten Teil kennenlernen. Da in Javascript Namen keine Sonderzeichen (außer dem Unterstrich _ ) enthalten dürfen, darf das Programm im zweiten Fall nicht "Löschen" genannt werden.
Das letzte Element des Formulars ist ein Eingabefeld, das das Ergebnis anzeigen soll. In dieses Feld wird vom Javascript-Programm der berechnete Preis eingetragen.
<td align=right>Optionspreis:</td>
<td><input name="Ergebnis" type=text size=10 maxlength=10 readonly> |
readonly verbietet das Schreiben in dieses Feld.
Das Javascript Programm
Ein Javascript-Programm steht im Kopf-Bereich des Html-Dokumentes, steht also zwischen den<head> Tags.
<html>
<head>
<title>Optionspreisrechner</title>
<script language="JavaScript">
<!--
function Berechnen(){
.
.
.
}
.
.
.
function Loeschen(){
.
.
.
}
//-->
</script>
</head>
|
<script language="JavaScript"> Tag zeigt dem Browser an, daß bis zu dem </script> Tag ein Javascript-Programm notiert ist. Zwischen <!-- und //--> steht üblicherweise ein Kommentar. Diese Zeichen werden gesetzt, damit ein Browser, der kein Javascript versteht, diesen Abschnitt einfach ignoriert. Javascript-fähige Browser wiederum scheinen Kommentare nicht immer zu ignorieren...
Betrachten wir uns zuerst das Javacript-Programm, das das Löschen übernimmt. Dieses Programm wird aufgerufen, wenn der Benutzer den entsprechenden Button anklickt.
function Loeschen(){
document.Eingabeformular.Kurs.value="";
document.Eingabeformular.Ausuebung.value="";
document.Eingabeformular.Laufzeit.value="";
document.Eingabeformular.Volatilitaet.value="";
document.Eingabeformular.Zinssatz.value="";
document.Eingabeformular.Dividende.value="0";
document.Eingabeformular.Ergebnis.value="";
}
|
function eingeleitet. Dann folgt ein selbstgewählter Name. Dieser muß mit einem Buchstaben beginnen und darf nur Buchstaben, Zahlen und den Unterstrich "_" enthalten. Groß- und Kleinschreibung wird beachtet. Deutsche Umlaute sind Sonderzeichen und als solche verboten.Zwischen
"(" und ")" kann eine Parameterliste stehen, ein Beispiel wird später gezeigt. Innerhalb der Klammern "{" und "}" wird der eigentliche Programmtext notiert. Die erste Zeile sieht so aus:
document.Eingabeformular.Kurs.value="";
|
document kann man auf den Inhalt des aktuellen Html-Dokumentes zugreifen. Mit document.forms[i] wird das (i+1)'te Formular angesprochen. Alternativ kann -wie in dem Beispiel- statt forms[i] auch der Name verwendet werden, sofern ein solcher im form Tag vergeben wird.
Mit
<form name="Eingabeformular"> |
document.Eingabeformular an.
Ein Element des Formulars wird über
document.FormularName.elements[i] oder document.FormularName.ElementName erreicht. document.Eingabeformular.Kurs.value gibt den Inhalt des Eingabefeldes an, das wir "Kurs" genannt hatten.
Dabei kann der Wert sowohl ausgelesen werden wie auch verändert werden. In dem Beispiel wird dem Feld der Wert "" zugewiesen, es wird also gelöscht.
Als nächstes sehen wir uns das Programm "Berechnen()" an, das aufgerufen wird, wenn der Anwender die Berechnung durch Betätigung des entsprechenden Buttons startet. Der Anfang sieht so aus:
function Berechnen(){
timeSteps=50;
eingabe=true;
spot=document.Eingabeformular.Kurs.value;
spot=spot.replace(/,/,".");
if(istZahl(spot)==false){
document.Eingabeformular.Kurs.value="? "+spot+" ?";
eingabe=false;
}
.
.
.
}
|
timeSteps=50; einer Variablen timeSteps den Wert 50 zuweist wird sicher niemanden überraschen. Selbst das den C- und Java-Programmierern so vertraute ";" zum Abschluß einer Anweisung fehlt nicht. Aber wo ist die Variablendeklaration, die festlegt ob eine Variable etwa Text oder eine Fließkommazahl speichern soll? Nun, Javascript braucht so etwas nicht. Die Variable hat jeweils den Typ, der gerade gebraucht wird. (Da fragt man sich tatsächlich, warum man in anderen Sprachen immer so pedantisch Konvertierungsfunktionen aufrufen muß.)
Die nächsten Zeilen dienen der Auswertung der Benutzer-Eingaben.
spot=document.Eingabeformular.Kurs.value;
spot=spot.replace(/,/,".");
if(istZahl(spot)==false){
document.Eingabeformular.Kurs.value="? "+spot+" ?";
eingabe=false;
}
|
spot zugewiesen. Der nächste Befehl soll ein eventuell in der Eingabe vorhandenes "," in einen "." umwandeln, damit der Inhalt der Variablen auch dann als Zahl interpretiert werden kann.
Wie soll man einen Befehl wie spot.replace(...) verstehen? Die Variable spot wird an dieser Stelle von Javascript als ein String (das ist eine Variable, die eine Zeichenkette enthält) angesehen. Genauer sagt man, sie ist eine Instanz einer Klasse String. Wer noch nie mit objektorientierter Programmierung zu tun hatte, stellt sich unter einer Klasse hier am besten einen Variablentyp vor, für den auch einige Funktionen zum Umgang mit diesem Typ definiert sind. So gibt es für den Typ String eine Funktion replace(), die weiß, wie in einem String Zeichen gegen andere ausgetauscht werden können. Der Befehl spot.replace(...) ruft dann die Funktion replace der Klasse String auf und wendet die Funktion auf die in der Variablen spot gespeicherte Zeichenkette an.
Die nächsten Zeilen dienen der Überprüfung, ob tatsächlich eine Zahl eingegeben wurde. Dazu wird die Funktion istZahl aufgerufen, die in einem späteren Abschnitt erläutert wird. Wenn die übergebene Variable keine Zahl enthält, gibt die Funktion istZahl den Wert false zurück. Ob dem so ist, wird mit if(istZahl(spot)==false) überprüft und ggf. wird der folgende Block (innerhalb der Klammern"{" und "}") ausgeführt.
Die nächsten Abschnitte in dem Programm wiederholen diese Prozedur, um die Werte für Ausübung, Laufzeit, Volatilität, Zinssatz und Dividende auszulesen und den Variablen strike, time, volatility, rDomain und rForeign zuweisen.
In den dann folgenden Zeilen wird festgestellt, welcher Optionstyp mittels der Radiobuttons ausgewählt wurde. Die Radiobuttons hatten wir so definiert:
<td align=left>
<input type=radio name="Europaeisch" checked value="true"> Europäisch
<br>
<input type=radio name="Europaeisch" value="false"> Amerikanisch
</td>
|
document.Europaeisch[j].checked den Wert true, falls j=i-1 und sonst den Wert false. Wir nutzen das im Programm so:
if(document.Eingabeformular.Europaeisch[0].checked) european=true;
else european=false;
|
Im letzten Abschnitt wird zunächst die Variable eingabe
überprüft. Ihr wurde oben der Wert false zugewiesen, falls mindestens eine der Eingaben keine Zahl enthielt und daher korrigiert werden muß. Dazu wird der Benutzer mit einer Alarmbox alert("Text der Warnung") zur notwendigen Korrektur aufgefordert und das Programm endet ohne weitere Aktivität.
if(eingabe==false) alert("Bitte geben Sie nur \n numerische Werte ein");
else{
ergebnis=Optionswert(spot,strike,time,volatility,rDomain,rForeign,timeSteps,european,call);
document.Eingabeformular.Ergebnis.value=ergebnis;
}
|
Optionswert aufgerufen, das die eigentliche Berechnung übernimmt. Dieses Programm gibt das Ergebnis zurück, das dann in der nächsten Programmzeile in das Ergebnis-Feld des Eingabeformulars geschrieben wird.
Das Programm Optionswert berechnet aus den Eingabewerten, die als Parameter übergeben werden, den Preis der Option. Das Ergebnis der Rechnung wird -wie üblich- mit dem Befehl return an die aufrufende Funktion zurückgegeben.
function Optionswert(spot,strike,time,volatility,rDomain,rForeign,timeSteps,european,call){
v=new Array(timeSteps+2);
pw=new Array(2*(timeSteps+1)+1);
returnValue=0;
n_strike=strike/spot;
for(n=timeSteps;n<=timeSteps+1;n++){
dt=time/n;
u=Math.exp(volatility*Math.sqrt(dt));
d=1.0/u;
p=(Math.exp((rDomain-rForeign)*dt)-d)/(u-d);
q=1.0-p;
discount=Math.exp(-1.0*rDomain*dt);
p*=discount;
q*=discount;
for(j=-n;j<=n;j++) pw[j+n]=Math.pow(u,j);
for(j=0;j<=n;j++) v[j]=profile(pw[2*j-n+n],n_strike,call);
for(k=n-1;k>=0;k--){
for(j=0;j<=k;j++){
v[j]=p*v[j+1]+q*v[j];
if(european==false) v[j]=Math.max(v[j],profile(pw[2*j-k+n],n_strike,call));
}
}
returnValue+=v[0];
}
returnValue*=0.5*spot;
return returnValue;
}
function profile(spot, strike, call){
if(call) return Math.max(spot-strike,0.0);
else return Math.max(strike-spot,0.0);
}
|
Ein Variablenfeld der Größe n wird in Javascript mit var=new Array(n) definiert. Auf den i'ten Eintrag in dem Feld wird mit var[i-1] zugegriffen.
Mathematische Funktionen sind in Javascript Funktionen der Klasse Math. Innerhalb dieser Klasse gibt es z.B. eine Funktion sqrt(number) zum Wurzelziehen und wird dementsprechend mit Math.sqrt(number) aufgerufen. Ob übrigens die Variable number tatsächlich eine Zahl enthält, ist nicht so sicher, denn es gab ja keine Typfestlegung der Art "double number", wie man sie aus anderen Sprachen kennt. Und was passiert dann, wenn die Variable number keine Zahl enthält? Dann gibt die Funktion Math.sqrt() die Konstante NaN (Not a Number) zurück. Dieser Wert NaN wird dann durch die ganze weitere Rechnung fortgeführt und zum Schluß in das Ergebnisfeld ausgegeben. Das ist zumindest das, was passieren sollte. Wenn man Pech hat, stürzt der Browser des Benutzers ab. Das ist auch ein Grund dafür, warum Eingaben überprüft werden sollten. Was in unserem Programm noch fehlt, ist eine Überprüfung, ob die eingegebene Laufzeit positiv ist...
Mit sehr wenigen Veränderungen kann man das obenstehende Programm Optionswert in ein Java oder ein C++ Programm konvertieren. Für beide müssen Variablendeklarationen eingeführt werden und die Definition für die Variablenfelder verändert werden. Und für C++ muß noch das Math. bei den mathematischen Funktionen gestrichen werden.
Das letzte Programm, das noch vorgestellt werden muß, ist das zum Überprüfen, ob eine Variable eine Zahl enthält. Soweit ich weiß, stellt Javascript dafür keine eingebaute Funktion zur Verfügung. Also muß man das selber programmieren oder von jemandem kopieren.
function istZahl(field){
var Wert=true;
points=0;
for(i=0;i<field.length;i++){
if(field.charAt(i) < "0"|| field.charAt(i) > "9"){
if(!(field.charAt(i)=="-" && i==0)){
if(field.charAt(i)=="."&&points==0) points++;
else{
Wert=false;
break;
}
}
}
}
return Wert;
|
0-9 ist oder ein ".", der dann aber höchstens einmal vorhanden sein darf. Auch ein "-" an der ersten Stelle ist zugelassen, Exponentialdarstellung wird dagegen hier nicht als Zahl erkannt.
