BACK

Part 3 - Objects (Properties, methods & objections!)

Contents

OOPs Objects in your browser The DOM (document object model) A pre-defined miscellany! Summary

Introduction

OOPs

OOP is generally thought of as having the following properties:

1. Encapsulation;
2. Polymorphism;
3. Inheritance.

Let's examine each of these in turn.

Encapsulation

Let's say I have two programs, we'll call the programs DataManager and ScreenShow. DataManager manages a database, ScreenShow shows things on the screen. As a user, I want some arcane information shown to me on my screen, so I ask ScreenShow to do this task for me. ScreenShow needs to talk to DataManager to get the information she requires. Now let's consider how she might do this. She might:

1. Send a message to DataManager saying "When you have a moment, send me the following information through this convenient data pipe I've provided";
2. Call a routine she knows exists within DataManager that causes DataManager to interrogate the database, and provide the information;
3. Viciously hijack DataManager, writing program instructions into the area where DataManager works and coercing DataManager into giving up the necessary information!

Obviously there are many other possibilities, but which do you think is the best? Clearly the first option, which is an example of "loose coupling". The monstrous third option is an outrageously obvious example of "tight coupling". The first option also embodies the concept of "information hiding", which simply means that when you interrogate a module, you don't have to know about the internal workings of the module to gain useful information. In fact, it's often a bad idea to know, or have to know, much about how the module works - rather just ask your question! It is also clear that a hostile program (for example, a virus) is more likely to be able to injure a module if it has access to the inner workings of that module.

Encapsulation is a good thing!

Polymorphism

Inheritance

Mmph. This idiot is not convinced, especially when an object can inherit different properties from several different prototypes. Things rapidly become hideously complex. In addition, some of these properties can be changed in the more refined and abstruse child of a simple, easily understood base object. This quickly causes confusion, and cockups.

We suspect that one of the three reasons why modern programmers screwed up so badly on projects like Denver International Airport, why (with practically unlimited funding) nobody seems capable of constructing a replacement for the thirty year old software that administers air-traffic control, and possibly even why (we are told) certain fly-by-wire aircraft have had unexplained little crashes, is because of unquestioning acceptance of flashy new philosophies (Only our ignorant opinion).

Inheritance is a nightmare.

Why JavaScript isn't a fully-fledged example of OOP

Now let's start looking at the various window properties.

First we'll dispense with some of the simple ones:

1. window.status - You have access to the text on the status bar of your browser! You can even reset it! Try clicking on the following link:

   <A HREF="err.htm" onClick="status='You clicked me';return false">

   What we've done here is to attach an anchor that is exactly the same as the text on the screen. If you click on the link, then the status bar changes, but the link is NOT followed - all because we said return false. Take note that returning false cancels the default action that one would expect, so the branch to the page err.htm is not taken!

   You can use defaultStatus to provide a default message, set up when the user loads a webpage (as we did on this page).

