Effectuer des opérations arithmétiques en JavaScript

Introduction

Dans ce laboratoire, les participants exploreront les opérations arithmétiques fondamentales en JavaScript, en apprenant à manipuler les nombres à l'aide de divers opérateurs mathématiques. Le laboratoire propose un parcours complet en passant par la configuration d'un environnement HTML, la mise en œuvre d'opérations arithmétiques de base telles que l'addition, la soustraction, la multiplication et la division, et la compréhension de concepts plus avancés tels que l'opérateur modulo et les opérateurs d'incrémentation/décrémentation.

Les participants commenceront par créer un fichier HTML avec une section JavaScript intégrée, puis perfectionneront progressivement leurs compétences en pratiquant différentes techniques arithmétiques. Grâce à des exercices de codage pratiques, les apprenants acquerront une expérience pratique dans la réalisation de calculs mathématiques, la compréhension de la précédence des opérateurs et l'exploration des opérations d'incrémentation/décrémentation préfixées et postfixées, qui sont des compétences essentielles pour la programmation en JavaScript.

Configurer le fichier HTML pour les opérations arithmétiques en JavaScript

Dans cette étape, vous créerez un fichier HTML de base qui servira de base pour effectuer des opérations arithmétiques en JavaScript. Nous allons configurer une structure HTML simple et inclure une section JavaScript intégrée pour démontrer la fonctionnalité arithmétique de base.

Tout d'abord, ouvrez l'IDE Web et accédez au répertoire ~/projet. Créez un nouveau fichier appelé arithmétique.html en cliquant droit dans l'explorateur de fichiers et en sélectionnant "Nouveau fichier".

Copiez et collez le code HTML suivant dans le fichier arithmétique.html :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Opérations arithmétiques en JavaScript</title>
  </head>
  <body>
    <h1>Opérations arithmétiques en JavaScript</h1>

    <script>
      // Nous ajouterons notre code JavaScript ici dans cette section
      console.log(
        "Le fichier HTML est prêt pour les opérations arithmétiques!"
      );
    </script>
  </body>
</html>

Analysons les composants clés de ce fichier HTML :

<!DOCTYPE html> déclare que ceci est un document HTML5
La section <head> contient des métadonnées sur le document
Le <body> contient le contenu visible
La balise <script> est où nous écrirons notre code JavaScript

Pour vérifier que le fichier est créé correctement, vous pouvez ouvrir le fichier dans la console de développement du navigateur. Le message initial console.log() vous aidera à confirmer que le fichier est correctement configuré.

Implémenter les opérateurs arithmétiques de base (+, -, *, /)

Dans cette étape, vous allez apprendre à effectuer des opérations arithmétiques de base en JavaScript à l'aide des opérateurs mathématiques fondamentaux : addition (+), soustraction (-), multiplication (*) et division (/).

Ouvrez le fichier arithmétique.html créé dans l'étape précédente et modifiez la section <script> pour inclure le code suivant :

<script>
  // Opérateur d'addition (+)
  let somme = 10 + 5;
  console.log("Addition : 10 + 5 =", somme);

  // Opérateur de soustraction (-)
  let différence = 20 - 7;
  console.log("Soustraction : 20 - 7 =", différence);

  // Opérateur de multiplication (*)
  let produit = 6 * 4;
  console.log("Multiplication : 6 * 4 =", produit);

  // Opérateur de division (/)
  let quotient = 25 / 5;
  console.log("Division : 25 / 5 =", quotient);
</script>

Lorsque vous ouvrez ce fichier HTML dans un navigateur web et que vous consultez la console de développement du navigateur, vous verrez la sortie d'exemple suivante :

Addition : 10 + 5 = 15
Soustraction : 20 - 7 = 13
Multiplication : 6 * 4 = 24
Division : 25 / 5 = 5

Points clés à comprendre :

