JavaScript - Konkrete Anwendungen

Wie bereits angekündigt, wird es im fünften Teil etwas weniger theoretisch: wir programmieren Hangman und einen Temperaturkonverter.

Das JS nicht für alle Aufgaben geeignet ist, wurde bereits erwähnt. Für die in diesem Kursteil erwähnten Lösungen ist JavaScript hingegen sehr gut geeignet, obwohl das Ziel auch mit anderen Mitteln, z.B. durch serverseitige Programmiersprachen, erreicht werden könnte. Bei Hangman hätte dies aber zur Folge, das nach jedem Buchstaben die Seite neu geladen werden muss, da die Überprüfung eben auf dem Server, d.h. an dem Ort, wo die HTML-Datei liegt, stattfindet. JavaScript macht diese Überprüfung hingegen auf dem eigenen Rechner (auch Client genannt), was die Wartezeiten natürlich erheblich verringert.

Einige interessante Anwendungen sind hingegen überhaupt nicht in JavaScript möglich: Foren, Gästebücher und Zugriffszähler. Einige der faszinierendsten JavaScripte arbeiten zudem intensiv mit DHTML und funktionieren deshalb nicht mit Light of Adamas.

Temperaturkonverter

Exemplarisch für alle möglichen Konvertieraufgaben steht hier die Umrechnung der Temperatur. Die eigentlichen Umrechnungsformeln sind relativ einfach. Die größte Einschränkung die seitens des Browsers gesetzt wird, ist die Ausgabe der Ergebnisse, denn in Netscape 3.0-kompatiblen Browsern kann der Zugriff nur auf Formularelemente erfolgen. Um das ganze etwas spannender zu machen, soll Celsius nicht nur in Fahrenheit, sondern auch Kelvin und Rankine umgerechnet werden.

Auf der HTML-Seite wird ein Formular mit vier Eingabefeldern benötigt. Ausgewertet wird allerdings nur das erste Eingabefeld (Celsius):

<form name="temperaturen">
Celsius: <input size=4 name="celsius"><br>
Fahrenheit: <input size=4 name="fahrenheit"><br>
Kelvin: <input size=4 name="kelvin"><br>
Rankine: <input size=4 name="rankine"><br>
</form>

Um die Berechnung in Gang zu setzen, wird ein ganz gewöhnlicher HTML-Link mit JavaScript-Aufruf eingesetzt:

<a href="javascript:berechnen()">Berechnen</a>

Die Funktion berechnen() hat zwei Aufgaben. Die erste ist das Auslesen des Eingabefeldes "Celsius", die zweite das Umrechnen und Eintragen der drei anderen Temperaturen. Hier zunächst einmal die fertige Funktion inkl. Script-Tags:

<script language="JavaScript">
<!--
function berechnen() {
	a=document.temperaturen.celsius.value;
	document.temperaturen.fahrenheit.value = 32+a*1.8;
	document.temperaturen.kelvin.value = 1*a+273;
	document.temperaturen.rankine.value = (32+a*1.8)+460;
}
//-->
</script>

In dem Script wird aus Gründen der Übersichtlichkeit die Hilfsvariable a benutzt. Die Umrechnung von Celsius auf Fahrenheit dürfte einigen bekannt sein. Weniger bekannt sind Kelvin und Rankine. Wie unschwer zu erkennen ist, basieren Kelvin und Rankine auf Celsius bzw. Fahrenheit. Beide sind eher im wissenschaftlichen Bereich verbreitet, wobei es mir nicht bekannt ist, ob US-Amerikanische Forscher nicht doch in Kelvin rechnen. Die Multiplikation in der Kelvin-Zeile wirkt zunächst etwas überflüssig. Dahinter verbirgt sich allerdings ein Trick. Da JavaScript munter zwischen Strings und numerischen Variablen hin- und herkonvertiert, kann es schon einmal vorkommen, das ein Wert der eigentlich als Zahl vorliegen sollte, als String vorliegt. Addition ist schließlich auch ein gültiges Zeichen für Strings und so würde JS bei Weggelassen der Multiplikation folgendes denken:

a="4"
a+732
ergibt 4732

