Websiteentwicklung: JavaScript: Objekte: Math
Berechnungen / Math
BearbeitenIm Objekt Math sind viele mathematische Funktionen und einige mathematische Konstanten implementiert. Darüber hinaus gehören zu diesem Objekt einige in der Mathematik eher selten, in der Programmierung aber häufig verwendete Methoden beispielsweise Math.random() zur Erzeugung einer zufälligen Zahl und Math.max() zum Größenvergleich zweier Zahlen.
Konstanten / Eigenschaften
BearbeitenAlle im folgenden beschriebenen mathematischen Konstanten sind im Objekt Math als unveränderliche Eigenschaften angelegt, d. h. ihr Wert kann gelesen, aber in JavaScripten nicht verändert werden.
Math.E - die Eulersche Konstante
Bearbeiten
Math.E liefert die Eulersche Konstante zurück. ist die Basis des „Natürlichen Lograrithmus“ und der Exponentialfunktion und ist irrational transzendent. Die Darstellung von als Dezimalbruch ist unendlich und nichtperiodisch und beginnt mit 2,718281 ... .
Das folgende Beispiel gibt die Zahl in einer alert-Box aus:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Math.E - die Eulersche Konstante</title>
<meta name="description" content="Math.E - die Eulersche Konstante">
<meta name="author" content="S.Möller">
<meta name="keywords" content="E, Euler, Mathematik">
<script type="text/javascript" language="JavaScript">
<!--
function fDisplay_E()
{
alert("Eulersche Konstante E = " + Math.E);
}
//-->
</script>
<noscript>Bitte schalten Sie JavaScript ein!</noscript>
</head>
<body onLoad="fDisplay_E()">
<h3>Math.E - die Eulersche Konstante</h3>
</body>
</html>
Math.LN2 - der natürliche Logarithmus der Zahl 2
BearbeitenMath.LN2 gibt als Konstante den Logarithmus der Zahl 2 zur Basis zurück.
Syntax:
var Log2_Basis_E=Math.LN2;
alert("Der Natürliche Logarithmus von 2 ist " + Log2_Basis_E);
Math.LN10 - der natürliche Logarithmus der Zahl 10
BearbeitenMath.LN10 gibt als Konstante den Logarithmus der Zahl 10 zur Basis zurück.
Syntax:
var Log10_Basis_E=Math.LN10;
alert("Der Natürliche Logarithmus von 10 ist " + Log10_Basis_E);
Math.LOG2E - der Logarithmus der Zahl E zur Basis 2
BearbeitenMath.LOG2E gibt als Konstante den Logarithmus der Zahl zur Basis 2 zurück.
Syntax:
var Log_E_Basis_2=Math.LOG2E;
alert("Der Logarithmus von E zur Basis 2 ist " + Log_E_Basis_2);
Math.LOG10E - der Logarithmus der Zahl E zur Basis 10
BearbeitenMath.LOG10E gibt als Konstante den Logarithmus der Zahl zur Basis 10 zurück.
Syntax:
var Log_E_Basis_10=Math.LOG10E;
alert("Der Logarithmus von E zur Basis 10 ist " + Log_E_Basis_10);
Math.PI - die Kreiszahl
Bearbeiten
Math.PI gibt als Konstante die Kreiszahl zurück. ist ebenso wie irrational transzendent – also ein unendlicher, nichtperiodischer Dezimalbruch, der in JavaScript in endlicher Genauigkeit abgebildet wird. Die Darstellung von beginnt mit 3,14159 ... .
Syntax:
var PI=Math.PI;
alert("PI = " + PI);
Gäbe es diese Konstante nicht, müssten Sie sich nicht mit der Zuweisung =3.14159... zufriedengeben oder wie nachfolgend beschrieben durch über den Umweg der Arcusfunktionen mit (für JavaScript) größtmöglicher Genauigkeit zurückgeben lassen:
var PI=Math.atan(1)*4 //Lösung 1
var PI=Math.asin(1)*2 //Lösung 2
var PI=Math.acos(0)*2 //Lösung 3
Das folgende Beispiel zeigt zum Start die Kreiszahl an, erlaubt dann, einen Radius einzugeben und mit einem Buttonklick Umfang und Flächeninhalt zu berechnen und in zwei Textfeldern auszugeben.
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>Math.PI - die Kreiszahl PI</title>
<meta name="description"
content="Math.PI - die Kreiszahl PI / Kreisberechnung">
<meta name="author" content="S.Möller">
<script type="text/javascript" language="JavaScript">
<!--
var PI=Math.PI;
function fDisplay_PI()
{
alert("PI = " + PI);
}
function fBerechneKreis()
{
with(document.Form1)
{
var R=parseFloat(Radius.value);
var U= 2 * R * PI;
var F= R * R * PI;
Umfang.value=U;
Inhalt.value=F;
}
}
//-->
</script>
<noscript>Bitte schalten Sie JavaScript ein</noscript>
</head>
<body onLoad="fDisplay_PI()">
<h3>Math.PI - die Kreiszahl PI</h3>
<br>
<form action="JavaScript_Math.PI.html" method="post" name="Form1">
<table>
<tr>
<td>Bitte geben Sie den Radius ein: </td>
<td><input type="Text" name="Radius"></td>
<td>cm</td>
</tr>
<tr>
<td>Der Umfang beträgt: </td>
<td><input type="Text" name="Umfang"></td>
<td>cm</td>
</tr>
<tr>
<td>Der Flächeninhalt beträgt: </td>
<td><input type="Text" name="Inhalt"></td>
<td>cm<sup>2</sup></td>
</tr>
<tr>
<td><input type="button"
name="btnBerechne"
value="Kreis berechnen"
onClick="fBerechneKreis()">
</td>
<td><input type="reset"></td>
</tr>
</table>
</form>
</body>
</html>
Math.SQRT2 - die Quadratwurzel aus 2
BearbeitenMath.SQRT2 gibt als Konstante die Quadratwurzel aus 2 zurück.
Syntax:
alert("Quadratwurzel aus 2 = " + Math.SQRT2);
Math.SQRT1_2 - die Quadratwurzel aus 1/2
BearbeitenMath.SQRT1_2 gibt als Konstante die Quadratwurzel aus 1/2 zurück.
Syntax:
alert("Quadratwurzel aus 1/2 = " + Math.SQRT1_2);
Funktionen / Methoden
BearbeitenIn den Methoden des Math-Objektes finden sich eine Vielzahl praktischer mathematischer Funktionen
Math.abs - Der Absolutwert
BearbeitenMath.abs erwartet eine reelle Zahl als Eingangsparameter und gibt diese Zahl positiv zurück. Mathematisch betrachtet: für eine Zahl R liefert abs(R) die größere der beiden Zahlen (R) und (-R) - abs(-3) liefert also 3 zurück, abs(2) ergibt 2, abs(0) ergibt 0.
var X = Math.abs(R)
Trigonometrische (Winkel-) Funktionen
BearbeitenDie trigonometrischen Funktionen Math.sin, Math.cos und Math.tan erwarten den Eingabeparameter im Bogenmaß. Winkelangaben wie 45° müssen also vorher ins Bogenmaß umgerechnet werden. 360° entspricht 2 * . Umgekehrt liefern die inversen trigonometrischen Funktionen Math.asin, Math.acos und Math.atan nach Übergabe eines Parameters ein Ergebnis im Bogenmaß zurück.
- Math.acos(X) liefert arccos(x), den Arcus Cosinus zurück.
- Math.asin(X) liefert arcsin(x), den Arcus Sinus zurück.
- Math.atan(X) liefert arctan(x), den Arcus Tangens zurück.
- Math.cos(X) liefert cos(x), den Cosinus zurück.
- Math.sin(X) liefert sin(x), den Sinus zurück.
- Math.tan(X) liefert tan(x), den Tangens zurück.
Das folgende Programmierbeispiel erlaubt Eingaben in 5 Feldern, wandelt dabei Grad-Eingaben in Bogenmaß und gibt Sinus, Cosinus und Tangens eines Winkels bzw. Bogenmaßes aus. Bei Eingabe eines Funktionswertes im Feld der Winkelfunktion wird die jeweilige Umkehrfunktion ausgeführt und der zugehörige Winkel bzw. das Bogenmaß ausgegeben. Die Prüfung der Eingaben, ihre entsprechende Wandlung, Verhindern der Eingabe unmöglicher Werte und die Rundung der zeitweise etwas ungenauen JavaScript-Arithmetik blähen das Programm etwas auf. Nicht alle Rundungsfehler und möglichen Fehleingaben wurden abgefangen.
<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Winkelfunktionen - von Sinus bis Arcus Tangens</title>
<meta name="description"
content="Winkelfunktionen - von Sinus bis Arcus Tangens">
<meta name="author" content="S.Moeller">
<meta name="keywords" content="JavaScript,Winkelfunktionen,
sin,cos,tan,asin, acos, atan">
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" language="JavaScript">
<!--
function fWinkelGradKorr()
{
var Grad=parseFloat(document.Form1.txtWinkelGrad.value);
Grad=Grad%360;
if(Grad<0)
{
Grad=Grad+360;
}
document.Form1.txtWinkelGrad.value=Grad;
Bogen=(2 * Math.PI*Grad)/360;
if(Bogen<0)
{
Bogen=Bogen+ (2 * Math.PI);
}
document.Form1.txtWinkelBogen.value=Bogen;
fWinkelFunktionen();
}
function fWinkelBogenKorr()
{
var Bogen=parseFloat(document.Form1.txtWinkelBogen.value);
while(Bogen>(2 * Math.PI))
{
Bogen=Bogen-(2 * Math.PI);
}
document.Form1.txtWinkelBogen.value=Bogen;
var Grad = (Bogen / (2 * Math.PI))* 360;
document.Form1.txtWinkelGrad.value=Grad;
fWinkelFunktionen();
}
function fWinkelFunktionen()
{
var Bogen=parseFloat(document.Form1.txtWinkelBogen.value);
var Sinus=Math.sin(Bogen);
if(Math.abs(Sinus)<= 1.0e-15)
{
Sinus=0;
}
document.Form1.txtSinus.value=Sinus;
var Cosinus=Math.cos(Bogen);
if(Math.abs(Cosinus)<= 1.0e-15)
{
Cosinus=0;
}
document.Form1.txtCosinus.value=Cosinus;
var Tangens=Math.tan(Bogen);
if(Tangens>=1e15)
{
Tangens="Grenzwert: Unendlich"
}
if(Math.abs(Tangens)<= 1.0e-15)
{
Tangens=0;
}
document.Form1.txtTangens.value=Tangens;
}
function fArcSin()
{
var x=parseFloat(document.Form1.txtSinus.value);
if(x>= -1 && x<=1)
{
Bogen=Math.asin(x);
document.Form1.txtWinkelBogen.value=Bogen;
fWinkelBogenKorr();
}
else
{
alert("Winkelfunktion ist für diesen Wert nicht definiert!");
}
}
function fArcCos()
{
var x=parseFloat(document.Form1.txtCosinus.value);
if(x<= -1 && x>=1)
{
Bogen=Math.acos(x);
document.Form1.txtWinkelBogen.value=Bogen;
fWinkelBogenKorr();
}
else
{
alert("Winkelfunktion ist für diesen Wert nicht definiert!");
}
}
function fArcTan()
{
var x=parseFloat(document.Form1.txtTangens.value);
Bogen=Math.atan(x);
document.Form1.txtWinkelBogen.value=Bogen;
fWinkelBogenKorr();
}
//-->
</script>
</head>
<body>
<noscript>Bitte schalten Sie JavaScript ein!</noscript>
<h1>Winkelfunktionen - von Sinus bis Arcus Tangens</h1>
<br>
<form action="JavaScript_Math.Winkelfunktionen.html"
method="post" name="Form1">
<table>
<tr>
<td>Bitte geben Sie einen Winkel ein:</td>
<td>
<input type="Text" name="txtWinkelGrad"
value="0" onChange="fWinkelGradKorr()">
</td>
</tr>
<tr>
<td>Der Winkel im Bogenmaß:</td>
<td>
<input type="Text" name="txtWinkelBogen"
value="0" onChange="fWinkelBogenKorr()">
</td>
</tr>
<tr>
<td>Sinus:</td>
<td>
<input type="Text" name="txtSinus"
value="0" onChange="fArcSin()">
</td>
</tr>
<tr>
<td>Cosinus:</td>
<td>
<input type="Text" name="txtCosinus"
value="0" onChange="fArcCos()">
</td>
</tr>
<tr>
<td>Tangens:</td>
<td>
<input type="Text" name="txtTangens"
value="0" onChange="fArcTan()">
</td>
</tr>
</table>
<br>
<strong>Bitte geben Sie einen Winkel im Grad oder Bogenmaß
oder den Wert einer Winkelfunktion ein!</strong>
</form>
</body>
</html>
Ganzzahl-Funktionen / Rundungs-Funktionen
BearbeitenGanzzahl-Funktionen werden oft und zu vielen verschiedenen Zwecken benutzt.
- Math.ceil(X)
- rundet die Zahl X auf die nächsthöhere ganze Zahl auf.
JavaScript-Ausdruck ergibt Math.ceil(Math.PI) 4 Math.ceil(-Math.PI) -3
- Math.floor(X)
- rundet die Zahl X zur nächstkleineren ganzen Zahl ab.
JavaScript-Ausdruck ergibt Math.floor(Math.PI) 3 Math.floor(-Math.PI) -4
- Math.round(X)
- rundet die Zahl X kaufmännisch nach der 5/4-Regel:
X.5 wird zu X+1 aufgerundet, X.4 wird zu X abgerundet.
Auch die objektunabhängige Funktion parseInt() ist eine Ganzzahl-Funktion, erwartet als Eingangsparameter allerdings eine Zeichenkette und gehört auch nicht zum Math-Objekt.
Ein kleines Beispiel:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ganzzahl-Funktionen - Math.ceil und Math.floor</title>
<meta name="description"
content="Ganzzahl-Funktionen - Math.ceil und Math.floor">
<meta name="author" content="S.Moeller">
<meta name="keywords"
content="Ganzzahl, Funktionen, Math.ceil, Math.floor">
<script type="text/javascript" language="JavaScript">
<!--
function fBerechne()
{
var Zahl=parseFloat(document.Form1.txtZahl.value);
document.Form1.txtCeil.value=Math.ceil(Zahl);
document.Form1.txtFloor.value=Math.floor(Zahl);
}
//-->
</script>
<noscript>Bitte schalten Sie JavaScript ein</noscript>
</head>
<body>
<h3>Ganzzahl-Funktionen - Math.ceil und Math.floor</h3>
<br>
<form name="Form1">
<table>
<tr>
<td>Bitte geben Sie eine Zahl ein:</td>
<td><input type="Text" name="txtZahl" onChange="fBerechne()"></td>
</tr>
<tr>
<td>Math.ceil :</td>
<td><input type="Text" name="txtCeil"></td>
</tr>
<tr>
<td>Math.floor :</td>
<td><input type="Text" name="txtFloor"></td>
</tr>
</table>
</form>
</body>
</html>
Achtung: Bei den Rundungsfunktionen verbirgt sich eine Falle, wenn man sie für kaufmännische Zwecke einsetzt. Sowohl Math.round() als auch Math.floor() liefern nämlich die größte ganze Zahl unterhalb der zu rundenden Zahl:
Wenn man sich nun im Bereich Rechnung / Gutschrift bewegt, kann bei Verwendung der Rundungsfunktion ein Rechnungsbetrag vom Gutschriftsbetrag abweichen – eine stornierte Rechnung z.B. damit nicht vollständig ausgeglichen werden. In anderen Programmiersprachen gibt es eine SGN-Funktion, die sozusagen das Vorzeichen einer Zahl zurückliefert. In JavaScript ist eine Funktion für den selben Zweck mit wenigen Zeilen zu erstellen. Mit der Hilfe dieser Funktion kann man das Vorzeichen als Faktor gewinnen (+1 oder -1), dann den Absolutwert der Zahl Math.abs(X) runden und anschließend wieder mit dem Faktor multiplizieren, um das Vorzeichen zurück zu erhalten. |
Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Kaufmännisches Runden - Math.round</title>
<meta name="description" content="Kaufmännisches Runden - Math.round">
<meta name="author" content="S.Moeller">
<meta name="keywords" content="Math, Funktionen, Math.round">
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" language="JavaScript">
<!--
function fSgn(Zahl)
{
if(Zahl>=0)
{
var VZF=1;
}
else
{
var VZF=-1;
}
return VZF
}
function fBerechne()
{
var Zahl=parseFloat(document.Form1.txtZahl.value);
document.Form1.txtRound.value=Math.round(Zahl);
var Zahl2=Zahl*100;
document.Form1.txtRound2.value=Math.round(Zahl2)/100;
document.Form1.txtRound3.value=
fSgn(Zahl) * Math.round(Math.abs(Zahl2))/100;
}
//-->
</script>
</head>
<body>
<noscript>Bitte schalten Sie JavaScript ein</noscript>
<h3>Kaufmännisches Runden - Math.round</h3>
<h4>Runden nach 5/4-Regel auf ganze Zahlen</h4>
<br>
<form action="JavaScript_KfmRundung.html" method="post" name="Form1">
<table>
<tr>
<td>Bitte geben Sie eine Zahl ein:</td>
<td>
<input type="Text" name="txtZahl" onChange="fBerechne()">
</td>
</tr>
<tr>
<td>Math.round :</td>
<td><input type="Text" name="txtRound"></td>
</tr>
<tr>
<td>Runden auf 2 Dezimalen :</td>
<td><input type="Text" name="txtRound2"></td>
</tr>
<tr>
<td>Korrektes Runden auf 2 Dezimalen :</td>
<td><input type="Text" name="txtRound3"></td>
</tr>
</table>
</form>
</body>
</html>
Math.exp - der Exponentialwert
BearbeitenMath.exp ist die Exponentialfunktion und liefert die Potenzen der Eulerschen Zahl zurück. Das folgende Beispiel liefert also y= 3 und w= 0.5, die Quadratwurzel aus
var x1=3;
var x2=0.5;
var y=Math.exp(x1);
var w=Math.exp(x2);
Math.log - der natürliche Logarithmus
BearbeitenMath.log erwartet als Paramenter eine reelle Zahl >0 und erzeugt den natürlichen Logarithmus der Zahl, also den Logarithmus zur Basis . Bei Zahlen <=0 wird der Wert „NaN“ (Not a Number) zurückgegeben.
Das folgende Beispiel liefert den natürlichen Logarithmus von , also 1, denn 1=
var e=Math.E;
var l=Math.log(e);
Math.max / Math.min – wer ist der Größte / Kleinste ?
BearbeitenBeide Funktionen erwarten zwei Zahlen als Eingangsparameter.
|
|
//*** Definition der Ausgangswerte:
var x=1;
var y=2;
//*** Anwenderanleitung:
alert("Wir ermitteln die hoechste u. niedrigste zweier Zahlen.");
//*** Ausgabemeldung zusammensetzen:
var Meldung = "Das Maximum von " + x + " und " + y + " ist : ";
Meldung = Meldung + Math.max(x,y) + "\n";
Meldung = Meldung + "Das Minimum von " + x + " und " + y + " ist : ";
Meldung = Meldung + Math.min(x,y);
//*** Ausgabe:
alert(Meldung);
Math.pow - Potenzen berechnen
BearbeitenMath.pow erwartet zwei Zahlen x,y als Eingangsparameter und liefert dann die Potenz xy zurück. Die Funktion hat – mathematisch gesehen – einen Fehler. Für den Wert 00 liefert Math.pow(0,0) den Wert 1 zurück.
var x=2;
var y=3;
var Meldung= x + " hoch " + y + " = " + Math.pow(x,y);
alert(Meldung);
x=0;
y=0;
var Meldung= x + " hoch " + y + " = " + Math.pow(x,y);
alert(Meldung);
Math.random - Zufallszahlen erzeugen
BearbeitenDie Funktion Math.random() erzeugt eine Zufallszahl mit
Zufallszahlen aus anderen Bereichen erzeugt man durch geeignete Grundrechenarten und andere Funktionen des Math-Objektes.
Das folgende Beispiel erzeugt eine Zufallszahl zwischen 1 und 6 - z.B zur Simulation eines Würfels:
var x=Math.random(); //Zufallszahl
x=Math.ceil(x*6); //Zufallszahl * 6 und aufgerundet
Das nächste Beispiel ist etwas komplexer, die eigentliche Zufallszahl wird aber auf die gleiche Weise erzeugt und skaliert. Es geht um die Erzeugung der Lottozahlen mit Hilfe von JavaScript. Um sicherzustellen, dass eine Zahl nicht doppelt gezogen werden kann, wird ein Kontroll-Array oLZ[49] definiert. Nach Erzeugung einer Zahl X wird oLZ[X] auf „1“ gesetzt. Bei der Erzeugung der Zufallszahl wird kontrolliert, ob dieses Arrayelement bereits belegt wurde und der Vorgang gegebenenfalls wiederholt. Anschließend wird eine Zusatzzahl erzeugt und im Array mit „2“ gekennzeichnet. Die Ausgabefunktion gibt dann in zwei Durchläufen des Arrays (normale Ziehung und Zusatzzahl) das Ergebnis aus.
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Zufallszahlen / Lotto</title>
<meta name="description" content="Zufallszahlen / Lotto">
<meta name="author" content="moeller">
<meta name="keywords" content="Zufallszahlen, Lotto">
<script type="text/javascript" language="JavaScript">
<!--
oLZ=new Array(49);
function fLZ()
{
var x=Math.random()*49;
x=Math.ceil(x);
return x
}
function fZiehung()
{
for(var i=1;i<=6;i++)
{
do
{
l=fLZ();
}
while(oLZ[l]==1)
oLZ[l]=1;
}
do
{
l=fLZ();
}
while(oLZ[l]==1)
oLZ[l]=2;
fAusgabe();
}
function fAusgabe()
{
fAusgabeN();
fAusgabeZ();
document.close();
}
function fAusgabeN()
{
document.write("<h1>Ziehung der Lottozahlen" +
" mit Zufallszahlen-Generator</h1><br>");
document.write("<h2>Die Zahlenreihe :</h2>");
var z=0;
var Zeile=" ";
for(var i=1;i<=49;i++)
{
if(oLZ[i]==1)
{
z++;
if(z!=6)
{
Zeile=Zeile +i + " / ";
}
else
{
Zeile=Zeile +i;
}
}
}
document.write("<h3>"+Zeile+"</h3>");
}
function fAusgabeZ()
{
document.write("<h2>Zusatz-Zahl:</h2>");
for(var i=1;i<=49;i++)
{
if(oLZ[i]==2)
{
document.write("<h3> "+ i + "</h3><br>");
}
}
}
//-->
</script>
<noscript>Bitte schalten Sie JavaScript ein</noscript>
</head>
<body onLoad="fZiehung()">
</body>
</html>
Math.sqrt - Quadratwurzeln ziehen
BearbeitenMath.sqrt erwartet eine Zahl >=0 als Eingangsparameter und liefert die Quadratwurzel der Zahl zurück. Bei negativen Zahlen wird „NaN“ (Not a Number) zurückgegeben.
var x=2;
var Meldung= "Die Quadratwurzel aus " + x + " = " + Math.sqrt(x);
alert(Meldung);
var x=-2;
var Meldung= "Die Quadratwurzel aus " + x + " = " + Math.sqrt(x);
alert(Meldung);
Aufgaben + Lösungen
Bearbeiten