Machine à écrire

<SCRIPT Language="JavaScript">
/**********************************************************
* Faire afficher un message sous forme machine a ecrire   *
* RECUPERE A : http://www.asi.fr/~ericbon/htmldoc.htm     *
***********************************************************/
<!--
var i = 0;
var TextNumber = 0;
var TextInput = new Object();
var HelpText = "";
var Text = "";
var Speed = 90
var WaitSpace = "                    "
TextInput[0]="                    "
TextInput[1]=" Un exemple JavaScript permettant d'afficher "
TextInput[2]=" un message caractère par caractère "
TextInput[3]=" Cela nous donne un effet machine à écrire   "
TotalTextInput = 3;
for(var j = 0; j < TotalTextInput; j++) {
TextInput[j] += WaitSpace }
var TimerId
var TimerSet = false;

function startBanner() {
 TimerSet = !TimerSet
 if(TimerSet) banner();
 else
 kill(); }

function banner() {
 Text = rollMessage();
 TimerId = setTimeout("banner()", Speed)
 document.Roll.TextArea.value = Text;  }

function init() {
 Text = TextInput[TextNumber]
 HelpText = Text; }

function kill() {
 clearTimeout(TimerId) }
// -->
</SCRIPT>

Atelier Formulaires	Machine à écrire
De quoi s'agit-il ?	L'idée est d'afficher un texte lettre par lettre. Par exemple : Cela peut être un bon moyen pour tester les capacités de lecture, de concentration et de mémorisation d'un élève.
Comment faire ?	1- Commençons par installer le code JavaScript dans l'entête de notre document HTML. <SCRIPT Language="JavaScript"> /********************************************************** * Faire afficher un message sous forme machine a ecrire * * RECUPERE A : http://www.asi.fr/~ericbon/htmldoc.htm * *********************************************************/ <!-- var i = 0; var TextNumber = 0; var TextInput = new Object(); var HelpText = ""; var Text = ""; var Speed = 90 var WaitSpace = " " TextInput[0]=" " TextInput[1]=" Un exemple JavaScript permettant d'afficher " TextInput[2]=" un message caractère par caractère " TextInput[3]=" Cela nous donne un effet machine à écrire " TotalTextInput = 3; for(var j = 0; j < TotalTextInput; j++) { TextInput[j] += WaitSpace } var TimerId var TimerSet = false; function startBanner() { TimerSet = !TimerSet if(TimerSet) banner(); else kill(); } function banner() { Text = rollMessage(); TimerId = setTimeout("banner()", Speed) document.Roll.TextArea.value = Text; } function rollMessage() { Wait_yn = false; i++; var CheckSpace = HelpText.substring(i-1, i); CheckSpace = "" + CheckSpace; if(CheckSpace == " ") { i++; } if(i >= HelpText.length+1) { i = 0; if (TextNumber < TotalTextInput) { TextNumber++; } else { TextNumber = 0; } init(); } Text = HelpText.substring(0, i); return (Text); } function init() { Text = TextInput[TextNumber] HelpText = Text; } function kill() { clearTimeout(TimerId) } // --> </SCRIPT> Les premières lignes sont un commentaire indiquant sur quel site ce script a été récupéré. Vous pouvez visiter ce site pour en trouver d'autres qui vous intéresserons peut être. Les lignes importantes à modifier sont celles qui commencent par TextInput[i] avec i=1,2 ou 3. Elles permettent de définir le texte qui s'affichera. 2- Installons le formulaire qui contient la ligne d'édition dans laquelle le texte défile. Les quelques lignes suivantes suffisent : <FORM NAME="Roll"> <DIV ALIGN=center> <INPUT TYPE="text" NAME="TextArea" SIZE="47"> </DIV> </FORM> Veillez à respecter les noms du formulaire et de la ligne d'édition, ils sont utilisés par le script. 3- Il nous reste à installer l'instruction qui déclenchera l'animation. Nous utiliserons l'évènement ONLOAD du document. La balise BODY du document contiendra l'expression : ONLOAD="startBanner(); init();"**
Votre mission	Votre mission, si vous l'acceptez, consiste à trouver et réaliser une application pédagogique de ce script. Vous pourrez aussi l'analyser et le compléter pour pouvoir arrêter le défilement, puis le redémarrer avec un nouveau texte.
Retour