Kako programirati kalkulator s jQueryjem

Prethodno sam vam pokazao kako koristiti svojstvo CSS border-radius da biste stvorili sljedeći kalkulator. Sada ću vam pokazati kako koristiti jQuery za implementaciju funkcionalnosti kalkulatora.

Dodavanje jQueryja

U ovom ćemo projektu koristiti jQuery za odgovaranje na događaje kada korisnik klikne na gumb. U našu aplikaciju moramo dodati knjižnicu jQuery. Za dodavanje jQueryja koristit ću cdnjs CDN knjižnicu.

Na dnu moje datoteke index.html, dodati ću sljedeću oznaku skripte:

Rukovanje operatorom u odnosu na brojčane tipke

Prije pisanja koda, odlučio sam razmisliti kako ću se nositi s funkcijama iza kalkulatora. Gumbe na kalkulatoru dijelim u dvije skupine: operator i broj .

Brojčani gumb odgovarao bi brojevima 0–9. Svi ostali gumbi su operateri.

Globalne varijable za naše djelovanje

Sljedeći je korak utvrditi kako će nam globalne varijable trebati. Globalne varijable sadržavat će funkcionalnost našeg kalkulatora. Na primjer, korisnik može unijeti sljedeći slijed:

2 + 3 = 5

Isto tako, korisnik može unijeti ovaj mnogo duži niz:

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

Kad u početku razmatramo globalne varijable, mogli bismo razmotriti stvaranje nove varijable svaki put kada korisnik pritisne tipku. To ne bi bilo vrlo učinkovito. Morali bismo pratiti tko zna koliko varijabli dok korisnik pritiska tipke.

Da bismo to poboljšali, možemo pojednostaviti stvari tako da trebaju samo četiri globalne varijable:

  • num1
  • num2
  • operater
  • ukupno

Dopustite mi da vam pokažem kako ovo funkcionira. Prvi broj koji korisnik pritisne pohranjuje se u varijablu num1. Operator (tj. +, -, *, / ili enter) pohranjen je u operateru. Sljedeći uneseni broj pohranjuje se u varijablu 2. Kad se unese drugi operator, izračunava se zbroj. Ukupno se pohranjuje u varijablu total.

Logično pitanje bilo bi što radite s trećim ili četvrtim brojem koji korisnik unese? Jednostavan je odgovor da ponovno koristimo num1 i num2.

Nakon što se izračuna ukupni iznos, vrijednost u num1 možemo zamijeniti ukupnim. Tada bismo trebali isprazniti operator i num2 varijable. Krenimo kroz ovo s našim drugim primjerom odozgo:

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 =

Sada vidite da se možemo nositi sa svakom mogućom kombinacijom gumba koje je korisnik pritisnuo pomoću ove 4 varijable.

Dobivanje tipke koju je korisnik pritisnuo

Sad kad smo prošli kroz našu logiku, moramo započeti postupak rukovanja tipkom koju je korisnik pritisnuo. Na dnu moje datoteke index.html stvorit ću oznaku skripte koja će sadržavati moj kôd.

Prvi je korak dobiti tipku koju je korisnik pritisnuo. Evo isječka moje datoteke index.html koji prikazuje sve gumbe u jednom redu kalkulatora:

 1 2 3 + 

Svaki se gumb, bilo da je to broj ili operator, definira pomoću <elementa; / button>. To možemo koristiti za hvatanje kada korisnik klikne gumb.

U jQueryju možete imati funkciju klika na gumb. Kada se klikne gumb, funkcija se prenosi objektom događaja. Oporuka event.targetće sadržavati gumb na koji je kliknuto. Vrijednost gumba mogu dobiti pomoću innerHTMLsvojstva.

Ovdje je kod koji će console.log gumb koji korisnik klikne.

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

Sada ako testirate kôd, vidjet ćete vrijednost tipke koju pritisnete. To radi za svaki gumb u kalkulatoru.

Stvaranje naših globalnih varijabli

Sad kad imamo mogućnost utvrditi koja je tipka pritisnuta, moramo ih početi spremati u naše globalne varijable. Stvorit ću svoje četiri globalne varijable:

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

Gumb za rukovanje kad se klikne

Kad korisnik klikne gumb, kliknut će broj ili operatora. Iz tog ću razloga stvoriti dvije funkcije:

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

U svojoj funkciji klika na gumb ranije mogu console.log zamijeniti pozivom odgovarajuće funkcije. Da bih utvrdio je li kliknut gumb ili operator, mogu usporediti e.target.innerHTMLda vidim je li između 0 i 9. Ako jest, korisnik je kliknuo broj. Ako nije, korisnik je kliknuo operatora.

Evo mog početnog koraka za testiranje kako bih bio siguran da li znam na koji je gumb pritisnut:

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

Nakon što se uvjerim da prepoznajem svaki kliknuti gumb, mogu zamijeniti console.log pozivom odgovarajuće funkcije:

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

Rukovanje brojčanim tipkama

Kad korisnik pritisne broj, dodijelit će mu se varijabla num1 ili num2. num1 je dodijeljena vrijednost ''. To možemo koristiti da odredimo kojoj varijabli dodijeliti broj. Ako je num1 prazan, dodijelit ćemo mu broj. U suprotnom, dodjeljujemo ga num2.

Evo kako izgleda moja funkcija handleNumber:

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

Rukovanje upravljačkim tipkama

Naša je funkcija rukovanja kada se pritisne upravljački gumb vrlo jednostavna. Sve što trebamo učiniti je dodijeliti vrijednost našoj varijabli operatora.

Evo kako izgleda moja funkcija handleOperator:

function handleOperator(oper) { operator = oper;}

Prikaz gumba

Sljedeći je korak zapravo prikaz gumba pritisnutog na korisnika. Ako provjerite funkcionalnost kalkulatora na telefonu, primijetit ćete da prikazuje samo brojeve. Ako korisnik pritisne +tipku, ona se neće prikazati.

U našoj datoteci index.html imamo div s klasom 'calc-result-input'koja prikazuje naš unos. To ćemo koristiti za prikaz brojeva našim korisnicima.

Budući da smo našu kalkulacijsku aktivnost razdvojili na funkcije, stvorit ćemo funkciju za prikaz gumba.

Evo kako izgleda moja funkcija displayButton:

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

Budući da zaslon ažuriramo samo kada korisnik pritisne broj, displayButtonfunkciju možemo pozvati unutar handleNumberfunkcije.

Evo kako sada izgleda moja funkcija handleNumber:

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

Rukovanje ukupnim brojevima

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.