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:

<script type=”text/javascript””>
 <!–
  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:

alert(testoNumerico = testoNumerico * 2);

Da notare che in Javascript, come per la lingua inglese, viene utilizzato il carattere “punto” (.) invece del carattere “virgola” (,) per generare la separazione della parte intera del numero dalla parte decimale.

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 – costante matematica di Eulero, vale 2.718281828459045 [esempio]

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

• Math.LN10 – corrisponde al logaritmo naturale di 10, vale 2.302585092994046 [esempio]

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

• Math.LN2 – corrisponde al logaritmo naturale di 2, vale 0.6931471805599453 [esempio]

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

• Math.LOG10E – corrisponde al logaritmo in base 10 di Eulero, vale 0.4342944819032518 [esempio]

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

• Math.LOG2E – corrisponde al logaritmo in base 2 di Eulero, vale 1.4426950408889633 [esempio]

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

• Math.PI – P Greco (3.14), vale per intero [esempio]

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

• Math.SQRT2 – radice quadrata di 2, vale 1.4142135623730951 [esempio]

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

• Math.SQRT1_2 – inverso della radice quadrata di 2, vale 0.7071067811865476 [esempio]

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

Metodi dell’oggetto Math()

• Math.abs() – calcola il valore assoluto di un numero restituendolo senza il segno algebrico (+ oppure -) [esempio]

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

• Math.acos() – calcola l’arco coseno in radianti di un numero compreso tra 1 e -1 [esempio]

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

• Math.asin() – calcola l’arco seno di un numero compreso tra 1 e -1 [esempio]

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

• Math.atan() – calcola l’arco tangente di un numero [esempio]

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

• Math.ceil() – arrotonda un numero (per eccesso) all’intero successivo (es: 0.5 = 1) [esempio]

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

• Math.cos() – coseno [esempio]

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

• Math.exp() – calcola il valore della costante matematica di Eulero elevato a potenza [esempio]

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

• Math.floor() – arrotonda un numero (per per difetto) all’intero inferiore (es: 0.5 = 0) [esempio]

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

• Math.log() – logaritmo naturale [esempio]

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

• Math.max() – restituisce il maggiore tra due numeri (es: 10 e 20 = 20) [esempio]

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

• Math.min() – restituisce il minore tra due numeri (es: 10 e 20 = 10) [esempio]

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

• Math.pow() – calcola la potenza di un numero (es: 10² = 100) [esempio]

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

• Math.random() – restituisce un numero casuale compreso tra 0 e 1 [esempio]

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

• Math.round() – arrotonda un numero al suo intero più vicino, per eccesso se è la metà (es: 0.4 = 0, 0.5 = 1, 0.6 = 1) [esempio]

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

• Math.sin() – seno di un numero [esempio]

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

• Math.sqrt() – redice quadrata di un numero [esempio]

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

• Math.tan() – tangente di un numero [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:

function Banner() {
   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:

<form name=”convertitore”>
   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, utilizziamo quindi Math.round() per arrotondare all’intero più vicino, in questo modo: