Basic JavaScript Template Web Page


Pop-Up Picture Window

Using a pop-up picture window is an interesting way to display photographs to your readers. This method also prevents the reader from having to reload the original window content each time a different photograph is viewed. This example shows a different photo being displayed in the the pop-up window. Each pop-up window stays in the foreground and must be closed before continuing. It's also possible to have multiple windows up at the same time by using unique window names for each occurrence. (See the source code for comments with more information on how). Learn to use these types of behaviors to provide the exact type of action desired for your audience.

Using a text link	Using a button graphic	Using a thumbnail photo

Open Picture


Pop-Up Page Link Window

The script for creating a pop-up page link is similar to the pop-up picture window. A URL to a web page is passed as one of the link parameters. Using a pop-up web page window is useful for a form page, information page, or even page from another website. It's also used for those annoying pop-up AD windows we all despise. The first example shows a function that removes all the "window tools". The second and third example brings up the link with all the window tools, but sized differently.

Using a text link	Using a button graphic	Using a thumbnail photo

Sample Pop-up help window
	(CLICK TO VISIT)
		(CLICK ICON TO VISIT)


Pull-down List of Links

Using a pull down list of links is one of the favorite ways of providing readers with quick navigation to various pages on a web site or two other internet pages. The "external web site" example below results in the web page being displayed in a pop-up window. The "visit on this website' example shows taking the user to a new page inside the existing browser window.

	Choose an external web site to visit:	Choose a page on this website to visit:


	(OPENS POP-UP WINDOW)	(OPENS IN THIS WINDOW)


Link to Browser History (Go Back Pages)

Using JavaScript to "Go Back" to previous pages is very useful. This makes it easy for you to create a helpful navigation link for your readers. Instead of having to "hardcode" a specific URL in your link, you can use this to "Go Back". It works even if readers come from multiple pages on your website or if they come from some other location (like a search engine). You may also specify to go back multiple pages. This is useful to send users back to their original page after an error page, confirmation page, or other "dead end" link.

Using a text link	Using a button graphic

Go Back to Previous Page

Go Back two Pages

There is a condition where the "Go Back" link will not work. Have you guessed what it is? When a user comes to the page as the first page opened in a browser session, the "Go Back" won't work. There's no place to go! NOTE: You may also go forward pages by using positive numbers.

Prevent your Page from being put into someone else's frame

Add this code to the body statement of your non-framed web page to prevent someone else from loading your page inside of their frame. Some search engines do this to force users to view advertisements, or (legitimately) to keep a navigation bar with other similar links visible for the readers. Some unethical websites take pages from other locations and display them as if they are their own. Typically, I prefer to remove the frame if the reader clicks on any of my links by using the <base target = "_top"> directive in my <head> section. However, you can use this if necessary to stop frames from trying to display your web page:.

<body onLoad="if (self != top) top.location = self.location">

You may also insert this JavaScript code to "break out" of frames. It is effective for even the most persistent frames (some frames assert themselves to be the "top location" on your page!):

Suppressing JavaScript Errors

Once you've completely debugged and tested your page, you can add this script to your page to prevent Java errors and warnings from popping up. This is particularly useful if you have a framed site and someone else's framed site tries to display your pages.


This sample JavaScript web page template builds upon the simple web page template by adding some of the most common JavaScript routines used on the Internet. All of the samples here are common and compatible with any reasonably current browser version. Most JavaScript code is comprised of two parts. The first part, the function, is usually contained in the <head> section of your page, inside of a <script> declaration. The second part, which calls the function, goes on your page in the <body> where you want to execute (or call) the function. In a few cases, the JavaScript code is fully contained in the <body> of your page with no function in the header. An example of this is the "Click here to go back" script on this page. You can add these common JavaScript functions to your web pages simply by copying the JavaScript functions contained in this page to the top of your web page code, and then calling the routines as shown in the examples here. View the source code for this page to see how it's done! You may also download this template and all the buttons, graphics and photos:

			Download this template


JavaScript functions and code we'll use on this page:

A small pop-up window containing a picture and "Close Window" button. A link (URL) pop-up window containing another web page. A pull-down list of links to take readers to another web page. A link that takes the user back one, or any number of pages. Code you can use to prevent pages from being loaded into frames. A function to display the current day and date. Code to suppress JavaScript errors on a page.