Download
1 / 12
120 likes | 185 Views
Simple Java Forms. Dr. Robert L. Probert S.I.T.E., University of Ottawa. Javascript Example. 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.
E N D
Simple Java Forms Dr. Robert L. ProbertS.I.T.E., University of Ottawa
Javascript Example 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.
<script language="javascript"> • 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
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.
</script> • This lets the browser know that the script is finished. <BODY BGCOLOR="black" TEXT="white"> • Indicates that the body of the document is coming after this statement. It also sets the colors of the background and text. <form name="form"> • 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’
<font face="verdana"> • Sets the font to verdana <BR><BR><BR><BR><BR><BR><BR><BR><BR><CENTER> • <BR> indicates a new line. <CENTER> indicates that everything after this tag is centered. <table bgcolor="#42A042" border="0"> • Creates a table with a green background and no border.
<tr><td> • TR stands for table row. TD stands for table data. We are now declaring the information and appearance of the table. <font color="silver">User:</font> • This is the text that will appear next to the User field.
</td><td> <input type="text" name="user" size="15"> • 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’
</td></tr> <tr><td> <font color="silver">Pass:</font> • This is the text that will appear next to the Password field.
</td><td> <input type="password" name="pass" size="15"> • 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’
</td></tr> <tr><td></td><td align="center"> <input type="button" value="Login" name="login" onclick="go()"> • 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.
</CENTER> • Indicates the end of centering. </font> • Indicates the end of the font verdana. </form> • Indicates the end of the form.
