Header
Partagez | 

[Tutoriel] Afficher du contenu aléatoirement

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Eluknow

Doyen
Bons Points (BP) : 107
Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

Message Sujet: [Tutoriel] Afficher du contenu aléatoirement   Mar 17 Juin - 17:56

Contenu aléatoire dans une page


Bonjour à tous Smile
Dans ce tutoriel nous allons voir comment afficher du contenu aléatoirement dans une page codée tout simplement en html.
Le script permettant de faire cela est en javascript.

~~ Déjà, qu'est-ce que ça signifie concrètement ? ~~
Un contenu aléatoire est un contenu, textuel ou graphique, dans une page, qui n'affiche pas la même chose une fois la page rechargée.

~~ A quoi cela peut-il bien servir ? ~~
Le contenu aléatoire est déjà utilisé pour des bannières de forum aléatoires. Il peut aussi être utilisé si vous voulez afficher plusieurs textes, mais pas tous d'un coup. Ou aussi, afficher certains logos de partenariat sur votre forum. Comme sur SoP ! Les logos des partenaires sont affichés aléatoirement Wink

Pour ceux qui ont encore des doutes concernant ce qu'on va faire, voici un aperçu du résultat final :
Aperçu:
 

Prérequis


Simplement les bases en html/css et javascript.
Il n'y a pas besoin de grosses connaissances puisque tout sera expliqué Wink

La partie HTML(5)


Nous allons prendre, pour ce tutoriel, un footer, dans lequel des citations seront affichées aléatoirement.
Notre code sera donc composé de la structure obligatoire en html5, d'un footer, et de nos citations.

Concernant la structure, on a donc :
structure:
 

Ajoutons donc ensuite notre footer :
footer:
 

Par la suite, nous allons devoir le sélectionner avec Javascript. Ajoutons-lui alors un id, qui, suite à un grand moment de réflexion, sera : footer. :p

footer:
 

Et enfin, nos citations : "Se donner du mal pour les petites choses, c’est parvenir aux grandes, avec le temps. " Samuel Becket
« L’imagination est plus importante que le savoir. » Albert Einstein
« On passe une moitié de sa vie à attendre ceux qu’on aimera et l’autre moitié à quitter ceux qu’on aime. » Victor Hugo
« La loi naturelle est l’instinct qui nous fait sentir la justice. » Voltaire
« Un peu de chagrin prouve beaucoup d’amour, mais beaucoup de chagrin montre trop peu d’esprit. » William Shakespeare

Nous allons les mettre un petit peu en page. Pour cela, rien de mieux que les span !
On aura donc :
Citations et auteurs:
 

La partie CSS(3)


Mettons donc en page nos citations et leur auteur.
Les citations seront en gras, assez grosses, en italique.
Code:
span.citations{
color: #333333; /** Couleur entre le noir et le gris **/
font-weight: bold; /** Gras **/
font-style: italic; /** Italique **/
font-family: Arial; /** Police d'écriture : Arial **/
font-size: 18px; /** Taille : 18 pixels **/
}

Et la mise en page des auteurs :
Code:
span.autor{
color: #B4AF91; /** Gris clair **/
font-size: 10px; /**Taille : 10 pixels **/
font-family: Arial; /** Police d'écriture : Arial **/
}

Ce qui nous fait donc
Code html + css:
 

La partie javascript


Bon, maintenant, il nous reste le script d'aléatoirisation (si si :p) des citations.
Ce qu'on va faire, c'est créer une fonction qu'on appellera ensuite dans le footer pour afficher les citations.
On appellera cette fonction citationsAleatoires
Donc tout simplement :
Code:
function citationsAleatoires(){
}

On va ensuite créer une variable qui contiendra toutes nos citations. Pour cela, on a besoin d'un tableau associatif.
/!\Il faut échapper les ' (apostrophes) avec des \. Et oui, puisqu'on met un élément dans un tableau de la sorte suivante : x[n] = 'texte'; si on met un guillemet dans ces guillemets, ben, le code pense que c'est le guillemet de fin et donc, la fin de l'élément. On met alors un antislash (\) avant notre apostrophe pour ne pas que notre code bug.
Code:
function citationsAleatoires(){
var citations = new Array(); /** On créé une variable citations qui est un tableau **/
/**On met toutes les citations dans le tableau **/
citations[0] = '<span class="citations">« Se donner du mal pour les petites choses, c\'est parvenir aux grandes, avec le temps.  »</span> <span class="autor">Samuel Becket</span>';

citations[1] = '<span class="citations">« L\'imagination est plus importante que le savoir.  »</span> <span class="autor">Albert Einstein</span>';

citations[2] = '<span class="citations">« On passe une moitié de sa vie à attendre ceux qu\'on aimera et l\'autre moitié à quitter ceux qu\'on aime.  »</span> <span class="autor">Victor Hugo</span>';

citations[3] = '<span class="citations">« La loi naturelle est l\'instinct qui nous fait sentir la justice.  »</span> <span class="autor"> Voltaire</span>';

citations[4] = '<span class="citations">« Un peu de chagrin prouve beaucoup d\'amour, mais beaucoup de chagrin montre trop peu d\'esprit.  »</span> <span class="autor">William Shakespeare</span>';

}

Maintenant, on va créer une seconde variable, qui se chargera de prendre aléatoirement l'une de ces 5 citations du tableau.
Nous allons l'appeler "result".
Code:
function citationsAleatoires(){
//Le tableau
var result = Math.floor(Math.random()*citations.length);
}

