∷ Skripte ∷ JavaScript
Die in den nachfolgenden Rahmen angezeigten Web- bzw. Browser-Applikationen sind für Schulungs- und Unterrichtszwecke gedacht. Sie sind einfache Beispiele dafür, dass client-seitiges Scripting und nützliche Online-Anwendungen nicht unbedingt aufwändig sein müssen, und sollen das Zusammenspiel von JavaScript mit HTML und CSS illustrieren. Jede einzelne HTML-Datei kann auf dieser Seite online ausprobiert, aber auch in einem eigenen Fenster geöffnet werden, von wo aus sie sich dann speichern und drucken oder ihr Quellcode sich betrachten lässt. Die heruntergeladenen Skripte sind in sich abgeschlossen und offline ausführbar, ohne dass weitere Dateien oder eine Verbindung zu einem Server benötigt werden.
Inhaltsverzeichnis:
- Umrechnung/
Umwandlung in römische Zahl - Umrechnung/
Übersetzung einer römischen Zahl - Primfaktorzerlegung
- Währungsumrechnung
- Tic-Tac-Toe / Drei gewinnt
- Rechner für große Ganzzahlen
① Umrechnung/Umwandlung in römische Zahl
Diese Web-Applikation konvertiert eine natürliche Zahl kleiner als 4000 in die römische Zahlschrift. Dabei werden für jede Dezimalstelle der Eingabe die entsprechenden lateinischen Buchstaben angezeigt, wobei
M für 1000, | D für 500, | |||
C für 100, | L für 50, | |||
X für 10, | V für 5, | |||
I für 1 | stehen. |
Zentraler Kern des Algorithmus ist die Funktion toRoman()
, welche eine Zahl entgegennimmt und dazu eine entsprechende Zeichenkette zurückgibt, z. B.:
toRoman(2468) ⇒ MMCDLXVIII
.
Sie basiert auf 3 if
-Entscheidungen, die für jede Ziffer einer Eingabe gefällt werden:
Die Mittlere ermittelt eine Basiswertigkeit (z. B. V
), die Erste alle ihr nachzustellenden additiven Zeichen (z. B. …II
) und die Letzte den Buchstaben in subtraktiver Stellung (z. B. I
…).
② Umrechnung/Übersetzung einer römischen Zahl
Hierbei handelt es sich um das Gegenstück zu dem im vorangegangenen Abschnitt behandelten Skript und eine Adaption eines PowerShell-Cmdlets, welches an anderer Stelle veröffentlicht als auch detailliert beschrieben ist und die natürliche Zahl zu einer in römischer Zahlschrift vorliegenden Eingabe ermittelt. Diese wird mittels eines regulären Ausdrucks geprüft und in additive/subtraktive Wertigkeiten zerlegt. Dabei werden auch einige geläufige alternative Schreibweisen hinsichtlich der Subtraktionsregel akzeptiert:
- Ein
X
darf nicht nur vorC
oderL
und einI
nicht nur vorX
oderV
stehen, sondern vor beliebigen höherwertigen Zeichen, d. h.IM
für 999,XM
für 990,ID
für 499,XD
für 490,IC
für 99 undIL
für 49. - Verdoppelung des Zeichens in subtraktiver Stellung, also u. a.
XIIX
für 18. - Umgehung der Subtraktionsregel, z. B.
VIIII
stattIX
für 9.
Soll irgendetwas davon nicht erlaubt sein, dann muss lediglich der reguläre Ausdruck geeignet angepasst werden.
③ Primfaktorzerlegung
Die Primfaktorzerlegung ist die Darstellung einer positiven natürlichen Zahl n als Produkt aus Primzahlen, die dann als Primfaktoren von n bezeichnet werden.
Der hier verwendete Algorithmus entspricht der Probedivision und geht so vor, dass er – beginnend mit 2 – für alle natürlichen Zahlen der Reihe nach prüft, ob die Eingabe durch sie ohne Rest teilbar ist. Jedesmal wenn dies der Fall ist, wird die Zahl als Primfaktor notiert und mit der hierdurch dividierten Eingabe fortgefahren. Die Ausführung bricht ab, sobald das Quadrat der gerade betrachteten Zahl größer ist als der aktuelle Wert der Eingabe. Für ergänzende Details und Ansätze zur Optimierung sei auf diesen Beitrag verwiesen.
Die Sicherheit etlicher Verschlüsselungsverfahren beruht darauf, dass nichttriviale Teiler und damit die Primfaktorzerlegung einer Zahl bislang nicht effizient berechenbar sind. Für große Zahlen wie 8999999847249937, 8999999847252241 oder 8999999999999971 können Millionen von Probedivisionen erforderlich sein, um sie entweder in ihre Primfaktoren zu zerlegen oder sicher festzustellen, dass sie sich nicht faktorisieren lassen sondern prim sind. Insofern ist es eine spannende Frage und durchaus auch eine Art Leistungstest, wie schnell ein im Browser laufendes Skript eine solche Aufgabe bewältigt.
BigInt-Version:
Bitte hier klicken für die Primfaktorzerlegung großer Zahlen mit mehr als 15 Ziffern!
④ Währungsumrechnung
Um während eines Urlaubs oder Aufenthalts außerhalb des Euro-Raums die lokalen Preise vor Ort besser einschätzen zu können, kann es hilfreich sein, eine kompakte Übersicht zur Umrechnung von Devisen griffbereit mit sich zu führen. Mittels eines einfachen Skripts kann eine entsprechende Umrechnungstabelle für die Geldbörse schnell erzeugt werden, welche spezifizierte Beträge in Eigen- und Fremdwährung gegenüberstellt. Der Kurs kann dabei frei gewählt werden, ebenso wie die Stückelungen für Hin- als auch Rückrichtung.
Es empfiehlt sich, die Anwendung in einem neuen Tab/Fenster auszuführen. Beim Ausdrucken werden die Überschrift und das Formular ausgeblendet, so dass dann nur die reine Tabelle übrig bleibt; ferner lässt sich im Druckdialog i. d. R. noch die Skalierung verändern, um sie kleiner oder größer zu machen. Eine gestrichelte Linie erleichtert das Falten des Zettels.
Vom Quellcode ist die Applikation bereits darauf vorbereitet, schnell auch die Eigenwährung, das Dezimaltrennzeichen, die Anzahl der Nachkommastellen, das Datumsformat sowie sonstige Voreinstellungen anpassen zu können.
Intern verwenden alle bisherigen Beispiele einschließlich diesem die gleiche Technik: Benutzereingaben werden per Formular entgegengenommen und der URL angehängt, wenn die HTML-Datei nach Betätigung der Übermittlungsschaltfläche neu aufgerufen wird; nach dem Seitenwechsel werden dann per JavaScript die Daten aus der Adresszeile extrahiert, verarbeitet und Ausgaben generiert, welche dynamisch ins Dokument eingefügt werden. Dieses Vorgehen hat einen willkommenen Nebeneffekt: Um die Seite – so wie sie gerade angezeigt wird – zu einem späteren Zeitpunkt erneut zu öffnen, muss lediglich ihre Adresse/URL mitsamt allen Parametern notiert/kopiert und wieder aufgerufen werden.
Im Gegensatz zu den anderen Webapplikationen auf dieser Seite verwendet diese einige Neuerungen, welche in ECMAScript 6 oder höher eingeführt wurden (initial
-Stilschlüsselwort, Default Function Parameters, RegExp Lookbehind Assertions, URLSearchParams
-Schnittstelle), und ist deshalb nicht veralteten Browsern wie dem Internet Explorer (IE) ausführbar.
Teilweise wird in den Quelltexten innerhalb von /*
...*/
-Kommentaren und Fallback-Funktionen angedeutet, wie Programmcode in zeitgemäßerer Schreibweise formuliert werden könnte; darüber hinaus gibt es noch weiteres Modernisierungspotential wie Template Literals, Arrow Functions, Number Properties/
⑤ Tic-Tac-Toe / Drei gewinnt
Bei diesem klassischen, einfachen Strategiespiel für 2 Personen geht es darum, als Erster eine Horizontale, Vertikale oder Diagonale auf einem Gitter von 3×3 Feldern vollständig in den Besitz zu nehmen. Dafür besetzen zwei Spieler abwechselnd ein noch freies Feld auf dem Spielbrett. Wer anfängt, hat einen kleinen Vorteil und wird deshalb per Los bestimmt.
Auf dem Spielbrett werden durch den Computer belegte Felder mit dem Zeichen ◯
markiert, und die vom Menschen okkupierten durch ╳
.
Ist Letzterer am Zug, kann dieser auf ein noch freies Quadrat klicken, um das entsprechende Feld zu besetzen.
Ist das Ende der Partie erreicht, so wird durch ein lachendes, weinendes oder neutrales Gesicht visualisiert, ob der Mensch gewonnen, verloren oder unentschieden gespielt hat; zudem wird ein Link angezeigt, um eine neue Runde zu beginnen.
Bei diesem Beispiel handelt es sich um die Adaption eines PowerShell-Skripts, welches an anderer Stelle veröffentlicht und detailliert beschrieben ist. Die Interaktion basiert hier weniger auf Formularen sondern Ereignissen wie Mausklicks, durch die JavaScript ausgeführt wird, welches die innere Struktur des HTML-Dokuments modifiziert, was sich unmittelbar aufs äußere Erscheinungsbild (u. a. Ein-/Ausblendung von Symbolen oder Links) auswirkt. Mit gerade mal 80 Zeilen ist der Quellcode recht klein für ein Spiel mit grafischer Oberfläche gegen einen versiert agierenden Computer-Kontrahenten, der sich allerdings durch eine Senkung der Spielstärke schwächen lässt.
⑥ Rechner für große Ganzzahlen
Wer wollte nicht schon immer mal mit riesig großen Zahlen hantieren?
– Nun, seit der Einführung des Datentyps BigInt
in JavaScript lassen sich entsprechende Webapplikationen erheblich leichter realisieren und damit Ausdrücke wie 99991111 oder 666666 exakt ausrechnen, d. h. Ergebnisse in voller Länge statt in wissenschaftlicher Exponentialschreibweise darstellen.
Ein Blick in den Quelltext der Online-Anwendung zeigt zudem, dass eine Rechenmaschine mit 2 Registern von ihrer Konstruktion und Funktionsweise her gar nicht mal so kompliziert ist.
Alle Angaben sind ohne jegliche Gewähr. Der Autor übernimmt keinerlei Verantwortung oder Haftung für Fehler oder Ungenauigkeiten, die in diesem Dokument auftreten können. Anmerkungen, Ergänzungen und Verbesserungsvorschläge zu diesem Artikel werden gerne entgegengenommen.