Arithmetische Operationen in JavaScript ausführen

Einführung

In diesem Lab werden die Teilnehmer die grundlegenden arithmetischen Operationen in JavaScript erkunden und lernen, wie man mit verschiedenen mathematischen Operatoren Zahlen manipulieren kann. Das Lab bietet eine umfassende Reise durch die Einrichtung einer HTML-Umgebung, die Implementierung von grundlegenden arithmetischen Operationen wie Addition, Subtraktion, Multiplikation und Division sowie das Verständnis von fortschrittlicheren Konzepten wie Modulo und Inkrement/Decrement-Operatoren.

Die Teilnehmer beginnen mit der Erstellung einer HTML-Datei mit einem eingebetteten JavaScript-Abschnitt und bauen dann schrittweise ihre Fähigkeiten auf, indem sie verschiedene arithmetische Techniken üben. Durch praktische Codebeispiele werden die Lernenden praktische Erfahrungen bei der Durchführung von mathematischen Berechnungen, beim Verständnis der Operatorpräzedenz und beim Erkunden von Präfix- und Postfix-Inkrement/Decrement-Operationen sammeln, was essentielle Fertigkeiten für die JavaScript-Programmierung sind.

HTML-Datei für JavaScript-Arithmetikoperationen einrichten

In diesem Schritt erstellen Sie eine einfache HTML-Datei, die als Grundlage für die Ausführung von JavaScript-Arithmetikoperationen dienen wird. Wir werden eine einfache HTML-Struktur einrichten und einen eingebetteten JavaScript-Abschnitt hinzufügen, um die grundlegende arithmetische Funktionalität zu demonstrieren.

Öffnen Sie zunächst die WebIDE und navigieren Sie zum Verzeichnis ~/project. Erstellen Sie eine neue Datei namens arithmetic.html, indem Sie im Datei-Explorer mit der rechten Maustaste klicken und "Neue Datei" auswählen.

Kopieren Sie den folgenden HTML-Code und fügen Sie ihn in die Datei arithmetic.html ein:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Arithmetic Operations</title>
  </head>
  <body>
    <h1>JavaScript Arithmetic Operations</h1>

    <script>
      // Wir werden unseren JavaScript-Code in diesem Abschnitt einfügen
      console.log("HTML-Datei ist für arithmetische Operationen bereit!");
    </script>
  </body>
</html>

Zergliedern wir die wichtigsten Komponenten dieser HTML-Datei:

<!DOCTYPE html> deklariert, dass dies ein HTML5-Dokument ist
Der <head>-Abschnitt enthält Metadaten über das Dokument
Der <body> enthält den sichtbaren Inhalt
Das <script>-Tag ist der Ort, an dem wir unseren JavaScript-Code schreiben werden

Um zu überprüfen, ob die Datei korrekt erstellt wurde, können Sie die Datei in der Entwicklerkonsole des Browsers öffnen. Die initiale console.log() wird helfen, festzustellen, ob die Datei richtig eingerichtet ist.

Grundlegende arithmetische Operatoren implementieren (+, -, *, /)

In diesem Schritt lernen Sie, wie Sie in JavaScript grundlegende arithmetische Operationen mit den grundlegenden mathematischen Operatoren ausführen: Addition (+), Subtraktion (-), Multiplikation (*) und Division (/).

Öffnen Sie die in dem vorherigen Schritt erstellte Datei arithmetic.html und ändern Sie den <script>-Abschnitt, um folgenden Code hinzuzufügen:

<script>
  // Addition Operator (+)
  let sum = 10 + 5;
  console.log("Addition: 10 + 5 =", sum);

  // Subtraction Operator (-)
  let difference = 20 - 7;
  console.log("Subtraction: 20 - 7 =", difference);

  // Multiplication Operator (*)
  let product = 6 * 4;
  console.log("Multiplication: 6 * 4 =", product);

  // Division Operator (/)
  let quotient = 25 / 5;
  console.log("Division: 25 / 5 =", quotient);
</script>

Wenn Sie diese HTML-Datei in einem Webbrowser öffnen und die Entwicklerkonsole des Browsers überprüfen, sehen Sie die folgende Beispielausgabe:

Addition: 10 + 5 = 15
Subtraction: 20 - 7 = 13
Multiplication: 6 * 4 = 24
Division: 25 / 5 = 5

