Rheinwerk Computing :: Einstieg in JavaScript - Grundlagen der Programmierung

2.2 Berechnungen durchführen

In den folgenden Abschnitten sehen Sie, wie Sie Berechnungen mit Variablen und Zahlenwerten durchführen. Ihre Programme werden durch die Ein- und Ausgabe von Zahlen und Ergebnissen interaktiv.

2.2.1 Rechenoperatoren

Zur Durchführung von Berechnungen stehen neben dem Operator + die folgenden Operatoren zur Verfügung: – für die Subtraktion , * für die Multiplikation, / für die Division und % für Modulo . Der Modulo-Operator berechnet den Rest bei einer ganzzahligen Division. Seit ECMAScript2016 gibt es auch den Operator ** für die Potenzierung .

Im folgenden Programm wird ein wenig gerechnet:

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

      var z = 2 + 4 - 2.5;         document.write(z + "<br>");
      z = 2 + 4 * 3 - 6 / 2;       document.write(z + "<br>");
      z = (2 + 4) * (3 - 6) / 2;   document.write(z + "<br>");
      z = 13 % 5;                  document.write(z + "<br>");
      z = 6;
      z = -z;                      document.write(z + "<br>");
      z = z * 5;                   document.write(z + "<br><br>");

      z = 2.5 ** -3.5;             document.write(z + "<br>");
      z = (-2.5) ** -3;            document.write(z + "<br>");
      z = (-2) ** -3.5;            document.write(z + "<br>");
      z = 4 * 3 ** 2;              document.write(z);

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

Listing 2.6 Datei »berechnung.htm«

In diesem Programm wird die Übersichtlichkeit verbessert, indem mehrere Anweisungen in eine Zeile geschrieben werden. Nach jeder Berechnung wird unmittelbar das Ergebnis ausgegeben.

Wie in der Mathematik gilt: Punktrechnung vor Strichrechnung. D. h., dass die Multiplikation und die Division eine höhere Rangstufe (Priorität ) haben als die Addition und die Subtraktion und demnach zuerst ausgeführt werden. Falls Operatoren dieselbe Priorität haben, werden die Berechnungen von links nach rechts ausgeführt. Falls Sie Prioritäten ändern wollen, müssen Sie Klammern setzen.

Die Berechnungen sind in zwei Blöcke unterteilt. Zunächst der erste Block:

Die erste Berechnung wird von links nach rechts ausgeführt und ergibt den Wert 3.5.
In der zweiten Berechnung werden zunächst 4 * 3 und 6 / 2 gerechnet. Erst dann wird addiert bzw. subtrahiert. Es ergibt sich 2 + 12 – 3 = 11.
Bei der dritten Berechnung werden zunächst die Inhalte der Klammern (2 + 4) und (3 – 6) berechnet. Erst dann werden die restlichen Berechnungen durchgeführt. Es ergibt sich 6 * –3 / 2 = –9.
Falls wir 13 durch 5 teilen und nur mit ganzen Zahlen rechnen, dann ergibt sich »2 Rest 3«. Der Modulo-Operator % ermittelt den Rest 3.
Wie bei Zahlen können Sie auch bei den Variablen ein Minuszeichen voranstellen. Dadurch wird der Wert der Variablen mit –1 multipliziert. Aus 6 wird –6, aus –6 wird 6.
Eine Variable kann auch in eine Berechnung einbezogen werden. Im letzten Beispiel sehen Sie, dass der alte Wert von z (–6) mit 5 multipliziert wird und sich damit der neue Wert von z (–30) ergibt.

Im zweiten Block geht es um den Potenzierungsoperator. Er hat eine noch höhere Priorität als die Multiplikation und die Division. Sollte Ihr Browser den Operator wider Erwarten nicht kennen, so müssten Sie den zweiten Block in Kommentarklammern setzen. Die Beispiele:

In der ersten Berechnung wird 2,5 hoch -3,5 gerechnet. Der Wert vor diesem Operator wird Basis genannt, der Wert nach dem Operator Exponent . Beide dürfen Nachkommastellen besitzen. Vor dem Exponenten kann auch ein negatives Vorzeichen stehen.

Falls vor der Basis ein negatives Vorzeichen stehen soll, muss der Wert in Klammern gesetzt werden. Das sehen Sie im zweiten Beispiel.

Das dritte Beispiel zeigt, dass die Potenzierung einer negativen Zahl mit einer negativen Zahl, die Nachkommastellen besitzt, mathematisch nicht gestattet ist. Es ergibt sich der Wert NaN. Diese Abkürzung steht für Not a Number , also: keine Zahl.

Im vierten Beispiel wird aufgrund der höheren Priorität zuerst die Potenzierung durchgeführt, anschließend die Multiplikation. Es ergibt sich also 4 * 9 = 36.

Die Ergebnisse sehen Sie in Abbildung 2.7.

Abbildung 2.7 Einige Berechnungen

2.2.2 Zuweisungsoperatoren

Zuweisungsoperatoren sind nützlich zur Verkürzung von Anweisungen. Häufig eingesetzt werden die Operatoren +=, ++ und --, seltener die Operatoren -=, *=, /= und %=. Alle genannten Operatoren kommen im folgenden Beispiel zum Einsatz:

