Les tableaux

On va commencer par la question qui revient à chaque début de chapitre. C'est quoi, les tableaux ? Je vais vous clouer le bec, ce sont des variables !

Ces variables ne serviront pas à grand chose de plus. En fait, elles feront la même chose que les autres, elles retiendront une valeur. Pour les types de variables, il y en a plusieurs car dans certains cas, un type peut se révéler plus pratique qu'un autre. Et je vais vous dire un truc : il existe encore un autre type de variable. Au total, il y en a donc 3 types, c'est beaucoup ! Le troisième de ces types se nomme "objet". On a donc "variable", "tableau" et "objet" qui font tous partie du même ensemble : les variables.

Mais on n'en est pas encore aux objets, revenons en à nos... tableaux.
Tout d'abord, comment pourrait-on représenter un tableau ? Je vais encore une fois vous clouer le bec, on le représente sous forme de tableau ! Voici un petit schéma de ce qu'on appelle variables et tableaux.



Oups, je me suis mal exprimé tout à l'heure. Ce n'est pas une variable, c'est une sorte de variable. Et on les nomme tableaux, car elles peuvent retenir plusieurs valeurs, comme des tableaux en fait .

Pour les utiliser, c'est un tout petit peu plus compliqué que pour les variables. Vous l'avez vu, ils n'ont qu'un nom mais plusieurs valeurs. Donc, pour appeler leurs valeurs, il faudra à peu près faire nom_du_tableau[case1]. Regardez, et instruisez-vous bande d'ignorants.
Code : JavaScript
Explications :

• À la première ligne, j'ai créé le tableau mon_tableau comme une variable. Ensuite, je lui ai attribué comme valeur new Array(); qui peut se traduire par "Créez-moi un tableau". Puis j'ai tout simplement placé les valeurs de chaque colonne entre les parenthèses. Chaque valeur étant séparée par une virgule.
  
  
• Ensuite, j'ai fait comme je vous l'avais dit plus haut. Pour afficher le tableau mon_tableau, j'ai fait mon_tableau[numéro_de_la_case].

Nous allons maintenant passer aux exercices. Que dis-je, vous allez passer aux exercices ! Avant ça, je veux tout de même préciser qu'un tableau n'est utile que dans certains cas. C'est-à-dire que nous continuerons à utiliser les variables. Sauf dans les cas où l'on devra stocker plusieurs informations, et que ce sera plus pratique de les placer dans un tableau. Vous allez comprendre ça dans l'exercice qui suit .

Transformer javascript en horloge parlante

Ici, je vais vous aider à transformer javascript en horloge, et ce, grâce aux tableaux. Vous allez d'ailleurs voir que sans les tableaux, le script aurait été beaaaaaaucoup plus long. Allez, c'est parti !

Je vous explique le principe : grâce à l'objet Date(), nous allons savoir quel mois nous sommes. Ensuite, il suffit de créer un tableau avec les mois de l'année, puis de faire mois[numero_mois].
Code : JavaScript
Les explications sont données dans les commentaires. La seule chose que je n'ai pas expliquée est qu'on stocke ce que renvoie getMonth() dans la variable numero_du_mois, ce qui est désormais fait.

Vous voyez, c'est pas mal du tout ? Comme on pourrait dire, ça a de la gueule . Voilà de quoi vous la ramener auprès de vos amis !

Après la sorte de petite horloge, nous allons combiner boucles et tableaux. Mais tout d'abord, pour faire quoi ? Cela va nous servir principalement à afficher tout le contenu d'un tableau.

Malheureusement, je n'ai pas d'exemple sous la main à vous donner. Sachez juste que de temps en temps vous pourrez en avoir besoin, alors pourquoi ne pas apprendre comment faire tout de suite ?

Pour afficher tout un tableau, il faut connaître sa taille. Nous allons en prendre un de 3 cases, qui contient les noms des enfants de Régine et Olivier. Puis on va faire une boucle qui les affiche un par un.
Code : JavaScript
Seulement voilà, cette technique a une limite. Si je veux rajouter une nouvelle case dans le tableau noms_enfants, son contenu ne sera pas affiché, sauf si je compte à nouveau le nombre de cases dans le tableau, puis que je change la valeur de taille_tableau, ce qui est long (en effet, la programmation m'a fait devenir fainéant à un point extrême).

Taille d'un tableau

Pour connaître la taille d'un tableau, nous allons nous intéresser à la propriété length, un mot anglais qui veut dire "taille". Pour l'utiliser, c'est très simple, il suffit de faire nom_du_tableau.length, et ça nous donne sa taille. Essayons avec cette méthode.Code : JavaScript
Maintenant, agrandissez le tableau qui contient les noms, et hop ! Comme par magie, toutes les entrées s'affichent sans rien faire d'autre !

Utilisation de in dans for

Enfin, il faut savoir qu'il y a une autre méthode avec le mot-clé in. Personnellement, je l'utilise dès que je peux, mais vous pouvez très bien ne pas le faire, l'autre méthode marche aussi bien que celle-ci. En anglais, in signifie "dans". Dans la boucle, nous allons faire : "pour i dans tableau". Elle, elle comprend qu'il faut afficher tout le tableau, c'est l'essentiel .
Code : JavaScript
Et voilà, le résultat est le même. C'est le principal.
Pour ma part, je pense que je vous ai tout dit sur les tableaux. Comment on les crée, comment on les affiche, ... C'est maintenant à vous de me prouver que vous êtes dignes d'entrer dans la partie 2 du tuto. Eh oui, pour ceux qui ne l'auraient pas remarqué, vous êtes déjà au dernier chapitre de la première partie !

1
2
3
4
5

var tableau = new Array('case 1 ','case 2 ','case 3 ', 4, 5, 'etc');
var chiffre = 5*5-5;
chiffre /= 4;

document.write(tableau[chiffre]);

1
2
3
4
5
6

var tableau = new Array(1,2,3,4,5);

for(var i = 0; i on tableau; i++)
{
document.write(tableau[i]);
}