Wichtige Punkte zum Verständnis:

Der +-Operator addiert zwei Zahlen zusammen
Der --Operator subtrahiert das rechte Operand von dem linken
Der *-Operator multipliziert zwei Zahlen
Der /-Operator teilt den linken Operanden durch den rechten Operanden

Sie können auch Operationen mit Variablen durchführen und verschiedene Arten von Zahlen, einschließlich Ganzzahlen und Gleitkommazahlen, kombinieren.

Modulo- und Inkrement/Decrement-Operatoren erkunden

In diesem Schritt lernen Sie über zwei wichtige JavaScript-Arithmetikoperatoren: den Modulo-Operator (%) und die Inkrement/Decrement-Operatoren (++ und --).

Öffnen Sie die Datei arithmetic.html und aktualisieren Sie den <script>-Abschnitt mit dem folgenden Code:

<script>
  // Modulo Operator (%)
  // Gibt den Rest einer Division zurück
  let remainder = 17 % 5;
  console.log("Modulo: 17 % 5 =", remainder);

  // Increment Operator (++)
  let x = 10;
  x++; // Inkrementiert x um 1
  console.log("Increment: x++ =", x);

  // Decrement Operator (--)
  let y = 20;
  y--; // Dekrementiert y um 1
  console.log("Decrement: y-- =", y);

  // Weitere Modulo-Beispiele
  console.log("Even/Odd Check: 15 % 2 =", 15 % 2);
  console.log("Even/Odd Check: 16 % 2 =", 16 % 2);
</script>

Wenn Sie diese HTML-Datei in einem Webbrowser öffnen und die Entwicklerkonsole überprüfen, sehen Sie die folgende Beispielausgabe:

Modulo: 17 % 5 = 2
Increment: x++ = 11
Decrement: y-- = 19
Even/Odd Check: 15 % 2 = 1
Even/Odd Check: 16 % 2 = 0

Wichtige Punkte zum Verständnis:

Der Modulo-Operator % gibt den Rest nach der Division zurück
Sie können den Modulo verwenden, um zu überprüfen, ob eine Zahl gerade oder ungerade ist
Der Inkrement-Operator ++ erhöht eine Variable um 1
Der Dekrement-Operator -- verringert eine Variable um 1

Der Modulo-Operator ist besonders nützlich für:

Das Überprüfen von geraden/ungeraden Zahlen
Das Durchlaufen eines Zahlenbereichs
Das Erstellen von Mustern oder Verteilungen

Prefix- und Postfix-Inkrement/Decrement verstehen

In diesem Schritt lernen Sie den Unterschied zwischen den Prefix- und Postfix-Inkrement/Decrement-Operatoren in JavaScript. Diese Operatoren können ähnlich aussehen, aber sie verhalten sich unterschiedlich, wenn sie in Ausdrücken verwendet werden.

Öffnen Sie die Datei arithmetic.html und aktualisieren Sie den <script>-Abschnitt mit dem folgenden Code:

<script>
  // Postfix Increment (x++)
  let a = 5;
  let b = a++;
  console.log("Postfix Increment:");
  console.log("a =", a); // a wird nach der Zuweisung inkrementiert
  console.log("b =", b); // b erhält den ursprünglichen Wert von a

  // Prefix Increment (++x)
  let x = 5;
  let y = ++x;
  console.log("\nPrefix Increment:");
  console.log("x =", x); // x wird vor der Zuweisung inkrementiert
  console.log("y =", y); // y erhält den inkrementierten Wert von x

  // Ein ähnliches Konzept gilt für die Decrement-Operatoren
  let p = 10;
  let q = p--;
  console.log("\nPostfix Decrement:");
  console.log("p =", p); // p wird nach der Zuweisung dekrementiert
  console.log("q =", q); // q erhält den ursprünglichen Wert von p

  let m = 10;
  let n = --m;
  console.log("\nPrefix Decrement:");
  console.log("m =", m); // m wird vor der Zuweisung dekrementiert
  console.log("n =", n); // n erhält den dekrementierten Wert von m
</script>

Wenn Sie diese HTML-Datei in einem Webbrowser öffnen und die Entwicklerkonsole überprüfen, sehen Sie die folgende Beispielausgabe:

