Online
Companion
Home

Documents

Tutorial 1
Tutorial 2
Tutorial 3
Tutorial 4
Tutorial 5
Tutorial 6
Tutorial 7
Tutorial 8
Tutorial 9
Tutorial 10

Gallery

Software

Data Files

Reference

HTML Tags

Appendix D:
JavaScript
Objects,
Properties,
Methods,
Event
Handlers

Appendix E:
JavaScript
Operators,
Elements,
Keywords

Appendix F:
Cascading
Style Sheets

Working with JavaScript
Objects and Events
Enhancing your Forms with JavaScript

Additional Topics

Creating a Web Clock
Opening Windows
Working with the Status Bar
Displaying the Date Last Modified
Creating an Object
Checking String Length
Object Classes and Instances

Creating a Web Clock

One popular use of forms and JavaScript is to create a clock. Here is a sample clock:

The JavaScript code for creating this clock is as follows:

function runClock() {

now = new Date();

hours = now.getHours();

minutes = now.getMinutes();

seconds = now.getSeconds();

timeStr = "" + ((hours > 12) ? hours - 12 : hours);

timeStr += ((minutes < 10) ? ":0" : ":") + minutes;

timeStr += ((seconds < 10) ? ":0" : ":") + seconds;

timeStr += (hours >= 12) ? " PM" : " AM";

document.clock.face.value=timeStr;

setTimeout("runClock()",1000);

}

To create the clock, you have to use the setTimeout method. The setTimeout method starts a clock and runs an action or program after a specified delay (in milliseconds.) The syntax of the setTimeout command is:

setTimeout(Expression,milliseconds);

where Expression is the JavaScript expression, command or function that you want to have repeated at set intervals, and milliseconds is the time gap between repetitions in milliseconds. In the above example, the statement:

setTimeout("runClock()",1000);

will run the function, runClock() every 1000 milliseconds - or every second. Note that this causes the function to run itself over and over again. Further note that the runClock() function include several commands involving comparison operators. For a discussion of comparison operators, see the Tutorial 8 notes page. To start the runClock() function, simply add an onLoad event handler in the <BODY> tag of the HTML file that starts runClock().

Opening Windows

You can use JavaScript to open a new browser window. The syntax for opening a window is:

open("URL","WindowName","FeatureList");

where URL is the URL of the Web page that will appear in the new window, WindowName is name of the window and FeatureList is a list of features, separated by commas (but no spaces), that describe the new window. The following table describes the possible entries in the list of features:

Name	Description
toolbar	Display the standard browser tool bar
location	Display the location input box
directories	Display the standard directory buttons
status	Display the status bar
menubar	Display a menu bar at the top of the window
scrollbars	Display scrollbars if the page extends beyond the window boundary
resizable	Allow the user to resize the window
copyhistory	Copy the history list of the current window to the new window
width	Specify the width of the window
height	Specify the height of the window

Features are turned on by including the feature name in the feature list, or by setting the feature value to 1 or "yes". Features are turned off by removing the feature name from the list or by setting the feature value to 0 or "no." The following two JavaScript commands will create windows with the same properties:

