In questo articolo spiegherò come programmare la seguente calcolatrice nel linguaggio Javascript.

<html>
<head>
<title>Calcolatrice</title>
<style type="text/css">
input {
	background-color:black;
	border-color:black;
	color:#00ff00;
	width:50px;
}

body {
	background-color:black;
}

#risultato
{
	width:215px;
	background-color:black;
	color:#00ff00;
}

.large
{
	width:105px;
}
</style>

Il codice tra i tag style è codice CSS, esso serve a modificare lo stile della nostra calcolatrice.

<script type="text/javascript">
function n(op)
{
if(document.getElementById("risultato").value=="0" || document.getElementById("risultato").value==null)
{document.getElementById("risultato").value=op;}
else{document.getElementById("risultato").value+=op;}
}

function risultato() { document.getElementById("risultato").value=eval(document.getElementById("risultato").value); }

function cancella() { document.getElementById("risultato").value=document.getElementById("risultato").value.substring(0, document.getElementById("risultato").value.length-1); }
function azzera() { document.getElementById("risultato").value="0"; }
</script>

La funzione “n” serve a stampare nella calcolatrice i vari numeri e segni che l’ utente cliccherà nella nostra calcolatrice.
La funzione risultato() utilizza la funzione eval() per calcolare l’ espressione scritta nella nostra calcolatrice.
La funzione cancella() cancella l’ ultimo numero scritto dall’ utente utilizzando la funzione substring che seleziona il primo carattere (indicato nella funzione con 0) e il penultimo e poi la ristampa nella calcolatrice.
La funzione azzera() cancella tutto quello che è scritto nella calcolatrice e stampa 0.

</head>
<body>
<table style="border-color:#00ff00; background-color:black;" border="1">
<tr><td><input type="text" value="0" id="risultato" readonly="readonly"></td></tr>
<tr><td>
<input type="submit" value="Cancella" OnClick="cancella()">
<input type="submit" value="Azzera" OnClick="azzera();">
</td></tr>
<tr><td>
<input type="submit" value="×" id="*" OnClick="n(this.id)">
<input type="submit" value="÷" id="/" OnClick="n(this.id)">
<input type="submit" value="+" id="+" OnClick="n(this.id)">
<input type="submit" value="-" id="-" OnClick="n(this.id)"></td>
</tr><tr><td><input type="submit" value="0" id="0" OnClick="n(this.id)">
<input type="submit" value="1" id="1" OnClick="n(this.id)">
<input type="submit" value="2" id="2" OnClick="n(this.id)">
<input type="submit" value="3" id="3" OnClick="n(this.id)"></td>
</tr><tr><td>
<input type="submit" value="4" id="4" OnClick="n(this.id)">
<input type="submit" value="5" id="5" OnClick="n(this.id)">
<input type="submit" value="6" id="6" OnClick="n(this.id)">
<input type="submit" value="7" id="7" OnClick="n(this.id)">
</td>
</tr><tr><td>
<input type="submit" value="8" id="8" OnClick="n(this.id)">
<input type="submit" value="9" id="9" OnClick="n(this.id)">
<input type="submit" value="(" id="(" OnClick="n(this.id)">
<input type="submit" value=")" id=")" OnClick="n(this.id)">
<tr><td>
<input type="submit" value="0" id="0" OnClick="n(this.id)">
<input type="submit" value="=" OnClick="risultato();">
</td></tr>
</table>
</body>
</html>

Ti è piaciuto questo articolo? Allora ti piacerà anche:

Creare un calendario in Javascript

Come realizzare uno slider di immagini con dissolvenza in Javascript

Hunting The Invaders un gioco creato in Javascript