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 opérateurs conditionnels et le typage implicite
Mis à jour le 3 mars 2016 par ABCIWEB, autran, Gnuum, vermine

Objectif
Manipuler les structures conditionnelles de type if...else.

Compétences

  • Utilisation des structures conditionnelles de type if...else.
  • Utilisation d'expressions booléennes.


Cours
Algèbre de Boole
L'algèbre de Boole est utilisée en programmation pour évaluer si une expression est vraie ou fausse.

Si on prend quelques exemples basiques :
VRAI et VRAI = VRAI
VRAI et FAUX = FAUX
VRAI ou FAUX = VRAI

Si on applique ces exemples au JavaScript cela donne :
Code javascript : Sélectionner tout
1
2
3
true && true === true 
true && false === false 
true || false === true

Expression booléenne
Une expression booléenne en JavaScript est une expression qui s'évalue à true ou à false.

Cela peut, par exemple, être une égalité, une inégalité, une fonction retournant une valeur booléenne...
Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var a = 0, 
    b = 1, 
    c = '1' 
; 
  
console.log(a === 0);            // Affiche true (égal à) 
console.log(a === 1);            // Affiche false 
console.log(a === b);            // Affiche false 
console.log(a === 0 && b === 1); // Affiche true 
console.log(a === 0 && b === 0); // Affiche false 
console.log(a === 0 || b === 0); // Affiche true 
console.log(b === c);            // Affiche false (car le type est différent) 
console.log(b == c);             // Affiche true (car l'opérateur == essaie de faire fi du type si possible) 
console.log(a < b);              // Affiche true (inférieur à) 
console.log(a >= b);             // Affiche false (supérieur ou égal à) 
console.log(a !== b);            // Affiche true (différent de)

