This tutorial uses images to move from the present page to the previous one or on to the next page. Unlike the browser's back and forward buttons, it use the actual pages in the series rather than the previous or next page in history. Other pages in the series are:
Because there are more than 20 pages, to insert the details into every file would be rather irksome. Therefore I have used a .js file to hold the data and the functions.
A .js file contains the Java Script code in a text file, but does not contain any script tags. The file is loaded in the head with:
<script type="text/javascript" src="BackForwardNew.js">
<!--//
//-->
</script>
The file containing the Java Script code, in this case, "BackForward.gif", is loaded using SRC attribute (src="BackForwardNew.js"), as images are. At the moment you might wish to view this code simply to note it doesn't contain any script tags, and then return to this page.
The code is really quite simple, but like many real-life examples, it contains a lot of data. If you need to learn about arrays, click here.
This data is kept in an array called MyPage. We declare the array and fill it with the data we want to keep in it:
var MyPage=new Array;{
MyPage[0]="index.html";
MyPage[1]="alerts.htm";
…
MyPage[20]="BackForward.htm"; }
The Array has 21 items, beginning with zero and ending with 20. Each item is an URL.
We also have a variable declared:
var MyLocation=window.location;
Clearly this variable is loaded with the location of the present window. Click here to test. It gives me an alert telling me the URL of this page.
Right at the beginning of the script we have this variable:
var ThisPageNumber=20;
We declare this before we load the js file because this variable is going to be used in the script, and if we loaded this variable after the script, it would produce an error! This variable is used to tell the script what the current page is.
So now we have an Array containing the files, a variable for the current page number, and a variable for the current page location. All we have to do is to use code to bring these together so that we can identify the current page, and discover the next and previous files. We then have two functions: one to load the previous page and another to load the next page. The function that loads the previous page is called 'GoBack()':
function GoBack() {
if (ThisPageNumber <=0) {
alert("You are at the beginning of this series");
}
else{ ThisPageNumber=ThisPageNumber-1;
window.location=MyPage[ThisPageNumber];
} }
The function begins as usual with two brackets and a curly bracked. Next we have an if function to determine whether the page number is less or equal to than zero. Zero is the first page, so we don't have any pages before that! If the current page is the first one then we give an alert, telling the browser they are at the beginning. However, if this page number is greater than zero, then we reduce the number by one and make the location the previous page.
The second function is called 'GoForward()':
function GoForward(){
ThisPageNumber=ThisPageNumber+1;
if (ThisPageNumber >=MyPage.length) {
answer=confirm("You are at the end of the present series. "+
"Press ok to go to the beginning. Cancel to stay here");
if (answer!=0) {
ThisPageNumber=0;
window.location=MyPage[ThisPageNumber]; } ThisPageNumber=ThisPageNumber-1;
}
else {
window.location=MyPage[ThisPageNumber];
}
In this function we increment the page number by one and test if the number is greater than the number of documents. At the moment, there are 21 pages in the Array, and so the last one is page 20. If the page number is greater or equal to 21, then there are no more pages. We make a variable 'answer' equal to a confirm button which tells the user that they are at the end of the series.
The confirm gives the user a choice of whether to go back to the beginning or stay where they are. If the user presses cancel, the confirm has the value zero. If the value isn't zero, they have pressed OK and the we make the LOCATION equal to zero, the first page. Otherwise we decrease this page number by one. Now, why do we do this. Well, we have increased the page number by one earlier thinking there is a next page. If the user wants to go back to the beginning, we load page zero. But the user doesn't want to go back to the beginning. The page number was 20. We have made it 21 (which doesn't exist.) If they now press the previous button they will not move back but stay where they are, because the GoBack() function will reduce the page number from 21 to 20, which is the current page! They would have to press the button again to go to page 19. By making the variable equal to the current page, the user will be able to press the previous button once to go back.
Finally, if this isn't the last page, the variable will have the value one more than the current page (the number of the next page, of course!) and we can simply load the LOCATION with this page!
One problem with this script was that it meant that when new pages were inserted, all the numbers after the new page had to be changed. This led to developing the new script.