A combination of technologies, including HTML style sheets, Document Object Model, JavaScript, and Java, used to create dynamic and interactive Web page

Beam-Illuminated Text (in Heading) copyrighted by vertig01

The common thread in all three of the technologies I am addressing is the use of objects. Each of them is object oriented, meaning that each of them collects methods and data for an object in its own common "container". An object can select any of its methods to act on its own data. In JavaScript, properties return information about the object's data. A dot is the selection operator, and by using the object's name before the dot, an object selects a method or a property to act upon its own data. The appearance of the syntax is objectName.methodName or objectName.PropertyName in a statement that uses an object.

There can be multiple objects of the same type, perhaps String, and both have the same set of methods and properties available, but each has its own data. One String object may have a red fontcolor, while the other has blue. The fontsizes of the two could be the same or different. One could be italicized while the other is not. An object calls a method to act on its own properties, not the properties of another object. Specifying the object name before the dot, in effect, specifies whose properties to change. Note that in Javascript a single character is regarded as a String object.

Please view the JavaScript demonstration, and examine its source code. The three JavaScript functions defined in the HEAD of the HTML document are executed when they are called from the BODY. The function rollerText produces text with a changing fontsize so that the outline of the letters resembles a roller coaster. The funtion rainbowText produces text of the same fontsize in different font colors. The function rainbowRollerText produces text with different font sizes and different font colors because two properties were changed. I will use them to demonstrate how to use objects in JavaScript.

Keep in mind that all of the technologies in this presentation are object oriented, so there will be significant carryover to DHTML and Java from the knowledge you gain in Javascript.

Version 1: rollerText

Following the trail from the function call in the BODY to the the function definition in the HEAD should convince you that "Life is like a roller coaster ride. Hang on tight! " first becomes the value of textString in the function, then the value of theText. Since theText has a String value, it is a String object with String methods and String properties.

There are two statements in the function rollertext that use objects. One uses String objects.The other uses a document object

string1 = theText.charAt(i % theText.length).fontsize(fs)
document.write(string1)

charAt and fontsize are String methods which can be selected (using the dot operator) by a String object to act on its own text. charAt returns a single character from a specified position in the String object. length is a property of a String object that can also be selected (using the dot operator) by a String object.

theText.length returns the number of characters in the String, "Life is like a roller coaster ride. Hang on tight!"

As i is incremented in each iteration of the loop, i % theText.length gives the remainder when i is divided by the number of characters in the String object, guaranteeing that the parameter in parentheses below correctly specifies a character position in the String.

theText.charAt(i % theText.length) returns the character at the specified position in the String object. This character is a String object that will select the String method, fontsize, to act on its character.

the Text.charAt(i % theText.length.fontsize(fs) sets the fontsize of the single character to fs, which is changing to produce the roller coaster shape.

string1 is now a String value with a fontsize specified by the rather complex logic controlling the growing and shrinking pattern for the fontsize.

Summarizing, the fontsize of the character at a specified position of the text String is set to a size specified in the parameter list.

document is a predefined object, specifically the HTML document for the JavaScript Demonstration web page. write is a method that creates text on the web page produced by the HTML document.

document.write(string1) creates the text in string1 on the web page.

An alternate syntax that is more sophisticated combines the two statements into one.

document.write(theText.charAt(i % theText.length).fontsize(fs))

The statements that we have discussed are controlled by a for loop that executes repeatedly until the String "Life is like a roller coaster ride. Hang on tight! " appears 4 times.

Following the trail from the function call in the BODY to the the function definition in the HEAD should convince you that "Life is like a rainbow of color. Hang on for the thrill of your life! " first becomes the value of textString in the function, then the value of theText. Since theText has a String value, it is a String object with String methods and String properties.

rainbowText uses two statements similar to those seen in rollerText, but the method called is fontcolor instead of fontsize.

string1 = theText.charAt(i%theText.length).fontcolor(colorArray[i%6])
document.write(string1)

The fontcolor of the character at a specified position of the text String is set to a color from the color Array specified in the parameter list.

The program logic is simpler since the logic controlling the growing and shrinking of the fontsize is not needed. However the complexity of creating an array to store the colors used for the font needs some explanation. The size of the array is set by specifying six values when the array is declared.

colorArray = new Array("#FF0000", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#FF00FF")

As i is incremented in the loop, i % 6 guarantees that the subscript fo colorArray remains in bounds by never exceeding 5. Valid subscripts are 0, 1, 2, 3, 4, or 5.

The alternate syntax combining the two statements into one is

document.write(theText.charAt(i%theText.length).fontcolor(colorArray[i%6]))

Version 3: rainbowRollerText

rainbowRollerText combines the complexity of the logic needed to manipulate the fontsize and the array needed for the fontcolor, plus it must select both the fontsize and the fontcolor for the same String object. The additional method selection simply requires another selection operator followed by another method call.

string1 = theText.charAt(i%theText.length).fontsize(fs).fontcolor(colorArray[i%6])
document.write(string1)

Summarizing, the parameter specified fontcolor is set after the parameter specified fontsize is set for a character at a parameter specified position in the text String.

The alternate syntax using a single statement is

document.write(theText.charAt(i%theText.length).fontsize(fs).fontcolor(colorArray[i%6]))

Commonly used predefined JavaScript objects include Date, document, Form, Frame, Image, Math, Navigator, and String. A list of objects and their methods and properties can be found in JavaScript references. I searched for "JavaScript Objects", then when I had the name of a type of object, for example "document", I was able to find additional details about its methods and properties by searching for "JavaScript document object".

Additional objects can be defined by a programmer.

JavaScript code for function definitions can be placed in the HEAD or the BODY of an HTML document. However the function calls must be placed in the BODY. All JavaScript code must be within the paired SCRIPT tags, and no other HTML tags are permitted within the paired SCRIPT tags. Multiple pairs of SCRIPT tags are permitted in the HEAD or the BODY or both.

Web Tools . . . How To
rollerText . . . rainbowText . . .rainbowRollerText