tableau et DOM

Histogramme

Dans la page html ci-dessous, on dispose de données sur trois pays dans des tableaux js (population en millions de personnes, superficie en milliers de km², chomage en millions de personnes) :


let France = [66.6, 547, 6.2]; //population, superficie, chomage
let Allemagne = [80.6, 357, 2.8];
let Espagne = [46.7, 504, 3.9];

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Europe  </title>
    </head>
    <body>
    
     <div>
    <label for="choixDonnee">Choix de la donnée : </label>
	<select id="choixDonnee">
	  <option value="population">Population (en millions de personnes) </option>
	  <option value="superficie">Superficie (en milliers de km<sup>2</sup>) </option>
	  <option value="chomage">Chômage (en millions de personnes) </option>
	</select>
	 
	 <br>
 
     <label for="validez">Validez : </label>
     <button id="validez" onclick="affichage()">Clic ! </button>
     </div>
    
    <p> France : <span id="fr"> </span></p>
    <p> Allemagne : <span id="de"> </span></p>
    <p> Espagne  : <span id="esp"> </span></p>
    
    
    
    <script>
    let France = [66.6, 547, 6.2]; //population, superficie, chomage.
    let Allemagne = [80.6, 357, 2.8];
    let Espagne = [46.7, 504, 3.9];
    
    function affichage(){
    
    	//on récupère la chaîne de caractères désignant le pays choisi :
    	let typeDonnee = document.getElementById("choixDonnee").value;
    	
    	let indiceDonnee; // indice de la donnée dans les tableaux
    	
    	if(typeDonnee === "population") {indiceDonnee = 0;}
    	else if(typeDonnee === "superficie") {indiceDonnee = 1;}
    	else if(typeDonnee === "chomage") {indiceDonnee = 2;}
    	
    	//on affiche dans la partie html la donnée pour chaque pays   :
    	document.getElementById("fr").innerHTML = France[indiceDonnee] ;
    	document.getElementById("de").innerHTML = Allemagne[indiceDonnee] ;
    	document.getElementById("esp").innerHTML = Espagne[indiceDonnee] ;    	
    }
        
    </script> 
     
    </body>
</html>

Complétez le code JS afin que les paragraphes dans lesquels on affiche les données prennent des largeurs (attribut css width) proportionnelles à la donnée, transformant ainsi les paragraphes en un petit histogramme.

Contrainte : on n'ajoutera rien à la partie html, les seuls ajouts seront faits dans le script JS.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Europe  </title>
    </head>
    <body>
    
    <div>
    <label for="choixDonnee">Choix de la donnée : </label>
	<select id="choixDonnee">
	  <option value="population">Population (en millions de personnes) </option>
	  <option value="superficie">Superficie (en milliers de km<sup>2</sup>) </option>
	  <option value="chomage">Chômage (en millions de personnes) </option>
	</select>

 	<br>
 	
     <label for="validez">Validez : </label>
     <button id="validez" onclick="affichage()">Clic ! </button>
     </div>
    
    <p> France : <span id="fr"> </span></p>
    <p> Allemagne : <span id="de"> </span></p>
    <p> Espagne  : <span id="esp"> </span></p>
    
    
    
    <script>
    let France = [66.6, 547, 6.2]; //population, superficie, chomage.
    let Allemagne = [80.6, 357, 2.8];
    let Espagne = [46.7, 504, 3.9];
    
    
    // tableau de tableaux pour faciliter boucle :
    let Pays = [France, Allemagne, Espagne];
    
     
   
    
    function affichage(){
    
    	//on récupère la chaîne de caractère désignant le pays choisi :
    	let typeDonnee = document.getElementById("choixDonnee").value;
    	
    	
    	let indiceDonnee; // indice de la donnée dans les tableaux
    	
    	if(typeDonnee === "population") {indiceDonnee = 0;}
    	else if(typeDonnee === "superficie") {indiceDonnee = 1;}
    	else if(typeDonnee === "chomage") {indiceDonnee = 2;}
    	
    	//on affiche dans la partie html la donnée pour chaque pays   :
    	document.getElementById("fr").innerHTML = France[indiceDonnee] ;
    	document.getElementById("de").innerHTML = Allemagne[indiceDonnee] ;
    	document.getElementById("esp").innerHTML = Espagne[indiceDonnee] ;   
    	
    	//tableau des paragraphes de la partie html :
		let tpara = document.getElementsByTagName("p"); 
		
		// boucle pour imposer une hauteur de 50px à chaque élément p 
		for(let i = 0; i < tpara.length; i++)	{
			tpara[i].style.height = "50px";
		}
		
		
		// width proportionnel à la donnée
		// on définit un coefficient coeff pour chaque type de donnée 
		// pour avoir des width pas trop petits
		let coeff = 1;
		if(typeDonnee === "population") {coeff = 5;}
		else if(typeDonnee === "superficie") {coeff = 1;}
		else if(typeDonnee === "chomage") {coeff = 50;}
		
		//boucle pour la largeur de chaque élément p :
		for(let i = 0; i < tpara.length; i++) {
			tpara[i].style.width = (coeff * Pays[i][indiceDonnee]) + "px";
		}
		
		// couleur de fond différente pour chaque pays :
		tpara[0].style.backgroundColor = "rgba(0,0,200,0.5)";
		tpara[1].style.backgroundColor = "rgba(0,200,0,0.5)";
		tpara[2].style.backgroundColor = "rgba(200,0,0,0.5)";
		 	
    }
    
    
        
    </script> 
     
    </body>
