M3203 - Programmation objet et événementielle - TP1

Objectifs de la séance

  • Comprendre la notion de DOM
  • Savoir accéder aux éléments du DOM
  • Savoir modifier les éléments du DOM
  • Savoir manipuler le DOM, ajouter et supprimer des éléments

Pré-requis

  • Connaître les bases de la programmation : notions de variables, structures conditionnelles, structures itératives, sous-programme
  • Connaître la syntaxe de Javascript. Si besoin, une fiche de rappels est disponible ici.

Exercice 1 : Logo hijack

DOM

  1. Allez sur la page http://www.google.com
  2. Ouvrez la console web
  3. Cherchez le logo Google dans le code source, remarquez son id
  4. Dans la console, accédez à l'élément correspondant au logo et stockez-le dans une variable
  5. Modifiez la source de l'image pour la remplacer par l'image de votre choix
  6. Cherchez les boutons "Recherche Google" et "J'ai de la chance". Stockez-les dans une variable
  7. Remplacez le texte de chaque bouton par la valeur de votre choix
Voici ce que vous pouvez obtenir : Page Google modifiée 




							

						
	

	
						


						
Exercice 2 : Page d'accueil

						
 DOM 

						

						Ouvrez un nouveau fichier et copiez-y ce document HTML :
						

						

							

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Ma page</title>
	</head>
	<body>
		<h1>Moi</h1>
		
		<ul>
			<li>Surnom: <span id="surnom"></span></li>
			<li>Loisirs:  <span id="loisirs"></span></li>
		</ul>
		<button type="button">sdfhzhs</button>
		
	</body>
</html>
							

						

						

						
    
							
  1. Ajoutez une balise script à la fin du document. Vous travaillerez exclusivement à l'intérieur de celle-ci dans la suite de l'exercice.
    2. 
							
  2. Changez la police de l'élément body à Helvetica
    3. 
							
  3. Changez la taille de la police de l'élément body à 12pt
    4. 
							
  4. Vous allez maintenant ajouter vos propres informations à la page :
								
      
									
    1. Récupérez l'élément span d'identifiant surnom
      2. 
									
    2. Ajoutez votre surnom comme contenu textuel à l'élément span
      3. 
									
    3. Procédez de la même façon pour ajoutez vos loisirs dans le document à partir de l'élément span d'identifiant loisirs
      4. 
								
    

							
    5. 
							
  5. On va ajouter un nouvel évènement à la liste pour y mentionner l'âge :
								
      
									
    1. Créez un nouvel item de liste
      2. 
									
    2. Modifiez le contenu HTML de cet item pour y ajouter votre âge en prenant exemple sur les items précédents
      3. 
									
    3. Récupérez la liste HTML ul et ajoutez votre nouvel item à la liste
      4. 
								
    
							
    6. 
							
  6. Pour finir, on va ajouter la classe item aux éléments de la liste :
								
      
									
    1. Stockez dans une variable tous les éléments de la liste
      2. 
									
    2. Parcourez ces éléments et ajoutez à chacun d'entre eux la classe item
      3. 
								
    
							
    7. 
							
  7. Ajoutez une balise style au document et définissez la couleur de la classe item à bleu
    8. 
							
  8. Supprimez le bouton qui a été inséré par erreur dans le document
    9. 

							
  9. Pour compléter la page, vous allez ajouter votre avatar :
								
      
									
    1. Créez un nouvel élément img
      2. 
									
    2. Définissez sa source avec l'attribut src avec l'image de votre choix
      3. 
									
    3. Ajoutez cet élément à l'élement body
      4. 
								
    
							
    10. 
						

						

						

							
						

						


						

							

								

							

						

						


						
Exercice 3 : FizzBuzz

						
 DOM   boucles 

						
    
						
  • Créez un nouveau fichier HTML et créez un script qui affiche les nombres de 0 à 100 dans une liste ul.
    • 
						
  • Si le nombre est multiple de 3, affichez la valeur du nombre puis Fizz.
    • 
						
  • Si le nombre est multiple de 5, affichez la valeur du nombre puis Buzz.
    •  
						
  • Quand le nombre est multiple de 3 et 5, le script affiche alors la valeur du nombre puis FizzBuzz.
    • 
						
 
						
	Vous devez obtenir ceci :

						

						

							
						



						

							

								

							

						


						

					

						
Exercice 4 : Tirage du loto

						
 DOM   boucles 

						
On va simuler un tirage de loto, de 5 numéros + un complémentaire, parmi une collection de 59 numéros (de 1 à 59) où dans un tirage chaque numéro ne peut sortir qu'une seule fois. On affichera la combinaison obtenue.
						

						
Voici un exemple de ce que l'on peut obtenir :

						Loto
						

							
							
						




						

							

								

							

						

						

							

								
Vous pouvez stocker les nombres de 1 à 59 dans des éléments HTML ou un tableau. 
									Plusieurs solutions sont possibles. Pour générer un nombre aléatoire, vous pouvez utiliser Math.random. Vous pouvez aussi vous aider de  Array.prototype.splice() pour retirer un élément d'un tableau ou de removeChild pour supprimer un nœud. 
									Les étapes à suivre :
								

								
    
									
  • On génère les nombres de 1 à 59
    • 
									
  • Pour chaque nombre à tirer (6 au total) :
									
    • On tire au hasard un indice
      • 
										
    • On retire la valeur correspondante de la série
      • 
										
    • Et on l'affiche
      • 
									
    • 
								

							

						

						

						
Exercice 5 : Barre de progression

						
 DOM   fonctions 

						

						Vous allez programmer une barre de progression. Ouvrez un nouveau fichier et copiez-y ce document HTML :
						

						

							

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>Progression</title>
	<style type="text/css">
	div {
		display: inline-block;
		height: 30px;
		position: relative;
		left: 0px;
		background-color: orangeRed;
	}
	body{
		width: 500px;
	}
</style>

</head>

<body>
	<div id='progressbar'></div>

	<script type="text/javascript">

	</script>
</body>

</html>
							

						

						
    
							
  1. Déclarez une variable counter et initialisez là à 0. Elle représentera la valeur de la progression de la barre.
    2. 
							
  2. É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 %).
    3. 
							
  3. En utilisant la fonction setInterval, appelez la fonction addDiv toutes les 20ms
    4. 
							
  4. Testez le résultat
    5. 
							
  5. Bonus : Comment stopper la barre de progression à 100% ? (lisez bien la documentation !)
    6.