• E SYSTEMES LIVE • par Jean-Pierre / Google + • ~ 3 mn

Affichez un contenu différent à chaque visite sur votre home page

voir un exemple dans une fenêtre PopUp(une fois le PopUp affiché, regardez la source !)

Grâce à Javascript utilisé coté client, une fonction et quelques lignes de code, voyons comment la page d’accueil de votre site peut se montrer différente à chaque chargement. Un moyen briser la monotonie des pages HTML statiques quand on ne dispose pas de moyen de générer des pages dynamiques coté serveur avec les SSI, Lasso, Php ou une autre CGI*…

Comme souvent, la mise en oeuvre d’un script Javascript implique la description d’une fonction dans l’entête du fichier HTML, entre les balises et , le code Javascript est encadré des balises , comme suit :

<script type="text/javascript"><!--... Ici le code d'appel de la fonction ...// --></script>

et l’appel de cette fonction se fait dans le corps de la page (entre les balises ) comme nous le verrons plus bas.

1/ la fonction dans l’entête du fichier HTML

Nous l’avons appellé “affiche()”. Vous pouvez choisir n’importe quel nom…On commence par déclarer la fonction :

function affiche(){...le code à exécuter à l'appel de la fonction...}

Première chose dans le code à exécuter par le navigateur, déclaration d’une variable que nous appellerons “Code” égale à un “tableau” ou “array”, en code Javascript, de 4 éléments, 4 “cases” de mémoire qui vont être les 4 contenus qui vont s’afficher aléatoirement. Le tableau contient autant d’éléments que vous le souhaitez, dans notre exemple : 4.

Code = new Array(4);

Attention ! Les “array” sont numérotés à partir de “0”, nous allons “remplir” les 4 “cases” du tableau/array en les déclarant successivement dans une variable que nous appellons “element”. (on peut appeler les variables comme on veut, tant qu’il n’y a pas de caractères spéciaux -é, ç, /, etc – ni d’espace dans le nom choisi.)
Le premier élément du tableau est le “0” :

element ="...ici tout le code HTML de l'élément...";

Tous les guillemets sont des apostrophes…Les accents et caractères spéciaux sont en HTML (é = é “ = ") et les apostrophes s’écrivent “’”(précédé d’un anti-slash)…

On déclare que l’élément “0” de notre variable “Code”, le premier élément du tableau est “element”. Cela s’écrit :

Code[0]=element

On réitère pour les 3 autres éléments …

Enfin, on va choisir au hasard un élément du tableau entre le nombre total d’éléments disponibles en déclarant la variable “numero” égale à un chiffre choisi entre 1 et le nombre d’éléments…

numero = Math.floor(Math.random() * Code.length);

Le résultat de notre fonction sera d’écrire dans le document l’élément choisi dans le tableau/array “Code”…

document.write(Code[numero]);

Nous sommes prêts à appeller la fonction !

2/ l’appel de cette fonction dans le corps de la page

A l’endroit où nous souhaitons afficher les éléments aléatoires nous plaçons l’appel de la fonction comme ceci :

<script language="JavaScript" type="text/javascript">affiche()</script>

Le code s’exécute et le tour est joué !

Pour afficher plusieurs contenus différents à des endroits différents, vous pouvez créer simplement plusieurs fonctions, par exemple affiche1(), affiche2(), etc. Vous appelez ces fonctions où vous souhaitez afficher un contenu “changeant”…


*SSI : Server Side Includes. Permet pour les serveurs équipés de modifier dynamiquement certains éléments des pages web coté serveur avant de les envoyer au navigateur client.

Lasso : une CGI de Lassosoft (ex:Omnipilot) pour la création d’applications web connectées à des bases de données, préférée et utilisée par E SYSTEMES, notament pour notre site. Certains éléments du site sont différents à chaque visite grâce à un script Lasso qui assemble coté serveur une page alléatoirement différente à chaque requête.
Le site de lassosoft

Php : Hypertext Preprocessor, un langage de création de pages dynamiques.

CGI : Common Gateway Interface, désigne de façon générique les scripts appliqués aux fichiers coté serveur avant l’envoi au navigateur.

Web, applis & solutions