Buttons and Windows

Click the buttons

For general information, see the slides on input and output with Java Script as ps-file or pdf-file. Please also look at the source-code and test the button to see the commands performed. These buttons are arranged inside form-environments, which can be accessed through a variable build into the document object: document.forms[i].elements[j].value accesses the value in Button j of form i. Furthermore, the buttons have besides the field value also a field type (filled as "button"), a field "onClick" which tells what Java Script command to execute in the case that the button is clicked and an optional field style which can be used to fix the size of the button and similar things. Please view the source code in order to study the examples.
Note the following points when programming such forms: Strings are not permitted to contain return-characters, just the lines in the source file might become very long. Functions called by clicking buttons should be in some script in the head of the webpage and not in the body, although some browsers might also tolerate being in the body. Make ues of the fact that Java Script has two types of quotes in order to deal with quotations inside quotations. Buttons 2 and 3 work for Internet Explorer on Windows but other browsers or operating systems might not give the same result due to other organization of the windows by the operating system or the browser.

Form 0
Button 0 (document.forms[0].elements[0]):
Button 1 (document.forms[0].elements[1]):
Button 2 (document.forms[0].elements[2]):
Button 3 (document.forms[0].elements[3]):
Forms are arrays of buttons and other environments. If the button is clicked, the activity in the statement assigned to the parameter "onClick" is carried out. Another activity is linked to "onMouseOver" which carries out some activity in the case that the mouse is over the button, although it is not yet clicked. The text on a button is its value. It can be manipulated as the programs linked to some of these buttons do. Buttons 0 and 1 below increment and decrement the value of Button 2, respectively. Besides the value, one can also access some other (but not all) fields of an element. For example one can read out the type as Button 4 reads its own type and displays it. The type of Button 4 is just "button".

Form 1
Button 0 (document.forms[1].elements[0]):
Button 1 (document.forms[1].elements[1]):
Button 2 (document.forms[1].elements[2]):
Button 3 (document.forms[1].elements[3]):
Button 4 (document.forms[1].elements[4]):
One dangerous thing to do is to do a document.write command in the case that there are buttons. This makes the window to disappear. In the case of the Internet Explorer, one can get back the window with a "go back" button of the browser, at Safari even that does not work.

Form 2
Button 0 (document.forms[2].elements[0]):
Here a summary of the three types of windows, activated by buttons. The second parameter of the function "window.prompt(first,second)" is the default value which can be omitted. The first parameter and the only parameter of the two other functions "window.confirm(first)" and "window.alert(first)" is the text to be printed into the window. The function "window.prompt(first,second)" has as return value a user input and the function "window.confirm(first)" returns true if the user clicks "OK" and returns false if the user clicks "Cancel".

Form 3
Button 0 (document.forms[3].elements[0]):
Button 1 (document.forms[3].elements[1]):
Button 2 (document.forms[3].elements[2]):
There are also other modes of input than buttons: For example boxes to check (type is "checkbox"), boxes to select (they have a proper select environment instead of an input environment) and text boxes (type is "textbox").

Form 4
Checkbox 0 (document.forms[4].elements[0]) I like to display the phone number.
Selectbox 1 (document.forms[4].elements[1])
Textbox 2 (document.forms[4].elements[2])
Button 3 (document.forms[4].elements[3])