Contenu principal
Cours : Apprendre à coder > Chapitre 1
Leçon 14: Les tableauxRésumé : les tableaux
Voici un résumé de ce que nous avons couvert dans ce module sur les tableaux.
Nous avons souvent besoin de conserver des listes de valeurs quand nous créons des programmes. En JavaScript, nous pouvons le faire en utilisant un type de valeur appelé tableau ("array" en anglais).
Pour créer un tableau, nous déclarons une variable comme nous le faisons habituellement, puis nous encadrons notre liste de valeurs par des crochets en séparant les valeurs avec des virgules :
var xPositions = [33, 72, 64];Nous pouvons stocker n'importe quel type de valeur JavaScript dans un tableau, pas juste des nombres. Voici un exemple dans lequel nous stockons des chaînes de caractères :
var mesAmis = ['Winston', 'OhNoes', 'John', 'Sophia'];Il nous arrive souvent de vouloir afficher la taille du tableau, ou faire quelque chose en utilisant la taille du tableau. Heureusement, tous les tableaux possèdent une propriété
length ("longueur" en français) qui nous indique leur longueur actuelle.text(mesAmis.length, 200, 200); // Affiche "4"Quand on veut récupérer une valeur particulière dans un tableau, on y accède en utilisant son "index", c'est-à-dire sa position dans le tableau. Le premier index d'un tableau est "0". Donc si nous voulons accéder au premier élément d'un tableau, on indique le nom de la variable du tableau, des crochets et un 0 entre :
text(mesAmis[0], 200, 0); // Affiche "Winston"Le deuxième élément est à l'index "1", le troisième à l'index "2", et le quatrième à l'index "3" :
text(mesAmis[1], 200, 100); // Affiche "OhNoesGuy"
text(mesAmis[2], 200, 200); // Affiche "John"
text(mesAmis[3], 200, 300); // Affiche "Sophia"L'indexation à partir de zéro est l'un des aspects les plus déroutants des tableaux quand on est nouveau programmeur. Gardez juste la chose en tête au début. Vous finirez par vous y habituer !
Il nous arrive souvent de vouloir effectuer la même opération sur tous les éléments d'un tableau (comme nous avons utilisé la fonction text() pour afficher les noms ci-dessus). Plutôt que de réécrire le code de nombreuses fois, il est préférable d'utiliser une boucle for pour itérer sur chaque élément du tableau, et agir sur chacun d'eux dans la boucle. Nous devons commencer à partir de l'index 0 et continuer jusqu'à atteindre la fin du tableau, en ajoutant 1 à l'index à chaque fois. Voici comment procéder :
for (var i = 0; i < mesAmis.length; i++) {
text(mesAmis[i], 200, (i+1)*100);
}Notez l'utilisation du
i entre les crochets. Il représente l’index actuel à chaque exécution de la boucle.Les tableaux peuvent être modifiés de différentes façons. Pour commencer, on peut modifier une valeur à l'intérieur :
mesAmis[1] = "LeMessagerDesErreurs";On peut aussi y ajouter de toutes nouvelles valeurs. En utilisant la méthode push() avec la nouvelle valeur :
mesAmis.push("Hopper");Après avoir exécuté cette ligne de code, la propriété length de notre tableau sera modifiée pour adopter la nouvelle longueur, et l'index final du tableau sera 4 au lieu de 3.
Si vous voulez une liste complète de ce qu'on peut faire avec des tableaux en JavaScript, consultez cette référence. De toutes façons, ne vous inquiétez pas, ce résumé vous en a déjà dit beaucoup.
Vous souhaitez rejoindre la discussion ?
quand j'ai parcouru les exercices j'ai remarqué que la premiére variable déclaré pour le tableau s'escrit en premier
exemple :
text (my friends [i],10,30+i*30);
et des fois c'est le contraire
text ( i [my friends], 10, 30+my friends*30);
quel est la difference et c'est quand qu'on les met differament(4 votes)
comme la valeur de départ des 2 variable = 0; le résulta et le même pour les deux surement :)(1 vote)
J'aimerais savoir comment on change l'ordre des variables dans les tableaux. Quelqu'un peut m'aider ?(2 votes)
Défi le faiseur de constellations - Problème réglé - Merci(1 vote)- Mon défi : le faiseur de constellations semble être réussi (félicitations etc.) mais rien ne se passe lorsque je clique pour créer de nouvelles étoiles ?(1 vote)
Bizarre, est-ce que tu pourrais dériver cet exercice ? Comme ça il apparaitra dans tes projets et je pourrais voir ton code et peut être apporter une réponse. :-)(1 vote)
- Merci Christelle, j'ai dérivé le défi sous le nom "Défi : le faiseur de constellations - pour contrôle" : cette fois-ci le fond et les deux étoiles apparaissent mais pas d'action souris.(1 vote)
c'est claire et net et précis(1 vote)- Dans mes recherches, j'ai trouvé que l'on pouvait utiliser la fonction mouseClicked ainsi :
function mouseClicked () {}
Pourquoi n'a t'on pas accès à cette information qui est plus simple que ce que vous donnez ?(1 vote)