L'opérateur + additionne deux nombres
L'opérateur - soustrait l'opérande droit de l'opérande gauche
L'opérateur * multiplie deux nombres
L'opérateur / divise l'opérande gauche par l'opérande droit

Vous pouvez également effectuer des opérations avec des variables et mélanger différents types de nombres, y compris des entiers et des nombres à virgule flottante.

Explorer l'opérateur modulo et les opérateurs d'incrémentation/décrémentation

Dans cette étape, vous allez découvrir deux opérateurs arithmétiques importants en JavaScript : l'opérateur modulo (%) et les opérateurs d'incrémentation/décrémentation (++ et --).

Ouvrez le fichier arithmétique.html et mettez à jour la section <script> avec le code suivant :

<script>
  // Opérateur modulo (%)
  // Renvoie le reste d'une division
  let reste = 17 % 5;
  console.log("Modulo : 17 % 5 =", reste);

  // Opérateur d'incrémentation (++)
  let x = 10;
  x++; // Augmente x de 1
  console.log("Incrémentation : x++ =", x);

  // Opérateur de décrémentation (--)
  let y = 20;
  y--; // Diminue y de 1
  console.log("Décrémentation : y-- =", y);

  // Plus d'exemples de modulo
  console.log("Vérification pair/impair : 15 % 2 =", 15 % 2);
  console.log("Vérification pair/impair : 16 % 2 =", 16 % 2);
</script>

Lorsque vous ouvrez ce fichier HTML dans un navigateur web et que vous consultez la console de développement, vous verrez la sortie d'exemple suivante :

Modulo : 17 % 5 = 2
Incrémentation : x++ = 11
Décrémentation : y-- = 19
Vérification pair/impair : 15 % 2 = 1
Vérification pair/impair : 16 % 2 = 0

Points clés à comprendre :

L'opérateur modulo % renvoie le reste après division
Vous pouvez utiliser le modulo pour vérifier si un nombre est pair ou impair
L'opérateur d'incrémentation ++ augmente une variable de 1
L'opérateur de décrémentation -- diminue une variable de 1

L'opérateur modulo est particulièrement utile pour :

Vérifier les nombres pairs/impairs
Parcourir une plage de nombres
Créer des motifs ou des distributions

Comprendre l'incrémentation/décrémentation préfixée et postfixée

Dans cette étape, vous allez apprendre la différence entre les opérateurs d'incrémentation/décrémentation préfixés et postfixés en JavaScript. Ces opérateurs peuvent paraître similaires, mais ils se comportent différemment lorsqu'ils sont utilisés dans des expressions.

Ouvrez le fichier arithmétique.html et mettez à jour la section <script> avec le code suivant :

<script>
  // Incrémentation postfixée (x++)
  let a = 5;
  let b = a++;
  console.log("Incrémentation postfixée :");
  console.log("a =", a); // a est incrémenté après que la valeur ait été affectée
  console.log("b =", b); // b reçoit la valeur initiale de a

  // Incrémentation préfixée (++x)
  let x = 5;
  let y = ++x;
  console.log("\nIncrémentation préfixée :");
  console.log("x =", x); // x est incrémenté avant que la valeur ne soit affectée
  console.log("y =", y); // y reçoit la valeur incrémentée de x

  // Le même concept s'applique aux opérateurs de décrémentation
  let p = 10;
  let q = p--;
  console.log("\nDécrémentation postfixée :");
  console.log("p =", p); // p est décrémenté après que la valeur ait été affectée
  console.log("q =", q); // q reçoit la valeur initiale de p

  let m = 10;
  let n = --m;
  console.log("\nDécrémentation préfixée :");
  console.log("m =", m); // m est décrémenté avant que la valeur ne soit affectée
  console.log("n =", n); // n reçoit la valeur décrémentée de m
</script>

Lorsque vous ouvrez ce fichier HTML dans un navigateur web et que vous consultez la console de développement, vous verrez la sortie d'exemple suivante :

Incrémentation postfixée :
a = 6
b = 5

