Opérateurs et expressions JavaScript

Introduction

Bienvenue dans le laboratoire "Opérateurs et Expressions en JavaScript". Au cours de cette session pratique, vous découvrirez les éléments fondamentaux de la programmation JavaScript : les opérateurs et les expressions. Les opérateurs sont des symboles spéciaux utilisés pour effectuer des opérations sur des valeurs (les opérandes), et une expression est toute unité de code qui se résout en une valeur.

Vous commencerez par les opérateurs arithmétiques de base tels que l'addition, la soustraction, la multiplication et la division. Ensuite, vous explorerez comment l'opérateur d'addition peut également être utilisé pour combiner des chaînes de caractères, un processus connu sous le nom de concaténation. Enfin, vous découvrirez l'opérateur d'incrémentation pratique. À la fin de ce laboratoire, vous serez capable d'effectuer des manipulations de données de base en JavaScript.

Utiliser l'opérateur d'addition sur des nombres

Dans cette étape, vous apprendrez à utiliser l'opérateur d'addition (+) pour effectuer des additions sur des nombres. C'est l'une des opérations arithmétiques les plus courantes.

Votre environnement de laboratoire est déjà configuré avec un fichier index.html et un fichier script.js dans le répertoire ~/project. Nous écrirons tout notre code JavaScript dans le fichier script.js.

Tout d'abord, localisez le fichier script.js dans l'explorateur de fichiers sur le côté gauche de votre écran. Cliquez dessus pour l'ouvrir dans l'éditeur.

Maintenant, ajoutez le code suivant à script.js. Ce code déclare deux variables numériques, les additionne et utilise console.log() pour afficher le résultat dans la console du développeur du navigateur.

// Step 1: Addition
let num1 = 10;
let num2 = 5;
let sum = num1 + num2;
console.log("The sum is:", sum);

Après avoir ajouté le code, enregistrez le fichier en appuyant sur Ctrl+S.

Pour voir la sortie, naviguez vers l'onglet Web 8080 en haut de l'interface. Ensuite, ouvrez la console du développeur en appuyant sur F12 ou en faisant un clic droit sur la page, en sélectionnant "Inspecter" (Inspect), puis en cliquant sur l'onglet "Console". Vous devriez voir le message The sum is: 15.

Appliquer les opérateurs de soustraction et de multiplication

Dans cette étape, vous allez appliquer les opérateurs de soustraction (-) et de multiplication (*). Ceux-ci fonctionnent de la même manière que l'opérateur d'addition, mais effectuent des calculs différents.

Continuez à modifier le fichier ~/project/script.js. Ajoutez les lignes de code suivantes sous votre code existant pour calculer la différence et le produit des deux mêmes nombres.

// Step 2: Subtraction and Multiplication
let difference = num1 - num2;
console.log("The difference is:", difference);

let product = num1 * num2;
console.log("The product is:", product);

Enregistrez à nouveau le fichier (Ctrl+S). Rafraîchissez l'onglet Web 8080 (vous pouvez utiliser le bouton de rafraîchissement dans l'onglet). La console du développeur affichera désormais les résultats de l'addition, de la soustraction et de la multiplication.

Implémenter les opérateurs de division et de modulo

Dans cette étape, nous allons explorer les opérateurs de division (/) et de modulo (%). L'opérateur de division effectue une division standard, tandis que l'opérateur de modulo renvoie le reste d'une division. Ceci est utile pour des tâches telles que déterminer si un nombre est pair ou impair.

Ajoutez le code suivant à la fin de votre fichier ~/project/script.js.

// Step 3: Division and Modulus
let quotient = num1 / num2;
console.log("The quotient is:", quotient);

let remainder = num1 % 3; // Using 3 to get a non-zero remainder
console.log("The remainder of 10 divided by 3 is:", remainder);

Enregistrez le fichier et rafraîchissez l'onglet Web 8080. Vérifiez la console pour voir la nouvelle sortie pour la division et le reste. Vous devriez voir que le quotient est 2 et le reste est 1.

Concaténer des chaînes de caractères avec l'opérateur plus

Dans cette étape, vous verrez une utilisation différente de l'opérateur + : la concaténation de chaînes de caractères. Lorsqu'il est utilisé avec des chaînes de caractères, l'opérateur + les joint pour créer une nouvelle chaîne plus longue.

Créons deux variables de type chaîne de caractères et concaténons-les. Ajoutez ce code à la fin de ~/project/script.js.

// Step 4: String Concatenation
let firstName = "Hello";
let lastName = "World";
let fullName = firstName + " " + lastName;
console.log(fullName);

Dans l'exemple ci-dessus, nous joignons firstName, un espace " ", et lastName pour former une phrase complète.

Après avoir enregistré le fichier, rafraîchissez l'onglet Web 8080. La console affichera maintenant la chaîne concaténée : Hello World.

Incrémenter une variable avec l'opérateur ++

Dans cette dernière étape, vous découvrirez l'opérateur d'incrémentation (++). Il s'agit d'un opérateur unaire, ce qui signifie qu'il agit sur un seul opérande. C'est un raccourci pratique pour ajouter 1 à une variable numérique, une opération très courante dans les boucles et les compteurs.

Ajoutez le code suivant à la fin de ~/project/script.js pour le voir en action.

// Step 5: Increment Operator
let counter = 0;
counter++; // This is equivalent to counter = counter + 1;
console.log("The counter value is:", counter);

Enregistrez le fichier une dernière fois et rafraîchissez l'onglet Web 8080. La console affichera la valeur finale du compteur, qui devrait être 1.

Résumé

Félicitations pour avoir terminé ce laboratoire !

Dans ce laboratoire, vous avez appris les bases des opérateurs et des expressions JavaScript. Vous avez pratiqué l'utilisation de :

• Opérateurs arithmétiques pour les calculs de base : + (addition), - (soustraction), * (multiplication), / (division) et % (modulo).
• L'opérateur + pour la concaténation de chaînes de caractères afin de joindre du texte.
• L'opérateur d'incrémentation ++ comme raccourci pour augmenter la valeur d'un nombre de un.

Ces opérateurs sont des éléments fondamentaux en JavaScript et sont utilisés dans pratiquement tous les programmes. Vous êtes maintenant prêt à aborder une logique et des fonctionnalités plus complexes dans vos futurs projets.