|
| 1 | +--- |
| 2 | +layout: page |
| 3 | +title: Random |
| 4 | +permalink: /js/random/ |
| 5 | +--- |
| 6 | + |
| 7 | +Un cas de figure qui exige le recours le JavaScript est le besoin de produire un résultat aléatoire. |
| 8 | + |
| 9 | +En effet, les languages descriptifs que sont le HTML et CSS permettent de structurer et styler des documents, mais il leur est impossible de recourir à l'aléatoire, p.ex. de changer une couleur aléatoirement à chaque chargement de page. Le HTML et le CSS ne connaissent pas le hasard! |
| 10 | + |
| 11 | +Pour produire de l'aléatoire, nous avons besoin d'un langage dynamique comme le JavaScript. Le JavaScript contient toutes sortes de fonctions mathématiques, via l'objet `Math`. |
| 12 | + |
| 13 | +## La fonction Math.random() |
| 14 | + |
| 15 | +L'objet `Math` possède une fonction très utile, qui va nous permettre de "produire de l'aléatoire": c'est la méthode Math.random(). |
| 16 | + |
| 17 | +Voici ce que fait Math.random(): "La fonction Math.random() renvoie un nombre flottant pseudo-aléatoire, généré entre 0 (inclus) et 1 (exclu)". |
| 18 | + |
| 19 | +En d'autres termes, ... |
| 20 | + |
| 21 | +Exemple: |
| 22 | + |
| 23 | +0.06658971550365189 |
| 24 | +Math.random() |
| 25 | +0.06022587418583303 |
| 26 | +Math.random() |
| 27 | +0.9733255967240118 |
| 28 | +Math.random() |
| 29 | +0.47738639041701836 |
| 30 | +Math.random() |
| 31 | +0.7644723346354934 |
| 32 | +Math.random() |
| 33 | +0.9238101088571498 |
| 34 | +Math.random() |
| 35 | +0.5152607963708404 |
| 36 | +Math.random() |
| 37 | +0.14983993531041606 |
| 38 | + |
| 39 | +Comme on le voit, cette fonction produit une valeur aléatoire comprise entre 0 et 1. Cela semble d'une utilité très limitée, mais sachant que la valeur obtenue peut être multipliée par un autre nombre, il est possible d'obtenir au final des nombres aléatoires dans un intervalle qu'on peut spécifier librement. |
| 40 | + |
| 41 | +À partir de là, imaginons que nous souhaitons avoir un nombre aléatoire allant de 1 à 100 (inclus). |
| 42 | + |
| 43 | +Il nous faut faire une opération mathématique. |
| 44 | + |
| 45 | +Le meilleure méthode est de créer une fonction qui nous permet de définir à la volée les chiffres maximum et minimum. Voici une fonction d'usage courant: |
| 46 | + |
| 47 | +```javascript |
| 48 | +function getRandom(min, max) { |
| 49 | + return Math.floor(Math.random() * (max - min + 1)) + min; |
| 50 | +} |
| 51 | +``` |
| 52 | + |
| 53 | +Cela semble un peut complexe, mais tout est logique! |
| 54 | + |
| 55 | +Avec cette fonction, si on veut obtenir un chiffre aléatoire situé entre un minimum et un maximum. |
| 56 | +Pour un chiffre entre 111 et 777, on écrit: getRandom(111, 777). |
| 57 | + |
| 58 | +Pour attribuer une position aléatoire située entre 10% et 90%, voici comment procéder: |
| 59 | + |
| 60 | +document.getElementById("heure").style.top = getRandom(10, 90)+'%'; |
| 61 | + |
| 62 | +*** |
0 commit comments