IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Exercices NodeJS pour apprendre le JavaScript côté serveur

Nombre d'auteurs : 5 - Nombre d'exercices : 8 - Dernière mise à jour : 23 avril 2016 

 

Une sélection des meilleurs exercices, accessibles aux débutants, avec des énoncés clairs et complets suivis de solutions détaillées.

Grâce à l'entraide bénévole, les membres du club répondent à vos questions directement sur le forum et vous aident lors de l'apprentissage du langage.

SommaireLe langage JavaScriptLes objets
Mis à jour le 3 mars 2016 par autran, Gnuum

Objectif
Manipuler les tableaux JavaScript.

Compétences

  • Déclaration d'un tableau
  • Ajout d'éléments dans un tableau
  • Parcours et manipulation d'un tableau grâce aux boucles for
  • Utilisation des méthodes du prototype de l'objet Array
  • Recherche dans une documentation


Cours
Compatibilité
En JavaScript il existe plusieurs interpréteurs différents qui traduisent le code en un langage compréhensible par la machine (une suite de 0 et de 1). Le langage évoluant et proposant régulièrement de nouvelles fonctionnalités, certains interpréteurs n'implémentent pas forcément les dernières de ces nouveautés. Une partie des enseignements dispensés dans ces exercices ne sont compatibles qu'avec les plus modernes. Pour être sûr de pouvoir utiliser toutes les fonctionnalités enseignées, il est donc important de se munir de la version la plus récente possible de Node.js et d'un navigateur le plus récent possible.

De manière générale, il est important de se poser la question de la compatibilité du code quand on en arrive à un développement industriel (un tableau récapitulatif des compatibilités navigateur est notamment disponible dans les pages de la documentation MDN). Cependant, nous verrons ultérieurement que des outils existent pour simplifier cette gestion parfois assez complexe !

Pour éviter d'ajouter à la confusion et éviter que le contenu ne se périme, nous ne détaillerons généralement pas ces compatibilités dans nos exercices.

Notion de tableau
En JavaScript, les tableaux sont des objets issus du constructeur Array. Ils servent à stocker une liste ordonnée d'éléments. Chaque élément est associé à un index numérique (de type number) qui correspond à son emplacement dans le tableau. Le premier élément a l'index 0, le second l'index 1, et le dernier a l'index n-1, où n est la taille du tableau. Les tableaux disposent de nombreuses méthodes utilitaires dans Array.prototype leur permettant d'être parcourus et manipulés facilement (tri, filtre...)

On peut déclarer un tableau de plusieurs manières :
  • avec l'écriture littérale : var array = [];
  • avec l'objet Array utilisé comme constructeur : var array = new Array();

On peut ajouter des éléments dans un tableau de différentes manières :
  • en définissant explicitement l'index et sa valeur : array[index] = value;
  • en utilisant les méthodes du prototype de l'objet Array :
    Code JavaScript : Sélectionner tout
    1
    2
    3
    array.push(value); // Ajoute un élément à la fin du tableau. 
    array.unshift(value); // Ajoute un élément au début du tableau. 
    // ...


Itération sur un tableau
On peut itérer/parcourir un tableau grâce aux boucles qui sont un élément classique de la plupart des langages de programmation. En JavaScript, les boucles sont introduites par l'instruction for.

La première forme de boucle est un peu verbeuse mais permet de récupérer l'index et la valeur des éléments du tableau :
Code JavaScript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
var array = [1, 2, 4]; 
  
for (var i = 0; i < array.length; i++) { 
    var value = array[i]; 
  
    console.log(i + '-', value); 
} 
/* Affiche : 
0-1 
1-2 
2-4 
*/
  • le premier élément de la boucle var i = 0 est exécuté avant que la boucle ne commence ;
  • le second élément de la boucle i < array.length doit retourner une expression booléenne réévaluée avant chaque itération: si celle-ci est évaluée à true, la boucle continue, sinon elle s'arrête et on sort de la boucle ;
  • le troisième élément de la boucle i++ est exécuté après chaque itération et sert généralement à incrémenter la valeur de l'index du tableau.


La plupart du temps on a seulement besoin des valeurs, on peut donc simplement utiliser une boucle for...of :
Code JavaScript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
var array = [1, 2, 4]; 
  
for (var value of array) { 
    console.log(value); 
} 
/* Affiche: 
1 
2 
4 
*/
Il est également possible d'utiliser la méthode forEach du prototype de l'objet Array :
Code JavaScript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
var array = [1, 2, 4]; 
  
array.forEach((value, index) => { 
    console.log(`${index}-${value}`); // équivalent préférable à console.log(i + '-', value); 
}); 
/* Affiche: 
0-1 
1-2 
2-4 
*/

À noter que, bien que la syntaxe array['foo'] = 'bar'; soit tout à fait valable, un tableau ne fonctionne qu'avec des index numériques ; nous verrons dans des exercices ultérieurs les structures qui permettent d'utiliser d'autres types de clés/index. De plus, le code var array = []; array[100] = 'foo'; créera instantanéement un tableau de taille 101, avec les 100 premiers index possédant des valeurs undefined.

Références


Exercice
1/ Soit var size = 5; une variable représentant la taille du tableau.
À l'aide d'une boucle, initialiser un tableau dont la taille est la valeur de la variable size de telle sorte que chaque élément ait pour valeur le double de son index.

2/ Afficher chaque élément du tableau pour var size = 4; dans la console sous la forme :
index => value

3/ Chercher et utiliser une des méthodes du prototype de l'objet Array pour créer un nouveau tableau à partir du premier avec des valeurs encore doublées pour chaque index (soit une valeur égale à 4x celle de l'index). Le but étant ici de s'entraîner à rechercher une information dans une documentation par soi-même tout en s'appropriant les méthodes de l'objet Array au passage.

Auteur
Marc Autran

Bon codage !

Voir une solution

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2021 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.