Semaine 8 – Introduction à JavaScript

📘 Comment assimiler la matière

Objectif de la semaine : passer de la logique à la syntaxe JavaScript.

Méthode recommandée : pratique chaque notion avec la console (variables, tableaux, chaînes, maths). Avancez par petites étapes et testez chaque changement immédiatement.

Piège fréquent : copier le code sans l'exécuter ni observer les résultats.

⚡ Qu'est-ce que JavaScript ?

JavaScript est le seul langage de programmation natif du navigateur. Contrairement à HTML (structure) et CSS (apparence), JavaScript ajoute du comportement dynamique aux pages web.

Langage	Rôle	Fichier
HTML	Structure et contenu	`.html`
CSS	Apparence visuelle	`.css`
JavaScript	Comportement et interactivité	`.js`

🔗 Lier un fichier JavaScript à HTML

<!-- À placer juste avant </body> — le HTML est chargé en premier -->
<body>
  <h1>Ma page</h1>

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

<!-- Ou dans <head> avec l'attribut defer (chargé après le HTML) -->
<head>
  <script src="../script.js" defer></script>
</head>

Placez toujours <script> en fin de <body> ou utilisez defer. Si JS s'exécute avant que le HTML soit chargé, les éléments qu'il tente de trouver n'existent pas encore.

Tester JavaScript avec la console

// Dans script.js
console.log('Bonjour !');          // affiche dans la console
console.log(42 + 8);               // 50
console.log('2 + 2 =', 2 + 2);    // 2 + 2 = 4

// Variables
let prenom = 'Marie';
console.log(prenom);               // Marie
console.log('Nom:', prenom);       // Nom: Marie

🧩 Fonctions JavaScript et portée

Une fonction regroupe des instructions réutilisables. Elle permet d'éviter la répétition, d'organiser le code et de rendre les scripts plus faciles à tester et à maintenir.

Utilité	Pourquoi c'est important
Réutiliser du code	Éviter d'écrire la même logique plusieurs fois
Clarifier l'intention	Donner un nom parlant à une action (ex. `calculerTotal()`)
Faciliter les tests	Vérifier une logique en isolant une fonction

Déclaration et appel d'une fonction

function saluer(nom) {
  return `Bonjour ${nom} !`;
}

console.log(saluer('Marie')); // Bonjour Marie !

Portée des paramètres et variables (très important)

// Variable globale (accessible partout dans le script)
let cours = 'Développement Web 1';

function exemplePortee(etudiant) {
  // Paramètre: seulement disponible dans cette fonction
  // Variable locale: seulement disponible dans cette fonction
  let message = `${etudiant} suit le cours ${cours}`;
  console.log(message);
}

exemplePortee('Alex');
console.log(cours); // OK (globale)
// console.log(etudiant); // Erreur: paramètre hors portée
// console.log(message);  // Erreur: variable locale hors portée

À retenir : les paramètres et variables déclarés dans une fonction (let / const) sont locaux à cette fonction. Ils n'existent pas à l'extérieur.

Portée de bloc avec let/const

if (true) {
  let note = 95;
  const reussi = true;
  console.log(note, reussi); // OK ici
}

// console.log(note);   // Erreur: hors du bloc
// console.log(reussi); // Erreur: hors du bloc

Bonne pratique : privilégiez let et const pour limiter la portée au bloc et éviter les bugs liés aux variables accessibles trop loin.

🔢 Manipulation des nombres

// Opérateurs arithmétiques
let a = 10, b = 3;
console.log(a + b);   // 13  addition
console.log(a - b);   // 7   soustraction
console.log(a * b);   // 30  multiplication
console.log(a / b);   // 3.333... division
console.log(a % b);   // 1   modulo (reste de division)
console.log(a ** b);  // 1000 puissance (10³)

// Incrémentation / décrémentation
let n = 5;
n++;   // n = 6 (équivalent à n = n + 1)
n--;   // n = 5
n += 3;  // n = 8
n *= 2;  // n = 16

// Conversion
let texte = '42';
console.log(typeof texte);         // 'string'
console.log(typeof Number(texte)); // 'number'
console.log(parseInt('42.7'));     // 42 (entier)
console.log(parseFloat('42.7'));   // 42.7 (décimal)
console.log(Number('abc'));        // NaN (Not a Number)

// Arrondi et maths
console.log(Math.round(4.6));   // 5
console.log(Math.floor(4.9));   // 4 (arrondit vers le bas)
console.log(Math.ceil(4.1));    // 5 (arrondit vers le haut)
console.log(Math.abs(-10));     // 10 (valeur absolue)
console.log(Math.max(3, 7, 1)); // 7
console.log(Math.min(3, 7, 1)); // 1
console.log(Math.PI);           // 3.14159...

// Nombre aléatoire entre 0 (inclus) et 1 (exclus)
console.log(Math.random());

