JavaScript Primers #12

Joe Burns

Use these to jump around or read it all

The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment

The Concept

In Primer 10 we opened a new window using the "window.open" command. That window was then filled with another HTML document we named in the instance.

Here, we're going to create a new window function where the new window and all of its contents will be carried along in the same HTML document. It is literally the equivalent of two pages in one.

The Script


<SCRIPT type="text/javascript">

function openindex()
    {  

var OpenWindow=window.open("", "newwin", 
"height=300,width=300");

OpenWindow.document.write("<HTML>")

OpenWindow.document.write("<TITLE>New Window</TITLE>")

OpenWindow.document.write("<BODY BGCOLOR='00ffff'>")

OpenWindow.document.write("<CENTER>")

OpenWindow.document.write("<font size=+1>
New Window</font><P>")

OpenWindow.document.write("<a href=
'http://www.htmlgoodies.com' target='main'>
This will open<BR> in the main window</a><p>")

OpenWindow.document.write("<P><HR WIDTH='60%'><P>")

OpenWindow.document.write("<a href='' 
onClick='self.close()'>
This closes the window</a><p>")

OpenWindow.document.write("</CENTER>")
      
   OpenWindow.document.write("</HTML>")

    }

</SCRIPT>

...and in the BODY command:

onLoad="openindex()"

The Script's Effect

The effect is exactly the same as in Primer 10: The same sized window opened and it contained the same two links. The difference is that it was all done with one page. To see the script on this page in action, click here.

Deconstructing the Script

The main script, the part that contains the function, is placed in between the <HEAD> and </HEAD> tags, as are most functions.

The function is named "openindex()" in the normal fashion. Then the fancy parentheses go in to surround the following commands.

Now we get to the meat of it. The variable "OpenWindow" is created that will act as the window.open("instance") command. It looks like this:

var OpenWindow=window.open("", "newwin", "height=300,width=300");

The format is familiar. The only real difference is that there is no URL denoted. See the empty double quotes? That tells the browser to look to the script to find the new window information. It's very similar to not placing a URL in the command that closes the window. It wouldn't close if it had something to load. Same here. It wouldn't look to the script if it had something to load.

Now we start to build the HTML page that will go inside the new window. Here's the first line of text:

OpenWindow.document.write("<HTML>")

This format should also look somewhat familiar. The command is saying that on the variable "OpenWindow" (the new window) this link of text should be written to the document.

Look back up at the full script. That format is followed again and again and again writing lines of text. There's no reason why there cannot be hundreds of lines of text creating a fully functioning HTML document. Mine is small because it's a primer example.

Remember: When you are writing HTML inside a "document.write" command, you cannot use double quotes to surround subcommands. Use single. If you don't, error.

Finally, the function is called for in the BODY command through an "onLoad" Event Handler.

What You Have Learned

Your Assignment

For today's assignment, you'll create a window that opens using a function. Please give the document that appears in the window a green background. In addition, make the TITLE command read "Hello user name - Here is your window! You can gather the user's name through a prompt. Of course, make a link that closes the window.

Here's a possible answer
(this will open a new window)

The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment

On To JavaScript Primer #13