Rheinwerk Computing :: Einstieg in JavaScript

6.3 Zahlen und Mathematik

Die vordefinierten Objekte Number und Math erleichtern Ihnen den Umgang mit Zahlen und mathematischen Berechnungen und bieten Ihnen viele Funktionen, die Sie z. B. vom Taschenrechner kennen.

6.3.1 Objekt »Number«

Das Number-Objekt bietet einige Eigenschaften und Methoden im Zusammenhang mit der Genauigkeit und der Größe des Zahlenbereichs von JavaScript. Zudem werden Methoden zur Darstellung von Zahlen zur Verfügung gestellt.

Es folgt ein Beispielprogramm:

...
<body><p>
   <script>

      var zahl = 1000 / 7;
      document.write("Zahl: " + zahl + "<br>");
      document.write("Darstellung mit 0 Stellen: "
         + zahl.toFixed(0) + "<br>");
      document.write("Darstellung mit 2 Stellen: "
         + zahl.toFixed(2) + "<br>");
      document.write("Als Exponentialzahl: "
         + zahl.toExponential()+ "<br><br>");

      zahl = Number.MAX_VALUE;
      document.write("Zahl mit dem größten Betrag: " + zahl + "<br>");
      zahl = zahl * 10;
      document.write("Vergrößert: " + zahl + "<br>");

      zahl = Number.MIN_VALUE;
      document.write("Zahl mit dem kleinsten Betrag: " + zahl + "<br>");
      zahl = zahl / 10;
      document.write("Verkleinert: " + zahl + "<br><br>");

      zahl = Number.EPSILON;
      document.write("&epsilon; = Kleinster Abstand: " + zahl + "<br>");
      zahl = 1 + Number.EPSILON;
      document.write("1 + &epsilon;: " + zahl.toFixed(40) + "<br>");
      zahl = 1 + Number.EPSILON / 2;
      document.write("1+ &epsilon;/2: " + zahl.toFixed(40) + "<br><br>");

      zahl = Number.MAX_SAFE_INTEGER;
      document.write("Größte sichere ganze Zahl: " + zahl + "<br>");
      document.write("Sichere ganze Zahl: "
         + Number.isSafeInteger(zahl) + "<br>");
      zahl = zahl + 1;
      document.write("+1: Sichere ganze Zahl: "
         + Number.isSafeInteger(zahl) + "<br>");
      zahl = Number.MIN_SAFE_INTEGER;
      document.write("Kleinste sichere ganze Zahl: " + zahl);

   </script></p>
</body></html>

Listing 6.18 Datei »number.htm«

Zunächst wird der Wert von 1000 / 7 berechnet. Dies ist mathematisch der Wert 142.857142857142857142…, also 142 mit der Periode 857142. JavaScript macht daraus den Wert 142.85714285714286, da es Zahlen nur auf 14 bis 15 Stellen genau berechnet.

Die Methode toFixed() liefert eine Zeichenkette, die eine Zahl beinhaltet, die auf eine übergebene Anzahl von Nachkommastellen gerundet wird. Die Zahl selbst wird dabei nicht verändert. Mit der Anzahl 0 ergibt sich eine Zeichenkette, die eine ganze Zahl beinhaltet. Mit der Anzahl 2 wird die Zahl auf zwei Nachkommastellen gerundet dargestellt. Die Methode toExponential() führt zu einer Ausgabe der Zahl als Exponentialzahl, mit Basis und Exponent. Die hier ausgegebene Zahl wird wie folgt gesprochen: 1,42857… mal 10 hoch 2. Beide Methoden werden direkt auf die Variablen angewendet, ohne die Nennung des Number-Objekts.

Die Eigenschaft MAX_VALUE entspricht der Zahl mit dem größten Betrag, die mithilfe von JavaScript bearbeitet werden kann. Vergrößert man sie, ergibt sich der Wert unendlich (engl.: infinity). Die Eigenschaft MIN_VALUE entspricht der Zahl mit dem kleinsten Betrag, die mithilfe von JavaScript bearbeitet werden kann. Verkleinert man sie, ergibt sich der Wert 0.

