Information about members of the Window Object
Explains the elements of a window object
| document | Represents the HTML document in a given browser window. |
| event | Represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons. |
| history | Contains information about the URLs visited by the client. |
| location | Contains information about the current URL. |
| navigator | Contains information about the browser. |
| screen | Contains information about the client's screen and rendering capabilities. |
While we will be using many of the above objects off and on, the object of most importance to us is the document object. The document object contains ways to refer to key html elements. One path we will use very often to get the values in form fields is document -> forms -> form elements. As you can see in figure 4a, just about all form fields are members of the document object. Cookies may be written using document -> cookie. Basically, for Javascript to know where the object we need is, we'll have to specify its exact location in the hierarchy by working from top to bottom and using periods to delineate each level. In general, it is not necessary to specify the window object. Starting off with 'document' simply refers to the current window. If you want to manipulate an element in a parent window or frame, you will have to refer to its window using the 'parent' or 'frame' handle. Following are some examples.
document.forms.myform.textfield1, document.forms["myform"].textfield1 - Refers to the text input field named 'textfield1' in the form named 'myform'.
document.forms.myform.textfield1.value - Refers to the value that the text input field named 'textfield1' in the form named 'myform' contains at the moment.
navigator.appname - Refers to the brand name of the browser
document.forms.myform.selectfield1.selectedIndex - Refers to the currently selected index of the list box control called selectfield1 within the form named 'myform'.
Events are associated with every html element in a page. The body tag, for example, has an associated load event that is triggered just after the entire body is loaded into the browser. Each form has a submit event that is triggered as soon as the user submits a form. Anchor tags and submit buttons have associated click events while text fields have associated change events. These are just a small subset of available events. Javascript is used by calling 'functions' - sequences of Javascript commands that do something - when different events are triggered. Following are some examples of Javascript function invocation:
<body onLoad="populateMenu()">
<form name=myform method=POST action=myscript.asp onSubmit="return validate()">
<select name=gameselect onChange=loadGame(document.forms.myform.gameselect.selectedIndex)>
The above snippets show a function named "populateMenu" being called on the body tag's load event, a function called "validate" invoked upon form submission, and a function named "loadgame" invoked when the user changes the selected value in a list box. Note that the validate function contains a 'return' keyword before it - this means that the functions sends back output based on its internal calculations. This output may then be used for other calculations. The "loadgame" function takes an input parameter - the numeric Index of the selected option - as input. The function probably uses this input to load the appropriate game.
Javascript is case sensitive, that is, using the function names "loadGame" and "loadgame" interchangeably will cause an error. Every Javascript statement within a function must be followed by a trailing semicolon. Javascript functions are normally placed within the header of the html document between <script> tags. They should be of the following structure:
function functionName(inputParameter1, inputParameter2 .. and so on)
{
var someVariable1, someVariable2;
....commands...;
return someValue;
}
