Comment programmer une calculatrice avec jQuery

Auparavant, je vous ai montré comment utiliser la propriété CSS border-radius pour créer la calculatrice suivante. Maintenant, je vais vous montrer comment utiliser jQuery pour implémenter la fonctionnalité de la calculatrice.

Ajout de jQuery

Nous utiliserons jQuery dans ce projet pour répondre aux événements lorsqu'un utilisateur clique sur un bouton. Nous devons ajouter la bibliothèque jQuery à notre application. J'utiliserai la bibliothèque CDN cdnjs pour ajouter jQuery.

Au bas de mon fichier index.html, j'ajouterai la balise de script suivante:

Manipulation des boutons opérateur par rapport aux boutons numériques

Avant d'écrire mon code, j'ai décidé de réfléchir à la manière dont je gérerais la fonctionnalité derrière la calculatrice. Je divise les boutons de la calculatrice en deux groupes: opérateur et nombre .

Un bouton numérique correspondrait aux nombres 0–9. Tous les autres boutons sont des opérateurs.

Variables globales pour notre opération

La prochaine étape consiste à déterminer comment les variables globales dont nous aurons besoin. Les variables globales contiendront les fonctionnalités de notre calculatrice. Par exemple, un utilisateur peut entrer la séquence suivante:

2 + 3 = 5

De même, un utilisateur peut entrer cette séquence beaucoup plus longue:

2 + 3 * 4 / 5 - 6 = -2

Lors de l'examen initial des variables globales, nous pouvons envisager de créer une nouvelle variable à chaque fois que l'utilisateur appuie sur une touche. Ce ne serait pas très efficace. Nous devrions garder une trace de qui sait combien de variables lorsque l'utilisateur appuie sur les touches.

Pour améliorer cela, nous pouvons simplifier les choses pour n'avoir besoin que de quatre variables globales:

  • num1
  • num2
  • opérateur
  • total

