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>