Événements javascript

Coordonnées de la souris dans la page.

L'événement mousemove est déclenché au mouvement de la souris.

L'exemple ci-dessous montre comment récupérer et afficher les coordonnées de la souris dans la page.

Lisez et comprenez ce code d'exemple puis modifiez le second code suivant les consignes données plus bas.

Coordonnées de la souris dans la page.

Déplacez la souris dans le cadre de rendu

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> coordonnées souris </title>
    </head>
    <body>
		
<p> 
	Abscisse du curseur dans la page : 
	<span id="abs">...</span>
	 et ordonnée : <span id="ord">...</span>.
</p>

<script>
 
document.addEventListener(	
	'mousemove', 
	function(e){								 
		document.getElementById("abs").textContent = e.clientX ; 
		document.getElementById("ord").textContent = e.clientY ;								 
	}
);

</script>
</body>
</html>

Le code à modifier.

Votre mission : faire en sorte que le carré rouge du code ci-dessous suive la souris.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> carré rouge </title>
        <style>
        #rouge{
			position : absolute;
			top : 20px;
			left: 20px;
			width: 10px;
			height: 10px;
			background-color: red;
			margin:0;}
		</style>
    </head>
    <body>
		
<p id="rouge"></p>
</body>
</html>

Une aide .

En définissant la variable let carre = document.getElementById("rouge");, on pourra utiliser carre.style.left = ... et carre.style.top = ... dans le script pour modifier les propriétés css left et top donnant la position du carré rouge (par rapport au coin supérieur gauche de la page).

Une solution

Un code possible :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> carré qui suit la souris </title>
    <style>
		 
		#rouge{
			position : absolute;
			top : 20px;
			left: 20px;
			width: 10px;
			height: 10px;
			background-color: red;
			margin:0;}
		}
		
	</style>
</head>
    
<body>

<p id="rouge"></p>

<script>
let carre = document.getElementById("rouge");

document.addEventListener(	
	'mousemove', 
	function(e){
		carre.style.left = e.clientX + 'px';
		carre.style.top = e.clientY + 'px';
	}
);

</script>
</body>
</html>

Le bouton fuyant.

Dans cet exercice, vous utiliserez l'événement mousemove et l'événement click.

Vous devez créer un bouton sur lequel l'utilisateur doit cliquer. Mais lorsqu'on approche la souris du bouton, celui-ci fuit à un autre endroit dans l'écran.

Toutefois, au bout de quelques tentatives le bouton se laisse approcher et un click sur le bouton change alors le texte inscrit sur ce bouton.

Une aide.

Le code ci-dessous illustre la différence entre element.offsetLeft et element.style.left.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  position </title>
    <style>
		 
		#bouton{
			position : absolute;
			top : 20px;
			left: 600px;
			width: 100px;
			height: 30px;
			background-color: red;
			margin:0;}
		}
		 
	</style>
</head>
    
<body>
	
 
<button id="bouton" type="button"> Cliquer ici !</button> 
 
<p id="resultat">Cliquez sur le bouton ! </p>
 

<script>
let bouton = document.getElementById("bouton");
let resultat = document.getElementById("resultat");
bouton.addEventListener('click', position); 

function position(){
	let chaine = '';
	chaine += "bouton.offsetLeft : " + bouton.offsetLeft;
	chaine += '<br>';
	bouton.style.left = 400 + 'px';
	chaine += "bouton.style.left : " + bouton.style.left;
	resultat.innerHTML = chaine;
}

 
</script>
</body>
</html>

Une solution

Un code possible :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> bouton fuyant </title>
    <style>
		 
		#bouton{
			position : absolute;
			top : 20px;
			left: 20px;
			width: 100px;
			height: 30px;
			background-color: red;
			margin:0;
		}
		body{
			height : 300px;
			border: 1px solid green;
		}
	</style>
</head>
    
<body>
	
