WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

Javascript Tutorial Part 3

Javascript Tutorial
Part 3

by Heidi Brumbaugh

Example 3: Generating an HTML File

OK, time to get serious. This next example will use what you've learned so far and throw in a few new tricks as well. So far all the commands you've seen have been inside event handler tags. What this example does is more complicated than what you've seen before, so rather than enclosing the commands in quotation marks we'll set them aside in our own function. Consecutive JavaScript commands go in your HTML document between <SCRIPT></SCRIPT> tags. Once a function has been defined, it can be called from anywhere on the page. These tags can go anywhere in your document, but it works out that a good place to put your function definitions is in the head of the document. This way, you can be sure functions are loaded before they are called. Here's a skeleton for the program to display a new HTML page:

  <html> <head> <title>JavaScript Tutorial: Example 3</title> </head> <script language="JavaScript"> <!- Begin hiding script contents from old browsers. // JavaScript functions go here. function DisplayPage() { /* This function will contain the code to generate a new page containing data about the current page. */ } // End hiding script contents. -> </script> <body> <h2>JS Software's Terrific Page Analyzer</h2> <form onSubmit="DisplayPage()"> <input type="submit" value="Display Page"> </form> <hr> </body> </html>  

Note the LANGUAGE = "JavaScript" parameter of the <SCRIPT> tag. Also note that everything inside the <SCRIPT>...</SCRIPT> tags is "commented out" so old browsers won't see the code. The keyword function begins the function definition. DisplayPage is the name used to call the function, and the curly brackets will contain the code. You can document your code by preceding comments with two slashes. Everything on the line after the slashes is ignored. To include comments spanning more than one line, enclose the remarks inside /* and */ as shown above.

The function we're going to write will show some information about the current HTML window. The remainder of this article focuses on the DisplayPage function.

Opening a Window

The open method opens a new window. The syntax is

[windowVar =] window.open("URL", "windowName", ["windowFeatures"])

By assigning the return value of this function to a variable, we can refer to the window's properties later on. For example, windowVar.status would return the contents of the new window's status bar. Here's the first command for the DisplayPage routine:

displayWindow = window.open("","WDWindow")

Leaving an empty value for URL gives us a blank window. Omitting the windowFeatures parameter gives us a normal browser window.

Exercise: Look up the details of the open command in Netscape's documentation. Rewrite the command above so that rather than a browser window, the user sees a blank window with no menus, toolbars, or buttons. The document Object and the Window Hierarchy So far we've had objects, properties, and methods that have been used in a fairly straightforward way.

Here's a new twist: Objects can have properties that are themselves objects, with their own properties, methods, and so on. JavaScript is in this sense hierarchical. For example, the window object can contain other objects, notably document objects and frame objects. A document object in turn has properties to describe it, such as title, location, and bgColor, but it also contains properties which are objects with their own characteristics. Examples include the link object and form object which contain information about the links and forms on that document. The syntax of


is extended to:


We're zeroing in on the really good stuff here, the write method of the document object. By sending out text to a document, we can create HTML on the fly, providing dynamic content without having to scurry back to the server. The important thing to know about the write method is that it sends out text as a stream, and doesn't actually display the text until the document is closed with the close method. Here's code to generate a skeleton HTML page in the DisplayPage function.

displayWindow.document.write ("<HEAD><TITLE>JavaScript Tutorial Display Window</TITLE></HEAD>")
displayWindow.document.write("Window summary information:<BR>")

Study this code, and you may note there's no document.open statement. It turns out that any time a JavaScript statement tries to write to a closed document, the document is opened automatically. What's important about this statement is that the current contents of the document will be lost when the page is opened. The following code outputs information about the top, parent, and current document windows. We can get the title of each window by looking at the title property of that window's document object.

displayWindow.document.write("The topmost window document is:")
displayWindow.document.write("The parent window document is:")
displayWindow.document.write("<STRONG>The current window document is:")
displayWindow.document.write("The URL for this document is:")

As you can guess from the syntax above, window.top refers to the topmost window object; window.parent refers to the parent window; window (or you can say, window.self) refers to the current window, that is, the window that contains the code that is currently running. Netscape's documentation of the window object covers these concepts in more detail.

Exercise: Try running the program from the tutorial menu (tutor.htm), then again after loading only ex3cont.htm into the browser window. In the latter case, the same window is parent, top, and self.


This article has introduced you to JavaScript's basic concepts and given you an idea of the kinds of things you can do with this HTML extension.

[ < Javascript Tutorial:
Part 2 ]
[ Javascript Tutorial:
Part 1 > ]

HTML5 Development Center

Recent Articles