Pti nénuphare

La méthode random() de l’objet Math de JavaScript permet de générer un nombre aléatoire certes… Mais compris entre 0 et 1. Nous allons voir ici comment créer une fonction nous permettant de générer un nombre aléatoire compris entre deux nombres que nous indiquerons en arguments.

La fonction aleatoire()

Commençons déjà par créer le début de notre fonction :

1
2
3
4

function aleatoire(minimum, maximum)
{
	return Math.round(Math.random());
}

Nous générons ici un nombre aléatoire compris entre 0 et 1 que nous arrondissons avec la méthode round(). Nous obtiendrons donc soit 0, soit 1. Ce n’est pas encore ce que nous voulons.

Nous avons un minimum à atteindre. Par exemple si nous indiquons 100 en minimum, nous aimerions bien que si la méthode random() renvoie 0, la fonction aleatoire(), elle, nous renvoie 100. Pour cela, il suffit d’ajouter le minimum au nombre généré.

1
2
3
4

function aleatoire(minimum, maximum)
{
	return Math.round(minimum + Math.random());
}

Nous obtenons donc un nombre aléatoire compris entre minimum et… minimum + 1. Ce n’est pas encore ça, même si on s’approche du résultat.
Pour atteindre le maximum, nous devons modifier le nombre aléatoire renvoyé par random(), mais pas n’importe comment évidemment. En fait, il suffit de réfléchir logiquement. En effet, si random() renvoie 1, il faut que aleatoire() renvoie la valeur de l’argument maximum. Si on oubliait le minimum, on penserait à multiplier le nombre de random() par le maximum : on obtiendrait un nombre compris entre 0 et maximum.
Cette opération qui paraît logique, nous pouvons l’utiliser pour utiliser notre minimum. Pour le moment, nous ajoutons minimum à un nombre aléatoire simple. Nous devons donc ajouter minimum à un certain nombre de sorte à atteindre le maximum si random() renvoie 1. On ne peut pas ajouter le maximum : faites l’essai avec des exemples simples, vous verrez que ça ne fonctionne pas (du tout). Si on multiplie le nombre aléatoire par le maximum, on se retrouve avec un nombre compris entre minimum et (minimum + maximum). Ça ne va pas. Mais justement, ce (minimum + maximum) ne vous donne-t-il pas une idée ? Si on multipliait par la différence qu’il y a entre le maximum et le minimum, qu’obtiendrions-nous ? La réponse est un nombre compris entre minimum et maximum.

1
2
3
4

function aleatoire(minimum, maximum)
{
	return Math.round(minimum + Math.random() * (maximum - minimum));
}

Preuve

On peut prouver avec des outils mathématiques que nous obtenons bel et bien un nombre compris entre minimum et maximum.
Soit x le nombre renvoyé par random().
Soit m le minimum voulu.
Soit M le maximum voulu.

0 ≤ x ≤ 1
⇔ 0 ≤ x(M - m) ≤ M - m
⇔ m ≤ m + x(M - m) ≤ m + (M - m)
⇔ m ≤ m + x(M - m) ≤ M

C.Q.F.D.

C’est un problème rencontré dans des cas spéciaux : on a un webdesign et on veut qu’il prenne toute la hauteur de l’écran. La solution peut paraître simple au premier abord. On pourrait en effet penser que seul suffit :

1
2
3
4

body
{
	height: 100%;
}

Et là, on teste et c’est le drame, rien n’a changé !

À quoi est dû ce problème ? De nulle part ? Un bug ? Non, pas du tout.
Il suffit de bien regarder votre document HTML pour voir l’origine du soucis. La balise body possède un parent : la balise html. Si la balise html n’a pas de hauteur spécifiée, elle prendra la hauteur que prend votre document et rien de plus, même s’il reste de la place disponible sur l’écran. La balise body, lorsque vous lui spécifiez une hauteur, se réfère à la balise html dans le cas d’un pourcentage. Que faire alors ? Donner une hauteur de 100% à la balise html, tout simplement.

1
2
3
4
5
6
7
8
9

html
{
	height: 100%;
}
 
body
{
	height: 100%;
}

Ou plus condensé :

1
2
3
4

html, body
{
	height: 100%;
}

En JavaScript, on peut ajouter un événement à un élément facilement avec DOM. Par exemple :

1

element.addEventListener('click', action, false);

Seulement, il vous est peut-être déjà arrivé, avec un lien notamment, d’indiquer l’événement directement en HTML :

1

<a href="#" onclick="action(); return false;">Lien</a>

Vous notez donc le return false; qui permet d’éviter que le lien ne vous conduise vers le href comme il devrait normalement le faire. Il existe d’autres façons de faire cela, comme mettre ce return false; dans la fonction elle-même et retourner ce que la fonction retourne mais ce n’est pas le sujet.

Ici, nous nous intéressons donc à la méthode addEventListener(). Si vous avez essayé de faire un return false; avec, vous avez sûrement eu une très bonne conclusion, pertinente et tout ce qu’il faut : “rah mais pourquoi ça marche pas cette merde ?!”. Et vous aurez eu raison !
En effet, si vous faites cela par exemple :

1

element.addEventListener('click', function(){action(); return false;}, false);

Ça ne fonctionne pas !
Vous pouvez en tester d’autres du même genre mais ils ne seront pas précisés ici, car mon but n’est pas de vous montrer des codes non fonctionnels…

La solution c’est d’utiliser une méthode pour annuler l’effet premier de l’événement. Cette méthode est une méthode liée à l’événement lui-même et elle se nomme preventDefault(). Vous vous dites alors comme récupérer l’événement lui-même ? C’est une simple variable passée à la fonction, rien de plus simple !
Voici un exemple :

