Variables, fonctions, manipulation du DOM, événements, débogage.
Objectif : Ajouter de vraies interactions à une page sans framework.
C
Cours
Variables, types et fonctions
JavaScript est le seul langage de programmation natif des navigateurs.
// Variables (utilise let et const, pas var)
const nom = "Martin"; // const = ne change pas
let age = 25; // let = peut changer
age = 26; // OK
// nom = "Paul"; // Erreur !
// Types
const texte = "Bonjour"; // string
const nombre = 42; // number
const valide = true; // boolean
const liste = [1, 2, 3]; // array
const personne = { // object
prenom: "Martin",
age: 25
};
// Fonctions
function direBonjour(prenom) {
return "Bonjour " + prenom + " !";
}
// Fonction fléchée (moderne)
const carre = (n) => n * n;
console.log(direBonjour("Marie")); // "Bonjour Marie !"
console.log(carre(5)); // 25
C
Cours
Manipuler le DOM
Le DOM (Document Object Model) est la représentation de ta page HTML en objets JS. Tu peux la modifier en temps réel.
// Sélectionner des éléments
const titre = document.querySelector("h1");
const tousLesPar = document.querySelectorAll("p");
const btnSoumet = document.getElementById("btn-submit");
// Modifier le contenu
titre.textContent = "Nouveau titre";
titre.innerHTML = "Titre avec du gras";
// Modifier le style
titre.style.color = "red";
// Ajouter / retirer une classe CSS
titre.classList.add("actif");
titre.classList.remove("inactif");
titre.classList.toggle("visible");
// Créer et ajouter un élément
const paragraphe = document.createElement("p");
paragraphe.textContent = "Nouveau paragraphe ajouté par JS";
document.body.appendChild(paragraphe);
C
Cours
Les événements
Les événements permettent de réagir aux actions de l'utilisateur.
const bouton = document.querySelector("#mon-bouton");
// Clic
bouton.addEventListener("click", function() {
alert("Tu as cliqué !");
});
// Saisie dans un input
const input = document.querySelector("#champ-nom");
input.addEventListener("input", (e) => {
console.log("Valeur :", e.target.value);
});
// Soumission de formulaire
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
e.preventDefault(); // Empêche le rechargement de la page
const nom = document.querySelector("#nom").value;
if (nom === "") {
alert("Le nom est obligatoire !");
return;
}
console.log("Formulaire envoyé pour :", nom);
});
T
Astuce
Déboguer avec la console
La console du navigateur est ton meilleur ami. Accès : F12 → onglet Console.
// Afficher des valeurs
console.log("valeur :", maVariable);
console.log({ nom, age, liste }); // Affiche un objet lisible
// Afficher une erreur en rouge
console.error("Quelque chose s'est mal passé");
// Afficher un tableau formaté
console.table([{nom: "A"}, {nom: "B"}]);
// Mesurer le temps
console.time("calcul");
// ... code à mesurer ...
console.timeEnd("calcul");
Astuce : dans la console, tu peux taper directement du JS et l'exécuter sur la page. Pratique pour tester rapidement.
P
Projet
Projet — Formulaire interactif
Ajoute un formulaire de contact interactif à ta page.
Fonctionnalités attendues
Formulaire avec : nom, email, message
Validation en JS avant envoi : tous les champs obligatoires, email au bon format
Affichage des erreurs en rouge sous chaque champ
Si tout est valide : afficher un message de succès, réinitialiser le formulaire
Le compteur de caractères du message mis à jour en temps réel
Bonus
Bouton "Retour en haut" qui apparaît après 300px de scroll
Menu mobile qui s'ouvre/ferme avec JS
Tu as terminé les leçons de cette séquence ?
Quiz — Séquence 5
Vérifie ta compréhension avant de passer à la suite. Réponds à toutes les questions, puis valide.