Sådan programmeres en lommeregner med jQuery

Tidligere viste jeg dig, hvordan du bruger CSS border-radius-egenskab til at oprette følgende lommeregner. Nu vil jeg vise dig, hvordan du bruger jQuery til at implementere lommeregnerens funktionalitet.

Tilføjer jQuery

Vi bruger jQuery i dette projekt til at svare på begivenheder, når en bruger klikker på en knap. Vi er nødt til at tilføje jQuery-biblioteket til vores applikation. Jeg vil bruge cdnjs CDN-biblioteket til at tilføje jQuery.

Nederst i min index.html-fil vil jeg tilføje følgende script-tag:

Håndtering af operatør vs nummerknapper

Før jeg skrev min kode, besluttede jeg at brainstorme, hvordan jeg ville håndtere funktionaliteten bag lommeregneren. Jeg deler knapperne på lommeregneren i to grupper: operator og nummer .

En talknap svarer til tallene 0–9. Alle andre knapper er operatører.

Globale variabler til vores drift

Det næste trin er at bestemme, hvorledes globale variabler vi har brug for. De globale variabler holder funktionaliteten i vores lommeregner. For eksempel kan en bruger indtaste følgende rækkefølge:

2 + 3 = 5

Ligeledes kan en bruger indtaste denne meget længere sekvens:

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

Når vi i første omgang overvejer globale variabler, kan vi overveje at oprette en ny variabel hver gang brugeren trykker på en tast. Dette ville ikke være særlig effektivt. Vi bliver nødt til at holde styr på, hvem der ved, hvor mange variabler som brugeren trykker på tasterne.

For at forbedre dette kan vi forenkle tingene, så de kun har brug for fire globale variabler:

  • num1
  • num2
  • operatør
  • Total

Lad mig vise dig, hvordan dette fungerer. Det første nummer, som brugeren trykker på, gemmes i variabel nummer 1. Operatøren (dvs. +, -, *, / eller enter) er gemt i operatøren. Det næste indtastede nummer gemmes i variabel 2. Når den anden operator er indtastet, beregnes det samlede antal. Totalet er gemt i den variable total.

Et logisk spørgsmål ville være, hvad gør du med det tredje eller fjerde nummer, som en bruger indtaster? Det enkle svar er, at vi genbruger num1 og num2.

Når summen er beregnet, kan vi erstatte værdien i num1 med totalen. Vi bliver derefter nødt til at tømme variablerne operator og num2. Lad os gå igennem dette med vores andet eksempel ovenfra:

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 =

Nu ser du, at vi kan håndtere alle mulige kombinationer af knapper, der trykkes på af brugeren ved hjælp af disse 4 variabler.

At få den tast, som brugeren trykkede på

Nu hvor vi har gennemgået vores logik, er vi nødt til at starte processen med at håndtere den tast, som brugeren trykkede på. Nederst i min index.html-fil opretter jeg et script-tag, der holder min kode.

Det første trin er at få den nøgle, som en bruger har trykket på. Her er et uddrag af min index.html-fil, der viser alle knapperne på den ene række i regnemaskinen:

 1 2 3 + 

Hver knap, uanset om det er et tal eller en operator, defineres ved hjælp af et <; / button> element. Vi kan bruge dette til at fange, når en bruger klikker på en knap.

I jQuery kan du have en knap-klikfunktion. Når der klikkes på en knap, sendes funktionen til et begivenhedsobjekt. Den event.targetindeholder knappen, der blev klikket på. Jeg kan få værdien af ​​knappen ved at bruge innerHTMLejendommen.

Her er koden, der vil konsolere. Den knap, som en bruger klikker på.

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

Hvis du nu tester koden, vil du se værdien på den tast, du trykker på. Dette fungerer for hver knap i regnemaskinen.

Oprettelse af vores globale variabler

Nu hvor vi har mulighed for at bestemme, hvilken tast der blev trykket på, skal vi begynde at gemme dem i vores globale variabler. Jeg skal oprette mine fire globale variabler:

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

Håndteringsknap, når der klikkes på

Når en bruger klikker på en knap, klikker de på et nummer eller en operatør. Af den grund vil jeg oprette to funktioner:

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

I min knap-klikfunktion tidligere kan jeg erstatte console.log med et opkald til den relevante funktion. For at afgøre, om der blev klikket på en knap eller operatør, kan jeg sammenligne for e.target.innerHTMLat se, om det er mellem 0 og 9. Hvis det er, klikkede brugeren på et tal. Hvis ikke, klikkede brugeren på en operatør.

Her er mit første trin til at teste for at sikre, at jeg kan fortælle, hvilken knap der blev klikket på:

$(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'); } });});

Når jeg er tilfreds med, at jeg identificerer hver knap, der er klikket på, kan jeg udskifte console.log med et opkald til den relevante funktion:

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

Håndtering af nummerknapper

Når en bruger trykker på et tal, tildeles det enten num1 eller num2 variabel. num1 er tildelt værdien af ''. Vi kan bruge dette til at bestemme, hvilken variabel der skal tildeles nummeret. Hvis num1 er tom, tildeler vi nummeret til det. Ellers tildeler vi det til num2.

Sådan ser min handleNumber-funktion ud:

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

Håndtering af operatørknapper

Vores funktion, der skal håndteres, når der trykkes på en operatorknap, er meget enkel. Alt hvad vi skal gøre er at tildele værdien til vores operatørvariabel.

Sådan ser min handleOperator-funktion ud:

function handleOperator(oper) { operator = oper;}

Visning af knapper

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 op ening &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.