Comment faire un programme de calculatrice en javascript

Si vous êtes nouveau dans JavaScript ou commencez avec JavaScript, il est préférable de commencer par implémenter un programme de calculatrice petit et facile. Dans cet article, nous allons apprendre à faire une calculatrice très basique mais fonctionnelle à l'aide de JavaScript.

Pour prendre des entrées et afficher la sortie à l'utilisateur, nous allons utiliser le rapide et le alerte fonctions du navigateur respectivement.

Il existe deux principales façons d'implémenter les fonctionnalités d'une calculatrice, d'abord, c'est en utilisant le sinon déclarations, et l'autre moyen est d'utiliser le changer déclarations que nous allons couvrir les deux.

Étape 1: Configurez l'environnement

Créer un nouveau fichier html, lier un script.Fichier JS à l'aide de la balise de script et exécutez le fichier html afin qu'il s'exécute sur le navigateur, la balise de script ressemble à ceci:

Et le fichier html contient ces lignes:

Une calculatrice simple

Étape 2: Écriture du code JavaScript

La première chose que nous devons faire dans notre code JavaScript est d'informer l'utilisateur de saisir un opérateur (*, -, +, /). Pour ce faire, nous créons une nouvelle variable et invitons l'utilisateur à une nouvelle entrée qui sera placée dans cette variable:

constationvarvar = invite ("entrez l'opérateur que vous souhaitez utiliser (*, -, +, \)");

La prochaine étape consiste à demander à l'utilisateur les opérandes sur lesquels cet opérateur fonctionnera, nous le faisons en utilisant les lignes de code suivantes:

const Operand1 = inside ("Entrez la première valeur");
const Operand2 = inside ("Entrez la deuxième valeur");

Nous devons confirmer que l'utilisateur n'a pas fait de mauvaises entrées avec les lignes de code suivantes:

fonction isdigit (entrée)
var Integer = true;
pour (var char de l'entrée)
if (char '9')
entier = false;


retour entier;

if (isdigit (opérand1) == false)
alert ("mauvaise entrée à l'opérande 1 | pas une valeur entière");

if (isDigit (opérand2) == false)
alert ("mauvaise entrée à l'opérande 2 | pas une valeur entière");

Ensuite, nous devons vérifier quel opérateur a été donné par l'utilisateur en utilisant le sinon instructions, effectuer les opérations requises et stocker le résultat d'une nouvelle variable:

if (operatorvar == "*")
result = opérand1 * opérand2;
else if (operatorvar == "-")
Résultat = opérand1 - opérand2;
else if (operatorvar == "/")
Résultat = opérand1 / opérand2;
else if (operatorvar == "+")
result = parseInt (opérand1) + parseInt (opérand2);

Nous devons également vérifier un mauvais opérateur, car nous utiliserons simplement le autre Déclaration et alerte l'utilisateur qu'une mauvaise entrée a été faite:

autre
alert ("opérateur non valide");

La dernière étape consiste à afficher le résultat variable à l'utilisateur à l'aide du alerte Boîte de dialogue:

alert ("Le résultat est:" + résultat);

Vous avez terminé avec le codage de la calculatrice sur JavaScript.

Étape 3: Tester la calculatrice

Pour tester la calculatrice que vous venez de coder, exécutez simplement le fichier HTML et saisissez les cases d'invite telles qu'elles apparaissent comme indiqué dans le GIF ci-dessous:

Comme vous pouvez le voir, le test a été un succès car notre calculatrice fonctionne parfaitement, l'extrait de code complet est:

constatorvar = invite ("entrez l'opérateur que vous souhaitez utiliser");
const Operand1 = inside ("Entrez la première valeur");
if (isdigit (opérand1) == false)
alert ("mauvaise entrée à l'opérande 1 | pas une valeur entière");

const Operand2 = inside ("Entrez la deuxième valeur");
if (isDigit (opérand2) == false)
alert ("mauvaise entrée à l'opérande 2 | pas une valeur entière");

VAR RÉSULTAT;
if (operatorvar == "*")
result = opérand1 * opérand2;
else if (operatorvar == "-")
Résultat = opérand1 - opérand2;
else if (operatorvar == "/")
Résultat = opérand1 / opérand2;
else if (operatorvar == "+")
result = parseInt (opérand1) + parseInt (opérand2);
autre
alert ("opérateur non valide");

alert ("Le résultat est:" + résultat);
fonction isdigit (entrée)
var Integer = true;
pour (var char de l'entrée)
if (char '9')
entier = false;


retour entier;

Étape 4: Utilisation de Switch au lieu de IF-ELSE

Pour utiliser Switch au lieu d'IF-ELSE Simple Remplacez les instructions IF-ELSE par les lignes de code suivantes:

commutateur (opératorvar)
cas "*":
result = opérand1 * opérand2;
casser;
cas "/":
Résultat = opérand1 / opérand2;
casser;
cas "+":
result = parseInt (opérand1) + parseInt (opérand2);
casser;
cas "-":
Résultat = opérand1 - opérand2;
casser;
défaut:
alerte ("opérateur non valide!");
casser;

L'extrait de code complet est comme:

constatorvar = invite ("entrez l'opérateur que vous souhaitez utiliser");
const Operand1 = inside ("Entrez la première valeur");
if (isdigit (opérand1) == false)
alert ("mauvaise entrée à l'opérande 1 | pas une valeur entière");

const Operand2 = inside ("Entrez la deuxième valeur");
if (isDigit (opérand2) == false)
alert ("mauvaise entrée à l'opérande 2 | pas une valeur entière");

Var Result; Switch (OperatorVar)
cas "*":
result = opérand1 * opérand2;
casser;
cas "/":
Résultat = opérand1 / opérand2;
casser;
cas "+":
result = parseInt (opérand1) + parseInt (opérand2);
casser;
cas "-":
Résultat = opérand1 - opérand2;
casser;
défaut:
alerte ("opérateur non valide!");
casser;

alert ("Le résultat est:" + résultat);
fonction isdigit (entrée)
var Integer = true;
pour (var char de l'entrée)
if (char '9')
entier = false;


retour entier;

Tout ce qui reste maintenant est de tester ce code, jetez un œil au GIF ci-dessous:

C'est tout, vous avez codé une calculatrice simple à l'aide de JavaScript.

Conclusion

L'apprentissage d'une nouvelle langue vous oblige à créer des applications réelles; Lorsque vous débutez avec l'apprentissage JavaScript, un programme de calculatrice est vraiment utile et un moyen facile de comprendre JavaScript. Aujourd'hui, dans cet article, nous avons appris à créer un programme de calculatrice très basique à l'aide de JavaScript en utilisant les deux sinon déclarations ainsi que le Instructions de commutation.