Grundlegende Mathematik in JavaScript — Zahlen und Operatoren

Okay, vielleicht nicht. Einige von uns mögen Mathematik, einige haben Mathematik gehasst, seit wir in der Schule die Einmaleins-Tafeln und die langen Divisionen lernen mussten, und manche von uns befinden sich irgendwo dazwischen. Doch keiner von uns kann leugnen, dass Mathematik ein grundlegender Teil des Lebens ist, ohne den wir nicht sehr weit kommen. Dies gilt insbesondere, wenn wir JavaScript (oder eine andere Sprache) programmieren lernen — so viel von dem, was wir tun, hängt von der Verarbeitung numerischer Daten und der Berechnung neuer Werte ab, sodass es nicht überraschen sollte, dass JavaScript eine umfassende Sammlung von Mathematikfunktionen zur Verfügung stellt.

Dieser Artikel behandelt nur die grundlegenden Teile, die Sie jetzt wissen müssen.

In der Programmierung ist sogar das einfache Dezimalsystem, das wir alle so gut kennen, komplizierter als man denken könnte. Wir verwenden unterschiedliche Begriffe, um verschiedene Arten von Dezimalzahlen zu beschreiben, zum Beispiel:

• Ganzzahlen sind Zahlen ohne Bruchteile. Sie können entweder positiv oder negativ sein, z.B. 10, 400 oder -5.
• Gleitkommazahlen (Floats) haben Dezimalpunkte und Dezimalstellen, zum Beispiel 12.5 und 56.7786543.

Wir haben sogar verschiedene Zahlensysteme! Dezimal ist Basis 10 (das heißt, es verwendet 0–9 in jeder Ziffer), aber es gibt auch Systeme wie:

• Binär — Die niedrigste Sprachebene von Computern; 0 und 1.
• Oktal — Basis 8, verwendet 0–7 in jeder Ziffer.
• Hexadezimal — Basis 16, verwendet 0–9 und dann a–f in jeder Ziffer. Möglicherweise sind Ihnen diese Zahlen schon begegnet, wenn Sie Farben in CSS einstellen.

Bevor Sie sich Sorgen machen, dass Ihr Gehirn schmilzt, hören Sie sofort auf damit! Zum einen bleiben wir in diesem Kurs einfach bei Dezimalzahlen; Sie werden selten auf die Notwendigkeit stoßen, über andere Typen nachzudenken, wenn überhaupt.

Die zweite gute Nachricht ist, dass JavaScript im Gegensatz zu einigen anderen Programmiersprachen nur einen Datentyp für Zahlen hat, sowohl für Ganzzahlen als auch Dezimalzahlen — Sie haben es erraten, Number. Das bedeutet, dass Sie unabhängig vom Zahlentyp, den Sie in JavaScript verwenden, immer auf die gleiche Weise damit umgehen.

Lassen Sie uns schnell mit ein paar Zahlen spielen, um uns mit der grundlegenden Syntax vertraut zu machen, die wir benötigen. Geben Sie die unten aufgeführten Befehle in Ihre Entwicklertools-JavaScript-Konsole ein.

1. Zuerst deklarieren wir ein paar Variablen und initialisieren sie jeweils mit einer Ganzzahl und einer Gleitkommazahl, dann geben wir die Variablennamen wieder ein, um zu überprüfen, dass alles in Ordnung ist:

   js

   const myInt = 5;
   const myFloat = 6.667;
   myInt;
   myFloat;
   

2. Zahlenwerte werden ohne Anführungszeichen eingegeben — versuchen Sie, ein paar weitere Variablen zu deklarieren und zu initialisieren, die Zahlen enthalten, bevor Sie fortfahren.

3. Überprüfen wir nun, dass beide ursprünglichen Variablen vom gleichen Datentyp sind. Es gibt einen Operator namens typeof in JavaScript, der genau das tut. Geben Sie die folgenden zwei Zeilen wie gezeigt ein:

   js

   typeof myInt;
   typeof myFloat;
   

   Sie sollten in beiden Fällen "number" zurückbekommen — das macht es für uns viel einfacher als wenn verschiedene Zahlen unterschiedliche Datentypen hätten und wir sie unterschiedlich behandeln müssten. Puh!

