Variables et conditions · Code avec Martin

Apprends à ta page à se souvenir de choses et à prendre des décisions. C'est le cœur de la programmation.

Montre-moi : les variables – la mémoire du programme

Une variable est une boîte étiquetée où un programme stocke une valeur :

let clickCount = 0;        // number
let name = "Jake";         // string (text)
let isWeekend = true;      // true/false

let crée une variable qui peut être changée.
const (tu le connais déjà) crée une variable qui ne changera jamais.

Tu peux faire des maths avec les variables et les modifier :

clickCount = clickCount + 1;   // increase by 1
clickCount++;                  // same thing, shorter

Montre-moi : un compteur de clics

Combinons une variable avec le bouton de la dernière leçon :

<button id="counter">Clicked: 0×</button>

const counter = document.getElementById("counter");
let count = 0;

counter.addEventListener("click", () => {
  count++;
  counter.textContent = "Clicked: " + count + "×";
});

Pour la première fois, la page se souvient de quelque chose. Chaque clic augmente le nombre dans la boîte et l’affiche.

Montre-moi : les conditions – prendre des décisions

Une condition dit : « Si c’est vrai, fais A. Sinon, fais B. »

if (count >= 10) {
  counter.textContent = "Ten clicks! You've got some serious stamina 🏆";
} else {
  counter.textContent = "Clicked: " + count + "×";
}

if (condition) { ... } – « si c’est vrai… »
else { ... } – « …sinon »
Comparaisons : > plus grand que, < plus petit que, >= plus grand ou égal, === égal à, !== pas égal à.

À toi 💪

Construis un compteur avec une surprise : après un certain nombre de clics, quelque chose d’extra se passe.

🏫 Site web d'école – vote pour le meilleur plat de la cantine

<h2>Vote for pizza day!</h2>
<button id="vote">Vote 🍕 (0 votes)</button>
<p id="result"></p>

const vote = document.getElementById("vote");
const result = document.getElementById("result");
let votes = 0;

vote.addEventListener("click", () => {
  votes++;
  vote.textContent = "Vote 🍕 (" + votes + " votes)";

  if (votes >= 5) {
    result.textContent = "Decided! Pizza day wins the election. 🏆";
  }
});

🙋 Site web personnel – compteur de jonglage

<h2>How many times can I juggle the ball?</h2>
<button id="kick">Kick! (0)</button>
<p id="record"></p>

const kick = document.getElementById("kick");
const record = document.getElementById("record");
let kicks = 0;

kick.addEventListener("click", () => {
  kicks++;
  kick.textContent = "Kick! (" + kicks + ")";

  if (kicks === 20) {
    record.textContent = "20 kicks – new personal record! 🎉";
  }
});

🌍 Journal de voyage – compteur de pays visités

<h2>Country counter</h2>
<button id="country">Add a country (0)</button>
<p id="rating"></p>

const country = document.getElementById("country");
const rating = document.getElementById("rating");
let countryCount = 0;

country.addEventListener("click", () => {
  countryCount++;
  country.textContent = "Add a country (" + countryCount + ")";

  if (countryCount >= 10) {
    rating.textContent = "Ten countries – you're a globetrotter! 🌍";
  } else if (countryCount >= 5) {
    rating.textContent = "Five countries – beginner traveler. 🎒";
  }
});

Remarque le else if – c’est comme ça qu’on enchaîne plusieurs conditions.

⚽ Site web de club – suivi du score

<h2>Shooting practice</h2>
<button id="goal">GOAL! ⚽</button>
<p id="score">Score: 0</p>

const goal = document.getElementById("goal");
const score = document.getElementById("score");
let goals = 0;

goal.addEventListener("click", () => {
  goals++;

  if (goals >= 10) {
    score.textContent = "Score: " + goals + " – hat trick and more! Player of the match 🏆";
  } else {
    score.textContent = "Score: " + goals;
  }
});

💡

Tu viens d’apprendre la vraie programmation. Les variables et les conditions ne sont pas juste du « truc web » – elles fonctionnent exactement pareil en Python, dans les jeux et dans les apps. Quiconque connaît les variables et les conditions peut parler à n’importe quel langage de programmation au monde.

✅

Vérifie : Ton compteur compte, et une fois la limite atteinte, quelque chose d’extra se passe. Essaie d’expliquer à voix haute ce que fait le code, ligne par ligne – si tu peux, tu as les bases.

Ce que tu retiens de cette leçon

Une variable est une boîte avec une valeur : let (modifiable), const (immuable). count++ l’augmente de 1.
Une condition if / else if / else est comment un programme prend des décisions.
Les comparaisons utilisent >, <, >=, ===, !==.