ROYAUME DU MAROC
مكتب التكوين المهني وإنعاش الشغل
office de la formation professionnelle et de la promotion du travail
ISMONTIC TANGER
MODULE 105: Programmation en JAVACRIPT
LES TABLEAUX
ADDARRAZI ILHAM
2023-2024
Les Tableaux
Les variables de Javascript ne permettent de stocker qu'une seule donnée à la
fois. Or, étant donné qu'il est souvent utile de manipuler de nombreuses
données, le concept de variable se révéle parfois insuffisant, car il devient
difficile de gérer un grand nombre de variable distinctes.
Pour y remédier Javascript propose une structure de données permettant de
stocker l'ensemble de ces données dans une "variable commune" : le tableau.
Un tableau, en Javascript, est donc une variable pouvant contenir plusieurs
données indépendantes, indexées par un numéro, appelé indice. L'indice d'un
tableau est ainsi l'élément permettant d'accéder aux données qui y sont
stockées.
Les Tableaux
1. Déclarer un tableau
Le langage Javascript fournit plusieurs façons de créer un tableau :
var MonTableau = ["donnée 1", "donnée 2", "donnée 3", "donnée 4"];
var MonTableau = new Array("donnée 1", "donnée 2", "donnée 3", "donnée 4");
Avec JavaScript, on peut stocker dans un tableau des éléments de différents types:
var tableau = ["Bonjour", 7, { message: "Coucou maman" }, true];
Les Tableaux
2. Accès aux données
L'accès aux éléments du tableau se fait en écrivant le nom du tableau suivi de
crochets contenant l'indice de l'élément.
Exemple:
var MonTableau = ["tdi","tdm", "tri","tmsir","info"];
document.write("Le 4ième élément du tableau est "+MonTableau[3]);
// Affichera "Le 4ième élément du tableau est tmsir
Les Tableaux
2. Parcourir un tableau
La propriété length permet de connaitre la dimension du tableau.
for (var i = 0; i < monTableau.length; i++)
{ // monTableau[i] permet d'accéder à l'élément courant du tableau }
monTableau.forEach(monElement => {
// monElement permet d'accéder à l'élément courant du tableau
Documenet.write(monElement)
});
for (var monElement of monTableau) {
// monElement permet d'accéder à l'élément courant du tableau
}
Les Tableaux
Exercice d’application 1:
Soit T un tableau de N entiers. Ecrire un script qui permet
1. De saisir la dimension de tableau (Saisir de N) (a l’aide de prompt()).
2. De saisir les éléments de tableau T (a l’aide de prompt()).
3. D’afficher les éléments de tableau T.
4. Calculer le plus grand écart dans un tableau (l’écart est la valeur absolue de la
différence de deux éléments).
Exercice d’application 2:
Ecrire un script qui permet de lire 100 notes et de déterminer le nombre de celles
qui sont supérieures à la moyenne de classe.
Les Tableaux
3. Insérer les éléments au tableau
La méthode push() qui permet d’ajouter des éléments en fin de tableau et va
retourner la nouvelle taille du tableau. Il faut passer les éléments à ajouter en
argument.
La méthode unshift() qui permet d’ajouter des éléments en début de tableau et va
retourner la nouvelle taille du tableau. Il faut passer les éléments à ajouter en
argument.
Exemples:
monTab.push(203); // Ajoute 203 à la fin du tableau
films.unshift(" hello"); // Ajoute hello au début du tableau
Les Tableaux
4. Supprimer des éléments du tableau
La méthode pop() permet de supprimer le dernier élément d’un tableau et va
retourner l’élément supprimé..
La méthode shift() permet de supprimer le premier élément d’un tableau et va
retourner l’élément supprimé.
Exemples:
monTableau.pop(); // Supprime le dernier élément
monTableau.shift(); // Supprime le premier élément
monTableau.splice(1,3); //permet de supprimer plusieurs éléments d'un
coup: le premier paramètre est l'indice à partir duquel supprimer, et le
second est le nombre d'éléments à supprimer.
Les Tableaux
5. Extraire une partie du tableau
La méthode slice() renvoie un objet tableau, contenant une copie superficielle
(shallow copy) d'une portion du tableau d'origine, la portion est définie par un
indice de début (inclu) et un indice de fin (exclu). Le tableau original ne sera pas
modifié.
Exemple:
var t=new Array("TDI",2,33,true);
var tab=t.slice(1,3);
for(var elt of tab){
document.write(elt)
}
Les Tableaux
5. Extraire une partie du tableau
La méthode slice() renvoie un objet tableau, contenant une copie superficielle
(shallow copy) d'une portion du tableau d'origine, la portion est définie par un
indice de début (inclu) et un indice de fin (exclu). Le tableau original ne sera pas
modifié.
Exemple:
var t=new Array("TDI",2,33,true);
var tab=t.slice(1,3);
for(var elt of tab){
document.write(elt)
}
Les Tableaux
6. Appliquer des fonctions sur le tableau
La méthode
monTab.forEach(myFunction); forEach() appelle la
function myFunction(item, index) fonction une fois pour
{ console.log(index + item); } chaque élément du tableau,
en ordre
monTab.map(function(element) { La méthode map() crée un
nouveau tableau avec les
return element.toUpperCase(); résultats de l'appel d'une
}) fonction pour chaque
élément du tableau
monTab.filter(function(element)
La méthode filter() crée un
{ return element.length>10; tableau de tous les
}) éléments qui remplissent
une condition
Les Tableaux
La méthode join() Regroupe
6. Appliquer des fonctions sur le tableau tous les éléments du tableau
dans une seule chaîne. Les
différents éléments sont
console.log(monTab.join('-')); séparés par un caractère
séparateur spécifié en
argument. Par défaut, ce
séparateur est une virgule.
console.log(monTab.reverse()); La méthode reverse() Inverse
l'ordre des éléments (ne les trie
pas).
console.log(monTab.sort());
La méthode sort() Retourne les
éléments par ordre
alphabétique (à condition qu'ils
soient de même nature)
Les Tableaux
• Soit le tableau suivant: var semaine = [ 'lun', 'mra', 'mer', 'jeu', 'ven', 'sam', 'ddi' ];
1. Retirer le dernière valeur du tableau jours
2. Ajouter la valeur ‘dim’ à la fin du tableau
3. Remplacer la valeur ‘mra’ par ‘mar’
4. Afficher le nombre de valeurs du tableau sous un titre HTML de niveau 3
5. Afficher les valeurs du tableau sous forme un tableau HTML
6. Mettre en majuscule les éléments de tableaux dans un autre tableau
semaineMaj
Exercice d’application 2:
Ecrire un script qui permet de :
• Lire 100 notes (les notes doivent être entre 0 et 20, )
• Déterminer le nombre de celles qui sont supérieures à la moyenne de classe
• Stoker ces notes dans autre tableau
Les Tableaux
7. Tableau à deux dimensions
Javascript ne contient que des tableaux à une dimension, mais vous pouvez
créer des tableaux de tableaux, comme d'autres l'ont souligné.
nom_du_tableau = new Array (x);
Ensuite, on déclare chaque élément du tableau comme un tableau à 1
dimension : nom_du_tableau[i] = new Array(y);
Ou bien: var martice=[[1,2], [true,3,"TDI"], [0,4]];
martice[1][2] : retourne « TDI"
Les Tableaux
7. Tableau à deux dimensions
Exercice d’application :
Soit T un tableau à deux dimensions de vingt lignes et vingt colonnes. Ecrire
un script qui permet de :
1. demander a l’utilisateur de saisir le contenu du tableau
2. Afficher leur contenu sous forme un tableau HTML
3. calculer la somme de tous les éléments du tableau.
4. compter le nombre des éléments strictement positifs.
5. Obtenir la somme des éléments positifs (spos) et la somme des
éléments négatifs (sneg) de ce tableau.
6. déterminer simultanément l’élément le plus grand du tableau ainsi
que sa position.
7. rechercher un élément dans le tableau T.
Les Tableaux
8. Les tableaux associatifs
Les tableaux associatifs sont des objets dynamiques que l'utilisateur redéfinit
selon ses besoins. Quand on assigne des valeurs à des clés dans une variable
de type Array, le tableau se transforme en objet, et il perd les attributs et
méthodes de Array. L'attribut length n'est plus disponible car la variable n'a
plus le type Array.
EXEMPLE: var arr = { "un" : 1, "deux" : 2, "trois": 3 };
On a en fait implicitement créé une variable de type Object.
On accède au contenu par les clés, quelle que soit la méthode de création
utilisée pour déclarer le tableau.
var y = arr["un"];
