JavaScript - Browser Objects
CIW Website Design Manager Course Section 2, Part A1, Chapter 6
Document Object
The window object can be considered as the browser, while the document can be considered as the page you see in the browser. The document object is subordinate to the window object. The document object is created by the <BODY></BODY> HTML tags.
I wasn't going to spend too much time discussing the document properties but, having experimented with a few, they are worth a mention.
| Document Object Properties | |
|---|---|
| Property | Description |
| alinkColor | The colour of an active link |
| vlinkColor | The colour of a visited link |
| bgColor | Background colour of the document |
| fgColor | The text, or foreground, color of the document |
| location | the current URL |
| lastModified | the date and time the document was last modified |
| title | the text between the <TITLE> and </TITLE> tags |
| forms | An Array containing references to each form in the document |
alinkColor and vlinkColor are useful to customise the look of your page, but be careful with your choice of colour. Remember most users are used to blue links. I, personally, prefer CSS for this type of customisation. I experimented a little with the location property and discovered it is writeable, and setting it to a valid URL will displayed that page, in place of the current page!
| Document Object Methods | |
|---|---|
| Method | Description |
| write(string) | Writes the text to the document |
| open() | Prepares the document to receive data from a write, or data, stream |
| writeln() | Like write() but appends a carriage return |
| close() | Closes the data stream |
Both the write() method and the open() method are worth discussing. write() exhibits different behaviour when writing to the current document than it does when writing to a popup window document. I'm not sure that the open() description, above, is entirely accurate. The description given in the course agrees with the description in a JavaScript book that I have. However, I came across a Microsoft page that has a different explanation. In order to try and demonstrate these points I have put a demonstration page together, for which you will need popup windows enabled.
I have revised my opinion about the open() method. In the tutor marked assignment, it refers to preparing the window to accept a data stream. This makes more sense to me, however, write() appears to work perfectly well without open().
Image Object
In JavaScript images can be accessed through the images Array. The image object is subordinate to the document object in the hierarchy. The image object has properties and event handlers, but does not have any methods.
| The image Object Properties | |
|---|---|
| Property | Description |
| src | The URL of the image, this is a required parameter |
| height | The height of the displayed image in pixels |
| width | The width of the displayed image in pixels |
| length | The number of elements in the images array |
| complete | True if the image has finished loading |
| hspace | the border space to the laft and right of the image in pixels |
| vspace | the border space above and below the image in pixels |
| lowsrc | The URL for a low-bandwidth image |
Event handlers supported by the image object include onLoad, onError, onAbort, onClick, onMouseOver and onMouseOut.
History Object
The history object holds a list of the pages visited, in the current session, with the browser. The history object is subordinate to the window object in the hierarchy. There are no properties or event handlers for this object.
| The history Object Methods | |
|---|---|
| Method | Description |
| back() | Changes the displayed page to the previous page in the history list. |
| forward() | Changes the displayed page to the subsequent page in the history list. |
| go(x) | If x is an integer, the browser will move the displayed page back x number of pages in the history list. If x is a string the displayed page will change to the entry in the history list that matches x. |
Location Object
The location object allows a URL to be specified, or allows the URL to be read. Furthermore, the properties of the location object split out the component parts of the URL. The location object is subordinate to the window object in the hierarchy.
A URL can be represented as:
protocol://hostname:port/pathname?search or
protocol://hostname:port/pathname#
| The location Object Properties | |
|---|---|
| Property | Description |
| href | Specifies the partial or full URL of a file or site |
| protocol | Specifies the protocol currently in use |
| host | Refers to the hostname:port portion of the URL |
| hostname | Specifies the hostname of the URL |
| port | Specifies the port number used for access, if a port number is provided |
| pathname | Indicates the path to the target file |
| search | Return the text following the ? character if a search string is present |
| hash | Specifies the internal link anchor name, which follows the hash symbol in the URL |
Navigator Object
The navigator object can return information about the browser and version in use. The navigator object is a top-level object in the hierarchy.
| The navigator Object Properties | |
|---|---|
| Property | Description |
| appCodeName | String value containing the code name of the client |
| AppName | Array object containing the name of the client |
| AppVersion | String value containing the version information for the client |
| language | A code indicating the language of the client browser |
| mimeTypes | An array repesenting all of the MIME types suppoerted by the browser |
| platform | Identifies the operating system for which the browser was compiled |
| plugins | An array identifying all of the pluins installed on the browser |
| userAgent | String value containing the complete value of the user-agent header sent in the HTTP request |
Methods supported by the navigator object are: JavaEnabled(), preference() and taintEnabled().
Data tainting is a term I hadn't come across before, so I did a little research. It is a method of securing data to stop it being passed to the server without the user's permission. It is not supported in Internet Explorer and was removed in JavaScript 1.2