JavaScript — Premiers pas et variables

Section 11.1.12 : JavaScript — Premiers pas et variables

🎯 Objectif pédagogique

Comprendre les bases de JavaScript : variables, types de données, opérateurs et structures de contrôle. Vous serez capable d'écrire vos premiers programmes et de comprendre la logique de programmation fondamentale.

Le langage qui donne vie au web

HTML donne la structure. CSS donne le style. Mais que se passe-t-il quand Marc clique sur un bouton ? Rien — sans JavaScript. JavaScript (JS) est le langage qui ajoute l'interactivité : menus qui s'ouvrent, formulaires qui se valident, données qui se mettent à jour sans recharger la page.

Marc avait déjà des bases en Python (Section 11.1.15). La bonne nouvelle : la logique de programmation est universelle. La mauvaise nouvelle : JavaScript a des particularités... surprenantes.

Variables — Stocker des données

// Variables modernes (ES6+)
const name = "Marc Dupont";       // Constante (ne change pas)
let age = 34;                      // Variable (peut changer)
let isStudent = true;              // Booléen

// ❌ NE PLUS UTILISER (ancien JavaScript)
// var oldWay = "obsolète";

// Règle : utilisez const par défaut, let uniquement si la valeur change
const MAX_RETRIES = 3;            // Constante = MAJUSCULES par convention
let currentRetry = 0;             // Variable = camelCase

Types de données

// String (texte)
const greeting = "Bonjour";
const template = \`Je m'appelle \$\{name\} et j'ai \$\{age\} ans\`;  // Template literal

// Number (nombre)
const price = 99.99;
const quantity = 3;
const total = price * quantity;    // 299.97

// Boolean (vrai/faux)
const isLoggedIn = true;
const hasPermission = false;

// Array (tableau)
const skills = ["HTML", "CSS", "JavaScript"];
skills.push("Python");             // Ajouter
console.log(skills[0]);            // "HTML" (index 0)
console.log(skills.length);        // 4

// Object (objet)
const user = \{
  name: "Marc",
  age: 34,
  skills: ["HTML", "CSS"],
  isActive: true
\};
console.log(user.name);            // "Marc"
console.log(user["age"]);          // 34

// null et undefined
let data = null;                   // Valeur explicitement vide
let result;                        // undefined (pas encore de valeur)

Opérateurs

// Arithmétiques
let sum = 10 + 5;                  // 15
let diff = 10 - 5;                 // 5
let product = 10 * 5;              // 50
let quotient = 10 / 3;            // 3.333...
let remainder = 10 % 3;           // 1 (modulo)
let power = 2 ** 10;              // 1024

// Comparaison
10 === 10      // true  (strictement égal — TOUJOURS UTILISER)
10 !== 5       // true  (strictement différent)
10 > 5         // true
10 >= 10       // true

// ⚠️ Piège JavaScript classique
10 == "10"     // true  (conversion implicite — ÉVITER)
10 === "10"    // false (types différents — CORRECT)

// Logiques
true && true   // true  (ET)
true || false  // true  (OU)
!true          // false (NON)

Structures de contrôle

// if / else if / else
const score = 85;

if (score >= 90) \{
  console.log("Excellent !");
\} else if (score >= 70) \{
  console.log("Bien !");           // ← Affiché
\} else \{
  console.log("À améliorer");
\}

// Ternaire (if/else sur une ligne)
const status = score >= 70 ? "Réussi" : "Échoué";

// Switch
const day = "lundi";
switch (day) \{
  case "lundi":
  case "mardi":
    console.log("Début de semaine");
    break;
  case "vendredi":
    console.log("Fin de semaine !");
    break;
  default:
    console.log("Milieu de semaine");
\}

Boucles

// for (quand on connaît le nombre d'itérations)
for (let i = 0; i < 5; i++) \{
  console.log(\`Itération \$\{i\}\`);
\}

// for...of (parcourir un tableau — le plus courant)
const technologies = ["HTML", "CSS", "JS", "Python"];
for (const tech of technologies) \{
  console.log(tech);
\}

// while
let count = 0;
while (count < 3) \{
  console.log(\`Count: \$\{count\}\`);
  count++;
\}

// forEach (méthode de tableau)
technologies.forEach((tech, index) => \{
  console.log(\`\$\{index + 1\}. \$\{tech\}\`);
\});

Fonctions

// Fonction classique
function calculateDiscount(price, percent) \{
  return price * (percent / 100);
\}

// Fonction fléchée (arrow function) — syntaxe moderne
const calculateTax = (price, rate = 0.20) => \{
  return price * rate;
\};

// Fléchée courte (une seule expression)
const double = (n) => n * 2;

// Utilisation
const discount = calculateDiscount(100, 15);   // 15
const tax = calculateTax(100);                  // 20
console.log(double(21));                         // 42

🏋️ Exercice pratique (20 minutes)

Créez app.js et testez dans la console du navigateur (F12 → Console) ou avec Node.js :

// 1. Profil de Marc
const profile = \{
  name: "Marc Dupont",
  age: 34,
  previousJob: "Analyste financier",
  currentGoal: "Développeur Full-Stack",
  skills: ["HTML", "CSS"],
  weeksCompleted: 1
\};

// 2. Fonction pour afficher le profil
const displayProfile = (p) => \{
  console.log(\`=== Profil de \$\{p.name\} ===\`);
  console.log(\`Âge: \$\{p.age\} ans\`);
  console.log(\`Ancien métier: \$\{p.previousJob\}\`);
  console.log(\`Objectif: \$\{p.currentGoal\}\`);
  console.log(\`Skills: \$\{p.skills.join(", ")\}\`);
  console.log(\`Progression: Semaine \$\{p.weeksCompleted\}/5\`);
\};

displayProfile(profile);

// 3. Ajouter une skill
const addSkill = (p, skill) => \{
  if (!p.skills.includes(skill)) \{
    p.skills.push(skill);
    console.log(\`✅ \$\{skill\} ajouté !\`);
  \} else \{
    console.log(\`⚠️ \$\{skill\} déjà dans la liste\`);
  \}
\};

addSkill(profile, "JavaScript");
addSkill(profile, "CSS");   // Déjà présent
displayProfile(profile);