window
_______________________________|__________________
| | | |
frame document history location
________________|_________________________ |____________________________________
| | | | | | | |
title anchors[] links[] forms[] pathname protocol port hostname
________________|____________________
| | |
elements[] action method
________________|___________________
| | |
name value selected
The hierarchy is accessed in sequence in JavaScript using the '.' (dot) operator which is a common feature of many programming languages for navigating structures. Each object in a HTML document is noted by JavaScript and is accessible by the programmer. In the FindCube function we used document.FindCube.cubeout.value=astr; to access the value in the field called cubeout in the form called FindCube (the case is important).
The browser places forms and elements within forms in arrays in memory so that each can be referred to as forms[0], forms[1], etc. and elements[0], elements[1], etc. We could thus have written:
document.forms[0].elements[3].value=astr;
The FindCube form is the first in the document so has index [0]; the cubeout element is the fourth in the form so has e=index [3].
You can use Javascript to create new windows to display information in small 'packets', for example:
A link is established in the form which can be used to launch an event handler in JavaScript. Here is one example:
<A HREF="#here" onClick="newWin('lion','Leo', 'African','Leo','The lion is a large, fierce cat')"><IMG SRC="./lion.gif" HEIGHT=80 WIDTH=80 ></A>
This instance uses an image as the anchor for the link while three others use plain text. Notice that the newWin() function call has a number of parameters for the function to process. The parameters contain the text which will appear on the page of the new window. The code for window creation is as follows:
function newWin(wn, dn, n, t, c) {
mydisplay=window.open('',wn,'toolbar=no,location=no,directories=no,status=no,scrollbars=yes,
resizable=yes,copyhistory=no,width=300,height=200')
newdoc=mydisplay.document;
astr ='<HTML><HEAD><BR><TITLE>' + dn + '</TITLE>'
astr +='</HEAD>'
astr += '<BODY>'
astr += '<B>'+'Name: ' + '</B>' + dn + '<P>'
astr += '<IMG SRC="./lion.gif" HEIGHT=80 WIDTH=80<' + '<P>'
astr += '<B>'+'Continent: ' + '</B>' + n + '<P>'
astr += '<B>'+'Family: ' + '</B>' + t + '<P>'
astr += '<B>'+'Characteristics: ' + '</B>' + c + '<P>'
astr += '</BODY></HTML>'
newdoc.write(astr)
newdoc.close()
}
The function parameters are (wn, dn, n, t, c), wn for the window name, dn for the driver name, n for the nationality, t for the team and c for the comments. These are passed to the function and used in the construction of a new HTML page which is created as a string and then written to the document of the new window with the write method: newdoc.write(astr).
The window is created in the assignment: mydisplay=window.open(...). A variable is declared which points to the document of this window: newdoc=mydisplay.document;. A string is then created which consists of HTML code which is written into the new variable with newdoc.write(astr). It is not necessary to spread the HTML string across many lines like this but it is easier to read afterwards and should be easier to debug - gettting the apostrophes in the right place can be quite tricky.
The window.open() statement is followed by references to window features, known as decorations, in the following order:
In the example here:
('',wn,'toolbar=no,location=no,directories=no,status=no,scrollbars=yes, resizable=yes,copyhistory=no,width=300,height=200')
the only decoration is scrollbars. The 'yes' or 'no' can be changed to suit the requirements of a given situation. One problem with creating windows like this is that the user should remember to close them all so that the screen and Windows toolbar is not filled up with windows which are no longer needed.
To adapt the code to other types of information you need only change the parameters to the newWin function, matching the number of parameters in the function header to those in the function call and replacing the contents between the speech marks. You could change the function name and the first parameter in each call to something more appropriate - the first parameter is the initials of each driver which is used in the window.open statement to provide a name to the window. Without a unique name for each window opened you will only get one new window.
The sample code provides a template which you can adapt to your own needs rather than learning every feature before writing your own code from scratch.
The browser retains a list of the sites visited in the lifetime of the window or frame in an object called history. This can be manipulated by expressions such as history.go(-1) or history.go(+1). There is also history.back and history.forward which are fairly self-explanatory. You can thus add your own navigation buttons to a page or take action such as asking for a password before a page is loaded.
The password is embedded in the HTML but the user doesn't get to see it because the prompt dialogue is modal and the View/Source Code option is not available. Without the password the user is taken back to the previous page. Here is the code in full:
var pw='hello'; var userpw='';
userpw=prompt('Enter the password:',"delete me and put in the real password (hello)");
if (pw!=userpw) {window.history.go(-1)};
The location object has a number of properties which hold the various parts of a URL:
A variation on the methods seen in the History section can be used to disable the browser's Back button:
{window.location.replace(url)};