TP JavaScript Asynchrone – Mini
Quiz Mathématique
Objectifs pédagogiques :
1. Comprendre callbacks, Promises, fetch et async/await.
2. Manipuler le DOM pour créer et mettre à jour des éléments.
3. Comprendre et justifier l’ordre d’exécution dans le navigateur.
Contexte
Vous allez créer un mini quiz mathématique qui :
• Affiche des questions dans le DOM.
• Permet à l’utilisateur de répondre via un bouton.
• Inclut des opérations asynchrones pour observer l’ordre
d’exécution.
Étape 1 : Préparer la page
1. Créez [Link] avec un <div id="quiz"></div> et <script
src="[Link]"></script>.
2. Créez [Link] et ouvrez la page dans le navigateur.
Question à répondre dans le code (en commentaire) :
// Question : Quand le navigateur exécute [Link], que voit-on
d’abord : la page HTML vide ou le script qui s’exécute ?
// Réponse :……………
1
Étape 2 : Callback simple
1. Créez une fonction afficherQuestion(question, callback) :
o Affiche question dans le DOM.
o Crée un bouton “Question suivante” qui déclenche le
callback.
2. Ajoutez une première question et un callback qui affiche un
message dans la console.
Questions à répondre dans le code :
// Question 1 : Quand l'utilisateur clique sur le bouton, que
se passe-t-il dans le DOM et la console ?
// Question 2 : Si le callback était appelé directement sans
attendre le clic, que se passerait-il ?
// Réponses : …..
Étape 3 : Promises
1. Créez une fonction calculerResultat(a, b) qui :
o Retourne une promesse résolue après 1 seconde avec le
résultat a + b.
o Affiche le résultat dans le DOM et dans la console.
2. Chainez plusieurs calculs pour observer l’ordre d’exécution.
Questions à répondre dans le code :
// Question 3 : Dans quel ordre apparaissent les résultats
dans le DOM et la console si on enchaine plusieurs Promises ?
// Question 4 : Les Promises sont-elles des macro-tâches ou
micro-tâches ?
// Réponses : ………….
2
Étape 4 : fetch / API
1. Soit utiliser Open Trivia DB :
2. fetch("[Link]
&category=19")
soit un tableau local de questions.
3. Affichez la question dans le DOM avec un bouton “Répondre”.
Questions à répondre dans le code :
// Question 5 : Quand est-ce que la question s’affiche par
rapport aux [Link] qui viennent après le fetch ?
// Question 6 : Pourquoi l’appel fetch n’empêche-t-il pas
l’exécution du code suivant ?
// Réponses : …..
Étape 5 : async / await
1. Créez une fonction async function chargerQuestion() :
o Attendez la récupération de la question.
o Affichez la question dans le DOM.
Questions à répondre dans le code :
// Question 7 : Le code après await bloque-t-il le navigateur
? Pourquoi ou pourquoi pas ?
// Question 8 : Comment l’ordre d’exécution de ce code
diffère-t-il d’une chaîne de Promises avec then ?
// Réponses : …..
Étape 6 : Combiner tous les concepts
1. Dans [Link], écrivez dans cet ordre :
o [Link]("Début du quiz")
o Une Promise simple
o fetch ou async/await pour une question
3
o [Link]("Fin du quiz")
Questions à répondre dans le code :
// Question 9 : Quel message apparaît en premier, deuxième,
etc., dans la console ?
// Question 10 : Quelle est la différence entre macro-tâches
et micro-tâches observée ici ?
// Réponses : ….
Étape 7 : Mini Quiz final
1. Créez un tableau de 3 questions.
2. Affichez-les une par une avec un délai de 2 secondes entre
chaque question (promesse + await).
3. Ajoutez un bouton “Répondre” pour chaque question.
4. L’utilisateur saisit sa réponse via prompt, affichée dans le DOM.
Questions à répondre dans le code :
// Question 11 : Dans quel ordre apparaissent les questions et
réponses dans le DOM et la console ?
// Question 12 : Que se passe-t-il si l’utilisateur clique
très vite sur les boutons avant que le delai ne soit écoulé ?
// Réponses : …..