Module 5.1 – Bases JavaScript

Objectif

Maîtriser les bases de JavaScript : variables, conditions, boucles et fonctions. Comprendre la syntaxe JavaScript et écrire vos premiers scripts.

Théorie

Introduction à JavaScript

JavaScript est un langage de programmation qui permet d'ajouter de l'interactivité aux pages web.

Rôles de JavaScript :

• Manipuler le DOM (éléments HTML)
• Réagir aux événements utilisateur
• Effectuer des calculs
• Communiquer avec des serveurs (API)

Où écrire JavaScript :

• Dans un fichier .js (recommandé)
• Dans une balise <script> dans le HTML
• En ligne dans les attributs HTML (à éviter)

Variables

Déclaration :

let age = 25;           // Variable modifiable
const nom = "Jean";      // Constante (ne peut pas changer)
var ancien = "déprécié"; // Ancienne syntaxe (à éviter)

Types de données :

// Nombre
let nombre = 42;
let decimal = 3.14;

// Texte (String)
let texte = "Bonjour";
let autreTexte = 'Salut';

// Booléen
let estVrai = true;
let estFaux = false;

// Tableau
let liste = [1, 2, 3, 4, 5];
let noms = ["Jean", "Marie", "Pierre"];

// Objet
let personne = {
    nom: "Dupont",
    age: 30,
    ville: "Paris"
};

Conditions

Structure de base :

if (condition) {
    // Code si vrai
} else {
    // Code si faux
}

Exemples :

let age = 20;

if (age >= 18) {
    console.log("Majeur");
} else {
    console.log("Mineur");
}

// Conditions multiples
let note = 15;

if (note >= 16) {
    console.log("Très bien");
} else if (note >= 14) {
    console.log("Bien");
} else if (note >= 12) {
    console.log("Assez bien");
} else {
    console.log("À améliorer");
}

Opérateurs de comparaison :

==  // Égal (valeur)
=== // Égal (valeur et type)
!=  // Différent
!== // Différent (valeur et type)
>   // Plus grand
<   // Plus petit
>=  // Plus grand ou égal
<=  // Plus petit ou égal

Opérateurs logiques :

&&  // ET
||  // OU
!   // NON

Boucles

Boucle for :

for (let i = 0; i < 10; i++) {
    console.log(i);
}
// Affiche 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Boucle while :

let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

Boucle for...of (pour les tableaux) :

let nombres = [10, 20, 30];
for (let nombre of nombres) {
    console.log(nombre);
}

Boucle for...in (pour les objets) :

let personne = {nom: "Jean", age: 30};
for (let cle in personne) {
    console.log(cle + ": " + personne[cle]);
}

Fonctions

Déclaration de fonction :

function nomFonction(parametre1, parametre2) {
    // Code
    return resultat;
}

Exemples :

function additionner(a, b) {
    return a + b;
}

let resultat = additionner(5, 3);  // 8

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

// Fonction fléchée courte
const diviser = (a, b) => a / b;

Fonction sans retour :

function afficherMessage(nom) {
    console.log("Bonjour " + nom);
}

afficherMessage("Jean");  // Affiche "Bonjour Jean"

Manipulation de tableaux

let nombres = [10, 20, 30];

// Ajouter
nombres.push(40);           // [10, 20, 30, 40]

// Retirer
nombres.pop();              // Retire le dernier
nombres.shift();            // Retire le premier

// Longueur
let taille = nombres.length; // 3

// Parcourir
nombres.forEach(function(nombre) {
    console.log(nombre);
});

// Transformer
let doubles = nombres.map(n => n * 2);  // [20, 40, 60]

// Filtrer
let grands = nombres.filter(n => n > 15);  // [20, 30]

Manipulation d'objets

let personne = {
    nom: "Dupont",
    prenom: "Jean",
    age: 30
};

// Accéder
console.log(personne.nom);        // "Dupont"
console.log(personne["age"]);     // 30

// Modifier
personne.age = 31;
personne.ville = "Paris";

// Parcourir
for (let cle in personne) {
    console.log(cle + ": " + personne[cle]);
}

Exercice

1. Variables et types

   • Créez des variables de différents types
   • Affichez-les avec console.log()
   • Testez les opérations (addition, concaténation)

2. Conditions

   • Créez une fonction qui vérifie si un nombre est pair
   • Créez une fonction qui retourne une appréciation selon une note

3. Boucles

   • Affichez les nombres de 1 à 100
   • Parcourez un tableau et affichez chaque élément
   • Calculez la somme d'un tableau de nombres

4. Fonctions

   • Créez une fonction qui calcule la moyenne d'un tableau
   • Créez une fonction qui trouve le maximum d'un tableau
   • Créez une fonction qui compte les éléments pairs

5. Tableaux et objets

   • Créez un tableau d'objets (personnes avec nom, age)
   • Parcourez-le et affichez les informations
   • Filtrez les personnes majeures

Quiz

1. Comment déclare-t-on une constante en JavaScript ?

   • var nom = "Jean"
   • const nom = "Jean"
   • let nom = "Jean" (constant)

2. Quelle est la différence entre == et === ?

   • Aucune différence
   • === compare aussi le type
   • == est plus rapide

3. Que fait nombres.push(10) ?

   • Retire 10 du tableau
   • Ajoute 10 à la fin du tableau
   • Remplace le premier élément

4. Comment accède-t-on à une propriété d'objet ?

   • personne->nom
   • personne.nom ou personne["nom"]
   • personne(nom)

5. Que retourne [1, 2, 3].map(n => n * 2) ?

   • [1, 2, 3]
   • [2, 4, 6]
   • 6

Mini défi

Mission : Créer une calculatrice JavaScript

Créez une calculatrice complète en JavaScript :

Fonctionnalités :

1. Fonctions de base

   • additionner(a, b)
   • soustraire(a, b)
   • multiplier(a, b)
   • diviser(a, b) (gérer division par zéro)

2. Fonctions avancées

   • puissance(base, exposant)
   • racineCarree(nombre)
   • pourcentage(valeur, pourcent)

3. Fonctions sur tableaux

   • moyenne(tableau) : calcule la moyenne
   • maximum(tableau) : trouve le maximum
   • minimum(tableau) : trouve le minimum
   • somme(tableau) : calcule la somme

4. Programme principal

   • Testez toutes les fonctions
   • Créez un tableau de nombres
   • Calculez statistiques (moyenne, min, max, somme)
   • Affichez les résultats avec console.log()

Critères :

• ✅ Toutes les fonctions créées
• ✅ Gestion des erreurs (division par zéro)
• ✅ Code bien organisé et commenté
• ✅ Tests avec différentes valeurs
• ✅ Résultats affichés clairement

Objectif : Maîtriser les bases de JavaScript et créer des fonctions réutilisables.

---

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les variables, conditions, boucles et fonctions en JavaScript.