Boîte de nouvelles (script)

WebExpert 3.0 vous permet de créer une boîte de nouvelles : cliquez sur le bouton Boîte de nouvelles (script) pour lancer la procédure de création par l'assistant.

1. Boîte de nouvelles, réalisée avec l'assistant

2 .Script et éléments insérés par l'assistant

a) Dans la section <HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- debut du script
var pos1=0, pos2=0, nouvDelai, Fin2, MsgN;
function TexteMultiligne(nouvDelai1) {
nouvDelai = nouvDelai1;
if (pos1 > MsgN.length) {
document.formnouv.multi1.value = '';
pos1 = 0;
pos2 = 0;
}
else if (MsgN.substring(pos1-2,pos1-1) == '.') {
document.formnouv.multi1.value = '';
pos2 = pos1-1;
pos1++;
}
else {
document.formnouv.multi1.value = MsgN.substring(pos1,pos2);
pos1++;
}
Fin2 = setTimeout("TexteMultiligne(nouvDelai) ", nouvDelai1);
}
// fin du script -->
</SCRIPT>

b) Dans l'élément <BODY>

<BODY onLoad="MsgN='Votre éditeur HTML pour le prochain millénaire vient de sortir...
WebExpert 2000 vous donne encore plus de possibilités pour créer facilement vos sites Web.
Nous nous associons à Visicom Media pour vous souhaiter un bon travail avec cette nouvelle version.';
TexteMultiligne(100);" onUnload="clearTimeout(Fin2)">

c) Endroit du curseur (corps du document)

<FORM NAME="formnouv">
<TEXTAREA NAME="multi1" WRAP=PHYSICAL COLS="67"" ROWS="3">
</TEXTAREA>
</FORM>

3. Explication

L'élément conteneur de la boîte de nouvelles est ici un élément <TEXTAREA>, qui est un champ de saisie multiligne, c'est à dire, qui permet la saisie d'un texte pouvant contenir plussieurs lignes, par opposition à <INPUT> qui est un champ de saisie d'un texte d'une taille inférieure à une ligne.

Attributs de la balise <TEXTAREA>

Le but du script est de fournir comme contenu (value) au champ multiligne les nouvelles que l'on a saisies dans l'assistant. Comme le but de ce script est de fournir l'affichage de nouvelles, on détermine que chaque nouvelles est terminée par un point (.) : ceci est important à connaître car, nous le verrons, le script va rechercher les caractères (.) pour vider la zone de saisie et recommencer à zéro le déroulement du texte !

Donc, le script va devoir effectuer plusieurs tâches :

Des variables sont donc créées :

var pos1=0, pos2=0, nouvDelai, Fin2, MsgN;

La procédure qui va générer l'affichage des nouvelles [(TexteMultiligne()] va donc éffectuer les différentes actions décrites ci-dessus :

Attribuer le texte des nouvelles au champ multiligne [celui-ci est inséré dans un élément <FORM>, identifié par (formnouv)] qui est lui-même identifié (NAME=multi1), ce qui va permettre l'attribution de son contenu par :

document.formnouv.multi1.value=

Comme ce qui est voulu n'est pas l'affichage d'un bloc des nouvelles, on va employer la méthode substring (expliquée dans la section "Commandes Javascript en bref) qui va extraire le contenu e la chaîne des nouvelles, caractères par caractères. Pour que le texte des nouvelles s'affiche de cette manière, tenant compte du fait que les caractères affichés précédemment doivent rester affichés, il faut créer deux variables (pos1 et pos2) qui vont déterminer la partie de chaîne à extraire, dont l'une (pos1) va s'incrémenter (pos1++) d'un caractère à chaque exécution de la fonction (le timer déterminant le délai (msec) entre les exécutions de la procédure.

document.formnouv.multi1.value = MsgN.substring(pos1,pos2);

La variable (pos2) va permettre en plus d'enregistrer la position où est arrivée l'extraction (substring) dans le cas où un caractère (.) est rencontré dans la chaîne.

Étapes particulières

Une instruction conditionnelle (if) va réaliser les différentes vérifications :

Réaffichage des nouvelles

En premier lieu, quand la totalité de la chaîne des nouvelles a été extraite, il faut recommencer son affichage, mais en plus, réaliser l'effet de remise à 0 du contenu de la zone de saisie. Ceci est effectué par l'instruction suivante :

if (pos1 > MsgN.length) {
document.formnouv.multi1.value = '';
pos1 = 0;
pos2 = 0;
}

