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
Here is a little example of using the Dot Syntax to refer to properties:
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.
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:
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:
5.4 Scrolling Text
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.
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.
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.
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:
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.
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.
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.
Not being able to solve this isn't a dissaster, but at least try your best to solve it.