JavaScript Objects and Properties

Objects are a fundamental part of JavaScript. An object is a data type that contains named pieces of data, i.e. properties.

Properties are the values belonging to the objects. A property may be of any type. A property may be an object itself with its own set of properties.

• The dot notation is normally used to access the properties from an object
• The object names go on the left, while the property name goes on the right

object-name.property-name

• Examples:
  • navigator.appName /* -- browser name, e.g. Netscape or MSIE */
• document.URL // -- complete document URL
• document.bgColor="indigo" /* -- changes the background color */

JavaScript has many built-in objects; they all follow a given hierarchy. The most important ones are:

• The window object - browser windowing, at the highest level
• The document object - of the document being displayed
• The navigator object - stores browser environment characteristics
• The forms object - holds HTML forms info
• The history object - holds browser's history (visited links)

Before using an object, an instance of it must be created. An object class is a definition/blueprint of an object. Instances are used for creating objects.

• Some instances are created automatically, e.g. the document object
• Others have to be created explicitly, e.g. the Date object;
  namely, var today = new Date()

The window object

The window object is created automatically, when the browser opens a window. Commonly-used window object properties include:

• name - the window's name
• opener - name of window that opened this window
• self - synonym for current window or frame
• status - text in the status bar
  onMouseOver = "status='See site map';return true;"
  self.status = "Calculation complete."
• innerHeight - height of document area, in pixels, JavaScript 1.2 and up
• innerWidth - width of document area, JS1+
• length - number of frames in window

Window properties that are objects are:

• document - currently displayed document
• frame - object with info about frame(s)
• history - history list of current frame or window
• location - URL info of current document.
  use window.location="http://..." to redirect
• screen - allows us to find out screen resolution (width and height) in pixels! JavaScipt 1.2 and up.

Referring to windows

• form1.username.value = 'Ludwig'
• window.document.form1.username.value="Michael Jordan"
• parent.frame1.document.form1.username.value = "Delores Jordan "
• win1.document.bgColor = "#FFFFFF" // -- i.e. white background
• win1.win2.document.fgColor = "#0000FF" // -- blue foreground

Window Object Methods

• alert() - post small dialog box on the screen
  e.g. alert("Please enter a valid email address.")
  
  
• blur() - moves focus away from specified window
• setTimeout() - specifies a delay, in milliseconds
• clearTimeout() - cancels delay
  
  
• open() - opens a window
  • syntax: open("url","win-name","options")
  • sample window open method
    
    
• close() - closes it
• confirm() - prompts for OK|Cancel, returns true|false
  e.g. confirm("Go ahead and download 100 Megabyte movie?")
  
  
• prompt() - small dialog box prompting for a character string
  e.g. prompt("Enter keyword to search:")
  
  
• back() - browser Back button, JS1.2+
  Better to use history.go(-1) instead
  
  
• find() - opens browser search dialog box, JS1.2+
• forward(), home(), stop(), print() -- all JS1.2+

The document object

The window object's document object contains information about the current document being displayed on the browser's window. The most common properties are:

• bgColor - the document's background color
  e.g. document.bgColor = "#00FF00"
• Applet - an <APPLET> tag, used to embed a Java applet into a document
• domain - domain name of Web server
• fgColor - the document's foreground color
• ids - IDs to use in <STYLE> tags for Dynamic HTML (JS1.2+)
• location - URL of the currently displayed document

Document object methods

There are a handful of document methods. The most important ones are:

• write() - writes text (inc. HTML) to document
  e.g. document.write("<H2>Related Links</H2> blah <P>blah ...")
  
  
• writeln() - writes text to document, ending with a newline character

The navigator object

A built-in object containing information about the browser that has loaded the document. Its properties are very useful in detecting the type of browser in use, the browser's configuration and plug-in availability. The navigator properties are:

• appCodeName - browser's code name
  e.g. "Mozilla" (even for MSIE :-)
  
  
• appName - browser's (long) name
  e.g. "Netscape" or "Microsoft Internet Explorer"
  
  
• appVersion - browser's version
  e.g. "4.04 [en] (Win95;I)", "4.0 (compatible; MSIE 4.0; Windows 95)"
  e.g. if (navigator.appVersion.indexOf("4.") > 0 ...
  
  
• MimeType - an object containing a MIME type that can be handled by the browser
  
• mimeTypes - an array of MimeType objects
• platform - operating system for which browser was compiled (JS1.2+)
• Plugin - an object with info about an installed plug-in viewer
• plugins - an array of plug-ins installed in the browser
  e.g. shocked = (nagivator.plugins["Shockwave"] != null)
  

There are only two navigator methods, one of which is javaEnabled() - which returns a Boolean value indicating whether Java has been enabled in the browser.

JavaScript Seminar Home | Previous | Next