Les tableaux sont des variables particulières qui permettent de stocker plusieurs valeurs à la fois avec un système d'indice ou de clef associé à chaque valeur. Ils s'avèrent pratique pour traiter des listes de valeurs.

Les types de tableaux

De manière générale, on distingue deux types de tableaux :

• Les tableaux indexés dont les indices ou les clefs sont définis uniquement par des numéros,
• Les tableaux associatifs dont les indices ou les clefs sont définis par des noms.

JavaScript ne gère que les tableaux indexés, les indices associés à chaque valeur vont être générées automatiquement en partant de 0 pour la première valeur.

Voici la structure d'un tableau indexé :

Les valeurs stockées dans un tableau pourront être de type différents (nombre, chaine, objet ou encore autre tableau)

Exemple :

Contrairement à d'autres langages, en JavaScript, les tableaux sont dynamiques. Il n'est donc pas nécessaire de définir leur taille avant de les utiliser. D'autre part, ce sont des objets qui dépendent de l'objet global Array.

Pour commencer avec les tableaux

Un tableau est un éléments qui contient une collection d'items. Par exemple, pour une liste de course, j'ai besoin de créer une nouvelle variable qui contiendra la collection des produits. C'est dans un tableau que chaque Index correspondra à un produit. Voyons ensemble comment construire un tableau.

Déclarer et initialiser un tableau

Pour déclarer un tableau, on peut utiliser le constructeur de l'objet Array :

let listeAmis = new Array(); 

ou utiliser la notation avec les crochets [] :

let listeAmis = [];

On peut initialiser le tableau avec des valeurs au moment de sa déclaration :

let listeAmis = new Array('Antoine','Louis','Alice') ;

ou bien encore comme ceci :

let listeAmis = ['Antoine','Louis','Alice'] ;

Il est possible également de déclarer un tableau vide et de le remplir par la suite :

let listeAmis = [];

listeAmis[0] = 'Antoine';
listeAmis[1] = 'Louis';
listeAmis[2] = 'Alice';

Lire ou modifier la valeur d'un élément du tableau

Pour accéder à un élément du tableau, il suffit de préciser le nom du tableau auquel appartient cet élément suivi de l'indice qui lui est associé entre crochets : nom du tableau[indice de l'élément]

Exemple : affichage des valeurs contenues dans le tableau listeAmis :

let listeAmis = ['Antoine','Louis','Alice'];   // Liste des amis

console.log(listeAmis[0]);                     // Affiche "Antoine"
console.log(listeAmis[1]);                     // Affiche "Louis"
console.log(listeAmis[2]);                     // Affiche "Alice"

Il est également possible d'accéder à un élément pour en modifier la valeur en utilisant la syntaxe : nom du tableau[indice de l'élément] = nouvelleValeur;

Exemple : modification d'un élément du tableau listeAmis :

listeAmis[1] = 'Laurent';                     // Remplace "Louis" par "Laurent"

Dans notre tableau, la valeur rangé dans l'index 1 du tableau listeAmis a bien été remplacé :

Parcourir un tableau à l'aide de la boucle for...of

Pour parcourir un tableau élément par élément, il existe en JavaScript la structure de boucle for...of spécialement créée dans ce but.

Exemple : utilisation de la boucle for... of pour afficher toutes les valeurs contenues dans le tableau listeAmis :

// Liste des amis
let listeAmis = ['Antoine', 'Louis', 'Alice'];

// Affichage de chaque élément du tableau séparément
for (let Ami of listeAmis) {
    console.log(Ami);
}

On définit dans cette structure une variable (ici la variable Produits) qui va servir à récupérer chacune des valeurs du tableau (ici le tableau listeAmis) au fur et à mesure que celui-ci est parcouru par la boucle :

Lors de chaque passage dans la boucle, la valeur ainsi récupérée est affichée dans la console du navigateur.

Activité 1 : Calcul de la moyenne d'une série de valeurs

Dans votre EDI préféré comme Visual Studio Code par exemple, créez dans votre dossier de projet un nouveau fichier HTML 5 (.html) et ainsi qu'un fichier JavaScript (.js).

Codez les instructions javascript qui permettent de :

• Déclarer et initialiser un tableau listeValeurs avec une suite de valeurs entières comprises entre 0 et 100 (on se limitera à 10 valeurs max).
• D'afficher dans la console du navigateur cette suite de valeurs selon l'exemple donné ci-dessous.
• Calculer et afficher la somme et la moyenne des différents valeurs.

