JavaScript — Les bases & intégration HTML

?

C'est quoi JavaScript ?

Si ton site était une personne : HTML serait le squelette, CSS serait les vêtements, et JavaScript serait les muscles qui permettent de bouger ! JS est le langage de programmation du web : il rend les pages interactives — boutons cliquables, animations, jeux, formulaires dynamiques…

🎬

HTML = le décor et les acteurs immobiles. CSS = leurs costumes et leur look. JavaScript = le réalisateur qui dit "action !" et fait bouger tout le monde. Sans JS, ta page est une photo. Avec JS, c'est un film interactif !

📄 HTML

Structure et contenu.
Titres, paragraphes, boutons…

🎨 CSS

Apparence visuelle.
Couleurs, tailles, animations…

⚡ JavaScript

Comportement et interactivité. Réagir aux clics, modifier le contenu, faire des calculs, créer des jeux…

🔗

Comment intégrer JavaScript dans HTML ?

Il existe 3 façons d'ajouter du JavaScript à une page HTML. La bonne pratique est de toujours utiliser un fichier externe.

Méthode 1 — JS dans une balise <script> en bas du body (simple)

<!DOCTYPE html> <html> <body> <h1 id="titre">Bonjour !</h1> <button onclick="changerTitre()">Cliquer</button>  <script> function changerTitre() { document.getElementById('titre').textContent = 'Cliqué !'; } </script> </body> </html>

Méthode 2 — Fichier JS externe ✅ (recommandée)

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

// Dans Assets/js/script.js function changerTitre() { document.getElementById('titre').textContent = 'Cliqué !'; }

Méthode 3 — JS dans le <head> avec defer (moderne)

💡Place toujours ta balise <script> avant </body> ou utilise l'attribut defer. Sinon le JS essaie de modifier des éléments HTML qui n'existent pas encore — ça plante !

📦

Les variables — Stocker des valeurs

Une variable est une boîte avec un nom dans laquelle tu ranges une valeur. En JS moderne, on utilise let et const.

// const : valeur qui ne change PAS const nomDuJeu = "Super Aventure"; const vitesseMax = 300; // let : valeur qui peut changer let score = 0; let viesDuJoueur = 3; let estEnVie = true; let nomJoueur = "Alice"; // Modifier une variable let score = score + 10; // score vaut maintenant 10 score += 5; // raccourci : score vaut 15 viesDuJoueur--; // enlève 1 : viesDuJoueur vaut 2

const

const PI = 3.14;

Valeur fixe. Ne peut pas être réassignée. Bonne pratique : utilise const par défaut.

let

let score = 0;

Valeur modifiable. Utilise let seulement si la valeur doit changer.

⚠️N'utilise plus var — c'est l'ancien mot-clé, il cause des bugs bizarres. Utilise toujours const ou let.

🔢

Les types de données

En JavaScript, chaque valeur a un type. Les principaux types à connaître :

String (texte)

"Bonjour" ou 'Alice'

Toujours entre guillemets simples ou doubles. Peut être concaténé avec +.

Number (nombre)

42 ou 3.14

Entiers et décimaux. Opérations : + - * / %

Boolean (vrai/faux)

true ou false

Seulement deux valeurs possibles. Utilisé pour les conditions.

Array (liste)

[1, 2, 3]

Une liste ordonnée de valeurs. Accès par index (commence à 0).

Object (objet)

{ nom: "Alice", score: 42, vies: 3 }

Groupe de données nommées (clé: valeur). Parfait pour représenter un joueur, un ennemi, un obstacle…

// Exemples concrets en contexte jeu vidéo const joueur = { nom: "Alice", score: 0, vies: 3, estInvincible: false }; const niveaux = ["Forêt", "Désert", "Volcan", "Château"]; // Accéder aux valeurs console.log(joueur.nom); // → "Alice" console.log(niveaux[0]); // → "Forêt" (index 0 = premier) console.log(niveaux[2]); // → "Volcan"

⚙️

Les fonctions — Réutiliser du code

Une fonction est un bloc de code qu'on peut appeler autant de fois qu'on veut. C'est le cœur de la programmation : plutôt que de répéter le même code, on l'enferme dans une fonction et on l'appelle par son nom.

// Déclarer une fonction function direBonjour(prenom) { console.log("Bonjour " + prenom + " !"); } // Appeler la fonction direBonjour("Alice"); // → "Bonjour Alice !" direBonjour("Bob"); // → "Bonjour Bob !" // Fonction avec valeur de retour function additionner(a, b) { return a + b; } const resultat = additionner(10, 25); console.log(resultat); // → 35 // Fonction fléchée (écriture moderne) const multiplier = (a, b) => a * b; console.log(multiplier(3, 4)); // → 12

🔀

Les conditions — Prendre des décisions

Les conditions permettent d'exécuter du code seulement si une certaine situation est vraie. C'est le cerveau du programme !

// if / else if / else let vies = 2; if (vies === 0) { console.log("Game Over !"); } else if (vies === 1) { console.log("Attention, dernière vie !"); } else { console.log("Tu as encore " + vies + " vies."); } // → "Tu as encore 2 vies." // Les opérateurs de comparaison score === 100 // strictement égal vies !== 0 // différent de score > 50 // supérieur à score <= 100 // inférieur ou égal // Combiner des conditions if (vies > 0 && score >= 100) { // && = ET console.log("Niveau suivant !"); } if (vies === 0 || tempsRestant === 0) { // || = OU console.log("Perdu !"); }

