30.10.20 1953 Views 4

credit: ©vegefox.com

JavaScript Tutorial #12

Arbeit mit Zahlen: Die Objekte Number und Math

In JavaScript gibt es nur einen Datentyp für Ganz- und Fließkommazahlen. Die beiden vordefinierten Objekte Number und Math ermöglicht uns dabei ein komfortables Handling und praktische Berechnungen mit Zahlen durchzuführen.

Falconbyte unterstüzen

Betrieb und Pflege von Falconbyte brauchen viel Zeit und Geld. Um dir auch weiterhin hochwertigen Content anbieten zu können, kannst du uns sehr gerne mit einem kleinen "Trinkgeld" unterstützen.

Thema in Kurzform

  • Das JavaScript Objekt Number ist ein Wrapper Objekt, welches das Arbeiten mit numerischen Werten erlaubt.
  • Das Math-Objekt bietet darüber hinaus vielfälltige Methoden für komplexere numerisch-mathematische Operationen an.

    Inhaltsverzeichnis

  1. Das Number-Objekt
  2. Das Math-Objekt
  3. Zufallszahlen generieren
  4. Übungen

Das Number-Objekt

Ganze Zahlen und Dezimalzahlen gehören in JavaScript zum Datentyp Number. Wenn wir also mit numerischen Werten arbeiten, hatten wir es bislang stets mit primitiven Datentypen zu tun:

var z1 = 100;
var z2 = 3.17;

Wir wissen, dass primitive Werte keine Eigenschaften und Methoden haben können - da sie ja keine Objekte sind.

Dennoch ist es möglich, Eigenschaften und Methoden für primitiven Werte einzusetzen. JavaScript bettet nämlich den primitiven Wert temporär in ein Number-Objekt ein, wenn wir Eigenschaften und Methoden darauf aufrufen (Wrapping). Wir kennen dieses Prinzip aus dem letzten Kapitel, wo Zeichenketten (primitiver Datentyp) in ein String-Objekt umgewandelt wurden.

Eigenschaften des Number-Objekts

Das Number-Objekt stellt folgende Eigenschaften zur Verfügung:

var zahl1 = Number.MIN_VALUE;
var zahl2 = Number.MAX_VALUE;

Diese beiden Eigenschaften geben den kleinstmöglichen bzw. größtmöglichen Wert zurück, mit dem JavaScript arbeiten kann. Für die praktische Arbeit im Pogrammieralltag sind sie aber eher nebensächlich.

Interessanter sind da schon die Methoden

toString()

Die toString()-Methode konvertiert einen Zahlenwert in einen String:

var z = 123;
z.toString();     // liefert 123 der Variablen z zurück
(123).toString(); // liefert 123 aus dem Literal 123 zurück
(100+23).toString(); // liefert 123 durch den Additionsausdruck zurück

Die toString()-Methode ist wirklich nützlich, wenn wir eine Zahl aus der Arithmetik herauslösen und sie als String-Representation darstellen wollen. Dies ist besonders bei String-Verarbeitungen sinnvoll..

toFixed()

Die Methode toFixed() gibt einen String mit einer vom Programmierer festgelegten Anzahl an Dezimalstellen zurück:

var z = 7.419;
z.toFixed(0); // 7
z.toFixed(2); // 7.42
z.toFixed(4); // 7.4190
z.toFixed(6); // 7.419000

Wie wir sehen, wird entsprechend kaufmännisch gerundet.

toPrecision()

Diese Methode gibt einen String zurück, der aus einer festgelegten Anzahl an Ziffern ingesamt besteht:

var z = 7.419;
z.toPrecision(1); // 7
z.toPrecision(2); // 7.4
z.toPrecision(4); // 7.419
z.toPrecision(6); // 7.41900

parseInt()

Zur Umwandlung eines Strings in eine Ganzzahl wird die Methode parseInt() verwendet. Falls der String nicht umgewandelt werden kann, d.h. wenn JavaScript keine "Kompatibilität" erkennt, wird NaN (Not a Number) zurückgeliefert:

parseInt("7");                  // 7
parseInt("7.14");               // 7
parseInt("7 14 21");            // 7
parseInt("7 Jahre in Tibet");   // 7
parseInt("7.T");                // 7
parseInt("7.d");                // 7
parseInt("Jahre 10");           // NaN

Wie wir sehen, werden Fließkommawerte einfach "abgeschnitten". Folgen in der Zeichenkette der Zahl außerdem weitere Nicht-Ziffern (auch Leerzeichen), werden diese ignoriert. In der letzten Zeile sehen wir schließlich, dass die Methode NaN zurückgibt, wenn der String nicht mit einer Zahl beginnt - eine Umwandlung des Strings in einen ganzzahligen Number-Wert ist hier nicht möglich.

