Discussion :

[yotta]

Bonsoir,

Je découvre HTML5 et JavaScript. Donc, je me suis un peu amusé, et j'ai rédigé un script qui permet de dessiner une sorte de jauge circulaire dont le rôle est d'afficher une valeur exprimée en pourcent.
Cliquez sur ce premier lien pour voir le résultat pour un affichage statique, et sur celui-ci pour un affichage animé.
Pour fonctionner, ce script a besoin de deux informations. Une valeur numérique, 75 pour 75% par exemple, et une valeur booléenne qui si elle est vraie, présente la jauge animée, sinon la présente statique.
Donc, dans l'absolue c'est parfait. Seulement voilà, j'aimerai que ce script soit capable de générer une, ou plusieurs jauges, l'idée étant alors de passer les paramètres sous forme de deux listes, une contenant les valeurs numériques et une seconde,les valeurs booléennes.
Et là je sèche...
Imaginons que je veuilles 3 jauges, la première doit afficher 30 et sera statique, la seconde affichera 40, statique, et la troisième 50, animée.
Mon script est actuellement invoqué depuis du code HTML produit manuellement ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script>jauge(94, true);</script>

Le fichier de script se trouve au même endroit que le fichier HTML qui le déclare dans son entête.
La question :
Comment puis-je écrire dans mon code HTML l'appel de ma fonction jauge avec en paramètre deux listes, genre jauge({30, 40, 50},{false, false, true}) ?
Et comment puis-je récupérer ces valeurs côté javascript ?

Merci pour votre aide.

[yahiko]

Si on s'en tient à ton mode d'appel, utilise des listes/tableaux : jauge([30, 40, 50],[false, false, true]).
Dans ton script, ta fonction jauge() devra déterminer si les arguments sont des valeurs simples ou des tableaux.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function jauge(percent, mode) {
  if (typeof percent === 'number' &&
      typeof mode === 'boolean') {
    // Cas de valeurs simples
  }
  else if (Object.prototype.toString.call( percent ) === '[object Array]' &&
           Object.prototype.toString.call( mode ) === '[object Array]' &&
           percent.length === mode.length) {
    // Cas de valeurs sous forme de tableaux de taille égale
    // En toute rigueur, il faudra vérifier que chaque élément des deux tableaux ont le bon type, mais je te laisse ça en exercice.
  }
  else {
    // Problème...
  }
}

[yotta]

Un grand merci Yahiko !
C'est exactement l'info que je ne trouvait pas, la syntaxe entre crochets.
Je viens de tester, c'est parfait, tout à fait ce qu'il me fallait. Merci.