Tutorials - JavaScript - Lesson 3 - The Window Command
The "window" command allows you to manipulate browsers in
many different ways. For example, you may have noticed the back button at
the bottom of the page, this is accomplished by using the
"window" command. You can also use this command to open, close,
and move windows.
Here's an example of a JavaScript pop-up window:
<html>
<head>
<title>pop-up window example</title>
<script LANGUAGE="JavaScript">
newpopup = null;
function newwindow(link)
{
newpopup = window.open('', 'TitleGoesHere',
'width=400, height=450, resizable=1, scrollbars=1, toolbar=0, menubar=0');
newpopup.location.href = link;
}
</script>
</head>
<body>
<p><a href="javascript:newwindow('popup.htm')">This
is a JavaScript pop-up window</a></p>
</body>
</html>
Basically, how this code works is that you set up a function. A
function is a piece of JavaScript that can be called many times throughout
the web page, in this case the function is called "newpopup".
You then assign what the function does, in this case "window.open"
and then set the variables for that function.
window.open opens the new windows, you
then set the width, height
and toolbar options for the page, where 0=off
and 1=on, try changing these and see how they
affect the page.
When you open the link to the pop-up window, you can see the close
button on it, this again is a "window" command.
<a href="#" window.close()>text
or image </a>
Because the JavaScript button is a link, you need to place the <a>
tags around the text or image that will close the window but because is
doesn't link anywhere (we're closing the window remember) you refer the
window to itself by using the "#"
tag. The window command refers to the open page which effectively
"targets" the JavaScript, and the close command simply closes
the window.
It is the same for the back button, here's the code:
<a href="#" onclick="window.history.back()">image
or text</a>
This works in a similar way to the window.close
command, except this time, the JavaScript is referring the command to the
browser cache (history) and telling the
window to go back 1 step. Again, if you want to make the window go forward
then:
<a href="#" onclick="window.history.foward()">image
or text</a>
The "()" brackets denote that this variable field is
empty, therefore jumping the window forward or backwards one page
In Tutorial
4, we'll discuss alerts.
back
| 