<button id="bouton" type="button"> Cliquer ici !</button> 

 

<script>
let bouton = document.getElementById("bouton");
let compteur = 0;

gauche = 10;
droite = 600;
 
 
document.addEventListener(	
	'mousemove', 
	function(e)
	{
		if(compteur < 6 ) 
		{
			if ( Math.abs(bouton.offsetLeft - e.clientX) < 100 ) 
			{
				if( bouton.offsetLeft === gauche ) bouton.style.left = droite + 'px';
				else  bouton.style.left = gauche + 'px';
				compteur++;
			}
			bouton.style.top = e.clientY + 'px';
		}
	}
);

bouton.addEventListener(
	'click',
	function()
	{
		bouton.style.height = '50px';
		bouton.style.backgroundColor = 'orange';
		bouton.style.color = 'white';
		bouton.style.fontWeight = 'bold';
		bouton.textContent = "Ah, enfin !";
	}
);


</script>
</body>
</html>

Ponctuation.

Dans cet exercice, vous allez utiliser l'événement click qui est déclenché lorsqu'on clique (bouton gauche de la souris) sur un élément html.

Commencez par lire et comprendre l'exemple puis passez à la partie exercice (intitulé « L'héritage »).

Un exemple

Cliquez sur le carré rouge.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> changement de couleur </title>
    <style>
		 
		#rouge{
			top : 20px;
			left: 20px;
			width: 50px;
			height: 50px;
			background-color: red;
			margin:0;}
		}
		
	</style>
</head>
    
<body>

<p id="rouge"></p>

<script>
let carre = document.getElementById("rouge");

document.addEventListener(	
	'click', 
	function(){
		carre.style.backgroundColor = 'blue' ;
	}
);

</script>

<p>Cliquez sur le carré rouge.</p>
</body>
</html>

L'héritage.

Un homme riche était au plus mal. Il prit un papier et un stylo pour écrire ses dernières volontés :

« Je laisse mes biens à ma soeur non à mon neveu jamais sera payé le compte du tailleur rien aux pauvres »

« Je laisse mes biens à ma soeur. Non à mon neveu. Jamais sera payé le compte du tailleur. Rien aux pauvres. »

« Je laisse mes biens à ma soeur ? Non ! À mon neveu. Jamais sera payé le compte du tailleur. Rien aux pauvres. »

« Je laisse mes biens à ma soeur ? Non ! À mon neveu ? Jamais ! Sera payé le compte du tailleur. Rien aux pauvres. »

« Je laisse mes biens à ma soeur ? Non ! À mon neveu ? Jamais ! Sera payé le compte du tailleur ? Rien. Aux pauvres ! »

Mais le mourant passa l'arme à gauche avant de pouvoir achever la ponctuation de son billet. À qui laissait-il sa fortune ?
Pour savoir comment chacun des protagonistes interprète ce testament, cliquez sur le mot le désignant.

Votre mission est bien sûr d'écrire le code permettant de reproduire l'effet de ces clics.

Une aide.

Vous connaissez document.getElementById(), on trouve également document.getElementsByClassName() (attention au pluriel).

Si l'on dispose de plusieurs éléments dans la page avec un attribut de valeur "coucou" (class = "coucou"), l'instruction var cc = document.getElementsByClassName("coucou"); vous permettra d'accèder à chacun de ces éléments. Le premier est cc[0], le second cc[1], ...etc, jusqu'à cc[cc.length-1].

Une solution

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>testament </title>
	 
</head>
<body>
	
	
<div id="testament">
<p id="original">
	« 
	Je laisse mes biens à ma <span class="csoeur">soeur</span> 
	non à mon <span class="cneveu">neveu</span>
	jamais sera payé le compte du <span class="ctailleur">tailleur</span>
	rien aux <span class="cpauvre">pauvres</span>
	»
