JavaScript : Les Fondamentaux pour Maîtriser le Web Interactif

Les Variables : Vos Boîtes de Rangement Numériques

Définition
Une variable en JavaScript est un conteneur qui stocke une valeur (nombre, texte, booléen, etc.). C'est comme une boîte postale où vous pouvez ranger des informations et les récupérer plus tard.

Explication
Imaginez que vous êtes un magicien qui a besoin de retenir des nombres secrets. Au lieu de les mémoriser, vous les écrivez sur des papiers et les mettez dans des boîtes étiquetées. Une variable fonctionne exactement ainsi : elle porte un nom (l'étiquette) et contient une valeur (ce qu'il y a dedans). En JavaScript, il existe trois façons de déclarer une variable : var, let, et const. Bien que var soit l'ancienne méthode, let et const sont préférées aujourd'hui. let permet de modifier la valeur ultérieurement, tandis que const crée une constante immuable. Comprendre cette distinction est crucial pour écrire un code propre et sans erreurs.

// Déclarer une variable avec let
let prenom = "Alice";
let age = 25;
let estEtudiant = true;

// Déclarer une constante avec const
const pi = 3.14159;
const nomEntreprise = "TechCorp";

// Afficher les variables
console.log(prenom); // Affiche : Alice
console.log(age); // Affiche : 25
console.log(pi); // Affiche : 3.14159

// Modifier une variable let
age = 26;
console.log(age); // Affiche : 26

// Cette ligne causera une erreur :
// pi = 3.14; // Erreur ! Les constantes ne peuvent pas être modifiées

Astuce
Toujours utiliser const par défaut, puis basculer vers let uniquement si vous avez besoin de modifier la valeur. Cela prévient les erreurs accidentelles et rend votre code plus prévisible et maintenable.

Attention
Ne jamais créer de variables sans mot-clé (comme nom = "Bob"). Cela crée une variable globale involontaire qui peut causer des bugs difficiles à détecter. Toujours utiliser let ou const.

Les Types de Données : Les Ingrédients de Votre Code

Définition
Un type de données est la catégorie d'information qu'une variable peut contenir. JavaScript reconnaît plusieurs types : nombres, chaînes de caractères, booléens, et d'autres plus avancés.

Explication
Tout comme une recette de cuisine utilise différents ingrédients (farine, sucre, œufs), JavaScript travaille avec différents types de données. Le type de données détermine ce que vous pouvez faire avec une variable. Un nombre peut être additionné, une chaîne peut être concaténée (jointe), et un booléen représente vrai ou faux. JavaScript est un langage "dynamiquement typé", ce qui signifie que le type d'une variable peut changer. Une variable peut commencer comme un nombre et devenir une chaîne plus tard. Les principaux types sont : String (texte), Number (nombres entiers et décimaux), Boolean (vrai/faux), null (absence intentionnelle), undefined (valeur non définie), et les types complexes comme Object et Array.

// String (Chaîne de caractères)
let message = "Bonjour le monde !";
let nom = 'Alice'; // Les guillemets simples et doubles fonctionnent tous deux
console.log(message); // Bonjour le monde !

// Number (Nombre)
let entier = 42;
let decimal = 3.14;
let negatif = -15;
console.log(entier + decimal); // 45.14

// Boolean (Booléen)
let estActif = true;
let estConnecte = false;
console.log(estActif); // true

// Null et Undefined
let valeurVide = null; // Absence intentionnelle
let sansDefinition; // undefined (pas initialisée)
console.log(sansDefinition); // undefined

// Vérifier le type avec typeof
console.log(typeof message); // "string"
console.log(typeof entier); // "number"
console.log(typeof estActif); // "boolean"
console.log(typeof valeurVide); // "object" (cas particulier)

Astuce
Utilisez typeof pour vérifier le type d'une variable quand vous ne suis pas sûr. C'est très utile pour déboguer et comprendre ce que votre code manipule réellement.

Attention
N'oubliez pas que typeof null retourne "object" en JavaScript, ce qui est une bizarrerie historique du langage. Ce n'est pas un objet, c'est une valeur nulle. Utilisez des comparaisons explicites comme valeur === null si vous avez besoin de vérifier si quelque chose est null.

Les Opérateurs : Les Outils Pour Manipuler Vos Données

Définition
Un opérateur est un symbole ou un mot-clé qui effectue une action sur une ou plusieurs variables. Les opérateurs permettent de faire des calculs, des comparaisons, et des opérations logiques.

Explication
Tout comme les opérateurs mathématiques (+, -, ×, ÷) combinent des nombres pour produire un résultat, les opérateurs JavaScript effectuent des actions sur vos données. Il existe plusieurs catégories d'opérateurs : arithmétiques (pour les calculs), de comparaison (pour comparer deux valeurs), logiques (pour combiner des conditions), et d'assignation (pour attribuer des valeurs). Les opérateurs arithmétiques (+, -, *, /, %) fonctionnent comme à l'école. Les opérateurs de comparaison (===, !==, <, >, <=, >=) retournent toujours vrai ou faux. Les opérateurs logiques (&&, ||, !) permettent de créer des conditions complexes. Comprendre ces opérateurs est essentiel pour écrire des programmes qui prennent des décisions.

