Grundlegende Mathematik in JavaScript — Zahlen und Operatoren

Okay, vielleicht nicht. Einige von uns mögen Mathematik, einige von uns haben Mathematik gehasst, seit wir in der Schule das Einmaleins und die lange Division lernen mussten, und einige von uns stehen irgendwo dazwischen. Aber keiner von uns kann leugnen, dass Mathematik ein grundlegender Bestandteil des Lebens ist, ohne den wir nicht sehr weit kommen können. Das gilt besonders, wenn wir lernen, JavaScript (oder irgendeine andere Sprache) zu programmieren — so viel von dem, was wir tun, basiert darauf, numerische Daten zu verarbeiten, neue Werte zu berechnen usw., dass Sie nicht überrascht sein werden zu lernen, dass JavaScript eine umfassende Reihe von Mathematikfunktionen bietet.

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

In der Programmierung ist schon das einfache Dezimalsystem, das wir alle so gut kennen, komplizierter, als Sie vielleicht denken. Wir verwenden unterschiedliche Begriffe, um verschiedene Arten von Dezimalzahlen zu beschreiben, zum Beispiel:

• Ganzzahlen sind Zahlen ohne Bruchanteil. Sie können entweder positiv oder negativ sein, z.B. 10, 400 oder -5.
• Fließkommazahlen (Floats) haben Dezimalpunkte und Dezimalstellen, z.B. 12.5 und 56.7786543.

Wir haben sogar unterschiedliche Zahlensysteme! Dezimal ist Basis 10 (bedeutet, dass es 0–9 in jeder Ziffer verwendet), aber wir haben auch Dinge wie:

• Binär — Die niedrigste Ebene der Computersprache; 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. Diese Zahlen sind Ihnen vielleicht begegnet, als Sie Farben in CSS setzten.

Bevor Sie sich Sorgen machen, dass Ihr Gehirn schmilzt, stoppen Sie sofort! Wir werden für den Anfang einfach bei Dezimalzahlen bleiben; Sie werden nur 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 Ganzzahlen als auch Dezimalzahlen — Sie haben es erraten, Number. Das bedeutet, dass Sie unabhängig davon, mit welcher Art von Zahlen Sie in JavaScript arbeiten, sie genau auf die gleiche Weise behandeln.

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

1. Lassen Sie uns zuerst ein paar Variablen deklarieren und sie mit einer Ganzzahl bzw. einem Float initialisieren, dann geben Sie die Variablennamen erneut 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 mit Zahlen zu deklarieren und zu initialisieren, bevor Sie weitermachen.

3. Lassen Sie uns nun überprüfen, dass beide ursprünglichen Variablen vom gleichen Datentyp sind. In JavaScript gibt es einen Operator namens typeof, der dies tut. Geben Sie die folgenden beiden Zeilen wie gezeigt ein:

   js

   typeof myInt;
   typeof myFloat;
   

   Es sollte in beiden Fällen "number" zurückgegeben werden — das macht es uns viel einfacher, als wenn unterschiedliche Zahlen unterschiedliche Datentypen hätten und wir sie auf verschiedene Weise behandeln müssten. Puh!

Das Number-Objekt, eine Instanz von dem alle Standardzahlen, die Sie in Ihrem JavaScript verwenden, darstellt, hat eine Reihe von nützlichen Methoden, die Ihnen zur Verfügung stehen, um Zahlen zu manipulieren. Wir decken diese nicht im Detail in diesem Artikel ab, weil wir es als Einführung halten wollten und nur die wirklich grundlegenden sogenannten Essentials behandeln; nachdem Sie jedoch 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.

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

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

Manchmal könnte es sein, dass Sie am Ende mit einer Zahl stehen, 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 in den Number()-Konstruktor übergeben, um eine Zahlenversion des gleichen Wertes zurückzugeben.

Versuchen Sie beispielsweise, diese Zeilen in Ihre Konsole einzugeben:

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

Sie enden mit dem Ergebnis 743, nicht 77, weil myNumber tatsächlich als String definiert ist. Sie können dies überprüfen, 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 grundlegende Mathematik macht, aber wir möchten Ihr Verständnis der benötigten Syntax testen. Versuchen Sie, die untenstehenden Beispiele in Ihre Entwicklerwerkzeuge JavaScript-Konsole einzugeben, um sich mit der Syntax vertraut zu machen.

1. Versuchen Sie zuerst, einige einfache eigene Beispiele einzugeben, wie z.B.

   js

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

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

   js

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

3. Zuletzt in diesem Abschnitt, versuchen Sie, einige komplexere Ausdrücke einzugeben, wie z.B.:

   js

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

Teile dieser letzten Berechnungssätze liefern möglicherweise nicht das Ergebnis, das Sie erwartet haben; der folgende Abschnitt könnte gut die Antwort darauf geben, warum.

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

num2 + num1 / 8 + 2;

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

Aber der Browser führt "10 dividiert durch 8 ergibt 1.25", dann "50 plus 1.25 plus 2 ergibt 53.25" aus.

Dies liegt an der Operatorpriorität — einige Operatoren werden angewendet, bevor andere angewendet werden, wenn das Ergebnis einer Berechnung (in der Programmierung als _“Ausdruck” bezeichnet) berechnet wird. Die Operatorpriorität in JavaScript ist die gleiche, 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 außer Kraft setzen möchten, können Sie Klammern um die Teile setzen, die Sie explizit zuerst bearbeiten möchten. Um also ein Ergebnis von 6 zu erhalten, könnten wir Folgendes tun:

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

Versuchen Sie, die vorherige Zeile in die Konsole einzugeben, um dies zu testen.

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 "Errate die Zahl"-Spiel in unserem ersten Einstieg in JavaScript Artikel verwendet, als wir eins zu unserer guessCount-Variablen hinzugefügt haben, um nach jeder Runde zu verfolgen, wie viele Vermutungen der Benutzer noch hat.

