Operazioni matematiche in JavaScript: l'oggetto Math

Javascript e la matematica

La potenza di Javascript è concentrata sui controlli e sul calcolo matematico. Grazie alla sua sintassi C-like che lo contraddistingue tra tutti i linguaggi utilizzati sul Web, Javascript è considerato tra i migliori linguaggi dal punto di vista matematico.

Entriamo subito nel vivo della questione: Javascript, da linguaggio Object Oriented che si rispetti, possiede un oggetto che si occupa di svolgere, assieme ad una serie di metodi e proprietà, una svariata quantità di funzioni matematiche, facciamo subito la sua conoscenza anche se la approfondiremo più tardi... ladies and gentleman... l'oggetto Math() ;-).

Non è sempre necessario ricorrere a Math() per svolgere funzioni matematiche, possiamo utilizzare gli come concatenatori di una serie di variabili che, se numeriche, restituiranno il risultato di un calcolo prestabilito, o scelto dall'utente.

Vediamo di mettere in pratica quanto appena detto. Costruiremo una casella di testo, controlleremo istantaneamente con l'evento onKeyUp che vengano inseriti esclusivamente numeri, alla pressione del bottone verrà poi mostrato un alert() che riporterà la metà del numero di prova:

 <!--
  function mostraMezzoNumero() {
     var testoNumerico = document.moduloMezzoNumero.textboxMezzoNumero.value;
     alert(testoNumerico = testoNumerico / 2);
  }
  function soloNumeri() {
     var testoNumerico = document.moduloMezzoNumero.textboxMezzoNumero.value;
     if(isNaN(testoNumerico)) {
        alert("Inserire solo valori numerici, grazie!");
        document.moduloMezzoNumero.textboxMezzoNumero.value = "";
        document.moduloMezzoNumero.textboxMezzoNumero.focus();
     }
  }
 //-->
</script>
<form name="moduloMezzoNumero">
   <input type="text" name="textboxMezzoNumero" onKeyUp="soloNumeri()">
   <input type="button" value="Calcola" onClick="mostraMezzoNumero()">
</form>

Ecco l'esempio

Per far sì che venga eseguito il prodotto del numero per se stesso è sufficiente modificare il carattere di divisione / col carattere asterisco * in questo modo:

*  2);

