Websiteentwicklung: JavaScript: Objekte: Math: Lösungen
Lösungen zu das Math-Objekt
Aufgabe 1 : Würfel-Simulation Bearbeiten
Eine der (vielen denkbaren) Lösungen sieht zum Beispiel folgendermaßen aus:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Zufallszahlen / Würfel</title>
<meta name="description" content="Zufallszahlen / Würfel">
<meta name="author" content="moeller">
<meta name="keywords" content="Zufallszahlen, Würfel">
<script language="JavaScript">
<!--
var Z=new Array(12);
var nW=0;
function fW()
{
var x=Math.random()*6;
x=Math.ceil(x);
return x
}
function fWW()
{
var iSu=fW();
iSu=iSu + fW();
return iSu;
}
function fAusgabe()
{
with(document)
{
open();
write("<h2>Simulation des Wurfs mit 2 Würfeln durch einen Zufallszahlen-Generator </h2><br>");
write("<h3>Die Auswertung für " + nW + " Würfe :</h3>");
write("<table border=\"1\">");
write("<tr><td>Augensumme</td><td>Häufigkeit</td><td>Häufigkeit in %</td><td>Grafische Darstellung</td></tr>");
var Zeile="";
var pz=0;
var pb=0;
for(var i=2;i<=12;i++)
{
write("<tr>");
Zeile="<td align=\"right\">" +i + "</td>";
Zeile=Zeile + "<td align=\"right\">" + Z[i]+ "</td>";
pz=100*(Z[i]/nW);
pz=Math.round(100*pz)/100;
pb=Math.round(pz*10);
Zeile=Zeile + "<td align=\"right\">" + pz +" % </td>";
Zeile=Zeile + "<td><img src=\"../Grafik/JavaScript_Balken.jpg\" width=\"" + pb + "\" height=\"20\" alt=\"Balken\"></td>"
write(Zeile);
write("</tr>");
}
write("</table>");
close();
}
}
function fWurfReihe()
{
nW=parseInt(prompt("Anzahl der Versuche : "));
var x=0;
for(var i=1;i<=12;i++)
{
Z[i]=0;
}
for(var i=1;i<=nW;i++)
{
x=fWW();
Z[x]=Z[x]+1;
}
fAusgabe();
}
//-->
</script>
<noscript>Bitte schalten Sie JavaScript ein</noscript>
</head>
<body>
<h2>Simulation des Wurfs mit 2 Würfeln durch einen Zufallszahlen-Generator </h2>
<br>
<form name="Form1" action="JavaScript_Wuerfel.html" method="post">
<input type="button" name="btnStart" value="Start" onClick="fWurfReihe()"></input>
</form>
</body>
</html>
Aufgabe 2 : Taschenrechner Bearbeiten
Hoffentlich hatten Sie viel Spaß mit Ihrem Taschenrechner! Wenn noch nicht alles so geklappt hat, wie Sie sich das gedacht haben: Hier ist eine funktionsfähige Lösung. Sie lässt sich sicher noch optimieren und erweitern (eine Aufgabe für später) - aber sie funktioniert. Sogar die „mathematischen Sündenfälle“ - Division durch 0 und Wurzeln aus negativen Zahlen sind abgefangen. Wenn Sie also mit Ihrer Lösung vergleichen wollen - wenn hier ein anderer Code steht, muss das nicht heißen, dass dieser besser ist - viele Wege führen nach Rom.
Das Programmbeispiel funktioniert auf Ihrem Rechner nur, wenn die Grafiken im Unterverzeichnis „/Grafik/“ abgelegt und auch so benannt sind, wie im Beispiel-Code.
<html>
<head>
<title>Taschenrechner</title>
<meta name="description" content="Taschenrechner">
<meta name="author" content="S.moeller">
<meta name="keywords" content="Taschenrechner, Rechner, Calculator">
<style type=text/css>
input {text-align:right}
</style>
<script type="text/javascript" language="JavaScript">
<!--
var M=0;
var X=0;
var Y=0;
var Z=0;
var RA="";
var RegAnz=0;
var bOver=false;
function txtClear()
{
document.frmCalc.txtDisplay.value=""
bOver=false;
}
function fRegXY()
{
Y=X;
X=parseFloat(document.frmCalc.txtDisplay.value);
RegAnz++;
//alert("X=" + X + " Y = " + Y + "RegAnz = " + RegAnz)
}
function fBerechne()
{
fRegXY();
bOver=true;
bERR=false;
if(RegAnz>1)
{
switch(RA)
{
case "+":
Y =Y + X;
break;
case "-":
Y =Y - X;
break;
case "*":
Y =Y * X;
break;
case "/":
if(X!=0)
{
Y =Y / X;
}
else
{
document.frmCalc.txtDisplay.value="ERROR - Division durch 0";
bERR=true;
}
break;
case "%":
//alert("X = " + X + " Y = " + Y + "RA = " + RA)
Y =Y * (1+(X/100));
break;
}
if(!bERR)
{
document.frmCalc.txtDisplay.value=Y;
}
}
}
function fGleich()
{
fBerechne();
Y=0;
X=0;
bOver=true;
RegAnz=0;
}
function fBtnC()
{
document.frmCalc.txtDisplay.value="0"
X=0;
Y=0;
RA="";
RegAnz=0;
}
function fBtnCE()
{
document.frmCalc.txtDisplay.value="0"
}
function fBtnPM()
{
document.frmCalc.txtDisplay.value=parseFloat(document.frmCalc.txtDisplay.value)*(-1);
}
function fPlus()
{
RA="+"
fBerechne();
}
function fMinus()
{
RA="-"
fBerechne();
}
function fMulti()
{
RA="*"
fBerechne();
}
function fDivi()
{
RA="/"
fBerechne();
}
function fProz()
{
RA="%"
M=0;
}
function fMPlus()
{
M=M + parseFloat(document.frmCalc.txtDisplay.value);
if(M!=0)
{
document.frmCalc.MCtrl.src="../Grafik/MVoll.png"
}
else
{
document.frmCalc.MCtrl.src="../Grafik/MLeer.png"
}
document.frmCalc.txtMDisplay.value=M;
}
function fMMinus()
{
M=M - parseFloat(document.frmCalc.txtDisplay.value);
if(M!=0)
{
document.frmCalc.MCtrl.src="../Grafik/MVoll.png"
}
else
{
document.frmCalc.MCtrl.src="../Grafik/MLeer.png"
}
document.frmCalc.txtMDisplay.value=M;
}
function fMRecall()
{
document.frmCalc.txtDisplay.value=M;
}
function fMSave()
{
M=parseFloat(document.frmCalc.txtDisplay.value);
if(M!=0)
{
document.frmCalc.MCtrl.src="../Grafik/MVoll.png"
}
else
{
document.frmCalc.MCtrl.src="../Grafik/MLeer.png"
}
document.frmCalc.txtMDisplay.value=M;
}
function fMClear()
{
M=0;
document.frmCalc.MCtrl.src="../Grafik/MLeer.png"
document.frmCalc.txtMDisplay.value=M;
}
function fBtnN(iN)
{
if(bOver)
{
txtClear();
}
document.frmCalc.txtDisplay.value=document.frmCalc.txtDisplay.value + iN;
}
function fBtnDK()
{
document.frmCalc.txtDisplay.value=document.frmCalc.txtDisplay.value + ".";
}
function fPi()
{
document.frmCalc.txtDisplay.value=Math.PI;
bOver=false;
}
function fE()
{
document.frmCalc.txtDisplay.value=Math.E;
bOver=false;
}
function fBtnBack()
{
var sTmp=document.frmCalc.txtDisplay.value;
var iLg=sTmp.length;
if (iLg>0)
{
var sT=sTmp.substring(0,(iLg-1))
document.frmCalc.txtDisplay.value=sT;
}
}
function fSqrt()
{
var tmp=parseFloat(document.frmCalc.txtDisplay.value);
if(tmp>=0)
{
document.frmCalc.txtDisplay.value=Math.sqrt(tmp);
}
else
{
document.frmCalc.txtDisplay.value="ERROR - Wurzel aus Zahl < 0!";
}
RegAnz=0;
bOver=true;
}
function fKehr()
{
tmp=parseFloat(document.frmCalc.txtDisplay.value);
if(tmp!=0)
{
document.frmCalc.txtDisplay.value=1/tmp;
}
else
{
document.frmCalc.txtDisplay.value="ERROR - Division durch 0!";
}
RegAnz=0;
//txtAlignRight();
bOver=true;
}
//-->
</script>
<noscript>Schade - hier geht es um JavaScript</noscript>
</head>
<body>
<h3>Taschenrechner</h3>
<form action="JavaScript_Calculator.html" method="get" name="frmCalc">
<table >
<tr>
<th colspan="6"> <input type="text" name="txtDisplay" value="" size="30" maxlength="30"></th>
</tr>
<tr>
<td><img src="../Grafik/MLeer.png" name="MCtrl" width="30" height="30"
border="0" alt="MCtrl"></td>
<th colspan="5"><input type="Text" name="txtMDisplay" value=""
size="25" readonly</th>
</tr>
<tr>
<td><img src="../Grafik/MC.png" width="30" height="30" border="0"
alt="MC" onClick="fMClear()" name="btnMC"></td>
<td><img src="../Grafik/E.png" width="30" height="30" border="0"
alt="7" onClick="fE()" name="btnE"></td>
<td><img src="../Grafik/PI.png" width="30" height="30" border="0"
alt="8" onClick="fPi()" name="btnPi"></td>
<td><img src="../Grafik/BackSpace.png" width="30" height="30" border="0"
alt="B" onClick="fBtnBack()" name="btnBack"></td>
<td><img src="../Grafik/CE.png" width="30" height="30" border="0"
alt="CE" onClick="fBtnCE()" name="btnCE"></td>
<td><img src="../Grafik/C.png" width="30" height="30" border="0"
alt="C" onClick="fBtnC()" name="btnC"></td>
</tr>
<tr>
<td><img src="../Grafik/MR.png" width="30" height="30" border="0"
alt="MC" onClick="fMRecall()" name="btnMRecall"></td>
<td><img src="../Grafik/7.png" width="30" height="30" border="0"
alt="7" onClick="fBtnN(7)" name="btnN"></td>
<td><img src="../Grafik/8.png" width="30" height="30" border="0"
alt="8" onClick="fBtnN(8)" name="btnN"></td>
<td><img src="../Grafik/9.png" width="30" height="30" border="0"
alt="9" onClick="fBtnN(9)" name="btnN"></td>
<td><img src="../Grafik/Divi.png" width="30" height="30" border="0"
alt="/" onClick="fDivi()" name="btnDivi"></td>
<td><img src="../Grafik/SQRT.png" width="30" height="30" border="0"
alt="W" onClick="fSqrt()" name="btnSqrt"></td>
</tr>
<tr>
<td><img src="../Grafik/MS.png" width="30" height="30" border="0"
alt="MS" onClick="fMSave()" name="btnSave"></td>
<td><img src="../Grafik/4.png" width="30" height="30" border="0"
alt="4" onClick="fBtnN(4)" name="btnN"></td>
<td><img src="../Grafik/5.png" width="30" height="30" border="0"
alt="5" onClick="fBtnN(5)" name="btnN""></td>
<td><img src="../Grafik/6.png" width="30" height="30" border="0"
alt="6" onClick="fBtnN(6)" name="btnN"></td>
<td><img src="../Grafik/Multi.png" width="30" height="30" border="0"
alt="*" onClick="fMulti()" name="btnMulti"></td>
<td><img src="../Grafik/Proz.png" width="30" height="30" border="0"
alt="%" onClick="fProz()" name="btnProz"></td>
</tr>
<tr>
<td><img src="../Grafik/MMinus.png" width="30" height="30" border="0"
alt="M+" onClick="fMMinus()" name="btnMMinus"></td>
<td><img src="../Grafik/1.png" width="30" height="30" border="0"
alt="1" onClick="fBtnN(1)" name="btnN"></td>
<td><img src="../Grafik/2.png" width="30" height="30" border="0"
alt="2" onClick="fBtnN(2)" name="btnN"></td>
<td><img src="../Grafik/3.png" width="30" height="30" border="0"
alt="3" onClick="fBtnN(3)" name="btnN"></td>
<td><img src="../Grafik/Minus.png" width="30" height="30" border="0"
alt="-" onClick="fMinus()" name="btnMinus"></td>
<td><img src="../Grafik/Kehr.png" width="30" height="30" border="0"
alt="1/x" onClick="fKehr()" name="btnKehr" name="btnKehr"></td>
</tr>
<tr>
<td><img src="../Grafik/MPlus.png" width="30" height="30" border="0"
alt="M+" onClick="fMPlus()" name="btnMPlus"></td>
<td><img src="../Grafik/0.png" width="30" height="30" border="0"
alt="0" onClick="fBtnN(0)" name="btnN"></td>
<td><img src="../Grafik/PlusMinus.png" width="30" height="30" border="0"
alt="+/-" onClick="fBtnPM()" name="btnPM"></td>
<td><img src="../Grafik/DK.png" width="30" height="30" border="0"
alt="," onClick="fBtnDK()" name="btnDK"></td>
<td><img src="../Grafik/Plus.png" width="30" height="30" border="0"
alt="+" onClick="fPlus()" name="btnPlus"></td>
<td><img src="../Grafik/Gleich.png" width="30" height="30" border="0"
alt="=" onClick="fGleich()" name="btnGleich"></td>
</tr>
</table>
</body>
</html>