// Entier aléatoire entre min et max (inclus)
function aleatoire(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(aleatoire(1, 6)); // dé à 6 faces

📝 Manipulation des chaînes de caractères

let phrase = 'Développement Web';

// Propriété
console.log(phrase.length);        // 18 (nombre de caractères)

// Accéder à un caractère (index commence à 0)
console.log(phrase[0]);            // 'D'
console.log(phrase[4]);            // 'l'

// Méthodes
console.log(phrase.toUpperCase()); // 'DÉVELOPPEMENT WEB'
console.log(phrase.toLowerCase()); // 'développement web'
console.log(phrase.trim());        // retire les espaces en début/fin
console.log(phrase.includes('Web'));     // true
console.log(phrase.startsWith('Dév'));   // true
console.log(phrase.endsWith('Web'));     // true
console.log(phrase.indexOf('Web'));      // 15 (position, ou -1 si absent)
console.log(phrase.slice(0, 13));        // 'Développement'
console.log(phrase.slice(-3));           // 'Web'
console.log(phrase.replace('Web', 'JS')); // 'Développement JS'
console.log(phrase.split(' '));           // ['Développement', 'Web']

// Template literals (backtick `) — interpolation de variables
let prenom = 'Marie';
let age = 22;
let msg = `Bonjour ${prenom}, vous avez ${age} ans.`;
console.log(msg);  // 'Bonjour Marie, vous avez 22 ans.'

// Conversion nombre → chaîne
let n = 42;
console.log(n.toString());          // '42'
console.log(n.toFixed(2));          // '42.00'
console.log(String(n));             // '42'

📋 Manipulation des tableaux

let fruits = ['pomme', 'banane', 'cerise'];

// Propriété
console.log(fruits.length); // 3

// Accès par index (commence à 0)
console.log(fruits[0]); // 'pomme'
console.log(fruits[2]); // 'cerise'

// Modifier un élément
fruits[1] = 'mangue';   // remplace 'banane' par 'mangue'

// Ajouter / retirer
fruits.push('kiwi');    // ajoute en FIN   → ['pomme','mangue','cerise','kiwi']
fruits.pop();           // retire le DERNIER → 'kiwi' retiré
fruits.unshift('raisin'); // ajoute en DÉBUT
fruits.shift();           // retire le PREMIER

// Trouver
console.log(fruits.indexOf('pomme'));    // 0 (ou -1 si absent)
console.log(fruits.includes('banane')); // false

// Ordonner
fruits.sort();           // alphabétique
fruits.reverse();        // inverse l'ordre

// Parcourir
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

for (const fruit of fruits) {
  console.log(fruit);   // plus simple
}

fruits.forEach(fruit => console.log(fruit));

// Créer un nouveau tableau (sans modifier l'original)
const en_maj = fruits.map(f => f.toUpperCase());
const longs   = fruits.filter(f => f.length > 5);

// Rejoindre en une chaîne
console.log(fruits.join(', ')); // 'pomme, mangue, cerise'

// Décomposer une chaîne en tableau
let mots = 'HTML CSS JS'.split(' '); // ['HTML', 'CSS', 'JS']

🔧 Chrome DevTools & débogage

Les outils développeurs de Chrome (F12 ou clic droit → Inspecter) sont essentiels pour déboguer JavaScript.

Console

// Afficher des valeurs
console.log('Valeur :', maVariable);

// Afficher plusieurs valeurs
console.log('a =', a, '| b =', b);

// Niveau de sévérité
console.log('Info normale');
console.warn('Avertissement ⚠️');
console.error('Erreur ❌');

// Afficher un tableau ou objet formaté
console.table(monTableau);
console.dir(monObjet);

// Mesurer le temps d'exécution
console.time('calcul');
// ... code à mesurer ...
console.timeEnd('calcul');

Onglets utiles dans DevTools

Onglet	Utilité
Console	Exécuter du JS, voir les erreurs, console.log
Elements	Inspecter et modifier le HTML/CSS en direct
Sources	Voir les fichiers JS, poser des points d'arrêt (breakpoints)
Network	Voir les requêtes HTTP (fetch, images, CSS…)
Application	LocalStorage, sessionStorage, cookies

Quand une erreur JS survient, la console affiche le message d'erreur et le numéro de ligne. Cliquez dessus pour aller directement à l'endroit problématique dans l'onglet Sources.

📝 Exercice de la semaine

Pratiquez les bases JavaScript avec un mini script interactif.

Créez des variables (let/const) et affichez des valeurs dans la console.
Manipulez un tableau (push, forEach) et une chaîne (length, toUpperCase).
Générez un nombre aléatoire (Math.random) et affichez le résultat formaté.

🧠 Mini quiz de la semaine

Les questions sont cachées par défaut. Clique sur « Commencer le quiz » pour débuter.