📋 Énoncés des TPs - BOM, Méthodes Tableaux et Chaînes

---

TP 1 : L’objet Window

Vous devez explorer et utiliser l’objet window.

Exercice 1.1 : Dimensions de la fenêtre

• Affichez la largeur et la hauteur de la fenêtre avec innerWidth et innerHeight
• Affichez la largeur et la hauteur totales avec outerWidth et outerHeight
• Testez en redimensionnant la fenêtre

Exercice 1.2 : Position du scroll

• Affichez la position du scroll avec scrollX et scrollY
• Créez une page longue avec beaucoup de contenu
• Testez en scrollant

Exercice 1.3 : Redimensionnement de fenêtre

• Écoutez l’événement resize
• Affichez les nouvelles dimensions à chaque redimensionnement
• Testez en redimensionnant

Exercice 1.4 : Scroll

• Écoutez l’événement scroll
• Affichez la position du scroll à chaque scroll
• Créez une barre de progression basée sur le scroll

---

TP 2 : L’objet Navigator

Vous devez explorer l’objet navigator.

Exercice 2.1 : Infos du navigateur

• Affichez la langue avec navigator.language
• Affichez le user agent avec navigator.userAgent
• Affichez la plateforme avec navigator.platform

Exercice 2.2 : Connexion internet

• Affichez l’état de la connexion avec navigator.onLine
• Écoutez les événements online et offline
• Affichez un message quand la connexion change

Exercice 2.3 : Infos matériel

• Affichez le nombre de processeurs avec navigator.hardwareConcurrency
• Affichez la mémoire disponible avec navigator.deviceMemory

Exercice 2.4 : Détecter le navigateur

• Utilisez navigator.userAgent pour détecter le navigateur
• Affichez “Chrome”, “Firefox”, “Safari” ou “Autre”

---

TP 3 : L’objet Location

Vous devez explorer et modifier l’objet location.

Exercice 3.1 : Lire l’URL

• Affichez l’URL complète avec location.href
• Affichez le nom de domaine avec location.hostname
• Affichez le chemin avec location.pathname
• Affichez les paramètres avec location.search

Exercice 3.2 : Extraire les paramètres

• Créez une URL avec des paramètres : ?nom=Eva&age=25
• Utilisez URLSearchParams pour extraire les paramètres
• Affichez les valeurs

Exercice 3.3 : Redirection

• Créez un bouton “Aller à Google”
• Utilisez location.href pour rediriger
• Testez la redirection

Exercice 3.4 : Recharger la page

• Créez un bouton “Recharger”
• Utilisez location.reload() pour recharger
• Testez

Exercice 3.5 : Lire l’ancre (hash)

• Créez une URL avec une ancre : #section-contact
• Lisez l’ancre avec location.hash
• Scroller vers la section correspondante

---

TP 4 : L’objet History

Vous devez utiliser l’objet history.

Exercice 4.1 : Naviguer dans l’historique

• Créez un bouton “Retour”
• Utilisez history.back() pour revenir à la page précédente
• Testez

Exercice 4.2 : Boutons de navigation

• Créez un bouton “Retour” avec history.back()
• Créez un bouton “Suivant” avec history.forward()
• Testez les deux

Exercice 4.3 : Vérifier l’historique

• Affichez le nombre de pages dans l’historique avec history.length
• Affichez un message si l’utilisateur peut revenir

---

TP 5 : L’objet Screen

Vous devez explorer l’objet screen.

Exercice 5.1 : Dimensions de l’écran

• Affichez la largeur et la hauteur de l’écran avec screen.width et screen.height
• Affichez les dimensions disponibles avec screen.availWidth et screen.availHeight

Exercice 5.2 : Profondeur de couleur

• Affichez la profondeur de couleur avec screen.colorDepth
• Affichez le résultat

Exercice 5.3 : Adapter le layout

• Utilisez screen.width pour adapter le layout
• Affichez “Mobile” si < 768px
• Affichez “Tablette” si < 1024px
• Affichez “Desktop” sinon

---

TP 6 : Dialogues - alert, confirm, prompt

Vous devez utiliser les dialogues du navigateur.

Exercice 6.1 : Alert

• Créez un bouton qui affiche une alerte
• Testez

Exercice 6.2 : Confirm

• Créez un bouton qui demande une confirmation
• Affichez “OK” ou “Annulé” selon la réponse
• Testez

Exercice 6.3 : Prompt

