Module 0 : Configuration & Intégration

Avant de coder, il faut savoir où coder. Le JavaScript est le moteur de votre page HTML.

1. Où placer le code ?

La méthode professionnelle consiste à séparer le code (Fichier `.js`) du contenu (Fichier `.html`).

💡 L'attribut defer :
Il ordonne au navigateur : "Télécharge le script en arrière-plan, mais ne l'exécute qu'une fois que toute la page HTML est dessinée". Cela évite 90% des bugs de démarrage. 
<!DOCTYPE html>
<html>
<body>
    <h1>Mon Site</h1>

    <!-- TOUJOURS avant la fermeture du body -->
    <script src="app.js" defer></script>
</body>
</html>

2. Communiquer avec la console

La console (F12 dans le navigateur) est le meilleur ami du développeur. C'est là qu'on vérifie si le code fonctionne.

console.log("Le fichier est bien relié !");
console.error("Ceci est une simulation d'erreur.");

Module 1 : Variables & Types de Données

Une variable est un espace mémoire nommé. En JS moderne, on utilise deux mots-clés.

1. const vs let

  • const (Constante) : Pour une valeur qui ne changera jamais de référence (ex: URL du site, Éléments HTML, Fonctions).
  • let : Pour une valeur amenée à évoluer (ex: Score, Compteur, État de chargement).
⚠️ Le piège du var : Ne l'utilisez plus. Il a une "portée de fonction" (function scope) qui cause des bugs bizarres. let et const ont une "portée de bloc" (block scope), beaucoup plus sûre.

2. Les Types Primitifs

const prenom = "Alice";    // String (Chaîne)
let age = 25;              // Number (Pas de distinction entier/décimal)
const estMajeur = true;    // Boolean (Vrai ou Faux)
let inconnu = null;        // Valeur vide intentionnelle
let vide;                  // undefined (Variable créée mais non remplie)
📝 Exercice : Fiche d'identité