guessCount++;

Lassen Sie uns versuchen, mit diesen in Ihrer Konsole zu spielen. Zuerst 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 und betreiben nicht direkt auf dem Wert selbst. Das Folgende führt zu einem Fehler:

3++;

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

let num1 = 4;
num1++;

Okay, Seltsamkeit Nummer 2! Wenn Sie dies tun, sehen Sie einen Wert von 4 zurückgegeben — 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 zurückgeben:

num1;

Das gleiche gilt für --: Versuchen Sie das Folgende

let num2 = 6;
num2--;
num2;

Zuweisungsoperatoren sind Operatoren, die einer Variablen einen Wert zuweisen. Wir haben den grundlegendsten davon, =, schon viele Male verwendet — er weist der Variablen auf der linken Seite den Wert zu, der auf der rechten Seite angegeben ist:

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 bieten, um Ihren Code übersichtlicher und effizienter zu gestalten. Die am häufigsten verwendeten sind unten aufgelistet:

Versuchen Sie, einige der obigen Beispiele in Ihre Konsole einzugeben, um ein Gefühl dafür zu bekommen, wie sie funktionieren. In jedem Fall sehen Sie, ob Sie den Wert erraten können, bevor Sie die zweite Zeile eingeben.

Beachten Sie, dass Sie gerne andere Variablen auf der rechten Seite jedes Ausdrucks 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 ist nicht nötig, sich darüber zu sorgen, wie dies funktioniert — konzentrieren Sie sich jetzt auf die Mathematik. Die Breite und Höhe der Box (in Pixeln) sind durch die Variablen x und y definiert, denen anfangs beide der Wert 50 zugewiesen ist.

<canvas id="canvas" width="400" height="200"></canvas>
<p></p>

const canvas = document.getElementById("canvas");
const para = document.querySelector("p");
const ctx = canvas.getContext("2d");

// Edit the following two lines ONLY
let x = 50;
let y = 50;

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "green";
ctx.fillRect(10, 10, x, y);
para.textContent = `The rectangle is ${x}px wide and ${y}px high.`;

Öffnen Sie das obige Beispiel im MDN Playground, indem Sie auf die "Play"-Schaltfläche klicken, und befolgen Sie dann die Liste der Anweisungen unten, um die Box auf bestimmte Größen wachsen/klein zu machen, indem Sie in jedem Fall bestimmte Operatoren und/oder Werte verwenden:

• Ändern Sie die Zeile, die x berechnet, so dass die Box noch 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, so dass 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, so dass die Box 100px breit ist, aber die 150 mit drei Zahlen und den Subtraktions- und Divisionoperatoren berechnet wird.
• Ändern Sie die Zeile, die y berechnet, so dass die Box 200px hoch ist, aber die 200 mit den Zahlen 2 und x und dem Multiplikationsoperator berechnet wird.

Keine Sorge, wenn Sie den Code durcheinanderbringen. Sie können jederzeit die Reset-Schaltfläche drücken und von vorne anfangen.

Manchmal möchten wir wahr/falsch Tests durchführen und dann je nach Ergebnis dieses Tests entsprechend handeln — dazu verwenden wir Vergleichsoperatoren.

Wenn Sie einige dieser Werte in einer Konsole eingeben, sehen Sie, dass sie alle true/false-Werte zurückgeben — diese Booleans, die wir im letzten Artikel erwähnten. Diese sind sehr nützlich, da sie uns erlauben, Entscheidungen in unserem Code zu treffen, und sie werden jedes Mal verwendet, wenn wir irgendeine Art von Auswahl treffen möchten. Zum Beispiel können Booleans verwendet werden, um:

• Den korrekten Text auf einem Button anzuzeigen, je nachdem, ob ein Feature ein- oder ausgeschaltet ist
• Eine Spiel-Nachricht anzeigen, wenn ein Spiel zu Ende ist, oder eine Sieg-Nachricht, wenn das Spiel gewonnen wurde
• Die korrekte saisonale Begrüßung anzeigen, je nachdem, welcher Feiertag gerade ist
• Eine Karte ein- oder auszoomen, abhängig von der gewählten Zoomstufe

Wir werden uns ansehen, wie man solche Logik kodiert, wenn wir uns in einem zukünftigen Artikel bedingte Anweisungen ansehen. Schauen wir uns für den Moment 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.";
  }
}

Sie können den Gleichheitsoperator innerhalb der updateBtn()-Funktion sehen. In diesem Fall testen wir nicht, ob zwei mathematische Ausdrücke denselben Wert haben — wir prüfen, ob der Textinhalt eines Buttons eine bestimmte Zeichenfolge enthält — aber es ist immer noch dasselbe Prinzip am Werk. Sollte der Button beim Drücken "Start machine" anzeigen, ändern wir das Label in "Stop machine" und aktualisieren das Label entsprechend. Wenn der Button beim Drücken "Stop machine" anzeigt, ändern wir die Anzeige wieder zurück.

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

In diesem Artikel haben wir die grundlegenden Informationen abgedeckt, die Sie für den Moment über Zahlen in JavaScript wissen müssen. Sie werden Zahlen wieder und wieder verwenden, während Sie JavaScript lernen, also ist es eine gute Idee, dies jetzt aus dem Weg zu schaffen. Wenn Sie zu den Leuten gehören, die Mathematik nicht gerne mögen, können Sie Trost daraus ziehen, dass dieses Kapitel ziemlich kurz war.

Im nächsten Artikel werden wir Text erkunden und wie JavaScript uns erlaubt, ihn zu manipulieren.

• Zahlen und Zeichenfolgen
• Ausdrücke und Operatoren

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