Séance 4 — JavaScript : les variables

Stocker une valeur, et s’en servir

• Brancher un fichier JavaScript sur une page
• Créer une variable et afficher sa valeur
• Distinguer les 3 types de base : texte, nombre, booléen

1. Le troisième langage

Vous connaissez maintenant deux langages. En voici un troisième.

Langage	Rôle	Question
HTML	Le contenu	Quoi ?
CSS	L’apparence	Comment ça a l’air ?
JavaScript	Le comportement	Que se passe-t-il quand… ?

Le JavaScript, c’est ce qui rend une page capable de faire des choses : compter, vérifier, réagir à un clic, aller chercher des informations.

NoteJavaScript n’a rien à voir avec Java

Ce sont deux langages complètement différents. Le nom est un coup marketing des années 90. On dit souvent « JS » pour aller plus vite.

2. Brancher le JavaScript

Étape 1 — Deux fichiers

Dans web101, créez seance04.html :

seance04.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Séance 4</title>
  </head>
  <body>
    <h1>Ma première ligne de JavaScript</h1>

    <script src="app.js"></script>
  </body>
</html>

Et app.js :

app.js

console.log("Bonjour depuis JavaScript !");

Lancez Live Server.

La page n’affiche rien de nouveau. C’est normal. Le message est allé dans la console.

ImportantDeux règles pour la balise <script>

1. Elle se place juste avant </body>, tout en bas. Pourquoi ? Parce que le navigateur lit la page de haut en bas : quand il arrive au script, la page existe déjà et le code peut travailler dessus.
2. Elle ne s’auto-ferme pas. On écrit <script src="app.js"></script>, avec les deux balises collées. <script src="app.js" /> ne fonctionne pas.

3. La console : votre nouvel écran

Étape 2 — Ouvrir la console

Dans le navigateur : clic droit → Inspecter, puis onglet Console. (Raccourci : F12.)

Vous devez y voir Bonjour depuis JavaScript !.

AstuceLa console est votre meilleure amie

Gardez-la ouverte en permanence pendant tout le reste du semestre.

• Les messages de console.log(…) s’y affichent
• Les erreurs de votre code s’y affichent en rouge

Une erreur JavaScript ne se voit pas sur la page : la page a juste l’air « cassée » ou ne réagit pas. Si vous ne regardez pas la console, vous cherchez dans le noir.

4. Les variables

Une variable, c’est une boîte étiquetée qui contient une valeur.

app.js

let prenom = "Camille";
console.log(prenom);

