M3203 - Programmation objet et événementielle - TP2

Objectifs de la séance

  • Comprendre la notion d'évènements et de programmation évènementielle
  • Savoir gérer des évènements en Javascript

Pré-requis

  • Être capable de manipuler le DOM

Exercice 1 : Alertes !

Évènements DOM

Pour commencer, vous allez tester quelques types d'évènements différents qui réagiront en lançant des alertes. 

				

				
    
					
  1. Téléchargez le fichier ci-dessus et enregistrez-le
    2. 
					
  2. Écrivez une fonction message qui lance une alerte avec le texte "Test"
    3. 
					
  3. 
						
      
							
    1. Stockez dans une variable le bouton d'identifiant go
      2. 
							
    2. Ajoutez lui un écouteur d'évènements qui appelle la fonction message lors d'un clic de souris. 
      3. 
						
    
					
    4. 
					
  4. 
						
      
							
    1. Stockez dans une variable l'image d'identifiant cat
      2. 
							
    2. Ajoutez lui un écouteur d'évènements qui appelle la fonction message lors du survol de l'image. 
      3. 
						
    
					
    5. 
					
  5. 
						
      
							
    1. Stockez dans une variable le champ de saisie d'identifiant key
      2. 
							
    2. Ajoutez lui un écouteur d'évènements qui appelle la fonction message lorsqu'une touche est enfoncée. 
      3. 
						
    
					
    6. 
				

				


				

					
				

				

	
				

					

						

					

				



				





				
Exercice 2 : Diapos de vacances

				
 Évènements   DOM   tableaux 

				On va créer un diaporama qui va permettre de faire défiler des images en cliquant sur des boutons "Suivant" et "Précédent".
				Le document ci-dessous contient le tout début du script où est déclaré le tableau album qui contient des url vers des photos.
				

					

				

				
    
					
  1. Téléchargez le fichier ci-dessus et enregistrez-le
    2. 
					
  2. À la suite du script, déclarez une variable counter et initialisez-la à 0. Elle représentera l'indice de la photo affichée dans le tableau.
    3. 
					
  3. Stockez l'élément image avec l'identifiant diapo dans une variable photo
    4. 
					
  4. Écrivez la fonction previousPhoto qui :
						
      
							
    1. Décrémente le compteur s'il est strictement supérieur à 0 (et sinon on ne fait rien : c'est qu'on est au tout début de l'album)
      2. 
							
    2. Modifie l'attribut src de photo avec la nouvelle url correspondant au compteur dans le tableau album
      3. 
						
    
					
    5. 
					
  5. Écrivez la fonction nextPhoto qui :
						
      
							
    1. Incrémente le compteur s'il ne dépasse pas la taille du tableau
      2. 
							
    2. Modifie l'attribut src de photo avec la nouvelle url correspondant au compteur dans le tableau album
      3. 
						
    
					
    6. 
					
  6. Ajoutez un écouteur d'évènements sur le bouton d'identifiant next qui appelle la fonction nextPhoto lors d'un clic de souris
    7. 
					
  7. Ajoutez un écouteur d'évènements sur le bouton d'identifiant previous qui appelle la fonction previousPhoto lors d'un clic de souris
    8. 
					
  8. Testez !
    9. 
				

				


				

					
				

				


				

					

						
					

				



				


				
Exercice 3 : Barre de progression, le retour

				
 Évènements   DOM 

				Vous allez programmer une barre de progression contrôlable avec des boutons "start" et "stop". 
				Voici la page HTML :
				

					

				

				Et le CSS associé :
				

					

				

				
    
					
  1. Téléchargez les fichiers ci-dessus et enregistrez-les
    2. 
					
  2. Déclarez une variable counter et initialisez là à 0. Elle représentera la valeur de la progression de la barre.
    3. 
					
  3. Déclarez une variable interval sans lui affecter de valeur. Elle représentera l'identifiant de l'intervalle de progression de la barre.
    4. 
					
  4. Écrivez une fonction addDiv qui incrémente le compteur counter de 1 et met à jour la largeur de la div d'identifiant progressbar avec sa nouvelle valeur (en %).
    5. 
					
  5. Écrivez une fonction startBar qui appelle la fonction setInterval qui exécutera addDiv toutes les 100 millisecondes. La valeur de retour de la fonction setInterval sera stockée dans la variable interval.
    6. 
					
  6. Écrivez une fonction stopBar qui appelle la fonction clearInterval qui prendra en paramètre d'entrée l'identifiant de l'intervalle.
    7. 
					
  7. Ajoutez les écouteurs d'évènements sur les boutons d'identifiant start et stop qui appellent respectivement les fonctions startBar et stopBar lors d'un clic de souris.
    8. 

				

				


				
				

					
				

				

	
				

					

						

					

				


				


				
