Hur man programmerar en miniräknare med jQuery

Programmering

Tidigare visade jag dig hur du använder CSS-gränsradieegenskap för att skapa följande kalkylator. Nu ska jag visa dig hur du använder jQuery för att implementera miniräknarens funktionalitet.

Lägger till jQuery

Vi kommer att använda jQuery i det här projektet för att svara på händelser när en användare klickar på en knapp. Vi måste lägga till jQuery-biblioteket i vår applikation. Jag kommer att använda cdnjs CDN-biblioteket för att lägga till jQuery.

Längst ner i min index.html-fil lägger jag till följande skripttagg:

Hantering av operatör mot sifferknappar

Innan jag skrev min kod bestämde jag mig för att brainstorma hur jag skulle hantera funktionaliteten bakom miniräknaren. Jag delar upp knapparna på miniräknaren i två grupper: operatör och nummer .

En sifferknapp motsvarar siffrorna 0–9. Alla andra knappar är operatörer.

Globala variabler för vår verksamhet

Nästa steg är att bestämma hur globala variabler vi behöver. De globala variablerna kommer att innehålla funktionerna i vår kalkylator. Till exempel kan en användare ange följande sekvens:

2 + 3 = 5

På samma sätt kan en användare ange denna mycket längre sekvens:

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

När vi initialt överväger globala variabler kan vi överväga att skapa en ny variabel varje gång användaren trycker på en tangent. Detta skulle inte vara särskilt effektivt. Vi måste hålla reda på vem som vet hur många variabler som användaren trycker på knapparna.

För att förbättra detta kan vi förenkla saker som bara behöver fyra globala variabler:

  • num1
  • num2
  • operatör
  • total

Låt mig visa dig hur detta fungerar. Det första numret som användaren trycker på lagras i variabelnumret 1. Operatören (dvs. +, -, *, / eller enter) lagras i operatören. Nästa nummer som lagras lagras i variabel 2. När den andra operatören har matats in beräknas summan. Totalen lagras i den variabla summan.

En logisk fråga skulle vara vad gör du med det tredje eller fjärde numret som en användare anger? Det enkla svaret är att vi återanvänder num1 och num2.

När summan har beräknats kan vi ersätta värdet i num1 med summan. Vi skulle då behöva tömma variablerna operator och num2. Låt oss gå igenom detta med vårt andra exempel ovanifrån:

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 att vi kan hantera alla möjliga kombinationer av knappar som användaren trycker på med hjälp av dessa fyra variabler.

Att få nyckeln användaren tryckt på

Nu när vi har gått igenom vår logik, måste vi starta processen för att hantera den tangent som användaren tryckte på. Längst ner i min index.html-fil skapar jag en skripttagg som håller min kod.

Det första steget är att få nyckeln som en användare tryckt på. Här är ett utdrag av min index.html-fil som visar alla knapparna på en rad i miniräknaren:

 1 2 3 +

Varje knapp, oavsett om det är ett nummer eller en operatör, definieras med ett <; / knapp> -element. Vi kan använda detta för att fånga när en användare klickar på en knapp.

I jQuery kan du ha en knappklickfunktion. När du klickar på en knapp skickas funktionen till ett händelseobjekt. Den event.targetinnehåller knappen som du klickade på. Jag kan få värdet på knappen genom att använda innerHTMLegenskapen.

Här är koden som kommer att konsolera. Den knapp som en användare klickar på.

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

Om du nu testar koden ser du värdet på den tangent du trycker på. Detta fungerar för varje knapp i räknaren.

Skapa våra globala variabler

Nu när vi har möjlighet att avgöra vilken tangent som trycktes ned, måste vi börja lagra dem i våra globala variabler. Jag ska skapa mina fyra globala variabler:

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

Hanteringsknapp när du klickar på den

När en användare klickar på en knapp kommer de att klicka på ett nummer eller en operatör. Av den anledningen ska jag skapa två funktioner:

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

I min knappklickfunktion tidigare kan jag ersätta console.log med ett samtal till lämplig funktion. För att avgöra om man klickade på en knapp eller operatör kan jag jämföra för e.target.innerHTMLatt se om det är mellan 0 och 9. Om det är så klickade användaren på ett nummer. Om inte, klickade användaren på en operatör.

Här är mitt första steg för att testa för att se till att jag kan se vilken knapp som klickades:

$(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 jag väl är nöjd med att jag identifierar varje knapp som jag klickar på kan jag ersätta console.log med ett samtal till lämplig funktion:

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

Hantering av sifferknappar

När en användare trycker på ett nummer tilldelas det antingen num1 eller num2 variabel. num1 tilldelas värdet på ''. Vi kan använda detta för att bestämma vilken variabel som ska tilldelas numret. Om num1 är tomt tilldelar vi numret till det. Annars tilldelar vi den till num2.

Så här ser handtalsfunktionen ut:

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

Hantering av operatörsknappar

Vår funktion att hantera när man trycker på en operatörsknapp är mycket enkel. Allt vi behöver göra är att tilldela värdet till vår operatörsvariabel.

Här är hur min handleOperator-funktion ser ut:

function handleOperator(oper) { operator = oper;}

Visar knappar

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.