Web-based Application Development

1
Web-based Application Development

• Lecture 19
• March 23, 2006
• Anita Raja

2

• Frameset document
• lthtmlgt
• ltheadgt
• lttitlegt Linking between frames lt/titlegt
• lt/headgt
• ltframeset rows25, 75gt
• ltframe src TableOfContents.htm id topframe
  nametopframegtlt/framegt
• ltframeset columns50, 50gt
• ltframe src Intro.htm id bottomleftframe
  namebottomleftframegtlt/framegt
• ltframe src PicsList.htm id bottomrightfframe
  namebottomrightframegtlt/framegt
• lt/framesetgtlt/framesetgtlt/htmlgt
• TableOfContents.htm document
• lthtmlgt
• ltheadgtlt/headgt
• ltbodygt
• ltpgt Table of Contents lt/pgt
• ltpgt lta href Doc1.htm target
  bottomrightframegt Click here to view document 1
  in the bottom right frame lt/agtlt/pgt
• ltpgt lta href Doc2.htm target
  bottomleftframegt Click here to view document 2
  in the bottom left frame lt/agtlt/pgt

3
Reminders

• Some final project pointers
• Mar 30 and April 4
• 2 demo volunteers each
• No class Mar 28th
• Mar 30th Lab Session Woodward 335

4
Programming the Web using XHTML and JavaScript

• Chapter 15
• Strings, Dates, and Cookies

5
Validation vs. Verification

• Valid meets certain criteria
• For example, a purely numeric value
• Or a text value not more than seven characters in
  length
• Verified represents the truth
• The User ID matches a value in the list of actual
  IDs
• The password is the correct password for a given
  User ID

6
Validation vs. Verification

• Verification is hard to accomplish with
  JavaScript
• Why?
• Because the data and program have to reside on
  the users computer
• That is, the list of passwords would have to be
  downloaded to the users PC

7
Validation vs. Verification

• Validation can be accomplished easily in
  JavaScript
• Assume an input screen that requests
• Name
• Student Identification Number (SID) Rules
• Exactly eight digits
• Numerals only (no alphabetical characters)

8
Validation vs. Verification

• To validate the SID we must check to see
• That the entry is exactly eight digits in length
• Each digit is in the range 0 to 9 only
• Remember, data input via a text box appears to
  JavaScript as a string
• String variables are actually string objects

9
Validation vs. Verification

• String objects possess
• 30 methods, for example
• Search within the string for a substring
• Change the case
• Replace one character with another
• One property length (the number of characters in
  the string)

10
Validation vs. Verification

• Assume the form looks like this
• Ch15-Script-01

11
Validation vs. Verification

• Then the value stored in the SID text box is
  referred to as
• document.surferInfo.SIDBox.value
• This is a string object so its length is referred
  to as
• document.surferInfo.SIDBox.value.length
• And we can validate its length with a conditional
  statement like this
• Ch15-Script-02

12
Validation vs. Verification

• How can we check the individual string
  characters?
• String objects include a substring method
• Syntax (JavaScript) is
• substring(n,m)

Ending character position plus one
Starting character position
13
Validation vs. Verification

• Thus,
• var myNameMary
• var char1myName.substring(0,1)
• would result in char1 containing a
• Also,
• var myNameMary
• var char1myName.substring(2,4)
• would result in char1 containing ry

14
Validation vs. Verification

• In substring(n,m), the number of characters that
  are being referred to is
• m n
• So, substring(2,4) refers to 2 (4-22)
  characters, the 3rd and 4th in the string

15
Validation vs. Verification

• There is also a single character extraction
  function charAt(n)
• That extracts the nth character
• var myNameMary
• var char1myName.charAt(1)
• would result in char1 containing a
• Note that extract really means copy

16
Validation vs. Verification

• Collating sequence
• Computers represent everything as a numeric value
• Thus, every keyboard symbol has a value
• The ASCII code (used in PCs) defines the values
  for all symbols

17
ASCII Codes
http//www.asciitable.com/
18
Validation vs. Verification

• Since every symbol has a value, a hierarchy can
  be established
• Thus, A is less than B because the ASCII
  code for an A, 65, is less than the ASCII code
  for a B, 66.
• We can use these relationships to see if a
  character in a string falls within a given range

19
Validation vs. Verification

• To validate the SID, we want to
• Extract a single character
• Check to see that its a value in the numeric
  digit range (decimal values 48 57)
• Repeat until all characters have been checked

20
Validation vs. Verification

• theChardocument.surferInfo.SIDBox.value.substring
  (0,1)
• if (theCharlt0 theChargt9) alert(Invalid
  SID)
• Really means
• If (the ASCII value of the character is less than
  48 or
• the ASCII value of the character greater than
  57) alert(Invalid SID)

21
Validation vs. Verification

• Now we have to repeat this process for each
  character in SIDBox
• for ()
• theChardocument.surferInfo.SIDBox.value
  .substring(0,1)
• if (theCharlt0 theChargt9)
  alert(Invalid SID)

22
Validation vs. Verification

• Now we have to repeat this process for each
  character in SIDBox
• for (i0 ilt7 i)
• theChardocument.surferInfo.SIDBox.value
  .substring(0,1)
• if (theCharlt0 theChargt9)
  alert(Invalid SID)

23
Validation vs. Verification

• Need some way to control the loop and refer to
  subsequent characters in the substring
• for (i0 ilt7 i)
• theChardocument.surferInfo.SIDBox.value
  .substring(i,i1)
• if (theCharlt0 theChargt9)
  alert(Invalid SID)
• Ch15-Script-03

24
Validation vs. Verification

• Once we know the SID is invalid theres no point
  in continuing the loop
• (Unless we want to point out each invalid
  character individually)
• So, how to we stop a loop before its finished?
• With a break statement

25
Validation vs. Verification

• When JavaScript encounters break it acts like the
  continuing condition of the loop is false and
  immediately exits the loop
• Ch15-Script-04

26
Date Objects

• JavaScript accesses the computers date and time
  via a Date object
• Create a new one by
• var timeandDate new Date()
• Date objects include a number of methods

27
Date Objects
28
Date Objects

• We can use Date objects to display the current
  date and time
• Ch15-Script-05