parseFloat()

parseFloat() wird ähnlich wir parseInt() zur Umwandlung eines (gültigen) Strings in einen Zahlenwert verwendet. Der Unterschied ist, dass parseFloat() versucht, die Zeichenkette in einen Fließkommawert umzuwandeln:

parseFloat("7.14"); // 7.14

Die Methode ist besonders wichtig bei der Arbeit mit Formulareingaben mit prompt(). Da Nutzereingaben in Eingabefenster nämlich prinzipiell als Strings interpretiert werden, können wir diese nicht konsequent in mathematische Operationen einbinden:

var eingabe = prompt("Geben Sie eine Zahl ein"); //2
var doppelt = eingabe + eingabe; // 22

Gibt der Nutzer in das Fenster 2 ein, ist der Wert der Variablen doppelt nicht 4, sondern 22. Der Grund: Es wird nichts gerechnet, sondern es findet eine Stringverkettung statt.

Mit parseFloat() funktioniert das Ganze aber wie gewünscht:

var eingabe = parseFloat(prompt("Geben Sie eine Zahl ein")); //2
var doppelt = eingabe + eingabe; // 4

Number.isInteger()

Die Methode Number.isInteger() prüft, ob ein übergebener Parameter eine Ganzzahl ist oder nicht.

if(Number.isInteger(5)) {
    console.log("Zahl ist ganze Zahl");
  }
else{
    console.log("Keine ganze Zahl");
}

isNaN()

Mit der Methode isNaN() können wir prüfen, ob ein Wert den Datentyp NaN hat. Ist der Wert keine gültige Zahl, wird true zurückgeliefert, ansonsten false:

isNaN(123) //false
isNaN(-1.23) //false
isNaN(5-2) //false
isNaN(0) //false
isNaN('123') //false
isNaN('Hello') //true
isNaN('') //false
isNaN(true) //false

Math-Objekt

Das Math-Objekt stellt eine Vielzahl von mathematischen Methoden zur Verfügung. Einige davon wollen wir uns im Folgenden näher ansehen.

Die Eigenschaften und Methoden von Math sind statisch, das heißt, es muss immer Math + Eigenschaft/ Methode geschrieben werden.

Eigenschaften von Math

Zunächst kümmern wir uns aber um zwei Eigenschaften von Math:

var pi = Math.PI; // 3.141592653589793
var e = Math.E; // 2.718281828459045

Math.PI repräsentiet die gerundete Kreiszahl PI, um aus einem Radius den Umfang eines Kreises zu berechnen.

Math.E stellt die eulersche Zahl dar, die besonders für die Differential- und Integralrechnung wichtig ist.

Math.round()

Um Zahlen kaufmännisch auf eine ganze Zahl zu runden, verwenden wir die Methode Math.round(). Die Methode benötigt einen Parameter; das ist die Zahl, die gerundet werden soll:

var z1 = Math.round(1.4); // 1
var z2 = Math.round(1.5); // 2
var z1 = Math.round(-1.4); // -1
var z2 = Math.round(-1.51); // -2

Bei positiven Zahlen von .0 bis .499 wird auf die nächstkleinere ganze Zahl gerundet, von .5 bis .999 auf die nächstgrößere ganze Zahl. Bei negativen Zahlen ist es umgekehrt.

Math.floor()

Die Methode Math.floor() rundet auf die nächstkleinere ganze Zahl:

var a = Math.floor(1.6); // 1
var b = Math.floor(1.4); // 1
var c = Math.floor(1); // 1
var d = Math.floor(-1.6); // -2
var e = Math.floor(-1.4); // -2

Math.ceil()

Umgekehrt rundet Math.ceil() auf die nächstgrößere ganze Zahl:

var a = Math.ceil(1.6); // 2
var b = Math.ceil(1.4); // 2
var c = Math.ceil(1); // 1
var d = Math.ceil(-1.6); // -1
var e = Math.ceil(-1.4); // -1

Math.abs()

Um den absoluten Betrag einer Zahl zu ermitteln, steht die Methode Math.abs() zur Verfügung. Eine absolute Zahl ist ein Wert ohne Vorzeichen :

var a = Math.abs(-1.49); // 1.49

Math.pow()

Mit Math.pow() können wir Potenzen berechnen. Die Methode verlangt zwei Parameter: Zum einen die Basiszahl und zum anderen die Potenzzahl:

var a = Math.pow(2, 2); // 4
var b = Math.pow(2, 3); // 8
var c = Math.pow(4, 4); // 256