La vérification qui consiste à savoir si la longueur totale de la chaîne cortrepondant aux nouvelles est atteinte est effectuée par (pos1 > MsgN.length). Dans ce cas, le contenu de la zone de saisie (multi1, contenu dans formnouv) est remis à zéro, plus exactement, son contenu est vidé (null) par (document.formnouv.multi1.value = ''), ensuite les variables pos1 et pos2 sont également remises à 0 pour que la fonction puisse de nouveau afficher la chaîne des nouvelles, depuis son début.

Affichage différent pour les différentes nouvelles

Comme dit plus haut, il est entendu que les nouvelles (dans le cas où il n'y a qu'une seule phrase, c'est plutôt le javascript "Bannière" qui doit être employé) sont séparées entre elles par un point (on aurait pu choisir un autre caractère). Donc, la fonction doit efectuer une recherche continuelle de ce caractère pour ainsi, lorsqu'il est trouvé, réaliser la mise à zéro (null) de la zone de saisie et affichage de la deuxième nouvelle. Ceci est réalisé par l'instruction suivante :

else if (MsgN.substring(pos1-2,pos1-1) == '.') { document.formnouv.multi1.value = ''; pos2 = pos1-1; pos1++; }

On effectue la recherche du caractère (.) par (MsgN.substring(pos1-2,pos1-1) == '.') qui vérifie si le carcatère précédent la position actuelle est bien un (.). Si oui, le contenu de la zone de saisie est vidé ('') et on attribue à ce moement précis la valeur de la position actuelle du déroulement (pos1) à la variable (pos2) pour ainsi pouvoir continuer l'affichage du reste de la chaîne, à partir de l'endroit situé après le caractère (.) qui vient d'être détecté.

Cette vérification va s'effectuer jusqu'au prochain caractère (.) détecté et dans le cas où il n'y en aurait plus (avant la fin de la chaîne), la première instruction décrite serait à nouveau remplie, et mise à vide de la zone de saisie + réaffichage des nouvelles réalisés.

Affichage proprement dit de la chaîne des nouvelles

Si les deux premières instructions conditionnelles ne sont pas remplies (pas de caractère (.) détecté et pas au bout de la chaîne (MsgN.length), l'affichage caractères par caractères est effectué par incrémentation de la variable (pos1++) qui donc, contient progressivement toute la chaîne des nouvelles (MsgN).

Le timer (Fin2 = setTimeout("TexteMultiligne(nouvDelai) ", nouvDelai1)) relance la fonction après le délai défini par défaut (100msec).

L'identificateur (Fin2) permet l'annulation du compte à rebours [initialisé par setTimeout()] par la méthode clearTimeout() ( qui annule l'évaluation de l'expression) placée dans l'élément <BODY>, attribut "onUnload", c'est-à-dire, lorsque l'on quitte la page (bonne précaution de programmeur).

4. Modifications des paramètres

Élément <BODY>

Vous pouvez changer le contenu des nouvelles en remplacant directement la chaîne de caractères comprise en argument de (MsgN = '') et éventuellement le délai d'affichage qui est prévu par défut de 100msec [TexteMultiligne(100)].

Élément <FORM>

Si vous désirez changer la largeur de la zone de saisie (COLS="") ou le nombre de lignes (rangées) affichées (ROWS=""), changez les nombres qui sont donnés en argument.

5. Variante

L'affichage de la boîte de nouvelles est exécutée lors du chargement de la page (onLoad) : si vous préférez que cela se fasse par un autre événement, sur un autre élément comme un bouton par exemple, vous lancez la fonction à partir de cet élément, (onclick="" par exemple).

Dans ce cas, vous devrez enlever l'attribut "onLoad" de la balise du <BODY> pour éviter que l'affichage de la boîte ne se fasse automatiquement lors du chargement de la page...

Code d'un bouton de commande

<FORM>
<input type=button Value="Boîtes de nouvelles"
onclick = "MsgN='Votre éditeur HTML pour le prochain millénaire vient de sortir...
WebExpert 2000 vous donne encore plus de possibilités pour créer facilement vos sites Web.
Nous nous associons à Visicom Media pour vous souhaiter un bon travail avec cette nouvelle version.'; TexteMultiligne(100);")">
</FORM>

Vous pouvez associer au lancement de l'affichage de la boîte de nouvelles, son apparition dans le texte, par une fonction qui modifie la propriété de visibility de l'élément conteneur de la zone de saisie (comme décrit dans "Apparition de texte" de TutorDHTML).





Cliquez sur le bouton du script pour visionner son explication...