let  prenom  =  "Camille"  ;
└┬┘   └─┬──┘ │     └──┬──┘
 │      │    │        └── la VALEUR mise dans la boîte
 │      │    └─────────── « reçoit » (ce n'est PAS « égal » au sens maths)
 │      └──────────────── le NOM de la boîte
 └─────────────────────── « je crée une nouvelle boîte »

Avertissement= ne veut pas dire « égal »

En mathématiques, x = 3 est une affirmation. En programmation, x = 3 est un ordre : « mets 3 dans la boîte x ».

C’est pour ça que cette ligne, absurde en maths, est parfaitement normale en programmation :

let compteur = 0;
compteur = compteur + 1; // prends la valeur de compteur, ajoute 1, remets-la dedans

let ou const ?

let age = 19;
age = 20;          // ✅ autorisé : let = ça peut changer

const nom = "Camille";
nom = "Alex";      // ❌ ERREUR : const = ça ne change jamais

ImportantLa règle du cours

Utilisez const par défaut. Ne passez à let que si vous savez que la valeur va changer.

Pourquoi ? Parce que const protège des erreurs : si vous modifiez par accident une valeur qui ne devait pas bouger, le navigateur vous prévient tout de suite au lieu de laisser un bug s’installer.

NoteLes règles de nommage

• Pas d’espace, pas d’accent : prenomEtudiant, pas prénom étudiant
• On commence par une minuscule
• Plusieurs mots ? On colle avec une majuscule au milieu : nombreDePoints. Ça s’appelle le camelCase (comme les bosses d’un chameau).
• Un nom qui dit ce que ça contient. x ne dit rien, nombreDeClics dit tout.

Exercice 4.1

Dans app.js, créez trois variables : votre prénom, votre ville, votre âge. Affichez les trois dans la console.

Astuce▸ Solution

app.js

const prenom = "Camille";
const ville = "Palaiseau";
const age = 19;

console.log(prenom);
console.log(ville);
console.log(age);

const partout, car rien ne change dans ce programme.

5. Les trois types de base

Une valeur a toujours un type. Il y en a trois à connaître.

string — du texte

const prenom = "Camille";
const cri = "Aïe !";
const vide = "";

Toujours entre guillemets. On peut utiliser "…" ou '…', au choix, mais il faut ouvrir et fermer avec le même.

number — un nombre

const age = 19;
const prix = 12.5;
const temperature = -4;

Pas de guillemets. Le séparateur décimal est le point, pas la virgule : 12.5, jamais 12,5.

boolean — vrai ou faux

const majeur = true;
const pleut = false;

Seulement deux valeurs possibles : true ou false. En minuscules, et sans guillemets.

Vérifier un type

console.log(typeof "Camille"); // string
console.log(typeof 19);        // number
console.log(typeof true);      // boolean

Avertissement19 et "19" ne sont PAS la même chose

const a = 19;    // un nombre, avec lequel on peut calculer
const b = "19";  // du texte, qui se trouve ressembler à un nombre

C’est la source d’erreur numéro 1 des débutants. On y revient tout de suite.

6. Calculer et assembler

Avec des nombres

const a = 10;
const b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333333333333335
console.log(a % b); // 1  ← le RESTE de la division

NoteÀ quoi sert % (le modulo) ?

Il donne le reste d’une division entière. C’est très pratique :

console.log(10 % 2); // 0  → 10 est pair
console.log(7 % 2);  // 1  → 7 est impair

n % 2 === 0 est la façon standard de tester si un nombre est pair.

Avec du texte

const prenom = "Camille";
const nom = "Dupont";

console.log(prenom + " " + nom); // Camille Dupont

Le + entre deux textes les colle (on dit concaténer). Attention à ne pas oublier l’espace : prenom + nom donnerait CamilleDupont.

La bonne méthode : les gabarits

Coller des morceaux avec des + devient vite illisible. Il existe bien mieux :

const prenom = "Camille";
const age = 19;

console.log(`${prenom} a ${age} ans.`); // Camille a 19 ans.

ImportantLes 2 choses à retenir sur les gabarits

1. On utilise des accents graves `, pas des apostrophes '.
   Windows touche AltGr+7, puis Espace
   macOS touche Option+7… ou copiez-collez !
2. À l’intérieur, une variable s’écrit ${variable} — dollar, accolades.

C’est beaucoup plus lisible :

"Bonjour " + prenom + ", tu as " + age + " ans"  // 😖
`Bonjour ${prenom}, tu as ${age} ans`            // 😀

7. Le piège du +

AvertissementRegardez bien

console.log(5 + 3);       // 8      ← deux nombres : addition
console.log("5" + "3");   // "53"   ← deux textes : collage
console.log("5" + 3);     // "53"   ← 😱 un texte et un nombre : COLLAGE

Si l’un des deux est du texte, + colle au lieu d’additionner.

C’est exactement ce qui arrive quand on récupère une valeur tapée par l’utilisateur : elle arrive toujours sous forme de texte. On verra comment la convertir à la séance 10.

Convertir

const texte = "42";

const nombre = Number(texte);
console.log(nombre + 1);        // 43 ✅

console.log(Number("bonjour")); // NaN

NaN signifie Not a Number : « je n’ai pas réussi à en faire un nombre ». Quand vous voyez NaN dans la console, cherchez une conversion ratée.

Exercice 4.2 — Prédire

Sans exécuter, qu’affiche chaque ligne ?

console.log(2 + 2);
console.log("2" + 2);
console.log(2 + 2 + "2");
console.log("2" + 2 + 2);
console.log(typeof (1 + 1));

Astuce▸ Solution

Ligne	Résultat	Pourquoi
2 + 2	4	Deux nombres → addition
"2" + 2	"22"	Un texte est présent → collage
2 + 2 + "2"	"42"	JS lit de gauche à droite : 2+2 = 4, puis 4 + "2" colle → "42"
"2" + 2 + 2	"222"	"2"+2 = "22", puis "22"+2 = "222"
typeof (1 + 1)	"number"	Le résultat est 2, donc un nombre

La leçon : l’ordre compte, parce que JavaScript évalue de gauche à droite.

8. À toi de jouer

Exercice 4.3 — Se présenter

Écrivez un programme qui contient 3 variables (prenom, age, ville) et affiche une seule ligne, avec un gabarit :

Je m'appelle Camille, j'ai 19 ans et j'habite à Palaiseau.

Astuce▸ Solution

app.js

const prenom = "Camille";
const age = 19;
const ville = "Palaiseau";

console.log(`Je m'appelle ${prenom}, j'ai ${age} ans et j'habite à ${ville}.`);

Astuce : comme on utilise des accents graves `, l’apostrophe de m'appelle ne pose aucun problème.

Exercice 4.4 — Le prix du panier

Une baguette coûte 1,20 €, un croissant 1,10 €. Une personne achète 2 baguettes et 3 croissants.

Écrivez un programme qui calcule et affiche :

Total : 6.7 euros

Le prix des articles et les quantités doivent être dans des variables (pas de nombre écrit en dur dans le calcul).

Astuce▸ Solution

app.js

const prixBaguette = 1.2;
const prixCroissant = 1.1;

const nbBaguettes = 2;
const nbCroissants = 3;

const total = prixBaguette * nbBaguettes + prixCroissant * nbCroissants;

console.log(`Total : ${total} euros`);

⚠️ 1.2 avec un point. 1,2 serait interprété comme deux valeurs séparées.

Vous obtenez peut-être 6.699999999999999 : les ordinateurs calculent les décimaux de façon approchée. On peut arrondir :

console.log(`Total : ${total.toFixed(2)} euros`); // Total : 6.70 euros

Exercice 4.5 — L’échange

Deux variables contiennent deux valeurs :

let a = "pomme";
let b = "orange";

Écrivez le code qui échange leurs contenus, pour qu’à la fin a contienne "orange" et b contienne "pomme".

NoteIndice

a = b; b = a; ne marche pas. Essayez sur papier, en dessinant les deux boîtes, et vous verrez pourquoi. Il vous faut une troisième boîte.

Astuce▸ Solution

app.js

let a = "pomme";
let b = "orange";

const temporaire = a; // on met "pomme" de côté
a = b;                // a reçoit "orange"
b = temporaire;       // b reçoit "pomme"

console.log(a); // orange
console.log(b); // pomme

Pourquoi a = b; b = a; échoue : après a = b, la valeur "pomme" est écrasée, perdue à jamais. b = a recopie alors "orange" sur "orange". Les deux variables valent "orange".

C’est exactement le problème des deux verres qu’on veut échanger : il faut un troisième verre.

Notez aussi qu’ici on utilise let (les valeurs changent) sauf pour temporaire, qui ne change jamais → const.

Exercice 4.6 — Trouver les 3 erreurs

const prenom = Camille;
const age = "19";
console.log("Bonjour ${prenom}, dans 1 an tu auras " + age + 1 + " ans");

Ce programme est censé afficher Bonjour Camille, dans 1 an tu auras 20 ans. Trouvez les 3 problèmes et corrigez.

Astuce▸ Solution

1. Camille sans guillemets : JavaScript croit que c’est le nom d’une variable, qui n’existe pas → erreur rouge dans la console.
2. age = "19" est du texte. Donc age + 1 donne "191" et non 20.
3. "${prenom}" avec des guillemets droits : ${…} ne fonctionne que dans un gabarit, entre accents graves. Ici, ça afficherait littéralement ${prenom}.

app.js

const prenom = "Camille";
const age = 19;

console.log(`Bonjour ${prenom}, dans 1 an tu auras ${age + 1} ans`);

Remarquez qu’on peut mettre un calcul dans ${…}, pas seulement une variable.

9. Fiche mémo

Brancher le JS (tout en bas du <body>)

<script src="app.js"></script>

Créer une variable

const nom = "Camille"; // ne changera pas → const par défaut
let compteur = 0;      // va changer      → let

Les 3 types

"du texte"   // string  ← guillemets
42           // number  ← pas de guillemets, point décimal
true         // boolean ← true ou false uniquement

Assembler du texte

`Bonjour ${prenom}, tu as ${age} ans`

Accents graves ` + ${variable}

Voir ce qui se passe

console.log(uneVariable);
console.log(typeof uneVariable);

Console = F12 → onglet Console. Toujours ouverte.

Le piège

"5" + 3 donne "53", pas 8. Conversion : Number("5") → 5

10. Avant la prochaine séance

• Je sais ouvrir la console du navigateur
• Je sais créer une variable et l’afficher
• Je sais écrire un gabarit `…${…}…`
• Je sais expliquer pourquoi "5" + 3 ne fait pas 8