2. window.screen is unfortunately only found in JavaScript 1.2 (You could check that the user is running 1.2 (how?) and then use the properties of this object to determine what images will fit on the screen, and so on! A pity earlier versions didn't have this. The relevant properties are .availWidth and .availHeight. There is also a .colorDepth, which is the log₂ of the number of colours available).

3. window.location represents the current document being displayed. It in turn has several properties:
   • .href
   • .protocol
   • .host
   • .pathname
   • .search - anything in a URL after a question mark. You can use this property (rather than our clumsy #hash) to transfer information between scripts!
   • .hash (Where have we come across this before)?

   Take note of the following code (from our first and second pages):

   Setting a new location

   location="part2.htm" + "#" + whoyou;

   See how JavaScript more-or-less breaks it's own rules - rather than using a method, we have this crude (official!) way of moving to another page! Only in JavaScript 1.1 were two methods added to the window.location object to allow some fiddling with page loading. They are:

   • location.reload()
   • location.replace()

   We used the replace() method in our transition page between our first tutorial and the second one. Pity if you're using IE3, however. Take note that there is also a document.location which is pretty useless, and is in fact usually the same as window.location.href ( replace() was added in JavaScript version 1.1, and open() was altered in the same version to clear existing document content!)

   Note that, to be pedantic, you should actually specify window.location.href = something, as some browsers could otherwise mis-interpret what you mean.

4. window.history is quite variable from browser to browser, and is generally protected from prying eyes (as it says where the user has been)! You can however use the following methods:
   • back()
   • forward()
   The third method (go) is best avoided; the above two do the same as clicking on the relevant browser buttons. As an aside, note that go(0) reloads the page - you will sometimes encounter this.

5. The window.frames object is exciting, complex, and highly confusing, so we'll defer deep exploration of it until later. (As an aside, you can check whether frames are present - if frames.length is zero, there are no frames).

6. window.name - JavaScript generally makes little distinction between windows and frames; you'll find that it's generally important to name a frame that you create (or a window that you open) so that later on such objects can talk to one another! Most important is the use of such a name in <a> anchors and <form>'s - the TARGET="name" option in such HTML code allows you to specify the name of the window where you want results displayed! (We talk about targets in part five).

Whew! What's left? Well, the biggie is:

The document Object and DOM

Quite a list, but with mercifully few methods! We've highlighted the most important properties in green. We'll look at these in detail, but first the methods. You should for the time being, at least, ignore the Netscape and Microsoft-specific properties. Eventually you'll be forced to know a few of them, but most are irrelevant, or even dangerous!

You already know how document.write works! We used it on page two of our tutorial to write a personalised message to a web-page. open() and close() are extensions of this sort of idea, and writeln() just writes to a document, followed by a "\n" character, which you also understand perfectly. Let's look at document.open(). This is used to clear the current document - you can then use document.write() to write to it, and finally close off the document with document.close().

1. anchors and links are arguably the most important components of any document. These two arrays describe:
   • All the anchors that exist within a document (made for example using
     <a name="anchorname">);
   • All the references (links) to other web-pages, etc.

   The simpler of the two is the list of anchor objects. Anchors have no properties, methods or events - they just keep track of all named offsets within a web page. anchors.length gives us all of the document's anchors. You will not often use the anchor objects.

   The link object is a lot more complex. Fortunately, we've encountered most of its properties before, during our tinkering. Here they are:

   link properties
   Property	Meaning
   href	The whole URL
   pathname	the pathname part of the url
   protocol	the protocol e.g. http: or ftp:
   host, hostname and port	(More redundancy! host = hostname:port)
   hash	The #name part of the URL
   search	Everything after a "?" in the URL
   target	The window where the document will be loaded, if specified!

   A list of link properties for the first link on this page!

   The above table is (again) a table containing the dynamically generated properties of the first link in the current web-page (The link at the top of the page that points back to the preceding page in our tutorial). You may wish to view the source to see that I'm not cheating - look for #FF6633, the lurid background colour of this and the preceding table.

2. applets refer to Java applets contained in the page. We won't talk about them now, nor will we discuss:

3. embeds which are embedded plug-ins.

4. forms are more fun. Here are their properties:

   form properties
   Property	Meaning
   action	(specifies where form data are sent - a common destination is e.g. "/cgi-bin/FormMail.pl" - to a Perl script)
   elements	Each form element is represented here! (See below)
   length	Tells us the number of elements
   encoding	(MIME encoding - don't worry about this now)!
   method	(how is information sent to the server? "GET" or "POST" - POST is usual, submitting the data to the standard input stream of the CGI script)
   name	useful in referring to the form by name
   target	Say where 'responses' should go (usually the name of a window)

   Don't be too scared by this list. We won't examine forms in any detail yet, but at the end of the fourth page of our tutorial, we present a small digression where we actually construct and use a form step-by-step. (We thought it was best to wait until you have a firm grasp of form-related events).

   The methods for the form are few and only mildly interesting - they are limited to reset() and submit(), the meanings of which are obvious,
   and handleEvent() which, is Netscape-specific, passing control to a specified event handler.

   Let's talk about the form elements. In our skeleton form on page 1 of our tutorial, we learnt about a few form elements. Here's the complete collection:

   form element types (most created with <INPUT type="{fill in type here}"> apart from <select> and <textarea> types )
   Type of element	What it does	Properties
   button		name type value
   checkbox	(<---- Click on me!)	checked defaultChecked name, type, value
   hidden	(A hidden field, not displayed, but used to send hidden information to the final destination of the form data)	name, type, value
   password	(Type something in the box)	defaultValue name, type, value
   radio	(Click me too!)	checked defaultChecked length name, type, value
   reset	(Click me after changing a few other fields)	name, type, value
   select	A default option A 2nd option	length options selectedIndex name, type
   submit	(Do NOT click me)	name, type, value
   text		defaultValue name, type, value
   FileUpload	(used to upload a file - the name is typed in!)	name, type, value
   textarea	This is text typed after the <textarea> tag - it ends with a </textarea> tag	defaultValue name, type, value

   You can see that form elements are a powerful adjunct to JavaScript - and vice versa! The full power of this association will only be revealed later.

5. The images array stores information about all the images on the page, as follows:

   image properties
   Property	Meaning
   src	The path where the image file is found, as specified in the SRC="filename.gif" part of the <img > tag
   width, height	Image pixel dimensions - fixed!
   border	value of BORDER="" attribute. This border thickness in pixels cannot be altered.
   complete	(Did the image load completely?)
   hspace, vspace, lowsrc	(Correspond to these HTML image attributes - the space around an image and low resolution image source)
   name	Yep, the image can have a name!
   prototype	You can add your own user properties to the image too!

   Pretty boring for the most part, aren't they? The image object also has NO methods associated with it. You would think that was it, but you would be wrong! For JavaScript has one more sneaky trick up its sleeve - you can make new objects. Look at the following - it's called a constructor

   An example of the Image() constructor

   myReserveImage = new Image(); myReserveImage.src = "whatever.gif";

   What did we just do? We set aside a new object, giving it a name and then loading an image into the object. It looks cute, it has some uses, but such objects are not accessible through the document.images array.

   What do you do if you want to alter an image that's already displayed on a page? Most of the image properties in the table above can only be read. However, two can be altered, and when you alter them, the image changes. The two properties that can be altered are src and lowsrc. You can generally forget about lowsrc, but altering src has a dramatic result - the old image is replaced by the new one specified as the value of src. So you can change an image once it's displayed on screen. One caution however - if you load an image that differs in size from the original one, the new image is squeezed or stretched to fit onto the procrustean bed of the old image!

   Finally let's look at the properties of an image using document.write() as we did for links above:

   Sample image properties for an image on this page

   (Why does my version of MSIE 4 not get the height and width correct? Why does Netscape 4 have complete as "false"?)

1. Date
2. String

Each has a wealth of associated methods. So many, in fact, that we thought it advisable to explore these methods on separate pages. If you wish to do so, click on the above links! Be warned - they are complex, and you can always come back later.

Summary

(Alternatively, you might first wish to play with windows a bit - this is fun, and without trying it, you won't really understand how to make irritating pop-up windows that drive people away from your website. We explore the window.open() method in some detail. We also look at how one can set a timer to do something repetitively, or after a delay)!