Bases du langage

1 Contexte rapide (10 minutes)

1.1 Une histoire très courte

JavaScript a été inventé en 1995 par Brendan Eich en dix jours.

Il s’appelait d’abord Mocha, puis LiveScript, et a fini par s’appeler JavaScript pour profiter de la mode Java de l’époque.

Aujourd’hui on parle d’ECMAScript (la norme). Les navigateurs implémentent cette norme. ECMAScript définit la syntaxe et le comportement du langage ; « JavaScript » désigne l’usage concret de cette norme dans un moteur, avec les API fournies par l’environnement d’exécution.

On est en 2026 : on écrit du JavaScript moderne, pas celui de 1999.

1.2 Les trois couches

• HTML = structure (le squelette)
• CSS = présentation (les habits)
• JavaScript = comportement (le cerveau)

Sans JavaScript, une page web est un document.

Avec JavaScript, elle devient une application.

1.3 Modèle mental (version ultra-courte)

• Le moteur JavaScript lit votre code et l’exécute dans une pile d’appels (call stack).
• Les choses asynchrones (clics, requêtes réseau, timers) passent par la boucle d’événements (event loop).
• Pour aujourd’hui, retenez juste l’image : le code tourne dans le navigateur, ligne par ligne, et le navigateur décide quand il a le temps de faire autre chose.
• On reviendra dessus plus tard. Pas besoin d’en savoir plus maintenant.

Checkpoint
Vous n’avez rien à coder. Vous devez juste avoir l’image mentale en tête.

2 Hello world & environnement

Objectif de cette section : que chaque personne dans la salle puisse exécuter du JavaScript dans le navigateur avant la pause.

2.1 Cloner le dépôt

git clone https://github.com/Dercetech/intro-to-js-6-days.git
cd intro-to-js-6-days

2.2 Démarrer le serveur Node (méthode recommandée)

cd nodejs-webserver
npm start

Le serveur affiche l’adresse http://127.0.0.1:8080. Ouvrez-la dans Chrome ou Edge et gardez les DevTools ouverts (F12).

2.3 Plan B : serveur Python

Si Node refuse de coopérer :

cd ../python-webserver
python server.py

Puis ouvrez http://127.0.0.1:8000 dans le navigateur.

2.4 Premiers essais dans le fichier JavaScript

• Ouvrez le projet dans VS Code : Jour 1 · section 2.
• Repérez la balise <script src="..."> dans le fichier HTML.
• Ouvrez le fichier JavaScript correspondant (il est vide pour l’instant).
• Ouvrez les DevTools avec F12.

Essayez, une par une, les trois lignes suivantes (sauvegardez + rafraîchissez la page à chaque fois) :

console.log('hello world');

alert('hello world');

document.body.append('hello world');

À essayer
Faites les trois.
Quand au moins une des trois lignes produit un résultat visible pour tout le monde dans la salle, on s’arrête.

Checkpoint
Si vous voyez « hello world » dans la console, dans une alerte, ou directement dans la page, vous êtes prêts.

Il est probablement aux alentours de 10h. Pause.

3 Variables, types et opérateurs (45 min)

On quitte la Console pure. Tout se passe maintenant dans un vrai fichier scripts.js.

3.1 let et const

let = variable qui peut changer.

const = constante (la référence ne change pas).

var est quasi mort : portée trop large, hoisting confus. On ne l’utilise plus.

let score = 0;
score = 10;          // OK

const MAX = 100;
// MAX = 200;        // → erreur

3.2 Types primitifs

Cinq types du quotidien :

• number – 42, 3.14, NaN
• string – "texte" ou 'texte'
• boolean – true / false
• null – absence volontaire de valeur
• undefined – pas encore de valeur

typeof vous dit le type.

bigint et symbol existent. Vous en aurez besoin une fois tous les six mois. Pour l’instant : savoir qu’ils existent suffit.

3.3 Template literals

Backticks + ${}.

const name = "Alex";
const age = 28;
console.log(`Bonjour ${name}, tu as ${age} ans.`);

3.4 Opérateurs

