Technologies informatiques

L1 portail ISI
TP N0 8 : Tableaux et jeu

A faire avant de démarrer : télécharger depuis le Moodle le dossier TP8 pour mettre à
jour les "Ressources TP". On travaille sur le chier [Link]
du dossier.
Il est conseillé de vous aider du document intitulé " Langage Algo vers JavaScript " du
Moodle du cours.

Exercice 1

Dans cet exercice, on va écrire un programme qui crée un tableau dont il lit la taille en
entrée (depuis une balise <input>), et qui met dans chaque case du tableau un entier tiré
aléatoirement entre 0 et 100. Le tableau créé doit ensuite être aché.

L'algorithme donne cela :

entier[] tab
entier taille
afficher("Entrer la taille :")
taille ← lire()
initTab tab[taille]
Pour i de 0 à [Link]
Faire
tab[i] ← aleat() * 100
FinPour
afficherTableau(tab)

Traduire cet algorithme en une fonction JavaScript, qui doit s'exécuter lorsque l'on clique
sur le bouton Générer de la page [Link] , en sachant que :
ˆ L'instruction aleat() * 100, qui tire aléatoirement un réel entre 0 et 100, peut être
traduite par [Link]([Link]()*100);
ˆ Pour acher le tableau (instruction afficherTableau(tab)), il faut utiliser la fonction
JavaScript préexistante dans le chier [Link] : afficherTableau(tab);

1
Exercice 2

Dans le dossier TP8, la page web [Link]

reprend la page précédente et y ajoute une balise
<input> pour acher un résultat : la moyenne des éléments des cases du tableau créé.

1. Compléter la fonction écrite précédemment pour y ajouter à la suite le calcul et l'achage

de la moyenne de toutes les cases du tableau créé.

Exercice 3

La page web [Link] représente une interface HTML permettant de lire un nombre et de
vérier, via un bouton, si c'est un multiple de 3 (c'est-à-dire si nmod3 = 0). Un autre bouton
"Somme totale", et une nouvelle balise résultat sont présents : on veut pouvoir conserver
dans un tableau les nombres qui ont été testés avec le bouton "Multiple de 3 ?", et calculer
leur somme totale grâce au deuxième bouton.

1. Déclarer en-dehors de toutes fonctions, au début du chier [Link] , un tableau et un

entier qui va représenter le nombre d'entiers testés.
2. Initialiser ce tableau en lui donnant une taille de 5, également au début du script.

2
 3. Écrire une fonction JavaScript liée au bouton "Multiple de 3 ?" qui prend comme donnée
d'entrée le nombre et qui ache "Multiple de 3" si ce nombre est un multiple de 3, et
"Non multiple de 3" dans le cas contraire, dans la première balise résultat. Tester !
4. Modier la fonction pour que :
(a) elle ajoute chaque nombre qui est bien multiple de 3 (et seulement ceux-là) dans
le tableau
(b) elle incrémente le nombre d'entiers testés
(c) elle ache systématiquement le tableau avec la fonction JavaScript préexistante
dans le chier [Link](tab);.
5. Enn, écrire une nouvelle fonction en JavaScript, liée au bouton "Somme totale", qui
ache dans la nouvelle balise résultat la somme de tous les éléments du tableau.

Exercice 4 : capturer le 50 !

On va concevoir un jeu qui consiste à faire déler cycliquement les entiers de 0 à 99 de manière
très rapide et d'essayer de capturer la valeur 50 via un clic.
Pour cela, la page web [Link] contient une division de classe "big" et d'identiant "comp-
teur" (lignes 15-18) qui va acher la valeur délante. Pour accéder à ce compteur, vous
devrez utiliser [Link]("compteur").innerHTML

1. Écrire une première fonction JavaScript liée au bouton "Start" dont le code est le suivant

// accèder à la valeur du compteur pour l'initialiser à 0

[Link]("compteur").innerHTML = 0;

// lancer de façon cyclique, avec un intervalle de 10 millisecondes,

// la fonction incrementer() que l'on va écrire juste après
setInterval(incrementer, 10);

// désactiver le bouton "Start"

[Link]("start").setAttribute('disabled', true);

2. Écrire la fonction JavaScript incrementer() qui a pour rôle d' accéder à la valeur du
compteur, de la lire, de l'incrémenter de 1, puis de la modier avec la valeur incrémentée
de 1. Attention, la valeur du compteur ne doit pas dépasser 99 : si la valeur lue est 99,
alors elle doit repasser à 0.
3. Tester votre programme ! La valeur du compteur doit déler rapidement entre 0 à 99
de manière cyclique.
4. On veut maintenant autoriser 5 essais à l'utilisateur : chaque fois qu'il clique sur le
bouton "Catch", la fonction JavaScript correspondante doit stocker la valeur du
compteur (l'essai) dans un tableau de 5 cases et acher ce tableau. Si c'est le

3
 5ème essai de l'utilisateur, la fonction doit également désactiver le bouton "Catch", et
activer le bouton "Best Score"
(en faisant [Link]("best").removeAttribute("disabled");)
Pour vous aider :
ˆ Déclarer un tableau d'essais et le nombre d'essais tentés en-dehors de toutes foncti-
ons, au début du chier [Link]
ˆ Initialiser ce tableau d'essais en lui donnant une taille de 5, également au début
du script.
ˆ Écrire ensuite votre fonction JavaScript

5. Enn, écrire la fonction liée au bouton "Best Score" qui trouve, dans le tableau d'essais,
la valeur la plus proche de 50, et qui l'ache comme résultat. On pourra utiliser pour
cela la fonction [Link] de JavaScript qui renvoie la valeur absolue du nombre passé
en paramètre.

Exercice 5 (facultatif )

[Link]
Dans le dossier TP8, la page web propose une zone de dessin (un canvas) dans
acher le tableau sous la forme d'un histogramme
le but d' où chaque élément du
tableau est représenté par un rectangle qui a comme base 20, et comme hauteur la valeur de
l'élément multipliée par 10, comme sur la gure ci-dessous :

1. Écrire une fonction en JavaScript liée au bouton "Histogramme" qui lit la taille n d'un
tableau, puis qui génère aléatoirement un tableau de n entiers entre 0 et 20, ache ses
éléments avec la fonction afficherTableau(tab);, et l'ache graphiquement par un
histogramme.

4
 N'oubliez pas d'écrire les deux instructions suivantes dans le chier [Link] pour pouvoir
dessiner dans la balise canvas :
const canvas = [Link](".myCanvas");
const ctx = [Link]("2d");