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
|
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:
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:
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.
(this will open a new window)
The Concept
The Script
The Script’s Effect
Deconstructing the Script
What You’ve Learned
Your Assignment