M3203 - Programmation objet et événementielle - TP3

Objectifs de la séance

  • Rappels sur la notion d'objet
  • Savoir créer et manipuler des classes en Javascript

Pré-requis

Exercice 1 : Vu, ou pas

Objets DOM tableaux boucles

Pour commencer, vous allez créer un objet représentant une vidéo avec quelques propriétés pour stocker son titre, ses acteurs et si vous l'avez vue ou non. Ensuite, vous afficherez ces informations dans la page HTML 

				

				
    
					
  1. Téléchargez le fichier ci-dessus et enregistrez-le
    2. 
					
  2. Écrivez un objet video qui possède ces propriétés :
						
      
							
    1. La propriété titre, une chaîne de caractères
      2. 
							
    2. La propriété acteurs, un tableau de chaînes de caractères, chaque élément étant le nom de l'un des acteurs de la vidéo
      3. 
							
    3. La propriété vu, un booléen indiquant si vous avez déjà vu la vidéo
						
    
					
    3. 
					
  3. Construisez une phrase du type "J'ai vu/Je n'ai pas vu la vidéo Y avec les acteurs A, B, C"
    4. 
					
  4. Affichez la phrase dans le corps du document HTML
    5. 
				


				


				

					
				

				


				

					

						


					

				
	


				





				
Exercice 2 : Compte à rebours

				
 Classes   Objets   DOM 


				Vous allez créer un compte à rebours qui va faire défiler les heures, minutes, secondes et centièmes de secondes sur la page HTML. Le compte à rebours sera défini par la classe CountDown que vous écrirez dans le fichier "countdown.js". La page HTML ne fera que créer un objet à partir de la classe, comme ceci :
				

					

				

				Et le CSS associé :
				

					

				

				
    
					
  1. Téléchargez les fichiers ci-dessus et enregistrez-les
    2. 
					
  2. Créez la classe CountDown dans le fichier countdown.js comme décrit ci-dessus.
    3. 
					
  3. Déclarez le constructeur qui prend en paramètre une seule variable  représentant le temps initial du compte à rebours (en secondes). Ensuite, dans le constructeur, initialisez les propriétés :
						
      
							
    1. time, le temps initial du compte à rebours en millisecondes, à partir de la valeur passée en paramètre
      2.  
							
    2. display, l'élément HTML d'identifiant countdown où est affiché le compte à rebours
      3.  
							
    3. intervalID, sans valeur au début, ce sera l'identifiant de l'intervalle de fonctionnement du compte à rebours
      4. 
						
    
					
    4. 
					
  4. Écrivez une méthode getHours qui renvoie les heures restantes dans le compte à rebours (voir l'explication en jaune en dessous)
    5. 
					
  5. Écrivez une méthode getMinutes qui renvoie les minutes restantes dans le compte à rebours
    6. 
					
  6. Écrivez une méthode getSeconds qui renvoie les secondes restantes dans le compte à rebours
    7. 
					
  7. Écrivez une méthode getHundredthSeconds qui renvoie les centièmes de secondes restants dans le compte à rebours
    8. 
					
  8. Écrivez la méthode timer qui va :
						
      
							
    1. Diminuer le temps this.time de 100 s'il est strictement positif
      2. 
							
    2. Afficher le temps en heures, minutes, secondes, centièmes de secondes dans l'élément this.display. Utilisez les méthodes que vous venez d'écrire.
      3. 
						
    
					
    9. 
					
  9. Écrivez la méthode start qui va lancer la méthode timer toutes les 100 millisecondes avec setInterval. Pensez à bind(this) !
    10. 
					
  10. Dans la méthode timer, arrêtez l'intervalle si le temps est égal à 0.
    11. 
					
  11. Dans le constructeur, ajoutez un appel à la méthode start.
    12. 

					
				

				
				


				

					
				

				


				

					

						

					

				
	


				


				
Exercice 3 : PhotoSwiper

				
 Classes   Objets   Évènements   DOM   Tableaux 

				Vous allez faire un carrousel d'images qui défileront automatiquement à intervalle régulier. On pourra arrêter le défilement en survolant l'image avec la souris et le reprendre en dégageant la souris. Les images comporteront une légende en surimpression. 
				Pour cela vous allez écrire deux classes :
				
    
					
  • La classe Photo qui représentera une image du carrousel
    • 
					
  • La classe PhotoSwiper qui représentera le carrousel animé
    • 
				
 

				La page HTML se contentera d'appeler le script où seront déclarées vos classes et de créer les images et le carrousel. Voici cette page :
				

					

				

				Et le CSS associé :
				

					

				

				
    
					
  1. Téléchargez les fichiers ci-dessus et enregistrez-les
    2. 
					
  2. Écrivez la classe Photo. Elle comporte seulement un constructeur qui prend en paramètre une url et une description et initialise les propriétés correspondantes
    3. 
					
  3. Déclarez la classe PhotoSwiper
    4. 
					
  4. Écrivez le constructeur de la classe prenant en paramètre un tableau de Photo et qui va :
						
      
							
    1. Initialiser la propriété album, le tableau de Photo 
      2. 
							
    2. Initialiser la propriété currentImg, l'image courante d'identifiant slideshow
      3. 
							
    3. Initialiser la propriété currentDescription, la description courante d'identifiant description
      4. 
							
    4. Initialiser la propriété counter qui représentera la position du carrousel à 0
      5. 
							
    5. Déclarez la propriété intervalID, l'identifiant de l'intervalle
      6. 
						
    
					
    5. 
					
  5. Écrivez la méthode swipe qui va :
						
      
							
    1. Incrémenter la propriété counter
      2. 
							
    2. Réinitialiser la propriété counter à 0 si on est arrivé à la dernière photo
      3. 
							
    3. Mettre à jour la source de l'image courante
      4. 
							
    4. Mettre à jour la description courante
      5. 
						
    
					
    6. 
					
  6. Écrivez la méthode start qui va lancer la méthode swipe toutes les 800ms
    7. 
					
  7. Écrivez la méthode pause qui stoppe l'intervalle
    8. 
					
  8. Dans le constructeur :
						
      
							
    1. Ajoutez un écouteur d'évènements qui lancera la méthode pause lorsque la souris survole l'image
      2. 
							
    2. Ajoutez un écouteur d'évènements qui lancera la méthode start lorsque la souris quitte l'image
      3. 
							
    3. Et pour finir appelez la méthode start pour animer le carrousel dès sa création
      4. 
						
    
					
    9. 
					
  9. Dans le document HTML, suivez les instructions en commentaire pour créer des photos et instancier votre PhotoSwiper.
    10. 


				

				


				

					
				

				


				



					Le fichier photoswiper.js :
					

						

					


					Le fichier HTML :