Da notare che in Javascript, come per la lingua inglese, viene utilizzato il carattere "punto" (. ) invece del carattere "virgola" (,

Con una serie di trucchetti del genere è possibile risolvere "diplomaticamente" una serie di problematiche legate al controllo ed al calcolo.

Passiamo ora ad analizzare più da vicino l'oggetto Math() con le sue proprietà ed i suoi metodi. Per chi volesse visualizzare subito gli esempi pratici (un generatore di banner casuali e un convertitore lire euro), rimandiamo alla parte finale dell'articolo.

L'oggetto Math(): proprietà e metodi

L'oggetto Math() è dotato di ben 8 proprietà e 17 metodi. Mettiamoci subito all'opera per definire tutte le proprietà ed i metodi di Math() in maniera chiara e schematica:

Proprietà dell'oggetto Math()

• Math.E esempio

<script type="text/javascript"">
 <!--
  var miavariabile = Math.E;
  alert(miavariabile);
 //-->
</script>

• Math.LN10 esempio

<script type="text/javascript"">
 <!--
  var miavariabile = Math.LN10;
  alert(miavariabile);
 //-->
</script>

• Math.LN2 esempio

<script type="text/javascript"">
 <!--
  var miavariabile = Math.LN2;
  alert(miavariabile);
 //-->
</script>

• Math.LOG10E esempio

<script type="text/javascript"">
 <!--
  var miavariabile = Math.LOG10E;
  alert(miavariabile);
 //-->
</script>

• Math.LOG2E esempio

<script type="text/javascript"">
 <!--
  var miavariabile = Math.LOG2E;
  alert(miavariabile);
 //-->
</script>

• Math.PI esempio

<script type="text/javascript"">
 <!--
  var miavariabile = Math.PI;
  alert(miavariabile);
 //-->
</script>

• Math.SQRT2 esempio

<script type="text/javascript"">
 <!--
  var miavariabile = Math.SQRT2;
  alert(miavariabile);
 //-->
</script>

• Math.SQRT1_2 esempio

<script type="text/javascript"">
 <!--
  var miavariabile = Math.SQRT1_2;
  alert(miavariabile);
 //-->
</script>

Metodi dell'oggetto Math()

• Math.abs() esempio

<script type="text/javascript"">
 <!--
  var x = +50;
  var y = Math.abs(x);
  alert(y);
 //-->
</script>

• Math.acos() esempio

<script type="text/javascript"">
 <!--
  var x = Math.acos(0.5);
  alert(x);
 //-->
</script>

• Math.asin() esempio

<script type="text/javascript"">
 <!--
  var x = Math.asin(0.5);
  alert(x);
 //-->
</script>

• Math.atan() esempio

<script type="text/javascript"">
 <!--
  var x = Math.atan(10);
  alert(x);
 //-->
</script>

• Math.ceil() esempio

<script type="text/javascript"">
 <!--
  var x = Math.ceil(0.5);
  alert(x);
 //-->
</script>

• Math.cos() esempio

<script type="text/javascript"">
 <!--
  var x = Math.cos(10);
  alert(x);
 //-->
</script>

• Math.exp() esempio

<script type="text/javascript"">
 <!--
  var x = Math.exp(10);
  alert(x);
 //-->
</script>

• Math.floor() esempio

<script type="text/javascript"">
 <!--
  var x = Math.floor(0.5);
  alert(x);
 //-->
</script>

• Math.log() esempio

<script type="text/javascript"">
 <!--
  var x = Math.log(10);
  alert(x);
 //-->
</script>

• Math.max() esempio

<script type="text/javascript"">
 <!--
  var x = Math.max(10, 20);
  alert(x);
 //-->
</script>

• Math.min() esempio

<script type="text/javascript"">
 <!--
  var x = Math.min(10, 20);
  alert(x);
 //-->
</script>

• Math.pow() ² esempio

<script type="text/javascript"">
 <!--
  var x = Math.pow(10, 2);
  alert(x);
 //-->
</script>

• Math.random() esempio

<script type="text/javascript"">
 <!--
  var x = Math.random();
  alert(x);
 //-->
</script>

• Math.round() esempio

<script type="text/javascript"">
 <!--
  var x = Math.round(0.6);
  alert(x);
 //-->
</script>

• Math.sin() esempio

<script type="text/javascript"">
 <!--
  var x = Math.sin(10);
  alert(x);
 //-->
</script>

• Math.sqrt() esempio

<script type="text/javascript"">
 <!--
  var x = Math.sqrt(9);
  alert(x);
 //-->
</script>

• Math.tan() esempio

<script type="text/javascript"">
 <!--
  var x = Math.tan(10);
  alert(x);
 //-->
</script>

Qualche esempio pratico

Sono numerose le applicazioni che è possibile sviluppare servendosi del calcolo matematico. È possibile generare routine dinamiche che estraggono i propri valori da variabili che svolgono al loro interno dei calcoli matematici. Per rendere praticamente l'idea e capire fino in fondo come utilizzare un oggetto che si rifà alla materia scolastica più odiata in generale :-). Creiamo due servizi molto utili ed interessanti, un gestore di banner casuale ed un modulino per la conversione da Lire ad Euro.

Generare banner casuali in Javascript

Realizziamo il primo degli esempi citati. Reperiamo un numero qualsiasi di banner (o di immagini qualsiasi, trattandosi solo di un esempio) a ciascuno dei quali assoceremo un link, poi serviamoci del seguente codice per creare il servizio:

   var Immagini = new Array();
       Immagini[0]="/images/linguaggi/math_lukeonweb.gif";
       Immagini[1]="/images/linguaggi/math_html.gif";
   var Url = new Array();
       Url[0]="http://www.lukeonweb.net";
       Url[1]="http://www.html.it";
   var Banners = Math.floor(Math.random() * Immagini.length);
       document.write("<a href=" + Url[Banners] + "><img src=" + Immagini[Banners] + " border=0></a>");
}
Banner();

Inseriamo il codice in un file di testo con estensione .js (noi lo abbiamo chiamato banner_casuali.js) ed inseriamolo nel punto della pagina prescelto per mostrare i banner mediante l'inclusione:

<script type="text/javascript" src="banner_casuali.js"></script>

Esaminiamo la parte clou dello script, mi riferisco alla riga riportante il seguente codice:

var Banners = Math.floor(Math.random() * Immagini.length);

Abbiamo creato due Array(), uno per intabellare tutte le immagini ed uno per tutte le url, associate tra loro mediante l'identificatore numerico progressivo dell'Array(), a questo punto entra in gioco Math(), eseguiamo il prodotto di Math.random() per il numero totale di immagini generando grazie a Math.floor() un arrotondamento ad un numero intero che equivale ai banner totali, ecco un esempio:

Per notare il cambiamento del banner e del relativo link è necessario aggiornare la pagina

Convertitore Lire - Euro in Javascript

Passiamo al secondo esempio, un convertitore Lire Euro, realizziamo un semplice modulo:

   Converti da £ire a €uro: <input type="text" name="lire">
   <input type="button" value="Converti" onClick="Converti()">
</form>

Ecco lo script di riferimento:

<script type="text/javascript"">
 <!--
  function Converti() {
     var lire = document.convertitore.lire.value;
     var converti = lire / 1936.27;
     var risultato = Math.round(converti * 100) / 100;
        alert (risultato);
  }
 //-->
</script>

Se avessimo scelto di mostrare il risultato della variabile converti scegliendo come valore ad esempio 1000 Lire (che nostalgia...!) il risultato sarebbe stato questo

Converti da Lire a €: