TP JavaScript - Structures Conditionnelles et Boucles 24/12/2025, 23:01
TP JavaScript
Master 1 Art et Programmation
Séances 2-3 : Structures Conditionnelles et Boucles
INBA - Institut National des Beaux-Arts
Culture Digitale
Année 2025-2026
Introduction
Ce TP vous permet de consolider vos connaissances sur les structures conditionnelles et les boucles en JavaScript. Vous
pratiquerez les instructions if...else, switch et les boucles for, while, do...while.
Pour chaque exercice :
Testez votre code dans la console du navigateur (F12) ou avec [Link]
Vérifiez que tous les cas de test fonctionnent correctement
Respectez l'indentation et la lisibilité du code
Ajoutez des commentaires si nécessaire
Partie 1 : Structures Conditionnelles
about:srcdoc Page 1 of 10
TP JavaScript - Structures Conditionnelles et Boucles 24/12/2025, 23:01
Exercice 1 : Contrôle d'accès Facile
Objectif : Utiliser if...else simple pour vérifier une condition basée sur l'âge.
Énoncé :
Créez un programme qui :
1. Demande l'âge de l'utilisateur avec prompt()
2. Convertit la réponse en nombre avec Number()
3. Si l'âge est >= 18, affiche "Accès autorisé"
4. Sinon, affiche "Accès refusé - Vous devez avoir 18 ans"
5. Affiche le message avec alert()
Exemples d'exécution :
• Input: 20 → Output: "Accès autorisé"
• Input: 15 → Output: "Accès refusé - Vous devez avoir 18 ans"
Astuce : Utilisez Number() pour convertir le texte en nombre avant de le comparer.
about:srcdoc Page 2 of 10
TP JavaScript - Structures Conditionnelles et Boucles 24/12/2025, 23:01
Exercice 2 : Calculateur d'IMC Moyen
Objectif : Utiliser if...else if...else avec calculs mathématiques.
Énoncé :
Créez un programme qui :
1. Demande le poids (en kg) et la taille (en mètres) avec prompt()
2. Calcule l'IMC : poids / (taille ** 2)
3. Affiche l'interprétation selon le résultat :
Condition Interprétation
IMC < 18.5 "Insuffisance pondérale"
IMC < 25 "Poids normal"
IMC < 30 "Surpoids"
IMC >= 30 "Obésité"
Affichage : "IMC: 24.50 - Poids normal"
Astuce : Utilisez .toFixed(2) pour arrondir à 2 décimales.
about:srcdoc Page 3 of 10
TP JavaScript - Structures Conditionnelles et Boucles 24/12/2025, 23:01
Exercice 3 : Convertisseur de notes Moyen
Objectif : Utiliser switch pour tester plusieurs valeurs.
Énoncé :
Créez un programme qui :
1. Demande une note sur 20
2. Convertit la note en lettre selon le barème :
Note Lettre
>= 18 A
>= 16 B
>= 14 C
>= 12 D
>= 10 E
< 10 F
Étape 2 : Utilise switch avec la lettre pour afficher un message :
A : "Excellent !"
B : "Très bien !"
C : "Bien"
D : "Assez bien"
E : "Passable"
F : "Insuffisant"
Exemple : Note 18 → Lettre A → "Excellent !"
about:srcdoc Page 4 of 10
TP JavaScript - Structures Conditionnelles et Boucles 24/12/2025, 23:01
Exercice 4 : Jeu de devinette Moyen
Objectif : Combiner conditions et logique.
Énoncé :
Créez un jeu qui :
1. Définit un nombre secret : let secret = 7;
2. Demande à l'utilisateur de deviner le nombre
3. Compare la réponse :
Si égal : "Bravo ! Vous avez trouvé !"
Si trop petit : "Trop petit !"
Si trop grand : "Trop grand !"
Bonus : Affiche la différence : "Vous étiez à X du résultat"
Exemples :
• Devinette: 5 → "Trop petit ! Vous étiez à 2 du résultat"
• Devinette: 7 → "Bravo ! Vous avez trouvé !"
• Devinette: 10 → "Trop grand ! Vous étiez à 3 du résultat"
Exercice 5 : Saison de l'année Moyen
Objectif : Utiliser switch avec cas groupés.
Énoncé :
Créez un programme qui :
1. Demande un numéro de mois (1-12)
2. Utilise switch pour déterminer la saison :
Mois 12, 1, 2 : "Hiver"
Mois 3, 4, 5 : "Printemps"
Mois 6, 7, 8 : "Été"
Mois 9, 10, 11 : "Automne"
Affichage : "Mois 3 : Printemps"
Astuce : Groupez les cas qui ont le même résultat (case groupées).
about:srcdoc Page 5 of 10
TP JavaScript - Structures Conditionnelles et Boucles 24/12/2025, 23:01
Exercice 6 : Placement de pixels Difficile
Objectif : Conditions complexes pour arts numériques.
Énoncé :
Créez un programme qui :
1. Définit la position d'un pixel : x = 150, y = 200
2. Définit la taille du canvas : largeur = 400, hauteur = 400
3. Détermine dans quelle zone le pixel se trouve :
"Centre" si x entre 150-250 ET y entre 150-250
"Bord gauche" si x < 50
"Bord droit" si x > 350
"Bord haut" si y < 50
"Bord bas" si y > 350
"Zone normale" sinon
Affichage : "Position (150, 200) : Zone normale"
Partie 2 : Boucles
Exercice 7 : Table de multiplication Facile
Objectif : Utiliser une boucle for pour générer une table de multiplication.
Énoncé :
Créez un programme qui :
1. Demande un nombre à l'utilisateur (ex: 7)
2. Utilise une boucle for pour afficher la table de multiplication de 1 à 10
3. Affiche chaque ligne : "7 x 1 = 7", "7 x 2 = 14", etc.
Exemple pour 7 :
7x1=7
7 x 2 = 14
7 x 3 = 21
... jusqu'à 7 x 10 = 70
Astuce : Utilisez for (let i = 1; i <= 10; i++)
about:srcdoc Page 6 of 10
TP JavaScript - Structures Conditionnelles et Boucles 24/12/2025, 23:01
Exercice 8 : Somme des nombres Facile
Objectif : Utiliser une boucle pour accumuler des valeurs.
Énoncé :
Créez un programme qui :
1. Demande un nombre n à l'utilisateur
2. Calcule la somme des nombres de 1 à n avec une boucle
3. Affiche le résultat : "La somme de 1 à 5 est 15"
Exemples :
• n = 5 → 1+2+3+4+5 = 15
• n = 10 → 1+2+3+...+10 = 55
• n = 100 → 5050
Astuce : Déclarez une variable let somme = 0; puis ajoutez les valeurs dans la boucle.
Exercice 9 : Affichage d'un carré avec boucles imbriquées Moyen
Objectif : Utiliser des boucles imbriquées pour créer des formes.
Énoncé :
Créez un programme qui :
1. Demande une taille (ex: 5)
2. Affiche un carré de cette taille avec des caractères "*"
3. Utilise deux boucles for imbriquées
Exemple pour 5 :
* * * * *
* * * * *
* * * * *
* * * * *
* * * * *
Astuce : La première boucle pour les lignes, la deuxième pour les colonnes. Utilisez [Link]() pour
chaque ligne.
about:srcdoc Page 7 of 10
TP JavaScript - Structures Conditionnelles et Boucles 24/12/2025, 23:01
Exercice 10 : Triangle de nombres Moyen
Objectif : Combiner conditions et boucles imbriquées.
Énoncé :
Créez un programme qui :
1. Demande une taille (ex: 5)
2. Affiche un triangle croissant avec des nombres
3. Chaque ligne i affiche les nombres de 1 à i
Exemple pour 5 :
1
1 2
1 2 3
1 2 3 4
1 2 3 4 5
Exercice 11 : Boucle while avec validation Moyen
Objectif : Utiliser une boucle while pour valider l'entrée utilisateur.
Énoncé :
Créez un programme qui :
1. Demande un mot de passe à l'utilisateur
2. Utilise une boucle while pour répéter jusqu'au bon mot de passe
3. Le mot de passe correct est "Master2025"
4. Affiche "Accès autorisé" quand c'est correct
5. Compte le nombre de tentatives
Exemple :
- Tentative 1: "test" → "Incorrect, essayez à nouveau"
- Tentative 2: "Master2025" → "Accès autorisé ! 2 tentatives"
Astuce : Déclarez une variable let tentatives = 0; que vous incrémentez à chaque boucle.
about:srcdoc Page 8 of 10
TP JavaScript - Structures Conditionnelles et Boucles 24/12/2025, 23:01
Exercice 12 : Animation avec boucles et conditions Difficile
Objectif : Combiner boucles et conditions pour une animation.
Énoncé :
Créez un programme qui :
1. Simule 20 frames d'animation
2. Position initiale : x = 0, y = 200
3. Vitesse : vitesseX = 10, vitesseY = 0
4. Limites du canvas : largeur = 400, hauteur = 400
5. À chaque frame :
Ajoute la vitesse à la position
Si x dépasse la largeur OU x < 0, inverse vitesseX
Si y dépasse la hauteur OU y < 0, inverse vitesseY
Affiche la position tous les 5 frames
Astuce : Utilisez une boucle for de 1 à 20, avec une condition if (frame % 5 === 0) pour afficher.
Conseils Importants
Testez chaque exercice : Testez avec plusieurs cas (cas normaux, cas limites, cas d'erreur)
Utilisez la console : F12 ou [Link] pour vérifier votre code
Lisez attentivement : Assurez-vous de comprendre tous les cas de test
Indentation : Un code bien formaté est plus facile à déboguer
Noms explicites : Vos variables doivent être claires et compréhensibles
Attention aux boucles infinies : Vérifiez que vos conditions de fin sont correctes
Critères de Notation
Critère Pourcentage
Correction du code 50%
Propreté et lisibilité 30%
Complétude des exercices 20%
Bon courage ! N'hésitez pas à poser des questions si vous êtes bloqué.
about:srcdoc Page 9 of 10