Cum se programează un calculator cu jQuery

Anterior, v-am arătat cum să utilizați proprietatea CSS border-radius pentru a crea următorul calculator. Acum vă voi arăta cum să utilizați jQuery pentru a implementa funcționalitatea calculatorului.

Adăugarea jQuery

Vom folosi jQuery în acest proiect pentru a răspunde la evenimente atunci când un utilizator face clic pe un buton. Trebuie să adăugăm biblioteca jQuery la aplicația noastră. Voi folosi biblioteca CDN CDS pentru a adăuga jQuery.

În partea de jos a fișierului index.html, voi adăuga următoarea etichetă de script:

Manevrarea operatorului vs. butoanele numerice

Înainte de a-mi scrie codul, am decis să fac brainstorming cu privire la modul în care aș gestiona funcționalitatea din spatele calculatorului. Împart butoanele calculatorului în două grupe: operator și număr .

Un buton numeric ar corespunde numerelor 0-9. Toate celelalte butoane sunt operatori.

Variabile globale pentru funcționarea noastră

Următorul pas este de a determina cum ar putea fi necesare variabilele globale. Variabilele globale vor păstra funcționalitatea calculatorului nostru. De exemplu, un utilizator poate introduce următoarea secvență:

2 + 3 = 5

La fel, un utilizator poate introduce această secvență mult mai lungă:

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

Când luăm în considerare variabilele globale inițial, ne-am putea gândi să creăm o nouă variabilă de fiecare dată când utilizatorul apasă o tastă. Acest lucru nu ar fi foarte eficient. Ar trebui să urmărim cine știe câte variabile pe măsură ce utilizatorul apasă tastele.

Pentru a îmbunătăți acest lucru, putem simplifica lucrurile pentru a avea nevoie doar de patru variabile globale:

  • num1
  • num2
  • operator
  • total

Permiteți-mi să vă arăt cum funcționează acest lucru. Primul număr apăsat de utilizator este stocat în variabila num1. Operatorul (adică +, -, *, / sau enter) este stocat în operator. Următorul număr introdus este stocat în variabila 2. Odată introdus al doilea operator, se calculează totalul. Totalul este stocat în variabila total.

O întrebare logică ar fi ce faci cu al treilea sau al patrulea număr pe care îl introduce un utilizator? Răspunsul simplu este că reutilizăm num1 și num2.

Odată calculat totalul, putem înlocui valoarea în num1 cu totalul. Ar trebui apoi să golim variabilele operator și num2. Să parcurgem acest lucru cu al doilea exemplu de mai sus:

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 =

Acum vedeți că putem gestiona orice combinație posibilă de butoane apăsate de utilizator folosind aceste 4 variabile.

Obținerea tastei pe care utilizatorul o apasă

Acum că am parcurs logica noastră, trebuie să începem procesul de manipulare a tastei pe care a apăsat-o utilizatorul. În partea de jos a fișierului index.html, voi crea o etichetă de script care va conține codul meu.

Primul pas este să obțineți tasta apăsată de un utilizator. Iată un fragment din fișierul meu index.html care arată toate butoanele de pe un rând al calculatorului:

 1 2 3 + 

Fiecare buton, indiferent dacă este un număr sau un operator, este definit folosind un <element; / button>. Putem folosi acest lucru pentru a prinde când un utilizator face clic pe un buton.

În jQuery, puteți avea o funcție de clic pe buton. Când se face clic pe un buton, funcției i se transmite un obiect eveniment. event.targetVa conține butonul care a făcut clic. Pot obține valoarea butonului folosind innerHTMLproprietatea.

Iată codul care va consola butonul pe care un utilizator face clic.

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

Acum, dacă testați codul, veți vedea valoarea tastei pe care o apăsați. Acest lucru funcționează pentru fiecare buton din calculator.

Crearea variabilelor noastre globale

Acum că avem capacitatea de a determina ce tastă a fost apăsată, trebuie să începem să le stocăm în variabilele noastre globale. Voi crea cele patru variabile globale ale mele:

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

Butonul de manipulare la clic

Când un utilizator face clic pe un buton, acesta va face clic pe un număr sau pe un operator. Din acest motiv, voi crea două funcții:

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

În funcția mea de clic pe buton mai devreme, pot înlocui console.log cu un apel către funcția corespunzătoare. Pentru a determina dacă s-a făcut clic pe un buton sau un operator, pot compara e.target.innerHTMLpentru a vedea dacă este între 0 și 9. Dacă este, utilizatorul a dat clic pe un număr. Dacă nu, utilizatorul a făcut clic pe un operator.

Iată pasul meu inițial de testat pentru a mă asigura că pot spune pe ce buton a fost dat clic:

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

Odată ce sunt mulțumit că identific fiecare buton făcut clic, pot înlocui console.log cu un apel către funcția corespunzătoare:

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

Manevrarea butoanelor numerice

Când un utilizator apasă un număr, acesta va fi atribuit fie variabilei num1, fie num2. num1 i se atribuie valoarea de ''. Putem folosi acest lucru pentru a determina ce variabilă să atribuim numărul. Dacă num1 este gol, atunci îi atribuim numărul. În caz contrar, îl atribuim num2.

Iată cum arată funcția mea handleNumber:

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

Manipularea butoanelor operatorului

Funcția noastră de gestionat atunci când este apăsat un buton operator este foarte simplă. Tot ce trebuie să facem este să atribuim valoarea variabilei operatorului nostru.

Iată cum arată funcția mea handleOperator:

function handleOperator(oper) { operator = oper;}

Afișarea butoanelor

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.