How to Use JavaScript Objects for HTML Integration - dummies

How to Use JavaScript Objects for HTML Integration

By John Paul Mueller

JavaScript comes with a host of built-in objects that help you perform general programming tasks. You can create a new variable of any type you want. JavaScript also supports a number of other built-in objects that help you interact with the pages you create. There are three basic object types: browser, Document Object Model (DOM), and built-in.

JavaScript browser objects

Here’s a quick overview of some of the more interesting JavaScript browser objects — those that relate to how the browser performs tasks:

  • history: Provides the means for examining and moving between URLs stored in the browser’s history.

  • location: Contains information about the current URL. This object also provides the means to perform tasks such as loading a new page or reloading the current page.

  • navigator: Contains information about the current browser. For example, you can determine the browser type and version, and determine whether the browser has cookies enabled.

  • screen: Specifies the physical characteristics of the device used to display the page, including page height, width, and color depth.

  • window: Provides access to the browser’s window so that you can perform tasks such as displaying message boxes. When working with pages that contain frames, the browser creates a window for the entire HTML document and another window for each frame.

Built-in DOM objects

JavaScript also supports special objects for the DOM. The DOM is a platform and browser independent method of describing the content, structure, and style of documents. Every page you load into the browser is part of the DOM.

The following list provides a brief overview of the built-in DOM objects:

  • Attr: Provides access to individual attributes within the document.

  • document: Provides access to the entire document. You can use this object to access any part of the document. In addition, this object lets you display information directly on the page and perform other tasks related to the user interface.

  • Element: Contains an individual document element of any type supported as XML. This object provides access to attributes through the Attr object and properties through the Node object.

  • Events: Supports access to existing events and creation of new ones.

  • HTMLElement: Contains an individual HTML document element, such as a paragraph or a control. Use the Element and Node objects to gain access to element attributes and properties.

  • Node: Defines the particulars of any given node, which can include the document as a whole, an element within the document, an attribute provided as part of an element, text, and comments.

  • NodeFilter: Specifies which nodes appear as part of a NodeIterator used to traverse the list of nodes within a document.

  • NodeIterator: Provides a method of obtaining a list of nodes within a document. Traversing the list of nodes can help you locate specific nodes and interact with them. For example, you might find all of the <input> tag nodes and add a particular attribute to them.

  • NodeList: Contains an ordered list of all the nodes within the document or in a particular area of the document.

  • NamedNodeMap: Contains an unordered list of all the nodes within the document or in a particular area of the document.

JavaScript supports a number of additional built-in objects. These simply describe the objects you use most often. Check here to see a complete list of built-in JavaScript objects.

How to use built-in objects

You can use some of the built-in objects to create some interesting content for a page. The page contains a simple header and the following button:

<input type="button"
    value="Display Screen Stats"

When the code calls DisplayScreenStats(), it queries the user about displaying the statistics onscreen. When the user clicks OK, the function obtains and displays the required information by creating the required nodes on the page. In other words, the example actually adds new tags to the page to contain the custom content.

Here’s the code for the DisplayScreenStats() function.

function DisplayScreenStats()
  // Ask the user about displaying the screen
  // information.
  var DoIt = window.confirm(
   "Display the screen dimensions?");
  // If the user agrees, display the information.
  if (DoIt)
   // Create a new <p> tag to store the data.
   var Para = document.createElement("p");
   // Create a new <br> tag to provide space.
   var Spacer1 = document.createElement("br");
   var Spacer2 = document.createElement("br");
   // Create the content for the <p> tag.
   var Content1 = document.createTextNode(
     "Width: " + window.screen.width);
   var Content2 = document.createTextNode(
     "Height: " + window.screen.height);
   var Content3 = document.createTextNode(
     "Colors: " + window.screen.colorDepth);
   // Add the content to the <p> tag.
   // Display the <p> tag on the page.

The confirm() function creates a dialog box that contains two buttons: OK and Cancel. When the user clicks OK, DoIt contains true. Otherwise, DoIt contains false. It tests DoIt and when DoIt is true, the function obtains and displays the screen statistics onscreen.

The document.createElement() method can create new elements for you. In this example, the code uses them to create a <p> tag and a <br> tag. The <p> tag holds the content you want to see onscreen, and the <br> tag creates space between the individual statistics. You can use this method to create any legal tag that HTML5 supports.

The content is text, so you need to use the document.createTextNode() method to create a text node. Within this node, you place the content you want to display as part of the <p> tag. The window.screen object provides access to properties that contain information about the browser’s window. In this case, the application displays the content of the width, height, and colorDepth properties.

All you have at this point is a new <p> tag that no one can see. To display the <p> tag, the code calls document.body.appendChild() to add the <p> tag to the rest of the information on the page. The information from your browser will be different, but the page will essentially look the same.