</html>

Histogramme, bis

On reprend l'exercice précédent, mais on présente cette fois les données à l'aide d'un "tableau associatif".

Lisez le descriptif du tableau associatif de cette page.

Ce type de tableau est un choix naturel pour le type de données présentées dans cet exercice. C'est en js un type important, lié à la notion d'objet dans ce langage et au format JSON (cherchez sur le web avec ce mot clef JSON).

Traiter à nouveau la question de la représentation en histogramme à partir du code ci-dessous.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Europe  </title>
    </head>
    <body>
    
    <div>
    <label for="choixDonnee">Choix de la donnée : </label>
	<select id="choixDonnee">
	  <option value="population">Population (en millions de personnes) </option>
	  <option value="superficie">Superficie (en milliers de km<sup>2</sup>) </option>
	  <option value="chomage">Chômage (en millions de personnes) </option>
	</select>

 	<br>
 	
     <label for="validez">Validez : </label>
     <button id="validez" onclick="affichage()">Clic ! </button>
     </div>
    
    <p> France : <span id="fr"> </span></p>
    <p> Allemagne : <span id="de"> </span></p>
    <p> Espagne  : <span id="esp"> </span></p>
    
    
    
    <script>
	let France = { population : 66.6, superficie : 547, chomage : 6.2};
    let Allemagne = { population : 80.6, superficie : 357, chomage : 2.8}; 
    let Espagne = { population : 46.7, superficie : 504, chomage : 3.9}; 
    
    
    function affichage(){
    
    	//on récupère la chaîne de caractère désignant le pays choisi :
    	let typeDonnee = document.getElementById("choixDonnee").value;
    	
 
    	
    	//on affiche dans la partie html la donnée pour chaque pays   :
    	document.getElementById("fr").innerHTML = France[typeDonnee] ;
    	document.getElementById("de").innerHTML = Allemagne[typeDonnee] ;
    	document.getElementById("esp").innerHTML = Espagne[typeDonnee] ;   
    	
     
    }
    
    
        
    </script> 
     
    </body>
