The JavaScript Goodies Book

and Andree Growney

The Script’s Effect

Deconstructing The Script

     
Usually we would start by naming the HTML form elements, but not this time. The form elements actually play a role in the effect so we will discuss them last, after you understand the typing effect.

     This script begins by setting up a variable “i” and setting it to one. Then a very long literal string is given the variable name “typeString”. For display purposes, we have the script broken up a bit. The lines below should be on long lines as shown in the script. It looks like this:

var i = 0

var typeString= “All work and no play makes Jack a dull boy.”

+ ” All work and no play makes Jack a dull boy.
All work and no play makes Jack a dull boy. “


+ ” All work and no play makes Jack a dull boy.
All work and no play makes Jack a dull boy. “


+ ” All work and no play makes Jack a dull boy.
All work and no play makes Jack a dull boy. “

     Notice that each statement in quotes is connected by a plus sign so that one will just follow the other in one long line of text.

The Typing Function

function type()

{

var typeLength= typeString.length

document.typewriterScreen.typepage.value=

document.typewriterScreen.typepage.value + typeString.charAt(i)

i++

var timeID= setTimeout(“type()”,70)

}

     The function is named type(). It will be triggered to run through an onLoad= Event Handler in the BODY tag.

     First the variable “typeLength” is created and given the value of the number of letters in the literal string, typeString.length.

     Next, the TEXTBOX of the HTML form below is set up to receive the output of the script. Even though we haven’t talked about the HTML form elements, just from this line of code, you can probably guess that the form itself is named “typewriterScreen” and the TEXTBOX
is named “typepage.” They are.

     The typing effect is created by taking the value of the TEXTBOX and adding the first character of “typeString“.

     That’s done through the following code:

     After that occurs, “i” starts to move incrementally up. Notice the double plus signs. Finally the code var timeID= setTimeout(“type()”,70) sets a time-out for the script of 70/1000 of a second before it runs through the function again.

What’s Happening?

     Even though you’ve just been walked through the process, you still might not get how
the typing effect is created. Here’s the scoop.

     Each time the JavaScript is run, the script posts the value of the TEXTBOX with the next letter in the string chosen by “i” and moves upward.

     So, the first time the JavaScript runs, the return is a blank TEXTBOX and the letter “A” from the string. That is posted.

     The next time it runs, the return from the TEXTBOX is “A” and the next letter in
the string, “l,” is added. That is posted.

     The next time the script runs, the return from the TEXTBOX is “Al” and the next letter in the string, “l,” is added. That is posted.

     If this happens again and again, the effect is the letters typing themselves to the screen.

The HTML Form Elements

<FORM NAME=”typewriterScreen”>

<TEXTAREA ROWS=6 COLS=45 WRAP=”virtual” NAME=”typepage”>

</TEXTAREA>

</FORM>

     As we said earlier, the name of the form is typewriterScreen and the name of the TEXTAREA box is “typepage.” You can see that above.

     Where this form element differs from the others we’ve used is that this one plays a part in the effect.

     Notice the attribute WRAP=”virtual”. That forces the text to wrap at the edge of the TEXTBOX rather than to keep going off to the right. But it’s the size that gets the look. The COLS attribute is set two letters longer than the text, “All work and no play makes Jack a dull boy.” By doing that, we were
able to create the “carriage returns” right where we wanted them. Without each new line of text appearing on a new line, a great deal of the effect would have been lost.