Générer des actions aléatoires en Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Générer des actions aléatoires en Javascript

Dans cette formation Javascript très simple, nous proposons d'apprendre à générer des nombres aléatoires par le code, entre une borne inférieure et une borne supérieure, mais à des fins utiles. Cette génération aléatoire peut par exemple permettre de distiller, au fil de la navigation de l'internaute, des conseils ou astuces, selon la thématique du site Web.



Comme l'illustre la capture ci-dessus de l'application finalisée, des astuces informatiques aléatoires sont proposées au chargement de la page Web ainsi qu'au clic sur le bouton Générer. Ces astuces sont stockées dans une variable Javascript de type String. Elles sont toutes séparées par un caractère remarquable afin de pouvoir accéder à chacune d'entre elles indépendamment.

Sources et présentation du concept
Pour produire un contenu variable selon une génération aléatoire de nombres, nous avons besoin d'un fichier énumérant ces astuces ainsi que d'une page Html, prête à recevoir le code Javascript.

• Télécharger le fichier gestion-aleatoire-information.rar en cliquant sur son lien,
• Puis, le décompresser dans le dossier de votre choix,

La décompression conduit au fichier principal de la page Web, gestion-aleatoire-information.html, accompagné de ses ressources externes dans les sous dossiers. Parmi ces ressources, le sous dossier js propose le fichier de script externe recensant toutes les astuces informatiques à générer aléatoirement.

• Double cliquer sur le sous dossier js pour l'ouvrir,
• Puis, cliquer avec le bouton droit de la souris sur le fichier astuces.js,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur tel que le Notepad ++,

Comme vous le remarquez, ce fichier ne propose qu'une seule fonction, nommée liste_astuces. Et cette fonction se contente de déclarer une variable de type chaîne de caractères, dans laquelle sont énumérées toutes les astuces, séparées par un caractère remarquable, la barre verticale (|). A l'issue, grâce à l'instruction return, elle retourne cette chaîne au code Javascript qui l'appelle.

function liste_astuces()
{
var chaine = 'Un <strong>pouce</strong> est égal à <strong>2,54 cm</strong>.|
Le raccourci clavier pour fermer un programme est: <strong>Alt +F4</strong>.|
...
return chaine;
}

Vous notez de même la présence de caractères d'échappement, matérialisés par l'antislash () afin de pouvoir saisir le contenu de la variable dans le flux, c'est-à-dire sur plusieurs lignes. L'objectif consistera, depuis la page Internet principale, à appeler cette fonction pour récupérer, sous forme de variable, l'ensemble des astuces énumérées. Il s'agira ensuite de découper la chaîne de texte sur le caractère remarquable (|), afin de charger chaque astuce indépendamment dans une cellule d'un tableau de variables. Il ne restera plus qu'à exploiter les objets et méthodes permettant de générer un nombre aléatoire, compris entre la borne supérieure et inférieure du tableau. Ce nombre permettra de pointer sur l'une des cellules pour en extraire aléatoirement, l'astuce qu'elle contient, afin de l'afficher sur la page Web.

• Dans le dossier de décompression, double cliquer sur le fichier gestion-aleatoire-information.html, pour l'ouvrir dans un navigateur Internet,

Comme vous le remarquez, le structure Html de la page Web existe déjà. Elle est articulée grâce à l'imbrication de calques, balises Div mises en forme par une feuille de styles CSS. Mais à ce stade, aucune astuce n'est restituée, que ce soit au chargement de la page Internet ou au clic sur le bouton Générer.

• Dans le dossier de décompression, cliquer cette fois avec le bouton droit de la souris sur le fichier gestion-aleatoire-information.html,
• Dans le menu contextuel choisir de l'ouvrir dans un éditeur tel que le Notepad ++,

Nous accédons ainsi à la structure Html classique de la page Web. Nous pouvons y noter l'imbrication des calques dans lesquels nous devrons restituer dynamiquement les informations générées aléatoirement, notamment entre les lignes 44 et 65 pour un éditeur Notepad.