Mit ECMAScript 2015 wurde die Eigenschaft EPSILON eingeführt. Sie stellt den Unterschied zwischen dem Wert 1 und der kleinsten Zahl mit Nachkommastellen dar, die größer als 1 ist.

Hinweis

Mit dem Begriff epsilon wird in der Mathematik der kleinstmögliche Abstand zwischen zwei Werten bezeichnet. Ein kleinerer Abstand kann nicht mehr erfasst weden. Auf diese Weise kann die mögliche Genauigkeit einer Berechnung ermittelt werden.

Ebenfalls mit ECMAScript 2015 wurden die Eigenschaften MAX_SAFE_INTEGER und MIN_SAFE_INTEGER eingeführt. Sie entsprechen der größten bzw. kleinsten sicheren ganzen Zahl. Eine größere Zahl als MAX_SAFE_INTEGER bzw. eine kleinere Zahl als MIN_SAFE_INTEGER wird als Zahl mit Nachkommastellen gespeichert. Die Speicherung und der Vergleich von Zahlen sind nur für sichere ganze Zahlen mathematisch exakt. Mithilfe der Methode isSafeInteger() können Sie prüfen, ob eine bestimmte Zahl eine sichere ganze Zahl ist.

Das Ergebnis des Programms sehen Sie in Abbildung 6.18.

Abbildung 6.18 »Number«-Objekt

6.3.2 Erweiterung des »Number«-Objekts

In diesem Abschnitt erweitern wir die Möglichkeiten des Number-Objekts mithilfe der Methode format(). Sie soll dazu dienen, eine Zahl zur Ausgabe mit führenden Zeichen aufzufüllen. Die Methode kann mit einem oder zwei Parametern aufgerufen werden. Der erste Parameter steht für die gewünschte Gesamtstellenzahl der Ausgabe. Als zweiten Parameter können Sie eine Zeichenkette übergeben. Diese dient als Auffüllzeichen. Falls es keinen zweiten Parameter gibt, wird mit Nullen aufgefüllt.

Die Definition der Methode erfolgt in einer externen Datei mit dem Namen number.js . Sie können diese Datei mit weiteren nützlichen Methoden für Zahlen füllen. Nach dem Einbinden der Datei können Sie diese Methoden nutzen.

Es folgt das Programm, das die Methode aus der externen Datei nutzt:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Objekt Number erweitern</title>
   <script src="number.js"></script>
</head>
<body>
   <script>

      var x = 15;
      document.write(x.format(5) + "<br>");
      document.write(x.format(5, "#"));

   </script>
</body></html>

Listing 6.19 Datei »number_erweitern.htm«

Es wird eine Zahl zugewiesen, hier mit zwei Stellen. In der Ausgabe erscheint sie auf fünf Stellen aufgefüllt, zum einen mit führenden Nullen, zum anderen mit einem führenden Hash-Zeichen #. Die Ausgabe sehen Sie in Abbildung 6.19.

Abbildung 6.19 Methode »format()«

Es folgt die externe Datei, die die Methode format() ermöglicht:

Number.prototype.format = function(stellenzahl, zeichen)
{
   if(!zeichen)
      zeichen = "0";
   var formatiert = "" + this;
   while(formatiert.length < stellenzahl)
      formatiert = zeichen + formatiert;
   return formatiert;
}

Listing 6.20 Datei »number.js«

Die Objekte in JavaScript besitzen die Eigenschaft prototype. Sie steht in der klassischen Schreibweise der objektorientierten Programmierung in JavaScript für den Prototyp eines Objekts. Sie ermöglicht Ihnen, alle Objekte zu erweitern, die denselben Prototyp besitzen. Das wird im vorliegenden Programm für das Objekt Number genutzt.

Der Eigenschaft format des Objekts Number.prototype wird eine anonyme Methode zugewiesen. Damit wird format() zu einer Methode.

