So erstellen Sie ein Taschenrechnerprogramm in JavaScript

Wenn Sie neu bei JavaScript sind oder mit JavaScript beginnen, beginnen Sie am besten, indem Sie ein kleines und einfaches Rechnerprogramm implementieren. In diesem Beitrag lernen wir, wie man mit JavaScript einen sehr grundlegenden und dennoch funktionalen Taschenrechner erstellt.

Um Eingänge zu nehmen und die Ausgabe dem Benutzer anzuzeigen, werden wir die verwenden prompt und das Alarm Funktionen des Browsers jeweils.

Es gibt zwei Hauptmethoden, um die Funktionalität eines Taschenrechners zu implementieren. Erstens verwendet die Verwendung der ansonsten Aussagen und die andere Möglichkeit besteht darin, die zu verwenden schalten Aussagen, die wir beide abdecken werden.

Schritt 1: Richten Sie die Umgebung ein

Erstellen Sie eine neue HTML -Datei, verknüpfen Sie ein Skript.JS -Datei mithilfe des Skript -Tags und ausführen Sie die HTML -Datei so, dass sie auf dem Browser ausgeführt wird. Das Skript -Tag sieht folgendermaßen aus:

Und die HTML -Datei enthält folgende Zeilen:

Ein einfacher Taschenrechner

Schritt 2: Schreiben des JavaScript -Code

Das erste, was wir in unserem JavaScript -Code tun müssen, ist, den Benutzer zu benachrichtigen, einen Bediener einzugeben (*, -, +, /). Dazu erstellen wir eine neue Variable und fordern den Benutzer auf eine neue Eingabe auf, die in dieser Variablen platziert wird:

const operatorvar = Eingabeaufforderung ("Geben Sie den Bediener ein, den Sie verwenden möchten (*, -, +, \)");

Der nächste Schritt besteht darin, den Benutzer nach den Operanden zu fragen, auf denen dieser Bediener funktioniert. Wir tun dies mit den folgenden Codezeilen:

const operand1 = prompt ("den ersten Wert eingeben");
const operand2 = prompt ("den zweiten Wert eingeben");

Wir müssen bestätigen, dass der Benutzer mit den folgenden Codezeilen keine falschen Eingaben gemacht hat:

Funktion isDigit (Eingabe)
var Integer = true;
für (var char of Input)
if (char '9')
Integer = false;


Ganzzahl zurückkehren;

if (isDigit (operand1) == false)
ALERT ("Falsche Eingabe bei Operand 1 | kein Ganzzahlwert");

if (isDigit (operand2) == false)
ALERT ("Falsche Eingabe bei Operand 2 | kein Ganzzahlwert");

Als nächstes müssen wir überprüfen, welcher Bediener vom Benutzer mit dem Benutzer gegeben wurde ansonsten Aussagen, führen Sie die erforderlichen Vorgänge aus und speichern Sie das Ergebnis in einer neuen Variablen:

if (operatorvar == "*")
result = operand1 * operand2;
else if (operatorvar == "-")
Ergebnis = Operand1 - Operand2;
else if (operatorvar == "/")
Ergebnis = Operand1 / Operand2;
else if (operatorvar == "+")
result = parseInt (Operand1) + ParseInt (Operand2);

Wir müssen auch nach einem falschen Bediener suchen, da wir einfach die verwenden werden anders Anweisung und alarmieren Sie den Benutzer darüber, dass eine falsche Eingabe getätigt wurde:

anders
alert ("ungültiger Operator");

Der letzte Schritt besteht darin, die anzuzeigen Ergebnis Variable für den Benutzer verwendet die Alarm Dialog Box:

alarm ("Das Ergebnis ist:" + Ergebnis);

Sie werden mit der Codierung des Taschenrechners auf JavaScript fertiggestellt.

Schritt 3: Testen des Taschenrechners