Das Number-Objekt, von dem eine Instanz alle Standardnummern repräsentiert, die Sie in Ihrem JavaScript verwenden, hat eine Reihe nützlicher Methoden, mit denen Sie Zahlen manipulieren können. Wir decken diese in diesem Artikel nicht im Detail ab, weil wir ihn als Einführung behalten und zunächst nur die wirklich grundlegenden wesentlichen Dinge behandeln wollten; sobald Sie dieses Modul ein paar Mal durchgelesen haben, lohnt es sich, auf die Objektreferenzseiten zu gehen und mehr darüber zu erfahren, was verfügbar ist.

Um beispielsweise Ihre Zahl auf eine festgelegte Anzahl von Dezimalstellen zu runden, verwenden Sie die toFixed()-Methode. Geben Sie die folgenden Zeilen in die Konsole Ihres Browsers ein:

const lotsOfDecimal = 1.766584958675746364;
lotsOfDecimal;
const twoDecimalPlaces = lotsOfDecimal.toFixed(2);
twoDecimalPlaces;

Manchmal kann es vorkommen, dass Sie eine Zahl haben, die als String-Typ gespeichert ist, was es schwierig macht, Berechnungen damit durchzuführen. Dies passiert am häufigsten, wenn Daten in ein Formular-Eingabefeld eingegeben werden und der Eingabetyp Text ist. Es gibt eine Möglichkeit, dieses Problem zu lösen — indem Sie den String-Wert an den Number()-Konstruktor übergeben, um eine Zahlversion desselben Wertes zurückzugeben.

Versuchen Sie zum Beispiel, diese Zeilen in Ihre Konsole einzugeben:

let myNumber = "74";
myNumber += 3;

Sie erhalten das Ergebnis 743, nicht 77, weil myNumber tatsächlich als String definiert ist. Sie können dies testen, indem Sie Folgendes eingeben:

typeof myNumber;

Um die Berechnung zu korrigieren, können Sie Folgendes tun:

let myNumber = "74";
myNumber = Number(myNumber) + 3;

Das Ergebnis ist dann 77, wie ursprünglich erwartet.

Arithmetische Operatoren werden verwendet, um mathematische Berechnungen in JavaScript durchzuführen:

Wir müssen Ihnen wahrscheinlich nicht beibringen, wie man einfache Mathematik durchführt, aber wir möchten Ihr Verständnis für die involvierte Syntax testen. Versuchen Sie, die folgenden Beispiele in Ihre Entwicklertools-JavaScript-Konsole einzugeben, um sich mit der Syntax vertraut zu machen.

1. Versuchen Sie zuerst, einige einfache Beispiele von Ihnen selbst einzugeben, wie zum Beispiel

   js

   10 + 7;
   9 * 8;
   60 % 3;
   

2. Sie können auch versuchen, einige Zahlen in Variablen zu deklarieren und zu initialisieren und diese in den Rechnungen zu verwenden — die Variablen verhalten sich genau wie die Werte, die sie für Zwecke der Rechnung halten. Zum Beispiel:

   js

   const num1 = 10;
   const num2 = 50;
   9 * num1;
   num1 ** 3;
   num2 / num1;
   

3. Schließlich, für diesen Abschnitt, versuchen Sie, einige komplexere Ausdrücke einzugeben, wie:

   js

   5 + 10 * 3;
   (num2 % 9) * num1;
   num2 + num1 / 8 + 2;
   

Teile dieses letzten Satzes von Berechnungen könnten Ihnen möglicherweise nicht exakt das erwartete Ergebnis liefern; der folgende Abschnitt könnte die Antwort darauf geben, warum.

Werfen wir einen Blick auf das letzte Beispiel von oben, wobei angenommen wird, dass num2 den Wert 50 und num1 den Wert 10 hat (wie oben ursprünglich angegeben):

num2 + num1 / 8 + 2;

Als Mensch könnten Sie dies als "50 plus 10 gleich 60", dann "8 plus 2 gleich 10" und schließlich "60 geteilt durch 10 gleich 6" lesen.

Aber der Browser berechnet "10 geteilt durch 8 gleich 1,25", dann "50 plus 1,25 plus 2 gleich 53,25".

Dies liegt an der Operatorpriorität — einige Operatoren werden vor anderen angewendet, wenn das Ergebnis einer Berechnung (in der Programmierung als Ausdruck bezeichnet) berechnet wird. Die Operatorpriorität in JavaScript ist dieselbe, wie sie im Mathematikunterricht in der Schule gelehrt wird — multiplizieren und dividieren werden immer zuerst durchgeführt, dann addieren und subtrahieren (die Berechnung wird immer von links nach rechts ausgewertet).