Sie können einen oder zwei Parameter übergeben. Der erste Parameter gibt die gewünschte Stellenzahl an. Als Auffüllzeichen wird zunächst das Zeichen 0 verwendet. Falls es einen zweiten Parameter gibt, wird dessen Wert als Auffüllzeichen übernommen.

Auf das Number-Objekt, für das die Methode aufgerufen wird, greifen Sie über this zu. Der Inhalt des Objekts, also die umzuwandelnde Zahl, wird in eine Zeichenkette umgewandelt.

Solange die Länge dieser Zeichenkette kleiner als die gewünschte Stellenzahl ist, wird das Auffüllzeichen hinzugefügt. Die aufgefüllte Zeichenkette wird zurückgeliefert.

6.3.3 Objekt »Math«

Das Math-Objekt bietet Ihnen die Möglichkeit, eine Reihe von nützlichen mathematischen Methoden zu verwenden. Außerdem stellt es einige mathematische Konstanten als Eigenschaften zur Verfügung. Zunächst ein Beispielprogramm:

...
<body><p>
   <script>

      var a = 4.75, b = -4.75, c = 6.25;
      var ausgabe = "Zahlen: " + a + " " + b + "<br>"
         + "ceil(): " + Math.ceil(a) + " " + Math.ceil(b) + "<br>"
         + "floor(): " + Math.floor(a) + " " + Math.floor(b) + "<br>"
         + "round(): " + Math.round(a) + " " + Math.round(b) + "<br><br>"

         + "sqrt(): " + Math.sqrt(c) + "<br>"
         + "max(): " + Math.max(a,b,c) + "<br>"
         + "min(): " + Math.min(a,b,c,-7.75) + "<br>"
         + "abs(): " + Math.abs(a) + " " + Math.abs(b) + "<br><br>"

         + "&pi; = " + Math.PI + "<br>"
         + "e = " + Math.E + "<br>"
         + "exp(): " + Math.exp(4.6) + "<br>"
         + "log(): " + Math.log(100) + "<br>"
         + "pow(): " + Math.pow(10,2) + "<br>"
         + "log10(): " + Math.log10(100) + "<br>"
         + "sign(): " + Math.sign(a) + "<br>"
         + "sign(): " + Math.sign(b) + "<br>"
         + "sign(): " + Math.sign(0) + "<br><br>";

      ausgabe += "random(): ";
      for(let i=1; i<=10; i++)
         ausgabe += Math.floor(Math.random() * 6 + 1) + " ";
      document.write(ausgabe);

   </script></p>
</body></html>

Listing 6.21 Datei »math.htm«

Im ersten Teil werden Ergebnisse für die drei Rundungsmethoden ceil(), floor() und round() berechnet. Die Methode ceil() rundet eine Zahl auf die nächstgrößere ganze Zahl. Die Methode floor() rundet eine Zahl auf die nächstkleinere ganze Zahl. Die Methode round() rundet eine Zahl kaufmännisch auf eine ganze Zahl. Ein Beispiel für positive Zahlen: aus den Zahlen von 3.000 bis 3.499… wird 3, aus den Zahlen von 3.500 bis 3.999… wird 4. Ein Beispiel für negative Zahlen: aus den Zahlen von -3.000 bis ‐3.499… wird -3, aus den Zahlen von -3.500 bis -3.999… wird -4.

Die Methode sqrt() berechnet die Quadratwurzel einer Zahl. Die Methoden max() und min() liefern die größte bzw. kleinste Zahl von beliebig vielen gegebenen Zahlen. Die Methode abs() berechnet den Betrag einer Zahl, also die Zahl ohne ihr Vorzeichen.

Die Ergebnisse des ersten Teils sehen Sie in Abbildung 6.20.

Abbildung 6.20 »Math«-Objekt, Teil 1 von 2

Im zweiten Teil des Programms wird mithilfe der Eigenschaft PI die mathematische Konstante für die Kreiszahl π kommentiert ausgegeben. Es folgt die Ausgabe der Eigenschaft E. Sie entspricht der mathematischen Konstanten für die Eulersche Zahl e , die Basis der Exponentialfunktion.

