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 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.

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 new 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 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 length 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 substring() method has a syntax

 string.substring(indexA, indexB)

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.

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.

<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 setTimeout() 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 onLoad 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.
   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.