Chapter 2 Objects: Manipulating Features of a Web Page

Javascript Guide

by Stephen Wilson (c) 1996

Note: These draft javascript tutorials are presented for the personal use of students in the Conceptual Design Department at San Francisco State University and for members of the Internet community. It is not permitted to creproduce sell, or redistribute without permission of Stephen Wilson. swilson@sfsu.edu

What are Objects and Properties and Why are They Useful?

&& (add) Anomolies in using Document Properties

What are Objects and Properties and Why are They Useful

? Over the years many conceptual models have been used to describe computer languages and how they function. Currently the "object" oriented model has gained favor. Javascript is considered an object based language

Javascript sees the world as being composed of objects. These objects can be subdivided into elements. These objects and elements have properties that can be read and manipulated. Identification of classes of objects is an important part of a language. For example, to Javascript a Web page is a member of the document set of objects.

Javascript defines documents as having identification, element, and format properties. (Note that these categories are not official Javascript terms but are introduced to clarify the kinds of properties Javascript defines for Web pages.) Figure 2.1 shows a Web page with some of these properties indicated.

(Insert fig 2.1 Web page with properties lableled)

Identification properties:

Some readers might be somewhat mystified by some of these properties. The lastModified and Referrer information do not usually appear as part of a Web page. Servers, however, regularly send this and other information to the browser; browsers don't usually do anything with it. In Netscape 2.0 and above, you can see the information by selecting the "view document information" choice from the View Menu. Javascript allows your scripts to directly access it if you want.

Element Properties

)

Format Properties:

Most objects (other than built-in ones such as Date and Math) must be created by program commands. You use functions to read the values of objects and methods to change the values. You create program structures to change the values of objects - for example event handlers, which wait for user actions such as clicking on a button and then change the properties of various objects in response. Note that Javascript's definitions of objects can be quite abstract and include features we don't normally think of as objects - for example, the background color. To Javascript the only things that exist are objects.

How do You Tell Javascript to Read or Change a Property?

You can easily change the value of properties directly by creating a command line with the name of the object on the right side and the value you wish to assign on the left. The following example would change the background color of the current Web page to red.

<SCRIPT LANGUAGE="Javascript"> document.bgColor = "red" document.fgColor =" yellow" </SCRIPT>

The syntax for Javascript requires that Javascript commands be enclosed in the <SCRIPT> ...</SCRIPT> tags. BgColor is the property name for the background color; FgColor is the property name of foreground text color. Normally colors in Netscape are defined by using hexadecimal numbers to define the relative intensities of red, green, and blue. (See appendix&&). To simply matters Javascript has defined certain color names to represent the colors; red and yellow are examples of these constants. Note however that only the colors that Netscape has defined will work; you cannot arbitraily type the name of any color. See the appendix for the list of defined names.

Also note the use of the "." between the words document and bgColor and fgcolor. You will see many examples of this syntax in Javascript. The period means the following item is an element or property of the previous object or element. Finally, Javascirpt allows you to use the "=" to assign a value to a property.

Sample Script to Animate the Background Colors of a Web Page

The following script illustrates the use of the document property bgColor to create an animated display. Essentially it consists of a series of Javascript commands assigning different colors to the background - for example bgColor = "white", bgColor = "lightpink", etc. All these command lines are enclosed withing the <SCRIPT> tag and its ending tag.

(&& insert fig 2.2 animate colors)

<SCRIPT LANGUAGE= "javascript"> setTimeout("document.bgColor='white'", 1000) setTimeout("document.bgColor='lightpink'", 1500) setTimeout("document.bgColor = 'pink'", 2000) setTimeout("document.bgColor = 'deeppink'", 2500) setTimeout("document.bgColor = 'red'", 3000) setTimeout("document.bgColor = 'tomato'", 3500) setTimeout("document.bgColor = 'darkred'", 4000) </SCRIPT>

But notice that the script is not just a series of document.bgColor = commands. You could write that script but the colors would change so quickly that you would not see the animated effect. We need to introduce a delay between each background color change. Javascript offers a setTimeout() method that allows creation of delays as well as serving other functions. It is briefly introduced here and more fully discussed in Chapter && on using time and date features