Incrémentation préfixée :
x = 6
y = 6

Décrémentation postfixée :
p = 9
q = 10

Décrémentation préfixée :
m = 9
n = 9

Points clés à comprendre :

Postfix x++ : Renvoie la valeur initiale, puis incrémente
Préfix ++x : Incrémente d'abord, puis renvoie la nouvelle valeur
Le même principe s'applique aux opérateurs de décrémentation x-- et --x
Cette différence est importante lorsqu'opérateur est utilisé dans une expression ou une affectation

Pratiquez la combinaison d'opérations arithmétiques

Dans cette étape, vous allez apprendre à combiner plusieurs opérations arithmétiques pour effectuer des calculs plus complexes. Nous allons explorer différentes façons de combiner les opérateurs et démontrer comment JavaScript gère l'ordre des opérations.

Ouvrez le fichier arithmétique.html et mettez à jour la section <script> avec le code suivant :

<script>
  // Combinaison de plusieurs opérations arithmétiques
  let résultat1 = 10 + 5 * 2;
  console.log("Résultat 1 (10 + 5 * 2) :", résultat1);

  // Utilisation des parenthèses pour changer l'ordre des opérations
  let résultat2 = (10 + 5) * 2;
  console.log("Résultat 2 ((10 + 5) * 2) :", résultat2);

  // Calcul complexe avec plusieurs opérateurs
  let x = 15;
  let y = 7;
  let calculComplexe = (x % 4) + y * 2 - x++ / 3;
  console.log("Calcul complexe :", calculComplexe);

  // Combinaison de l'incrémentation/décrémentation avec d'autres opérations
  let a = 5;
  let b = 3;
  let calculMixte = ++a + b-- * 2;
  console.log("Calcul mixte (++a + b-- * 2) :", calculMixte);
  console.log("a après le calcul :", a);
  console.log("b après le calcul :", b);

  // Exemple pratique : Calcul de la moyenne
  let note1 = 85;
  let note2 = 92;
  let note3 = 78;
  let moyenneNote = (note1 + note2 + note3) / 3;
  console.log("Moyenne des notes :", moyenneNote);
</script>

Lorsque vous ouvrez ce fichier HTML dans un navigateur web et que vous consultez la console de développement, vous verrez la sortie d'exemple suivante :

Résultat 1 (10 + 5 * 2) : 20
Résultat 2 ((10 + 5) * 2) : 30
Calcul complexe : 9
Calcul mixte (++a + b-- * 2) : 11
a après le calcul : 6
b après le calcul : 2
Moyenne des notes : 85

Points clés à comprendre :

JavaScript suit l'ordre standard des opérations mathématiques (PEMDAS)
Les parenthèses peuvent être utilisées pour changer l'ordre d'opérations par défaut
Vous pouvez combiner différents types d'opérateurs arithmétiques dans une seule expression
Les opérateurs d'incrémentation et de décrémentation peuvent être utilisés dans des calculs plus importants
Soyez toujours prudent avec l'ordre et la position des opérateurs

Résumé

Dans ce laboratoire, les participants ont appris à configurer un fichier HTML de base pour les opérations arithmétiques en JavaScript et à explorer les calculs mathématiques fondamentaux. Le laboratoire a guidé les apprenants dans la création d'un document HTML avec une section JavaScript intégrée, leur permettant de pratiquer les techniques arithmétiques essentielles à l'aide d'opérateurs tels que l'addition (+), la soustraction (-), la multiplication (*) et la division (/).

Le parcours d'apprentissage est passé de l'établissement d'une structure HTML de base à la mise en œuvre de diverses opérations arithmétiques, y compris l'exploration des opérateurs modulo, d'incrémentation et de décrémentation. Les participants ont acquis une expérience pratique avec différentes variantes d'opérateurs, comprenant la manière de combiner les opérations arithmétiques et de manipuler efficacement les valeurs numériques en JavaScript.