Calcolatrice aritmetica con controlli - Matematica con JavaScript . di Eliana Argenti e Tommaso Bientinesi -

CALCOLATRICE NUMERICA ARITMETICA CON CONTROLLI SUI TASTI

SECONDA PARTE

F

acciamo il punto.
Argomenti correlati:

LE VARIABILI USATE NEL PROGRAMMA

var conta=0;
funge da contatore. Essa aumenta di 1 ogni volta che si inserisce una cifra. In questo modo è possibile individuare la base giusta (decimale, ottale oppure esadecimale).
var base10=false;
variabile di tipo boolean che all'inizio è posta a falso: qualora il primo tasto premuto sia diverso da zero essa diventa vera, e quindi si lavora in base dieci.
var espressione='';
variabile di tipo string dove viene memorizzata l'espressione che si viene scrivendo nell'area di testo in alto.
var risultato='';
In questa variabile viene memorizzato il risultato dell'espressione quando si preme il tasto uguale.
var num1='';
In questa variabile viene memorizzato il contenuto dell'area di testo quando si premono i tasti "1/x" (inverso) oppure "+\-" (opposto). Dopo il calcolo il valore trovato viene visualizzato nell'area di testo in alto.
ALTRI SIMBOLI

||
OR (disgiunzione inclusiva): una proposizione composta attraverso questo connettivo è vera quando almeno una delle proposizioni che la compongono è vera, falsa latrimenti
&&
AND (congiunzione): una proposizione composta attraverso questo connettivo è vera quando è vera quando tutte e due le proposizioni che la compongono è vera, falsa altrimenti

IL CODICE PER IL TASTO UGUALE

Quando si preme il tasto " = ", è necessario sia concatenare il numero appena scritto all'espressione che abbiamo creato sia calcolare il risultato dell'espressione stessa e visualizzarlo nell'area di testo in alto. Subito dopo occorre predisporre tutte le variabili per i prossimi calcoli: in particolare, il risultato potrebbe essere usato come base di partenza per altri calcoli, mentre l'espressione deve essere cancellata.
Per fare tutto questo predisponiamo la funzione uguale(x)che viene attivata dal seguente codice:
<input type="button" value=" = " onClick="uguale(MioForm.a.value)">
e che quindi è chiamata alla pressione del tasto " = ". Ecco il codice, spiegato passo per passo:

function uguale(x) { Il parametro x assume, di volta in volta, il valore contentuto dell'area di testo superiore.
espressione=espressione + x La variabile espressione si incrementa del numero che è memorizzato nella variabile x
document.MioForm.a.value='' Viene svuotata l'area di testo superiore

risultato=eval(espressione) Viene calcolato il valore dell'espressione e memorizzato nella variabile risultato
document.MioForm.a.value=risultato Nell'area di testo in alto viene scritto il risultato dell'espressione
document.MioForm.b.value=espressione Il contentuto della variabile espressione viene visualizzato nell'area di testo in basso.
espressione='' La variabile espressione viene svuotata, pronta per i prossimi calcoli.
conta=0 abilita() base10=false Viene ripristinata la situazione iniziale, come spiegato nella pagina precedente
} Fine funzione.

UNA FUNZIONE DI CONTROLLO

Dopo premuto il tasto =, oppure aver calcolato l'inverso o l'opposto di un numero, abbiamo tre possibilità, sempre che vogliamo continuare ad usare la calcolatrice:

continuiamo il calcolo a partire dal risultato trovato (ad esempio, se vogliamo calcolare l'inverso del numero trovato e così via)
scriviamo un nuovo numero ( e quindi ricominciamo daccapo un nuovo calcolo)
inseriamo una parentesi (sempre per iniziare un nuovo calcolo)

Nel primo caso, non dobbiamo fare nulla, ma nel secondo o nel terzo l'area di testo in alto va azzerata. Aggiungiamo perciò al codice la seguente funzione di controllo:

function controlla() {
var appoggio=eval("document.MioForm.a.value") Viene controllato il contenuto dell'area di testo in alto e memorizzato nella variabile appoggio
if ((appoggio == risultato) || (appoggio==num1) || (appoggio=='(')) { Se appoggio coincide con risultato (cioè è stato premuto il tasto uguale), oppure coincide con num1 (cioè è appena stato calcolato l'inverso o l'opposto di un numero), oppure se è stata premuta la parentesi

if (appoggio !='') { Se la variabile appoggio non è vuota (questo si potrebbe verificare all'avvio del programma, quando sia l'area di testo superiore che tutte le variabile sono vuote)
cancella() Viene chiamata la funzione cancella() che aggiorna tutto
} Fine secondo if
} Fine primo if
} Fine funzione.

La funzione controlla()deve essere attivata quando si deve scrivere un nuovo numero, essa va quindi chiamata (semplicemente scrivendone il nome) dalla funzione aggiungi(n) che serve per concatenare i tasti, che abbiamo descritto nella sezione Controlli sui tasti, e di cui riportiamo il codice:

function aggiungi(n) {
  controlla();
  conta=conta+1
  if (conta==1) {base(conta,n)}
  else if (conta==2) {
         if (base10==false) {
            base(conta,n)
          }  
        } 
   document.MioForm.a.value=document.MioForm.a.value+n            
}

La chiamata alla funzione quando si preme la parentesi è riportata nella pagina precedente.

ECCO IL CODICE COMPLETO

Copia ed incolla questo codice fra i tags <HEAD> ed </HEAD> della pagina HTML.

<SCRIPT LANGUAGE="JavaScript">
var conta=0;
var base10=false;
var espressione='';
var risultato='';
var num1='';

function opera(y) {
  if (y=='(') {
   controlla()
  }
espressione=espressione + document.MioForm.a.value + y
conta=0
 abilita()
 base10=false
document.MioForm.a.value=''
document.MioForm.b.value=espressione
}

function inverso(y) {
num1=eval(y)
num1=1/num1
document.MioForm.a.value=num1
}

function opposto(y) {
num1=eval(y)
num1=-num1
document.MioForm.a.value=num1
 }

function aggiungi(n) {
  controlla();
  conta=conta+1
  if (conta==1) {base(conta,n)}
  else if (conta==2) {
         if (base10==false) {
            base(conta,n)
          }  
        } 
   document.MioForm.a.value=document.MioForm.a.value+n            
}
function uguale(x) {
espressione=espressione + x
document.MioForm.a.value=''
risultato=eval(espressione)
document.MioForm.a.value=risultato
document.MioForm.b.value=espressione
espressione=''
conta=0
abilita()
base10=false
}

function cancella() {
 conta=0
 abilita()
 base10=false
espressione=''
document.MioForm.a.value=''
document.MioForm.b.value=''
}

</script>

Trasforma così il tag <BODY> : <BODY onLoad="abilita10()">
(Ovviamente le altre opzioni tipo font, colore di sfondo etc. possono essere lasciate)

Copia ed incolla il seguente codice i tags <BODY> e </BODY> della pagina HTML

L'immagine dei gatti è in corrispondenza dell 'istruzione background="gattiC.jpg" Puoi copiare l'immagine oppure inserirne un'altra cambiando l'istruzione. Se sei un webmaster sei pregato di inserire un link al nostro sito.