<div class='centre'>
<div class='titre_centre' id='titre'>
Cliquer sur le bouton du cadre de droite pour générer une nouvelle astuce
</div>
</div>

<div class='colonne' id='colonne_gauche'>
<img src='images/ampoule.png' alt='' align='absmiddle' />Le saviez-vous ?<br />
<div class='astuce' id='calque_astuce'>
</div>
</div>

<div class='colonne' id='colonne_droite' style='text-align:center;'>
<div class='astuce' id='calque_astuce' style='text-align:center;padding-top:50px;'>
<input type='button'value='Générer' />
</div>
</div>

<div class='centre'>
<div class='titre_centre' id='apercu'>
</div>
</div>

Nous pouvons notamment remarquer la présence du Div d'identifiant colonne_gauche qui matérialise le cadre de gauche sur la page Web. Il porte l'icône de l'ampoule avec le titre annonçant l'astuce à venir. A l'intérieur de ce calque, c'est plus précisément dans le Div enfant d'identifiant calque_astuce que nous devrons inscrire l'astuce prélevée grâce à un nombre aléatoire. Puis vient le calque d'identifiant colonne_droite qui contient le bouton qui permettra sur événement, de déclencher une nouvelle génération aléatoire. Enfin, il y a le calque d'identifiant apercu matérialisant le bandeau inférieur dans lequel nous restituerons textuellement, les informations que nous aurons générées par le code Javascript.

Générer des nombres aléatoires en Javascript
Pour inscrire une première astuce en même temps que la page Web se charge, nous devons déclencher un code Javascript capable de récupérer la chaîne d'informations issue du script externe. Et pour ce faire, nous devons appeler sa fonction liste_astuces. Mais pour que cette fonction soit reconnue par la page Html, une référence à ce script doit être ajoutée dans la section Head de la page Internet. Et nous proposons d'inscrire cette référence sous la déclaration du fichier externe de la feuille de styles mef.css.

• Dans la section Head de la page Web, ajouter la référence au script externe, comme suit :

...
<meta name='robots' content='index,follow' />
<meta http-equiv='content-language' content='fr' />
<link href='styles/mef.css' rel='stylesheet' type='text/css' />
<script language='javascript' src='js/astuces.js'></script>
</head>
<body>
...

Ce script externe étant situé dans le sous dossier js du répertoire local de la page Web principale, nous raisonnons en chemin relatif, grâce à l'attribut src de la balise script (src='js/astuces.js'). Désormais, puisque le script externe est chargé en même temps que la page Html, sa fonction est reconnue et nous pouvons l'appeler. Nous proposons de commencer par créer la fonction qui se chargera de générer des nombres aléatoires.

• Pour ce faire, en bas de la page Html, dans la section du script, créer la fonction genere_astuces, comme suit :

...
</body>
<script type='text/javascript' language='javascript'>

function genere_astuces()
{

}

</script>
</html>

Comme toujours, nous devons commencer par déclarer les variables nécessaires à la suite du traitement. Tout d'abord, nous avons besoin d'une variable permettant de récupérer la chaîne retournée par la fonction du script externe, soit la concaténation de toutes les astuces. Comme nous allons découper cette chaîne sur le caractère remarquable grâce à la méthode Javascript Split, cette variable sera transformée à la volée en tableau de variables. Donc nous avons aussi besoin de déclarer une variable capable de compter le nombre d'éléments du tableau, soit le nombre d'astuces qu'il contient. Cette valeur servira à générer un nombre aléatoire borné pour être sûr de pointer sur une ligne existante.

• Entre les bornes de la fonction, ajouter les deux déclarations suivies de l'instruction de test, comme suit :

var tab_astuces = liste_astuces().split('|');
var nb_astuces = tab_astuces.length;

alert(nb_astuces);