// Opérateurs arithmétiques
let a = 10;
let b = 3;
console.log(a + b); // 13 (addition)
console.log(a - b); // 7 (soustraction)
console.log(a * b); // 30 (multiplication)
console.log(a / b); // 3.333... (division)
console.log(a % b); // 1 (modulo : reste)
console.log(a ** 2); // 100 (puissance)

// Opérateurs de comparaison
console.log(10 === 10); // true (égal)
console.log(10 !== 5); // true (pas égal)
console.log(10 > 5); // true (supérieur)
console.log(10 < 5); // false (inférieur)
console.log(10 >= 10); // true (supérieur ou égal)

// Opérateurs logiques
let estMajeur = true;
let aLPermis = false;
console.log(estMajeur && aLPermis); // false (ET logique)
console.log(estMajeur || aLPermis); // true (OU logique)
console.log(!aLPermis); // true (NON logique)

// Opérateur d'assignation
let x = 5;
x += 3; // x = x + 3; donc x = 8
x -= 2; // x = x - 2; donc x = 6
console.log(x); // 6

Astuce
Utilisez toujours === et !== au lieu de == et !=. Les versions strictes comparent à la fois la valeur ET le type, évitant des conversions de type surprises. Par exemple, "5" == 5 est true, mais "5" === 5 est false.

Attention
L'ordre des opérations compte ! La multiplication et la division sont effectuées avant l'addition et la soustraction, tout comme en mathématiques. Si vous ne êtes pas sûr, utilisez des parenthèses pour clarifier l'ordre : (5 + 3) * 2 au lieu de 5 + 3 * 2.

Les Conditions : Prendre des Décisions Dans Votre Code

Définition
Une condition est une déclaration qui teste si quelque chose est vrai ou faux, permettant à votre code de prendre différentes chemins d'exécution selon le résultat.

Explication
Les conditions sont le cœur de la logique programmation. Elles permettent à votre programme de "penser" et de prendre des décisions. Imaginez un carrefour : si le feu est rouge, vous attendez ; s'il est vert, vous avancez. C'est une condition. En JavaScript, les deux structures conditionnelles principales sont if/else if/else et switch. La structure if teste une condition et exécute un bloc de code si elle est vraie. else if permet de tester d'autres conditions, et else fournit un bloc par défaut si aucune condition n'est vraie. La structure switch est utile quand vous avez plusieurs valeurs possibles à tester. Les conditions peuvent être simples (un test) ou complexes (plusieurs tests combinés avec && et ||).

// Structure if/else
let age = 20;

if (age >= 18) {
  console.log("Vous êtes majeur");
} else {
  console.log("Vous êtes mineur");
}

// Structure if/else if/else
let note = 75;

if (note >= 90) {
  console.log("Excellent !");
} else if (note >= 70) {
  console.log("Bien !");
} else if (note >= 50) {
  console.log("Passable");
} else {
  console.log("Insuffisant");
}

// Conditions combinées
let estEtudiant = true;
let aUneCarteEtudiant = false;

if (estEtudiant && aUneCarteEtudiant) {
  console.log("Vous avez la réduction étudiante");
} else if (estEtudiant || aUneCarteEtudiant) {
  console.log("Vous avez une réduction partielle");
} else {
  console.log("Pas de réduction");
}

// Structure switch
let jour = 3;

switch (jour) {
  case 1:
    console.log("Lundi");
    break;
  case 2:
    console.log("Mardi");
    break;
  case 3:
    console.log("Mercredi");
    break;
  default:
    console.log("Jour inconnu");
}

Astuce
Pour simplifier les conditions courtes, utilisez l'opérateur ternaire : let message = age >= 18 ? "Adulte" : "Mineur";. C'est plus concis qu'un if/else quand vous n'avez que deux options.

Attention
N'oubliez pas le break; dans les structures switch, sinon le code continuera à exécuter les cas suivants même si la condition n'est pas rencontrée. C'est une source commune de bugs. Si vous voulez que plusieurs cas partagent le même code, c'est intentionnel, mais soyez-en conscient.

Les Boucles : Répéter une Action Efficacement

Définition
Une boucle est une structure de contrôle qui exécute le même bloc de code plusieurs fois, jusqu'à ce qu'une condition d'arrêt soit atteinte.