1. Déclarez une constante job avec la valeur "Développeur".
2. Déclarez une variable salaire initialisée à 2000.
3. Modifiez le salaire pour le passer à 2500.
4. Affichez la phrase : "Le Développeur gagne 2500€" en utilisant les Template Literals (les backticks ` ).

const job = "Développeur";
let salaire = 2000;

salaire = 2500; // On peut changer car c'est un let

// Utilisation des `backticks` pour insérer des variables avec ${}
console.log(`Le ${job} gagne ${salaire}€`);

Module 2 : La Logique (Conditions)

Programmer, c'est dire à l'ordinateur : "SI ceci arrive, ALORS fais cela, SINON fais autre chose".

1. Opérateurs de Comparaison

  • === : Égalité stricte (vérifie valeur ET type). Toujours utiliser celui-ci.
  • !== : Différence stricte.
  • && (ET) : Tout doit être vrai.
  • || (OU) : Au moins un élément doit être vrai.

2. Structure If / Else If

const role = "admin";
const isConnected = true;

if (isConnected && role === "admin") {
    console.log("Accès complet autorisé");
} else if (isConnected) {
    console.log("Accès limité");
} else {
    console.log("Veuillez vous connecter");
}
📝 Exercice : Le Magasin

Déclarez une variable heure (nombre) et estFerme (booléen).
- Si estFerme est vrai : Affichez "Fermé".
- Sinon, si l'heure est entre 9 et 18 : Affichez "Ouvert".
- Sinon : Affichez "Pause".

const heure = 14;
const estFerme = false;

if (estFerme === true) {
    console.log("Fermé exceptionnellement");
} else if (heure >= 9 && heure <= 18) {
    console.log("Le magasin est Ouvert");
} else {
    console.log("En Pause");
}

Module 3 : Les Fonctions

Les fonctions permettent d'encapsuler du code pour le réutiliser. C'est le principe D.R.Y (Don't Repeat Yourself).

1. La Fonction Fléchée (Arrow Function)

C'est la syntaxe standard ES6. Elle est plus concise.

// Déclaration : On crée la "machine"
const calculerTTC = (prixHT) => {
    const tva = 1.20;
    return prixHT * tva;
};

// Appel : On utilise la "machine"
const prixFinal = calculerTTC(100);
console.log(prixFinal); // 120
⚠️ Return vs Console.log :
- console.log : Affiche juste un message à l'écran (pour l'humain).
- return : Renvoie la valeur brute au programme pour qu'elle soit stockée dans une variable ou réutilisée dans un calcul.
📝 Exercice : Convertisseur de Température

Créez une fonction celsiusToFahrenheit qui prend une température en Celsius.
La formule est : (C * 1.8) + 32.
La fonction doit retourner le résultat.
Testez avec 30°C.

const celsiusToFahrenheit = (celsius) => {
    return (celsius * 1.8) + 32;
};

const temp = celsiusToFahrenheit(30);
console.log(`Il fait ${temp} degrés Fahrenheit.`);

Module 4 : Tableaux & Objets

La gestion des données est le cœur du métier de développeur.

1. Tableaux (Arrays)

Listes ordonnées indexées (commence à 0).

const skills = ["HTML", "CSS", "JS"];

skills.push("React");       // Ajoute à la fin
skills.pop();               // Retire le dernier
console.log(skills.length); // Taille du tableau
console.log(skills[0]);     // Premier élément ("HTML")

2. Objets et Tableaux d'Objets

C'est la structure universelle des données (JSON). Un tableau qui contient des fiches détaillées.

const utilisateurs = [
    { id: 1, nom: "Marc", admin: false },
    { id: 2, nom: "Sophie", admin: true }
];

// Accéder à "Sophie"
console.log(utilisateurs[1].nom);
📝 Exercice : Panier d'achat

1. Créez un tableau panier vide.
2. Ajoutez (push) deux objets : {nom: "Pomme", prix: 2} et {nom: "Pain", prix: 1}.
3. Calculez le total manuellement en additionnant le prix de l'index 0 et de l'index 1.

const panier = [];

panier.push({ nom: "Pomme", prix: 2 });
panier.push({ nom: "Pain", prix: 1 });

const total = panier[0].prix + panier[1].prix;
console.log("Total à payer : " + total + "€");

Module 5 : Le DOM (Interaction Page Web)

C'est le moment de rendre la page vivante. Le DOM (Document Object Model) est la structure de votre page HTML que JS peut modifier.

1. Sélectionner un élément

Pour modifier un élément, il faut d'abord l'attraper avec querySelector.

  • document.querySelector('h1') : Sélectionne la première balise h1.
  • document.querySelector('#monId') : Sélectionne l'ID spécifique.
  • document.querySelector('.maClasse') : Sélectionne la classe.

2. Écouter un événement

On attend que l'utilisateur fasse quelque chose (click, survol, frappe au clavier...).

const monBouton = document.querySelector("#btn-valid");

monBouton.addEventListener("click", () => {
    // Ce code se lance uniquement au clic
    alert("Click détecté !");
});

3. Modifier le contenu

  • element.textContent = "..." : Change le texte.
  • element.style.color = "red" : Change le CSS.
  • element.classList.add("active") : Ajoute une classe CSS (plus propre).
📝 Exercice 5 : Mode Sombre Simple

Imaginez un bouton HTML. Au clic, changez la couleur de fond du body en noir et la couleur du texte en blanc.

const bouton = document.querySelector("button");

bouton.addEventListener("click", () => {
    // On cible la balise <body>
    document.body.style.backgroundColor = "#1a1a1a";
    document.body.style.color = "#ffffff";
});

// Astuce Pro : document.body.classList.toggle('dark-mode');

Module 6 : JS Moderne (ES6+)

Comment manipuler des tableaux efficacement sans faire de boucles for interminables.

1. .map() (Transformer)

Prend un tableau, applique une fonction sur chaque élément, et retourne un nouveau tableau de même taille.

const prixHT = [10, 20, 30];
const prixTTC = prixHT.map(prix => prix * 1.2); 
// Résultat : [12, 24, 36]

2. .filter() (Filtrer)

Retourne un nouveau tableau contenant uniquement les éléments qui valident la condition.

const notes = [5, 12, 8, 18];
const reussites = notes.filter(n => n >= 10);
// Résultat : [12, 18]

3. .find() (Trouver)

Retourne le premier élément qui valide la condition (utile pour trouver un ID unique).

📝 Exercice : Admin Finder

Soit le tableau users :
[{nom: "A", admin: false}, {nom: "B", admin: true}]
Utilisez .filter() pour récupérer la liste des administrateurs.

const users = [
    {nom: "A", admin: false},
    {nom: "B", admin: true}
];

const admins = users.filter(u => u.admin === true);
console.log(admins); // [{nom: "B", admin: true}]

Module 7 : Asynchrone & API Fetch

JavaScript est "non-bloquant". Si une action prend du temps (télécharger une image, contacter un serveur), le reste du site continue de fonctionner.

1. Async / Await

C'est la syntaxe moderne pour dire "Attend la fin de cette action avant de passer à la ligne suivante".

2. Fetch (Requête HTTP)

Permet de récupérer des données depuis une URL externe (API).

Le format JSON : Les APIs renvoient du texte brut. On doit utiliser .json() pour transformer ce texte en Objets JavaScript utilisables. 
const chargerProfil = async () => {
    try {
        console.log("Chargement...");
        
        // 1. On lance la requête
        const reponse = await fetch("https://api.monsite.com/user/1");
        
        // 2. On transforme en JS
        const data = await reponse.json();
        
        // 3. On utilise
        console.log("Nom : ", data.name);
        
    } catch (erreur) {
        console.error("Erreur réseau !");
    }
};
📝 Exercice Final : Random User

Utilisez l'API gratuite https://randomuser.me/api/.
Créez une fonction asynchrone qui récupère un utilisateur et affiche son email dans la console.

const getRandomUser = async () => {
    try {
        const res = await fetch("https://randomuser.me/api/");
        const data = await res.json();
        
        // L'API renvoie un objet avec un tableau 'results'
        // On accède au premier résultat (index 0)
        console.log(data.results[0].email);
    } catch (e) {
        console.log("Erreur");
    }
};

getRandomUser();