Die Multiplikation setzt die JS-interne Konvertierung in Gang. Dafür gibt es zwar auch einen entsprechenden Befehl, aber der Trick ist etwas kürzer.

Gleich nach dem Klick erscheint in den drei Eingabefeldern unterhalb von Celsius die drei ausgerechneten Werte.

Hangman

Das Spiel Hangman ist sicherlich eines der einfachsten, aber ausbaufähigsten Spiele. Die hier vorgestellte Variante stellt nur eine Basis dar. Die Spielregeln von Hangman sind sehr simpel: der Spieler muß ein unbekanntes Wort erraten und darf bei jedem Versuch einen Buchstaben nennen. Ist dieser Buchstabe im gesuchten Wort enthalten, wird dieser aufgedeckt. Nach sieben Fehlversuchen ist das Spiel beendet.

Im Body-Bereich wird Hangman eingegeben.

Als Anzeige dient ein Eingabefeld. Für jeden unbekannten Buchstaben wird der Unterstrich angezeigt. Die ersten Definitionen werden außerhalb der Funktion hangman() gemacht:

genommen		Die bisher genommenen Buchstaben
wort			Das zu erratende Wort
tries			Fehlversuche

Die Hangman-Funktion wird anschließend einmal aufgerufen, um die Unterstriche anzuzeigen.

Wenn der Spieler nun einen Buchstaben eingibt und auf OK klickt, wird die Funktion erneut benutzt.

Zuerst wird hangman() die Länge des Wortes ("xylophon") festgestellt. Die Variable neuwort dient als Ausgabemaske, also genau das, was im Eingabefeld "wortmaske" erscheint. Der eingegebene Buchstabe wird ausgelesen und in "eingegeben" gespeichert. Der Buchstabe wird nun in die Liste der genommenen Buchstaben aufgenommen.

Ob der Buchstabe überhaupt im Wort vorhanden ist, wird mit indexOf ermittelt. Wenn der Buchstabe nicht vorhanden ist, gibt indexOf den Wert -1 zurück. In diesem Fall wird die Anzahl der Fehlversuche um eins erhöht. Bei mehr als sechs Fehlversuchen wird die Meldung "Game Over" ausgegeben.

Die folgende Schleife dient in erster Linie dazu, die Ausgabemaske zu basteln. Jeder Buchstabe des gesuchten Wortes wird entnommen und mit der Buchstabenliste in "genommen" verglichen. Wenn der Buchstabe bereits geraten wurde, muß an der entsprechenden Stelle der Buchstabe erscheinen, sonst der Unterstrich.

Zum Schluß wird die fertige Ausgabemaske noch eingesetzt und das Eingabefeld gelöscht.

Die Erweiterungsmöglichkeiten sind vielfältig. In dieser Version kann ein Spieler auch nach Spielende noch weiterraten. Mit einem Array könnten zudem mehrere Wörter eingebaut werden, aus denen JavaScript per Zufall einen auswählt. Die Liste der genommenen Buchstaben wird nicht angezeigt. Mit etwas mehr Aufwand ließe sich das Script auch zu einer "Glücksrad"-Variante umbauen.

Listing: hangman

<form name="hang">
<input size=20 name="wortmaske"><br>
<b>Wort eingeben:</b> <input size=1 name="eingabe"><br>
<a href="javascript:hangman()">OK</a>
</form>
<script>
<!--
wort="xylophon";
genommen="";
tries=0;
hangman();
function hangman() {
	a=wort.length;
	neuwort="";
	eingegeben=document.hang.eingabe.value;
	genommen=genommen+eingegeben;
	if (wort.indexOf(eingegeben)==-1) {
		tries=tries+1;
	}
	if (tries>6) {
		alert("GAME OVER");
	}
	for(i = 0; i <= a; i++)
	{
		teil = wort.substr(i,1);
		if (genommen.indexOf(teil)>-1 && genommen!="") {
			neuwort=neuwort+teil;
		} else {
			neuwort=neuwort+"_";
		}
	}
	document.hang.wortmaske.value = neuwort;
	document.hang.eingabe.value = "";
}
//-->
</script>

Mia Jaap

---

---