In questa guida imparerai a creare e programmare una calcolatrice matematica virtuale utilizzando il linguaggio di programmazione web JavaScript. La guida verrà suddivisa in differenti passaggi tra cui: La creazione della struttura HTML del calcolatore, Gli script JS per il funzionamento dei tasti e l’esecuzione dei calcoli, la definizione dello stile con regole CSS.
Qui di seguito potrai trovare il codice per la realizzazione di una calcolatrice in JavaScript, per eseguire calcoli matematici semplici come quelli che potresti eseguire con un classico calcolatore fisico. Come ogni altro articolo della categoria “Funzioni HTML&JS“, anche qui si faranno dei riferimenti diretti alla programmazione con i linguaggi del web.
Per proseguire la lettura e comprendere il testo e codici descritti nella pagina, si consiglia dunque di possedere delle conoscenze di base di HTML, CSS e JavaScript anche se non obbligatorio, in quanto ogni passaggio è spiegato dettagliatamente e rivolto ai principianti.
Puoi seguire i nostri corsi gratuiti di HTML e CSS, oppure quello JavaScript per migliorare le tue conoscenze.
Come programmare una calcolatrice in JavaScript
Creare una calcolatrice matematica utilizzando JavaScript è una procedura alquanto semplice, anche se richiede un minimo di attenzione da parte dell’utente, in quanto la creazione della struttura HTML potrebbe confondere i meno esperti.
I passaggi importanti, come già accennato saranno tre:
- Struttura HTML della calcolatrice.
- Programmazione degli script e delle funzioni.
- Creazione delle regole di stile CSS.
L’ultimo passaggio è opzionale e servirà per rendere più gradevole alla vista il calcolatore. Alcune regole CSS però saranno essenziali e verranno definite già dal primo passaggio (come la grandezza e l’allineamento dei tasti).
A fondo articolo potrai trovare il codice completo della calcolatrice da poter integrare nelle tue pagine web. Inoltre, troverai il risultato del codice(la calcolatrice) con cui potrai interagire così da verificarne il funzionamento.
Struttura HTML della calcolatrice
Iniziamo come prima cosa con la creazione della struttura di base utilizzando il linguaggio HTML. Questa struttura sarà composta dal corpo principale, l’area di testo (come il display) e i pulsanti (button), proprio come una calcolatrice vera.
Qui puoi vedere il codice:
<div id="calcolatrice">
<form name="form">
<input class="area" name="area" value="" placeholder="0">
<table id="calc">
<tr>
<td><input type="button" value="C" onclick="reset()"></td>
<td><input type="button" value="<" onclick="cancella();"></td>
<td><input type="button" value="/" onclick="dig('/');"></td>
<td><input type="button" value="x" onclick="dig('*');"></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dig(7);"></td>
<td><input type="button" value="8" onclick="dig(8);"></td>
<td><input type="button" value="9" onclick="dig(9);"></td>
<td><input type="button" value="-" onclick="dig('-');"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dig(4);"></td>
<td><input type="button" value="5" onclick="dig(5);"></td>
<td><input type="button" value="6" onclick="dig(6);"></td>
<td><input type="button" value="+" onclick="dig('+');"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="dig(1);"></td>
<td><input type="button" value="2" onclick="dig(2);"></td>
<td><input type="button" value="3" onclick="dig(3);"></td>
<td rowspan="2"><input style="height:84px" type="button" value="=" onclick="ris();"></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="dig(0);" ></td>
<td><input type="button" value="00" onclick="dig('00');"></td>
<td><input type="button" value=","onclick="dig('.');"></td>
</tr>
</table>
</form>
</div>A prima vista potrà sembrarti confuso, ma vediamo ora come è strutturato il tutto:
- L’intero codice è racchiuso in un <div> chiamato “calcolatrice“, al suo interno cono contenuti i tasti e il “display” dello strumento.
- Subito in basso troviamo un form con al suo interno un area di input dei valori.
- Infine troviamo una tabella HTML o <table>, questa serve a ordinare ed allineare i pulsanti (button) con i numeri della calcolatrice.
- Tra i pulsanti presenti troviamo i numeri da 0 a 9, i simboli matematici semplici (somma, sottrazione, moltiplicazione, divisione e uguaglianza) e due simboli speciali (Reset dei valori e cancellazione dell’ultima cifra digitata).
- Ogni pulsante ha una funzione JavaScript preimpostata, che vedremo nel seguente capitolo.
I prossimi step consisteranno nella definizione degli script e dello stile. Proprio in quest’ultimo caso, senza regole CSS avremo come risultato iniziale questo:
Possiamo risolvere e rendere il tutto più gradevole semplicemente aggiungendo questa breve lista di regole CSS:
<style>
* {
margin:0;
padding:0px;
}
#calc input {
width:40px;
height:40px;
margin:1px;
font-size:15px;
}
.area {
width:170px;
height:30px;
padding:2px;
text-align:right;
font-size:20px
}
</style>Incolla o scrivi questi codici in <head> del tuo documento HTML.
Il risultato adesso sarà questo in basso, molto più gradevole e somigliante ad una calcolatrice reale.
Concluso questi capitolo, passeremo alla creazione del codice JavaScript per l’esecuzione delle funzioni.
Funzioni JavaScript
Dal precedente codice HTML possiamo notare la presenza di ben 4 distinte funzioni JavaScript, ognuna con uno scopo preciso:
- dig() – Digitazione delle cifre e degli operatori matematici.
- ris() – Per l’esecuzione dei valori e restituzione del risultato.
- cancella() – Cancellazione dell’ultima cifra presente nell’area.
- reset() – Cancellazione e reset dei valori.
Ogni funzione è eseguita con l’evento JavaScript “onclick“, cioè al click del pulsante interessato.
Ognuna di queste funzioni ha delle istruzioni specifiche, che puoi vedere nel seguente codice:
<script>
function dig(n){
document.form.area.value = document.form.area.value+n
}
function ris() {
var c = document.form.area.value;
if (c){
document.form.area.value = eval(c);
}
}
function reset() {
document.form.area.value = '';
}
function cancella() {
var a = document.form.area.value;
document.form.area.value = a.substring(0, a.length-1);
}
</script>Puoi integrare lo script sia in <head> del tuo documento HTML che nel footer (parte inferiore della pagina), poiché ogni funzione verrà eseguita con l’evento “onclick” e non al caricamento della pagina HTML.
In alternativa puoi integrare i codici in un documento esterno .js.
La quantità di codice JavaScript per la creazione di una calcolatrice è contenuta, puoi facilmente comprenderlo leggendo ogni singola istruzione.
Aggiunta di stile CSS
La nostra calcolatrice ora è perfettamente funzionante, può eseguire semplici operazioni matematiche come somma e sottrazione. Inoltre, con una semplice modifica del codice HTML è possibile aggiungere nuovi operatori matematici come le parentesi “()” ad esempio, o scriverle anche tramite tastiera.
L’unico altro passaggio che possiamo eseguire è l’aggiunta di stile tramite CSS per rendere il tutto più gradevole alla vista e personalizzare la calcolatrice a nostro piacimento.
Questo step è opzionale, potrai copiare il codice e modificarlo successivamente per adattarlo ai tuoi gusti, oppure scriverlo da zero.
Il codice qui in basso andrà a sostituire le precedenti regole CSS scritte nel capitolo “Struttura HTML della calcolatrice“, perciò elimina il CSS già presente ed incolla il nuovo.
<style>
* {
margin:0;
padding:0px;
}
#calc input {
width:40px;
height:40px;
margin:1px;
font-size:15px;
border:none;
}
#calc input:hover{
background-color:#ccc;
}
#calc input:active{
background-color:#aaa;
}
#calcolatrice{
background-color:#eee;
width:fit-content;
padding:10px 5px;
box-shadow:1px 1px 7px #999;
margin:10px;
}
.area {
width:166px;
height:30px;
padding:2px;
text-align:right;
font-size:20px
}
</style>Integrando questo codice, potrai aggiungere:
- Colore al corpo e ai tasti della calcolatrice;
- Effetti sui pulsanti;
- Ombre;
Risultato
Se hai seguito tutti i passaggi, ti dovresti ritrovare con un risultato uguale a quello qui di seguito. Potrai interagire con la calcolatrice JavaScript come preferisci e testare le sue funzionalità .
Codice completo
Non ti interessa comprender il codice e vuoi direttamente il codice completo della calcolatrice JavaScript?
Copialo ed incollalo nel tuo sito e modifica manualmente i valori come preferisci.
<style>
* {
margin:0;
padding:0px;
}
#calc input {
width:40px;
height:40px;
margin:1px;
font-size:15px;
border:none;
}
#calc input:hover{
background-color:#ccc;
}
#calc input:active{
background-color:#aaa;
}
#calcolatrice{
background-color:#eee;
width:fit-content;
padding:10px 5px;
box-shadow:1px 1px 7px #999;
margin:10px;
}
.area {
width:166px;
height:30px;
padding:2px;
text-align:right;
font-size:20px
}
</style>
<div id="calcolatrice">
<form name="form">
<input class="area" name="area" value="" placeholder="0">
<table id="calc">
<tr>
<td><input type="button" value="C" onclick="reset()"></td>
<td><input type="button" value="<" onclick="cancella();"></td>
<td><input type="button" value="/" onclick="dig('/');"></td>
<td><input type="button" value="x" onclick="dig('*');"></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dig(7);"></td>
<td><input type="button" value="8" onclick="dig(8);"></td>
<td><input type="button" value="9" onclick="dig(9);"></td>
<td><input type="button" value="-" onclick="dig('-');"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dig(4);"></td>
<td><input type="button" value="5" onclick="dig(5);"></td>
<td><input type="button" value="6" onclick="dig(6);"></td>
<td><input type="button" value="+" onclick="dig('+');"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="dig(1);"></td>
<td><input type="button" value="2" onclick="dig(2);"></td>
<td><input type="button" value="3" onclick="dig(3);"></td>
<td rowspan="2"><input style="height:84px" type="button" value="=" onclick="somma();"></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="dig(0);" ></td>
<td><input type="button" value="00" onclick="dig('00');"></td>
<td><input type="button" value=","onclick="dig('.');"></td>
</tr>
</table>
</form>
</div>
<script>
function dig(n){
document.form.area.value = document.form.area.value+n
}
function somma() {
var c = document.form.area.value;
if (c){
document.form.area.value = eval(c);
}
}
function reset() {
document.form.area.value = '';
}
function cancella() {
var a = document.form.area.value;
document.form.area.value = a.substring(0, a.length-1);
}
</script>Ti è piaciuto l’articolo? Scrivi un commento in basso e facci sapere cosa ne pensi!
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti:
- Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
- Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
- Come Risolvere i Problemi di Connessione Bluetooth al PC
- Guida alla Cybersecurity: Come proteggerti da minacce informatiche
- Come Aggiungere un Dizionario su App Kindle
Un commento su “Creare una Calcolatrice in JavaScript”
Ciao Simome, scusa la maleducazione per non averti nemmeno lasciato un commento sotto l’articolo. È chiaro che se ho preso spunto dal tuo codice è perché secondo me hai fatto un buon lavoro 🙂
Buona giornata e buon lavoro, e a risentirti.
Francesco