JavaScripts › Mathematik

Zahl quadrieren

Rechnet das Quadrat einer beliebigen Zahl aus — aus 4 wird 16.

Ein herrlich simples Script von Potterfans: Es rechnet das Quadrat einer Zahl aus, also die Zahl mal sich selbst. Als Beispiel ist die 4 vorausgefüllt — ihr Quadrat ist 16.

Tragt eine beliebige Zahl in das Feld ein und klickt auf „Ausrechnen", darunter erscheint das Ergebnis als vollständiger Satz. Auch Dezimalzahlen (mit Komma) und negative Zahlen sind erlaubt — das Quadrat einer negativen Zahl ist übrigens immer positiv, denn Minus mal Minus ergibt Plus.

Quadratzahlen begegnen euch überall in der Mathematik: bei Flächenberechnungen (ein Quadrat mit 4 cm Seitenlänge hat 16 cm² Fläche), im Satz des Pythagoras oder bei quadratischen Gleichungen. Gerade weil das Script so kurz ist, eignet es sich prima als erstes eigenes JavaScript-Projekt zum Nachbauen und Erweitern.

Passende Nachbarn im Archiv: Beliebige Wurzel ziehen ist die Umkehrung des Quadrierens, die Kubikberechnung rechnet mit der dritten Potenz, und die Flächenberechnung Rechteck zeigt eine praktische Anwendung.

Mathematik Baujahr 2007 läuft in deinem Browser
Das Quadrat von 4 ist 16.
Eingesandt von Potterfans

So funktioniert das Script

Kürzer geht ein Rechen-Script kaum: Eine Funktion liest die Zahl aus dem Eingabefeld, quadriert sie und schreibt einen Ergebnissatz in die Ausgabefläche. Dazu kommt eine Zeile, die die Funktion mit dem Knopf verbindet. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen nicht mit anderen Scripts auf der Seite kollidieren.

const eingabe = document.getElementById("qz-zahl").value;
const zahl = Number(eingabe.replace(",", "."));

getElementById greift auf das Eingabefeld zu, .value liefert den eingetippten Text. replace(",", ".") tauscht ein deutsches Dezimalkomma gegen einen Punkt — JavaScript rechnet intern nur mit der englischen Schreibweise —, und Number() macht aus dem Text schließlich eine echte Zahl.

if (eingabe === "" || isNaN(zahl)) {
  ausgabe.textContent = "Bitte tragt eine Zahl in das Feld ein.";
  return;
}

Bevor gerechnet wird, prüft das Script die Eingabe: Ist das Feld leer oder steht dort keine gültige Zahl (isNaN() bedeutet „is Not a Number"), erscheint ein Hinweis und return beendet die Funktion. Das Original hätte in so einem Fall NaN ausgegeben — die Prüfung macht das Script freundlicher.

const quadrat = Math.pow(zahl, 2);

Die eigentliche Rechnung: Math.pow(basis, exponent) ist die Potenzfunktion von JavaScript, Math.pow(zahl, 2) liefert also das Quadrat. Dieselbe Rechnung könnte man auch als zahl * zahl oder mit dem moderneren Potenz-Operator zahl ** 2 schreiben — alle drei Varianten liefern exakt dasselbe Ergebnis.

ausgabe.innerHTML = "Das Quadrat von <strong>" +
  String(zahl).replace(".", ",") + "</strong> ist <strong>" +
  String(quadrat).replace(".", ",") + "</strong>.";

Für die Ausgabe wird der Satz aus Text und den beiden Werten zusammengesetzt; String(…) verwandelt die Zahlen zurück in Text und replace macht aus einem Dezimalpunkt wieder ein deutsches Komma. Weil innerHTML verwendet wird, dürfen die Werte in <strong>-Tags stehen und erscheinen hervorgehoben. Das Original schrieb Eingabe und Ergebnis in zwei einzelne <span>-Elemente — der komplette Satz in einer Ausgabefläche kommt mit weniger IDs aus.

document.getElementById("qz-berechnen").addEventListener("click", quadratBerechnen);

Die letzte Zeile verbindet die Funktion mit dem Knopf: addEventListener("click", …) sorgt dafür, dass quadratBerechnen() bei jedem Klick läuft. Das Script steht dafür unter dem Formular — so existieren Feld und Knopf bereits, wenn es ausgeführt wird.

Zum Anpassen: Aus dem Quadrier-Script wird im Handumdrehen ein Kubik-Script, wenn ihr Math.pow(zahl, 2) in Math.pow(zahl, 3) ändert (und den Ausgabetext anpasst). Auch der vorausgefüllte Beispielwert value="4" im HTML lässt sich beliebig tauschen.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Mathematik