Tutoriel pour apprendre la programmation en JavaScript

Comme tous les autres types de valeur, un tableau peut être stocké dans une variable.

En revanche, en JavaScript, les tableaux sont considérés comme une forme particulière du type object. Autrement dit, typeof [] retourne "object".

Comme toute variable en JavaScript, les valeurs stockées dans un tableau peuvent être de n'importe quel type (y compris un tableau), et n'ont pas besoin d'être tous du même type :

var fourreTout = [ null, true, 'bonjour', 1.2, fruits, undefined ];

Tout tableau possède une propriété length qui vaut le nombre de valeurs qu'il contient :

fourreTout.length; // => retourne 6, car il y a 6 valeurs dans notre tableau

Chaque élément d'un tableau est numéroté par ce qu'on appelle un « indice » (ou « index » en anglais).

À noter que cette numérotation commence par 0 (zéro), et non par 1.

Du coup, l'indice du premier élément est 0, et l'indice du dernier élément est length - 1 (length étant le nombre d'éléments du tableau).

On peut accéder à un élément de tableau en précisant son indice entre crochets :

var fruits = [ 'Mangue', 'Raisin', 'Figue' ];
fruits[0]; // vaut 'Mangue'
fruits[1]; // vaut 'Raisin'
fruits[2]; // vaut 'Figue'
fruits[3]; // undefined

Pour modifier la valeur d'un élément, il suffit de l'adresser par indice (comme vu juste avant) puis de lui affecter une valeur, comme on le ferait pour une variable :

var fruits = [ 'Mangue', 'Raisin', 'Figue' ];
fruits[1] = 'Kiwi';
fruits; // => vaut [ 'Mangue', 'Kiwi', 'Figue' ]

La méthode push() permet d'ajouter un élément à la fin du tableau. La valeur de cet élément est à passer en paramètre (entre parenthèses) de la méthode, quand on l'appelle :

var fruits = [ 'Mangue', 'Raisin', 'Figue' ];
fruits.push('Banane'); // appel de la méthode push() sur le tableau fruits, avec `Banane` en paramètre
fruits; // => [ 'Mangue', 'Raisin', 'Figue', 'Banane' ]

À chaque fois qu'on ajoute un élément à un tableau en appelant la méthode push(), sa longueur length est incrémentée (c.-à-d. sa valeur augmente de 1) :

fruits.length; // => 4, désormais

La méthode pop() retourne la dernière valeur du tableau puis la retire de ce tableau :

var fruits = [ 'Mangue', 'Raisin', 'Figue' ];
var f = fruits.pop();
f;      // => `Figue`
fruits; // => [ 'Mangue', 'Raisin' ];

À chaque fois qu'on retire un élément d'un tableau en appelant la méthode pop(), sa longueur length est décrémentée (c.-à-d. sa valeur décroit de 1) :

fruits.length; // => 2, désormais

var jours = [ 'lun', '007', 'mer', 'jeu', 'ven', 'sam', 'BUG' ];

Quelles instructions JavaScript faut-il exécuter pour effectuer les opérations suivantes ?

1. Retirer la dernière valeur du tableau jours
2. Afficher les valeurs du tableau dans la console
3. Ajouter la valeur 'dim' à la fin du tableau
4. Remplacer la valeur '007' par 'mar'
5. Afficher le nombre de valeurs du tableau dans la console
6. Afficher la troisième valeur du tableau dans la console

Quelle est la valeur finale du tableau, après avoir effectué toutes ces opérations ?

Solution

var jours = [ 'lun', '007', 'mer', 'jeu', 'ven', 'sam', 'BUG' ];
jours.pop();
console.log(jours);
jours.push('dim');
jours[1] = 'mar';
console.log(jours.length);
console.log(jours[2]);

La méthode indexOf() retourne l'indice du premier élément d'un tableau, pour une valeur donnée. La valeur recherchée est à passer en paramètre (entre parenthèses) de la méthode, quand on l'appelle  :

var fruits = [ 'Mangue', 'Raisin', 'Figue', 'Raisin' ];
fruits.indexOf('Raisin'); // => 1

Si aucun élément du tableau ne contient la valeur cherchée, l'appel à indexOf() retourne -1 :

fruits.indexOf('Pomme'); // => -1, car il n'y a pas de valeur 'Pomme' dans fruits

Comme pour les chaines de caractères, il est possible de concaténer des tableaux.

La concaténation de deux tableaux consiste à créer un nouveau tableau contenant les éléments de ces deux tableaux.

La méthode concat() retourne un nouveau tableau contenant les éléments du tableau sur lequel elle est appelée, et d'un autre tableau passé en paramètre  :

var fruits1 = [ 'Mangue', 'Raisin' ];
var fruits2 = [ 'Figue', 'Kiwi' ];
fruits1.concat(fruits2); // => [ 'Mangue', 'Raisin', 'Figue', 'Kiwi' ]

Il est bien entendu possible d'utiliser des tableaux littéraux, au lieu de variables  :

[ 'Mangue', 'Raisin' ].concat([ 'Figue', 'Kiwi' ]); // => [ 'Mangue', 'Raisin', 'Figue', 'Kiwi' ]

La méthode slice() retourne un nouveau tableau contenant un extrait du tableau sur lequel elle est appelée.

À chaque appel de cette méthode, il faut fournir deux paramètres : l'indice de l'élément où commence cet extrait, et l'indice de l'élément où se termine l'extrait (non compris) :

var fruits = [ 'Mangue', 'Raisin', 'Figue', 'Kiwi' ];
fruits.slice(1, 3); // => [ 'Raisin', 'Figue' ]

La méthode splice() (à ne pas confondre avec slice()) permet à la fois de supprimer et d'insérer des éléments dans un tableau, en fournissant leur indice.

Syntaxe d'appel de la méthode : tableau.splice(i, c, v1, v2, ...), avec

• paramètre i : indice à partir duquel on va effectuer la modification
• paramètre c : nombre d'éléments à supprimer depuis l'indice i
• paramètre(s) suivant(s) : valeur(s) d'élément(s) à insérer à partir de l'indice i

Voici un exemple utilisant les paramètres i et c : (suppression seulement)

var fruits = [ 'Mangue', 'Raisin', 'Figue', 'Kiwi' ];
fruits.splice(1, 2); // depuis l'indice 1, supprimer 2 valeurs
fruits; // => [ 'Mangue', 'Kiwi' ]

Voici un exemple utilisant tous les paramètres : (insertion seulement)

var fruits = [ 'Mangue', 'Raisin', 'Figue', 'Kiwi' ];
fruits.splice(1, 0, 'Pomme'); // depuis l'indice 1, supprimer 0 valeurs, puis y insérer 'Pomme'
fruits; // => [ 'Mangue', 'Pomme', 'Raisin', 'Figue', 'Kiwi' ]

Contrairement aux méthodes concat() et slice(), splice() ne retourne pas un nouveau tableau, mais modifie le tableau sur lequel elle est appelée.

var fruits = [ 'Mangue', 'Raisin', 'Figue', 'Kiwi' ];

Écrire un programme qui :

1. Affiche la liste de fruits disponibles ;

2. Demande au client quel fruit il désire acheter :

   • s'il est présent dans le tableau fruits : le retirer du tableau, et afficher 'OK!',
   • sinon, afficher 'indisponible...'.
3. Affiche à nouveau la liste de fruits disponibles.

Solution

var fruits = [ 'Mangue', 'Raisin', 'Figue', 'Kiwi' ];
console.log(fruits);
var reponse = prompt('quel fruit desirez vous');
var indice = fruits.indexOf(reponse);
if (indice !== -1) {
  fruits.splice(indice, 1);
  console.log('ok!');
} else {
  alert('indisponible...');
}
console.log(fruits);

Principe du jeu : Le joueur doit deviner un mot, lettre par lettre. Il perd après 10 mauvaises tentatives.

Nous allons utiliser les variables suivantes :

var mauvaisesLettres = [ ]; // sera complété pendant le jeu
var lettresAttendues = [ 's', 'u', 'p', 'e', 'r' ];

À chaque tentative, le joueur va proposer une lettre, puis :

• si la lettre fait partie du mot à deviner (dont les lettres sont stockées dans le tableau lettresAttendues), cette lettre sera supprimée du tableau ;
• sinon, elle sera ajoutée à la fin du tableau mauvaisesLettres.

Le joueur gagne la partie quand il a deviné toutes les lettres attendues du mot. (c.-à-d. le tableau lettresAttendues ne contient plus aucun élément)

Le joueur perd la partie dès que le tableau mauvaisesLettres contient 10 éléments. (c.-à-d. le nombre de tentatives autorisées)

Exercice  : implémenter le jeu du pendu en JavaScript.

Mots-clés à utiliser : alert, prompt, if, else, =, ===, indexOf, length, push, splice, et for

Conseil : avant de créer une boucle for, implémenter l'algorithme qui sera exécuté à chaque itération de cette boucle. (une itération = une tentative du joueur)

Étapes proposées :

1. Afficher le nombre de lettres à trouver, et de tentatives restantes.
2. Si mauvaisesLettres a une longueur de 10, afficher perdu!.
3. Si le nombre de lettresAttendues restantes à trouver est nul, afficher bravo!.
4. Demander une lettre au joueur, en utilisant prompt().
5. Si la lettre fait partie du tableau lettresAttendues, la supprimer du tableau. Sinon l'ajouter au tableau mauvaisesLettres. Afficher un message au joueur dans chaque cas.
6. Créer une boucle for permettant de jouer jusqu'à la fin de partie (perdu ou bravo).

BONUS : Dans le cas où le joueur devine une lettre qui apparaît plus d'une fois dans le mot, retirer toutes les occurrences de cette lettre en une seule fois.

Solution

'use strict';
var MAX_TENTATIVES = 10;
var mauvaisesLettres = [ ]; // sera complété pendant le jeu
var lettresAttendues = [ 's', 'u', 'p', 'e', 'r' ];
for (; mauvaisesLettres.length < MAX_TENTATIVES && lettresAttendues.length > 0; ) {
  console.log('lettres à trouver:', lettresAttendues);
  alert('Lettres à trouver: ' + lettresAttendues.length + '. '
    + 'Tentatives restantes: ' + (MAX_TENTATIVES - mauvaisesLettres.length));
  var lettre = prompt('Devinez une lettre');
  var indice = lettresAttendues.indexOf(lettre);
  if (indice != -1) {
    lettresAttendues.splice(indice, 1); // retire la 1ère occurrence de cette lettre trouvée dans le tableau
    alert('Bonne pioche! Continuez!');
  } else {
    mauvaisesLettres.push(lettre);
    alert('Le mot à trouver ne contient pas la lettre ' + lettre + ', désolé...');
  }
}
if (lettresAttendues.length == 0) {
  alert('Bravo, vous avez trouvé le mot !');
} else if (mauvaisesLettres.length == MAX_TENTATIVES) {
  alert('Perdu... Faites une autre partie !');
}

BONUS

'use strict';
var MAX_TENTATIVES = 10;
var mauvaisesLettres = [ ]; // sera complété pendant le jeu
var lettresAttendues = [ 'a', 'n', 'n', 'a' ];
for (; mauvaisesLettres.length < MAX_TENTATIVES && lettresAttendues.length > 0; ) {
  console.log('lettres à trouver:', lettresAttendues);
  alert('Lettres à trouver: ' + lettresAttendues.length + '. '
    + 'Tentatives restantes: ' + (MAX_TENTATIVES - mauvaisesLettres.length));
  var lettre = prompt('Devinez une lettre');
  // tant qu'on trouve des occurrences, on continue de les supprimer une à une
  var trouvees = 0;
  for (var indice = 0; indice != -1 ;) {
    indice = lettresAttendues.indexOf(lettre); // cherche la prochaine occurrence de la lettre
    if (indice != -1) {
      lettresAttendues.splice(indice, 1); // retire cette occurrence de la lettre trouvée dans le tableau
      trouvees++;
    }
  }
  if (trouvees > 0) {
    alert('Bonne pioche ! Il y avait bien ' + trouvees + ' fois la lettre '
      + lettre + ' dans le mot à trouver !');
  } else {
    mauvaisesLettres.push(lettre);
    alert('Le mot à trouver ne contient pas la lettre ' + lettre + ', désolé...');
  }
}
if (lettresAttendues.length == 0) {
  alert('Bravo, vous avez trouvé le mot !');
} else if (mauvaisesLettres.length == MAX_TENTATIVES) {
  alert('Perdu... Faites une autre partie !');
}