WebExpert 3.0 vous permet de créer une boîte de nouvelles : cliquez sur le bouton
pour lancer la procédure de création par l'assistant.
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.
NAME (Nom de la variable qui à laquelle le texte saisi par l'utilisateur ou le script sera affecté;
ROWS (Le nombre total de lignes de la zone de saisie);
COLS (nombre de colonnes de la zone de saisir, en fait, sa largeur);
DISABLED (interdit la saisie dans le champ ; caractères grisés);
WRAP (PHYSICAL : si le texte de saisie dépasse les limites de la boîte, les barres de défilement (déroulement) sont automatiquement présentes ou VIRTUAL qui ne les insère que si le texte dépasse les limites de la boîte. L'option par défaut étant la désactivation des barres de défilement).
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 :
Récupérer la chaîne de caractères constituant les nouvelles;
Déterminer s'il y a des caractères (.) pour afficher uniquement la partie de chaîne de caractères qui suit ce point;
Lorsque les nouvelles ont été affichées complètement (texte entier), recommencer l'affichage;
Par un timer, déterminer la vitesse de déroulement du texte.
Des variables sont donc créées :
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 :
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.
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.
Une instruction conditionnelle (if) va réaliser les différentes vérifications :
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 :
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.
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 :
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.
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).
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)].
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.
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...
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).