Nous déclarons donc la variable tab_astuces que nous affectons à la volée à la chaîne de caractères retournée par la fonction liste_astuces du script externe. Comme nous lui appliquons instantanément la méthode Split afin de découper cette chaîne sur le caractère remarquable de la barre verticale (|), nous la transformons en tableau de variables. Désormais, le tableau tab_astuces contient chacune des astuces rangées indépendamment dans ses lignes. Ce tableau contient autant de lignes que d'astuces sont proposées. C'est pourquoi nous exploitons sa propriété length afin de stocker le nombre d'éléments dans la variable nb_astuces ainsi déclarée. La fonction alert nous permet ensuite de tester cette valeur récupérée pour l'afficher à l'écran.

Mais justement, pour pouvoir réaliser ce test, faut-il encore que la fonction genere_astuces soit exécutée. Et pour qu'elle s'exécute, elle doit être appelée. Nous souhaitons qu'une première astuce soit générée aléatoirement au chargement de la page. Donc, nous devons appeler la fonction par son nom, dans la section du script.

• Dans la section du script, ajouter l'appel de la fonction, juste avant la fonction elle-même, comme suit :

...
</body>
<script type='text/javascript' language='javascript'>

genere_astuces();

function genere_astuces()
{
...

Chronologiquement, l'appel de la fonction intervient à la fin du chargement de la page Web. Nous pouvons donc désormais tester le code en production.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur,
• Rafraîchir la page à l'aide de la touche F5 du clavier,

Comme vous le constatez, la fonction alert se charge en même temps que la page Web est regénérée. Elle affiche une valeur numérique attestant que nous avons été en mesure de récupérer la capacité du tableau. Il semblerait que ce dernier renferme donc 65 astuces convenablement découpées, grâce à la méthode split.

Il s'agit désormais de générer un nombre aléatoire entier compris entre 0 et 64 pour pouvoir proposer tour à tour, chacune de ces astuces, sans en oublier aucune. La première ligne d'un tableau de variables est en effet repérée par l'indice zéro. La 65^ème est donc repérée par l'indice 64. Nous ne devons jamais dépasser cet indice maximum au risque de provoquer une erreur de code Javascript, à cause du dépassement de capacité du tableau.

Javascript propose un objet précieux permettant de manipuler les données numériques. Il s'agit de l'objet Math. Et cet objet offre un grand nombre de propriétés et méthodes. Parmi elles, celles qui nous intéressent sont les méthodes floor et random. La première permet de convertir un nombre réel à l'entier directement inférieur. La seconde permet de générer un nombre réel aléatoire compris entre 0 et 1. Donc, si nous multiplions ce nombre aléatoire par le nombre d'astuces soit 65, nous obtiendrons une valeur réelle aléatoire comprise entre 0 et 65. Et si nous arrondissons le résultat obtenu à l'entier directement inférieur, grâce à la méthode floor de l'objet Math, nous obtiendrons bien une génération comprise entre 0 et 64 inclus, soit potentiellement chaque indice de ligne que propose le tableau de variables.

• Revenir dans l'éditeur de code de la page Web,
• Préfixer l'instruction alert de deux slashs (//) pour la passer en commentaire,
• Puis, ajouter les deux instructions suivantes dans les bornes de la fonction :

var nombre_alea = Math.floor(Math.random() * nb_astuces);

alert(nombre_alea);

Nous déclarons en effet la variable nombre_alea que nous affectons instantanément. Nous générons un nombre réel effectivement compris entre 0 et la borne supérieure du tableau de variable (Math.random() * nb_astuces). Et nous arrondissons ce résultat à l'entier directement inférieur (Math.floor). Puis à titre d'essai, nous affichons la valeur obtenue à l'écran grâce à la fonction alert.

• Enregistrer les modifications et basculer sur le navigateur Web,
• Rafraîchir la page à l'aide de la touche F5 du clavier,

Comme l'illustre la capture ci-dessus, nous avons en effet réussi à générer un nombre aléatoire compris entre les bornes inférieure et supérieure du tableau de variables. Si vous validez et que vous enfoncez de nouveau la touche F5 du clavier, c'est un nouvel entier qui est généré, toujours correctement compris entre ces précieuses bornes.

Nous devons désormais exploiter cette valeur numérique pour pointer sur l'indice correspondant du tableau afin de récupérer l'astuce qui y est enregistrée. Et il ne restera plus qu'à la restituer dans le calque prévu à cet effet, dans le code Html. Il s'agit d'instructions classiques que nous avons l'habitude de coder désormais.

• Revenir dans l'éditeur de code de la page Web,
• Passer l'instruction de la fonction alert en commentaire,
• Puis, à la suite du code de la fonction, ajouter les deux lignes suivantes :

document.getElementById('calque_astuce').innerHTML = tab_astuces[nombre_alea];
document.getElementById('apercu').innerHTML = 'Le nombre aléatoire vaut à l'instant t : <strong>' + nombre_alea + '</strong>. Il a été généré entre les bornes :<strong>0</strong> et <strong>' + nb_astuces + '</strong>';

Comme nous l'avait appris la formation pour débuter la programmation en Javascript, la méthode getElementById de l'objet document permet d'accéder à un contrôle Html dont l'identifiant lui est passé en paramètre. Ainsi, dans le div calque_astuce, nous restituons l'information textuelle récupérée dans le tableau, à l'indice de ligne de la valeur aléatoire (tab_astuces[nombre_alea]), grâce à sa propriété innerHTML. Cette dernière permet en effet d'écrire dans le calque ainsi désigné, en conservant les balises Html de mise en forme que proposent les astuces, dans le script externe. Puis, de la même façon, nous inscrivons les informations récupérées et générées dans le calque apercu, en les concaténant.

• Enregistrer les modifications et basculer sur le navigateur Internet,
• Rafraîchir la page avec la touche F5 du clavier,

Comme l'illustre la capture ci-dessus, le résultat est satisfaisant. Nous exploitons en effet cette génération de nombres aléatoires à des fins utiles. Une astuce est bien extraite du tableau de variables à l'indice de ligne correspondant à la valeur ainsi générée. De même, vous remarquez que ses balises Html de mise en forme ont bien été conservées, grâce à la propriété innerHTML d'un contrôle Div en Javascript. Dans le même temps, nous restituons parfaitement les informations dynamiques ainsi traitées, dans le calque du dessous. A chaque fois que vous enfoncez la touche F5 pour forcer la réactualisation de la page Internet, un nouveau numéro est généré produisant une nouvelle astuce.

Il ne reste plus qu'à permettre à l'internaute de produire lui-même cette génération aléatoire, au clic sur le bouton Générer. Comme nous l'avait appris la formation Javascript sur la gestion des événements, il suffit de réaliser l'appel de la fonction genere_astuces dans l'attribut onClick du contrôle input en question.

• Revenir dans l'éditeur de code de la page Html,
• En ligne 58 pour un éditeur Notepad, ajouter cette gestion d'événement au bouton, comme suit :

... <div class='colonne' id='colonne_droite' style='text-align:center;'>
<div class='astuce' id='calque_astuce' style='text-align:center;padding-top:50px;'>
<input type='button' value='Générer' onClick='genere_astuces()' />
</div>
</div>
...

Désormais, si vous testez le bouton après avoir enregistré le code et après avoir rafraîchi la page Web, vous constatez que chaque clic génère un nouveau nombre et par voie de conséquence, une nouvelle astuce.

La mission est donc parfaitement remplie pour cette formation. Dans une prochaine étape, nous exploiterons ces connaissances afin de créer des codes de sécurité antispam, demandant à l'internaute de reproduire les caractères d'une image aléatoire, pour valider une action par exemple.