Un esercizio un po’ più complesso con JS. Proviamo a realizzare una calcolatrice con le operazioni fondamentali. Per farlo useremo una interfaccia grafica gradevole basata su Bootstrap. Possiamo complicarla per livelli incrementali. Cominciamo gestendo semplicemente due numeri interi a cifra singola ed una operazione aritmetica tra questi, il tutto visualizzato ad ogni digitazione come sullo schermo di una vera calcolatrice.
Versione 1: eventi onclick
Il listato della pagina HTML (calcolatrice.html) realizzata con Bootstrap. E’ ovviamente una scelta tecnologica non essenziale. Si può raggiungere un obiettivo grafico analogo con CSS e magari uso delle tabelle HTML. Il vantaggio è ovviamente una resa grafica più accattivante per l’uso dei bottoni colorati e della griglia che consente una disposizione semplificata dei bottoni stessi. Da tenere presente per la nostra progettazione è l’inclusione di uno script js (script.js) su misura per il nostro codice dove ci saranno funzioni da chiamare attraverso i bottoni, funzioni da richiamare internamente allo script e soprattutto delle variabili globali che permetteranno di gestire lo stato e l’avanzamento delle digitazioni senza dover costantemente ricarica la pagina. Se notiamo gli eventi onclick dei bottoni abbiamo due funzioni: cifra(parametro) e operazione(parametro) per gestire le digitazioni di questi due tipologie di bottoni.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="css/stile.css" rel="stylesheet">
<title>Calcolatrice JS/Bootstrap</title>
</head>
<body>
<div class="container-fluid text-center">
<h1>Calcolatrice JS/Bootstrap</h1>
<div class="container border border-black">
<div class="row">
<div class="col">
<div class="mb-3"><br>
<input type="text" class="form-control" id="display" readonly>
</div>
</div>
</div>
<div class="row row-cols-5">
<div class="col"><button class="btn btn-secondary" onclick="cifra(1)">1</button></div>
<div class="col"><button class="btn btn-secondary" onclick="cifra(2)">2</button></div>
<div class="col"><button class="btn btn-secondary" onclick="cifra(3)">3</button></div>
<div class="col"><button class="btn btn-primary" onclick="operazione('+')">+</button></div>
<div class="col"><button class="btn btn-primary" onclick="operazione('-')">-</button></div>
</div>
<div class="row row-cols-5">
<div class="col"><button class="btn btn-secondary" onclick="cifra(4)">4</button></div>
<div class="col"><button class="btn btn-secondary" onclick="cifra(5)">5</button></div>
<div class="col"><button class="btn btn-secondary" onclick="cifra(6)">6</button></div>
<div class="col"><button class="btn btn-primary" onclick="operazione('*')">*</button></div>
<div class="col"><button class="btn btn-primary" onclick="operazione('/')">/</button></div>
</div>
<div class="row row-cols-5">
<div class="col"><button class="btn btn-secondary" onclick="cifra(7)">7</button></div>
<div class="col"><button class="btn btn-secondary" onclick="cifra(8)">8</button></div>
<div class="col"><button class="btn btn-secondary" onclick="cifra(9)">9</button></div>
<div class="col"><button class="btn btn-success uguale" onclick="operazione('=')">=</button></div>
</div>
<div class="row row-cols-5">
<div class="col"></div>
<div class="col"><button class="btn btn-secondary" onclick="cifra(0)">0</button></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div> <!-- container con bordo -->
Un piccolo progetto di calcolatrice semplificato con due numeri a singola cifra ed una operazione. <br>Es. 1+1=2<br>TODO: Miglorare con numeri a più cifre e operazioni concatenate; bottone reset
</div> <!-- container titolo -->
<script src="js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>Cerchiamo di dare un’idea progettuale della nostra calcolatrice:
- vogliamo tenere traccia di ogni digitazione in un array e questo è facile visto che in js non sono tipizzati e si possono “mischiare” numeri e lettere come i simboli aritmetici.
- vogliamo inserire una serie di controlli sulla correttezza delle digitazioni: devono essere nella forma numero simbolo numero uguale numero
- vogliamo che alla digitazione dell’uguale si svolga l’operazione richiesta e stampi il risultato
- vogliamo una funzionalità che si occupi di scrivere valori e risultati corretti sul campo di input testo
Il listato completo del file script.js
/*
* JS Calcolatrice
* Autore: Alfredo Centinaro
*/
var digit = Array();
var i=0;
digit[0]=0;
visualizza();
function visualizza()
{
let display = document.getElementById("display");
display.value = "";
for (let j=0; j < digit.length; j++)
{
display.value = display.value + digit[j];
}
}
function cifra(num)
{
//controllo il precedente inserimento
//deve esserci un'operazione altrimenti sovrascrivo
if (isNaN(digit[i]))
{
i++;
digit[i] = num;
}
else
{
digit[i] = num;
}
visualizza();
}
function operazione(op)
{
//controllo il precedente inserimento
//deve esserci un numero altrimenti sovrascrivo
let totale = 0;
if (isNaN(digit[i]))
{
digit[i] = op;
}
else
{
i++;
digit[i] = op;
}
if (op == '=')
{
let j =0;
{
if (digit[j+1] == '+')
{
totale += digit[j] + digit[j+2];
}
if (digit[j+1] == '-')
{
totale += digit[j] - digit[j+2];
}
if (digit[j+1] == '*')
{
totale += digit[j] * digit[j+2];
}
if (digit[j+1] == '/')
{
totale += digit[j] / digit[j+2];
}
//alert(totale);
digit[j+4] = totale;
}
}
visualizza();
}
Per completezza il file CSS aggiuntivo con le customizzazioni per centrare il tutto e personalizzare le dimensioni dei bottoni normali e dell’uguale.
.container
{
max-width: 280px;
}
.btn
{
height: 40px;
width: 40px;
margin: 0 0 5px 0;
}
.uguale
{
height: 40px;
width: 95px;
}
Trovate la repository su Github -> https://github.com/alfredocentinaro/esercizi-js/tree/main/calcolatrice
Versione 2: eventListener
Riscriviamo il codice della nostra calcolatrice seguendo la modalità MVC. E’ buona norma, infatti, suddividere parte di grafica con HTML/CSS e la parte funzionale in Javascript, eliminando di fatto gli attributi onClick e passando all’uso degli eventListener.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="css/stile.css" rel="stylesheet">
<title>Calcolatrice JS/Bootstrap</title>
</head>
<body>
<div class="container-fluid text-center">
<h1>Calcolatrice JS/Bootstrap</h1>
<div class="container border border-black">
<div class="row p-2">
<div class="col">
<input type="text" class="form-control" id="display" readonly>
</div>
</div>
<div class="row row-cols-5 p-1">
<div class="col"><button class="btn btn-secondary" id="btn1">1</button></div>
<div class="col"><button class="btn btn-secondary" id="btn2">2</button></div>
<div class="col"><button class="btn btn-secondary" id="btn3">3</button></div>
<div class="col"><button class="btn btn-primary" id="btnpiu">+</button></div>
<div class="col"><button class="btn btn-primary" id="btnmen">-</button></div>
</div>
<div class="row row-cols-5 p-1">
<div class="col"><button class="btn btn-secondary" id="btn4">4</button></div>
<div class="col"><button class="btn btn-secondary" id="btn5">5</button></div>
<div class="col"><button class="btn btn-secondary" id="btn6">6</button></div>
<div class="col"><button class="btn btn-primary" id="btnper">*</button></div>
<div class="col"><button class="btn btn-primary" id="btndiv">/</button></div>
</div>
<div class="row row-cols-5 p-1">
<div class="col"><button class="btn btn-secondary" id="btn7">7</button></div>
<div class="col"><button class="btn btn-secondary" id="btn8">8</button></div>
<div class="col"><button class="btn btn-secondary" id="btn9">9</button></div>
<div class="col"><button class="btn btn-success uguale" id="btnuguale">=</button></div>
</div>
<div class="row row-cols-5 p-1">
<div class="col"></div>
<div class="col"><button class="btn btn-secondary" id="btn0">0</button></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div> <!-- container con bordo -->
Un piccolo progetto di calcolatrice semplificato con due numeri a singola cifra ed una operazione. <br>Es. 1+1=2<br>TODO: Miglorare con numeri a più cifre e operazioni concatenate; bottone reset
</div> <!-- container titolo -->
<script src="js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
//prelevo tutti i bottoni
const btn1 = document.querySelector("#btn1");
const btn2 = document.querySelector("#btn2");
const btn3 = document.querySelector("#btn3");
const btn4 = document.querySelector("#btn4");
const btn5 = document.querySelector("#btn5");
const btn6 = document.querySelector("#btn6");
const btn7 = document.querySelector("#btn7");
const btn8 = document.querySelector("#btn8");
const btn9 = document.querySelector("#btn9");
const btn0 = document.querySelector("#btn0");
const btnpiu = document.querySelector("#btnpiu");
const btnmen = document.querySelector("#btnmen");
const btnper = document.querySelector("#btnper");
const btndiv = document.querySelector("#btndiv");
//aggiungo gli eventlistener
btn1.addEventListener("click", fbtn1, true);
btn2.addEventListener("click", fbtn2, true);
btn3.addEventListener("click", fbtn3, true);
btn4.addEventListener("click", fbtn4, true);
btn5.addEventListener("click", fbtn5, true);
btn6.addEventListener("click", fbtn6, true);
btn7.addEventListener("click", fbtn7, true);
btn8.addEventListener("click", fbtn8, true);
btn9.addEventListener("click", fbtn9, true);
btn0.addEventListener("click", fbtn0, true);
btnpiu.addEventListener("click", fbtnpiu, true);
btnmen.addEventListener("click", fbtnmen, true);
btnper.addEventListener("click", fbtnper, true);
btndiv.addEventListener("click", fbtndiv, true);
//funzioni eventi
function fbtn1()
{
}
function fbtn2()
{
}
function fbtn3()
{
}
function fbtn4()
{
}
function fbtn5()
{
}
function fbtn6()
{
}
function fbtn7()
{
}
function fbtn8()
{
}
function fbtn9()
{
}
function fbtn0()
{
}
function fbtnpiu()
{
}
function fbtnmen()
{
}
function fbtnper()
{
}
function fbtndiv()
{
}Ultima modifica 17 Giugno 2025