</html>

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Europe  </title>
    </head>
    <body>
    
    <div>
    <label for="choixDonnee">Choix de la donnée : </label>
	<select id="choixDonnee">
	  <option value="population">Population (en millions de personnes) </option>
	  <option value="superficie">Superficie (en milliers de km<sup>2</sup>) </option>
	  <option value="chomage">Chômage (en millions de personnes) </option>
	</select>

 	<br>
 	
     <label for="validez">Validez : </label>
     <button id="validez" onclick="affichage()">Clic ! </button>
     </div>
    
    <p> France : <span id="fr"> </span></p>
    <p> Allemagne : <span id="de"> </span></p>
    <p> Espagne  : <span id="esp"> </span></p>
    
    
    
    <script>
	let France = { population : 66.6, superficie : 547, chomage : 6.2};
    let Allemagne = { population : 80.6, superficie : 357, chomage : 2.8}; 
    let Espagne = { population : 46.7, superficie : 504, chomage : 3.9}; 
     
    
    // tableau de tableaux pour faciliter boucle :
    let Pays = [France, Allemagne, Espagne];
    
     
   
    
    function affichage(){
    
    	//on récupère la chaîne de caractère désignant le pays choisi :
    	let typeDonnee = document.getElementById("choixDonnee").value;
    	
    	
    	 
    	
    	//on affiche dans la partie html la donnée pour chaque pays   :
    	document.getElementById("fr").innerHTML = France[typeDonnee] ;
    	document.getElementById("de").innerHTML = Allemagne[typeDonnee] ;
    	document.getElementById("esp").innerHTML = Espagne[typeDonnee] ;   
    	
    	//tableau des paragraphes de la partie html :
		let tpara = document.getElementsByTagName("p"); 
		
		// boucle pour imposer une hauteur de 50px à chaque élément p 
		for(let i = 0; i < tpara.length; i++) {
			tpara[i].style.height = "50px";
		}
		
		
		// width proportionnel à la donnée
		// on définit un coefficient coeff pour chaque type de donnée 
		// pour avoir des width pas trop petits
		let coeff = 1;
		if(typeDonnee === "population") {coeff = 5;}
		else if(typeDonnee === "superficie") {coeff = 1;}
		else if(typeDonnee === "chomage") {coeff = 50;}
		
		//boucle pour la largeur de chaque élément p :
		for(let i = 0; i < tpara.length; i++){
			tpara[i].style.width = (coeff * Pays[i][typeDonnee]) + "px";
		}
		
		// couleur de fond différente pour chaque pays :
		tpara[0].style.backgroundColor = "rgba(0,0,200,0.5)";
		tpara[1].style.backgroundColor = "rgba(0,200,0,0.5)";
		tpara[2].style.backgroundColor = "rgba(200,0,0,0.5)";
		 	
    }
    
    
        
    </script> 
     
    </body>
</html>

PPCM

La page html ci-dessous présente une centaine d'éléments de type p.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> ppcm  </title>
    </head>
    <body>
    
      <div>
		<label for="entier1">Choix du premier entier : </label>
		<input type="number" min="2" max="9" value="2" id="entier1">
		
	 	<br>
	 	
	 	<label for="entier2">Choix du second entier : </label>
		<input type="number" min="2" max="9" value="3" id="entier2">
		
	 	<br>
	 	
		<label for="validez">Validez : </label>
		<button id="validez" onclick="ppcm()">Clic ! </button>
     </div>
    
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>    
    
    
    <script>
     
     
     function ppcm(){
     	let entier1 = document.getElementById("entier1").value;
     	let entier2 = document.getElementById("entier2").value;
     
     }
     
    </script> 
     
    </body>
</html>

Définir le contenu du script de façon à ce que :

