CSI 5111 Introduction to Web Testing

1
Simple Java Forms
Dr. Robert L. ProbertS.I.T.E., University of
Ottawa
2
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.

3

• ltscript language"javascript"gt
• 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

• lt/scriptgt
• This lets the browser know that the script is
  finished.
• ltBODY BGCOLOR"black" TEXT"white"gt
• Indicates that the body of the document is coming
  after this statement. It also sets the colors of
  the background and text.
• ltform name"form"gt
• Indicates that a form is coming, and that the
  forms name is form. The form can be accessed
  from the script as document.form

6

• ltfont face"verdana"gt
• Sets the font to verdana
• ltBRgtltBRgtltBRgtltBRgtltBRgtltBRgtltBRgtltBRgtltBRgtltCENTERgt
• ltBRgt indicates a new line. ltCENTERgt indicates
  that everything after this tag is centered.
• lttable bgcolor"42A042" border"0"gt
• Creates a table with a green background and no
  border.

7

• lttrgtlttdgt
• TR stands for table row. TD stands for table
  data. We are now declaring the information and
  appearance of the table.
• ltfont color"silver"gtUserlt/fontgt
• This is the text that will appear next to the
  User field.

8

• lt/tdgtlttdgt
• ltinput type"text" name"user" size"15"gt
• Indicates a normal textfield and that the
  textfields 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

9

• lt/tdgtlt/trgt
• lttrgtlttdgt
• ltfont color"silver"gtPasslt/fontgt
• This is the text that will appear next to the
  Password field.

10

• lt/tdgtlttdgt
• ltinput type"password" name"pass" size"15"gt
• Indicates a password textfield (password
  textfields are obscured with characters) and
  that the textfields 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

• lt/tdgtlt/trgt
• lttrgtlttdgtlt/tdgtlttd align"center"gt
• ltinput type"button" value"Login" name"login"
  onclick"go()"gt
• Indicates a button and that the buttons name is
  login. When the button is pressed, the onclick
  function go() is called.
• lt/tdgtlt/trgt
• lt/tablegt
• Indicates the end of the table.

12

• lt/CENTERgt
• Indicates the end of centering.
• lt/fontgt
• Indicates the end of the font verdana.
• lt/formgt
• Indicates the end of the form.