• Créez un bouton qui demande un nom
• Affichez le nom saisi
• Testez

Exercice 6.4 : Chaîner les dialogues

• Demandez le nom avec prompt()
• Demandez la confirmation avec confirm()
• Affichez le résultat

---

TP 7 : Temporisation - setTimeout

Vous devez utiliser setTimeout().

Exercice 7.1 : Délai simple

• Créez un bouton
• Au clic, affichez un message après 3 secondes
• Testez

Exercice 7.2 : Annuler un délai

• Créez un bouton “Démarrer” qui lance un délai de 5 secondes
• Créez un bouton “Annuler” qui annule le délai
• Utilisez clearTimeout()
• Testez

Exercice 7.3 : Minuteur

• Créez un minuteur qui compte de 10 à 0
• Affichez le temps restant
• Affichez “Temps écoulé” à la fin
• Testez

---

TP 8 : Temporisation - setInterval

Vous devez utiliser setInterval().

Exercice 8.1 : Intervalle simple

• Créez un intervalle qui affiche un message toutes les 2 secondes
• Testez

Exercice 8.2 : Arrêter un intervalle

• Créez un bouton “Démarrer” qui lance un intervalle
• Créez un bouton “Arrêter” qui arrête l’intervalle
• Utilisez clearInterval()
• Testez

Exercice 8.3 : Horloge

• Créez une horloge qui affiche l’heure actuelle
• Mettez à jour chaque seconde
• Testez

Exercice 8.4 : Animation avec intervalle

• Créez une barre qui se remplit progressivement
• Utilisez setInterval() pour augmenter la largeur
• Arrêtez quand elle est pleine
• Testez

---

TP 9 : Méthodes de Tableaux - Ajouter/Supprimer

Vous devez utiliser les méthodes pour ajouter/supprimer des éléments.

Exercice 9.1 : push() et pop()

• Créez un tableau fruits = ['pomme', 'banane']
• Utilisez push() pour ajouter ‘orange’
• Utilisez pop() pour supprimer le dernier élément
• Affichez le résultat

Exercice 9.2 : shift() et unshift()

• Créez un tableau de nombres
• Utilisez shift() pour supprimer le premier élément
• Utilisez unshift() pour ajouter un élément au début
• Affichez le résultat

Exercice 9.3 : slice()

• Créez un tableau de 10 nombres
• Utilisez slice() pour extraire les 3 premiers
• Utilisez slice() pour extraire les 3 derniers
• Vérifiez que le tableau original n’est pas modifié

Exercice 9.4 : splice()

• Créez un tableau de fruits
• Utilisez splice() pour supprimer 2 éléments à partir de l’index 1
• Utilisez splice() pour ajouter des éléments
• Affichez le résultat

---

TP 10 : Méthodes de Tableaux - Chercher

Vous devez utiliser les méthodes pour chercher des éléments.

Exercice 10.1 : indexOf()

• Créez un tableau de nombres
• Utilisez indexOf() pour trouver la position d’un nombre
• Testez avec un nombre qui existe et un qui n’existe pas

Exercice 10.2 : includes()

• Créez un tableau de fruits
• Utilisez includes() pour vérifier si une fruit existe
• Testez avec un fruit qui existe et un qui n’existe pas

Exercice 10.3 : find()

• Créez un tableau d’utilisateurs
• Utilisez find() pour trouver le premier utilisateur avec age > 25
• Testez

Exercice 10.4 : findIndex()

• Utilisez findIndex() pour trouver l’index du premier utilisateur avec age > 25
• Testez

---

TP 11 : Méthodes de Chaînes - Transformation

Vous devez utiliser les méthodes pour transformer des chaînes.

Exercice 11.1 : toLowerCase() et toUpperCase()

• Créez une chaîne texte = "Bonjour JavaScript"
• Convertissez en minuscules
• Convertissez en majuscules
• Affichez les résultats

Exercice 11.2 : trim()

• Créez une chaîne avec des espaces : " Bonjour "
• Utilisez trim() pour supprimer les espaces
• Affichez le résultat

Exercice 11.3 : split()

• Créez une chaîne : "pomme,banane,orange"
• Utilisez split() pour convertir en tableau
• Affichez le résultat

Exercice 11.4 : replace()

• Créez une chaîne : "Bonjour JavaScript"
• Utilisez replace() pour remplacer “JavaScript” par “JS”
• Utilisez replaceAll() pour remplacer toutes les occurrences
• Affichez les résultats

