Simple Java Forms Dr. Robert L. Probert S.I.T.E., University of Ottawa

2 If you load up login.htm from the CSI 4118 notes page, and you go to “View, Source” on the menu, you will be able to see the HTML and Javascript code that makes up the page. In these slides we look at what each part of this script does. Javascript Example

3 This lets the browser know that coming up is a script of the type javascript function go() Declares a function named go { var user = document.form.user.value; declares a variable named ‘user’, and sets the variable to the value contained in document.form.user.value var pass = document.form.pass.value; declares a variable named ‘pass’, and sets the variable to the value contained in document.form.pass.value

4 if ( pass != "password" || user!="csi4118" ) {location = "wrongpass.htm"; } else { location = "studentmarks.xls" } This is an if statement that compares the data contained in the variables pass and user to the user name and password that are required to successfully log in. If the statement is true (if the password does NOT equal pass, OR if the username does NOT equal csi4118) then the script loads up the wrongpass.htm page. Otherwise, the user has put in the correct information, and is sent to the student marks page.

5 </script> This lets the browser know that the script is finished. Indicates that the body of the document is coming after this statement. It also sets the colors of the background and text. Indicates that a form is coming, and that the form’s name is ‘form’. The form can be accessed from the script as ‘document.form’

6 Sets the font to verdana indicates a new line. indicates that everything after this tag is centered. indicates a new line. indicates that everything after this tag is centered. Creates a table with a green background and no border.

7 <tr><td> TR stands for table row. TD stands for table data. We are now declaring the information and appearance of the table. User: User: This is the text that will appear next to the User field.

8 </td><td> Indicates a normal textfield and that the textfield’s name is ‘user’. The textfield can be accessed from the script as ‘document.form.user’. You will note that in the script, the text that has been typed into the textfield is accessed as ‘document.form.user.value’ You will note that in the script, the text that has been typed into the textfield is accessed as ‘document.form.user.value’

9 </td></tr><tr><td> Pass: Pass: This is the text that will appear next to the Password field.

10 </td><td> Indicates a password textfield (password textfields are obscured with * characters) and that the textfield’s name is ‘pass’. The textfield can be accessed from the script as ‘document.form.pass’. You will note that in the script, the text that has been typed into the textfield is accessed as ‘document.form.pass.value’

11 </td></tr> Indicates a button and that the button’s name is ‘login’. When the button is pressed, the onclick function go() is called. </td></tr></table> Indicates the end of the table.

12 </CENTER> Indicates the end of centering. </font> Indicates the end of the font verdana. </form> Indicates the end of the form.