CALCOLATRICE IN JAVASCRIPT
[iframe style=”margin-left: 120px;” width=”100%” height=”350px” src=”http://82.85.184.181/fileshare/sitosimo/calc_edit.html”]
Per la creazione di questa calcolatrice iniziamo a definire gli spazi in cui verrano posizionati i nostri elementi (numeri e operazioni) includendoli nei tag div. Per la visualizzazione delle operazioni utilizziamo un input text. Lo stile(CSS) della calcolatrice è stato definito in linea al file, per comodità può essere integrato con un file esterno col tag import <link rel=”stylesheet” type=”text/css” href=”nome_del_file.css”>posizionato tra il tag head. Questo codice HTML dovrà essere racchiuso nei tag <html><body> inserire il codice html </body></html>.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="calcolatrice"> <input type="text" style="text-align:right;height:40px;width:306px;border:solid black 1px;font-size:30px" id="coefficiente" ><br><br> <div class="cella" onclick="scrivi('1')">1</div> <div class="cella" onclick="scrivi('2')">2</div> <div class="cella" onclick="scrivi('3')">3</div> <div class="cella2" onclick="operazione(0)" >+</div> <div class="cella3" onclick="operazione(1)">-</div> <div style="clear:both;"></div> <div class="cella" onclick="scrivi('4')" >4</div> <div class="cella" onclick="scrivi('5')" >5</div> <div class="cella" onclick="scrivi('6')" >6</div> <div class="cella2" onclick="operazione(2)">x</div> <div class="cella3" onclick="operazione(3)">÷</div> <div style="clear:both;"></div> <div class="cella" onclick="scrivi('7')">7</div> <div class="cella" onclick="scrivi('8')">8</div> <div class="cella" onclick="scrivi('9')">9</div> <div class="cella2" onclick="operazione(4)">!</div> <div class="cella3" onclick="operazione(5)">√</div> <div style="clear:both;"></div> <div class="cella" onclick="scrivi('0')">0</div> <div class="cella" onclick="cancellaUltimo()">C-1</div> <div class="cella" onclick="sbianca(0)">C</div> <div class="cella4" onclick="uguale()">=</div> </div> |
JAVASCRIPT
Per far funzionare la calcolatrice utilizziamo delle funzioni chiamate all’ onclick dei pulsanti. Si possono tranquillamente sostituire con delle jQuery della libreria Math.js. Utilizzare funzioni personali permette più vestatilità e personalizzazione.
Per prima cosa creiamo delle variabili globali che useremo nelle varie funzioni.
-Con la prima funzione visualizziamo sull’ input text il numero selezionato sostituendo al parametro “valore” il contenuto selezionato.
-Con la seconda funzione configuriamo il pulsante “C” assegnandogli il valore di stringa vuota, le variabili vengono reinizializzate per resettare le operazioni precedenti.
-Con la terza funzione configuriamo il pulsante “C-1” per poter cancellare l’ultimo numero scritto. Utilizziamo il metodo substring per ritornare una determinata lunghezza del valore scelto.
-Con la quarta funzione configuriamo le operazioni (+ , – , x , ÷ , ! , √ ). Assegnando alla variabile “tipoOp” il valore di “parOp” definiamo l’operazione che vogliamo eseguire assegnando alla funzione successiva il valore dell’operazione.
-Con l’ultima funzione configuriamo il pulsante “=”, all’ onclick eseguirà l’operazione in base al valore del parametro “tipoOp”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
var op1=0; var tipoOp=99; function scrivi(valore){ document.getElementById('coefficiente').value = document.getElementById('coefficiente').value + valore; } function sbianca(parS){ if(parS==0){ document.getElementById('coefficiente').value=''; op1=0; tipoOp=99; } else { document.getElementById('coefficiente').value=''; } } function cancellaUltimo(){ var str = document.getElementById('coefficiente').value; var res = str.substring(0,str.length -1 ); document.getElementById('coefficiente').value=res; } function operazione(parOp) { tipoOp = parOp; if(parOp==5){ op1= +document.getElementById('coefficiente').value; } else{ op1= +document.getElementById('coefficiente').value; sbianca(1); } } function uguale(){ if (tipoOp ==0){ document.getElementById('coefficiente').value=op1+ +document.getElementById('coefficiente').value; } else if (tipoOp ==1){ document.getElementById('coefficiente').value=op1- +document.getElementById('coefficiente').value; } else if (tipoOp ==2){ document.getElementById('coefficiente').value=op1* +document.getElementById('coefficiente').value; } else if (tipoOp ==3){ document.getElementById('coefficiente').value=op1/ +document.getElementById('coefficiente').value; } else if (tipoOp ==5){ document.getElementById('coefficiente').value=Math.sqrt(+document.getElementById('coefficiente').value) ; } else if (tipoOp==4) { var xx=1; for(i=1;i<=op1;i++){ xx=xx*i; } document.getElementById('coefficiente').value=xx; } else { document.getElementById('coefficiente').value= ' '; } } |
CSS
Con i CSS diamo uno stile alla nostra calcolatrice. Scriviamo quindi nei div la classe corrispondente. Per il contenuto esterno della calcolatrice utilizziamo un id in quanto l’elemento è univoco. Lo stile è totalmente personalizzabile, basta sostituire i valori alle proprietà della classe. Le dimensioni sono fisse data la dimensione ridotta dell’ oggetto, l’ideale sarebbe sempre creare dei contenuti responsive (utilizzando ad esempio le percentuali invece dei pixel). Sarebbe utile mantenere le proporzioni del contenuto calcolatrice con le celle dei pulsanti per non far uscire il loro contenuto.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
#calcolatrice{ border: 3px solid black; padding: 10px 10px 10px 10px; width: 310px; height: 270px; background-image: url(http://82.85.184.181/fileshare/sitosimo/megadeth.jpg); background-size: contain; background-position: center; } .cella{ background-color: ghostwhite; opacity: 0.8; padding-top: 10px; text-align: center; font-size: 30px; border: 1px solid black; float:left; width: 50px; height: 40px; } .cella2{ background-color: ghostwhite; opacity: 0.8; padding-top: 10px; text-align: center; font-size: 30px; margin-left: 50px; border: 1px solid black; float:left; width: 50px; height: 40px; } .cella3{ background-color: ghostwhite; opacity: 0.8; padding-top: 10px; text-align: center; font-size: 30px; margin-left: 256px; border: 1px solid black; width: 50px; height: 40px; } .cella4{ background-color: ghostwhite; opacity: 0.8; padding-top: 10px; text-align: center; font-size: 30px; margin-left: 50px; border: 1px solid black; float:left; width: 100px; height: 40px; } .cella:hover{ background-color:gainsboro; } .cella2:hover{ background-color:darkgray; } .cella3:hover{ background-color:darkgray; } |
