10/11/2009 Learning JavaScript - Introduction to O…

Click here to search this Site or the Web using Google.

Introduction to Objects and Scrolling Text

(Lesson 7)

Today we are going to talk about objects and what makes up an object. Quite
frankly, Objects have always been confusing to me. So don't feel bad if you
have a problem understanding the concepts at first. Just bare with me and
hopefully you will get a good grasp of how to handle objects by the end of this
course.

We will also be talking about the dot syntax which is used when we want to refer
to specific properties and methods of an object. We will then discuss the String
object, one of 4 stand alone objects we will talk about in this class. Finally, we
will put all of this together to develop a script to scroll text on your page.

Objects
Some text books and instructors like to compare a programming object to a real
world example (like a cat, tree and etc.). This is fine except all of these objects
are something that you can actually put your hands on and the objects we are
going to talk about here are not. Therefore, I am going to take a little different
approach to describing objects. Actually, I think what you read here will be a
more realistic approach.

Ok get a cup of coffee or a soda and settle back in your chair and here we go!

Everything you see on your screen is there because someone wrote a program
for it. All of the windows you see are generated by a program. When you move
a window it appears that you are moving an object on the screen when what you
are really doing is running a quite elaborate program that keeps redrawing your
window hopefully fast enough that you don't notice it.

Since all windows are basically the same, the programming is written for it in
what is called object oriented programming. By designing windows by a basic
design specification any window can be created and controlled by using only
one program rather than having to write a separate program for each window.
When you open up your mail program, it is inside a window. Now open up your
browser. It too is contained inside a window. You can change certain aspects
of these windows. You can make them narrow or wider for instance. But
remember there are only certain things you can change. All of the windows work
basically the same.

Programmers decided to give these things that they are controlling a name.
The name they choose is object. So each window on your screen is an object.
If you change the size of that window, then you are changing one of the
properties of that window. So the window has a width and that is a property. It
also has a height that is a property. You can change both of these properties.
The window has properties that you can't change. You can't change the basic
outline color of the window for instance, nor can you change the basic
rectangular shape.

It is very important that you understand what has been said so far. Programmers
decided that they wanted to have a common program to generate like items on
a computer. These items are called objects. A window is an object that has

javascriptmall.com/learn/lesson7.htm 1/6
10/11/2009 Learning JavaScript - Introduction to O…
been created with a program. The programmers decided that they were going
to allow us to change certain things about an object. These things that we can
change are called properties. Now from a programming standpoint what do you
think these things that are called properties really are. They are variables.

So, now we have a program that has variables. What other thing would you
guess this program might have. How about functions. Yep, and they had to call
them methods just to confuse us. So, all an object really is, is a program with
variables and functions (ie Object with properties and methods). It also has
many variables and functions that operate behind the scenes that we can't get
to. We can only access certain properties of an object and use certain
methods.

Objects can contain other objects. A window contains documents with the
document being your actual web page. Documents contain images, forms,
tables, links, and etc. All of these items are objects of the document. The object
contained by another object is a property of that object. Remember that we
learned that variables, i.e. properties in this case, can have a value of the object
type.

So, when you think about it, objects are really quite simple. They are just
programs that someone has written for us that have properties and methods.
Some of the properties we can change and others we can only get their value.
We also realize that these objects have properties and methods that are
internal and not available to us.

The Dot Syntax

You will referring to the properties and methods of an object quite often in
JavaScript. When you do this, you must include the name of the object.
JavaScript uses the period to separate the name of the object from its
properties and methods. The one you have seen the most often is

document.write("something")

Here you are using the method write() of the document object. As we discussed
earlier, an object can contain properties that are actually other objects. One
such property is the form. Remember that I said that giving the form a name is
important. Well, that's how we refer to it. The form contains other objects that are
properties of it. An example would be a text input box. The text input box has an
important property, value. This property is the text in the box. It is both readable
and write able. You can get this value by using the following syntax:

document.formName.textBoxName.value

Lets look a simple example to see how we use the dot syntax to refer to
properties. Type anything into the lower text box marked Input. When you press
the first button the text you typed appears in an alert box. Pressing the second
button displays your text in the output text box.

Output:

Input:

Display in Alert Transfer

javascriptmall.com/learn/lesson7.htm 2/6
10/11/2009 Learning JavaScript - Introduction to O…

Let's look at the code that was used for this demo.

<FORM name="demo">
Output: <INPUT type="text" name="out" size=40>
<P>
Input: <INPUT type="text" name="inP" size=40>
<P>
<INPUT type="button" name="button1"
value="Display in Alert"
onClick="alert(document.demo.inP.value)">
<INPUT type="button" name="button2"
value="Transfer"
onClick="document.demo.out.value=document.demo.inP.value">

Notice that we have a form named "demo" that contains the two text input boxes
and the two buttons. Look at the onClick event for the first button. It contains an
alert box call with the parameter document.demo.inP.value. This is how we
read the value property of the text box object named "inP" that is a property of
the form object named "demo" that is a property of the document object (I had to
use short names here so that they would fit on this web page properly. Longer
names might be more descriptive.). So I hope this makes it clear as to how to
refer to an object. You start at the top most object "the document" and follow
each property until you get to the property you are interested in.

Look at the onClick event on the second button. It uses the dot syntax to set the
value of the top text input box equal to the value of lower input box when the
button is clicked. So that's all that is needed to copy the text from the bottom box
to the top.

Now for a confession. The window is the top level object. So, to be technically
correct all of the above examples for the dot syntax should contain the word
window as the first object. For example, the dot syntax to get the value out of the
bottom text box should be written window.document.demo.inP.value.
JavaScript does not require this and most people do not do it since all of these
objects are in the same window. We will be discussing how objects relate to
each other, the Object Hierarchy, in an upcoming lesson.