open("test.html", "Test","toolbar=yes,location=no,

directories=no,

status=yes,menubar=yes,scrollbars=yes,resizable=yes,

copyhistory=no,width=300,height=100");

open("test.html", "Test","toolbar=1,location=0,

directories=0,

status=1,menubar=1,scrollbars=1,resizable=1,

copyhistory=0,width=300,height=100");

open("test.html","Test","toolbar,status,menubar,scrollbars,

resizable,width=300,height=100");

Note that if you don't include any features in the feature list, JavaScript will create a window with all of the features present. So if you truly want a window with no features from the feature list, simply include a single feature, set its value to 0 or "no" and JavaScript will turn off that feature and remove all other features as well. For example:

open("test.html","Test","status=no");

Another important point to remember when creating a features list is that you must not include spaces between feature names in the feature list. JavaScript will ignore features that appear after spaces (this is not true for the version of JavaScript implemented by Internet Explorer.) In other words, your feature list should appear like this:

open("test.html","Test","toolbar,status,menubar,scrollbars, resizable,width=300,height=100");

and not like this:

open("test.html","Test","toolbar, status, menubar, scrollbars, resizable, width=300,height=100");

To see how this feature works, here is a JavaScript command that opens the contents of the T7.html file in a new window:

open("T7.html", "Example", "status,scrollbars,resizable, width=400,height=200");

Note that this window has the following properties:

There is no tool bar.
There is no location box.
There are no directory buttons.
There is a status bar.
There is no menu bar.
There are scrollbars.
The window is resizable.
The history list is not copied to the new window.
The initial dimensions of the window are 400 pixels wide by 200 pixels high.

To test this command, click the button below:

When you are finished viewing the new window, you can close it by clicking the Close box on the upper right corner of the window.

Netscape Communicator 4.0's version of JavaScript supports additional features. You can include these features in your feature list, but they may cause your JavaScript command to fail for browsers other than Netscape Communicator 4.0.

Name	Description
alwaysLowered	Move the window to the bottom of all other windows on your desktop
alwaysRaised	Move the window to the top of all other windows on your desktop
dependent	Create anew window that isn't a child of the current window
hotkeys	Disable hotkeys if the new window has no menu bar
z-lock	Create a new window that does not appear above other windows
innerHeight	Set the height of the window's internal document area
innerWidth	Set the width of the window's internal document area
outerHeight	Set the height of the window's outer document area
outerWidth	Set the width of the window's outer document area
screenX	Set the distance from the left edge of the window to the left edge of the screen
screenY	Set the distance from the top edge of the window to the top edge of the screen

Working with the Status Bar

You can use JavaScript to change the message on the status bar in response to moving the mouse over a hyperlink. This is done by adding the onMouseOver event handler to the <A> tag to initiate a JavaScript command or function, and then within the function to modify the status property. The function or set of JavaScript commands must also return the value "true". This is needed in order to display a new value in the status bar using the onMouseOver event handler. Here is an example of HTML tag that displays a customized message in the status bar when the mouse passes over a hyperlink to the T7.html file:

Now that tag will be applied to the text below. Move your mouse over the hypertext and view the results in your Web browser status bar.

View T7.html

Displaying the Date Last Modified

Many Web authors like to insert the date the HTML file was last changed on their Web pages. This feature allows users to quickly determine whether the page has been modified since their last visit. You can display the modification date using the lastModified property of the Document object. Here is a JavaScript command that displays the modification date:

document.write("Last modified on "+document.lastModified);

and here is how the modification date appears on the Web page:

Note that the object returned by the lastModified property is a date object, and you can use the various date methods offered by JavaScript to extract specific date information.

Creating an Object

You can create your own objects in JavaScript using a constructor function, which is a function that defines the name and properties of a function. For example, you want to create an object named "Employee" which has the following properties:

Name
Age
Gender
Years Employed

Here is the constructor function that would create the Employee object:

function Employee(name, age, gender, years) {

this.name=name;

this.age=age;

this.gender=gender;

this.years=years;

}

With this function, you can create an object using the new keyword:

employee1 = new Employee("David Wayne",27,"Male",4);

The new object, named employee1, has four properties: employee1.name, employee1.age, employee1.gender and employee1.years. If you want to change the value of one of these properties, you could do so using the standard JavaScript syntax. For example, the change the number of years employed by David Wayne to 3, use the expression:

employee1.years=3;

You can also add a method to one of your customized objects. To do this, you must create a function which you'll call from within your constructor function. Say you want to create and add a method to the Employee object that will calculate the age at which the employee was hired. The function might look as follows:

function AgeHired() {
return (this.age - this.years);
}

Next you associate the method with the Employee object in the constructor function.

function Employee(name, age, gender, years) {

this.name=name;

this.age=age;

this.gender=gender;

this.years=years;

this.AgeHired=AgeHired;

}

Now to use the AgeHired method, you simply create the object and then apply the method as follows:

employee1 = new Employee("David Wayne",27,"Male",4);
var Age_When_Hired = employee1.AgeHired();

In this example, the new variable, Age_When_Hired, will have the value, 23, using the newly-created AgeHired() method.

Checking String Length

Say your form has a field for social security numbers. Social security numbers are limited to 9 characters. You can check whether a user has entered a proper social security number (as least as far as string length is concerned) by using the length property of the string object. For example, the following function checks to see whether the length of the text string in the SSN field is equal to 9, if it is not an error message is generated.

function CheckLen() {

var StringCheck=document.REG.SSN.value;

if (StringCheck.length != 9) {
alert("Not a valid social security number");

document.REG.SSN.focus();

}

Note that this code uses the "!=" operator which is true only if the two elements of the expression are not equal.

Object Classes and Instances

One distinction you need to be aware of is the distinction between an object class and an object instance. An object class is the definition of an object. An object instance is the specific realization of an object class. For example, "document" is an object class, but the specific Web page that you're working with is an object instance. JavaScript has a wide variety of object classes, but these cannot generally be used until an object instance is created.

There are two ways an object instance is created. One way is automatically, by the Web browser. For example, an object instance of the document object class is created whenever your Web browser opens a Web page. The other way is using a JavaScript command. For example, you may use JavaScript to create an instance of the Date object. In this case, you have to use the new keyword to create the new object instance.

Online Companion Home

Software

Gallery