Tastierino numerico

SECONDA PARTE: CONTROLLI

F

acciamo il punto.
Argomenti correlati:

onLoad

Evento di sistema, che cioè non richiede l'azione dell'utente per essere attivato.
Quando il documento corrente è stato completamente caricato (loaded) si attiva l'azione scritta tra virgolette, come nel seguente codice:
<BODY onLoad=".....">
dove al posto dei puntini viene inserita l'azione. Nel nostro caso, visto che vogliamo disabilitare alcuni tasti, prima abbiamo preparato la funzione che disabilita i tasti, alla quale abbiamo dato il nome abilita10() e quindi il nostro codice è diventato
<BODY onLoad="abilita10()">
Se si vogliono inserire più eventi basta separarli con il punto e virgola, come nel seguente esempio:
<BODY onLoad="abilita10(); altraazione()">
document.MioForm.P.disabled=false;
Indica che il bottone di nome P che appartiene al form di nome MioForm che a sua volta appartiene al documento corrente (document) ha la proprietà di essere disabilitato (disabled) uguale a falso: in altri termini il bottone stesso risulta abilitato.
Altri linguaggi, come ad esempio Visual Basic, usano invece la proprietà enabled.

TIPI DI NUMERO DEL TASTIERINO

integer literals
Numerici interi in base dieci: le cifre sono 0 1 2 3 4 5 6 7 8 9; il simbolo - indica che il numero è negativo.
Un numero consiste di un solo zero, oppure deve iniziare per una cifra da 1 a 9.
ESEMPI: 0; 10000
hex literals
Numerici interi in base sedici: le cifre sono 0 1 2 3 4 5 6 7 8 9 A B C D E F (eventualmente minuscole);
Deve iniziare con 0x oppure 0X
ESEMPI: 0xff; 0X12a; 0xA102

octal literals
Numerici interi in base otto: le cifre sono 0 1 2 3 4 5 6 7;
Deve iniziare con 0
ESEMPI: 0104; 044567
Dei numeri decimali abbiamo usato soltanto la forma con il punto decimale
ESEMPI: 0.904; .84567
Nelle prossime lezioni useremo anche i numeri negativi e le forme esponenziali.

Abbiamo già presentato il tastierino numerico di una calcolatrice, ed abbiamo mostrato come far funzionare i vari tasti.
Ora dobbiamo aggiungere dei controlli ai tasti in modo da rispettare le regole di Javascript. Ci sembra infatti opportuno impedire all'utente di premere, magari per sbaglio, un tasto non ammesso, e quindi ricevere un messaggio d'errore quando il calcolo sarà implementato.
Studiamo quindi il problema in modo generale, traducendo poi la soluzione in codice interpretabile dal linguaggio in studio.

All'avvio del programma

Disabilitare i tasti appartenenti all'insieme I = {x, A, B, C, D, E, F }

Infatti questi non possono essere premuti per primi

Alla pressione dei tasti corrispondenti alle cifre o al punto decimale

Se si preme il primo tasto allora

Se la cifra corrispondente è diversa da zero allora

la base è dieci

( I tasti necessari in seguito sono già tutti abilitati)

Se invece è stato premuto lo zero allora occorre

abilitare il tasto x
disabilitare il tasto 8
disabilitare il tasto 9
abilitare il punto decimale

Infatti i tasti A B C D E F 8 9 non possono essere premuti per secondi se è stato premuto lo zero.

Invece se si preme il secondo tasto allora

Se il tasto è x allora la base è sedici:

abilitare i tasti corrispondenti
disabilitare il punto decimale

disabilitare il tasto x

Invece se il tasto è il punto decimale allora

la base è dieci
abilitare i tasti corrispondenti

disabilitare il punto decimale

Altrimenti

la base è otto
disabiltare il punto decimale

disabilitare il tasto x

Infatti queste sono le uniche possibilità per il secondo tasto

In ogni caso fare in modo che il simbolo corrispondente al tasto premuto vada ad aggiungersi alla sequenza che si deve formare nell'apposita area di testo.

NOTA BENE - Il punto decimale può essere inserito una sola volta, pertanto occorre disabilitarlo non appena sia stato premuto.

Alla pressione del tasto CANC

Riprodurre le condizioni iniziali e quindi:

cancellare l'area di testo
fare in modo che il prossimo tasto premuto risulti il primo
fare in modo che la base della numerazione debba essere nuovamente calcolata

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;
function abilita() {
               document.MioForm.P.disabled=false;
               document.MioForm.n8.disabled=false;
               document.MioForm.n9.disabled=false;
               abilita10()
            }
function abilita0() {
               document.MioForm.x.disabled=false;
               document.MioForm.n8.disabled=true;
               document.MioForm.n9.disabled=true;
               document.MioForm.P.disabled=false;
              }
function abilita10() {
               document.MioForm.A.disabled=true;
               document.MioForm.B.disabled=true;
               document.MioForm.C.disabled=true;
               document.MioForm.D.disabled=true;
               document.MioForm.E.disabled=true;
               document.MioForm.F.disabled=true;
               document.MioForm.x.disabled=true;
            }
function abilita8() {
                document.MioForm.P.disabled=true;
                document.MioForm.x.disabled=true;
            }
function abilita16() {
               document.MioForm.P.disabled=true;
               document.MioForm.A.disabled=false;
               document.MioForm.n8.disabled=false;
               document.MioForm.n9.disabled=false;
               document.MioForm.B.disabled=false;
               document.MioForm.C.disabled=false;
               document.MioForm.D.disabled=false;
               document.MioForm.E.disabled=false;
               document.MioForm.F.disabled=false;
               document.MioForm.x.disabled=true;
           }
          
function base(conta,n) {
  if (conta==1) {
          if (n=='0') {abilita0()}
          else  {
             base10=true
             abilita10()
             }
          }
else if (conta==2) {
       if (n=='x') {
          abilita16()
}
       else if (n=='.') {
            abilita()
          }
       else  {
            abilita8()
           }
     }
}

function aggiungi(n) {
  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 cancella() {
 conta=0
 abilita()
 base8=false
 punto=false
document.MioForm.a.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

</CENTER>
 
</FORM>