Exemple de résultat attendu :

Les tableaux multidimensionnels

Un tableau multidimensionnel est un tableau qui contient lui-même d'autres tableaux. Il s'agit d'un moyen de regrouper un tableau dans un tableau. Prenons l'exemple où vous souhaitez dans votre liste d'amis vous souhaitez pour chaque ami y stocker le nom et l'âge. Alors, chaque ami sera un tableau qui aura deux index : le nom et l'âge.

Cet exemple correspond à un tableau à 2 dimensions, chaque élément de ce tableau est lui-même un tableau qui contient 2 valeurs représentant une chaine de caractères et le nombre de produits de disponible.

Déclarer et initialiser un tableau multidimensionnel

Afin de déclarer et initialiser un tableau multidimensionnel, on peut utiliser le constructeur de Array pour créer tout d'abord tous les tableaux élémentaires qu'il devra contenir :

// Création de chaque ami dans un tableau (nom + âge)
let ami1 = new Array('Antoine', 21);
let ami2 = new Array('Louis', 30);
let ami3 = new Array('Alice', 25);

Utiliser à nouveau le constructeur de Array pour déclarer et initialiser le tableau principal avec ces éléments :

// Création tableau de la liste des amis (tableau de chaque personne créé précédement)
let listeAmis = new Array(ami1, ami2, ami3);

Il est possible aussi d'employer la notation avec crochets :

// Liste des amis avec leur nom + l'âge créé en une fois
let listeAmis = [['Antoine', 21], ['Louis', 30], ['Alice', 25]];

Lire ou modifier les valeurs dans un tableau multidimensionnel

La position de chaque valeur contenue dans un tableau multidimensionnel est définie par 2 indices :

• l'indice qui correspond à la position du tableau interne dans lequel se trouve la valeur,
• l'indice qui correspond à la position de la valeur dans ce tableau interne.

valeur = nom du tableau[indice du tableau interne][indice dans le tableau interne]

Exemple : affichage des valeurs contenues dans le tableau listeAmis :

// Liste des amis avec leur nom + l'âge créé
let listeAmis = [['Antoine', 21], ['Louis', 30], ['Alice', 25]];

 console.log(listeAmis[0][0]);          // Affiche "Antoine"console.log(listeAmis[0][1]);          // Affiche 21console.log(listeAmis[1][0]);          // Affiche "Louis"console.log(listeAmis[1][1]);          // Affiche 30console.log(listeAmis[2][0]);          // Affiche "Alice"console.log(listeAmis[2][1]);          // Affiche 25

Il est également possible de modifier une valeur dans un tableau multidimensionnel en utilisant la syntaxe : nom du tableau[indice du tableau interne][indice dans le tableau interne] = nouvelleValeur;

Exemple : modification d'une valeur dans le tableau listeAmis :

En JavaScript :

 // On remplace l'âge de Louis 30 => 35
 listeAmis[1][1] = 35;

Parcourir un tableau multidimensionnel à l'aide de la boucle for...of

On peut utiliser la structure de boucle for...of pour accéder à chacun des tableaux internes puis aux valeurs contenues dans ces tableaux en utilisant l'indexation.

Exemple : utilisation de la boucle for... of pour afficher toutes les valeurs contenues dans le tableau listeAmis :

// Liste des amis avec leur nom + l'âge
let listeAmis = [['Antoine', 21], ['Louis', 30], ['Alice', 25]];

console.log('--- Voici la liste de mes amis ! --- \n');

// Affichage de chaque élément du tableau séparément
for (let Ami of listeAmis) {
  console.log(Ami[0] + " agé de " + Ami[1] + " ans.");
}

Ce programme créé dans un premier temps notre tableau d'ami regroupant le nom et l'âge. Puis, à l'aide d'une boucle for, on affiche dans la console de développement le nom et l'âge dans une variable à par correspondant à l'index i où la donnée est positionnée dans le tableau. Dans notre cas, le nom est à la position 0 du la tableau listeAmis et l'âge en position 1.

Voici l'aperçu de ce programme dans la console du navigateur :

Activité : Gestion d'une liste d'articles

Dans votre EDI préféré comme Visual Studio Code par exemple, créez dans votre dossier de projet un nouveau fichier HTML 5 (.html) et ainsi qu'un fichier JavaScript (.js). 

Codez les instructions javascript qui permettent de :