Exercice 4 : Tama

				
 Évènements   DOM 

				

				

					

						

							Tama normal
						

						

							Tama content
						

						

							Tama affamé
						

						

							Tama mort
						

					

				

				

				Vous allez programmer un jeu de Tamagotchi mettant en scène le petit chien Tama.
				Le jeu permettra de nourrir Tama et de le caresser. S'il n'est pas nourri ou trop malheureux, il mourra. 
				Voici la page HTML pour débuter :
				

					

				

				Et le CSS associé :
				

					

				

				
    
					
  1. Téléchargez les fichiers ci-dessus et enregistrez-les
    2. 
					
  2. Stockez dans deux variables hunger et happiness les éléments span avec les identifiants correspondants.
    3. 
					
  3. Écrivez la fonction tamaLife qui va simuler les étapes de la vie de Tama :
						
      
							
    1. Elle ajoute 5 points à la valeur de l'appétit de Tama.
      2. 
							
    2. Elle enlève 5 points à la valeur du bonheur de Tama.
      3. 
							
    3. Si la faim est supérieure à 70 ou le bonheur inférieur à 30, Tama est malheureux. L'attribut src de l'élément tama prend cette valeur : "http://chloecabot.com/mmi/M3203/img/tama_unhappy.png".
      4. 
							
    4. Dans le cas contraire, Tama est dans un état normal. Son image est donc celle-ci : "http://chloecabot.com/mmi/M3203/img/tama_alive.png".
      5. 
							
    5. Cas particulier : si la faim est égale à 100 ou le bonheur à 0, Tama meurt. L'attribut src de l'élément tama prend cette valeur : "http://chloecabot.com/mmi/M3203/img/tama_dead.png".
      6. 
						
    
					
  4. Lancez la fonction tamaLife toutes les secondes avec setInterval. Stockez bien la valeur du retour de la fonction dans une variable interval.
    5. 
					
  5. Dans la fonction tamaLife, quand Tama meurt, ajoutez un appel à clearInterval pour stopper les compteurs.
    6. 
					
  6. À ce stade, vous pouvez tester votre Tamagotchi. Le bonheur et l'appétit de Tama vont progresser jusqu'à ce qu'il meure, sans que vous ne puissiez rien faire !
    7. 
					
  7. Écrivez la fonction setHappiness qui va :
						
      
							
    1. Modifier la valeur du bonheur à 100, le maximum.
      2. 
							
    2. Changer l'image de Tama. Son attribut src prend cette valeur : "http://chloecabot.com/mmi/M3203/img/tama_happy.png".
      3. 
						
    
					
    8. 
					
  8. Ajoutez un écouteur d'évènements sur l'image d'identifiant tama qui appelle la fonction setHappiness au survol de l'image.
    9. 
					
  9. Écrivez la fonction setFood qui va :
						
      
							
    1. Récupérer la quantité de nourriture qui est donnée à Tama par le champ input d'identifiant food. Pensez à vérifier que la valeur récupérée est un nombre entier à l'aide des fonctions parseInt et isNaN. 

							
      2. 
							
    2. Diminuer la valeur de l'appétit de Tama de cette même quantité.
      3. 
						
    
					
    10. 
					
  10. Ajoutez un écouteur d'évènements sur le bouton d'identifiant go qui appelle la fonction setFood quand le bouton est cliqué.
    11.