Um den gerade codierten Taschenrechner zu testen, führen Sie einfach die HTML -Datei aus und geben Sie die Eingabeaufforderungsfelder ein, wie sie angezeigt werden, wie im folgenden GIF gezeigt:

Wie Sie sehen können, war der Test ein Erfolg, da unser Taschenrechner vollkommen in Ordnung funktioniert. Der komplette Code -Snippet lautet wie folgt:

const operatorvar = Eingabeaufforderung ("Geben Sie den Bediener ein, den Sie verwenden möchten");
const operand1 = prompt ("den ersten Wert eingeben");
if (isDigit (operand1) == false)
ALERT ("Falsche Eingabe bei Operand 1 | kein Ganzzahlwert");

const operand2 = prompt ("den zweiten Wert eingeben");
if (isDigit (operand2) == false)
ALERT ("Falsche Eingabe bei Operand 2 | kein Ganzzahlwert");

var Ergebnis;
if (operatorvar == "*")
result = operand1 * operand2;
else if (operatorvar == "-")
Ergebnis = Operand1 - Operand2;
else if (operatorvar == "/")
Ergebnis = Operand1 / Operand2;
else if (operatorvar == "+")
result = parseInt (Operand1) + ParseInt (Operand2);
anders
alert ("ungültiger Operator");

alarm ("Das Ergebnis ist:" + Ergebnis);
Funktion isDigit (Eingabe)
var Integer = true;
für (var char of Input)
if (char '9')
Integer = false;


Ganzzahl zurückkehren;

Schritt 4: Verwenden von Switch statt If-ELSE

Um Switch anstelle von IF-ELSE-Einfachen zu verwenden, ersetzen Sie die IF-ELSE-Anweisungen durch die folgenden Codezeilen:

Switch (operatorvar)
Fall "*":
result = operand1 * operand2;
brechen;
Fall "/":
Ergebnis = Operand1 / Operand2;
brechen;
Fall "+":
result = parseInt (Operand1) + ParseInt (Operand2);
brechen;
Fall "-":
Ergebnis = Operand1 - Operand2;
brechen;
Standard:
Alarm ("Ungültiger Operator!");
brechen;

Der komplette Code -Snippet lautet wie:

const operatorvar = Eingabeaufforderung ("Geben Sie den Bediener ein, den Sie verwenden möchten");
const operand1 = prompt ("den ersten Wert eingeben");
if (isDigit (operand1) == false)
ALERT ("Falsche Eingabe bei Operand 1 | kein Ganzzahlwert");

const operand2 = prompt ("den zweiten Wert eingeben");
if (isDigit (operand2) == false)
ALERT ("Falsche Eingabe bei Operand 2 | kein Ganzzahlwert");

var result; switch (operatorvar)
Fall "*":
result = operand1 * operand2;
brechen;
Fall "/":
Ergebnis = Operand1 / Operand2;
brechen;
Fall "+":
result = parseInt (Operand1) + ParseInt (Operand2);
brechen;
Fall "-":
Ergebnis = Operand1 - Operand2;
brechen;
Standard:
Alarm ("Ungültiger Operator!");
brechen;

alarm ("Das Ergebnis ist:" + Ergebnis);
Funktion isDigit (Eingabe)
var Integer = true;
für (var char of Input)
if (char '9')
Integer = false;


Ganzzahl zurückkehren;

Jetzt bleibt nur noch übrig, um diesen Code zu testen und sich das GIF unten anzusehen:

Das ist es, Sie haben einen einfachen Taschenrechner mit JavaScript codiert.

Abschluss

Um eine neue Sprache zu erlernen, müssen Sie reale Anwendungen erstellen. Wenn Sie mit dem Lernen von JavaScript beginnen, ist ein Taschenrechnerprogramm wirklich nützlich und eine einfache Möglichkeit, JavaScript zu halten. In diesem Beitrag haben wir heute gelernt, wie man ein sehr grundlegendes Rechnerprogramm mit JavaScript erstellt, indem wir beide verwenden ansonsten Aussagen sowie die Anweisungen wechseln.