1

element.addEventListener('click', function(evt){action(); if (evt.preventDefault) {evt.preventDefault();}}, false);

Vous pouvez également l’utiliser comme ceci :

1

element.addEventListener('click', function(evt){action(evt);}, false);

Et ajouter à la fonction action() ceci :

1
2
3
4
5

function action(evt)
{
	if (evt.preventDefault)
		evt.preventDefault();
}

Je vous conseille cette dernière méthode car plus lisible.

Et voila, avec ça, plus de problème !

Voici un article dans la lignée de celui qui indiquait la méthode pour utiliser PHP dans un CSS. En effet, ici, nous allons voir comment créer un CSS qui change au fil des saisons. Pour cela, nous passerons par le PHP, vous verrez ce n’est pas très compliqué.
Évidemment, pour comprendre ce tutoriel, vous devez savoir utiliser PHP dans le CSS, donc plutôt que de réexpliquer, je vous renvoie au lien cité plus haut.

Le principe

Nous allons définir ce qu’il faut dans cette partie. En effet, il faut nous mettre d’accord sur les dates des saisons…
Je vais ici proposer les dates, vous pourrez les modifier facilement.
Voici donc :

• Printemps : entre le 21 mars et le 21 juin (exclus)
• Été : entre le 21 juin et le 21 septembre (exclus)
• Automne : entre le 21 septembre et le 21 décembre (exclus)
• Hiver : entre le 21 décembre et le 21 mars (exclus)

Le code

Maintenant, entrons dans le vif du sujet : le code lui-même.
Nous débuterons le script en créant quelques timestamp. En effet, nous allons créer les timestamp des limites des saisons afin de pouvoir ensuite les comparer au timestamp actuel pour vérifier dans quelle saison nous sommes.
Pour cela, nous utilisons la fonction mktime() avec 0 pour les heures, minutes et secondes, la limite vue plus haut pour le jour et le mois et enfin l’année courante pour l’année.
Cela nous donne ce code :

1
2
3
4
5
6

<?php
$printemps = mktime(0, 0, 0, 3, 21, date('Y'));
$ete = mktime(0, 0, 0, 6, 21, date('Y'));
$automne = mktime(0, 0, 0, 9, 21, date('Y'));
$hiver = mktime(0, 0, 0, 12, 21, date('Y'));
?>

Ensuite, nous allons simplement créer une condition pour savoir dans quelle saison nous nous situons. Pour le savoir, il suffit de récupérer le timestamp actuel avec time() puis de le comparer aux timestamp créés.
Ainsi, par exemple, pour savoir si nous sommes en été, il suffit de vérifier si le timestamp actuel est supérieur ou égal à celui du 21 juin et s’il est inférieur à celui du 21 septembre.

Attention cependant, le cas de l’hiver est spécial. En effet, l’hiver apparaît à partir du 21 décembre, mais est présent au début de l’année également ! Je vais d’abord vous montrer le code. Si vous ne comprenez pas, ne vous inquiétez pas, je commente le cas de l’hiver juste après.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php
$printemps = mktime(0, 0, 0, 3, 21, date('Y'));
$ete = mktime(0, 0, 0, 6, 21, date('Y'));
$automne = mktime(0, 0, 0, 9, 21, date('Y'));
$hiver = mktime(0, 0, 0, 12, 21, date('Y'));
$actuel = time();
 
if ($actuel >= $hiver or $actuel < $printemps) // Hiver
{
	// Styles appliqués en hiver
}
elseif ($actuel >= $printemps and $actuel < $ete) // Printemps
{
	// Styles appliqués au printemps
}
elseif ($actuel >= $ete and $actuel < $automne) // Été
{
	// Styles appliqués en été
}
elseif ($actuel >= $automne and $actuel < $hiver) // Automne
{
	// Styles appliqués en automne
}
?>

Nous retrouvons au début nos timestamp créés et celui actuel, rien de spécial.
Viennent ensuite les conditions. Comme vous pouvez le voir pour le printemps, l’été et l’automne, il n’y a rien de spécial : on vérifie comme je l’avais dit si le timestamp est compris dans les limites de la saison.
Cependant, la condition pour l’hiver est légèrement différente… Heureusement elle n’est pas plus compliquée que les autres. En effet, nous vérifions simplement si le timestamp actuel est plus supérieur ou égal à celui du commencement de l’hiver de l’année courante. Ainsi, la condition renverra vrai si nous nous situons entre le 21 décembre et la fin de l’année. Nous vérifions ensuite si nous nous trouvons avant le commencement du printemps. Avec or, seule l’une des conditions a besoin d’être remplie, donc il nous faut être au début ou à la fin de l’année pour obtenir l’hiver.

Voila pour ce tutoriel, si vous rencontrez des problèmes avec le script, n’hésitez pas.

Pixelics est une communauté réunie autour du graphisme et du développement web. Si je vous en parle, c’est que c’est un site qui vient juste d’ouvrir et dont je suis un des deux fondateurs, tout simplement !

C’est donc avec Kakolio que je développe Pixelics depuis plusieurs mois déjà.
Sur Pixelics, vous pourrez donc parler de développement web et de graphisme en exposant vos soucis par exemple, ou encore en parlant de l’actualité de ces domaines, etc., le tout dans un forum entièrement créé par nous-mêmes.
De plus, un module de commandes est présent, via lequel vous pourrez commander une réalisation graphique, un script ou même un site complet.

Bref, n’attendez plus, c’est par là que ça se passe : Pixelics !