A seguito della discussione: http://forum.html.it/forum/showthrea...readid=2967663

ho provato a rielaborare l'applicazione realizzata dall'utente lanvoel, cioè una calcolatrice virtuale in JavaScript. Ho cercato di impostare lo sviluppo secondo quelli che potrebbero essere i criteri per una buona programmazione. Ovviamente non è, e non vuole essere, un'applicazione di livello professionale, ma può essere invece una base implementabile e personalizzabile o uno snippet da cui prendere spunto o tuttalpiù un esercizio a scopo didattico.

Ho impostato l'elaborato cercando di mantenere ben definite, come da buona norma, le tre componenti: HTML (struttura), CSS (presentazione), JavaScript (azione).
Sarà quindi possibile esaminare/modificare/implementare distintamente ciascuno di questi aspetti.

Propongo di seguito due versione, una prima versione più semplice (forse più digeribile da chi è a digiuno) e una più elaborata (sia nella parte CSS sia nel JavaScript).

Nella versione semplice ho giusto "iniettato" le funzioni JavaScript attraverso l'evento onclick sui tag <input> che compongono i tasti della calcolatrice.

E' chiaro che essendo una base, ci sono diverse carenze sopratutto a livello JavaScript. Una tra tutte è l'uso di eval() per l'elaborazione delle espressioni nel display. Dal momento che manca un controllo nell'inserimento dei dati, questa funzione può generare dei risultati inattesi se non altamente disastrosi. Infatti tale funzione va ad elaborare l'espressione risolvendola ed eseguendola come un normale script, per cui se non c'è un controllo accurato dei dati che gli si danno in pasto, è possibile che lo stesso risultato vada a rompere l'esecuzione dello script sulla pagina (per tale motivo spesso viene usata l'espressione "eval is evil").

Ma ripeto, in questo caso parliamo di applicazione a scopo didattico, per cui non c'è da allarmarsi; anzi, chi volesse, potrà cimentarsi nell'implementare un sistema di validazione e controllo dei dati in input o, magari, proprio un sistema più robusto per l'inserimento dei dati, partendo appunto da questa base.

Attualmente lo script che si occupa di questo sta dentro la funzione risolviEspressioneDisplay().