Laissez-moi vous montrer comment cela fonctionne. Le premier nombre sur lequel l'utilisateur appuie est stocké dans la variable num1. L'opérateur (c'est-à-dire +, -, *, / ou entrée) est stocké dans l'opérateur. Le numéro suivant entré est stocké dans la variable 2. Une fois le deuxième opérateur entré, le total est calculé. Le total est stocké dans le total variable.

Une question logique serait: que faites-vous du troisième ou du quatrième nombre saisi par un utilisateur? La réponse simple est que nous réutilisons num1 et num2.

Une fois le total calculé, nous pouvons remplacer la valeur de num1 par le total. Nous aurions alors besoin de vider l'opérateur et les variables num2. Voyons cela avec notre deuxième exemple ci-dessus:

2 + 3 * 4 / 5 - 6 = -2// num1 is assigned value of 2// operator is assigned value of +// num2 is assigned value of 3// total is assigned the value of 5// num1 is assigned the value of 5// num2 and operator are cleared// operator is assigned value of *// num2 is assigned value of 4// total is assigned value of 20// num1 is assigned value of 20// num2 and operator are cleared// operator is stored value of /// num2 is assigned value of 5// total is assigned value of 4// num1 is assigned value of 4// num2 and operator are cleared// operator is assigned value of -// num2 is assigned value of 6// total is assigned value of -2// num1 is assigned value of -2// num2 and operator are cleared// operator is assigned value of =

Vous voyez maintenant que nous pouvons gérer toutes les combinaisons possibles de boutons pressés par l'utilisateur en utilisant ces 4 variables.

Obtenir la touche sur laquelle l'utilisateur a appuyé

Maintenant que nous avons parcouru notre logique, nous devons commencer le processus de gestion de la touche sur laquelle l'utilisateur a appuyé. Au bas de mon fichier index.html, je vais créer une balise de script qui contiendra mon code.

La première étape consiste à obtenir la touche sur laquelle un utilisateur a appuyé. Voici un extrait de mon fichier index.html qui montre tous les boutons sur une ligne de la calculatrice:

 1 2 3 + 

Chaque bouton, qu'il s'agisse d'un nombre ou d'un opérateur, est défini à l'aide d'un <élément; / button>. Nous pouvons l'utiliser pour attraper lorsqu'un utilisateur clique sur un bouton.

Dans jQuery, vous pouvez avoir une fonction de clic sur un bouton. Lorsqu'un bouton est cliqué, la fonction reçoit un objet événement. Le event.targetcontiendra le bouton sur lequel vous avez cliqué. Je peux obtenir la valeur du bouton en utilisant la innerHTMLpropriété.

Voici le code qui console.log le bouton sur lequel un utilisateur clique.

$(document).ready(function() { $('button').on('click', function(e) { console.log('e', e.target.innerHTML); });});

Maintenant, si vous testez le code, vous verrez la valeur de la touche sur laquelle vous appuyez. Cela fonctionne pour chaque bouton de la calculatrice.

Créer nos variables globales

Maintenant que nous avons la possibilité de déterminer quelle touche a été enfoncée, nous devons commencer à les stocker dans nos variables globales. Je vais créer mes quatre variables globales:

let num1 = '';let num2 = '';let operator = '';let total = '';

Bouton de gestion lorsque vous cliquez dessus

Lorsqu'un utilisateur clique sur un bouton, il clique sur un numéro ou un opérateur. Pour cette raison, je vais créer deux fonctions:

function handleNumber(num) { // code goes here}
function handleOperator(oper) { // code goes here}

Dans ma fonction de clic de bouton plus tôt, je peux remplacer le console.log par un appel à la fonction appropriée. Pour déterminer si un bouton ou un opérateur a été cliqué, je peux comparer e.target.innerHTMLpour voir s'il est compris entre 0 et 9. Si c'est le cas, l'utilisateur a cliqué sur un nombre. Sinon, l'utilisateur a cliqué sur un opérateur.

Voici ma première étape pour tester pour m'assurer que je peux dire sur quel bouton a été cliqué:

$(document).ready(function() { $('button').on('click', function(e) { let btn = e.target.innerHTML; if (btn >= '0' && btn <= '9') { console.log('number'); } else { console.log('operator'); } });});

Une fois que je suis convaincu que j'identifie chaque bouton cliqué, je peux remplacer le console.log par un appel à la fonction appropriée:

$(document).ready(function() { $('button').on('click', function(e) { let btn = e.target.innerHTML; if (btn >= '0' && btn <= '9') { handleNumber(btn); } else { handleOperator(btn); } });});

Gestion des touches numériques

Lorsqu'un utilisateur appuie sur un nombre, il sera affecté à la variable num1 ou num2. num1 reçoit une valeur de ''. Nous pouvons l'utiliser pour déterminer la variable à attribuer au numéro. Si num1 est vide, nous lui attribuons le numéro. Sinon, nous l'attribuons à num2.

Voici à quoi ressemble ma fonction handleNumber:

function handleNumber(num) { if (num1 === '') { num1 = num; } else { num2 = num; }}

Manipulation des boutons de l'opérateur

Notre fonction à gérer lorsqu'un bouton opérateur est enfoncé est très simple. Tout ce que nous devons faire est d'attribuer la valeur à notre variable d'opérateur.

Voici à quoi ressemble ma fonction handleOperator:

function handleOperator(oper) { operator = oper;}

Affichage des boutons

The next step is to actually display the button pressed to the user. If you check out the functionality of the calculator on your phone, you will notice it only displays numbers. If a user presses the + key, it is not displayed.

In our index.html file, we have a div with a class of 'calc-result-input' that displays our input. We will use this to display numbers to our users.

Since we have separated out our calculator activity into functions, we will create a function to display the button.

Here is what my displayButton function looks like:

function displayButton(btn) { $('.calc-result-input').text(btn);}

Since we only update the display when the user presses a number, we can call the displayButton function from within the handleNumber function.

Here is what my handleNumber function looks like now:

function handleNumber(num) { if (num1 === '') { num1 = num; } else { num2 = num; } displayButton(num);}

Handling totals

The next step is to calculate a total. A total is only calculated after a user presses an operator after having a value assigned to num1 and num2.

For example, if the user enters:

2 + 3 =

We want to sum num1 and num2 and display the total.

If the user enters:

2 - 1 =

We want to subtract num2 from num1 and display the total.

We create a handleTotal function to handle this. This function will create a total based on the operator pressed. Since there are multiple operators that can be pressed, we will use a case statement to handle them.

For simplicity’s sake, I am only going to show the code to handle when the user clicks the + operator button.

Here is the handleTotal function:

function handleTotal() { switch (operator) { case '+': total = +num1 + +num2; displayButton(total); break; }}

Converting String to Number for calculation

When we get the innerHTML of the button that is pressed, we get a string value. To sum two variables, they need to be converted to a number. There is a shorthand notation in JavaScript that will convert a string to a number by prefixing the variable with a + sign. You can see where I am doing this conversion on this line:

total = +num1 + +num2;

When to call handleTotal function

Now that we have a function to calculate the total, we need to call it at the appropriate time. We only calculate total after a user enters their second operator.

To handle this we will need to make a change to our existing handleOperator function. Previously, we were assigning the operator variable the value of the operator button the user clicked. Now we need to know if this is the first operator the user has clicked or not. We don’t calculate a total when the user clicks on the first operator.

To account for this, we can check to see if the operator variable has a value of ''. If so, this is the first operator. If operator has a value, then we will want to calculate a total.

Here is what the handleOperator() function looks like now:

function handleOperator(oper) { if (operator === '') { operator = oper; } else { handleTotal(); operator = oper; } }

Moving Script to app.js file

Currently our HTML and JavaScript code are all contained in the index.html file. We want to split out the logic into a separate file. I create a new file called app.js.

I copy the entire contents of the pt> tag into this file. I delete the opening &lt;script> tag and closing tag in my index.html file.

The last thing we need to do is to tell our index.html file where our scripts are. We do this by adding this line below the pt> tag that loads jQuery at the bottom of the index.html file:

Final Files

I now have these three files:

  • index.html
  • app.js
  • style.css

The index.html file is used to display the calculator to the user on the web page.

The style.css is used to style my calculator. Please review my previous article that talks about using the CSS border-radius property to style the calculator.

The app.js file contains the logic behind the calculator.

Here is what my app.js file looks like:

let num1 = '';let num2 = '';let operator = '';let total = '';
$(document).ready(function() { $('button').on('click', function(e) { let btn = e.target.innerHTML; if (btn >= '0' && btn <= '9') { handleNumber(btn); } else { handleOperator(btn); } });});
function handleNumber(num) { if (num1 === '') { num1 = num; } else { num2 = num; } displayButton(num);}
function handleOperator(oper) { if (operator === '') { operator = oper; } else { handleTotal(); operator = oper; }}
function handleTotal() { switch (operator) { case '+': total = +num1 + +num2; displayButton(total); break; case '-': total = +num1 - +num2; displayButton(total); break; case '/': total = +num1 / +num2; displayButton(total); break; case 'X': total = +num1 * +num2; displayButton(total); break; } updateVariables();}
function displayButton(btn) { $('.calc-result-input').text(btn);}
function updateVariables() { num1 = total; num2 = '';}

Summary

Our calculator works, but only if the user clicks the + operator. You can add to the functionality in the handleTotal function to account for all operators. I have all the functionality in my repo which you can find here.

Further Readings

Breadth First Search in JavaScript — The two most common methods of searching a graph or a tree are depth first search and breadth first search. This story shows you how to use a breadth first search of a graph or a tree.

Instantiation Patterns in JavaScript — Instantiation patterns are ways to create something in JavaScript. JavaScript provides four different methods to create objects. Learn how to create all four in this article.

Using Node.js & Express.js to save data to MongoDB Database — The MEAN stack is used to describe development using MongoDB, Express.js, Angular.jS and Node.js. In this tutorial I will show you how to use Express.js, Node.js and MongoDB.js. We will be creating a very simple Node application, that will allow users to input data that they want to store in a MongoDB database.

Original text