Explorer les opérateurs d'affectation en JavaScript

Introduction

Dans ce laboratoire, les étudiants exploreront les opérateurs d'affectation JavaScript à travers une activité pratique d'HTML et de JavaScript. Le laboratoire guide les apprenants dans la création d'un fichier HTML et dans la mise en œuvre de divers opérateurs d'affectation, y compris l'affectation de base (=), l'affectation composée (+=, -=) et l'affectation de multiplication/division (*=, /=).

Les participants commenceront par configurer une structure HTML avec une balise de script intégrée, puis démontreront progressivement différentes techniques d'opérateurs d'affectation. En utilisant les méthodes de journalisation dans la console et document.write(), les étudiants vérifieront et comprendront comment ces opérateurs fonctionnent en JavaScript, acquérant une expérience pratique dans la manipulation de variables et l'affectation de valeurs.

Créer un fichier HTML pour les opérateurs d'affectation JavaScript

Dans cette étape, vous allez créer un fichier HTML qui servira de base pour explorer les opérateurs d'affectation JavaScript. L'HTML fournit la structure pour intégrer le code JavaScript, nous permettant de démontrer et de tester diverses techniques d'opérateurs d'affectation.

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

Voici la structure HTML de base que vous utiliserez :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Assignment Operators</title>
  </head>
  <body>
    <h1>Exploring Assignment Operators</h1>

    <script>
      // JavaScript code will be added here in subsequent steps
    </script>
  </body>
</html>

Analysons les composants clés :

<!DOCTYPE html> déclare que ceci est un document HTML5
La balise <script> est où nous écrirons notre code JavaScript
La page inclut un simple titre pour fournir un contexte

Après avoir créé le fichier, enregistrez-le dans le répertoire ~/projet. Ce fichier HTML sera notre terrain de jeu pour apprendre les opérateurs d'affectation dans les étapes suivantes.

Exemple de sortie lorsque vous ouvrez ce fichier dans un navigateur :

Exploring Assignment Operators

Implémenter l'opérateur d'affectation de base (=)

Dans cette étape, vous allez découvrir l'opérateur d'affectation de base (=) en JavaScript. L'opérateur d'affectation est utilisé pour attribuer une valeur à une variable, créant un moyen fondamental de stocker et de manipuler des données.

Ouvrez le fichier assignment-operators.html que vous avez créé dans l'étape précédente. Dans la balise <script>, ajoutez le code JavaScript suivant pour explorer l'affectation de base :

// Déclaration et affectation de variables en utilisant l'opérateur =
let firstName = "John";
let age = 25;
let isStudent = true;

// Démontre l'affectation de variables
console.log("First Name:", firstName);
console.log("Age:", age);
console.log("Is Student:", isStudent);

Analysons les concepts clés :

let est utilisé pour déclarer des variables en JavaScript moderne
L'opérateur = attribue une valeur à une variable
Les variables peuvent stocker différents types de données : chaînes de caractères, nombres et valeurs booléennes
console.log() est utilisé pour afficher des valeurs dans la console du navigateur

Vous pouvez également réaffecter des variables en utilisant le même opérateur :

// Réaffectation des valeurs de variables
age = 26;
console.log("Updated Age:", age);

// Affectation de la valeur d'une variable à une autre
let originalAge = age;
console.log("Original Age:", originalAge);

Exemple de sortie dans la console du navigateur :

First Name: John
Age: 25
Is Student: true
Updated Age: 26
Original Age: 26

Pratique des opérateurs d'affectation composée (+=, -=)

Dans cette étape, vous allez explorer les opérateurs d'affectation composée += et -= en JavaScript. Ces opérateurs offrent un moyen raccourci pour effectuer des additions et des soustractions tout en attribuant une nouvelle valeur à une variable.

Ouvrez le fichier assignment-operators.html et ajoutez le code JavaScript suivant à l'intérieur de la balise <script> :

// Déclaration initiale de variable
let score = 100;
console.log("Initial Score:", score);

// Utilisation de l'opérateur += pour additionner et affecter
score += 50; // Équivalent à : score = score + 50
console.log("Score after +50:", score);

// Utilisation de l'opérateur -= pour soustraire et affecter
score -= 25; // Équivalent à : score = score - 25
console.log("Score after -25:", score);

// Pratique avec une autre variable
let quantity = 10;
console.log("Initial Quantity:", quantity);

quantity += 5; // Ajoute 5 à quantity
console.log("Quantity after +5:", quantity);

quantity -= 3; // Soustrait 3 de quantity
console.log("Quantity after -3:", quantity);

Points clés sur les opérateurs d'affectation composée :

+= ajoute la valeur du côté droit à la variable et attribue le résultat
-= soustrait la valeur du côté droit de la variable et attribue le résultat
Ces opérateurs offrent une manière plus concise de modifier les valeurs des variables
Ils fonctionnent avec des nombres et peuvent simplifier les opérations arithmétiques

Exemple de sortie dans la console du navigateur :

Initial Score: 100
Score after +50: 150
Score after -25: 125
Initial Quantity: 10
Quantity after +5: 15
Quantity after -3: 12

Démontrez les opérateurs d'affectation de multiplication et de division (*=, /=)

Dans cette étape, vous allez explorer les opérateurs d'affectation de multiplication et de division *= et /= en JavaScript. Ces opérateurs offrent un moyen concise de multiplier ou de diviser une variable et d'attribuer le résultat à la même variable.

Ouvrez le fichier assignment-operators.html et ajoutez le code JavaScript suivant à l'intérieur de la balise <script> :

// Opérateur d'affectation de multiplication (*=)
let price = 10;
console.log("Initial Price:", price);

price *= 3; // Équivalent à : price = price * 3
console.log("Price after *3:", price);

// Opérateur d'affectation de division (/=)
let quantity = 24;
console.log("Initial Quantity:", quantity);

quantity /= 4; // Équivalent à : quantity = quantity / 4
console.log("Quantity after /4:", quantity);

// Exemple pratique : Calcul du coût total
let itemPrice = 5;
let itemCount = 7;
console.log("Item Price:", itemPrice);
console.log("Item Count:", itemCount);

let totalCost = itemPrice * itemCount;
console.log("Total Cost:", totalCost);

totalCost *= 0.9; // Appliquer une remise de 10%
console.log("Discounted Total Cost:", totalCost);

Points clés sur les opérateurs d'affectation de multiplication et de division :

*= multiplie la variable par la valeur du côté droit et attribue le résultat
/= divise la variable par la valeur du côté droit et attribue le résultat
Ces opérateurs aident à simplifier les opérations et les affectations mathématiques
Ils fonctionnent avec des valeurs numériques et peuvent être utilisés dans diverses calculs

Exemple de sortie dans la console du navigateur :

Initial Price: 10
Price after *3: 30
Initial Quantity: 24
Quantity after /4: 6
Item Price: 5
Item Count: 7
Total Cost: 35
Discounted Total Cost: 31.5

Vérifiez les résultats des opérateurs d'affectation à l'aide de document.write()

Dans cette étape, vous allez apprendre à utiliser document.write() pour afficher directement les résultats des opérateurs d'affectation sur la page web. Cette méthode fournit un moyen simple d'afficher des valeurs pour que les débutants puissent visualiser leurs opérations JavaScript.

Ouvrez le fichier assignment-operators.html et modifiez la balise <script> pour inclure le code suivant :

// Démontre les opérateurs d'affectation avec document.write()
let initialValue = 10;
document.write("<h2>Démonstration des opérateurs d'affectation</h2>");
document.write("Valeur initiale : " + initialValue + "<br>");

// Affectation de base
initialValue = 20;
document.write("Après l'affectation de base (=) : " + initialValue + "<br>");

// Affectation d'addition composée
initialValue += 5;
document.write(
  "Après l'affectation d'addition (+=) : " + initialValue + "<br>"
);

// Affectation de soustraction composée
initialValue -= 3;
document.write(
  "Après l'affectation de soustraction (-=) : " + initialValue + "<br>"
);

// Affectation de multiplication
initialValue *= 2;
document.write(
  "Après l'affectation de multiplication (*=) : " + initialValue + "<br>"
);

// Affectation de division
initialValue /= 4;
document.write(
  "Après l'affectation de division (/=) : " + initialValue + "<br>"
);

Points clés sur document.write() :

Écrit du HTML ou du texte directement sur la page web
Peut être utilisé pour afficher les valeurs des variables
Utile pour le débogage et la démonstration des opérations JavaScript
Ajoute du contenu à la page dans l'ordre dans lequel il est appelé

Exemple de sortie dans le navigateur :

Démonstration des opérateurs d'affectation
Valeur initiale : 10
Après l'affectation de base (=) : 20
Après l'affectation d'addition (+=) : 25
Après l'affectation de soustraction (-=) : 22
Après l'affectation de multiplication (*=) : 44
Après l'affectation de division (/=) : 11

Sommaire

Dans ce laboratoire, les participants explorent les opérateurs d'affectation en JavaScript à travers une activité pratique d'HTML et de JavaScript. Le laboratoire commence par la création d'un fichier HTML qui sert de base pour démontrer diverses techniques d'opérateurs d'affectation, en commençant par l'opérateur d'affectation de base (=) pour déclarer et initialiser des variables avec différents types de données tels que les chaînes de caractères, les nombres et les booléens.

Le parcours d'apprentissage progresse en implémentant des opérateurs d'affectation composée tels que +=, -=, *= et /=, qui offrent des façons concises d'effectuer des opérations arithmétiques et de mettre à jour les valeurs des variables. En utilisant document.write() et console.log(), les participants peuvent vérifier et visualiser les résultats de ces opérations d'affectation, acquérant une compréhension pratique de la manière dont ces opérateurs fonctionnent dans la programmation JavaScript.