</p>
<p id="soeur">
	« 
	Je laisse mes biens à ma <span class="csoeur">soeur</span>. 
	Non à mon <span class="cneveu">neveu</span>. 
	Jamais sera payé le compte du <span class="ctailleur">tailleur</span>. 
	Rien aux <span class="cpauvre">pauvres</span>. 
	»
</p>
<p id="neveu">
	« 
	Je laisse mes biens à ma <span class="csoeur">soeur</span> ? 
	Non ! À mon <span class="cneveu">neveu</span>. 
	Jamais sera payé le compte du <span class="ctailleur">tailleur</span>. 
	Rien aux <span class="cpauvre">pauvres</span>. 
	»
</p>
<p id="tailleur">
	« 
	Je laisse mes biens à ma <span class="csoeur">soeur</span> ? 
	Non ! À mon <span class="cneveu">neveu</span> ? 
	Jamais ! Sera payé le compte du <span class="ctailleur">tailleur</span>. 
	Rien aux <span class="cpauvre">pauvres</span>. 
	»
</p>
<p id="pauvre">
	« 
	Je laisse mes biens à ma <span class="csoeur">soeur</span> ? 
	Non ! À mon <span class="cneveu">neveu</span> ? 
	Jamais ! 
	Sera payé le compte du <span class="ctailleur">tailleur</span> ? 
	Rien. Aux <span class="cpauvre">pauvres</span> ! 
	»
</p>
</div>


<script>
var original = document.getElementById("original");
var soeur = document.getElementById("soeur");
var neveu = document.getElementById("neveu");
var tailleur = document.getElementById("tailleur");
var pauvre = document.getElementById("pauvre");

var tabsoeur  = document.getElementsByClassName("csoeur");
var tabneveu  = document.getElementsByClassName("cneveu");
var tabtailleur  = document.getElementsByClassName("ctailleur");
var tabpauvre  = document.getElementsByClassName("cpauvre");


function afficher(protagoniste){
	original.style.display = "none" ;
	soeur.style.display = "none" ;
	neveu.style.display = "none" ;
	tailleur.style.display = "none" ;
	pauvre.style.display = "none" ;
	protagoniste.style.display = "block" ;
}


afficher(original); 


for(let s of tabsoeur) {
	s.addEventListener('click', function(){afficher(soeur);}, false);
}
for(let n of tabneveu) {
	n.addEventListener('click', function(){afficher(neveu);}, false);
}
for(let t of tabtailleur) {
	t.addEventListener('click', function(){afficher(tailleur);}, false);
}
for(let p of tabpauvre) {
	p.addEventListener('click', function(){afficher(pauvre);}, false);
}
</script>
 
</body>
</html>

Accent.

Dans cet exercice, vous allez utiliser l'événement mouseover qui est déclenché lorsque la souris survole l'élément html.

L'objectif est de réaliser la modification ci-dessous lorsque la souris survole la phrase.

Hôpital.

Un père indigné, ex-interne de l'hôpital Sainte-Anne, tué pendant une audition.

Un père indigne, ex-interné de l'hôpital Sainte-Anne, tue pendant une audition.

Une solution

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>testament </title>
	<style>
	#desinformation{
		background-color: black; 
		color: white; 
		font-weight: bold; 
		border-radius: 10px; 
		padding: 5px;
		text-align:center;
		font-family:sans-serif;
	}
	</style>
</head>
<body>
	
	
<div id="desinformation" >
<p id="ph1">
	Un père indigné, ex-interne de l'hôpital Sainte-Anne, tué pendant une  audition.
</p>
<p id="ph2">
	Un père indigne, ex-interné de l'hôpital Sainte-Anne, tue pendant une  audition.
</p>
</div>


<script>
var desinformation = document.getElementById("desinformation");
var ph1 = document.getElementById("ph1");
var ph2 = document.getElementById("ph2");

ph1.style.display = "block";
ph2.style.display = "none";