• Arithmétiques : + - * / % **
• Comparaison : == (égalité faible) vs === (strict – toujours préférer ===)
• Logiques : && || !
• Nullish coalescing : ?? (retourne la droite seulement si gauche est null ou undefined)
• Optional chaining : ?. (évite l’erreur si la propriété n’existe pas)

3.5 Pièges de coercition

JavaScript convertit les types tout seul. Ça produit des surprises :

"" + 1          // "1"
"5" - 2         // 3
true + true     // 2
null == undefined   // true
null === undefined  // false
"10" == 10      // true
"10" === 10     // false

Règle simple : utilisez === et !==. Évitez ==.

À essayer

• Ouvrez le dossier www/day-1/s3_variables-types.
• Travaillez uniquement dans scripts.js.
• Suivez les commentaires dans l’ordre.
• Sauvegardez + rafraîchissez après chaque bloc.

Checkpoint
Vous savez expliquer la différence entre let et const, vous utilisez ===, et vous n’êtes plus surpris par "5" - 2.

4 Boucles et fonctions (45 min)

On reste dans un fichier scripts.js.

Les boucles servent à répéter. Les fonctions servent à regrouper et réutiliser.

4.1 Boucles simples

On commence par les deux formes les plus utiles au début :

// for classique
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// while
let n = 0;
while (n < 5) {
  console.log(n);
  n++;
}

for...of existe (pratique pour les tableaux).

for...in existe aussi, mais on l’évite presque toujours (il parcourt les clés et réserve des surprises).

Dans le code moderne on préfère souvent les méthodes de tableaux (.map, .filter…). On les verra plus tard.

4.2 Trois façons d’écrire une fonction

// Déclaration
function add(a, b) {
  return a + b;
}

// Expression
const multiply = function (a, b) {
  return a * b;
};

// Arrow (forme courte)
const divide = (a, b) => a / b;

Les trois fonctionnent.

L’arrow function est très courante aujourd’hui.

4.3 Paramètres, valeur de retour, paramètres par défaut

function greet(name = "inconnu") {
  return `Bonjour ${name}`;
}

console.log(greet("Alex"));   // Bonjour Alex
console.log(greet());         // Bonjour inconnu

Sans return, la fonction renvoie undefined.

4.4 Portée (scope)

let et const sont limités au bloc {} dans lequel ils sont déclarés.

C’est une protection, pas une gêne.

4.5 À vous de jouer

• Ouvrez le dossier www/day-1/s4_loops-functions.
• Travaillez uniquement dans scripts.js.
• Suivez les commentaires dans l’ordre.

À essayer

• Écrivez les petites fonctions demandées.
• Testez-les avec console.log.
• Sauvegardez + rafraîchissez après chaque fonction.

Checkpoint
Vous savez écrire une boucle for et while, vous savez créer une fonction (les trois formes), vous utilisez return et un paramètre par défaut, et vous avez écrit au moins quatre petites fonctions pures.

5 Exercices pure JS (90 min)

• On met en pratique ce qui a été vu ce matin.
• Toujours dans un fichier scripts.js. Pas de DOM.
• Quatre petits exercices indépendants.
• Chacun doit être une (ou plusieurs) fonction(s) pure(s).

• Hint: Utilisez aussi la Console pour explorer le langage à l’exécution.
• Tapez une valeur suivie d’un point, puis appuyez sur Ctrl + Espace pour afficher les suggestions d’autocomplétion.

Une raison parmi d’autres d’apprécier JavaScript : le langage s’explore à l’exécution.

5.1 Convertisseur de température

Écrivez deux fonctions :

• celsiusToFahrenheit(c)
• fahrenheitToCelsius(f)

Formules :

F = C × 9/5 + 32
C = (F − 32) × 5/9

5.2 Force d’un mot de passe

Écrivez une fonction checkPasswordStrength(password) qui retourne un objet du type :

{
  length: true/false,      // ≥ 8 caractères
  hasLower: true/false,
  hasUpper: true/false,
  hasDigit: true/false,
  hasSpecial: true/false,  // au moins un caractère non alphanumérique
  score: 0 à 5
}

hasLower: /[a-z]/.test(password),

5.3 Statistiques sur un tableau de nombres

Écrivez les fonctions suivantes (utilisez des boucles, pas encore les méthodes de tableaux) :

