Explications ligne par ligne :
1. let age = 18;
→ Déclare une variable age et lui assigne la valeur 18.
→ let permet de créer une variable dont la valeur peut changer.
2. if (age >= 18) {
→ Commence une condition.
→ Vérifie si la valeur de age est supérieure ou égale à 18.
→ Si la condition est vraie, le bloc de code suivant sera exécuté.
3. [Link]("Majeur");
→ Si age >= 18, affiche "Majeur" dans la console du navigateur ou de l’éditeur JavaScript.
4. } else {
→ Sinon… si la condition précédente est fausse, exécute le bloc suivant.
5. [Link]("Mineur");
→ Affiche "Mineur" dans la console si age < 18.
6. }
→ Fin du bloc conditionnel if...else.
7. for (let i = 1; i <= 5; i++) {
→ Débute une boucle for.
→ Initialise la variable i à 1.
→ Tant que i est inférieur ou égal à 5, le bloc de code à l’intérieur sera exécuté.
→ À chaque itération, i est incrémenté de 1 (i++).
8. [Link]("Compteur : " + i);
→ Affiche la valeur actuelle de i avec le texte "Compteur : " dans la console.
→ Résultat attendu :
9. Compteur : 1
10. Compteur : 2
11. Compteur : 3
12. Compteur : 4
13. Compteur : 5
14. }
→ Fin de la boucle for.
Exercice :
Écrivez un programme qui affiche tous les nombres pairs entre 1 et 20.
4 : Fonctions
Les fonctions permettent de réutiliser du code.
Exemple 4 :
function multiplier(a, b){
return a * b;
}
[Link](multiplier(5, 6));
const division = (a, b) => a / b;
[Link](division(20, 4));
Explications :
1. function multiplier(a, b){ → Déclare une fonction nommée multiplier
avec paramètres a et b.
2. return a * b; → Retourne le produit de a et b.
3. [Link](multiplier(5, 6)); → Appelle la fonction avec 5 et 6, affiche
30.
4. const division = (a, b) => a / b; → Déclare une fonction fléchée pour
diviser a par b.
5. [Link](division(20, 4)); → Affiche 5.
Autre Exemple :
function direBonjour(nom) {
return "Bonjour " + nom;
}
[Link](direBonjour("Sarah"));
const carre = (x) => x * x;
[Link](carre(4));
Exercice :
Écrivez une fonction qui calcule la somme de deux nombres.
Chapitre 5 : Manipulation du DOM
Le DOM permet à JavaScript de modifier le contenu d’une page.
Exemple 5 :
[Link]("titre").innerHTML = "Nouveau Titre";
[Link]("titre").[Link] = "red";
[Link]("btnAlert").addEventListener("click", () => {
alert("Clic détecté !");
});
Explications :
1. [Link]("titre") → Sélectionne l’élément avec l’ID titre.
2. .innerHTML = "Nouveau Titre"; → Change le texte de l’élément.
3. .[Link] = "red"; → Change la couleur du texte en rouge.
4. .addEventListener("click", ...) → Ajoute un événement au clic du bouton.
5. alert("Clic détecté !"); → Affiche une alerte au clic.
Autre Exemple :
[Link]("titre").innerHTML = "Nouveau Titre";
[Link]("titre").[Link] = "red";
[Link]("btn").addEventListener("click", function() {
alert("Bouton cliqué !");
});
Explications :
1. [Link]("titre") → Sélectionne l’élément HTML avec l’ID titre.
2. .innerHTML = "Nouveau Titre"; → Change le texte de l’élément sélectionné.
3. .[Link] = "red"; → Change la couleur du texte en rouge.
4. .addEventListener("click", () => { … }); → Ajoute un événement qui s’exécute lors du
clic.
5. alert("Clic détecté !"); → Affiche une alerte quand le bouton est cliqué.
HTML associé :
<h1 id="titre">Ancien Titre</h1>
<button id="btn">Cliquez-moi</button>
Exercice :
Créez un bouton qui change la couleur d’un texte quand on clique dessus.
Chapitre 6 : Tableaux et objets
let couleurs = ["Rouge", "Vert", "Bleu"];
[Link]("Jaune");
[Link](couleurs);
let voiture = {marque: "Toyota", modele: "Corolla", annee: 2020};
[Link] = 20000;
[Link](voiture);
Explications :
1. let couleurs = [...] → Déclare un tableau avec trois éléments.
2. [Link]("Jaune"); → Ajoute "Jaune" à la fin du tableau.
3. [Link](couleurs); → Affiche le tableau.
4. let voiture = {...} → Crée un objet avec propriétés.
5. [Link] = 20000; → Ajoute une nouvelle propriété à l’objet.
6. [Link](voiture); → Affiche l’objet complet.
Exemples :
let fruits = ["Pomme", "Banane", "Mangue"];
[Link](fruits[1]); // Banane
let etudiant = { nom: "Sarah", age: 22, classe: "L3" };
[Link]([Link]); // Sarah
Exercice :
Créez un tableau de 5 prénoms et affichez-les un par un avec une boucle.
Chapitre 7 : Bonnes pratiques
• Toujours utiliser let ou const au lieu de var.
• Bien nommer les variables.
• Indenter correctement le code.
• Tester le code dans la console du navigateur (F12).
Exemple 7 :
const MA_CONSTANTE = 10;
let compteur = 0;
for(let i=0; i<MA_CONSTANTE; i++){
compteur += i;
[Link]("Compteur final : " + compteur);
Explications :
1. const MA_CONSTANTE = 10; → Déclare une constante.
2. let compteur = 0; → Variable pour accumuler un total.
3. for(let i=0; i<MA_CONSTANTE; i++){ → Boucle de 0 à 9.
4. compteur += i; → Ajoute la valeur de i à compteur.
5. [Link](...) → Affiche le résultat final.
Exercice :
Réécrivez un petit programme en respectant ces bonnes pratiques.
Chapitre 8 : Mini-projets
1. Compteur : un bouton qui incrémente une valeur à chaque clic.
2. Horloge numérique : afficher l’heure en temps réel.
3. Formulaire simple : vérifier qu’un champ n’est pas vide avant envoi.
Exemple 8 : Compteur
<p>Valeur : <span id="valeur">0</span></p>
<button id="increment">+</button>
<button id="decrement">-</button>
<script>
let compteur = 0;
[Link]("increment").addEventListener("click", () => {
compteur++;
[Link]("valeur").textContent = compteur;
});
[Link]("decrement").addEventListener("click", () => {
compteur--;
[Link]("valeur").textContent = compteur;
});
</script>
Explications :
1. <span id="valeur">0</span> → Affiche la valeur initiale du compteur.
2. <button id="increment">+</button> → Bouton pour augmenter.
3. <button id="decrement">-</button> → Bouton pour diminuer.
4. let compteur = 0; → Variable qui stocke la valeur actuelle.
5. addEventListener("click", ...) → Détecte le clic sur les boutons.
6. compteur++ / compteur-- → Modifie la valeur à chaque clic.
7. textContent = compteur → Met à jour l’affichage du compteur dans le <span>.