• Déclarer et initialiser un tableau multidimensionnel listeArticles dans lequel chaque article est défini lui-même par un tableau de trois éléments :
• Une chaine de caractères correspondant à la désignation de l'article,
• Un nombre correspondant au prix unitaire en euros,
• Un nombre correspondant à la quantité achetée.
• Afficher dans la console du navigateur la liste des articles avec, pour chaque article, la quantité achetée et le prix correspondant (voir exemple donné ci-dessous).
• Calculer et afficher le nombre total d'articles achetés ainsi que le montant total des achats au centime près.

Exemple de résultat attendu :

Propriétés et méthodes de l'objet global "Array"

La propriété "length"

L'objet Array ne possède qu'une seule propriété, length qui retourne le nombre d'éléments contenus dans un tableau.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice'];   // Liste des amis
let nbAmis = listeAmis.length;                   // Pour le nombre d'amis

// Valeur de retour : la valeur de la variable "nbAmis" vaut 3.
console.log(nbAmis);

Après l' exécution de ce script, la variable nbAmis contient le nombre d'éléments contenus dans le tableau listeAmis, soit ici 3 éléments.

Aperçu dans la console du navigateur :

La propriété length peut être utilisée dans une boucle pour parcourir le tableau au même titre que la boucle for ...of

Exemple : utilisation de la propriété length dans une boucle for pour afficher toutes les valeurs contenues dans le tableau listeAmis :

let listeAmis = ['Antoine', 'Louis', 'Alice'];   // Liste des amis

for (let i=0; i < listeAmis.length; i++) {
    console.log(listeAmis[i]);
}

Aperçu du programme :

Cette propriété peut également être utilisée pour vider un tableau :

listeAmis.length = 0;     // Vide le tableau listeAmis

Aperçu du résultat :

Modifier le début d'un tableau avec les méthodes "unshift()" et "shift()"

Voyons ensemble comment ajouter ou supprimer des éléments en début de tableau en utilisant les méthodes "unshift()" et "shift()".

La méthode "unshift()"

La méthode unshift() permet d'ajouter des éléments en début de tableau. Les valeurs des éléments à ajouter sont passées en arguments et la nouvelle taille du tableau est retournée par la méthode.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice'];      // Liste des amis
let nbAmis = listeAmis.unshift('Pierre', 'Alain');  // Ajout de 2 élements au début du tableau (ici : "Pierre" & "Alain")

Après l'exécution de ce script, le tableau listeAmis contient 5 éléments dont ceux ajouté en début de tableau (ici : "Pierre" & "Alain") :

Les valeurs 'Pierre' et 'Alain' sont ajoutées en début de tableau. La variable nbAmis permet de récupérer en même temps la nouvelle taille du tableau.

La méthode "shift()"

La méthode shift() permet de supprimer le premier élément du tableau et retourne la valeur de cet élément.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice'];      // Liste des amis
let supprime = listeAmis.shift();                   // On supprime 1 élement en partant du début du tableau (ici : "Antoine" est supprimé)

Après l' exécution de ce script, le tableau listeAmis ne contient plus que 2 éléments.

La valeur "Antoine" est supprimée du tableau et est retournée dans la variable supprime.

Modifier la fin d'un tableau avec les méthodes "push()" et "pop()"

Voyons cette fois-ci comment ajouter ou supprimer des éléments en fin de tableau en utilisant les méthodes "push()" et "pop()".

La méthode "push()"

La méthode push() permet d'ajouter des éléments en fin de tableau. Les valeurs des éléments à ajouter sont passées en arguments et la nouvelle taille du tableau est retournée par la méthode.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice'];      // Liste des amis
let nbAmis = listeAmis.push('Clément', 'Martin');   // Ajout de deux amis à la fin du tableau

Après l' exécution de ce script, le tableau listeAmis contient 5 éléments :

Les valeurs 'Clément' et 'Martin' sont ajoutées à la fin du tableau. La variable nbAmis permet de récupérer en même temps la nouvelle taille du tableau.

La méthode "pop()"

La méthode pop() permet de supprimer le dernier élément du tableau et retourne ainsi la valeur de cet élément.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice'];      // Liste des amis
let supprime  = listeAmis.pop();                    // Supression du dernier élément du tableau (ici : "Alice")

Après l' exécution de ce script, le tableau listeAmis ne contient plus que 2 éléments ("Antoine" & "Louis").

La valeur 'Jacques' est supprimée du tableau et retournée dans la variable supprime.