Wenn Sie die Operatorpriorität überschreiben möchten, können Sie Klammern um die Teile setzen, die Sie ausdrücklich zuerst behandeln möchten. Um also ein Ergebnis von 6 zu erhalten, könnten wir Folgendes tun:

(num2 + num1) / (8 + 2);

Probieren Sie es aus und sehen Sie selbst.

Manchmal möchten Sie wiederholt eins zu oder von einem numerischen Variablenwert hinzufügen oder subtrahieren. Dies kann bequem mit den Inkrement-(++) und Dekrement-(--)Operatoren durchgeführt werden. Wir haben ++ in unserem Spiel "Errate die Zahl" in unserem ersten Sprung in JavaScript-Artikel verwendet, als wir 1 zu unserer guessCount-Variablen hinzugefügt haben, um zu verfolgen, wie viele Versuche der Benutzer nach jedem Zug noch hat.

guessCount++;

Lassen Sie uns versuchen, mit diesen in Ihrer Konsole zu spielen. Für den Anfang beachten Sie, dass Sie diese nicht direkt auf eine Zahl anwenden können, was seltsam erscheinen mag, aber wir weisen einer Variablen einen neuen, aktualisierten Wert zu, anstatt auf dem Wert selbst zu operieren. Das Folgende führt zu einem Fehler:

3++;

Sie können also nur eine bestehende Variable inkrementieren. Versuchen Sie dies:

let num1 = 4;
num1++;

Okay, Seltsamkeit Nummer 2! Wenn Sie dies tun, sehen Sie, dass ein Wert von 4 zurückgegeben wird — das liegt daran, dass der Browser den aktuellen Wert zurückgibt und dann die Variable inkrementiert. Sie können sehen, dass sie inkrementiert wurde, wenn Sie den Variablenwert erneut abrufen:

num1;

Das Gleiche gilt für -- : versuchen Sie Folgendes

let num2 = 6;
num2--;
num2;

Zuweisungsoperatoren sind Operatoren, die einer Variablen einen Wert zuweisen. Wir haben bereits den grundlegendsten, =, viele Male verwendet — es weist die Variable auf der linken Seite dem Wert auf der rechten Seite zu:

let x = 3; // x contains the value 3
let y = 4; // y contains the value 4
x = y; // x now contains the same value y contains, 4

Aber es gibt einige komplexere Typen, die nützliche Abkürzungen bereitstellen, um Ihren Code ordentlicher und effizienter zu machen. Die gebräuchlichsten sind unten aufgelistet:

Versuchen Sie, einige der obigen Beispiele in Ihre Konsole einzugeben, um eine Vorstellung davon zu bekommen, wie sie funktionieren. Versuchen Sie in jedem Fall, den Wert vorherzusagen, bevor Sie die zweite Zeile eingeben.

Beachten Sie, dass Sie auf der rechten Seite jedes Ausdrucks auch andere Variablen verwenden können, zum Beispiel:

let x = 3; // x contains the value 3
let y = 4; // y contains the value 4
x *= y; // x now contains the value 12

In dieser Übung werden Sie einige Zahlen und Operatoren manipulieren, um die Größe einer Box zu ändern. Die Box wird mit einer Browser-API namens Canvas-API gezeichnet. Es gibt keinen Grund, sich jetzt darüber Gedanken zu machen, wie dies funktioniert — konzentrieren Sie sich vorerst nur auf die Mathematik. Die Breite und Höhe der Box (in Pixeln) werden durch die Variablen x und y definiert, die anfangs beide einen Wert von 50 haben.

In neuem Fenster öffnen

Im bearbeitbaren Codefeld oben gibt es zwei Zeilen mit einem Kommentar, die Sie aktualisieren sollen, um die Box auf bestimmte Größen wachsen/schrumpfen zu lassen, indem Sie bestimmte Operatoren und/oder Werte in jedem Fall verwenden. Versuchen wir Folgendes:

• Ändern Sie die Zeile, die x berechnet, sodass die Box weiterhin 50px breit ist, aber die 50 mit den Zahlen 43 und 7 und einem arithmetischen Operator berechnet wird.
• Ändern Sie die Zeile, die y berechnet, sodass die Box 75px hoch ist, aber die 75 mit den Zahlen 25 und 3 und einem arithmetischen Operator berechnet wird.
• Ändern Sie die Zeile, die x berechnet, sodass die Box 250px breit ist, aber die 250 mit zwei Zahlen und dem Rest- (Modulo-) Operator berechnet wird.
• Ändern Sie die Zeile, die y berechnet, sodass die Box 150px hoch ist, aber die 150 mit drei Zahlen und den Subtraktions- und Divisionsoperatoren berechnet wird.
• Ändern Sie die Zeile, die x berechnet, sodass die Box 200px breit ist, aber die 200 mit der Zahl 4 und einem Zuweisungsoperator berechnet wird.
• Ändern Sie die Zeile, die y berechnet, sodass die Box 200px hoch ist, aber die 200 mit den Zahlen 50 und 3, dem Multiplikationsoperator und dem Additionszuweisungsoperator berechnet wird. Vergessen Sie nicht, y zuerst einen Standardwert zuzuweisen (in einer separaten Zeile), damit die Addition wie erwartet funktioniert.