Postfix Increment:
a = 6
b = 5

Prefix Increment:
x = 6
y = 6

Postfix Decrement:
p = 9
q = 10

Prefix Decrement:
m = 9
n = 9

Wichtige Punkte zum Verständnis:

Postfix x++: Gibt den ursprünglichen Wert zurück und inkrementiert dann
Prefix ++x: Inkrementiert zuerst und gibt dann den neuen Wert zurück
Dasselbe Prinzip gilt für die Decrement-Operatoren x-- und --x
Dieser Unterschied ist wichtig, wenn der Operator in einem Ausdruck oder einer Zuweisung verwendet wird

Üben Sie das Zusammenführen von arithmetischen Operationen

In diesem Schritt lernen Sie, wie Sie mehrere arithmetische Operationen kombinieren, um komplexere Berechnungen zu erstellen. Wir werden verschiedene Möglichkeiten des Zusammenführens von Operatoren erkunden und demonstrieren, wie JavaScript die Ausführungsreihenfolge von Operationen behandelt.

Öffnen Sie die Datei arithmetic.html und aktualisieren Sie den <script>-Abschnitt mit dem folgenden Code:

<script>
  // Kombinieren mehrerer arithmetischer Operationen
  let result1 = 10 + 5 * 2;
  console.log("Result 1 (10 + 5 * 2):", result1);

  // Verwenden von Klammern, um die Ausführungsreihenfolge zu ändern
  let result2 = (10 + 5) * 2;
  console.log("Result 2 ((10 + 5) * 2):", result2);

  // Komplexe Berechnung mit mehreren Operatoren
  let x = 15;
  let y = 7;
  let complexCalc = (x % 4) + y * 2 - x++ / 3;
  console.log("Complex Calculation:", complexCalc);

  // Kombinieren von Inkrement/Decrement mit anderen Operationen
  let a = 5;
  let b = 3;
  let mixedCalc = ++a + b-- * 2;
  console.log("Mixed Calculation (++a + b-- * 2):", mixedCalc);
  console.log("a nach der Berechnung:", a);
  console.log("b nach der Berechnung:", b);

  // Praktisches Beispiel: Berechnung des Durchschnitts
  let score1 = 85;
  let score2 = 92;
  let score3 = 78;
  let averageScore = (score1 + score2 + score3) / 3;
  console.log("Average Score:", averageScore);
</script>

Wenn Sie diese HTML-Datei in einem Webbrowser öffnen und die Entwicklerkonsole überprüfen, sehen Sie die folgende Beispielausgabe:

Result 1 (10 + 5 * 2): 20
Result 2 ((10 + 5) * 2): 30
Complex Calculation: 9
Mixed Calculation (++a + b-- * 2): 11
a nach der Berechnung: 6
b nach der Berechnung: 2
Average Score: 85

Wichtige Punkte zum Verständnis:

JavaScript folgt der standardmäßigen mathematischen Ausführungsreihenfolge (PEMDAS)
Klammern können verwendet werden, um die standardmäßige Ausführungsreihenfolge zu ändern
Sie können verschiedene Arten von arithmetischen Operatoren in einem einzelnen Ausdruck kombinieren
Inkrement- und Decrement-Operatoren können innerhalb größerer Berechnungen verwendet werden
Seien Sie immer vorsichtig bei der Reihenfolge und der Platzierung von Operatoren

Zusammenfassung

In diesem Lab haben die Teilnehmer gelernt, wie man eine einfache HTML-Datei für JavaScript-Arithmetikoperationen einrichtet und grundlegende mathematische Berechnungen untersucht. Das Lab hat die Lernenden dabei unterstützt, eine HTML-Dokument mit einem eingebetteten JavaScript-Abschnitt zu erstellen, was es ihnen ermöglichte, essentielle arithmetische Techniken mit Operatoren wie Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) zu üben.

Die Lernreise ging von der Etablierung einer grundlegenden HTML-Struktur bis zur Implementierung verschiedener arithmetischer Operationen, einschließlich der Exploration von Modulo-, Inkrement- und Decrement-Operatoren. Die Teilnehmer haben praktische Erfahrungen mit verschiedenen Operatorvariationen gemacht und gelernt, wie man arithmetische Operationen kombiniert und numerische Werte in JavaScript effektiv manipuliert.