Math.sqrt()

Um die Quadratwurzel einer Zahl zu ermitteln, gibt es die Methode Math.sqrt():

var a = Math.sqrt(16); // 4

Math.min() und Math.max()

Mit Math.min() und Math.max() ist es möglich, aus einer beliebigen Menge von Zahlen den kleinsten bzw. größen Wert zurückgeliefert zu bekommen:

var min = Math.min(2, 4, 8, 16); // 2
var max = Math.max(2, 4, 8, 16); // 16

Zufallszahlen erstellen mit Math.random()

In praktisch jedem spielorientierten Computerprogramm ist es notwendig, zufällige Werte oder Ereignisse zu produzieren. Das fängt schon bei einem schlichten Würfelspiel an.

Die Methode Math.random() liefert uns hierzu eine Zufallszahl im Fließkommabereich zwischen 0 (inklusive) und 1 (exklusive) zurück:

var zufall1 = Math.random();
var zufall2 = Math.random();
var zufall3 = Math.random();
var zufall4 = Math.random();

console.log(zufall1); // 0.8268624446622046
console.log(zufall2); // 0.4290666621078967
console.log(zufall3); // 0.19493105437224956
console.log(zufall4); // 0.7281431112916876

Zugegeben: Damit können wir noch nicht viel anfangen. Es ist in der Regel sinnvoller, ganze Zahlen zurückgeliefert zu bekommen. Um das zu ermöglichen, multiplizieren wir die Zufallszahl mit 10 und setzen anschließend die Methode Math.floor() ein. Über diesen Weg erhalten wir einen ganzzahligen Zufallswert zwischen 0 und 9:

var zufall = Math.floor(Math.random() * 10); // Zufallszahl zwischen 0 - 9

Die Range der Zufallszahlen kann durch die Anpassung des Multiplikators sehr easy angepasst werden:

var zufall1 = Math.floor(Math.random() * 10);  // Zufallszahl zwischen 0 - 9
var zufall2 = Math.floor(Math.random() * 50);  // Zufallszahl zwischen 0 - 49
var zufall3 = Math.floor(Math.random() * 100); // Zufallszahl zwischen 0 - 99

Um schließlich noch die 0 aus der Range der Zufallszahlen auszuschließen und den Maximalwert zu "begradigen", addieren wir das Ergebnis einfach mit +1:

var zufall1 = Math.floor(Math.random() * 10 + 1);  // Zufallszahl zwischen 1 - 10
var zufall2 = Math.floor(Math.random() * 50 + 1);  // Zufallszahl zwischen 1 - 50
var zufall3 = Math.floor(Math.random() * 100 + 1); // Zufallszahl zwischen 1 - 100

Übungen

einfach

Dividieren Sie 10 durch 3 und geben Sie das Ergenmis auf zwei Dezimalstellen gerundet auf der Konsole aus.

Lösung ein-/ausblenden

mittel

Ermitteln Sie mit einer geeigneten Methode den höchsten Wert aus folgender Zahlenmenge:

3, 5, 1, 10, 9, 8.1, 2, 1.4, 9.9, 10.3, 7

Potenzieren Sie diesen Wert mit PI und geben Sie das Ergebnis als Ganzzahl auf der Konsole aus.

Lösung ein-/ausblenden

schwer

Lassen Sie uns ein nettes objektorientiertes Würfelspiel schreiben 😀

Erstellen Sie dazu ein Objekt namens wuerfelspiel (aufgrund der Einmaligkeit sei die Literal-Schreibweise empfohlen).

Das Objekt hat eine Eigenschaft namens punkte und wird mit dem Wert 0 initialisiert. Außerfdem gibt es eine Methode namens wuerfelGo(), die einen ganzzahligen Parameter-Wert zwischen 1 und 6 aufnimmt.

Innerhalb der Methode wird nun eine Zufallszahl zwischen 1 und 6 erzeugt. Wenn diese Zufallszahl gleich dem Wert des Parameters ist, wird der Wert der Eigenschaft punkte um +1 erhöht.

Führen Sie die Methode gerne oftmals hintereinander aus und rufen am Ende den Wert der Eigenschaft punkte auf der Konsole auf.

Lösung ein-/ausblenden

Java lernen

text text

PHP Lernen

zur PHP

JavaScript lernen

move nove move

FALCONBYTE.NET

Handmade with 🖤️

© 2018-2023 Stefan E. Heller

Impressum | Datenschutz | Changelog

Falconbyte Youtube Falconbyte GitHub facebook programmieren lernen twitter programmieren lernen discord programmieren lernen