Calcolatrice con jQuery e Math.js

Come usare JavaScript e le sue librerie per realizzare una calcolatrice web. Logo tratto da Esempi per Webmaster di Francesco D'Agostino.

Categoria: JavaScript | Livello: Beginner | Tags: math.js, jQuery, forms, css, matematica. Scritto da il

Abstract

Costruire una calcolatrice con JavaScript è un gioco da ragazzi, soprattutto se si usano le librerie jQuery e Math.js. In questa guida trovi le istruzioni da seguire passo-passo e il codice da scaricare.

HTML: l'interfaccia della calcolatrice è un form

Per costruire la nostra calcolatrice partiamo dall'interfaccia utente: quali elementi deve includere? Una calcolatrice molto semplice deve avere almeno i pulsanti per i dieci numeri e le quattro operazioni aritmetiche, la virgola per i decimali, il classico Cancel per azzerare il display e ... il display, appunto. Dimenticato qualcosa? Sì, il segno di uguale. Per adesso può bastare. Questi dunque i pulsanti che ci servono:

0 1 2 3 4 5 6 7 8 9 / * - + . C =

Fino a qualche anno fa avremmo dovuto faticare non poco per creare questi elementi in una pagina Html, senza considerare che per renderli esteticamente gradevoli avremmo dovuto creare immagini con un programma di grafica. Ma oggi è tutto più semplice grazie alla forula HTML5 + CSS3, che permette di creare elementi UI direttamente in html per poi personalizzarne la grafica con i fogli di stile, il tutto con la potenza e la flessibilità che derivano dalle sempre più numerose librerie JavaScript disponibili.

Per i pulsanti e il display della calcolatrice usiamo due elementi dei web forms HTML5: input type text e input type submit. Con il primo quindi realizziamo il display delle formule, mentre il secondo lo usiamo per tutti i pulsanti tranne che per l'uguale, per cui usiamo un elemento button.



                    
JavaScript Calculator

Gli elementi sono disposti sulla UI mediante un layout a righe ottenuto tramite div con la classe bloc, che via CSS applica un display: block, mentre i sedici pulsanti (tutti tranne l'uguale) sono suddivisi in righe da quattro e quindi sono inline in ogni riga, come è spiegato di seguito nel paragrafo dedicato agli stili CSS.

Il nostro display include un id="display" che ci servirà come selettore ID nello script. L'attributo name dei pulsanti tornerà invece utile per la selezione sia nello script sia nel foglio di stile. Infine useremo la classe calcola come selettore di classe per intercettare l'evento clic sul pulsante uguale.

La calcolatrice è perfettamente funzionante e permette di scrivere nel display direttamente con la tastiera oltre che usando i pulsanti verdi. La libreria JavaScript scelta permette di calcolare formule ben più complesse di quelle che si ottengono dalle quattro operazioni aritmetiche (es.: accetta le parentesi e le funzioni trigonometriche).

In questa versione della calcolatrice non abbiamo incluso alcuna validazione dell'input type text: ciò significa nel display possono essere inserite formule non valide.
(Prossimamente: intregriamo il codice per migliorare questo aspetto.)

JavaScript: jQuery legge i dati, Math.js fa di conto

Il codice JavaScript che permette alla calcolatrice di funzionare è piuttosto ripetitivo e potrebbe forse essere riscritto in maniera più compatta, ma in questa forma è leggibile e mette in risalto le possibilità offerte dai selettori.

Per lo script sono state usate le librerie jQuery e Math.js, sebbene nessuna delle due fosse necessaria per realizzare una calcolatrice elementare. Attenzione alle coincidenze: Math è anche il nome di un oggetto JavaScript per fare matematica. A mio parere jQuery è talmente diffusa e facile da usare che vale spesso la pena di integrarla nella pagina, considerato pure che l'utente quasi sempre l'ha già scaricata avendo navigato con il browser altre pagine che la includono.

Math.js è una libreria che estende le capacità matematiche di JavaScript, consentendo tra le altre cose di valutare espressioni con grande semplicità tramite math.eval(), da non confondere con la funzione eval() nativa di JavaScript.



                    

CSS: calcolatrice flat design

Come abbiamo detto nel paragrafo sull'HTML, con poche righe di CSS possiamo donare alla calcolatrice uno stile flat design, per il quale teniamo lo sfondo bianco e usiamo due soli colori pastello per tutti gli elementi: verde (#27ae60) e blu scuro (#2c3e50). Le dimensioni sono fisse - ricordiamo che pagina e form non sono la stessa cosa, se la pagina è responsive non significa che lo sia anche il form - e quindi la nostra calcolatrice non è responsive, ma ciò non costituisce un problema viste le dimensioni ridotte (si vede anche a 320px).


/* Foglio di stile per la calcolatrice */
        .calcolatrice {
            background: none;
            color: #2c3e50;
            font-size: 10pt;
            font-weight: bold;
            border: #27ae60 solid 4px;
            border-radius: 10px;
            padding: 20px;
            width: 225px;
        }
        .calcolatrice span {
            margin-left: 2px;
        }

        .calc {
            background-color: #27ae60;
            color: #2c3e50;
            font-size: 24pt;
            border: none;
            margin: 4px 2px;
            height: 50px;
        }

        .display-calc {
            background: none;
            color: #2c3e50;
            font-size: 24pt;
            border: #27ae60 solid 4px;
            margin: 4px 2px;
            height: 42px;
            width: 213px;
        }

        input[type="submit"].calc {
            display: inline-block;
            width: 50px;
        }

        .calcola {
            width: 221px;
        }