Hvordan lage et kalkulatorprogram i JavaScript

Hvis du er ny på JavaScript eller kommer i gang med JavaScript, er det best å starte med å implementere et lite og enkelt kalkulatorprogram. I dette innlegget skal vi lære å lage en veldig grunnleggende, men funksjonell kalkulator ved hjelp av JavaScript.

For å ta innganger og for å vise utdataene til brukeren, skal vi bruke hurtig og varsling henholdsvis nettleserens funksjoner.

Det er to hovedmåter å implementere funksjonaliteten til en kalkulator, først er ved å bruke If-Else uttalelser, og den andre veien er å bruke bytte om Uttalelser vi skal dekke dem begge.

Trinn 1: Sett opp miljøet

Lag en ny HTML -fil, koble et skript.JS -fil ved hjelp av skriptetoden og utfør HTML -filen slik at den kjører på nettleseren, ser skriptetoden slik:

Og HTML -filen inneholder disse linjene:

En enkel kalkulator

Trinn 2: Skrive JavaScript -koden

Det første vi trenger å gjøre i vår JavaScript -kode, er å varsle brukeren om å legge inn en operatør (*, -, +, /). For å gjøre det oppretter vi en ny variabel og ber brukeren om en ny inngang som vil bli plassert i den variabelen:

const OperatorVar = spurt ("Angi operatøren som du vil bruke (*, -, +, \)");

Neste trinn er å be brukeren om operandene som denne operatøren vil fungere på, vi gjør det ved å bruke følgende kodelinjer:

const operand1 = spurt ("Angi den første verdien");
const operand2 = spurt ("Angi den andre verdien");

Vi må bekrefte at brukeren ikke gjorde noen gale innganger med følgende kodelinjer:

funksjon isDigit (input)
var heltall = true;
for (var char of input)
if (char '9')
Heltall = falsk;


returnere heltall;

if (isDigit (operand1) == falsk)
Varsel ("Feil inngang ved operand 1 | Ikke en heltallverdi");

if (isDigit (operand2) == falsk)
Varsel ("Feil inngang ved operand 2 | Ikke en heltallverdi");

Neste gang må vi sjekke hvilken operatør som ble gitt av brukeren ved å bruke If-Else Uttalelser, utfør de nødvendige driften og lagrer resultatet i en ny variabel:

if (operatorvar == "*")
Resultat = operand1 * operand2;
annet hvis (operatørvar == "-")
Resultat = operand1 - operand2;
annet hvis (operatørvar == "/")
resultat = operand1 / operand2;
annet hvis (operatørvar == "+")
Resultat = parseInt (operand1) + parseInt (operand2);

Vi må sjekke for en feil operatør også, for det vil vi ganske enkelt bruke ellers uttalelse og varsle brukeren om at det ble gjort en feil innspill:

annet
Varsel ("Ugyldig operatør");

Det siste trinnet er å vise resultat variabel til brukeren som bruker varsling Dialogboks:

varsel ("Resultatet er:" + resultat);

Du er ferdig med å kode kalkulatoren på JavaScript.

Trinn 3: Testing av kalkulatoren

For å teste kalkulatoren du nettopp kodet, kjør bare HTML -filen og skriv inn ledetekstboksene som de vises som vist i GIF nedenfor:

Som du kan se at testen var en suksess fordi kalkulatoren vår fungerer helt greit, er det komplette kodebiten som:

const OperatorVar = spurt ("Skriv inn operatøren du vil bruke");
const operand1 = spurt ("Angi den første verdien");
if (isDigit (operand1) == falsk)
Varsel ("Feil inngang ved operand 1 | Ikke en heltallverdi");

const operand2 = spurt ("Angi den andre verdien");
if (isDigit (operand2) == falsk)
Varsel ("Feil inngang ved operand 2 | Ikke en heltallverdi");

var resultat;
if (operatorvar == "*")
Resultat = operand1 * operand2;
annet hvis (operatørvar == "-")
Resultat = operand1 - operand2;
annet hvis (operatørvar == "/")
resultat = operand1 / operand2;
annet hvis (operatørvar == "+")
Resultat = parseInt (operand1) + parseInt (operand2);
annet
Varsel ("Ugyldig operatør");

varsel ("Resultatet er:" + resultat);
funksjon isDigit (input)
var heltall = true;
for (var char of input)
if (char '9')
Heltall = falsk;


returnere heltall;

Trinn 4: Bruk bryter i stedet for IF-Else

For å bruke bryteren i stedet for IF-Else Simple Bytt ut IF-Else-utsagnene med følgende kodelinjer:

bryter (operatørvar)
sak "*":
Resultat = operand1 * operand2;
gå i stykker;
sak "/":
resultat = operand1 / operand2;
gå i stykker;
sak "+":
Resultat = parseInt (operand1) + parseInt (operand2);
gå i stykker;
sak "-":
Resultat = operand1 - operand2;
gå i stykker;
misligholde:
Varsel ("Ugyldig operatør!");
gå i stykker;

Det komplette kodebiten er som:

const OperatorVar = spurt ("Skriv inn operatøren du vil bruke");
const operand1 = spurt ("Angi den første verdien");
if (isDigit (operand1) == falsk)
Varsel ("Feil inngang ved operand 1 | Ikke en heltallverdi");

const operand2 = spurt ("Angi den andre verdien");
if (isDigit (operand2) == falsk)
Varsel ("Feil inngang ved operand 2 | Ikke en heltallverdi");

var resultat; bryter (operatørvar)
sak "*":
Resultat = operand1 * operand2;
gå i stykker;
sak "/":
resultat = operand1 / operand2;
gå i stykker;
sak "+":
Resultat = parseInt (operand1) + parseInt (operand2);
gå i stykker;
sak "-":
Resultat = operand1 - operand2;
gå i stykker;
misligholde:
Varsel ("Ugyldig operatør!");
gå i stykker;

varsel ("Resultatet er:" + resultat);
funksjon isDigit (input)
var heltall = true;
for (var char of input)
if (char '9')
Heltall = falsk;


returnere heltall;

Alt som er igjen nå er å teste denne koden, ta en titt på GIF nedenfor:

Det er det, du har kodet en enkel kalkulator ved hjelp av JavaScript.

Konklusjon

Å lære et nytt språk krever at du bygger applikasjoner i det virkelige liv; Når du begynner med å lære JavaScript, er et kalkulatorprogram virkelig nyttig og en enkel måte å få tak i JavaScript. I dag, i dette innlegget, lærte vi hvordan vi lager et veldig grunnleggende kalkulatorprogram ved hjelp av JavaScript ved å bruke begge If-Else uttalelser så vel som Bytt uttalelser.