La méthode "splice()"

La méthode splice() permet de supprimer ou de remplacer une partie d'un tableau. Elle va pouvoir prendre trois paramètres :

• L'indice à partir duquel doit commencer le changement dans le tableau,
• Le nombre d'éléments à supprimer,
• Les valeurs des éléments qui devront être ajoutés.

Cette méthode retourne également un tableau contenant les éléments supprimés.

Supprimer uniquement l'élément

Si aucune valeur n'est spécifiée pour les éléments à ajouter, alors la méthode supprime les éléments qui se situent à partir de l'index spécifié par le premier paramètre et selon le nombre d'éléments à supprimer spécifié par le second paramètre.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice'];      // Liste des amis
let listeSupp = listeAmis.splice(1, 1);             // L'index 1 & supprimer 1 élement : on supprime uniquement

Cette fois-ci, la méthode splice() ne fait que supprimer un élément à partir de l'index 1. Après l'exécution de ce script, le contenu du tableau listeAmis sera le suivant :

listeSupp est toujours un tableau contenant l'élément qui a été supprimé "Louis".

Remplacer par une autre valeur

Au lieu de supprimer un index particulier d'un tableau, il peut être intéressant de connaitre cet index et de modifier le contenu de cet index directement sans pour autant le supprimer, puis de le rajouter à la main directement.

La particularité de la méthode splice() est de rajouter un argument supplémentaire contenant la valeur à remplacer.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice'];      // Liste des amis
let listeSupp = listeAmis.splice(1, 1, 'Jean');     // L'index 1, supprimer 1 élement et ajouter à la place "Jean" : on remplace

De ce fait, elle va supprimer un élément à partir de l'index 1 et insère la valeur "Jean". Après l'exécution de ce script, le contenu du tableau listeAmis sera le suivant :

La variable listeSupp est un tableau contenant le seul élément qui a été supprimé "Louis".

Convertir un tableau en chaine de caractères avec la méthode "join()"

La méthode join() retourne une chaine de caractères qui correspond à la concaténation de toutes les valeurs contenues dans un tableau, le séparateur utilisé par défaut entre chaque valeur est la virgule mais il est possible de passer en paramètre tout autre caractère comme séparateur.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice'];      // Liste des amis
let chaineListeAmis = listeAmis.join(-);            // On transforme chaque valeur en chaine de caractère + entre les valeurs du tableau, on rajoute un tiret "-"

Après l'exécution de ce script, la variable chaineListeAmis contient la chaine de caractères : "Antoine-Louis-Alice".

Extraire une partie d'un tableau avec la méthode "slice()"

La méthode slice() permet de récupérer une partie des éléments contenus dans un tableau. Pour cela, elle va pouvoir prendre deux paramètres :

• L'indice de début qui correspond à celui à partir duquel commence la partie à récupérer.
• L'indice de fin qui correspond à celui à partir duquel la récupération s'arrête (l'élément correspondant à cet indice n'est pas récupéré).

Récupérer à partir d'un index positif précis

Lorsqu'une seule valeur est passée en argument et qu'elle est positive, elle est considérée par slice() comme l'indice de début et slice() retourne l'ensemble des éléments qui se trouvent à partir de cet indice. L'index positif se positionne au début du tableau en commençant par 0.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice', 'David', 'Charles'];      // Liste des amis
let listeAmisProches = listeAmis.slice(1);                              // Récupération de Louis, Alice, David & Charles dans la variable "listeAmisProches"