Keine Sorge, wenn Sie den Code völlig durcheinander bringen. Sie können jederzeit die Zurücksetzen-Schaltfläche drücken, um alles wieder in Gang zu bringen. Nachdem Sie alle oben genannten Fragen korrekt beantwortet haben, fühlen Sie sich frei, weiter mit dem Code zu spielen oder eigene Herausforderungen zu erstellen.

Manchmal möchten wir wahr/falsch Tests durchlaufen und dann je nach Ergebnis des Tests entsprechend handeln — dafür verwenden wir Vergleichsoperatoren.

Wenn Sie einige dieser Werte in eine Konsole eingeben, werden Sie sehen, dass sie alle true/false-Werte zurückgeben — jene Booleans, die wir im letzten Artikel erwähnt haben. Diese sind sehr nützlich, da sie es uns ermöglichen, Entscheidungen in unserem Code zu treffen, und sie werden jedes Mal verwendet, wenn wir irgendeine Art von Wahl treffen wollen. Zum Beispiel können Booleans verwendet werden, um:

• Den richtigen Text auf einer Schaltfläche anzuzeigen, abhängig davon, ob eine Funktion eingeschaltet oder ausgeschaltet ist,
• Eine Spiel-Über-Nachricht anzuzeigen, wenn ein Spiel beendet ist oder eine Siegmeldung, wenn das Spiel gewonnen wurde,
• Die korrekte saisonale Begrüßung anzuzeigen, abhängig davon, welche Feiertagssaison es ist,
• Eine Karte hinein- oder herauszuzoomen, abhängig davon, welcher Zoom-Level ausgewählt ist.

Wir werden sehen, wie man solche Logik codiert, wenn wir in einem zukünftigen Artikel bedingte Anweisungen betrachten. Für den Moment schauen wir uns ein kurzes Beispiel an:

<button>Start machine</button>
<p>The machine is stopped.</p>

const btn = document.querySelector("button");
const txt = document.querySelector("p");

btn.addEventListener("click", updateBtn);

function updateBtn() {
  if (btn.textContent === "Start machine") {
    btn.textContent = "Stop machine";
    txt.textContent = "The machine has started!";
  } else {
    btn.textContent = "Start machine";
    txt.textContent = "The machine is stopped.";
  }
}

In neuem Fenster öffnen

Sie sehen den Gleichheitsoperator sofort innerhalb der updateBtn()-Funktion verwendet. In diesem Fall testen wir nicht, ob zwei mathematische Ausdrücke denselben Wert haben — wir testen, ob der Textinhalt einer Schaltfläche eine bestimmte Zeichenfolge enthält — aber es ist dennoch dasselbe Prinzip am Werk. Wenn die Schaltfläche beim Drücken "Maschine starten" sagt, ändern wir ihr Label in "Maschine stoppen" und aktualisieren das Label entsprechend. Wenn die Schaltfläche beim Drücken "Maschine stoppen" sagt, wechseln wir die Anzeige wieder zurück.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Einige weitere Tests finden Sie, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie fortfahren — siehe Testen Sie Ihre Fähigkeiten: Mathematik.

In diesem Artikel haben wir die grundlegenden Informationen behandelt, die Sie über Zahlen in JavaScript wissen müssen, zumindest für jetzt. Zahlen werden Ihnen immer wieder begegnen, während Sie JavaScript lernen, daher ist es eine gute Idee, dies jetzt aus dem Weg zu räumen. Wenn Sie zu den Menschen gehören, die Mathematik nicht genießen, können Sie darauf hoffen, dass dieses Kapitel ziemlich kurz war.

Im nächsten Artikel werden wir uns mit Text befassen und wie JavaScript es uns ermöglicht, ihn zu manipulieren.

• Zahlen und Zeichenketten
• Ausdrücke und Operatoren

• Zurück
• Übersicht: Dynamisches Scripting mit JavaScript
• Weiter