Javascript Lesson 5

Foreword

Objects are very important in JavaScript and you will use them quite often, but they are not very easy and you will have to make some exercices to completely understand how objects work. This lesson will also handle the String Object and the Dot Syntax which is used when you want to refer to specific properties and methods of an object.

5.1 Objects

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 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 text editor, 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. But the window also has properties that you can't change. You can't change the basic outline color of the window for instance.

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, or easier to understand: variables. An object also has functions, called methods. 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, objects actually are just programs with methods and properties, some we can change, some are not available to us.

5.2 The Dot Syntax

In JavaScript, you refer to the methods and properties of an object using the Dot Syntax. When you do this, you must include the name of the object. JavaScript uses the Dot Syntax to separate the name of the object from its properties and methods. The one you already used a few times is:

document.write("yourtext")

Here you are using the method write() of the document object. As I wrote before, an object can contain properties that are actually other objects. One such property is the form. It is very important that you always give your forms a name because in JavaScript the name of the form is used to refer to it. The form contains other objects that are properties of it. For example, the text input box. The text input box has a property, value. This property is the text in the box. It is both readable and writeable. You can call this value by using the following syntax:

document.formName.textBoxName.value

Here is a little example of using the Dot Syntax to refer to properties:

Output:
Input:

This is the code used for this example.

<form name="example">
<table border="0">
<tr><td>Output:</td> <td><input type="text" name="output" size=50></td></tr>
<tr><td>Input:</td> <td><input type="text" name="input" size=50></td></tr>
</table>
<input type="button" name="alertButton" value="Alert!" 
onClick="alert(document.example.input.value)">
<input type="button" name="transferButton" value="Transfer!"
 onClick="document.example.output.value=document.example.input.value">
</form>

Tace a closer look at the onClick event for the Alert button. It contains an alert box call with the parameter document.example.input.value. This is how you should read the value of the text box object named "input" that is a property of the form object named "example" that is a property of the document object. To refer to an object you start at the top most object document and follow each property until you get to the property you want to call.

Now 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 the lower text input box when the button is clicked. This way you copy the text from the lower text input box to the top text input box.
Actually the window is the top most object, but JavaScript doesn't need you to mention it.
Now try to refer to objects yourself a bit before continuing.

5.3 The String Object

Now we will be discussing the String Object, one of the stand alone objects, objects that are not part of another object.
The Syntax to create a String Object is as follows:

var aString = new String("characters")

First of all we will talk about the property length. The property length represents a count of the number of characters of a string. For example the value returned by "Apple".length is 5 and "Macintosh".length is 9.

The String Object also has a method, the substring() method. The syntax for this method is:

string.substring(index1, index2)

You will use the substring() method to extract a continuous string of characters from a string. The parameter index1 is the location of the first character to extract and the parameter index2 is the location of the first character after the part that is extracted. You should remember that the count of characters starts at 0 when you use this method. To understand this method you should try it yourself a few times. Here are a few examples to try:

<Script language="JavaScript">
<!--
document.write("Apple".length + "<br>")
document.write("Macintosh".length + "<br>")
document.write("Macintosh".substring(0, 3) + "<br>")
document.write("Macintosh".substring(3, 5) + "<br>")
document.write("Macintosh".substring(5, "Macintosh".length) + "<br>")
//-->
</script>

5.4 Scrolling Text

Often used in JavaScript is the Scrolling Text. It is important that you understand everything from 5.3 to proceed.
Here is a little example of a scrolling text:


Now try to understand what is happening here. Notice that each time you press the "Scroll!" 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.

This is the code used for this example (notice that you may put the JavaScript code in the head part of the document):

<script language="JavaScript">
<!--
var message = 'Scroll this text by pressing the scroll button.'
 function scrollMessage(){
   document.scrollForm.textScroll.value = message
   message = message.substring(1, message.length) + message.substring(0, 1)
   }
//-->
</script>

<form name="scrollForm">
<input type="text" name="textScroll" 
value="Scroll this text by pressing the scroll button." size="50">
<br>
<input type="button" value="Scroll!" name="buttonScroll" onClick="scrollMessage()">
</form>

The script contains a global variable message. It is written to the text box every time the function is called. The last line of the function reconstructs the string message for the next time it is written to the text box. Notice that the substring() method is used twice, the first time it returns the original message without 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 'Scroll!' button. You can use the setTimeout() method of the window object to scroll the text automatically. 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 a JavaScript function. The second one is a time in milliseconds that will elapse before the call to this 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.
1 second is equal to 1000 milliseconds, 2 seconds is equal to 2000 milliseconds and so on. You can also use 500 milliseconds which is equal to 1/2 second.
The setTimeout() method used for the first Scroll script would look like this.

setTimeout("scrollMessage()", 150)

When this line of code is added, 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 150 milliseconds. Thus we have a continuous loop.
The script code would now look like this:

<script language="JavaScript">
<!--
var message = 'Scroll this text by pressing the scroll button.'
 function scrollMessage(){
   document.scrollForm.textScroll.value = message
   message = message.substring(1, message.length) + message.substring(0, 1)
   setTimeout("scrollMessage()", 150)
   }

//-->
</script>

Now it would be interesting if we could call the function immediately when the document has completed loading. We can do this using the onLoad event handler of the Body tag. Or we could add a little line of code to the JavaScript code to call the function immediately when the document has completed loading:

window.onload = scrollMessage

You don't have to place the ( ) when you use this line of code.
So all we still have to do is putting the onLoad event handler inside the body tags (or add window.onload to the script code) and our Scrolling script is finished.
Example:

This is the code used for this example (notice that you may put the JavaScript code in the head part of the document):

<script language="JavaScript">
<!--
var message = 'This text starts scrolling automatically.'
 function scrollMessage(){
   document.scrollForm.textScroll.value = message
   message = message.substring(1, message.length) + message.substring(0, 1)
   setTimeout("scrollMessage()", 150)
   }
   window.onload = scrollMessage
//-->
</script>

<form name="scrollForm">
<input type="text" name="textScroll" 
value="This text starts scrolling automatically." size="50">
</form>

Of course you can also put this scrolling inside the Status Bar, aldough I do not recommend this.
To do this, you only have to replace the document.scrollForm.textScroll.value by window.status.

5.5 Exercices

Try to make a scrolling text inside a text box that starts scrolling automatically when the document completed loading, you may also try to make a scrolling text for the Status Bar.

Make sure that you know how to use the substring() method by making enough exercices.

Try to make a text box with a scrolling message, and when you click a button another scrolling message appears, clicking the button again will show the previous scrolling message.
Hints: Give the button a value, so your code knows what function is running, copy the same function for the different values of the button (also use an if statement) but use a different message in each function, don't forget to change the value of the button each time it is clicked (the code for this action should also be put inside the functions). Use the onClick event to call the function (it is important the functions have the same name, normally that is not allowed in JavaScript, but when you use the if statement before the functions, there is actually only one of the functions active at the same moment.
Not being able to solve this isn't a dissaster, but at least try your best to solve it.

Home | Code | Learn
© 2007-2008 ProgLogic, all rights reserved. | ProgLogic.com is created by Stijn Strickx. | e-mail