Dans cet exemple, la méthode slice() extrait les éléments du tableau listeAmis situés à partir de l'indice 1 et prends ainsi les éléments jusqu'à la fin du tableau (les éléments d'indice 1, 2, 3 et 4) et retourne dans la variable listeAmisProches un tableau contenant les éléments "Louis", "Alice", "David" & "Charles".

Récupérer à partir d'un index négatif précis

Lorsqu'une seule valeur est passée en argument et qu'elle est négative, elle indique un décalage depuis la fin de la séquence et slice() retourne l'ensemble des éléments qui se trouvent dans l'intervalle correspondant à ce décalage. La particularité de l'index négatif est qu'il commence cette fois-ci à la fin du tableau en commençant par 1.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice', 'David', 'Charles'];      // Liste des amis
let listeAmisProches = listeAmis.slice(-3);                             // Récupéation de Alice, David & Charles dans la variable "listeAmisProches"

Dans cet exemple, la méthode slice() extrait les éléments du tableau listeAmis en partant de la fin du tableau (les éléments d'indice 2, 3 et 4) et retourne dans la variable listeAmisProches un tableau contenant les éléments "Alice", "David" & "Charles".

Récupérer à partir d'un intervalle positif donné

Cette méthode retourne alors un nouveau tableau contenant les éléments extraits, le tableau original n'est pas modifié.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice', 'David', 'Charles'];      // Liste des amis
let listeAmisProches = listeAmis.slice(2, 4);                           // Récupération de Alice, David & Charles dans la variable "listeAmisProches"

Dans cet exemple, la méthode slice() extrait les deuxième et troisième éléments du tableau listeAmis (les éléments d'indice 2 et 4) et retourne dans la variable listeAmisProches un tableau contenant les éléments "Alice", "David" & "Charles".

Récupérer à partir d'un intervalle positif et négatif donné

Lorsque deux valeurs sont passée en argument, il est possible également d'utiliser une valeur négative pour le deuxième argument qui indique aussi un décalage depuis la fin de la séquence. Dans ce cas, slice() retourne l'ensemble des éléments qui se trouvent dans l'intervalle défini par l'indice de début et le décalage depuis la fin.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice', 'David', 'Charles'];      // Liste des amis
let listeAmisProches = listeAmis.slice(1, -1);                          // Récupération de Louis, ALice & David dans la variable "listeAmisProches"

Dans cet exemple, la méthode slice() extrait du deuxième à l'avant-dernier élément du tableau listeAmis (les éléments d'indice 1, 2 et 3) et retourne dans la variable listeAmisProches un tableau contenant les éléments 'Paul', 'Jacques' et 'Jean'.

Si aucun indice n'est passé en argument à slice() alors celle-ci renvoie une copie complète du tableau de départ.

Vérifier l'existence d'une valeur avec la méthode "includes()"

La méthode includes() permet de déterminer si un tableau contient une valeur passée en argument. Si la valeur a été trouvée, includes() retourne la valeur true.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice', 'David', 'Charles'];  // Liste des amis

// Tests - les valeurs sont dans le tableau ?
let estMonAmi = listeAmis.includes('Antoine');                      // La variable vaut true car la valeur Antoine est dans le tableau
let estMonAmi = listeAmis.includes('Gustavo');                      // La variable estMonAmi vaut false car la valeur Gustavo ne fait pas partie du tableau

Retrouver l'index d'un élément avec la méthode "indexOf()"

La méthode indexOf() retourne le premier indice pour lequel la valeur d'un élément spécifié a été trouvée dans le tableau. Si l'élément cherché n'est pas présent dans le tableau indexOf() renverra -1.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice', 'David', 'Charles'];  // Liste des amis
let index_Louis = listeAmis.indexOf('Louis');                       // Récupération de l'index portant la valeur 'Louis' : index_Louis vaut 1

Par défaut, la méthode indexOf() commence la recherche de l'élément à partir de l'indice 0 et le tableau est parcouru dans sa totalité. Cependant, il est possible d'ajouter un second paramètre pour spécifier le rang à partir duquel on souhaite commencer la recherche.

Exemple :

let listeAmis = ['Antoine', 'Louis', 'Alice', 'David', 'Charles'];  // Liste des amis

let index_Louis = listeAmis.indexOf('Louis', 1);                    // index_Louis vaut toujours 3
let index_David = listeAmis.indexOf('David', 4);                    // index_David vaut -1

Activité 2 : Calcul de la moyenne d'une série de valeurs

Dans votre EDI préféré comme Visual Studio Code par exemple, créez dans votre dossier de projet un nouveau fichier HTML 5 (.html) et ainsi qu'un fichier JavaScript (.js).

