Exemple de programmation en Javascript

Zéro pointé !
Après presque une année et environ 4000 visiteurs de cette page (plus ceux qui l'ont lue dans l'archive), et malgré la demande qui figurait ici, je n'ai reçu que deux ou trois idées et pas la moindre qui soit applicable ou utile, on se demande bien à quoi peut servir le javascript :-))

Comme il reste malgré tout pas mal de choses à dire, je vais conclure par quelques petits exemples de construction au lieu d'un seul gros projet, cela permettra tout de même de se faire une petite idée de la démarche à suivre pour parvenir à construire un programme à partir de rien.


Les algorithmes
J'en vois déjà qui se disent: "Qu'est-ce-que-c'est-encore-que-ce-machin-à-perdre-du-temps-?", ben non, c'est justement pour en gagner, même si vous ne le croyez pas.

Pour écrire un programme, il faut préparer le terrain comme je vous l'ai seriné dans les pages précédentes (mais pas assez), et même si des programmeurs qui se croyent expérimenté (comme moi) pensent qu'ils peuvent se dispenser de l'étape de l'algorithme, ils se gourrent, et le regretterons à la première modification de leur plat de nouilles (voire à la deuxième s'ils persistent).

Pas de panique, l'algorithme, c'est du gâteau, il suffit de trois objets pour en écrire un, un rond, un losange et un rectangle, pas de quoi s'ouvrir les veines...

  • Dans le rond on écrit un commentaire, style: "Début du programme toto", ou encore: "Deuxième partie", voire: "Fin"...
  • Dans le losange on écrit les décisions à prendre, par exemple: "si A>10", ou: "Nom=='Toto' ?", et de chaque coté du losange: "Oui", "Non"...
  • Et dans les rectangles on indique les mesures à prendre, c'est à dire le programme à effectuer, pas encore sous forme de programme, mais de manière plus générale, style: "calcul de la tva", ou encore: "découpage du tableau", quite à mettre plusieurs blocs les uns en dessous des autres pour mieux découper le problème.

Un exemple, sinon rien
Comme ceux qui on lu l'intro du guide savent que je ne vous cache pas la difficulté derrière un flou artistique d'encaisseur de chèque, on vas faire ça à pile ou face, ça n'a pas l'air compliqué, mais ça montre bien les problèmes.
  • "Pile ou face", c'est le nom du programme, ça aurait put être celui d'une fonction, en fait il n'y a guère de différence entre les deux si ce n'est qu'un programme peut fonctionner indéfiniment en boucle et ne jamais se terminer, une fonction aussi d'ailleurs, mais ça, c'est plutôt par erreur...
  • "Obtenir un nombre au hasard", c'est ce que je souhaite, et vous pouvez noter que j'ai déjà triché en utilisant mon expérience, car je sait qu'il n'existe pas de fonction en javascript (ni à ma connaissance dans d'autres langages) qui me donne pile ou face tout cuit dans le bec, alors, pour arriver à obtenir quelque chose quand on ne connait pas d'avance la solution, on cherche, dans la liste des mots-clefs par type, le mot "hasard", et là, paf, grosse déception, on ne trouve rien, alors en se rabatant sur les synonymes, par exemple "aléatoire" (car je suis encore en train de tricher), c'est le miracle, on trouve:
    Methode JSrandom() Nombre aléatoire entre 0 et 1MSIE Netscape
    Et quand on ne trouve rien, on peut encore essayer le dico français/anglais pour faire une recherche sur un mot suceptible de se trouver dans une fonction, une méthode, ou une propriété, sinon il faut se résoudre à chausser ses lunettes et parcourir toute la liste à la recherche d'une possibilité ou d'une illumination.
    Si ce n'est pas suffisant, il faut alors changer de stratégie, demander de l'aide ou renoncer à faire fonctionner cette partie du programme de cette façon.
    Par chance, dans ce cas-ci (tu parles, je le savais), il existe une fonction, et en plus à la fois chez netscape et msie, il ne reste plus qu'à aller voir chez eux si la syntaxe et les paramètres à envoyer sont les même, et si oui lesquels, si ce n'est pas le cas ça peut devenir le vrai film d'horreur, avec test du navigateur utilisé et appel de routine pour chaque cas, avec en plus le doute, quand il ne s'aggit ni de l'un ni de l'autre, ni de la version x.xxx d'un des deux...
    Manque de bol, impossible de retrouver les détails de random dans les méandres de la doc du jscript5.x (heureusement, je sait que ça a existé, mais il faudra que je contrôle si ça fonctionne avec msie5 pour être sur que c'est encore valide, les cons !), par contre chez netscape c'est toujours là et ça dit:
    random
    Returns a pseudo-random number between 0 and 1. The random number generator is seeded from the current time, as in Java.
    Method of
    Math
    Static
    Implemented in
    Navigator 2.0, LiveWire 1.0: Unix only
    Navigator 3.0, LiveWire 1.0: all platforms
    Syntax
    random()
    Parameters
    None.
    Description
    Because random is a static method of Math, you always use it as Math.random(), rather than as a method of a Math object you created.
    Examples
    //Returns a random number between 0 and 1
    function getRandom() {
    return Math.random()
    } round
    Returns the value of a number rounded to the nearest integer.
    Ce qu'on peut traduire brièvement par "Méthode de l'objet Math, n'a pas de paramètres, fonctionne depuis Netscape 2 sous unix et Netscape 3 sur tous les systèmes, et y'a même un exemple qui retourne directement 0 ou 1 grâce à la fonction round", merci netscape (je n'ai pas touché un rond pour ça).
  • "Nombre>x ?", Pourquoi ">x", et bien, vu que je ne suis pas censé savoir ce que retourne la fonction random au moment ou j'écris l'algorithme, je ne pouvais théoriquement pas encore savoir non plus ou placer la barre, à un, cinq, dix ?
  • "Afficher Pile", ou allumer une led, montrer un panneau, ou tout autre action possible dans le cas ou la condition ci-dessus est fausse.
  • "Afficher Face", ou produire un bruit ou tout ce que vous voulez d'autre dans le cas ou la condition ci-dessus est vraie.
  • "Fin", juste pour marquer le coup, on aurait put aussi retourner une valeur, 0 ou 1, true ou false, "pile" ou "face", ou n'importe quoi pour utiliser ce programme comme une fonction, mais ce n'est pas le cas ici.

De l'algorithme au programme
Bon, on a eu suffisement d'ouvertures, il s'agirait maintenant de conclure, comme je ne sait pas à priori où, quand et comment je vais lancer ce fabuleux programme, je vais l'écrire sous forme d'une routine, je repart de l'algorithme et
  • le rond devient:
    function pile_ou_face(){};
  • le carré contenant "Obtenir un nombre au hasard" devient:
    N=Math.random();
  • le losange "Nombre>X ?" deviens si je suis honnête:
    if (N>=0.5) {} else {};
    et si je travaille à las vegas et que je veut favoriser les "pile":
    if (N>=0.75) {} else {};
    Statistiquement le test sera faut 25% de plus que la moitié du temps, soit les trois quart du temps (ou 75%, ou encore 0.75 par rapport à 1, pour ceux qui ont déjà décroché mais ne dorment pas encore).
  • Pour faux:
    document.write("Pile !");
  • Pour vrai:
    document.write("Face !");
  • Et pour la fin, rien du tout dans ce cas là, ou alors vraiment pour l'exemple:
    return Math.round(N);
    Ce qui est beaucoup plus compatible que dans le vieil exemple de Netscape.

On assemble le tout dans l'ordre et il vaut mieux que ça donne à peut près:


function pile_ou_face()
{
  N=Math.random();              // Obtient un nombre aléatoire
  if (N>=0.5)                   // Si 0.5 à 1
  {
    document.write("Pile !");   // Ecrit Pile
  }
  else                          // Sinon
  {
    document.write("Face !");   // Ecrit Face
  }
  return Math.round(N);         // Retourne 0 ou 1
}

Et voilà le travail !

L'optimisation du programme
Bien sûr on aurait put écrire cela différement en inversant le sens du test et/ou l'inscription pile/face, mais cela n'aurais plus été conforme à l'algorithme originel.

Et même si cet algorithme fait de ce programme une merveille de simplicité à la relecture, il n'est pas très optimisé. En effet mettre le nombre dans une variable, puis tester la variable ensuite n'est pas très économique, ni en mémoire, ni en temps d'exécution, dans le cas ou on ne retourne pas de valeur il vaut mieux écrire:

if (Math.random()>=0.5) {document.write("Pile !")} else {document.write("Face !")};

L'optimisation d'un programme rends celui-ci plus rapide et efficace, mais en général, moins lisible, à vous de voir ce que vous recherchez.


Le test
Pour tester ce chef d'oeuvre impérissable de programmation et d'optimisation, il suffit d'insérer la routine ci-dessus, entre <HEAD> </HEAD> (comme d'habitude) et puis un simple: <SCRIPT LANGUAGE="Javascript">pile_ou_face();</SCRIPT>, placé par exemple ici donne:

Rechargez la page pour voir si ça change, vous avez exactement une chance sur deux, et quand vous en aurez marre d'attendre la fin du chargement et de chercher le bas de la page, perfectionnez la chose avec, par exemple, un bouton pour lancer le script et une meilleure méthode pour afficher le résultat.


La route est longue, dure, et monte tout le temps

Envoyez-moi vos idées pour la suite des opérations...

Désolé, c'est tout pour le moment, mais vous en savez sûrement un peu plus qu'au début du guide, et ce sans débourser un rond, essayez de trouver d'autres sites pour continuer à progresser et donnez m'en les adresses pour que je les publie.

La balle est maintenant dans votre camp, à vous de jouer.


RetourInfo Suite
Dernière mise à jour de cette page: 04/09/2001, visiteurs: depuis le 6 avril 2002