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.
In these slides we look at what each part of
this script does.
2
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
3
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. 4
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‟
5
Sets the font to verdana
indicates a new line.
indicates that everything after this tag is
centered.
Creates a table with a green
background and no border.
6
TR stands for table row. TD stands
for table data. We are now
declaring the information and
appearance of the table.
User:
This is the text that will appear next
to the User field.
7
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‟
8
Pass:
This is the text that will appear
next to the Password field.
9
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‟
10
Indicates a button and that the button‟s name
is „login‟. When the button is pressed, the
onclick function go() is called.
Indicates the end of the table.
11
Indicates the end of centering.
Indicates the end of the font verdana.
Indicates the end of the form.
12