---

TP 12 : Méthodes de Chaînes - Vérification

Vous devez utiliser les méthodes pour vérifier des chaînes.

Exercice 12.1 : includes()

• Créez une chaîne texte = "Bonjour JavaScript"
• Utilisez includes() pour vérifier si elle contient “Java”
• Testez avec un mot qui existe et un qui n’existe pas

Exercice 12.2 : startsWith() et endsWith()

• Utilisez startsWith() pour vérifier si elle commence par “Bon”
• Utilisez endsWith() pour vérifier si elle finit par “Script”
• Testez

Exercice 12.3 : charAt() et charCodeAt()

• Créez une chaîne
• Utilisez charAt() pour obtenir le caractère à la position 0
• Utilisez charCodeAt() pour obtenir le code du caractère
• Affichez les résultats

Exercice 12.4 : length

• Créez une chaîne
• Affichez sa longueur avec length
• Testez avec différentes chaînes

---

TP 13 : Méthodes de Chaînes - Formatage

Vous devez utiliser les méthodes pour formater des chaînes.

Exercice 13.1 : repeat()

• Créez une chaîne "Ha"
• Utilisez repeat() pour la répéter 5 fois
• Affichez le résultat

Exercice 13.2 : padStart()

• Créez un numéro : "42"
• Utilisez padStart() pour ajouter des zéros au début (5 caractères)
• Affichez le résultat

Exercice 13.3 : padEnd()

• Créez un numéro : "42"
• Utilisez padEnd() pour ajouter des zéros à la fin (5 caractères)
• Affichez le résultat

Exercice 13.4 : slice() et substring()

• Créez une chaîne
• Utilisez slice() pour extraire une partie
• Utilisez substring() pour extraire une partie
• Comparez les résultats

---

TP 14 : Projet - Générateur de Bulles

Créez une animation interactive où des bulles apparaissent et disparaissent.

Fonctionnalités requises :

1. Créer des bulles :

   • Toutes les secondes, créez une nouvelle bulle
   • Taille aléatoire (100-200px)
   • Position aléatoire

2. Animation :

   • Les bulles montent vers le haut
   • Direction aléatoire (gauche ou droite)
   • Durée de 8 secondes

3. Interaction :

   • Clic sur une bulle = +1 au compteur
   • Afficher le compteur en gros chiffres

4. Suppression :

   • Après 8 secondes, la bulle disparaît
   • Ou au clic

Bonus :

• Changer la couleur des bulles
• Ajouter des effets de rotation
• Augmenter la vitesse avec le temps
• Ajouter du son au clic

---

TP 15 : Projet - Minuteur Interactif

Créez un minuteur avec contrôles.

Fonctionnalités requises :

1. Affichage :

   • Afficher le temps en format MM:SS
   • Afficher une barre de progression

2. Contrôles :

   • Bouton “Démarrer”
   • Bouton “Pause”
   • Bouton “Réinitialiser”
   • Champ pour saisir le temps initial

3. Fonctionnalité :

   • Compte à rebours
   • Afficher “Temps écoulé” à la fin
   • Son ou alerte à la fin

Bonus :

• Afficher le temps en HH:MM:SS
• Ajouter un chronomètre (compte vers le haut)
• Sauvegarder le temps dans localStorage
• Afficher l’historique des minuteurs

---

TP 16 : Projet - Horloge Numérique

Créez une horloge qui affiche l’heure actuelle.

Fonctionnalités requises :

1. Affichage :

   • Afficher l’heure en format HH:MM:SS
   • Afficher la date (jour, mois, année)

2. Mise à jour :

   • Mettre à jour chaque seconde
   • Utiliser setInterval()

3. Styles :

   • Affichage clair et lisible
   • Fond sombre ou clair

Bonus :

• Ajouter une horloge analogique
• Afficher le fuseau horaire
• Afficher l’heure dans différents fuseaux
• Afficher le jour de la semaine

---

📌 Conseils pour réaliser les TPs

✅ TP 1-5 : Explorez les objets du BOM ✅ TP 6-8 : Maîtrisez les dialogues et la temporisation ✅ TP 9-13 : Apprenez les méthodes de tableaux et chaînes ✅ TP 14-16 : Combinez tout pour des projets complets

✅ Testez chaque exercice dans la console ✅ Utilisez console.log() pour déboguer ✅ Consultez la documentation MDN ✅ Commencez simple, puis ajoutez les bonus