Les paragraphes comportent un numéro, le premier sera numéroté 2, le suivant 3, ...
Tous les paragraphes (à l'exception de ce qui est indiqué aux deux points suivants) auront une largeur et une hauteur de 20 pixels et seront encadrés de noir.
Les paragraphes dont le numéro est multiple de entier1 apparaîtront avec une hauteur de entier1 * 20 pixels et encadrés de rouge.
Les paragraphes dont le numéro est multiple de entier2 apparaîtront avec une largeur de entier2 * 70 pixels, avec un fond jaune.
Le premier paragraphe qui sera à la fois encadré en rouge et sur fond jaune affichera la phrase : "Je suis le PPCM".

Un code possible.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> ppcm  </title>
        <style>
        	body{font-size:10px;}
        </style>
    </head>
    <body>
    
      <div>
		<label for="entier1">Choix du premier entier : </label>
		<input type="number" min="2" max="9" value="2" id="entier1">
		
	 	<br>
	 	
	 	<label for="entier2">Choix du second entier : </label>
		<input type="number" min="2" max="9" value="3" id="entier2">
		
	 	<br>
	 	
		<label for="validez">Validez : </label>
		<button id="validez" onclick="ppcm()">Clic ! </button>
     </div>
    
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>
     <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p>    
    
    
    <script>
     
     
     function ppcm(){
     	let entier1 = document.getElementById("entier1").value;
     	let entier2 = document.getElementById("entier2").value;
     	
     	//tableau des paragraphes
     	let tp = document.getElementsByTagName("p");
     	
     	//mise en forme commune
     	for(let i = 0; i < tp.length; i++) 	{
     		tp[i].style.width = "20px";
     		tp[i].style.height = "20px";
     		tp[i].style.borderStyle = "dashed";
     		tp[i].style.borderWidth = "1px";
     		tp[i].style.borderColor = "black";
     		tp[i].innerHTML = (i+2);
     	}
     	
     	
     	for(let i = 0; i < tp.length; i++)	{
     		if( (i+2) % entier1 === 0 ){// si le numero du paragraphe, cad i+2, est multiple de entier1
     			tp[i].style.height = (20 * entier1) + "px";
     			tp[i].style.borderColor = "red";  
     			tp[i].style.borderWidth = "3px";  
     			tp[i].style.borderStyle = "solid"; 			
     		}
     		
     		if( (i+2) % entier2 === 0 ){ // si le numero du paragraphe, cad i+2, est multiple de entier2
     			tp[i].style.width = (70 * entier2) + "px";
     			tp[i].style.backgroundColor = "yellow";  
     			tp[i].style.borderWidth = "3px";  
     			tp[i].style.borderStyle = "solid"; 	   			
     		}
     		
     		
     		// entier multiple commun :
     		if( ((i+2) % entier1 === 0) && ((i+2) % entier2 === 0) ) {	
     			tp[i].innerHTML = (i+2) + " : Je suis un multiple commun de " + entier1 + " et " + entier2 + ".";
     		}
     		
     	}
     	
     	
     	for(let i = 0; i < tp.length; i++)	{
     	
     		if( ((i+2) % entier1 === 0) && ((i+2) % entier2 === 0) ) {	
     			tp[i].innerHTML = (i+2) + " : Je suis le PPCM de " + entier1 + " et " + entier2 + ".";
     			break;// on sort de la boucle dès qu'un multiple commun a été rencontré
     		}
     		
     	}
   
     }
     
    </script> 
     
    </body>
</html>

Le cadavre exquis

Commencez par lire l'article wikipedia présentant le jeu du "cadavre exquis".

L'objectif est ici de mettre en place une version simple du jeu.

Pour cela, définir le corps de la fonction ci-dessous. Vous ne toucherez pas à la partie html du code, les seules modifications autorisées ici sont des modifications du script.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> cadavre exquis  </title>
    </head>
    <body>
    
    	<button onclick="genere()"> Générer une phrase </button>
    	
    	
     	<p> <span> </span> <span> </span> <span> </span>. </p>
    
    
    <script>
    // trois listes que vous pouvez compléter
    let sujet = ["Le chat noir", "La souris violette", "Le pantagruélique Depardieu", "Le président normal", "Le fantasque schtroumpf"];
    let verbe = ["zinzinule", "vole", "barguigne", "renaude", "nous  fait accroire"];
    let complement = ["le baryton", "sur la commode", "au 13, rue de la chose", "sur un gastronome endormi"];
    
    function genere(){
    
    	 /* cette fonction doit afficher un sujet au hasard dans le premier élément span
    	 un verbe au hasard dans le second élément span
    	 un complément au hasard dans le troisième élément span */   	
    }
        
    </script> 
     
    </body>
</html>

Un code possible.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> cadavre exquis  </title>
    </head>
    <body>
    
    <button onclick="genere()"> Générer une phrase </button>
    
     <p> <span> </span> <span> </span> <span> </span>. </p>
    
    
    <script>
     
    let sujet = ["Le chat noir", "La souris violette", "Le pantagruélique Depardieu", "Le président normal", "Le fantasque schtroumpf"]; 
    let verbe = ["zinzinule", "vole", "barguigne", "renaude", "nous  fait accroire"];
    let complement = ["le baryton", "sur la commode", "au 13, rue de la chose", "sur un gastronome endormi"];
    
    // tableau de tableaux :
    let phrase = [ sujet, verbe, complement];
    
    
    function auHasard(t){
    //la fonction retourne un élément pris au hasard dans le tableau t
    	return t[ Math.floor( Math.random() * t.length ) ] ;    
    }
    
    
    
    function genere(){
    	// tableau des éléments span
    	let tspan = document.getElementsByTagName("span");
    	
    	// choix au hasard des éléments dans les tableaux :
    	for(let i = 0; i < tspan.length; i++)
    	{
    		tspan[i].innerHTML =  auHasard(phrase[i]);
    	}
    	
    	  
    }
        
    </script> 
     
    </body>
</html>