Please keep
voting for us
as a Top 100
Web site!
|
|
|
Javascript Tutorial, Part 3
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
object.property
is extended to:
parentObject.childObject.childObjectsProperty
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("<HTML>")
displayWindow.document.write
("<HEAD><TITLE>JavaScript Tutorial Display Window</TITLE></HEAD>")
displayWindow.document.write("<BODY>")
displayWindow.document.write("Window summary information:<BR>")
displayWindow.document.write("</BODY>")
displayWindow.document.write("</HTML>")
displayWindow.document.close()
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(window.top.document.title+"<BR>")
displayWindow.document.write(" ")
displayWindow.document.write("The parent window document is:")
displayWindow.document.write(window.parent.document.title+"<BR>")
displayWindow.document.write(" ")
displayWindow.document.write(" ")
displayWindow.document.write("<STRONG>The current window
document is:")
displayWindow.document.write(window.document.title+"<BR>")
displayWindow.document.write(" ")
displayWindow.document.write(" ")
displayWindow.document.write("The URL for this document is:")
displayWindow.document.write(window.document.URL+"</STRONG><BR>")
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.
exit()
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.
Heidi Brumbaugh has been a writer and editor in the computer publishing industry for ten years. She is currently making the transition to publishing on the Internet, a pursuit ranging from content development to JavaScript programming. Like everyone else with a modem, she is trying to figure out how to strike gold on the Web, or at the very least, support her surfing habit. Feel free to visit her home page.
Copyright © 1999
internet.com CorporationAll Rights Reserved. Legal Notices.
Contact the WebDeveloper.com staff
Last modified: Wed Sep 22 06:11:48 EDT 1999
Refresh Daily
Join Editor-in-Chief David Fiedler
and find truth, justice, and a clue or two.
ActiveX / VBscript Animated GIF Archive Browsers CGI / Perl Database Connectivity Design / Graphics E-Commerce HTML-Advanced: DHTML, CSS HTML / Site Authoring Tools Intranet/Groupware Java JavaScript Multimedia: Audio / Video / Streaming Technologies Opinions Refresh Daily: Editorial Column Security Servers & Server Tools Site Design / Graphics Site Management / Marketing / Log File Analysis Tutorials VRML / 3D XML
