Le but de cet article est de vous présenter quelques exemples de scripts en javascript qui exploitent un autre fichier JS externe et qui decrit la liste des hôtesses connectées en ce moment.
A partir de ces scripts, vous pourrez les récuperer pour vos sites ou pourquoi pas en créer des nouveaux...


Notre premier script

Commençons par la base :

http://public.carpediem.fr/js/live.js

decrit les salons ouverts et quelles sont les hôtesses présentes. Ce fichier créé un tableau JavaScript avec les Salons ouverts et avec quelle hôtesse.

Pour afficher les feeds sans mises en forme de tous les salons ouverts, le script pourrait ressembler à ça :
for(var i=0; i<=Salon.length; i++){ ... } Initialise une boucle parcourant tous les salons
if(Salon[i]) { ... } Si pour ce salon, nous avons un pseudo, le salon est considéré comme ouvert
document.write('<img src="http://feeds-live.carpediem.fr/java/feed/'+ i +'/140.jpg"> '); Nous affichons pour ce salon un feed en 140 px de large


Slide show des feeds des salons ouverts

Tout cela est bien, mais essayons de faire un système slideshow.
Pour cela, nous allons utiliser une méthode javascript qui s'appelle setInterval(F, T); qui permet de lancer une fonction F toutes les T millisecondes
var i=0; Ca sera notre compteur. Comme le script précédent, i représente le salon qu'on vérifie en ce moment
if(i>Salon.length) { i=0; } Si nous avons vérifier tous les salons, nous revenons au premier
if(Salon[i]) { document.IMG.src = 'http://feeds-live.carpediem.fr/java/feed/'+ i +'/140.jpg'; i++; } Si le salon est ouvert, on change l'image et on la remplace par celle ci. On incremente notre compteur
else { i++; change_feed(); } Si le salon n'est pas ouvert, on essaye le prochain
setInterval('change_feed();', 2000); On rechange l'url de notre image toutes les 2s


Le problème de ce script c'est qu'il manque un peu de dynamisme... L'utilisateur aurait presque envie de croire que c'est une image animée, que tout cela n'est pas en direct...

Il aurait été intéressant de rajouter un texte en dessous qui permet de préciser le nom de l'hôtesse qui est présente sur le feed.

Amélioration de notre Slide show

Le problème pour afficher un nom de façon dynamique, nous allons devoir passer par du DHTML... Galère, même si la plupart de notre clientèle est sur IE, il est déconseillé d'oublier les autres navigateurs. Et comme nous allons le voir, nous allons passer par une petite bibliothèque bien sympathique qui va nous enlever cette difficulté de compatibilité



Pour ce 3ieme script, nous utilisons un fichier JS externe qui s'appelle 1k.js, ce fichier vous permettra de vous faciliter la vie pour vos scripts de DHTML fonctionnant sur tous navigateurs...
Dans notre cas, on l'utilise juste pour redéfinir le contenu d'un calque, mais vous pouvez l'utiliser pour le déplacer, le découper, le redimensionner, etc...

Je vous conseille d'aller regarder la documentation sur
http://www.dithered.com/experiments/1kdhtml/subsets/mini1k.html

Comme son nom le precise, le fichier ne fait que 1k, il est donc relativement très petit (mais difficilement lisible :-/ )
<div id=PSEUDO style="position:relative;"> </div> On créé un calque vide PSEUDO. (le position:relative; est utile car sans cela, certains navigateurs considèreront le calque comme inexistant)
var c=gE('PSEUDO'); Créé une reference de notre calque PSEUDO
wH(c, "<b>En direct : </b>"+ Salon[j]); Fonction de 1k.js qui recréé le contenu de PSEUDO avec la phrase "En direct: nom_hotesse"


Comme PSEUDO est un calque, rien nous empêche de le mettre où bon nous semble :



Pour cette exemple, nous avons juste modifié un peu les propriétés de notre calque :
<div id=PSEUDO2 style="position:relative;top: -60; width: 140;" align=center>,

et aussi modifier la forme du texte inseré dedans :
<table bgcolor=black cellpadding=0 cellspacing=0><tr><td><font color=white><B>Blablabla</b></font><td><tr></table>

Un p'tit dernier pour la fin?

Bon imaginons autre chose alors....
Une liste déroulante avec les hôtesses présentes, et quand l'utilisateur sélectionne l'hôtesse dans la liste déroulante, cela change le feed....



<form name=formu_test>
            <select name=select_fille onchange="change_fille();"><option value=0 selected>Selectionner l'hotesse</select>
            ...
</form> 		On créé un formulaire que nous allons nommer formu_test, une liste déroulante vide qu'on nommera select_fille
On rajoute aussi le lancement de la fonction change_fille() dans le cas où l'utilisateur a sélectionné quelque chose dans la liste déroulante
for(var i=0; i<=Salon.length; i++)
{
if(Salon[i]) {
        var new_option = new Option(Salon[i],i);
        document.formu_test.select_fille.options[document.formu_test.select_fille.options.length] = new_option;
      }
} 		A partir de notre tableau contenant la liste des hôtesses présentes, nous remplissons la liste déroulante formu_test... En label de l'option, nous mettons le nom de l'hôtesse, et en valeur de l'option le numéro du salon.
<img name="IMG5" src="http://public.carpediem.fr/dialer/images/espaceur.gif" width="140" height="105"> Nous créons une image IMG5 contenant une image vide au tout début, elle contiendra le feed du salon ouvert sélectionné par l'utilisateur.
function change_fille()
{
      if(document.formu_test.select_fille.selectedIndex)
      {
            document.IMG5.src = 'http://feeds-live.carpediem.fr/java/feed/'+ document.formu_test.select_fille.options[document.formu_test.select_fille.selectedIndex].value +'/140.jpg';
      }
}
 change_fille() est la fonction appelée quand l'utilisateur a choisi une hôtesse dans la liste déroulante
Si l'utilisateur a choisi un élément autre que le premier ("Selectionner l'hotesse"), on change l'url de IMG5 et on affiche le feed du salon choisi


Voilà... Après quelques exemples de scripts basés sur un simple tableau contenant la liste des hôtesses présentes sur le liveshow Carpe Diem, vous êtes capables de créer vos propres scripts.
Pourquoi nepas expérimenter une nouvelle forme de promotion par exemple...
Et puis si on regarde le fichier http://public.carpediem.fr/js/live.js, on se rend compte que la structure du fichier est très simple.
Il vous serait possible pour un autre projet, de créer votre propre fichier .js automatiquement via un perl qui tournerait en cron (on peut comparer grossièrement cron au planificateur de tâches de windows) et qui génererait pour vous un nouveau .js automatiquement, et ce js serait lu et inteprété dans vos pages...

Et pour finir, quelques références à des livres et sites sur le javascript mais aussi le CSS :

SITES:
Initiation JS : http://www.commentcamarche.net/javascript/jsintro.php3
Initiation CSS : http://www.commentcamarche.net/css/cssintro.php3
Initiation DHTML : http://www.commentcamarche.net/dhtml/dhtmlintro.php3
Base de JS de qualité : http://www.dynamicdrive.com/
la lib 1k.js : http://www.dithered.com/experiments/1kdhtml/index.html


LIVRES:
Reference JS : Le dictionnaire JavaScript de chez Micro Application
Autre référence JS : JavaScript 1.5 Mini Reference chez OEM
La bible JS : Javascript la reference (4ieme edition) chez O'Reilly
CSS : CSS précis et concis de chez O'Reilly
Pour commencer avec Exercices : Le tout en Poche - Javascript de chez CampusPress