Forum d'entraide PHPFrance

Bonsoir,

Je ne suis qu'une amatrice en matière de code en jquery. Mais j'ai tout de même essayé de reproduire quelques lignes que nous avait montré notre professeur les modifiant à ma sauce. J'ai dû merder quelque part parce que il ne fonctionne pas (pourtant c'est trois lignes…) cependant j'ai vérifié et il est bien détecté quand je met une alerte.
J'aurais besoin d'aide et d'explications suffisamment simples pour que je comprenne (et que je vous suive…) ^^

L'idée c'est de faire en sorte à ce que les lignes apparaissent de façon aléatoire sur l'écran. Voici mon code :

$(function(){
$(".place").each(function(){
$(this).css("top", getRandomInt(5,800)).css("left", getRandomInt(5,800));

});
});

Comme il va chercher dans le css je ne sais pas si je dois vous le copier, ou copier mon html… N'hésitez pas à me demander !

Merci de votre aide,

Cinemastock

Bonjour, voici une explication.

D'abord pour comprendre voici un exemple qui décortique le programme :

<div class="place vert">Cadre exemple n°1</div>
<div class="place orange">Cadre exemple n°2</div>
<div class="place rouge">Cadre exemple n°3</div>
<style>
.place {
	width : 200px;
	height : 200px;
	position: absolute;
}
.vert {
	background-color: green;
}
.orange {
	background-color: orange;
}
.rouge {
	background-color: red;
}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
	//définir la plage min/max pour tirer un entier au hasard
	var min = 5;
	var max = 800;
	//ici la plage compte (800-5 = 795)+1 = 796 points possibles
	//donc il faut trouver au hasard un point des 796 points possibles allant de 5 jusqu'à 800
	//en math ça s'écrit : (x% * (800 - 5 + 1)) + 5 où x% est un pourcentage de probabilité (hasard)
       //par exemple : 50% de 796 = 398 donc le point à trouver est le 398 ième à partir de 5.  => 398 + 5 = 403 (milieu de la plage [5,800])
	//donc la bonne formule est : (hasard * (max - min + 1)) + min
	//en php => (Math.random() * (max - min + 1)) + min
	//mais puisque Math.random() est un pourcentage il faut convertir le tout en entier pour éviter les fractions
	//pour cela on utilise : Math.floor(Math.random() * (max - min + 1)) pour convertir le nombre trouvé en entier
	//ce qui donne : Math.floor(Math.random() * (max - min + 1)) + min; donc qui retourne un nombre entier entre min et max compris 
	
	//parcourir tous les éléments html stylés par la classe ".place"
	$(".place").each(function(){
	
		//déterminer les points top et left au hasard entre min et max
		var point_top = Math.floor(Math.random() * (max - min + 1)) + min;
		var point_left = Math.floor(Math.random() * (max - min + 1)) + min;
	
		//tout élément html stylé par la classe ".place" sera placé à la position top/left définie au hasard
		$(this).css("top", point_top).css("left", point_left);
	});
});
</script>

Et voici une simplification qui rebondit sur ton programme initial :

<div class="place vert">Cadre exemple n°1</div>
<div class="place orange">Cadre exemple n°2</div>
<div class="place rouge">Cadre exemple n°3</div>
<style>
.place {
	width : 200px;
	height : 200px;
	position: absolute;
}
.vert {
	background-color: green;
}
.orange {
	background-color: orange;
}
.rouge {
	background-color: red;
}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
	$(".place").each(function(){
		//ici on utilise directement une fonction getRandomInt qui s'occupe de déterminer un point au hasard
		$(this).css("top", getRandomInt(5,800)).css("left", getRandomInt(5,800));
	});
});
/**
 * Création de la fonction getRandomInt 
 * qui doit retourner au hasard un entier entre min et max compris
 */
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>

*
Moralité : Ce qu'il te manquait c'est la déclaration de la fonction getRandomInt(min, max) car elle ne fait pas partie des fonctions de base de javascript
Voilà.

Merci sadeq pour ton aide ! Ça marche du tonnerre !