Javascript Pluszeichen
Ausgerechnet das Pluszeichen ist belastet: Mit dem Pluszeichen werden Zahlen addiert, aber das Plus verbindet auch Strings aneinander (die Konkatenation). Diese Zweifachbelegung wird als Overloading bezeichnet.
Wenn Zahlen z.B. aus Eingabefeldern kommen, muss das Script vorab dafür sorgen, dass die Werte als Zahlen und nicht als Strings interpretiert werden.
Addition +
'+' – plus – addiert zwei Werte miteinander.
const x = 17; const y = 23; const z = x + y;
Aber oft kommen die Zahlen aus Benutzereingaben. Benutzereingaben in Formularfeldern liefern in Javascript immer einen String, auch wenn Ziffern eingegeben werden.
+
Um arithmetische Operationen mit Benutzereingaben auszuführen, wandeln parseInt() oder parseFloat() die Werte aus den Eingabefeldern in ganze Zahlen bzw. Fließkommazahlen um.
<input type="text" id="add1" size="6" /> + <input type="text" id="add2" size="6" /> <input type="submit" value="=" /> <input type="text" id="opRes" disabled="disabled" />
let x = document.getElementById('add1').value;
let y = document.getElementById('add2').value;
let z = document.getElementById('opRes');
x = x.replace(/,/, "."); // Ersetzt ein Komma in der
y = y.replace(/,/, "."); // Zahl durch einen Dezimalpunkt
if (isNaN(parseFloat(x)) || isNaN(parseFloat(y))) {
z.value = "Fehler: keine Zahl";
} else {
z.value = parseFloat(x) + parseFloat(y);
}
Die Anweisung let x = document.getElementById('x').value liest den Wert des ersten Eingabefelds und weist ihn der Variablen x zu, die zweite Anweisung belegt entsprechend die Variable y.
Erst wenn if (isNaN(parseFloat(x)) || isNaN(parseFloat(y))) sicher stellt, dass x und y tatsächlich Zahlen sind, findet die eigentliche Operation statt: z.value = parseFloat(x) + parseFloat(y); addiert den Wert aus Feld x mit dem Wert aus Feld y und setzt das Ergebnis ist das Feld z.
Minus – Subtraktion
Minus '-' subtrahiert den zweiten Wert vom ersten.
let z = x - y;
Multiplikation
Mal '*' multipliziert zwei Werte miteinander.
let z = x * y;
Division
Teilt den ersten Wert durch den zweiten Wert.
let z = x / y;
Javascript Modulo – eigentlich "Rest bei Division"
Der %-Operator teilt den ersten Wert (den Dividend) durch den zweiten Wert (den Divisor) und gibt den Rest der Division an z zurück. Modulo ist der Rest, wenn eine Zahl durch einen Wert geteilt wird.
10 % 3 // = 1, denn 3 * 3 ist 9 und 10 - 9 ist 1
+-- Dividend
|
let z = x % y;
|
+-- Divisor
Modulo wird für z.B. Verschlüsselungsverfahren und für Schlüsselaustausch-Verfahren benötigt. In Javascript für Webseiten wird Modulo in erster Linie für Tests und Prüfungen eingesetzt – z.B. ob eine Zahl gerade oder ungerade ist.
let z = 42;
if (z % 2 == 0) {
// gerade Zahl
} else {
// ungerade Zahl
}
Wenn der Dividend des Rest-Operators negativ ist, ist auch das Ergebnis negativ.
console.log (-42 % 17); // Gibt -8 aus console.log (-42 % -17); // Gibt -8 aus console.log (42 % -17); // Gibt 8 aus
Wenn der Dividend keine Zahl ist (NaN), ist das Ergebnis NaN.
Einen String, der eine Zahl enthält, würde Javascript in der Berechnung des Rests in eine Zahl umwandeln. Darauf darf man sich aber nicht verlassen, also immer prüfen und umwandeln (z.B. bei Werten aus Formularfeldern).
Wieso eigentlich Rest? Javascript hat keine einfachen Integer wie viele andere Programmiersprachen, sondern einfach Number, also Typ Gleitkomma oder Fließkomma.
console.log (17.5 % 8) // Gibt 1.5 aus
Inkrement / Dekrement: das doppelte Pluszeichen
Der ++-Operator zählt 1 zum Wert hinzu, egal, ob er vor oder nach dem Operanden steht. Allerdings macht es einen Unterschied für den Rückgabewert, ob das doppelte Plus vor oder nach dem Operanden sitzt.
Mit dem Doppelplus vorher wird der Variablen ein neuer Wert zugewiesen. Die Variable z nimmt den neuen Wert von x an.
let x = 21; let z = ++x;
Beim Nachher-Inkrement (post increment) erhöht der Operator die Variable x um 1, aber gibt den Wert vor dem Inkrement an z zurück.
let x = 21; let z = x++;
Solche Stepper findet man in der for-Anweisung. In Schleifen zählt das Script mit "++" kurz und bündig, wie oft eine while-Schleife durchlaufen wird.
let c = 1;
while (c <= 10) {
console.log (c);
c++;
// c += 1; Äquivalent
// c = c + 1; Äquivalent
}
Javascript Dekrement
So wie ++ um 1 hochzählt, zählt -- um 1 herunter, auch als Dekrement bezeichnet.
x ist 100 vor der Zuweisung, also wird z 100, aber x wird 99
let x = 100; let z = x--;
x wird 99 vor der Zuweisung, also wird z 99 und x wird ebenfalls 99
let x = 100;
let z = --x; // x wird 99 vor der Zuweisung, also wird z 99 und x wird ebenfalls 99
Der ---Operator gilt genauso wie der ++-Operator bei vielen Entwicklern als schlechte Programmierpraxis, wenn er für trickreiche Konstruktionen herangezogen wird. Ordentlich angewendet führt ++ nicht zu Fehlern, sondern ist schön knackig kurz, aber i += 1 ist ebenfalls schön kurz, gut lesbar und steht über fruchtlosen Diskussionen.
Einen Tick besser nachvollziehbar
i++; array[i] = 42;
als der Versuch, die eine Zeile elegant einzusparen.
array[++i] = 42;
Javascript Negation
Dreht das Vorzeichen des Werts um – aus Plus wird Minus und aus Minus wird Plus.
let z = x-;
Rechnen mit Datum und Zeit
Die klassischen Operationen der Mathematik finden sich im Javascript Math Objekt: Sinus, Cosinus, Tangens, Logarithmus, Exponentialfunktionen und nicht zuletzt das Erzeugen von Zufallszahlen.
Nicht alle Berechnungen sind so einfach, wie es auf den ersten Blick erscheint. Das Berechnen der Zeit zwischen zwei Tagen war mal aufwändig, denn Javascript Date Objekte konnten nicht einfach addiert oder voneinander subtrahiert werden.
In den modernen Browsern ist das einfacher geworden:
Also: Zuerst mal das Datum von heute mit new Date() abrufen, dann einen Tag subtrahieren. Und das funktioniert selbst beim 1. eines Monats, denn Javascript ist so raffiniert, davon den letzten Tag des letzten Monats zu machen.
const heute = new Date();
const gestern = new Date(heute);
gestern.setDate (gestern.getDate() - 1)
document.querySelector(".result").innerHTML = `Heute ${heute.toLocaleString()} <br> Gestern ${gestern.toLocaleString()}`;
const date = new Date(heute.setMonth(heute.getMonth() - 24))
document.querySelector(".month").innerHTML = `Heute vor 2 Jahren ${date.toLocaleString()}`;
Am Rande: ` ` statt " "? Das sind Backticks – Template Literals, die Variablen mit ${…} direkt in Strings setzen.
Komplizierte Berechnungen: Nimm Math
Die klassischen Operationen der Mathematik finden sich im Javascript Math Objekt: Sinus, Cosinus, Tangens, Logarithmus, Exponentialfunktionen und nicht zuletzt das Erzeugen von Zufallszahlen.