Cours du 25 janvier 2010

Solutions des trois problèmes du test de lundi passé :
1) La factorisation.
2) La marche aléatoire.
3) La répulsion.


Dans ce cours vous apprendrez à modifier le code HTML d'une page web par programmation.
Vous apprendrez également à manipuler un tableau de données.

Nous allons reprendre le problème de la marche aléatoire, mais avec 50 ou plus d'images. Les introduire manuellement dans le code source de la page Web est fastidieux. Les introduire par programmation est plus agréable.


L'exemple se trouve dans le fichier : MarcheAleatoire50.html
Sauvez cette page dans votre dossier (Clique droit sur le lien puis "Enregistrer la cible du lien sous...". Testez-la.
Editez cette page Web avec QuantaPlus, pressez la touche F11 pour voir les numéros de lignes.

La ligne 20 déclare une constante qui contiendra le nombre d'images qui se déplaceront de manières aléatoires.
Les lignes 21 et 22 déclare un tableau (Array) de variables glavPixX et glavPixY.
Elles stockeront la position des images.

Les lignes 108 à 111 définissent un endroit dans le code html dans lequel du code html sera rajouté.
La balise <DIV> ... </DIV> est utilisée pour cela. L'id de la balise permettera d'y faire référence.

Les lignes 113 à 115 appellent la fonction "CreationImages" qui ajoutera le code html.
Cette fonction est définie à la ligne 77.
Elle met dans la chaine de caractères "strS" le code html que l'on désire ajouter à la page, ici il s'agit d'insérer une cinquantaine d'images. Ensuite, en ligne 91, le code est effectivement ajouté à la page web avec l'instruction :
document.getElementById("divImages").innerHTML = strS;

Les lignes 55 à 59 stockent la position des 50 images dans les talbeaux glavPixX et glavPixY.
Ensuite le timer est initialisé pour appeler la fonction "AppeleParTimer" qui déplacera les images toutes les 100 [ms].
Les tableaux permettent d'avoir une liste de beaucoup de variables numérotées par des nombres entiers à partir de 0.


Exercices :
°Modifiez le code pour avoir 100 boules au lieu de 50.
  Avec 1000 boules, l'ordinateur aura de la peine à suivre...
° Modifiez le code de cette page web, pour qu'une boule sur deux soit bleue et une sur deux soit rouge.
° Modifiez le code de cette page web, pour avoir 5 couleurs différentes ou même plus.
° Pouvez-vous faire varier la taille des boules ?
° Pouvez-vous faire en sorte que les boules d'une couleur se déplacent préférentiellement dans une direction donnée ?

Plan du Site : index.html    zCours_20100125.html
Page mise à jour le 20 janvier 2010 par Bernard Gisin.
Hébergement par : www.educanet2.ch