function change(){
	if (ph1.style.display === "block") ph1.style.display = "none";
	else ph1.style.display = "block";
	if (ph2.style.display === "block") ph2.style.display = "none";
	else ph2.style.display = "block";
}

 
desinformation.addEventListener('mouseover', change, false);
 
</script>
 
</body>
</html>

Associations.

L'objectif est de créer un petit jeu d'association.

A gauche, on présente trois titres de livres et à gauche trois auteurs. L'utilisateur doit associer les titres à leurs auteurs. Un clic sur un bouton lui permettra de savoir si ses réponses sont justes ou non.

Exemple.

Un exemple ici.

Vous pouvez bien entendu apporter des modifications... A vous de coder.

Une solution

Le code de l'exemple :

<!doctype html>

<html lang="fr">

<head>
	<meta charset="utf-8">
	<title> asociation </title>
	<style>
	#assoc{
		display: flex;
		justify-content: space-between;
	}
	 
	ul.propositions{
		list-style-type: none;
	}
	 
	ul.propositions li{
			margin : 2rem;
			border-radius: 5px;
			text-align:center;
			font-weight: bold;
			color: white;
			padding: 2rem;
			background-color: rgb(200,200,200);
	}
	 
	
	 
	
	#titre h2, #auteur h2{
		text-align: center;
	}
	
	#message{
		margin-top: 6rem;
		text-align: center;
	}
	</style>
</head>
    
<body>
<div id="assoc">
	
<div id="titre">
<h2> Titre  </h2>
<ul class="propositions">
<li id="t1">La Stratégie Ender</li>
<li>Les Neuf Princes d'Ambre</li>
<li>Les Fables de l’Humpur</li>
</ul>
</div>

<div id="message">
	
<p id="modeemploi">Cliquez sur un titre à gauche puis sur un auteur à droite
pour les associer. <br> Cliquez sur le bouton de validation 
lorsque vous avez terminé.</p>	

 <p id="reponse"></p>
 
 <button type="button" id="validation">Cliquez pour valider</button>
 
</div>

<div id="auteur">
<h2> Auteur  </h2>
<ul class="propositions">
<li> Pierre Bordage </li>
<li>    Orson Scott Card</li>
<li>Roger Zelazny</li>
</ul>
</div>
 
</div>


 
 
 
 
<script>
var titre = document.getElementById("titre");
var auteur = document.getElementById("auteur");
var titres = titre.getElementsByTagName("li");
var auteurs = auteur.getElementsByTagName("li");


// solution des associations :
var  solution = { "0" : 1, "1" : 2, "2" : 0};
// tableau d'associations pour enregistrer les choix de l'utilisateur :
var associations = {};

// mise en couleur pour une association visuelle :
titres[0].style.backgroundColor = "blue";
titres[1].style.backgroundColor = "magenta";
titres[2].style.backgroundColor = "green";
 
 
// sert à enregistrer quel est le numéro du dernier titre cliqué :
var selection = -1;


 
function setNum(i) {
// selection est le numéro du titre cliqué
	selection = i;
}

function associe(i) {
// on met l'auteur cliqué de la même couleur que le dernier titre cliqué :
	auteurs[i].style.backgroundColor = titres[selection].style.backgroundColor;
// on complète le tableau d'associations :
	associations[selection +''] = i;
}



for(let i =0; i < titres.length; i++){
	titres[i].addEventListener('click', function(){setNum(i);});
	auteurs[i].addEventListener('click', function(){associe(i);});  
}

 
 
function valider(){
// si le tableau d'associations solution est le même que celui construit par l'utilisateur : gagné
// sinon : perdu
	for(let i = 0; i < titres.length; i++){
		if (associations[i+''] !== solution[i+'']) return false;
	}
	return true;
}

function ok(){
// affichage d'un smile lorsqu'on a juste et d'un sad lorsque faux :
	document.getElementById("modeemploi").style.display = 'none';
	if (valider())
		document.getElementById("reponse").innerHTML = '<img src="smile.png" alt="gagné">  ';
	else
		document.getElementById("reponse").innerHTML = ' <img src="sad.png" alt="perdu"> ';
}
 