⚠️Utilise toujours === (triple égal) pour comparer en JS, pas == (double). Le triple égal compare aussi le type de données et évite des bugs surprenants !

🔁

Les boucles — Répéter des actions

Une boucle permet de répéter une action sans réécrire le même code des dizaines de fois. Indispensable en jeu vidéo pour gérer des ennemis, des obstacles, des niveaux…

// Boucle for : répéter un nombre précis de fois for (let i = 0; i < 5; i++) { console.log("Ennemi numéro " + i); } // → Ennemi numéro 0, 1, 2, 3, 4 // Boucle while : répéter tant qu'une condition est vraie let vies = 3; while (vies > 0) { console.log("Vie restante : " + vies); vies--; } // → 3, 2, 1 puis la boucle s'arrête // Boucle forEach : parcourir un tableau const ennemis = ["Goblin", "Dragon", "Sorcier"]; ennemis.forEach((ennemi) => { console.log("Prépare-toi : " + ennemi + " arrive !"); });

🌳

Le DOM — Modifier la page HTML avec JS

Le DOM (Document Object Model) est la façon dont JavaScript "voit" ta page HTML — comme un arbre d'éléments modifiables. Avec le DOM, tu peux lire, modifier, ajouter ou supprimer n'importe quel élément de ta page dynamiquement.

// Sélectionner des éléments HTML const titre = document.getElementById('mon-titre'); const bouton = document.querySelector('.btn-jouer'); // par classe const tous = document.querySelectorAll('p'); // tous les <p> // Modifier le contenu texte titre.textContent = "Score : 150"; // Modifier le HTML interne titre.innerHTML = "Score : <strong>150</strong>"; // Modifier le style CSS titre.style.color = "red"; titre.style.fontSize = "2rem"; // Ajouter / retirer une classe CSS bouton.classList.add('actif'); bouton.classList.remove('desactive'); bouton.classList.toggle('cache'); // ajoute si absent, retire si présent

👂

Les événements — Réagir aux actions

Les événements permettent de réagir à ce que fait l'utilisateur : clic, touche de clavier, mouvement de souris… C'est la base de toute interactivité et de tout jeu vidéo !

// Écouter un clic sur un bouton const bouton = document.getElementById('btn-jouer'); bouton.addEventListener('click', function() { console.log("Le jeu démarre !"); }); // Événements clavier (essentiel pour les jeux !) document.addEventListener('keydown', function(event) { console.log("Touche appuyée : " + event.key); if (event.key === 'ArrowLeft') { deplacerGauche(); } if (event.key === 'ArrowRight') { deplacerDroite(); } if (event.key === ' ') { sauter(); } }); // Événements souris document.addEventListener('mousemove', function(event) { // event.clientX et event.clientY = position de la souris console.log(event.clientX, event.clientY); });

'click'

Clic de souris sur un élément

'keydown'

Touche de clavier enfoncée

'keyup'

Touche de clavier relâchée

'mousemove'

Mouvement de la souris

🔨

Exemple complet — Un compteur de score

Voici un exemple complet qui montre comment HTML et JS travaillent ensemble pour créer un mini-compteur interactif :

📄 index.html

<div id="jeu"> <h2 id="score-affiche"> Score : 0 </h2> <button id="btn-point"> +10 points </button> <button id="btn-reset"> Reset </button> </div> <script src="script.js"></script>

⚡ script.js

let score = 0; const affichage = document.getElementById( 'score-affiche' ); const btnPoint = document.getElementById( 'btn-point' ); btnPoint.addEventListener( 'click', function() { score += 10; affichage.textContent = "Score : " + score; } );

🎮 Essaie ici !

Score : 0

🐛

Déboguer avec console.log

console.log() est ton meilleur ami pour comprendre ce qui se passe dans ton code. Il affiche des valeurs dans la console du navigateur (F12 → onglet Console).

// Afficher une valeur simple console.log("Le score est : ", score); // Afficher un objet entier console.log("Joueur :", joueur); // Afficher avec template littéral (backtick) console.log(`Vies : ${vies} | Score : ${score}`); // Afficher une erreur ou un avertissement console.error("Erreur : ennemi hors limites !"); console.warn("Attention : vies basses !");

🌟Ouvre la console avec F12 dans ton navigateur. C'est là que tu vois toutes les erreurs JS de ta page ET ce que tu affiches avec console.log. Indispensable pour déboguer !

✓

Résumé — Ce qu'il faut retenir

✅ JS s'intègre avec <script src="..."></script> avant </body>

✅ const = valeur fixe | let = valeur qui change

✅ function nom() {} crée une fonction réutilisable

✅ if / else = décisions | for / while = répétitions

✅ Le DOM : getElementById pour cibler un élément HTML

✅ addEventListener('click', ...) pour réagir aux actions

✅ console.log() pour déboguer → F12 pour voir la console

Apprends le JavaScript jeu vidéo