Qui lo snippet della versione semplice (ci sono un po' di commenti ma nulla di troppo dettagliato, il codice mi pare già abbastanza autodescrittivo):
codice:
<!doctype html>
<html lang="it">
   <head>
      <title>Calcolatrice</title>
      <style>                                                                          /*-- QUI IL CSS PER LA FORMATTAZIONE DI TUTTO IL LAYOUT --*/
                                                                                       

         * {
            box-sizing: border-box;                                                    /* Piccolo reset di base */
         }
         
         body {
            background: #e4dddb;
         }
         
         #calcolatrice {                                                               /* Contenitore principale */
            width: 350px;
            padding: 7px;
            background: #445066;
         }
         
         #display {                                                                    /* Display */
            width: 100%;
            margin: 5px 0 10px;
            padding: 4px;
            font: 24px/1 "Lucida Console", Monaco, monospace;
            text-align: right;
            border: 1px solid #112e13;
            color: #010d00;
            background: #a5cb8d;
         }
         
         #display::-ms-clear {                                                         /* Fix IE/Edge rimuove il noioso pulsante X che appare al focus dell'input */
            display: none;
         }
         
         #pulsantiera {                                                                /* Contenitore dei tasti */
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
            padding: 10px;
            background: #e0e1e9;
         }
         
         #pulsantiera input {                                                          /* Tasti */
            width: calc(90% / 4);                                                      /* Larghezza del tasto. Si crea una griglia a 4 colonne con un po' di spazio tra i tasti */
            margin: 3px 0;                                                             /* Interspazio tra le righe di tasti */
            padding: 5px;
            font: bold 20px/1.2 "Arial Black", Gadget, sans-serif;
            text-align: center;
            border: 1px solid #555;
            color: #fff;
            background: #7da5d6;
            cursor: pointer;
         }
         
         #pulsantiera input:hover {                                                    /* Hover sui tasti */
            border-color: #fff;
            opacity: .7;
         }
         
      </style>
      <script>                                                                         /*-- QUI IL JAVASCRIPT CON LE FUNZIONI PRINCIPALI --*/
         
         var display;
         
         window.onload = inizializza;
         
         function inizializza(){
            display = calcolatrice.display;                                            // Fix IE11, nel riferimento agli elementi del form deve essere specificato il nome del form
                                                                                       // (per gli altri browser funziona anche senza)
         }
         
         function aggiungiAlDisplay(valore){
            visualizza(display.value + valore);
         }
         
         function rimuoviUltimoCarattere(){
            visualizza(display.value.slice(0, -1));
         }
         
         function inserisciFunzione(nomeFunzione){
            visualizza(' '+nomeFunzione+'('+display.value+')');
         }
         
         function risolviEspressioneDisplay(){
            visualizza(eval(display.value));
         }
         
         function visualizza(valore){
            display.value = valore;
            spostaCursoreAllaFine(display);
         }
         
         function spostaCursoreAllaFine(el){                                           // Posiziono il cursore alla fine del campo e forzo la visualizzazione di quella parte quando il testo è più lungo del campo
            display.focus();
            el.style.textIndent = "-999em";                                            // Soluzione crossbrowser FF59, CH67, Edge, IE11
            el.onkeydown = function() {
              this.style.textIndent = "0";
              this.onkeydown = function(){};
            }
         }
         
      </script>
   </head>
   <body>                                                                              <!-- QUI IL CODICE HTML PER LA STRUTTURA DELL'APPLICAZIONE -->
                                                                                       <!-- Le funzioni JavaScript sono comunque richiamate attraverso l'evento onclick per ciascun tasto/input -->
      
      <form name="calcolatrice" id="calcolatrice" onsubmit="risolviEspressioneDisplay(); return false;">
      
         <input name="display" id="display" autofocus>
         <div id="pulsantiera">
            
            <input type="button" value="sin" onclick="inserisciFunzione('Math.sin')">
            <input type="button" value="cos" onclick="inserisciFunzione('Math.cos')">
            <input type="button" value="tan" onclick="inserisciFunzione('Math.tan')">
            <input type="button" value="atn" onclick="inserisciFunzione('Math.atan')">
            
            <input type="button" value="(" onclick="aggiungiAlDisplay('(')">
            <input type="button" value=")" onclick="aggiungiAlDisplay(')')">
            <input type="button" value="←" onclick="rimuoviUltimoCarattere()">
            <input type="reset"  value="C">

            <input type="button" value="1" onclick="aggiungiAlDisplay('1')">
            <input type="button" value="2" onclick="aggiungiAlDisplay('2')">
            <input type="button" value="3" onclick="aggiungiAlDisplay('3')">
            <input type="button" value="+" onclick="aggiungiAlDisplay('+')">

            <input type="button" value="4" onclick="aggiungiAlDisplay('4')">
            <input type="button" value="5" onclick="aggiungiAlDisplay('5')">
            <input type="button" value="6" onclick="aggiungiAlDisplay('6')">
            <input type="button" value="-" onclick="aggiungiAlDisplay('-')">

            <input type="button" value="7" onclick="aggiungiAlDisplay('7')">
            <input type="button" value="8" onclick="aggiungiAlDisplay('8')">
            <input type="button" value="9" onclick="aggiungiAlDisplay('9')">
            <input type="button" value="×" onclick="aggiungiAlDisplay('*')">

            <input type="button" value="0" onclick="aggiungiAlDisplay('0')">
            <input type="button" value="." onclick="aggiungiAlDisplay('.')">
            <input type="submit" value="=">
            <input type="button" value="÷" onclick="aggiungiAlDisplay('/')">

         </div>
         
      </form>
   </body>
</html>