document.getElementById("validation").addEventListener('click', ok); 

 
</script>

</body>
</html>

Le tri par sélection.

Ci-dessous, un tri par sélection est mis en oeuvre : chaque clic sur le bouton exécute une nouvelle étape du tri.

Votre objectif est :

de comprendre le principe du tri par sélection en observant les diverses étapes obtenues par clic,
d'écrire un code permettant de reproduire cette illustration du tri par sélection.

Illustration du tri par sélection.

Code à compléter.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title> tri par sélection </title>
	<style>
	#aranger{
		height: 50px;
	}
	#aranger>span{
		background-color: #FF5E4D;
	}
	</style>
</head>
<body>
 
	
<div id="aranger">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>


<button id="etape"> Cliquez ici ! </button>

<script>
// script à compléter
// commencez par écrire une boucle tirant les entiers au hasard et les plaçant 
// dans les éléments span
</script>
 
</body>
</html>

Le principe

A tout moment, on a en tête une liste bleue (vide au départ) et en queue une liste rouge (vide après la dernière étape).

A tout moment, les éléments bleus sont en ordre croissant et sont à leur place définitive.

Lorsque la liste bleue n'est plus vide, à tout moment tout élément rouge est supérieur ou égal à tout élément bleu.

Les étapes sont les suivantes :

On sélectionne un élément de valeur minimale dans les rouges.
On échange cette valeur minimale avec la valeur en tête des rouges.
Et on passe cette valeur minimale en bleu (elle devient ainsi queue de la liste bleue).
On recommence au point 1 tant que la liste rouge n'est pas vide.

Une solution

<!doctype html>

<html lang="fr">

<head>
	<meta charset="utf-8">
	<title> tri par sélection </title>
	<style>
	#aranger{
		height: 50px;
	}
	#aranger>span{
		background-color: #FF5E4D;
	}
	</style>
</head>
    
<body>
<div id="aranger">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

<button id="etape"> Cliquez ici ! </button>
 
<script>
var aranger = document.getElementById("aranger");
var nombres = aranger.getElementsByTagName('span');
var cardinal = nombres.length;

var debutrouge = 0; // indice à partir duquel les éléments ne sont pas encore rangés
var etapeMin = true; // deux types d'étape : rechercher min ou échange.
var indiceMin;

for(let span of nombres) {
	// place des entiers au hasard dans les span de l'élément id="aranger"
	span.textContent = Math.floor(Math.random() * 100);
}

function chercheMin(depart){
	// cherche élément min dans les éléments span à partir de celui d'indice depart
	// le met sur fond vert
	// retourne son indice dans le tableau des span
	let mini = parseInt(nombres[depart].textContent);
	let indiceMini = depart;
	for(let i = depart+1; i < cardinal; i++) {
		if( parseInt(nombres[i].textContent) < mini ) {
			mini = parseInt(nombres[i].textContent);
			indiceMini = i;
		}
	}
	nombres[indiceMini].style.backgroundColor = "#7FDD4C";
	return indiceMini;
}

function echange(i, j) {
	// échange les entiers des span numero i et numero j
	//  i <= j 
	let entier = nombres[i].textContent;
	nombres[i].textContent = nombres[j].textContent;
	nombres[j].textContent = entier;
	nombres[j].style.backgroundColor = "#FF5E4D";
	nombres[i].style.backgroundColor = "#B0E0E6";
}

function uneetape(){
	if (etapeMin) {
		indiceMin = chercheMin(debutrouge);
		etapeMin = false;
	}
	else {
		echange(debutrouge, indiceMin);
		debutrouge++;
		etapeMin = true;
	}
}

let etape = document.getElementById("etape");
etape.addEventListener('click', uneetape, false); 
</script>

</body>
</html>