Le JavaScript (JS) est le langage de programmation du web. Alors que le HTML structure ta page et le CSS la colorie, le JavaScript la rend vivante et interactive : boutons qui réagissent, animations, formulaires qui vérifient les infos, menus qui s'ouvrent...
Le navigateur comprend le JavaScript directement, sans avoir besoin d'installer quoi que ce soit !
HTML La structure — les briques
CSS Le style — les couleurs
JavaScript Le comportement — l'action !
S
Comment intégrer du JavaScript ?
On ajoute le JavaScript dans une page HTML grâce à la balise <script>. On la place en général juste avant la fermeture de </body>.
<!DOCTYPE html><html><body><h1>Ma page</h1><!-- Le JS se met juste avant /body --><script>console.log("Bonjour depuis JavaScript !");
</script></body></html>
💡Pour voir le résultat d'un console.log(), ouvre la console du navigateur avec F12 puis clique sur l'onglet Console.
Les bases du langage
V
Les variables
Une variable est une boîte qui sert à stocker une valeur. En JavaScript moderne, on utilise let pour une valeur qui peut changer, et const pour une valeur fixe.
letage=14; // peut changerconstprénom="Lucas"; // ne change pasletconnecté=true; // vrai ou fauxconsole.log(prénom); // → Lucasconsole.log(age+1); // → 15
let valeur modifiable peut être réassignée
const valeur fixe ne peut pas changer
⚠Évite l'ancien var — il cause des bugs bizarres. Utilise toujours let ou const !
T
Les types de données
JavaScript peut stocker différents types de valeurs dans une variable :
lettexte="Bonjour !"; // String (texte)letnombre=42; // Number (entier)letdécimal=3.14; // Number (décimal)letvrai=true; // Booleanletfaux=false; // Booleanletrien=null; // Null (vide volontairement)
💡Pour coller des variables à du texte, utilise les template literals avec des backticks ` :
const msg = `Bonjour ${prénom}, tu as ${age} ans !`;
O
Les opérateurs
Les opérateurs permettent de faire des calculs et des comparaisons.
⚠Utilise toujours === (triple égal) pour comparer — jamais == (double). Le triple égal évite des comparaisons surprenantes !
Structures de contrôle
C
Les conditions : if / else
Une condition permet d'exécuter du code seulement si quelque chose est vrai. Sinon, on peut prévoir un autre chemin avec else.
letage=16;
if (age>=18) {
console.log("Tu es majeur !");
} else if (age>=13) {
console.log("Tu es ado !"); // ← ce bloc s'exécute
} else {
console.log("Tu es enfant !");
}
Résultat dans la console
> Tu es ado !
Essaie toi-même !
← le résultat apparaît ici
B
Les boucles : for
Une boucle permet de répéter du code plusieurs fois sans tout réécrire. La boucle for est la plus courante.
// Compter de 1 à 5for (leti=1; i<=5; i++) {
console.log("Tour n°"+i);
}
// → Tour n°1// → Tour n°2// → Tour n°3 ...
💡La boucle for se lit : démarre à i=1, continue tant que i ≤ 5, et augmente i de 1 à chaque tour (i++).
Essaie toi-même !
← le résultat apparaît ici
Fonctions & tableaux
F
Les fonctions
Une fonction est un bloc de code qu'on peut réutiliser autant de fois qu'on veut. On la définit une fois, et on l'appelle quand on en a besoin.
// Définir une fonctionfunctiondireBonjour(prénom) {
console.log(`Salut, ${prénom} !`);
}
// Appeler la fonctiondireBonjour("Emma"); // → Salut, Emma !direBonjour("Hugo"); // → Salut, Hugo !
// Fonction qui retourne une valeurfunctionaddition(a, b) {
returna+b;
}
letrésultat=addition(4, 7);
console.log(résultat); // → 11
Essaie toi-même !
← le résultat apparaît ici
T
Les tableaux (Arrays)
Un tableau permet de stocker plusieurs valeurs dans une seule variable. On les écrit entre crochets [ ].
constfruits= ["pomme", "banane", "kiwi"];
console.log(fruits[0]); // → pomme (index commence à 0 !)console.log(fruits[2]); // → kiwiconsole.log(fruits.length); // → 3 (nombre d'éléments)// Parcourir un tableau avec for...offor (letfruitoffruits) {
console.log("J'aime les "+fruit+"s");
}
⚠Les index commencent à 0, pas à 1 ! Le premier élément est fruits[0], le deuxième fruits[1]...
O
Les objets
Un objet regroupe plusieurs informations liées ensemble. On les écrit avec des accolades { } sous forme de clé : valeur.
💡Un objet c'est comme une fiche d'identité : chaque ligne est une propriété (clé) associée à une valeur. On y accède avec le . (point).
Interagir avec la page web
D
Modifier la page : le DOM
Le DOM (Document Object Model) est la représentation de ta page HTML en JavaScript. Grâce à lui, tu peux lire, modifier ou créer des éléments directement depuis ton code JS !
// Sélectionner un élément par son idconsttitre=document.getElementById("mon-titre");
// Modifier le textetitre.textContent="Nouveau titre !";
// Modifier le style CSStitre.style.color="red";
// Sélectionner par classe (retourne plusieurs éléments)constparagraphes=document.querySelectorAll(".texte");
💡getElementById("id") sélectionne un seul élément. querySelectorAll(".classe") sélectionne tous ceux qui correspondent — comme un sélecteur CSS !
E
Les événements
Un événement est une action de l'utilisateur : un clic, une frappe clavier, le survol d'un élément... On peut écouter ces événements avec addEventListener.
// Dans le HTML :<buttonid="mon-btn">Clique-moi !</button><pid="message"></p>// Dans le JavaScript :constbtn=document.getElementById("mon-btn");
constmsg=document.getElementById("message");
btn.addEventListener("click", function() {
msg.textContent="Tu as cliqué ! 🎉";
});
Démo en direct
← en attente d'un clic...
💡Les événements les plus courants : "click", "mouseover", "keydown", "input", "submit".
E
Exemple complet : un compteur
Voilà un exemple qui regroupe tout ce qu'on a vu : variables, conditions, DOM et événements. Un vrai mini-projet !