The setTimeout() method requires two elements to be enclosed in its parentheses. The first element is an expression to be evaluated or acted upon. The second element is the number of milliseconds (thousandths of a second) to be waited before the first action is undertaken.

setTimeout(expression to be evaluated, milliseconds)

In this script the action to be taken in each line is an assignment of a different background color using the document.bgColor = structure. The second element in each instance is the number of milliseconds to wait. So you can see after 1000 milliseconds (1 second) the background will be changed to white; after 1500 millisconds (one and a half seconds) the background will be changed to lightpink; and so on. After the script is loaded Netscape will change to colors at the intervals indicated. The delays are all relative to the starting time not to each other. That is, there is not a 1500 millisecond delay between white and light pink; rather there is a 500 millisecond delay. The display moves from white to shades of pink to shades of red.

<sidebar>

Little Details Can Kill You

In scripting and programming little details can often cause your scripts to fail. The failure is extremely frustrating because your logic and command words can all be absolutely correct but you miss one small detail such as an extra space or wrong case of letters. These errors are easy to miss when you try to uncover what is wrong in your script. Scritpting langauges such as Javascript can be very finicky. For example, take a look at the sample code in this section that demonstrates the use of the bgColor property. Your script would fail if you made any of the following minor errors:

  1. Typing "bgcolor" instead of bgColor (no capital C).

  2. Including extra spaces around the period (document . bgColor instead of document.bgColor).

Learn to be very careful. Also invite friends to look at your code. Fresh eyes are good at picking up these kinds of errors.

<end sidebar>

&& not sure this works

Sample Script to Animate the Title of a Web Page

Even with knowledge of these few commands, you can create simple animations in Netscape. You have probably noticed that some Web pages that load with animated text scrolling in the title bar. These can be easily accomplished using Javascript. The following script would casue the title bar to animate a word across the title space.

&& title text - Missing

<SCRIPT LANGUAGE= "javascript"> function ti(){ document.title = "what is this"; } //setTimeout("document.title = '....................................Coming Soon..................'", 1000) //setTimeout("document.title = '........................Coming Soon..............................'", 1500) //setTimeout("document.title = '..................Coming Soon....................................'", 2000) alert(document.title) </SCRIPT>

Anomolies in Using Document Properties &&

??Some document properties can only be read and not modified by scripts. For example, the identification properties of title, lastModified, and referrer cannot be set. The element properties can be set but they cannot be reflected in the page currently being displayed; that is, the current title does not change in the title area of the window. These properties can be established for new pages which will show up when loaded. (&&I couldn't get links or titles to work)

User Defined Properties

You are not restricted to the built-in properties that Netscape provides. You can define any name you want for a property and then using the "dot" notation assign values to that property. For example, imagine you wanted to define a new property of a document called firstline to which you assign a value. Any further references will produce that value.

<SCRIPT>

document.firstline = "Welcome to the Information Page"

</SCRIPT>

In the example a new property is defined for the document object called firstline. Anytime Javascript encounters the expression document.firstline it will produce the assigned text. The fact that I named it "firstline" carries no special meaning to Javascript; that is, it does not know that it is to be the first line in the document. Generally, it is a good idea to name the properties with a name related to your intended use. The later chapter on variables and arrays (&&) will show several other useful features of this structure.

<HTML> <HEAD> <SCRIPT LANGUAGE = "Javascript"> document.firstline = "Welcome to this page" </SCRIPT> <TITLE>load demo</TITLE> </HEAD> <BODY> <SCRIPT> document.open() document.write(document.firstline) document.open() </SCRIPT> </BODY> </HTML>

(?&&?? insert fig2.5)

what was learned

- This page created by Stephen Wilson, Professor Conceptual Design, SFSU (http://userwww.sfsu.edu/~swilson) swilson@sfsu.edu
- More information about the Conceptual Design program is available at (http://userwww.sfsu.edu/~infoarts)
- It is a resource used in Art511 Art&Telecommunications course (http://userwww.sfsu.edu/~infoarts/Tele/Tele95.index.html)
- A comprehensive guide to Web design is available in the book World Wide Web Design Guide (Hayden Books) by Stephen Wilson
- The url of this page is (http://userwww.sfsu.edu/~infoarts/Tele/wilson.javascript2r.html)