Spend some time and try to understand how to reference objects using the dot
syntax. You will find that you spend a lot of time getting the reference to an object
correct.

The String Object

We will now begin our discussion of stand alone objects, objects that are not
part of another object, with the String object. The Date and Array objects will be
also be discussed in detail during the upcoming lessons. There are a few other
standalone objects but these 3 are the ones you will use most often.

You will use the ne w operator to create each of the stand alone objects we will
discuss in this class. The syntax to create a String object is as follows:

var myString = new String("characters")

The String object contains quite a few properties and methods. We will only

javascriptmall.com/learn/lesson7.htm 3/6
10/11/2009 Learning JavaScript - Introduction to O…
cover one of its properties and one of its methods in this class. You can learn
about the rest in one of the reference books in our Library.

Note that there is almost no difference between a String Object and a string
value. Both allow you to use the same methods and the most frequently used
property length.

The property le ng th represents a count of the number of characters within the

string. For example the value returned by "JavaScript".length is 10 and
"JavaScript Learning Center".length is 26.

The s ub s tring () method has a syntax

string.substring(indexA, indexB)

You will use the substring() method to extract a continuous string of

characters from a string. The parameter indexA is the location of the first
character to extract and the parameter indexB is the location of the first
character after the part that is extracted. Realize that the count of characters
starts at 0 when you use this method. The best way to understand this method is
to try some examples in our lab.

Lab Time - Lab -

Try each one of these examples in our lab

document.write("JavaScript".length)
document.write("JavaScript Learning Center".length)
document.write("JavaScript is Fun!".length)
document.write("JavaScript is Fun!".substring(0, 10))
document.write("JavaScript is Fun!".substring(14, 17))

Techniques needed to make Text Scroll

One of the favorite things we all like to do with JavaScript is to make a scrolling
banner. We have much of the basic knowledge we need to accomplish this.
After reading and studying the material in this paragraph you should have a
complete understanding of the methods need to create a scrolling banner. Much
of the knowledge you gain here will also be used when we create a clock.

I do not recommend that you put your banner in the status bar because it will
prevent the useful information that is normally displayed there from being seen.
A better approach is to put your banner in a text box of a form. Look at the
following demo.

Watch this text while pressing "Test" Button.

Test

Take a close look at what is happening in the above demo. Notice that each
time you press the "Test" button the first letter of the string in the text box is being
removed and put at the end of the string. This makes the text appear to scroll.
Note that the text box would normally be shorter than the length of the string in it. I
made it longer here so you could see what is going on.

Here is the function that I used for the demo.

javascriptmall.com/learn/lesson7.htm 4/6
10/11/2009 Learning JavaScript - Introduction to O…

<SCRIPT language="JavaScript"><!--
var msg = 'Watch this text while pressing "Test" Button.'
function scrollMsgDemo(){
document.scrollDemo.textScroll.value = msg
msg = msg.substring(1,msg.length) + msg.substring(0,1)
}
//--></SCRIPT>

The script contains a global variable msg. It is written to the text box every time
the function is called. The last line of the function reconstructs the string msg for
the next time it is written to the text box. Notice that the substring() method is used
twice, the first time it returns all of the original message except for the first
character. The second time it returns only the first character of the string. This
results in a new string with the first character moved to the end of the string.

The function is called using the onClick event of the 'Test' button. Some other
method is required if you want the script to work automatically. The
s e tT ime o ut() method of the window object is used for this purpose. It is
normally the last line in a function that is being used to scroll text. This method is
used to call a function after a certain time has elapsed.

The setTimeout() method has two parameters. The first one is usually a call to
any other JavaScript function. The second one is a time in milliseconds that will
elapse before the call to is function is executed. It is important to understand that
this delay only affects the call to this specific function and that any other scripts in
the document continue to execute.

The setTimeout() method that we would use in our script above would probably
look something like this.

setTimeout("scrollMsgDemo()", 200)

So in our example, the message would continue to scroll after the function is
initially called because the script would be called again by the setTimeout()
method after a delay of 200 milliseconds. Thus we have a continuous loop.

There is still one thing missing. We need some way to get the scrolling
message started. In other words we need some action that will call our function
the first time. The event handler o nLo a d of the BODY tag is normally used for
this. This event occurs when everything in the document has completed loading.
So all we have to do is call our function from the onLoad event handler of the
BODY tag similar to the way we called the alert box from the Button in the
previous lesson.

Assignment
1. Place a single button on a page that could be used as an ON/OFF
switch. Design this button so that the button is labeled "ON". When you
click on the button its label should change to "OFF". Clicking on it again
should change it back to "ON" and so on.
Solution Source

2. Set the value of the variable myString equal to "The JavaScript Learning
Center is Great!". Extract a new string from the variable myString that
reads "JavaScript is Great!". Print both strings to the browser.
javascriptmall.com/learn/lesson7.htm 5/6
10/11/2009 Learning JavaScript - Introduction to O…
Solution Source

3. Write a script that will scroll a message.

Solution Source

4. Write a script that will scroll a message twice as fast as the one in
problem 3.
Solution

5. Write a script that will scroll a message at the rate of one character per
second.
Solution

Notes on problems 4 and 5.

Try I n t e rn e t Ca ll M a n a g e r
Like having another phone line for about one quarter the cost!
Caller id, web voice mail, personalized message and More!
Never miss another phone call while on-line.

[ Top of Page | Contents ]

© 1999 - 2004 by Ray Stott - All Rights Reserved.

javascriptmall.com/learn/lesson7.htm 6/6