Introduction
In the last part I showed you how you can use JavaScript to prompt the user for information and how you can display HTML via JavaScript. In this part I will show you how you can create and manipulate browser windows using JavaScript.
Windows and HTML
Before learning how to create and manipulate windows in JavaScript, it is important to know how to create and manipulate them in HTML. The HTML manipulation is very basic but will also help you to understand how windows work in web browsers.
Firstly you must know the two ways of creating a link which opens in a separate window. The most common use is to have:
<a href="link.html" target="_blank">Click Here</a>
This is the standard HTML code for opening a new window with the page in it.
A less common way of opening a new window is to use:
<a href="link.html" target="mywindow">Click Here</a>
This will create a new window, just like the first set of code, but it will also name the window 'mywindow'. This means that you can then have:
<a href="page2.html" target="mywindow">Change the page</a>
which, when clicked, will change the page which appears in the window you opened.
Knowing about how a window name works is very important as you must understand it to use JavaScript windows effectively.
Opening A Window With JavaScript
The first thing you should learn to do with JavaScript is to do exactly the same thing with JavaScript as you could do with HTML. The JavaScript command used to open a window is:
window.open
For this to work, though, it requires two extra things. Firstly you will need to have some extra information so that the JavaScript knows how to open the window:
window.open('link.html','mywindow');
This means that a window called 'mywindow' will open with the page link.html in it, exactly like with the HTML code above.
This code can either used as part of your JavaScript code (for example if you included it in the JavaScript code in the <head> section of your page it would open when the page loaded) or can be used when a link is clicked. To do this you must use another JavaScript command called onclick.
I will give you more information about how this command works in a later part but for now all you really need to know is the following: In your standard HTML code include a link as follows:
<a href="#" onClick="window.open('link.html','mywindow');">Click Here</a>
As you can see this is just the same window.open command inside an HTML tag.
Manipulating The Window with JavaScript
The main reason of using JavaScript to manipulate windows, though, is because you can set many things on the window which you could never do with HTML. JavaScript allows you to use commands to decide which parts of the browser window appear. This is done using a third part of the window.open command. This is where you decide the window features:
window.open('link.html','mywindow','window features');
There are many things you can include here. For example if you wanted a window that only has a location bar and a status bar (the part at the bottom of the browser) then you would use the following code:
window.open('link.html','mywindow','location, status');
There are many different things you can include in your new window:
Examples Of Manipulating Windows using JavaScript
You may be a little confused by all these options so I will show you a few examples of opening a window in JavaScript:
This window will open with a location bar, toolbar and will be resizable:
window.open('window1.htm','the_first_window','location, toolbar, resizable');
This will open another page in this window:
window.open('window2.htm','thefirstwindow');
This will open a window 200 pixels wide and 300 pixels high. It is not resizable and has a status bar and will scroll if necessary. This is a very commonly used combination:
window.open('window1.htm','thesecondwindow','height=300,width=200,status,scrollbars');
Next Part
In this part you found out how to create and manipulate windows using JavaScript. In the next part I will explain how to create mouseover images and more on how to execute JavaScripts.
In the last part I showed you how you can use JavaScript to prompt the user for information and how you can display HTML via JavaScript. In this part I will show you how you can create and manipulate browser windows using JavaScript.
Windows and HTML
Before learning how to create and manipulate windows in JavaScript, it is important to know how to create and manipulate them in HTML. The HTML manipulation is very basic but will also help you to understand how windows work in web browsers.
Firstly you must know the two ways of creating a link which opens in a separate window. The most common use is to have:
<a href="link.html" target="_blank">Click Here</a>
This is the standard HTML code for opening a new window with the page in it.
A less common way of opening a new window is to use:
<a href="link.html" target="mywindow">Click Here</a>
This will create a new window, just like the first set of code, but it will also name the window 'mywindow'. This means that you can then have:
<a href="page2.html" target="mywindow">Change the page</a>
which, when clicked, will change the page which appears in the window you opened.
Knowing about how a window name works is very important as you must understand it to use JavaScript windows effectively.
Opening A Window With JavaScript
The first thing you should learn to do with JavaScript is to do exactly the same thing with JavaScript as you could do with HTML. The JavaScript command used to open a window is:
window.open
For this to work, though, it requires two extra things. Firstly you will need to have some extra information so that the JavaScript knows how to open the window:
window.open('link.html','mywindow');
This means that a window called 'mywindow' will open with the page link.html in it, exactly like with the HTML code above.
This code can either used as part of your JavaScript code (for example if you included it in the JavaScript code in the <head> section of your page it would open when the page loaded) or can be used when a link is clicked. To do this you must use another JavaScript command called onclick.
I will give you more information about how this command works in a later part but for now all you really need to know is the following: In your standard HTML code include a link as follows:
<a href="#" onClick="window.open('link.html','mywindow');">Click Here</a>
As you can see this is just the same window.open command inside an HTML tag.
Manipulating The Window with JavaScript
The main reason of using JavaScript to manipulate windows, though, is because you can set many things on the window which you could never do with HTML. JavaScript allows you to use commands to decide which parts of the browser window appear. This is done using a third part of the window.open command. This is where you decide the window features:
window.open('link.html','mywindow','window features');
There are many things you can include here. For example if you wanted a window that only has a location bar and a status bar (the part at the bottom of the browser) then you would use the following code:
window.open('link.html','mywindow','location, status');
There are many different things you can include in your new window:
| Feature | Function |
| menubar | The File, Edit etc. menus at the top of the browser will be shown |
| scrollbar | This will show scrollbars at the side of the window if they are needed |
| width | You can set the width of the window in pixels (see the next section) |
| height | You can set the height of the window in pixels (see the next section) |
| toolbar | This will display the browser toolbar with the Back, Stop, Refresh buttons etc. |
| location | The location bar (where you type in URLs) will be displayed in the browser |
| resizable | This will allow the window to be resized by the user |
| directories | This will show the directories in Netscape browsers like 'Whats new' and 'Whats cool' |
Examples Of Manipulating Windows using JavaScript
You may be a little confused by all these options so I will show you a few examples of opening a window in JavaScript:
This window will open with a location bar, toolbar and will be resizable:
window.open('window1.htm','the_first_window','location, toolbar, resizable');
This will open another page in this window:
window.open('window2.htm','thefirstwindow');
This will open a window 200 pixels wide and 300 pixels high. It is not resizable and has a status bar and will scroll if necessary. This is a very commonly used combination:
window.open('window1.htm','thesecondwindow','height=300,width=200,status,scrollbars');
Next Part
In this part you found out how to create and manipulate windows using JavaScript. In the next part I will explain how to create mouseover images and more on how to execute JavaScripts.
No comments:
Post a Comment