Die Methode exp() berechnet das Ergebnis der Exponentialfunktion, also e hoch Zahl . Hier wird e hoch 4.6 ermittelt, das ist ungefähr 100. Die Methode log() berechnet den natürlichen Logarithmus einer Zahl, also den Logarithmus einer Zahl zur Basis e. Dies entspricht der Umkehrung der Methode exp(). Hier wird der natürliche Logarithmus von 100 ermittelt, das ist ungefähr 4.6.

Die Methode pow() berechnet das Ergebnis der Potenzfunktion, also x hoch y . Hier wird 10 hoch 2 ermittelt, das ist 100. Die Methode log10() berechnet den Logarithmus einer Zahl zur Basis 10. Hier wird der Logarithmus von 100 ermittelt, das ist 2. Die Methode sign() ermittelt das Vorzeichen einer Zahl. Sie liefert den Wert 1 für eine positive Zahl, den Wert -1 für eine negative Zahl und den Wert 0 für 0.

Die Methode random() wird im letzten Teil des Programms genutzt, um zehnmal zu würfeln . Sie liefert eine zufällige Zahl zwischen 0 und 1, ohne die Obergrenze 1. Die Multiplikation mit 6 ergibt einen Wert zwischen 0 und 6, ohne den Wert 6. Die Addition von 1 ergibt einen Wert von 1 bis 7, ohne den Wert 7. Die Methode floor() rundet abschließend auf die nächstkleinere ganze Zahl, also auf einen Wert von 1 bis 6.

Die Methoden log10() und sign() wurden mit ECMAScript 2015 eingeführt. Die Ergebnisse des zweiten Teils sehen Sie in Abbildung 6.21.

Abbildung 6.21 »Math«-Objekt, Teil 2 von 2

6.3.4 Winkelfunktionen

In diesem Abschnitt stellen wir eine Tabelle mit den Werten der Winkelfunktionen Sinus , Kosinus und Tangens für die Winkel von 0 bis 90 Grad dar, in Schritten von 15 Grad. Die Methoden Math.sin(), Math.cos() und Math.tan() berechnen die Werte, allerdings basierend auf einem Winkel im Bogenmaß . Daher muss der Winkel in Grad zunächst durch 180 geteilt und mit dem Wert der Kreiszahl π multipliziert werden.

Es folgt das Beispielprogramm:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>Winkelfunktionen</title>
   <style>

      table,td { border:1px solid black }
      td       { text-align:right; }

   </style>
</head>
<body>
   <table>
      <tr>
         <td>Winkel</td>
         <td>Bogenmass</td>
         <td>Math.sin()</td>
         <td>Math.cos()</td>
         <td>Math.tan()</td>
      </tr>
   <script>

      for(let i=0; i<=90; i+=15)
      {
         let bm = i / 180 * Math.PI;
         document.write("<tr><td>" + i + "</td><td>"
            + bm.toFixed(3) + "</td><td>"
            + Math.sin(bm).toFixed(3) + "</td><td>"
            + Math.cos(bm).toFixed(3) + "</td><td>"
            + Math.tan(bm).toFixed(3) + "</td></tr>");
      }

   </script>
   </table>
</body></html>

Listing 6.22 Datei »math_winkel.htm«

Jeder Winkel in Grad wird zunächst ins Bogenmaß umgerechnet. Die Ergebnisse werden auf drei Nachkommastellen gerundet. Leider ist die Umrechnung von 90 Grad (= π/2) ins Bogenmaß hier nicht mathematisch exakt, daher ergibt sich für den Tangens von 90 Grad nicht der Wert unendlich.

Die Ausrichtung der Zellen wird mithilfe von CSS einheitlich auf rechtsbündig gesetzt. Das Ergebnis sehen Sie in Abbildung 6.22.

Abbildung 6.22 Tabelle mit den Winkelfunktionen