JavaScript ist eine der beliebtesten Programmiersprachen, die zur Entwicklung interaktiver Webanwendungen verwendet werden. Eines der grundlegendsten Beispiele für solche Anwendungen ist ein Taschenrechner, der einfache mathematische Operationen wie Addition, Subtraktion, Multiplikation und Division durchführt. In dieser exemplarischen Vorgehensweise erfahren Sie, wie Sie einen einfachen Rechner in JavaScript erstellen.
Um einen Rechner in JavaScript zu erstellen, benötigen wir HTML-Code zum Erstellen einer Benutzeroberfläche und JavaScript-Code zum Verarbeiten von Benutzereingaben und zum Ausführen mathematischer Operationen. Der HTML-Code enthält Elemente zum Eingeben von Zahlen und Schaltflächen zum Auswählen von Operationen, und der JavaScript-Code verarbeitet diese Werte und berechnet das Ergebnis.
Wir beginnen damit, einen grundlegenden HTML-Code zu erstellen, der Elemente für die Eingabe von Zahlen und Schaltflächen für Operationen enthält. Dann schreiben wir JavaScript-Code, der diese Werte verarbeitet und die Summe berechnet.
Ein Beispiel für einen JavaScript-Rechner, den wir erstellen werden, hat eine einfache Benutzeroberfläche, die aus Feldern für die Eingabe von Zahlen und Schaltflächen für grundlegende mathematische Operationen besteht. Wir werden jeden Schritt im Detail durchgehen, damit Sie vollständig verstehen, wie Sie Ihren eigenen Rechner in JavaScript erstellen können.
Schritt 1: Einrichten des HTML-Markups für den Rechner
Am Anfang des HTML-Markups, innerhalb des body-Tags, erstellen wir eine Tabelle mit der Klasse "calculator". Diese Tabelle enthält zwei Zeilen und drei Spalten.
In der ersten Zeile der Tabelle platzieren wir ein Feld, um die vom Benutzer eingegebenen Werte und Berechnungsergebnisse anzuzeigen. Dazu verwenden wir ein input-Element mit dem Typ "text" und der ID "display".
In der zweiten Zeile platzieren wir die Tasten mit den Ziffern 1, 2 und 3. Jede Schaltfläche befindet sich in einer separaten Tabellenzelle, die durch das td-Element gekennzeichnet ist.
Daher haben wir in diesem Schritt die grundlegende HTML-Markup-Struktur für den Rechner konfiguriert. Im nächsten Schritt werden wir den Schaltflächen mithilfe von JavaScript Funktionalität hinzufügen.
Schritt 2: Erstellen von JavaScript-Funktionen für grundlegende Operationen
Nachdem wir das Hauptlayout des Rechners erstellt haben, gehen wir weiter, um JavaScript-Funktionen zu erstellen, um die Operationen Addition, Subtraktion, Multiplikation und Division durchzuführen.
Zuerst erstellen wir eine Funktion add(), die eine Additionsoperation zweier Zahlen ausführt. Innerhalb der Funktion erhalten wir die Werte der vom Benutzer eingegebenen Zahlen, und mit dem Operator + addieren wir diese Zahlen. Dann schreiben wir das Ergebnis der Addition in das Ausgabefeld der Ergebnisse.
Ebenso erstellen wir subtract() für die Subtraktionsoperation, multiply() für die Multiplikationsoperation und divide() für die Divisionsoperation. Diese Funktionen erhalten die Werte von zwei Zahlen, führen eine entsprechende mathematische Operation durch und schreiben das Ergebnis in das Ausgabefeld der Ergebnisse.
function subtract() function multiply() function divide()
Jetzt haben wir Funktionen, die grundlegende mathematische Operationen durchführen. Im nächsten Schritt werden wir Ereignishandler für die Schaltflächen des Rechners hinzufügen, um diese Funktionen aufzurufen, wenn Sie auf die Schaltflächen klicken.