Il est possible d'utiliser des parenthèses pour former des expressions imbriquées et forcer l'ordre de précédence (ordre d'évaluation).
Code javascript : Sélectionner tout
a === 0 && (b === 1 || b === 2)
Dans cet exemple, (b === 1 || b === 2) est évaluée en premier ; ce qui donne, si on détaille l'étape intermédiaire :
Code javascript : Sélectionner tout
a === 0 && true


Algorithmique et structures conditionnelles
Une des structures de base de l'algorithmique de la plupart des langages de programmation est le branchement conditionnel de type « si », « alors », « sinon ».

En algorithmique, la syntaxe pour employer ce branchement est :
Code : Sélectionner tout
1
2
3
4
si  alors 
    
sinon 
   
Si on traduit en mots, cela consiste à :
- évaluer l'expression  ;
- exécuter si l’évaluation donne VRAI ;

- ou exécuter dans le cas contraire.

L'instruction « sinon » n'est pas obligatoire, on peut écrire :
Code : Sélectionner tout
1
2
si  alors 
   
Dans ce cas, on n’exécutera que si s'évalue à VRAI.

Structures conditionnelles en JavaScript
En JavaScript, les mots clés utilisés pour décrire une structure conditionnelle de ce type sont if et else:
Code javascript : Sélectionner tout
1
2
3
4
5
6
7
var a = 0; 
  
if (a === 0) { 
    console.log('Je serai affiché !'); 
} else { 
    console.log('Je ne serai pas affiché...'); 
}

Il est bien sûr possible d'imbriquer ces structures :
Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
var a = 0, b = 1; 
  
if (a === 1) { 
    console.log('Je ne serai pas affiché...'); 
} else if (a === 0) { 
    if (b === 1) { 
        console.log('Je serai affiché !'); 
    } 
} else { 
    console.log('Je ne serai pas affiché...'); 
}


Références


Exercice
Pour ce premier exercice, il est demandé de déclarer et définir trois variables numériques.

Si elles sont égales, écrire : « Les trois variables sont identiques. »
Si seulement deux sont identiques, écrire : « deux des variables sont de valeurs égales. »
Sinon, écrire : « Les trois variables sont différentes. »

Auteur
Marc Autran

Courage !

Posez toutes vos questions à propos de cet exercice sur cette discussion du forum.

Voir une solution
Mis à jour le 3 mars 2016 par ABCIWEB, autran, Gnuum

Objectif
Manipuler les structures conditionnelles de type switch.

Compétences

  • Utilisation des structures conditionnelles de type if...else.
  • Utilisation des structures conditionnelles de type switch.
  • Compréhension des bases arithmétiques.


Cours
Valeur octale
La base de l'électronique est une suite de tout et de rien : le courant passe ou ne passe pas. Ce qui se traduit en informatique par le fait que le processeur travaille avec une suite de 0 (rien) et de 1 (tout). Ce qui induit que le système décimal (base 10) soit très peu utilisé quand on décrit les fonctionnements internes des ordinateurs. On lui préfère le binaire (base 2) ou l'octal (base 8), ou encore l'hexadécimal (base 16).
Pour des raisons historiques de taille d'instruction d'opcode et d'unité d'information, on utilise généralement l'octet pour définir la taille (c.-à-d. le poids) d'un fichier. L'octet est un ensemble de 8 bits, 1 bit étant un 0 ou un 1. Ce qui permet de représenter 2^8=256 (2x2x2x2x2x2x2x2) valeurs différentes dans un octet.

Pour pouvoir plus facilement lire les grands nombres d'octets, on a inventé des unités qui elles-mêmes sont fondées sur le système binaire :
  • 1 Ko = 2^10 = 1024 octets (1 Kilooctet)
  • 1 Mo = 2^20 = 1024 x 1024 octets (1 mégaoctet)
  • 1 Go = 2^30 = 1024 x 1024 x 1024 octets (1 gigaoctet)
  • 1 To = 2^40 = 1024 x 1024 x 1024 x 1024 octets (1 téraoctet)

C'est pour cette raison qu'un Kilooctet n'est pas égal à 1000 octets, mais 1024 octets.
À noter que certains considèrent l'appellation Ko pour 1024 octets abusive. Ils préfèrent utiliser Ko pour 1000 octets et Kio (Kibioctet) pour 1024 octets. Cependant, les OS majeurs ne font pas cette distinction.

L'équivalent utilisé pour octet en anglais est byte, mais une différence existe entre les deux. En effet, un byte ne contient pas la notion d'octal, il a donc également été employé pour des systèmes qui utilisaient des jeux d'instructions différents et où il représentait alors des structures à 7, 9 ou X bits.

Instruction switch
Dans le cas où la condition à tester dans une structure conditionnelle est la valeur d'une seule et même variable, il est plus structurant d'utiliser un switch à la place d'un if...else. Cela permet d'identifier et comprendre plus rapidement la fonction d'un code, car les possibilités conditionnelles sont restreintes.

Le code :
Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
var a = 0; 
  
if (a === 0) { 
    console.log('a est égal à 0'); 
} else if (a === 1) { 
    console.log('a est égal à 1'); 
} else if (a === 2) { 
    console.log('a est égal à 2'); 
} else if (a === 3) { 
    console.log('a est égal à 3'); 
} else { 
    console.log('a est égal à autre chose'); 
}
est équivalent à :
Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var a = 0; 
  
switch (a) { 
    case 0: 
        console.log('a est égal à 0'); 
        break; 
    case 1: 
        console.log('a est égal à 1'); 
        break; 
    case 2: 
        console.log('a est égal à 2'); 
        break; 
    case 3: 
        console.log('a est égal à 3'); 
        break; 
    default: 
       console.log('a est égal à autre chose'); 
}
Le switch a d'autres spécificités qui seront vues dans de prochains exercices.

Références


Exercice
Le but de cet exercice est de transformer une valeur binaire abrégée en sa valeur non abrégée.
Par exemple : 2K = 2048 (2 x 1024).

Nous allons utiliser trois variables :
  • la première quantity représente la quantité,
  • la deuxième unit représente l'unité ("K", "M", "G" ou "T"),
  • la troisième result contiendra le résultat.


Voici un gabarit de l'exercice :
Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
'use strict'; 
  
var quantity = 2, 
    unit = 'K', 
    result 
; 
  
// TODO: Coder l'algorithme de transformation ici. 
  
console.log(result); // Affiche le résultat (avec les valeurs par défaut, cela donnera 2048).

1/ Résoudre l'exercice avec une suite de if...else.
2/ Résoudre l'exercice avec un switch (avec un break pour chaque case).
3/ Faire en sorte que si la variable unit est différente des valeurs attendues ("K", "M", "G" ou "T"), la variable result soit égale à false.

Auteur
Alain Bontemps

Bonne chance !

Posez toutes vos questions à propos de cet exercice sur cette discussion du forum.

Voir une solution
Mis à jour le 3 mars 2016 par ABCIWEB, autran, Gnuum, vermine

Objectif
Manipuler les structures conditionnelles de manière avancée.

Compétences

  • Utilisation des structures conditionnelles.
  • Utilisation avancée de l'instruction switch.
  • Utilisation de la bibliothèque standard.
  • Recherche d'informations dans une documentation technique.


Cours
Comportement avancé de l'instruction switch
L'instruction switch permet un comportement plus fin qu'une simple suite de if...else imbriqués testant l'égalité de valeur d'une seule variable, elle permet également une « traversabilité » des conditions ainsi qu'une factorisation du code exécuté en fonction des valeurs grâce à une utilisation judicieuse de l'instruction break.

Citation Envoyé par référence switch
Si l'on omet une instruction break, le script exécutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu'à la fin de l'instruction switch ou jusqu'à une instruction break.

Note importante : pour différencier rapidement la structure avancée du switch (instruction break en fonction des besoins), de la structure classique (instruction break systématique à la fin de chaque case), il est vivement recommandé de remplacer les instructions break volontairement omises par le commentaire //fall through, excepté lorsque la case est vide, ou encore terminée par un return ou un throw (que nous verrons dans d'autres occasions), car dans ces cas le code ne prête pas à confusion. Certains outils de programmation javascript comme ESLint renverront une erreur si vous ne respectez pas cette convention.
Pour éviter ces contraintes et les risques de confusions, certains considèrent cette structure avancée comme une mauvaise pratique et préconisent de la remplacer par une structure if/else correspondante.

Prenons pour exemple le code suivant :
Code JavaScript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a = 'w'; 
var b = 0; 
  
switch (a) { 
    case 'w': 
        b++; // Incrémente la valeur de b de 1. 
        //fall through 
    case 'x': 
        b++; 
        break; 
    case 'y': 
    case 'z': 
        b++; 
        break; 
    default: 
        b = false; 
} 
  
console.log(b);

  • Si a = 'w', alors b = 2 (car on exécute le code du case correspondant jusqu'au premier break).
  • Si a = 'x', alors b = 1 (car on exécute le code du case correspondant jusqu'au premier break).
  • Si a = 'y' ou a = 'z', alors b = 1 (car on exécute le code du case correspondant jusqu'au second break, soit le premier rencontré pour ces case).
  • Pour toute autre valeur de a, b sera égal à false (car on passe dans le default).


default est optionnel. En l'occurrence, dans notre exemple, si le cas par défaut n'était pas défini et que la valeur de b ne correspond à aucun cas du switch, b garderait sa valeur initiale définie à 0 au lieu de prendre la valeur false.

Bibliothèque standard
Dans les langages possédant un certain niveau d'abstraction (éloignés du code machine) comme JavaScript, une bibliothèque standard est généralement disponible pour aider à manipuler les chaînes de caractères, les nombres, les dates... facilement et de manière performante.

En JavaScript, ces fonctionnalités sont accessibles selon trois manières :
  • Sur le scope global :
    Code JavaScript : Sélectionner tout
    isNaN(3); // Vérifie si la valeur/variable passée est un nombre ou transtypable en nombre. Renvoie false dans ce cas car 3 est bien un nombre.
  • Sur un objet global (dans l'exemple suivant, l'objet global Number) :
    Code javascript : Sélectionner tout
    Number.parseInt('22K', 10); // Essaie de transformer la valeur en un entier (s'il n'y arrive pas, renvoie NaN). Renvoie un nombre égal à 22 dans ce cas.
  • Sur l'objet héritant du prototype d'un objet global (dans l'exemple suivant, l'objet global String) :
    Code JavaScript : Sélectionner tout
    1
    2
    'abc'.length // Renvoie le nombre de caractères dans la chaîne de caractères; 3 dans ce cas. 
    'abc'.substr(0, 2); // Récupère une sous-chaîne de la chaîne de caractères. Renvoie 'ab' dans ce cas.

Les notions de fonction, scope, objet, méthode, prototype et héritage sont des notions importantes en JavaScript qui seront détaillées dans de futurs exercices dédiés. Leur compréhension fine n'est pas indispensable pour le moment.

Références


Exercice
Il s'agit dans cet exercice de comprendre et d'exploiter le comportement de l'instruction switch lorsqu'on n’utilise pas l'instruction break à la fin de chaque case. Parallèlement, nous utiliserons quelques fonctions de la bibliothèque standard du JavaScript pour nous aider. À ce propos, n'hésitez pas à consulter les références proposées ci-dessus pour mieux comprendre le fonctionnement des différentes fonctions et méthodes proposées. Cette consigne sera considérée comme implicite dans les prochains exercices. Un développeur autonome doit être capable de rechercher l'information dont il a besoin par lui même.

1/ Créer une structure de code avec un switch qui transforme une variable de type string représentant un nombre d'octets abrégé : 150K, 400M, 5G, 3T, en nombre d'octets non abrégé.
Le code devra être fonctionnel pour les unités de mesure "K", "M", "G", "T".
Si l'on n’indique pas d'unité, par exemple : var shortenBytes = '887';, on supposera que la variable testée indique des octets.

Pour rappel :
  • 150K = 150 x 1024
  • 400M = 400 x 1024 x 1024
  • 5G = 5 x 1024 x 1024 x 1024
  • 2T = 2 x 1024 x 1024 x 1024 x 1024


Voici un gabarit pour aider à démarrer l'exercice (il est possible le faire évoluer au fur et à mesure de l'énoncé) :

Code JavaScript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
var shortenBytes = '150K'; 
var letter = // TODO: extract the letter from `shortenBytes` with `substr`. 
var bytes; 
var number = // TODO: extract a numeric number from `shortenBytes` with `parseInt`. 
  
switch (letter) { 
    // TODO: convert `shortenBytes` to `bytes`. 
} 
  
console.log(bytes);


2/ Rendre le code insensible à la casse de sorte qu'il pourra fonctionner indifféremment avec des majuscules ou des minuscules, par exemple '250M' ou '250m', '2g' ou '2G', etc.
Pour ce faire, on utilisera la méthode toUpperCase qui permet de convertir une chaîne de caractères en majuscules.

3/ Sécuriser le script en vérifiant avec isNaN que la variable testée respecte le format attendu et peut donc être convertie en valeur numérique. Dans le cas contraire, si par exemple var shortenBytes = 'two potatoes'; et plus généralement pour toute valeur non convertible, le code devra afficher le booléen false.

Note : durant la phase de développement, ne pas hésiter à utiliser des console.log sur les variables pour vérifier que le traitement correspond au résultat attendu. Par exemple :
Code JavaScript : Sélectionner tout
1
2
3
4
// ... 
var letter = shortenBytes.substr(/* ... */);  
console.log(letter); 
// ...

Auteur
Alain Bontemps

Bon boulot !

Posez toutes vos questions à propos de cet exercice sur cette discussion du forum.

Voir une solution
Mis à jour le 3 mars 2016 par autran, Gnuum

Objectif
Comprendre le typage dynamique.

Compétences

  • Utilisation des structures conditionnelles.
  • Récupération du type d'une variable.


Cours
Typage dynamique
Comme nous l'avons vu précédemment, en JavaScript, une variable possède un type. Cependant, contrairement à d'autres langages le type n'est pas imposé par le développeur via des définitions explicites. Ce qui induit que l'interpréteur (système qui traduit le code JavaScript en langage compréhensible par la machine) ne peut vérifier la validité des types et de leur utilisation lors de l'interprétation, mais seulement à l'exécution (quand la variable est définie).
C'est ce qu'on appelle un langage à typage dynamique. Pour ne citer que les principaux avantages et inconvénients, il est plus facile et rapide de travailler avec un typage dynamique, mais le code produit est plus difficile à déboguer et légèrement moins performant.

Récupération du type d'une variable en JavaScript
En JavaScript, il est possible de récupérer le type d'une variable grâce à l'opérateur typeof:
Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
var hi = "Hello !"; 
console.log(typeof hi); // 'string' 
hi = 83110; 
console.log(typeof hi); // 'number' 
hi = ["H", "e", "l" ,"l" ,0]; 
console.log(typeof hi); // 'object' 
hi = function() { alert("Hello !"); }; 
console.log(typeof hi === "function"); // true

Notez qu'en dehors des types primitifs et des fonctions, l'opérateur typeof renvoie "object" pour tous les autres types d'objets.

Références


Exercice
Déclarer et définir une variable value contenant une valeur de type nombre (number) ou chaîne de caractères (string).
Les valeurs possibles sont value = 0 ou value = 1 ou value = 2 ou value = '0' ou value = '1' ou value = '2'.

1/ À l'aide de l'instruction if...else afficher "La valeur est une chaîne de caractères" ou "La valeur est un nombre".

2/ À l'aide de l'instruction switch afficher "La valeur est supérieure à 0" et/ou "La valeur est supérieure à 1" ou "La valeur est égale à 0". Cela doit fonctionner qu'il s'agisse d'un nombre (number) ou d'une chaîne de caractères (string).

Par exemple pour var value = 2; le programme devra afficher :
La valeur est un nombre
La valeur est supérieure à 1
La valeur est supérieure à 0

Auteur
Gnuum

Bonne chance !

Posez toutes vos questions à propos de cet exercice sur cette discussion du forum.

Voir une solution
Mis à jour le 23 avril 2016 par autran, genthial, Gnuum

Objectif
Manipuler l'opérateur conditionnel ternaire ? :

Compétences

  • Utilisation de l'opérateur conditionnel ternaire ? :


Cours
La plupart des opérateurs des langages de programmation sont unaires (1 seul opérande) ou binaires (2 opérandes). C'est notamment le cas des opérateurs arithmétiques et logiques usuels binaires comme + ou >= (x + 3, x >= y) ou unaires comme ! et - (! trouve, - y). Parmi les opérateurs unaires, on peut aussi citer typeof vu lors de l'exercice précédent (typeof hi).

L'opérateur ? : est ternaire, il nécessite 3 opérandes : une condition (expression booléenne) et deux valeurs. Il évalue l'expression booléenne et si elle est vraie renvoie la première valeur et sinon la seconde, à la manière d'un simple if...else.

Les deux codes suivants sont équivalents :
Code javascript : Sélectionner tout
1
2
3
4
5
if (condition) { 
    x = valeurSiVrai; 
} else { 
    x = valeurSiFaux; 
}
Code javascript : Sélectionner tout
x = condition ? valeurSiVrai : valeurSiFaux;

Dans l'exemple ci-dessous :

Code javascript : Sélectionner tout
console.log(number >= 0 ? '+' : '-'); // Affiche "+" si la variable "number" est positive, sinon "-"

si la variable number est supérieure ou égale à 0, l'expression number >= 0 ? '+' : '-' renvoie + et sinon -. Ce résultat devient l'argument de la fonction console.log.

On peut imbriquer des conditions ternaires ou les utiliser avec des expressions plus complexes, mais dans ce cas la lisibilité devient souvent inférieure à celle d'une structure if...else.

Références


Exercice
Déclarer et définir 2 variables misteryNumber et myNumber de type number.
En utilisant uniquement l'opérateur ternaire, on affiche :

  • Si les 2 nombres sont égaux Congratulations !
  • Sinon
    • Si le nombre myNumber est inférieur au nombre misteryNumber, on affiche +
    • Sinon on affiche -



Auteur
Marc AUTRAN

Bon courage !

Posez toutes vos questions à propos de cet exercice sur cette discussion du forum.

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 © 2024 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.