Génération de nombres aléatoires en JavaScript avec Math.random()

Dans cet article, nous verrons comment générer des nombres aléatoires en JavaScript avec Math.random()en créant une fonction que vous pouvez réutiliser à diverses fins, telles que le chargement d’images aléatoires, la sélection d’un élément aléatoire dans un tableau et la génération de couleurs, de lettres, de chaînes, de phrases et de mots de passe aléatoires.

Aléatoire en JavaScript

Il est toujours utile de pouvoir ajouter un élément d’aléatoire à vos programmes. Vous voudrez peut-être pimenter votre site Web en ajoutant des styles aléatoires, générer une phrase aléatoire ou ajouter un élément de chance à un jeu (ils sont largement utilisés dans ce Jeu de Numblepar exemple).

Malheureusement, il est en fait très difficile de créer une valeur vraiment aléatoire (sauf si vous avez accès à certains matériau radioactif … ou un singe avec un clavier. Pour contourner ce problème, les langages de programmation utilisent des méthodes déterministes pour produire nombres pseudo-aléatoires. Ce sont des chiffres qui apparaître être aléatoires, mais sont en fait générés par des fonctions qui acceptent valeurs de départ en fonction d’événements tels que l’heure ou la position du pointeur de la souris.

JavaScript a le random fonction, qui est une méthode de la fonction intégrée Math objet. La norme ECMAScript ne spécifie pas comment cette fonction doit générer un nombre aléatoire, c’est donc aux fournisseurs de navigateurs de l’implémenter. Au moment de la rédaction, tous les principaux navigateurs utilisent actuellement le xorshift128+ algorithme en arrière-plan pour générer un nombre pseudo-aléatoire.

Pour l’utiliser, entrez simplement Math.random() et il renverra un nombre décimal à virgule flottante pseudo-aléatoire entre 0 (inclus) et 1 (exclusif) :

const x = Math.random();

Cela peut être représenté par l’inégalité suivante :

0 <= x < 1

Mais que se passe-t-il si vous voulez un nombre aléatoire supérieur à 1 ? Facile : tout ce que vous avez à faire est de multiplier par un facteur d’échelle pour le mettre à l’échelle — par exemple, multiplier le résultat par 10 produira une valeur comprise entre 0 (inclus) et 10 (exclu) :

const y = Math.random()*10

La raison en est visible si nous multiplions les deux côtés de l’inégalité précédente par 10 :

0 <= y < 10

Mais le résultat est toujours un nombre décimal à virgule flottante. Et si on voulait un entier aléatoire ? Simple : il suffit d’utiliser le Math.floor fonction de arrondir la valeur renvoyée jusqu’à l’entier ci-dessous. Le code suivant attribuera un entier aléatoire de 0 à 9 inclus à la variable z:

const z = Math.floor(Math.random()*10)

Notez que, même si nous multiplions par 10, la valeur renvoyée ne monte que jusqu’à 9.

Nous pouvons généraliser cette méthode pour créer une fonction qui retournera un entier aléatoire entre 0 et jusqu’à, mais non comprisle nombre fourni en argument :

function randomInt(number){
  return Math.floor(Math.random()*(number))
}  

Nous pouvons maintenant utiliser cette fonction pour renvoyer un chiffre aléatoire entre 0 et 9 :

const randomDigit= randomInt(10)

Nous avons donc maintenant un moyen de créer un entier aléatoire. Mais qu’en est-il d’un nombre entier aléatoire entre deux valeurs différentes, ne commençant pas toujours à zéro ? Tout ce que nous avons à faire est d’utiliser le code ci-dessus et ajouter sur la valeur à partir de laquelle nous voulons que la plage commence. Par exemple, si nous voulions générer un entier aléatoire entre 6 et 10 inclus, nous commencerions par utiliser le code ci-dessus pour générer un entier aléatoire entre 0 et 4, puis ajouterions 6 au résultat :

const betweenSixAnd10 = Math.floor(Math.random()*5) + 6

Notez que, pour générer un entier aléatoire entre 0 et 4nous avons en fait dû multiplier par 5.

On peut généraliser cette méthode pour créer une fonction qui renverra un entier aléatoire entre deux valeurs :

function randomIntBetween(min,max){
  Math.floor(Math.random()*(max - min + 1)) + min
}   

Il s’agit simplement d’une forme généralisée du code que nous avons écrit pour obtenir un nombre aléatoire entre 6 et 10, mais avec 6 remplacé par le min paramètre et 10 remplacé par le max paramètre. Pour l’utiliser, il suffit d’entrer deux arguments pour représenter les limites inférieure et supérieure du nombre aléatoire (inclus). Ainsi, pour simuler le lancement d’un dé à six faces, nous pourrions utiliser le code suivant pour renvoyer un entier compris entre 1 et 6 :

const dice = randomIntBetween(1,6)

Pour montrer comment le randomIntBetween fonction fonctionne, je l’ai connectée à du HTML dans la démo ci-dessous, vous pouvez donc modifier les valeurs de min et max et générer un nombre entier aléatoire en cliquant sur le bouton (qui pourrait être utilisé pour reproduire les dés de différentes tailles utilisés dans Dungeons & Dragons et des jeux similaires).

Voir le stylo
Entier aléatoire – SitePoint par SitePoint (@SitePoint)
sur CodePen.

Maintenant que nous avons quelques fonctions pour générer des entiers aléatoires, nous pouvons les utiliser pour faire des choses intéressantes.

Charger une image aléatoire

Pour commencer, nous utiliserons notre randomInt fonction pour charger une photo aléatoire à partir du Bienvenue sur le site Picsum. Ce site fournit une base de données d’images d’espace réservé, chacune avec un identifiant entier unique. Cela signifie que nous pouvons créer un lien vers une image aléatoire en insérant un entier aléatoire dans l’URL.

Tout ce que nous avons à faire est de configurer le HTML suivant qui affichera l’image avec un ID de 0 :

<button id="randomPhoto">Random Photo</button>
<p id="photo"><img src="https://picsum.photos/id/0/200/200"></p>

Ensuite, nous pouvons connecter le JavaScript suivant pour générer un entier aléatoire pour l’ID et mettre à jour le HTML pour afficher une nouvelle image au hasard lorsque le bouton est cliqué :

document.getElementById("randomPhoto").addEventListener("click",e => document.getElementById("photo").innerHTML = `<img src="https://picsum.photos/id/${randomInt(100)}/200/200">`)

Vous pouvez le voir sur la démo CodePen ci-dessous.

Voir le stylo
Photo aléatoire – SitePoint par SitePoint (@SitePoint)
sur CodePen.

Générer une couleur aléatoire

En HTML et CSS, les couleurs sont représentées par trois entiers compris entre 0 et 255, écrits en hexadécimal (base 16). Le premier représente le rouge, le deuxième le vert et le troisième le bleu. Cela signifie que nous pouvons utiliser notre randomInt pour créer une couleur aléatoire en générant trois nombres aléatoires entre 0 et 255 et en les convertissant en base 16. Pour convertir un nombre en une base différente, vous pouvez fournir un argument à la toString donc le code suivant renverra un nombre hexadécimal aléatoire entre 0 et FF (255 en hexadécimal) :

randomInt(0,255).toString(16)
<< 2B

Nous pouvons maintenant écrire un randomColor fonction qui renverra un code couleur HTML :

function randomColor(){ 
  return `#${randomInt(1,255).toString(16)}${randomInt(1,255).toString(16)}${randomInt(1,255).toString(16)}`
}

Cela renvoie un modèle littéral qui commence par le caractère dièse par lequel commencent tous les codes de couleur HTML, puis concatène trois entiers aléatoires entre 0 et 255 en base 16 jusqu’à la fin.

Appelant le randomColor renverra une chaîne de couleur HTML aléatoire :

randomColor()
<< #c2d699

J’ai relié la fonction à un bouton HTML afin qu’il change la couleur d’arrière-plan du document chaque fois que le bouton est cliqué dans la démo CodePen ci-dessous.

Voir le stylo
Couleur aléatoire – SitePoint par SitePoint (@SitePoint)
sur CodePen.

Générer une lettre aléatoire

Nous avons déjà une fonction pour créer un entier aléatoire, mais qu’en est-il des lettres aléatoires ? Heureusement, il existe un bon moyen de convertir des nombres entiers en lettres à l’aide de bases numériques. En base 36, les entiers de 10 à 35 sont représentés par les lettres « a » à « z ». Vous pouvez vérifier cela en convertissant certaines valeurs en base 36 dans la console à l’aide de la toString méthode:

(24).toString(36)
(16).toString(36)

Maintenant que nous savons cela, il devrait être facile d’écrire un randomLetter fonction qui utilise notre randomInt pour générer un entier aléatoire entre 10 et 35 et renvoie sa représentation sous forme de chaîne en base 36 :

function randomLetter(){
 return randomInt(10,35).toString(36)
}

Appel randomLetter doit renvoyer une lettre minuscule aléatoire de « a » à « z »:

randomLetter()
<< "o"

randomLetter()
<< "g"

J’ai relié la fonction à un bouton HTML afin que vous puissiez voir comment cela fonctionne dans la démo CodePen ci-dessous.

Voir le stylo
Lettre aléatoire – SitePoint par SitePoint (@SitePoint)
sur CodePen.

Génération d’une chaîne aléatoire

Maintenant que nous pouvons créer des lettres aléatoires, nous pouvons les assembler pour créer des chaînes de lettres aléatoires. Écrivons un randomString fonction qui accepte un seul paramètre, n — qui représente le nombre de lettres aléatoires que nous voulons dans la chaîne renvoyée. Nous pouvons créer une chaîne de lettres aléatoires en créant un tableau ou une longueur n puis en utilisant le map méthode pour changer chaque élément en une lettre aléatoire. On peut alors utiliser le join méthode pour convertir le tableau en une chaîne de lettres aléatoires :

function randomString(numberOfLetters){
  return [...Array(numberOfLetters)].map(randomLetter).join``
}

Appel randomString(n) doit renvoyer une chaîne aléatoire de n des lettres:

randomString(5)
<< "xkibb"

randomLetter(3)
<< "bxd"

J’ai relié la fonction à un bouton HTML afin que vous puissiez voir comment cela fonctionne dans la démo CodePen ci-dessous.

Voir le stylo
Chaîne aléatoire – SitePoint par SitePoint (@SitePoint)
sur CodePen.

Choisir un élément aléatoire dans un tableau

Il est souvent utile de pouvoir choisir un élément aléatoire dans un tableau. C’est assez facile à faire en utilisant notre randomInt fonction. Nous pouvons sélectionner un index dans le tableau au hasard, en utilisant la longueur du tableau comme argument et en renvoyant l’élément à cet index depuis le tableau :

function randomPick(array){
 return array[randomInt(array.length)]
}

Prenons par exemple le tableau suivant qui représente une liste de fruits :

const fruits = ["🍏",🍌","🍓","🥝","🍋","🍐","🫐","🍉"]

Vous pouvez choisir un fruit au hasard en utilisant le code suivant :

randomPick(fruits)
<< "🍉"

Générer une phrase aléatoire

Maintenant que nous avons une fonction qui sélectionne un élément aléatoire dans des tableaux, nous pouvons l’utiliser pour créer des phrases aléatoires. Vous voyez souvent cette technique utilisée comme noms d’utilisateur d’espace réservé sur les sites Web. Pour commencer, créez trois tableaux, un contenant des chaînes d’adjectifs, un contenant des couleurs et l’autre des noms, similaires à ceux illustrés ci-dessous :

const adjectives = ["Quick","Fierce","Ugly","Amazing","Super","Spectacular","Dirty","Funky","Scary"]
const colors = ["Brown","Red","Orange","Black","White","Purple","Pink","Yellow","Green","Blue"]
const nouns = ["Fox","Bear","Monkey","Hammer","Table","Door","Apple","Banana","Chair","Chicken"]

Maintenant que nous avons ces trois tableaux, il est facile de créer une phrase aléatoire en utilisant notre randomPick fonction. Nous choisissons simplement un élément aléatoire dans chaque tableau et les concaténons, avec des espaces entre eux pour former une phrase :

function randomPhrase(a,c,n){
  return `${randomPick(a)} ${randomPick(c)} ${randomPick(n)}`
}

Appel randomPhrase devrait renvoyer une phrase aléatoire au son légèrement amusant — avec une couleur, un adjectif et un nom :

randomPhrase()
<< "Funky Pink Chicken"

J’ai relié la fonction à un bouton HTML afin que vous puissiez créer des phrases farfelues en appuyant sur le bouton dans la démo CodePen ci-dessous.

Voir le stylo
Phrase aléatoire – SitePoint par SitePoint (@SitePoint)
sur CodePen.

Génération d’un mot de passe aléatoire

La dernière utilisation d’entiers aléatoires que nous examinerons est la génération d’une chaîne de mot de passe aléatoire. Les règles communes pour un mot de passe sont qu’il contient au moins :

• huit caractères
• un caractère numérique
• un caractère spécial non alphanumérique

Un exemple qui correspond à ces règles pourrait être :

secret!1

Nous avons déjà les fonctions qui peuvent produire chacun de ces éléments pour nous. Dans un premier temps, nous utiliserons randomString(6) pour créer une chaîne aléatoire de six lettres. Ensuite, nous utiliserons le randomPick fonction pour sélectionner un caractère spécial dans un tableau, puis nous utiliserons randomInt(9) pour renvoyer un chiffre aléatoire. Tout ce que nous avons à faire est de les concaténer et nous aurons un mot de passe généré aléatoirement !

Nous pouvons mettre cela ensemble dans une fonction qui renverra une chaîne de mot de passe aléatoire :

function generatePassword(){
  return randomString(6) + randomPick(["!","%","?","&","@","£","$","#"]) + randomInt(9)
}

Appel generatePassword doit renvoyer un mot de passe aléatoire qui respecte les trois règles ci-dessus :

generatePassword()
<< "ykkefn@8"

J’ai relié la fonction à un bouton HTML afin que vous puissiez essayer de générer des mots de passe aléatoires en appuyant sur le bouton dans la démo CodePen ci-dessous.

Voir le stylo
Mot de passe aléatoire – SitePoint par SitePoint (@SitePoint)
sur CodePen.

Une chose à remarquer est que toutes les fonctions que nous avons écrites utilisent le randomInt fonction que nous avons écrite au début. La generatePassword fonction que nous venons d’écrire, par exemple, est composée de randomInt,randomPick et randomString fonctions … et les randomString la fonction utilise le randomLetter fonction! C’est une pierre angulaire de la programmation : utiliser des fonctions comme blocs de construction pour des fonctions plus complexes.

Emballer

Nous avons discuté de la façon de générer des nombres aléatoires en JavaScript utile. J’espère que vous avez trouvé ce guide utile. La randomInt La fonction est certainement une fonction utile à avoir dans votre casier et vous aidera à ajouter un peu de hasard à vos projets.

Vous pouvez voir tous les exemples couverts dans cet article dans la démonstration CodePen suivante.

Voir le stylo
Aléatoire – SitePoint par SitePoint (@SitePoint)
sur CodePen.

Lecture connexe :