Come creare un programma di calcolatrice in JavaScript

Se sei nuovo in JavaScript o inizi con JavaScript, allora è meglio iniziare implementando un programma di calcolatrice piccolo e facile. In questo post, impareremo come creare un calcolatore molto semplice ma funzionale usando JavaScript.

Per prendere input e visualizzare l'output all'utente, useremo il richiesta e il mettere in guardia funzioni del browser rispettivamente.

Esistono due modi principali per implementare la funzionalità di un calcolatore, prima è usando il se altro dichiarazioni e l'altro modo è usare il interruttore dichiarazioni che ci copriremo entrambi.

Passaggio 1: impostare l'ambiente

Crea un nuovo file HTML, collega uno script.File JS utilizzando il tag script ed eseguire il file HTML in modo che venga eseguito sul browser, il tag script assomiglia a questo:

E il file HTML contiene queste righe:

Una semplice calcolatrice

Passaggio 2: scrivere il codice JavaScript

La prima cosa che dobbiamo fare nel nostro codice JavaScript è avvisare all'utente di inserire un operatore (*, -, +, /). Per fare ciò, creiamo una nuova variabile e richiediamo all'utente un nuovo input che verrà inserito in quella variabile:

const operatorVar = prompt ("Immettere l'operatore che si desidera utilizzare (*, -, +, \)");

Il prossimo passo è chiedere all'utente gli operandi su cui funzionerà questo operatore, lo facciamo utilizzando le seguenti righe di codice:

const operand1 = prompt ("immettere il primo valore");
const operand2 = prompt ("Immettere il secondo valore");

Dobbiamo confermare che l'utente non ha effettuato input errati con le seguenti righe di codice:

funzione isdigit (input)
var integer = true;
per (var char of input)
if (char '9')
integer = false;


restituire intero;

if (isdigit (operand1) == false)
Avviso ("Input errati all'operando 1 | non un valore intero");

if (isdigit (operand2) == false)
Avviso ("Input errati all'operando 2 | non un valore intero");

Successivamente, dobbiamo verificare quale operatore è stato dato dall'utente utilizzando il se altro dichiarazioni, eseguire le operazioni richieste e memorizzare il risultato in una nuova variabile:

if (OperatorVar == "*")
risultato = operand1 * operand2;
else if (OperatorVar == "-")
risultato = operand1 - operand2;
else if (OperatorVar == "/")
risultato = operand1 / operand2;
else if (OperatorVar == "+")
risultato = parseint (operand1) + parseint (operand2);

Dobbiamo verificare anche un operatore sbagliato, perché useremo semplicemente il altro istruzione e avvisare l'utente che è stato effettuato un input sbagliato:

altro
avviso ("operatore non valido");

L'ultimo passo è visualizzare il risultato variabile all'utente utilizzando il mettere in guardia Dialogo:

Avviso ("Il risultato è:" + risultato);

Hai finito con la codifica del calcolatore su JavaScript.

Passaggio 3: testare il calcolatore

Per testare il calcolatore che hai appena codificato, eseguire semplicemente il file HTML e digitare le caselle prompt come appaiono come mostrato nella GIF seguente:

Come puoi vedere, il test è stato un successo perché il nostro calcolatore funziona perfettamente, lo snippet completo è come:

const operatorVar = prompt ("Immettere l'operatore che si desidera utilizzare");
const operand1 = prompt ("immettere il primo valore");
if (isdigit (operand1) == false)
Avviso ("Input errati all'operando 1 | non un valore intero");

const operand2 = prompt ("Immettere il secondo valore");
if (isdigit (operand2) == false)
Avviso ("Input errati all'operando 2 | non un valore intero");

VAR RISOLO;
if (OperatorVar == "*")
risultato = operand1 * operand2;
else if (OperatorVar == "-")
risultato = operand1 - operand2;
else if (OperatorVar == "/")
risultato = operand1 / operand2;
else if (OperatorVar == "+")
risultato = parseint (operand1) + parseint (operand2);
altro
avviso ("operatore non valido");

Avviso ("Il risultato è:" + risultato);
funzione isdigit (input)
var integer = true;
per (var char of input)
if (char '9')
integer = false;


restituire intero;

Passaggio 4: usando Switch anziché IF-Else

Per utilizzare Switch invece di If-Else Simple Sostituisci le istruzioni IF-Else con le seguenti righe di codice:

switch (operatorvar)
caso "*":
risultato = operand1 * operand2;
rottura;
caso "/":
risultato = operand1 / operand2;
rottura;
Caso "+":
risultato = parseint (operand1) + parseint (operand2);
rottura;
caso "-":
risultato = operand1 - operand2;
rottura;
predefinito:
Avviso ("operatore non valido!");
rottura;

Lo snippet completo del codice è come:

const operatorVar = prompt ("Immettere l'operatore che si desidera utilizzare");
const operand1 = prompt ("immettere il primo valore");
if (isdigit (operand1) == false)
Avviso ("Input errati all'operando 1 | non un valore intero");

const operand2 = prompt ("Immettere il secondo valore");
if (isdigit (operand2) == false)
Avviso ("Input errati all'operando 2 | non un valore intero");

VAR Result; Switch (OperatorVar)
caso "*":
risultato = operand1 * operand2;
rottura;
caso "/":
risultato = operand1 / operand2;
rottura;
Caso "+":
risultato = parseint (operand1) + parseint (operand2);
rottura;
caso "-":
risultato = operand1 - operand2;
rottura;
predefinito:
Avviso ("operatore non valido!");
rottura;

Avviso ("Il risultato è:" + risultato);
funzione isdigit (input)
var integer = true;
per (var char of input)
if (char '9')
integer = false;


restituire intero;

Tutto ciò che rimane ora è testare questo codice, dare un'occhiata alla GIF qui sotto:

Ecco, hai codificato un semplice calcolatore usando JavaScript.

Conclusione

L'apprendimento di una nuova lingua richiede di creare applicazioni di vita reale; Quando inizi con l'apprendimento di JavaScript, un programma di calcolatrice è davvero utile e un modo semplice per ottenere la sospensione di JavaScript. Oggi, in questo post, abbiamo imparato a creare un programma di calcolatrice molto semplice usando JavaScript utilizzando sia il se altro dichiarazioni e il Dichiarazioni di commutazione.