...
<body>
   <script>

      var tx;
      tx = "Das";             document.write("<p>" + tx + "<br>");
      tx = tx + " ist ein";   document.write(tx + "<br>");
      tx += " Satz.";         document.write(tx + "</p>");

      var z;
      z = 6;    document.write("<p>" + z + " ");
      z++;      document.write(z + " ");
      z--;      document.write(z + " ");
      z += 13;  document.write(z + " ");
      z -= 5;   document.write(z + " ");
      z *= 3;   document.write(z + " ");
      z /= 6;   document.write(z + " ");
      z %= 3;   document.write(z + "</p>");

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

Listing 2.7 Datei »zuweisung.htm«

Zunächst wird eine Zeichenkette zugewiesen und zweimal verlängert. Bei der zweiten Verlängerung wird der Zuweisungs-Operator += genutzt.

Anschließend wird eine Variable zugewiesen und mehrmals verändert. Der Operator ++ erhöht den Wert einer Variablen um 1, der Operator -- vermindert ihn um 1. Dasselbe würden Sie bewirken mit den Anweisungen z=z+1 bzw. z=z-1.

Entsprechend erhöht der Operator += den Wert einer Variablen um den nachfolgenden Wert. Der Operator -= vermindert ihn um den nachfolgenden Wert. Die Operatoren *=, /= und %= stehen somit für eine Verkürzung der folgenden Anweisungen: z=z*[Wert] bzw. z=z/[Wert] bzw. z=z%[Wert].

In Abbildung 2.8 sehen Sie die Ergebnisse der Zuweisungen.

Abbildung 2.8 Zuweisungsoperatoren

2.2.3 Eingabe von Zahlen

In diesem Abschnitt soll die mittlerweile bekannte Methode prompt() zur Eingabe von zwei Zahlen genutzt werden. Die Summe dieser beiden Zahlen soll anschließend mithilfe von alert() ausgegeben werden.

Die Methode prompt() liefert eine Zeichenkette. Sie haben in Abschnitt 2.1.4, »Speichern von Zahlen«, gesehen, dass der Operator + Zeichenketten und Zahlen unterschiedlich behandelt. Daher ist es notwendig, eine solche Eingabe zunächst in eine Zahl umzuwandeln, bevor sie zur Berechnung einer Summe genutzt werden kann. Es folgt das Programm:

...
<body>
   <script>

      // Eingabe
      var eingabe = prompt("Geben Sie die erste Zahl ein", "");
      var z1 = parseFloat(eingabe);
      var z2 = parseFloat(prompt("Geben Sie die zweite Zahl ein",""));

      // Verarbeitung und Ausgabe
      var ergebnis = z1 + z2;
      alert(z1 +  " + " + z2 + " = " + ergebnis);

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

Listing 2.8 Datei »zahlen_eingabe.htm«

Das Ergebnis der ersten Eingabe wird in der Variablen eingabe gespeichert. Dies ist eine Zeichenkette. Die Funktion parseFloat() dient zur Umwandlung einer Zeichenkette in eine Fließkommazahl, also eine Zahl mit Nachkommastellen. Die Variable z1 enthält nach dieser Umwandlung eine Zahl.

Dasselbe geschieht bei der zweiten Eingabe, nur in verkürzter Form. Das Ergebnis der Methode prompt() wird direkt weiterverarbeitet, mithilfe der Funktion parseFloat(). Anschließend werden die beiden Zahlen addiert, und die gesamte Rechnung wird ausgegeben. Ein Beispiel sehen Sie in Abbildung 2.9 bis Abbildung 2.11.

Abbildung 2.9 Eingabe der ersten Zahl

Abbildung 2.10 Eingabe der zweiten Zahl

Abbildung 2.11 Ausgabe der gesamten Berechnung

Die Nachkommastellen müssen mit einem Dezimalpunkt abgetrennt werden. Falls stattdessen ein Dezimalkomma verwendet wird, dann gehen die Nachkommastellen verloren.

Hinweis

Im Bonuskapitel »Reguläre Ausdrücke«, auch im gleichlautenden Abschnitt 6.2.5, finden Sie in der Datei regexp_komma.htm eine Erweiterung des obigen Programms. Es ermöglicht die Eingabe und Ausgabe von Zahlen mit einem Dezimalkomma.

Im Programm zahlen_eingabe.htm können auch Zahlen im Exponentialformat eingegeben werden. Falls eine Eingabe erfolgt, die nicht in eine Zahl umgewandelt werden kann, z. B. »abc« oder eine leere Eingabe, so liefert parseFloat() das Ergebnis NaN. Diese Abkürzung steht für Not a Number . In Abschnitt 2.3.4, »Eingabe von Zahlen prüfen«, werden wir ermitteln, ob der Benutzer eine Zahl eingegeben hat.

Die Funktion parseInt() ist mit parseFloat() eng verwandt. Sie schneidet zusätzlich die Nachkommastellen ab und liefert eine ganze Zahl. Aus der Zeichenkette »3.8« wird dann also die ganze Zahl 3.

Im Normalfall interpretiert parseInt() einen Text als Dezimalzahl , also als eine Zahl zur Basis 10. Mit einem zweiten Parameter können Sie eine andere Basis angeben. Ein Beispiel: Der Aufruf parseInt("101", 2) ergibt den dezimalen Wert 5, weil der Text »101« nun zur Basis 2 interpretiert wird, also als Dualzahl .