Chapitre 3 – Structure de base et $(document).ready()
L’une des erreurs les plus fréquentes en jQuery (et en JavaScript) est d’exécuter du code trop tôt, avant que les éléments HTML existent réellement dans la page. Dans ce chapitre, tu vas comprendre ce qu’est le DOM, ce que signifie “DOM prêt”, et comment écrire une structure de base propre et fiable.
1) Comprendre le DOM (très simplement)
Quand le navigateur charge une page HTML, il lit le code et construit une “carte” interne. Cette carte s’appelle le DOM (Document Object Model).
Le DOM est la version “programmable” de ton HTML. C’est ce que JavaScript/jQuery manipule : ajouter une classe, modifier du texte, écouter un clic, etc.
2) Le problème classique : le code s’exécute avant le DOM
Imagine cette page : ton script est dans le <head>, mais ton bouton n’est défini que plus bas dans le <body>.
Exemple (mauvaise pratique si tu n’as pas de protection) :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// ⚠️ Le navigateur exécute ça immédiatement pendant le chargement du head
$('#btn').on('click', function(){
alert('Clic !');
});
</script>
</head>
<body>
<button id="btn">Clique moi</button>
</body>
</html>3) Solution n°1 : $(document).ready()
jQuery propose un mécanisme simple : attendre que le DOM soit prêt, puis exécuter ton code.
Version “classique” :
$(document).ready(function () {
// Ton code jQuery ici
});Cette fonction signifie : “Quand le navigateur a fini de construire le DOM, exécute ce code.”
4) Solution n°2 : la version courte $(function(){...})
jQuery propose une écriture plus courte, très utilisée :
$(function () {
// Ton code jQuery ici
});Cette version est strictement équivalente à $(document).ready(...).
5) Solution n°3 : placer les scripts à la fin du body
Une autre approche consiste à placer les scripts juste avant </body>. Ainsi, le HTML a déjà été lu.
<body>
<button id="btn">Clique moi</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="app.js"></script>
</body>6) La structure “propre” recommandée (standard de cours)
Voici une structure simple, lisible et fiable pour commencer :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page jQuery</title>
</head>
<body>
<!-- 1) Ton HTML -->
<button id="btn">Tester</button>
<!-- 2) jQuery d’abord -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 3) Ton script ensuite -->
<script>
$(function () {
$('#btn').on('click', function () {
alert('OK !');
});
});
</script>
</body>
</html>7) Erreurs fréquentes (et comment les reconnaître)
Erreur A : $ is not defined
Cause : jQuery n’est pas chargé (ou pas chargé avant ton script).
Erreur B : le bouton ne réagit pas
Cause : ton code s’exécute avant que l’élément existe dans le DOM.
Erreur C : sélecteur incorrect
Cause : tu as écrit $('.btn') alors que ton élément a un id #btn.
Exercice (progressif) – DOM prêt
Objectif : constater le problème, puis le corriger.
- Place ton script dans le <head> (sans ready) et observe : le clic ne marche pas.
- Ajoute $(function(){ ... }) et constate : le clic marche.
- Bonus : ajoute un console.log pour afficher “DOM prêt”.
Correction
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exercice DOM prêt</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
console.log('DOM prêt');
$('#btn').on('click', function () {
alert('Clic détecté');
});
});
</script>
</head>
<body>
<button id="btn">Clique</button>
</body>
</html>Résumé du chapitre
- Le DOM est la version “programmable” de ton HTML.
- Un bug fréquent : exécuter du jQuery avant que les éléments existent.
- Solution recommandée : $(function(){ ... }).
- Autre solution : scripts en bas de page, mais garder ready est une bonne habitude.