• sum(numbers)
• average(numbers)
  • Indice

    Utilisez la propriété .length de votre tableau.

• min(numbers)
• max(numbers)

5.4 Utilitaires de chaînes

Écrivez :

• capitalize(text) → première lettre en majuscule, le reste en minuscules
  • Indice

    Cherchez du côté de toUpperCase.

• reverseString(text)
  • Indice

    Commencez à length - 1 et incrémentez de -1.

• countVowels(text) → compte a, e, i, o, u, y (minuscules et majuscules)

À essayer

• Ouvrez le dossier www/day-1/s5_pure-js-exercises.
• Travaillez uniquement dans scripts.js.
• Suivez les commentaires dans l’ordre.
• Testez chaque fonction avec console.log.

Checkpoint
Vous avez écrit des fonctions pures pour les quatre thèmes et vous savez les tester rapidement dans la Console.

6 Pièges classiques (1 h 30)

Objectif : sentir les pièges, pas seulement les entendre.

On alterne démo courte et reproduction immédiate dans le fichier.

6.1 let / const vs var dans les boucles

// Avec var (comportement historique)
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log("var", i), 100);
}
// Affiche 3, 3, 3

// Avec let
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log("let", j), 100);
}
// Affiche 0, 1, 2

var n’a pas de portée de bloc. let et const en ont une.

6.2 Temporal Dead Zone (TDZ)

console.log(a); // ReferenceError
let a = 10;

Entre le début du bloc et la ligne de déclaration, la variable existe mais est inaccessible.

C’est la Temporal Dead Zone.

6.3 Fonction créée dans une boucle (le classique)

const funcs = [];
for (var k = 0; k < 3; k++) {
  funcs.push(function () {
    console.log(k);
  });
}
funcs[0](); // 3
funcs[1](); // 3
funcs[2](); // 3

Même problème de portée.

Remplacez var par let et observez la différence.

6.4 Shadowing basique

let x = "extérieur";

function test() {
  let x = "intérieur";
  console.log(x); // intérieur
}
test();
console.log(x);   // extérieur

Une variable interne peut masquer une variable externe du même nom.

Ce n’est pas une erreur, mais il faut le voir venir.

À essayer

• Ouvrez le dossier www/day-1/s6_pitfalls.
• Reproduisez chaque exemple, puis cassez-les volontairement.
• Observez les messages d’erreur et les valeurs inattendues.

Checkpoint
Vous avez vu les quatre pièges tourner sous vos yeux et vous savez les reconnaître.

Fin de journée – Extra (nice-to-haves)

Si le temps le permet :

• const sur un objet → la référence est fixe, le contenu peut changer
• === vs Object.is (cas NaN et -0)
• Premier contact avec debugger; dans le code

Extra 1 — Exploration du panneau Elements

Fin de journée légère.

Pas d’exercice formel. Juste de la curiosité.

Ouvrez le dossier www/day-1/x1_elements-panel.

Lancez la page, ouvrez les DevTools (F12) et allez dans l’onglet Elements.

Essayez librement :

• Cliquez sur n’importe quel élément dans le panneau ou utilisez l’icône de sélection (Ctrl+Shift+C).
• Double-cliquez sur du texte et modifiez-le.
• Ajoutez, modifiez ou supprimez des attributs (class, id, style…).
• Dans le sous-panneau Styles, changez des propriétés CSS en direct.
• Observez la page se mettre à jour immédiatement.

But du moment : sentir que le navigateur est un environnement vivant et inspectable.

Quand vous en avez assez, on s’arrête.

Bonne fin de première journée.

Récap — Défi du canon

Terminez la journée avec un petit défi qui reprend les notions vues aujourd’hui.

Ouvrez le dossier Day1_recap dans le dépôt js-extra.

• Travaillez uniquement dans cannon/src/student.js.
• Réparez les sept bugs pour permettre au canon de tirer.
• Programmez un barrage de dix tirs avec une boucle.
• Ajustez la puissance, l’angle et le vent pour toucher la cible.

Suivez le README.md pour lancer npm install puis npm run dev. Une fois les sept bugs corrigés, la commande npm run build crée un dossier dist exportable.

La version corrigée permet ensuite de vérifier votre travail.