Anterior, v-am arătat cum să utilizați Proprietate 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.

Cum se programeaza un calculator cu jQuery
Calculator folosind caracteristica de rază a chenarului CSS

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:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Manevrarea operatorului vs. butoanele numerice

Înainte de a-mi scrie codul, am decis să fac o brainstorming cu privire la modul în care aș gestiona funcționalitatea din spatele calculatorului. Împart butoanele calculatorului în două grupuri: 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:

<div class="flex-row">    <button class="calc-btn">1</button>    <button class="calc-btn">2</button>    <button class="calc-btn">3</button>    <button class="calc-btn">+</button></div>

Fiecare buton, indiferent dacă este un număr sau un operator, este definit folosind un <button><; / button> element. 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.target va conține butonul pe care s-a făcut clic. Pot obține valoarea butonului folosind innerHTML proprietate.

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

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

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.innerHTML pentru 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);        }    });});

Manipularea 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;    }}

Manevrarea 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

Următorul pas este afișarea efectivă a butonului apăsat utilizatorului. Dacă verificați funcționalitatea calculatorului de pe telefon, veți observa că acesta afișează doar numere. Dacă un utilizator apasă pe + tasta, nu este afișată.

În fișierul index.html avem un div cu o clasă de 'calc-result-input' care afișează informațiile noastre. Vom folosi acest lucru pentru a afișa numerele utilizatorilor noștri.

Deoarece ne-am separat activitatea calculatorului în funcții, vom crea o funcție pentru a afișa butonul.

Iată cum arată funcția mea displayButton:

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

Deoarece actualizăm afișajul doar atunci când utilizatorul apasă un număr, putem apela displayButton funcția din interiorul handleNumber funcţie.

Iată cum arată funcția mea handleNumber acum:

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

Manipularea totalurilor

Următorul pas este calcularea unui total. Un total este calculat numai după ce un utilizator apasă un operator după ce i se atribuie o valoare num1 și num2.

De exemplu, dacă utilizatorul introduce:

2 + 3 =

Vrem să însumăm num1 și num2 și să afișăm totalul.

Dacă utilizatorul intră:

2 - 1 =

Vrem să scădem num2 din num1 și afișăm totalul.

Creăm un handleTotal funcție pentru a gestiona acest lucru. Această funcție va crea un total pe baza operatorului apăsat. Deoarece există mai mulți operatori care pot fi apăsați, vom folosi o declarație de caz pentru a le gestiona.

Pentru simplitate, voi arăta codul de gestionat numai atunci când utilizatorul face clic pe + butonul operator.

Iată funcția handleTotal:

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

Conversia șirului în număr pentru calcul

Când primim innerHTML din butonul care este apăsat, obținem o valoare șir. Pentru a rezuma două variabile, acestea trebuie convertite într-un număr. Există o notație abreviută în JavaScript care va converti un șir într-un număr prin prefixarea variabilei cu un + semn. Puteți vedea unde fac această conversie pe această linie:

total = +num1 + +num2;

Când să apelați funcția handleTotal

Acum că avem o funcție pentru a calcula totalul, trebuie să o apelăm la momentul potrivit. Calculăm totalul după ce un utilizator introduce al doilea operator.

Pentru a rezolva acest lucru, va trebui să facem o schimbare la actualul nostru handleOperator funcţie. Anterior, atribuiam variabilei operator valoarea butonului operator pe care făcea clic utilizatorul. Acum trebuie să știm dacă acesta este primul operator pe care utilizatorul a făcut clic sau nu. Nu calculăm un total atunci când utilizatorul dă clic pe primul operator.

Pentru a explica acest lucru, putem verifica dacă variabila operator are o valoare de ''. Dacă da, acesta este primul operator. Dacă operatorul are o valoare, atunci vom dori să calculăm un total.

Iată cum arată acum funcția handleOperator ():

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

Mutarea scriptului în fișierul app.js

În prezent, codul nostru HTML și JavaScript sunt toate conținute în fișierul index.html. Vrem să împărțim logica într-un fișier separat. Creez un nou fișier numit app.js.

Copiez întregul conținut al fișierului <script> etichetați în acest fișier. Șterg opening &lt; script> tag and closing în fișierul index.html.

Ultimul lucru pe care trebuie să-l facem este să spunem fișierului index.html unde sunt scripturile noastre. Facem acest lucru adăugând această linie sub <script> tag care încarcă jQuery în partea de jos a fișierului index.html:

<script src="https://www.freecodecamp.org/news/programming-a-calculator-8263966a8019/app.js"></script>

Fișiere finale

Acum am aceste trei fișiere:

  • index.html
  • app.js
  • stil.css

index.html fișier este utilizat pentru a afișa calculatorul utilizatorului pe pagina web.

stil.css este folosit pentru a-mi stiliza calculatorul. Vă rugăm să revedeți articolul meu anterior care vorbește despre folosind proprietatea CSS border-radius pentru a stiliza calculatorul.

app.js fișierul conține logica din spatele calculatorului.

Iată cum arată fișierul meu app.js:

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 = '';}

rezumat

Calculatorul nostru funcționează, dar numai dacă utilizatorul dă clic pe + operator. Puteți adăuga la funcționalitatea din funcția handleTotal pentru a contabiliza toți operatorii. Am toate funcționalitățile în repo-ul meu pe care îl puteți găsi aici.

Lecturi suplimentare

Lățimea întâi căutare în JavaScript – Cele mai comune două metode de căutare a unui grafic sau a unui copac sunt căutarea în adâncime și căutarea în primul rând. Această poveste vă arată cum să utilizați prima lățime de căutare a unui grafic sau a unui copac.

Modele de instanțiere în JavaScript – Modelele de instanțiere sunt modalități de a crea ceva în JavaScript. JavaScript oferă patru metode diferite pentru a crea obiecte. Aflați cum să creați toate cele patru în acest articol.

Utilizarea Node.js și Express.js pentru a salva date în baza de date MongoDB – Stiva MEAN este utilizată pentru a descrie dezvoltarea folosind MongoDB, Express.js, Angular.jS și Node.js. În acest tutorial vă voi arăta cum să utilizați Express.js, Node.js și MongoDB.js. Vom crea o aplicație Node foarte simplă, care va permite utilizatorilor să introducă date pe care doresc să le stocheze într-o bază de date MongoDB.