Quelques explications s'imposent, je suis d'accord.
Dans le code-ci dessus sont utilisées deux fonctions prédéfinies de javascript : Math.floor et Math.random.
Math.floor se charge d'arrondir un entier à l'unité près (donc pas de 0.1 1.5892 mais 0 et 2)
Math.random se charge de retourner un nombre décimal ou non compris entre x et y nombres.

On indique à Math.random la longueur du tableau (ici 4, vu que nous avons 5 citations et que la première est indexée à 0), afin qu'elle charge un nombre compris entre 0 (nombre prédéfini dans la fonction dès le début) et la valeur maximale du tableau soit 4.

Du coup, je traduis notre code précédent :
variable result égale un nombre entier choisi entre 0 et la valeur maximale du tableau

Ainsi, ça y est !
Notre script choisit bien à chaque chargement de page un nombre différent du tableau, donc, une citation différente !

Afin de pouvoir afficher le résultat dans notre code, nous devons là aussi nous poser quelques questions :
Comment doit être affiché le contenu ? Il doit être affiché avec de la mise en page, donc, on oublie toute idée d'iframe.
Où doit-il s'afficher ? Il doit s'afficher dans la balise footer.

Du coup, on en conclut assez aisément, qu'il suffit de sélectionner en javascript, notre balise footer, et de lui ajouter la citation choisie.
Pour cela, nous allons utiliser la fonction la plus adéquate à cela :
getElementById() : qui nous permet de sélectionner une balise par son id

Nous aurons donc :

Code:
document.getElementById('footer').innerHTML = citations[result];

Notre script javascript complet ressemble alors à :
Script js:
 

Troisième partie : assemblage !


Bon, et bien maintenant que le code est prêt en différentes parties, assemblons-le !
Pour cela, on met notre script js dans le head à l'aide des balise script, et on appelle cette fonction dans le footer !

Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Tutoriel - contenu aléatoire</title>

<style type="text/css">

span.citations{
color: #333333; /** Couleur entre le noir et le gris **/
font-weight: bold; /** Gras **/
font-style: italic; /** Italique **/
font-family: Arial; /** Police d'écriture : Arial **/
font-size: 18px; /** Taille : 18 pixels **/
}

span.autor{
color: #B4AF91; /** Gris clair **/
font-size: 10px; /**Taille : 10 pixels **/
font-family: Arial; /** Police d'écriture : Arial **/
}
</style>
<script type="text/javascript" language="javascript">
function citationsAleatoires(){

var citations = new Array();

citations[0] = '<span class="citations">« Se donner du mal pour les petites choses, c\'est parvenir aux grandes, avec le temps.  »</span> <span class="autor">Samuel Becket</span>';

citations[1] = '<span class="citations">« L\'imagination est plus importante que le savoir.  »</span> <span class="autor">Albert Einstein</span>';

citations[2] = '<span class="citations">« On passe une moitié de sa vie à attendre ceux qu\'on aimera et l\'autre moitié à quitter ceux qu\'on aime.  »</span> <span class="autor">Victor Hugo</span>';

citations[3] = '<span class="citations">« La loi naturelle est l\'instinct qui nous fait sentir la justice.  »</span> <span class="autor"> Voltaire</span>';

citations[4] = '<span class="citations">« Un peu de chagrin prouve beaucoup d\'amour, mais beaucoup de chagrin montre trop peu d\'esprit.  »</span> <span class="autor">William Shakespeare</span>';

var result = Math.floor(Math.random()*citations.length);

document.getElementById('footer').innerHTML = citations[result];
}</script>
</head>
<body>
<footer id="footer"><script type="text/javascript">citationsAleatoires();</script></footer>
</body>
</html>

Bonus : Un bouton de rechargement ?


Tout ce code est bien, mais comment fait-on si on veut, sans avoir à actualiser la page, que le script se relance ?
Pour ça, il suffit d'un petit bouton tout bête !
Pour faire simple, je vais me contenter d'un texte dans une balise span.
Code:
<span>On recommence ! </span>

Et, au clic sur ce texte, on réutilisera le script. Ce qui signifie...
Code:
<span onclick="citationsAleatoires();">On recommence ! </span>

Afin de montrer que c'est un bouton, je vais lui ajouter un peu de mise en page :
Code:
<span onclick="citationsAleatoires();" style="cursor: pointer; border: 1px solid black;">On recommence ! </span>

Rajoutez ce span, où vous le souhaitez entre les balises <body> </body>, et regardez, ça fonctionne Wink.




Le tutoriel est à présent terminé ! Soyez créatifs, imaginatifs et personnalisez/utilisez à votre guise ce tutoriel !


Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussigné, Eluknow, accepte qu'un directeur reposte le présent tutoriel "Afficher du contenu aléatoirement" tel que je l'ai rédigé.
Revenir en haut Aller en bas



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

[Tutoriel] Afficher du contenu aléatoirement
Page 1 sur 1
 Sujets similaires
-
» Tutoriel Afficher les fichiers cachés sous Windows Vista / Seven
» [Résolu] Problème à propos du tutoriel ''Afficher/Cacher les infos du profil''
» afficher les guillemets d'une chaine.
» Tutoriel de Jetico Personal Firewall
» Afficher une image un plein écran
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+