1 Objectif
Nous voulons reporter sous forme d’histogramme les ventes de disques et le total des ventes.
Nous disposons pour chaque type de musique le nombre de disques vendus :
Infos :
[« Jazz »,527];
[« Blue »,205];
[« Hip Hop »,61];
[« Disco »,600];
[« Musette »,390];
2 Le Truc visuel
Mise à part le calcul du pourcentage et de la somme des ventes, la mise en place de cet histogramme repose sur la création d’un tableau (sans bordures).
Il faut aussi comprendre que le tableau n’est pas statique. Le vendeur doit en effet pouvoir très simplement modifier ses ventes.
Ainsi, le tableau doit être dynamiquement créé avec du code Javascript. On pourra ainsi modifier les ventes en éditant simplement un fichier (on ne parle pas ici de base de données)
3 Structure de données
Les structures de données sont des représentations du langage permettant de manipuler les données. Par exemple, on dit « trier la liste des étudiants » ; la liste est la structure de données dans laquelle on a mis les noms des étudiants pour qu’un algorithme les range par ordre alphabétique ou par ordre de mérite.
Au-delà de la représentation graphique, la représentation « interne » des infos est elle aussi une représentation sous forme de tableau (on parle souvent « de tableau des ventes »). L’algorithme qui va afficher les ventes et calculer le pourcentage va donc manipuler un tableau.
Les tableaux (comme les listes) sont des structures de données très utilisées en programmation.
4 L’algorithme
*Je crée un tableau
*Je remplie le tableau
Pour chaque type de musique, je crée une ligne avec le nom du type dans la première case et un calcul du pourcentage dans la deuxième.
*J’affiche le tableau
5 Représentation interne des données
Les structures de données, l’algorithme et la représentation graphique du problème étant abordés, revenons maintenant plus en détail sur chaque élément.
5.1 Définition du tableau de vente
Nous avons vu que l’utilisation de la structure de donnée tableau est recommandée pour représenter les données des ventes.
var vente=new Array(); # création d’un objet Array
5.2 Affectation du tableau de vente
Il suffit d’écrire les affectations suivantes.
vente[0]=[« Jazz »,527];
vente[1]=[« Blue »,205];
vente[2]=[« Hip Hop »,61];
vente[3]=[« Disco »,600];
vente[4]=[« Muzette »,390];
On prend soin de commencer à l’indice zéro.
Le tableau de vente à par ces affectations 2 dimensions.
Cette représentation équivaut à ce schéma :
Avec par exemple vente[0][1] =527, vente[3][0] =Disco.
Ainsi vente[i][j] est le contenu de la case située à la iième ligne et à la jième colonne.
5.3 Affichage du tableau
Vérifions par un affichage les valeurs du tableau. ecriture_tableau.html
Algorithmique : Affichage des éléments du tableau
*Pour toutes les lignes faire
a. Ecrire le premier;
b. Ecrire le deuxième;
*Fin
On peut traduire pour toutes les lignes faire qq chose par :
Pour la première ligne; faire qq chose;
passer à la suivante;
si la ligne n’est pas la dernière continuer sinon stop.
Javascript nous fournit la commande de contrôle for :
for ( init ; test ; incrément ) {faire qq chose }
<head>
<title>Histogramme</title>
<style>
</head>
<body>
<H1>Classement des Ventes de Disques</H1>
<script language="JavaScript">
var vente=new Array();
vente[0]=["Jazz",527];
vente[1]=["Blue",205];
vente[2]=["Hip Hop",61];
vente[3]=["Disco",600];
vente[4]=["Muzette",390];
function afficher(graphique){
for (i=0;i<graphique.length;i++){
document.write ('<br/>' +graphique[i][0]);
document.write('--> ' +graphique[i][1]);
}
}//afficher
afficher(vente);
</script>
</body>
La magie des objets fait que graphique.length est une propriété qui connaît la taille du tableau. Si je rajoute ou supprime un élément à vente la propriété s’en trouve modifiée.
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Mise en pratique de l’utilisation des tableaux par l’exemple (701 KO) (Cours PDF)