Recopiez dans le fichier Javascript, les instructions JavaScript qui correspondent à la toute dernière définition du constructeur Patient() vue dans la chapitre précédent. (cf. Activité Optimisation du codage du constructeur pour le calcul de l'IMC avec fonctions internes).

Créez les objets représentant les patients qui seront mis dans la liste à partir du tableau suivant :

Version 1

Déclarez et initialisez le tableau tabPatients avec ces objets. Développez ensuite la fonction afficher_ListePatients(tabPatients). Cette fonction doit retourner une chaine de caractères constituée des noms et prénoms de tous les patients contenus dans le tableau passé en paramètre.

Testez cette fonction en affichant la liste dans la console du navigateur.

Exemple de résultat attendu :

Version 2

Développez la fonction afficher_ListePatients_Par_Sexe(tabPatients, sexe). Cette fonction doit retourner une chaine de caractères constituée des noms et prénoms de tous les patients contenus dans le tableau passé en paramètre et donc le sexe correspond à la valeur du paramètre sexe.

Exemple de résultat attendu :

Développez la fonction afficher_ListePatients_Par_Sexe(tabPatients, sexe). Cette fonction doit retourner une chaine de caractères constituée des noms et prénoms de tous les patients contenus dans le tableau passé en paramètre et donc le sexe correspond à la valeur du paramètre sexe.

Testez cette fonction en affichant la liste dans la console du navigateur.

Version 3

Dans le cas où aucun patient ne répond au critère de corpulence spécifié, la fonction devra retourner un message indiquant qu'aucun patient ne correspond à cet état de corpulence.

Pour cette fonction, il sera nécessaire de compléter le constructeur Patient() en lui ajoutant des propriétés qui représentent la valeur de l'IMC ainsi que l'état de corpulence correspondant. Les valeurs de ces propriétés devront être mises à jour grâce à la méthode definir_corpulence().

Exemple de résultat attendu :

Développez la fonction afficher_ListePatients_Par_Corpulence(tabPatients, corpulence). Cette fonction doit retourner une chaine de caractères constituée des noms et prénoms ainsi que de l'IMC concernant tous les patients contenus dans le tableau passé en paramètre et dont l'état de corpulence correspond à celui du paramètre corpulence.

Testez cette fonction en affichant la liste dans la console du navigateur.

Version 4

Dans le cas où le nom spécifié ne correspond à aucun patient contenu dans le tableau, la fonction devra retourner un message indiquant que ce nom n'existe pas dans la liste.

Exemple de résultat attendu :

Déclarez et codez la fonction afficher_DescriptionPatient(tabPatients, nom). Cette fonction doit retourner une chaine de caractères correspondant à la description d'un patient appartenant au tableau passé en paramètre et dont le nom correspond à celui du paramètre nom.

Testez cette fonction en affichant la description de l'un des patients se trouvant dans le tableau dans la console du navigateur puis en utilisant le nom d'un patient qui n'existe pas.

Rendu final

Rendu final regroupant les versions précédentes :

Exercice : Calcul et affichage d'un Histogramme

Dans votre EDI préféré comme Visual Studio Code par exemple, créez dans votre dossier de projet un nouveau fichier HTML 5 (.html) et ainsi qu'un fichier JavaScript (.js).

On souhaite développer une application qui affiche dans la console du navigateur un histogramme correspondant à la répartition des notes obtenues par les élèves de la classe pour un devoir.

Les notes saisies seront comprises entre 0 et 20 et correspondront à un nombre entier de points (pas de demi-point), plusieurs élèves pourront avoir la même note et certaines valeurs pourront ne pas avoir été attribuées (aucun élève n'a eu 1 ou 19 par exemple).

L'application utilisera deux fonctions :

• Une fonction calculerRepartition(tabNotes) qui retournera un tableau représentant la repartions des valeurs contenues dans le tableau passé en paramètre tabNotes,
• Une fonction tracerHisto(tabRepart) qui servira à construire et afficher l'histogramme dans la console du navigateur à partir du tableau passé en paramètre tabRepart contenant la répartition des notes.

Version 1

Le tableau retourné par la fonction calculerRepartition() est un tableau multidimensionnel dans lequel chaque élément correspond à un tableau interne constitué chacun de deux éléments :

• La note (toutes les valeurs comprises entre 0 et 20, y compris celle qui ne se trouvent pas dans le tableau de départ),
• Le nombre de fois que cette note se trouve dans le tableau de départ (on mettra 0 pour toute note qui ne se trouve pas dans ce tableau).

Exemple de résultat attendu :

Codez les instructions javascript qui permettent de tester la fonction calculRepartition().

Version 2

Pour tracer l'histogramme dans la console du navigateur, on part du principe que la fonction tracerHisto() doit créer et afficher pour chaque élément contenu dans le tableau de répartition passé en paramètre, une chaine de caractère qui comprend :

• Uniquement la note si celle-ci n'a pas été attribuée,
• La note suivie d'une tabulation ('\t') puis du caractère '*' x le nombre de fois que la note a été attribuée.

Exemple de résultat attendu :

Codez les instructions javascript qui permettent de tester la fonction tracerHisto().