Explication
Imaginez que vous devez compter de 1 à 100. Sans boucles, vous écririez console.log(1); console.log(2); ... console.log(100);, ce qui serait fastidieux. Avec une boucle, vous écrivez le code une fois et le dites "répète cette action 100 fois". Les boucles sont le secret pour automatiser les tâches répétitives. JavaScript offre plusieurs types de boucles : for (répéter un nombre spécifique de fois), while (répéter tant qu'une condition est vraie), do/while (répéter au moins une fois, puis tant qu'une condition est vraie), et for...of (itérer sur les éléments d'un tableau). Maîtriser les boucles est crucial pour programmer efficacement, car beaucoup de tâches réelles impliquent de répéter une action sur une collection de données.

// Boucle for : répéter un nombre de fois
console.log("--- Boucle for ---");
for (let i = 1; i <= 5; i++) {
  console.log("Itération " + i);
}

// Boucle while : tant qu'une condition est vraie
console.log("--- Boucle while ---");
let compteur = 0;
while (compteur < 3) {
  console.log("Compteur : " + compteur);
  compteur++;
}

// Boucle do/while : au moins une fois
console.log("--- Boucle do/while ---");
let x = 0;
do {
  console.log("x = " + x);
  x++;
} while (x < 2);

// Boucle for...of : itérer sur un tableau
console.log("--- Boucle for...of ---");
let fruits = ["pomme", "banane", "orange"];
for (let fruit of fruits) {
  console.log(fruit);
}

// Arrêter une boucle avec break
console.log("--- Utiliser break ---");
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // Arrête la boucle quand i = 5
  }
  console.log(i);
}

// Sauter une itération avec continue
console.log("--- Utiliser continue ---");
for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // Saute l'affichage quand i = 2
  }
  console.log(i);
}

Astuce
Utilisez for quand vous connaissez le nombre d'itérations, et while quand vous ne le connaissez pas (par exemple, en attendant une entrée utilisateur). Cela rend votre code plus lisible et efficace.

Attention
Faites attention aux boucles infinies ! Si vous oubliez d'incrémenter votre compteur ou si votre condition ne devient jamais fausse, votre programme s'arrêtera de répondre. Testez toujours vos boucles et assurez-vous qu'elles ont une condition d'arrêt claire. Utilisez break pour arrêter une boucle manuellement si nécessaire.

Les Fonctions : Encapsuler et Réutiliser Votre Code

Définition
Une fonction est un bloc de code réutilisable qui effectue une tâche spécifique. Elle peut recevoir des données (paramètres) et retourner un résultat.

Explication
Les fonctions sont comme des machines à traiter : vous leur donnez un ingrédient, elles le transforment, et vous récupérez le résultat transformé. Sans fonctions, vous seriez obligé de copier et coller le même code partout, ce qui est une mauvaise pratique. Les fonctions permettent d'organiser votre code, de le rendre réutilisable, et de le maintenir facilement. Une fonction se compose de trois parties : le nom (ce qu'elle s'appelle), les paramètres (ce qu'elle reçoit), et le corps (ce qu'elle fait). La déclaration function est la façon classique de créer une fonction, tandis que les fonctions fléchées => sont une syntaxe moderne et concise. Les fonctions peuvent retourner une valeur avec le mot-clé return, ou simplement exécuter une action sans retourner rien.

// Déclaration classique de fonction
function saluer(nom) {
  return "Bonjour, " + nom + "!";
}

console.log(saluer("Alice")); // Bonjour, Alice!

// Fonction sans paramètre
function direBonjourAuMonde() {
  console.log("Bonjour le monde !");
}

direBonjourAuMonde(); // Bonjour le monde !

// Fonction avec plusieurs paramètres
function additionner(a, b) {
  return a + b;
}

console.log(additionner(5, 3)); // 8

// Fonction fléchée (syntaxe moderne)
const multiplier = (a, b) => {
  return a * b;
};

console.log(multiplier(4, 5)); // 20

// Fonction fléchée courte (corps sur une ligne)
const doubler = x => x * 2;

console.log(doubler(5)); // 10

// Fonction qui retourne une autre fonction
function creerMultiplicateur(multiplicateur) {
  return function(nombre) {
    return nombre * multiplicateur;
  };
}

const tripler = creerMultiplicateur(3);
console.log(tripler(5)); // 15

// Paramètres par défaut
function afficherInfo(nom = "Anonyme", age = "inconnu") {
  console.log("Nom : " + nom + ", Age : " + age);
}

afficherInfo("Bob", 30); // Nom : Bob, Age : 30
afficherInfo("Charlie"); // Nom : Charlie, Age : inconnu

Astuce
Nommez vos fonctions avec des verbes qui décrivent ce qu'elles font : calculerTotal(), afficherMessage(), verifierAcces(). Cela rend votre code auto-documenté et facile à comprendre. Évitez les noms génériques comme faire() ou traiter().

Attention
Les fonctions fléchées ne fonctionnent pas comme les fonctions classiques avec this. Si vous devez utiliser this (pour accéder aux propriétés d'un objet), préférez les fonctions classiques. De plus, souvenez-vous que le return est obligatoire pour retourner une valeur ; sans lui, la fonction retournera undefined.