Calcolatrice con javascript

Realizziamo in quest’articolo una semplice calcolatrice con javascript, per spiegare ancora il metodo getElementById().

Anche questo è un semplice esercizio proposto a scopo didattico, in seguito svilupperemo lo stesso esercizio utilizzando le JQuery.


Sviluppo di una calcolatrice con javascript

Il semplice esempio di calcolatrice che realizzeremo oggi utilizza HTML, CSS e anche JavaScript.

Ecco dunque l’esempio.

Inserite i numeri e le operazioni cliccando sui tasti e infine cliccate sul tasto uguale (=) per avere il risultato dell’operazione. Adesso potete continuare ad operare sul numero ottenuto oppure, se volete cancellare tutto il contenuto del display, cliccate sul pulsante C.

Innanzitutto creiamo il codice HTML per inserire i tasti da 0 a 9, poi inseriamo i pulsanti per le operazioni matematiche, il tasto per la virgola, il tasto C e infine il tasto uguale. Inseriamo anche il display in alto.

Utilizzeremo quindi i tag div, i tag input e il tag button, a cui assegneremo opportune classi, per formattare la nostra calcolatrice con javascript, come da esempio mostrato sopra.

<div class="content">
   <input type="text" name="display" id="operazioni" readonly="readonly" class="display">
</div>
<div class="content">
  <div class="content">
      <input type="submit" id="7" value="7" onclick="n(this.id)" class="tasto">
      <input type="submit" id="8" value="8" onclick="n(this.id)" class="tasto">
      <input type="submit" id="9" value="9" onclick="n(this.id)" class="tasto">
      <input type="submit" id="/" value="/" onclick="n(this.id)" class="tasto">
  </div>
  <div class="content">
      <input type="submit" id="4" value="4" onclick="n(this.id)" class="tasto">
      <input type="submit" id="5" value="5" onclick="n(this.id)" class="tasto">
      <input type="submit" id="6" value="6" onclick="n(this.id)" class="tasto">
      <input type="submit" id="*" value="X" onclick="n(this.id)" class="tasto">
  </div>
  <div class="content">
       <input type="submit" id="1" value="1" onclick="n(this.id)" class="tasto">
       <input type="submit" id="2" value="2" onclick="n(this.id)" class="tasto">
       <input type="submit" id="3" value="3" onclick="n(this.id)" class="tasto">
       <input type="submit" id="-" value="-" onclick="n(this.id)" class="tasto">
   </div>
   <div class="content">
      <input type="submit" value="C" onclick="cancella()" class="tasto">
      <input type="submit" id="0" value="0" onclick="n(this.id)" class="tasto">
      <input type="submit" id="." value="." onclick="n(this.id)" class="tasto">
      <input type="submit" id="+" value="+" onclick="n(this.id)" class="tasto">
    </div>
    <div class="content">
         <button value="=" onclick="operazione();" class="uguale tasto">=</button>
     </div>
 </div>

Notiamo inoltre che, all’evento onclick per i tasti, abbiamo inserito n(this.id), in questo modo infatti recuperiamo in automatico l’id che è dichiarato in ciascun input. Mentre all’evento onclick di button assegniamo la funzione operazione() che creeremo in javascript.

Realizziamo poi il foglio di stile.

.content {
            margin-left: 2px;
        }
.tasto {
            background-color: #a5cff3 ;
            color: #175c97;
            font-size: 22pt;
            border: none;
            margin: 4px 2px;
            height: 40px;
	    width: 46px;
        }
.display {
            background: none;
            color: #175c97;
            font-size: 24pt;
            border: #175c97 solid 2px;
            margin: 4px 2px;
            width: 204px;
            height: 40px;            
        }
.uguale {
            width: 208px;
        }

Chiaramente potete personalizzare con la formattazione desiderata la vostra calcolatrice con javascript.

Infine implementiamo il codice javascript.

Il codice è veramente molto semplice. Realizziamo la funzione n(dato) che di volta in volta prende i dati inseriti cliccando sui tasti in quanto utilizza il metodo getElementById().

Poi realizziamo la funzione che compie le operazioni utilizzando l’istruzione eval che restituirà il risultato della nostra operazione.

Infine realizziamo la funzione che semplicemente cancella il display.

<script type="text/javascript">
 function n(dato){ 
   document.getElementById("operazioni").value+=dato;
}

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

function cancella() { 
 document.getElementById("operazioni").value=""; 
}
</script>

Come vi dicevo questo è un semplice metodo per creare una calcolatrice con javascript, potete trovare tante altre soluzioni.

Alcuni link utili:

Template responsive con html

Css Responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Form in html

Tag strong

Collegamenti interni ad una pagina web

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *