Définir et utiliser des variables en JavaScript

Introduction

Dans ce laboratoire, les participants exploreront les concepts fondamentaux de la définition et de l'utilisation de variables en JavaScript, une compétence essentielle pour le développement web. Le laboratoire guide les apprenants dans la compréhension du rôle de JavaScript dans la création d'expériences web interactives, la configuration d'un environnement HTML et la maîtrise des techniques de déclaration et de manipulation de variables.

Les participants apprendront à déclarer des variables à l'aide du mot clé var, à attribuer des valeurs à ces variables et à les afficher dynamiquement sur les pages web. En suivant des instructions étape par étape, les étudiants acquerront une expérience pratique des principes de programmation principaux de JavaScript, y compris les conventions de nommage de variables et les techniques de base de script qui forment la base du développement web moderne.

Comprendre JavaScript et son rôle dans le développement web

Dans cette étape, vous allez découvrir JavaScript et son rôle crucial dans le développement web. JavaScript est un langage de programmation puissant et polyvalent qui apporte une interaction et une fonctionnalité dynamique aux sites web.

JavaScript est un langage de script côté client principalement utilisé dans les navigateurs web. Il permet aux développeurs de créer des pages web interactives et dynamiques en manipulant HTML et CSS, en gérant les événements utilisateur et en effectuant des calculs complexes en temps réel.

Les principales caractéristiques de JavaScript sont les suivantes :

S'exécute directement dans les navigateurs web
Permet des expériences web interactives
Peut modifier dynamiquement HTML et CSS
Prend en charge la programmation événementielle
Utilisé pour le développement front-end et back-end (avec Node.js)

Voici un exemple simple pour démontrer la fonctionnalité de base de JavaScript :

<!doctype html>
<html>
  <head>
    <title>Introduction à JavaScript</title>
  </head>
  <body>
    <h1 id="greeting">Bonjour, Développement web!</h1>
    <script>
      // JavaScript peut modifier dynamiquement le contenu de la page
      document.getElementById("greeting").innerHTML =
        "Bienvenue dans JavaScript!";
    </script>
  </body>
</html>

Sortie de l'exemple dans le navigateur :

Bienvenue dans JavaScript!

Cet exemple montre comment JavaScript peut modifier instantanément le contenu de la page web, démontrant son pouvoir dans la création d'expériences web dynamiques.

Configurer un fichier HTML pour JavaScript

Dans cette étape, vous allez apprendre à créer un fichier HTML qui peut inclure et exécuter du code JavaScript. HTML fournit la structure des pages web, tandis que JavaScript ajoute une interaction et une fonctionnalité dynamique.

Tout d'abord, accédez au répertoire du projet :

cd ~/projet

Créez un nouveau fichier HTML appelé variables.html à l'aide de l'IDE Web :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Variables JavaScript</title>
  </head>
  <body>
    <h1>Apprendre les variables JavaScript</h1>

    <!-- Nous ajouterons du JavaScript ici dans les étapes suivantes -->
    <script>
      // Le code JavaScript ira ici
    </script>
  </body>
</html>

Points clés sur la structure HTML :

<!DOCTYPE html> déclare que ceci est un document HTML5
La balise <script> est où le code JavaScript sera écrit
Vous pouvez placer la balise <script> dans la section <head> ou <body>

Sortie de l'exemple lorsqu'il est ouvert dans un navigateur :

Apprendre les variables JavaScript

La balise <script> vous permet d'écrire directement du JavaScript dans le fichier HTML ou de vous lier à un fichier JavaScript externe. Dans les étapes suivantes, nous ajouterons du code JavaScript à ce fichier pour travailler avec des variables.

Déclarer des variables à l'aide du mot clé var

Dans cette étape, vous allez apprendre à déclarer des variables en JavaScript à l'aide du mot clé var. Les variables sont des conteneurs pour stocker des valeurs de données qui peuvent être utilisées et manipulées tout au long de votre code.

Ouvrez le fichier variables.html dans l'IDE Web et modifiez la section <script> pour ajouter des déclarations de variables :

<!doctype html>
<html lang="en">
  <body>
    <script>
      // Décaration de variables à l'aide du mot clé var
      var firstName = "John";
      var age = 25;
      var isStudent = true;

      // Vous pouvez également déclarer une variable sans valeur initiale
      var lastName;
    </script>
  </body>
</html>

Points clés sur la déclaration de variables :

var est utilisé pour déclarer des variables en JavaScript
Les variables peuvent stocker différents types de données :
- Chaînes de caractères (texte) : "John"
- Nombres : 25
- Valeurs booléennes : true ou false
Vous pouvez déclarer une variable sans valeur initiale

Pour voir les variables en action, vous pouvez utiliser console.log() pour afficher leurs valeurs :

<script>
  var firstName = "John";
  console.log(firstName); // Affiche : John
</script>

Sortie de l'exemple dans la console de développement du navigateur :

John

Attribuer et afficher les valeurs des variables

Dans cette étape, vous allez apprendre à affecter des valeurs à des variables et à les afficher à l'aide de différentes méthodes en JavaScript. En vous appuyant sur l'étape précédente, nous allons explorer comment travailler avec les valeurs des variables.

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

<!doctype html>
<html lang="en">
  <body>
    <div id="output"></div>
    <script>
      // Déclaration et affectation de variables
      var firstName = "John";
      var age = 25;
      var isStudent = true;

      // Réaffectation des valeurs des variables
      age = 26;
      firstName = "Jane";

      // Affichage des valeurs à l'aide de console.log()
      console.log("Nom : " + firstName);
      console.log("Âge : " + age);
      console.log("Est un étudiant : " + isStudent);

      // Affichage des valeurs sur la page web
      var outputElement = document.getElementById("output");
      outputElement.innerHTML =
        "Nom : " +
        firstName +
        "<br>Âge : " +
        age +
        "<br>Est un étudiant : " +
        isStudent;
    </script>
  </body>
</html>

Points clés sur l'affectation et l'affichage des variables :

Utilisez = pour affecter ou réaffecter des valeurs à des variables
console.log() affiche les valeurs dans la console de développement du navigateur
document.getElementById().innerHTML peut afficher les valeurs directement sur la page web
Vous pouvez concaténer des chaînes de caractères et des variables à l'aide de +

Sortie de l'exemple dans la console de développement du navigateur :

Nom : Jane
Âge : 26
Est un étudiant : true

Sortie de l'exemple sur la page web :

Nom : Jane
Âge : 26
Est un étudiant : true

Pratiquer les conventions de nommage des variables

Dans cette étape, vous allez découvrir les meilleures pratiques pour nommer les variables en JavaScript. Un bon nommage de variables est crucial pour écrire un code propre, lisible et maintenable.

Ouvrez le fichier variables.html et mettez à jour la section <script> avec les exemples suivants :

<!doctype html>
<html lang="en">
  <body>
    <div id="output"></div>
    <script>
      // Bonnes conventions de nommage de variables

      // Utilisez la camelCase pour les noms de variables
      var firstName = "John";
      var lastName = "Doe";
      var age = 25;
      var isStudent = true;

      // Noms descriptifs et significatifs
      var totalPrice = 99,99;
      var discountPercentage = 10;
      var calculatedDiscount = totalPrice * (discountPercentage / 100);

      // Évitez les variables à une seule lettre (sauf dans des cas spécifiques comme les boucles)
      var x = 10; // Mauvais
      var width = 10; // Bon

      // Affichez les résultats
      console.log("Nom complet : " + firstName + " " + lastName);
      console.log("Prix réduit : $" + calculatedDiscount);

      var outputElement = document.getElementById("output");
      outputElement.innerHTML =
        "Nom complet : " +
        firstName +
        " " +
        lastName +
        "<br>Âge : " +
        age +
        "<br>Prix réduit : $" +
        calculatedDiscount;
    </script>
  </body>
</html>

Principales conventions de nommage de variables :

Utilisez la camelCase (par exemple, firstName, lastName)
Choisissez des noms descriptifs et significatifs
Évitez les noms de variables à une seule lettre
Soyez cohérent dans votre style de nommage
Utilisez des noms de substantif pour les variables
Utilisez des préfixes significatifs comme is pour les variables booléennes

Sortie de l'exemple dans la console de développement du navigateur :

Nom complet : John Doe
Prix réduit : $9,999

Sortie de l'exemple sur la page web :

Nom complet : John Doe
Âge : 25
Prix réduit : $9,999

Résumé

Dans ce laboratoire, les participants explorent les concepts fondamentaux des variables JavaScript et leur rôle dans le développement web. Le laboratoire commence par la présentation de JavaScript comme un langage de script côté client puissant qui permet d'avoir des expériences web interactives et dynamiques, en soulignant sa capacité à manipuler HTML et CSS, à gérer les événements utilisateur et à effectuer des calculs en temps réel.

Par une approche étape par étape, les apprenants configurent un fichier HTML et commencent à pratiquer la déclaration de variables à l'aide du mot clé var, en comprenant l'importance des bonnes conventions de nommage de variables et de la manière d'affecter et d'afficher les valeurs des variables. Les exercices pratiques donnent des idées pratiques sur la création de contenu web dynamique, en démontrant la polyvalence de JavaScript pour transformer les pages web statiques en expériences utilisateur interactives et attrayantes.