Math random in JavaScript

da Cristina | Giu 16, 2019 | Javascript

La funzione Math.random in JavaScript consente di generare un numero decimale pseudo-casuale tra 0 compreso e 1 escluso.

Facciamo subito un esempio di utilizzo della seguente funzione.

Primo esempio d’uso della funzione math random in JavaScript

Fate la prova a cliccare sul pulsante sotto ‘genera casuale‘. Si genera un numero casuale tra 0 e 100 e se fate la prova a cliccare nuovamente sul pulsante chiaramente il numero cambia. Quindi di volta in volta si genera un nuovo numero.

Per implementare questo esempio sviluppiamo una funzione che richiami le funzioni Math.random() e Math.round().

La funzione Math.random() genera un numero pseudo-casuale in virgola mobile compreso tra 0 e 1, con 1 escluso.

Ricordiamo che la funzione Math.round() restituisce il valore di un numero approssimato all’intero ad esso più vicino.

Quindi per generare i numeri casuali da 0 a 100 usiamo Math.random()*100 e poi con la funzione Math.round arrotondiamo all’intero.

Potevamo utilizzare anche la funzione Math.floor ma Math.floor( Math.random()*100) genera dei numeri da 0 a 99 e quindi per avere i numeri da 0 a 100 avremmo dovuto scrivere: Math.floor(Math.random() * 101).

Ecco dunque la funzione JavaScript:

function casuale() {
    num = Math.round(Math.random() * 100);
    document.getElementById("casuale").innerHTML ="Numero casuale " + num;
}

Creiamo poi in html una casella di input di tipo button per il pulsante, a cui associamo l’evento onclick che richiama la funzione casuale().

<input type="button" onclick="casuale()" value="Genera casuale">
<p id="casuale"></p>

Quindi ad esempio se voglio generare i numeri da 1 a 6 scrivo: Math.round(Math.random()*5)+1;

Secondo esempio d’uso della funzione Math.random in JavaScript

In questo secondo esempio chiediamo all’utente quanti numeri casuali vuole generare, trascrivendoli in una casella di input. Dunque clicchiamo sul pulsante e li generiamo.

Procediamo generando la funzione Math.random per generare i numeri casuali.

Innanzitutto controlliamo che il numero inserito nel campo quanti numeri generare sia compreso tra 1 e 100 con un if. Se lo è procediamo a generare i numeri, altrimenti diamo un messaggio d’avviso all’utente affinché inserisca un valore compreso tra 1 e 100.

Utilizziamo la funzione parseInt per restituire comunque un numero intero.

Quindi con un semplice ciclo for genero i numeri e li stampo separati da una virgola.

function casuali() {
  n = parseInt(document.getElementById("quanti").value);
  if (n > 0 && n <= 100) {
    str = "";
    for (i = 0; i < n; i++) {
         num = Math.round(Math.random()*100 + 1);
         if (i > 0) {
            str += ", ";
         }
         str += num;
     }
   document.getElementById("casuali").innerHTML = "Numeri generati: " + str;
   } 
   else {
      document.getElementById("casuali").innerHTML = "Inserisci un numero maggiore di 0 e inferiore a 100";
   }
}

Ecco il codice html:

<p>Quanti numeri generare? 
   <input type="text" id="quanti">
   <input type="button" onclick="casuali()" value="Genera casuali">
</p>
<p id="casuali"></p>

Questi sono solo alcuni semplici esempi d’utilizzo della funzione Math.random in JavaScript.

Alcuni link utili

Indice argomenti tutorial JavaScript

Template responsive con html

Come creare un css responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web