Websiteentwicklung: JavaScript: Objekte: Math: Aufgaben
Aufgaben zum Math-Objekt
Aufgabe 1: Würfel-Simulation
BearbeitenSimulieren Sie das Werfen von 2 Würfeln mit Hilfe von Zufallszahlen. Ermitteln Sie die absolute Häufigkeit der Augenzahlen von 2 - 12 und die relative Häufigkeit in % und stellen Sie das Ergebnis in einer Tabelle mit einer Balkengrafik dar. Die Anzahl der Versuche sollte wählbar sein.
Für die Realisierung ist ein kleiner Vorgriff auf ein späteres Kapitel notwendig - zum Speichern der Ergebnisse benötigen wir nämlich ein Array. Sie definieren, füllen und werten es mit folgender Syntax aus:
var W = new Array(12) //definiert ein Array mit 12 Elementen
W[x]=W[x]+1 //erhöht den Zähler für den Wert x um 1
var y = W[9] //füllt die Variable y mit dem Wert des Array-Elementes Nr. 9
Die folgenden Grafiken zeigen die Dateneingabe, die Ausgabe und bieten eine JPG-Grafik zum Download an, mit der die Darstellung als Balkengrafik erzeugt werden kann.
-
Dateneingabe
-
Datenausgabe
-
Balken für Balkengrafik
Aufgabe 2: Simulation eines Taschenrechners
BearbeitenNachdem nun reichlich HTML- und JavaScript-Objekte bekannt sind, können wir uns einmal eine etwas größere Aufgabe vornehmen:
- Konstruieren Sie einen Taschenrechner als HTML-Seite mit JavaScript. Das ist keine Aufgabe für zwischendurch, sondern eine kleine Herausforderung. Der Taschenrechner soll folgendermaßen aussehen (linkes Bild):
Programmablauf zum Test ansehen
Version mit Grafiken als Tasten |
Version mit Buttons |
Die Taste „e“ soll die mathematische Zahl im Display darstellen, „ “ die Kreiszahl Pi=3.14159.... . „MS“ soll den Wert aus dem Display speichern, „M+“ soll den Wert aus dem Display zum Speicher dazu addieren, „M-“ soll den Wert aus dem Display vom Speicher subtrahieren, „MR“ soll den Wert aus Speicher in das Display bringen, „MC“ soll den Speicher löschen, das rote „M“ soll aufleuchten, wenn der Speicher belegt (M != 0) ist und der Speicherinhalt soll im kleinen Display angezeigt werden. „CE“ löscht die letzte Eingabe, „C“ löscht alle Register (bis auf den Speicher, der wird ja durch „MC“ gelöscht). Das Ganze soll durch Klicken auf die Tasten funktionieren wie ein klassischer Taschenrechner (oder das Windows-Pendant „calc.exe“). Da Buttons in der Größe nur schwer steuerbar sind (siehe rechtes Bild), sollen die „onClick“-Ereignisse hinter Grafiken liegen. Das Rohmaterial für die Tasten-Grafiken liegt in einer SVG-Datei (ist z.B. in InkScape bearbeitbar), die von Wikimedia-Commons heruntergeladen werden kann. Die einzelnen Buttons lassen sich dann leicht als „png“- oder „jpg“-Datei exportieren und ins HTML einbinden.
Für die Berechnung der Zahlen E + Pi sowie der Quadratwurzel müssen Sie auf das noch nicht besprochene Math-Objekt zurückgreifen. Beispiel:
var Pi=Math.PI;
var E=Math.E;
var QuadratWurzelaus2=Math.sqrt(2);
Programmablauf zum Test ansehen
Wer möchte kann sich die Grafiken natürlich auch mit einem Bildbetrachter aus einem Screenshot ausschneiden oder mit einem Grafikprogramm selbst erstellen.
Viel Glück und vor allem : Viel Spaß und gutes Gelingen !