Questa volta vi riporto il codice per una semplice calcolatrice (non scientifica) da me sviluppato e che potete utilizzare tranquillamente (non in altri blog post o siti però..siete liberi di usarlo solo per i siti che costruite voi e non in altri per mostrare il codice!).. se trovate qualche bug e volete segnalarmelo vi ringrazio in anticipo..
Questa è la calcolatrice che appare nella finestra del browser una volta caricata la pagina:
<html>
<head>
<title>Calcolatrice_javascript</title>
<script type="text/javascript">
var parziale=0;
var numero="";
var operazione=0; //0 se non è stato premuto un tasto operazione, 1 se è stato premuto
var tipo_op="inizio";
var tipo_op_prec="";
function display(cifra)
{
if (cifra==".")
{
numero=numero+".";
}
else if (cifra=="-")
{
numero="-"+numero;
}
else
{
numero=numero+String(cifra);
}
document.getElementById("display").value=numero;
}
function somma()
{
if (tipo_op!="somma" && tipo_op!="risultato" & tipo_op!="inizio" && tipo_op!="quadrato" && tipo_op!="radice") {operazione_precedente();}
else {
if (tipo_op!="risultato")
{
if (operazione==0) {parziale=controlla_float(numero);}
else {parziale=parziale+controlla_float(numero);}
}
}
numero="";
document.getElementById("display").value=parziale;
operazione=1;
tipo_op="somma";
}
function prodotto()
{
if (tipo_op!="prodotto" && tipo_op!="risultato" && tipo_op!="inizio" && tipo_op!="quadrato" && tipo_op!="radice") {operazione_precedente();}
else {
if (tipo_op!="risultato")
{
if (operazione==0) {parziale=controlla_float(numero);}
else {parziale=parziale*controlla_float(numero);}
}
}
numero="";
document.getElementById("display").value=parziale;
operazione=1;
tipo_op="prodotto";
}
function divisione()
{
if (tipo_op!="divisione" && tipo_op!="risultato" && tipo_op!="inizio" && tipo_op!="quadrato" && tipo_op!="radice") {operazione_precedente();}
else {
if (tipo_op!="risultato")
{
if (operazione==0) {parziale=controlla_float(numero);}
else {parziale=parziale/controlla_float(numero);}
}
}
numero="";
document.getElementById("display").value=parziale;
operazione=1;
tipo_op="divisione";
}
function sottrazione()
{
if (tipo_op!="sottrazione" && tipo_op!="risultato" && tipo_op!="inizio" && tipo_op!="quadrato" && tipo_op!="radice") {operazione_precedente();}
else {
if (tipo_op!="risultato")
{
if (operazione==0) {parziale=controlla_float(numero);}
else {parziale=parziale-controlla_float(numero);}
}
}
numero="";
document.getElementById("display").value=parziale;
operazione=1;
tipo_op="sottrazione";
}
function quadrato()
{
if (tipo_op!="quadrato" && tipo_op!="risultato" && tipo_op!="inizio") {operazione_precedente();}
else {
if (operazione==0 && tipo_op!="risultato")
{
parziale=controlla_float(numero);
}
}
parziale=parziale*parziale;
document.getElementById("display").value=parziale;
numero=String(parziale);
parziale=0;
operazione=0;
tipo_op="quadrato";
}
function radice()
{
if (tipo_op!="radice" && tipo_op!="risultato" & tipo_op!="inizio") {operazione_precedente();}
else {
if (operazione==0 && tipo_op!="risultato")
{
parziale=controlla_float(numero);
}
}
parziale=Math.sqrt(parziale);
document.getElementById("display").value=parziale;
numero=String(parziale);
parziale=0;
operazione=0;
tipo_op="radice";
}
function totale()
{
if (tipo_op=="somma" || (tipo_op=="risultato" && tipo_op_prec=="somma")) {parziale=parziale+controlla_float(numero);}
else if (tipo_op=="sottrazione" || (tipo_op=="risultato" && tipo_op_prec=="sottrazione")) {parziale=parziale-controlla_float(numero);}
else if (tipo_op=="prodotto" || (tipo_op=="risultato" && tipo_op_prec=="prodotto")) {parziale=parziale*controlla_float(numero);}
else if (tipo_op=="divisione" || (tipo_op=="risultato" && tipo_op_prec=="divisione")) {parziale=parziale/controlla_float(numero);}
else if (tipo_op=="quadrato" || (tipo_op=="risultato" && tipo_op_prec=="quadrato")) {parziale=parziale*parziale;}
else if (tipo_op=="radice" || (tipo_op=="risultato" && tipo_op_prec=="radice")) {parziale=Math.sqrt(parziale);}
document.getElementById("display").value=parziale;
operazione=0;
if (tipo_op!="risultato") {tipo_op_prec=tipo_op;}
tipo_op="risultato";
}
function reset()
{
parziale=0;
numero="";
operazione=0;
tipo_op="inizio";
tipo_op_prec="";
document.getElementById("display").value=parziale;
}
function cancel()
{
numero=numero.substring(0,numero.length-1);
if (numero=="")
{
document.getElementById("display").value="0";
}
else
{
document.getElementById("display").value=numero;
}
}
function controlla_float(num)
{
if (String(parseInt(num))==numero)
{
return parseInt(num);
}
else
{
return parseFloat(num);
}
}
function operazione_precedente()
{
if (tipo_op=="somma") {parziale=parziale+controlla_float(numero);}
else if (tipo_op=="sottrazione") {parziale=parziale-controlla_float(numero);}
else if (tipo_op=="prodotto") {parziale=parziale*controlla_float(numero);}
else if (tipo_op=="divisione") {parziale=parziale/controlla_float(numero);}
else if (tipo_op=="quadrato") {parziale=parziale*parziale;}
else if (tipo_op=="radice") {parziale=Math.sqrt(parziale);}
}
</script>
</head>
<body>
<div style="border: 1px solid black;width:136px;">
<input style="width:136;" id="display" type="text" value="0">
<br />
<br />
<input style="width:31;" type="button" value="1" onclick="javascript:display(1);">
<input style="width:31;" type="button" value="2" onclick="javascript:display(2);">
<input style="width:31;" type="button" value="3" onclick="javascript:display(3);">
<input style="width:31;" type="button" value="+" onclick="javascript:somma();">
<br />
<input style="width:31;" type="button" value="4" onclick="javascript:display(4);">
<input style="width:31;" type="button" value="5" onclick="javascript:display(5);">
<input style="width:31;" type="button" value="6" onclick="javascript:display(6);">
<input style="width:31;" type="button" value="-" onclick="javascript:sottrazione();">
<br />
<input style="width:31;" type="button" value="7" onclick="javascript:display(7);">
<input style="width:31;" type="button" value="8" onclick="javascript:display(8);">
<input style="width:31;" type="button" value="9" onclick="javascript:display(9);">
<input style="width:31;" type="button" value="*" onclick="javascript:prodotto();">
<br />
<input style="width:66;" type="button" value="0" onclick="javascript:display(0);">
<input style="width:31;" type="button" value="." onclick="javascript:display('.');">
<input style="width:31;" type="button" value="/" onclick="javascript:divisione();">
<br />
<input style="width:66;" type="button" value="(-)" onclick="javascript:display('-');">
<input style="width:31;" type="button" value="rq" onclick="javascript:radice();">
<input style="width:31;" type="button" value="^2" onclick="javascript:quadrato();">
<br />
<input style="width:66;" type="button" value="Res" onclick="javascript:reset();">
<input style="width:66;" type="button" value="Canc" onclick="javascript:cancel();">
<br>
<input style="width:136;" type="button" value="=" onclick="javascript:totale();">
</div>
</body>
</html>
Come vedete il codice è un po' più lunghetto rispetto alle altre volte.. per cui non entrerò a fondo nella descrizione del listato. Ovviamente se avete dubbi di ogni sorta lasciatemi pure un commento :)
Come vedete ci sono più funzioni.. direi che il loro nome le autodescrive rivelandone quello che permettono di fare..
La funzione display non fa altro che aggiornare la variabile (stringa) numero ed aggiornare il display (l'input di tipo text con id="display" che si trova nel body) in base alle cifre digitate.
Le funzioni per le operazioni di somma, sottrazione,prodotto e divisione passando per alcune verifiche che non vi commento qui (ripeto se ci sono problemi chiedete pure.. :) ), compiono sostanzialmente due operazioni fondamentali, pongono il parziale uguale al primo numero digitato se si tratta di una nuova operazione, mentre utilizzano il secondo numero per portare a termine l'operazione se il primo numero è stato già digitato.. so che, sintetizzando, forse è poco chiaro...
Le funzioni quadrato e radice sono leggermente differenti, logicamente parlando, perchè a differenza delle altre hanno bisogno solo di un numero per essere portate a termine.
La funzione totale è richiamata dall'uguale per dare il risultato dell'operazione.
La funzione calcola_float non fa altro che vedere se siamo di fronte ad un numero con la virgola o meno.. (bisogna analizzare in qualche modo la variabile numero che è una stringa) e restituisce a seconda dei casi un intero o un float.
La funzione operazione_precedente viene utilizzata quando si fanno operazioni successive cambiando tipo di operazione. Ad esempio.. consideriamo le operazioni in ordine 1+3/2 .. il risultato deve dare 2 perchè 1+3 come parziale da 4 e poi 4/2 da 2. Quando si preme il tasto della divisione.. c'è bisogno di richiamare nuovamente la funzione per la somma per completare l'operazione di somma appunto. Se non venisse richiamata, la somma non verrebbe fatta e verrebbe invece eseguita la divisione 1/3.
Ciao a tutti..e grazie per l'attenzione..
Nessun commento:
Posta un commento