Form Validation part 2

1
JavaScript Lecture 3

• Form Validation part 2
• Events
• Advanced Rollovers
• String Handling
• Cookies

2
More Form Handling (BJS 6.6shoVal)

• The value of a Check Box
• Check Boxes have
• (1) A value if programmed as a attribute
• (2) An attribute called CHECKED
• Both attributes are accessible to JavaScript
• For future reference only CHECKED values are
  sent to the server for processing

3
More Form Handling (2) (BJS 6.6shoVal)

• Radio Buttons
• Recall so they can be grouped to work properly,
  multiple Radio Button elements have the SAME NAME
• The browser groups them into an array that has
  the same name as Radio Button elements.
• Typically it is accessed in a loop (see how this
  stuff all works together arrays, loops, HTML,
  JavaScript??)

4
More Form Handling (3) (JSV4 6.8)

• Drop down lists
• Drop down lists in HTML consist of an list of
  ltOPTIONgt tags inside a ltSELECTgt container.
• One of the options is chosen and has its SELECT
  property true
• The values are grouped by the browser into an
  array (what else)
• A special value called selectedIndex indicates
  what element of the array was selected.

5
More Form Handling (2) (JSV4 6.8)

• Putting it all together the lab example
  validation requires
• Check boxes
• Radio buttons
• Drop down selections
• Conditional logic
• Boolean logic (ANDs and ORs and NOTs)

6
Events (1)

• An event is something a user does to a computer
  system
• Hit a key
• Move or click a mouse
• Change a data value, etc.
• JavaScript knows when various events occur and
  let the programmer define code to be executed
  when the events occur

7
Events (2)

• Common events are
• onClick
• onMouseOn
• onMouseOff
• onLoad
• onBlur (JBS 6.4)
• Complete list HTMLCR pp. 680 688
• Events are defined individually for each object
  in the BOM. Not all objects support all events.
  For example, it makes no sense for a button to
  support the onLoad event.

8
Events (3)

• Event code can be defined in two places
• At the source of the event (such as at the form
  element tag) called in-line code
• In a function with a convention determined name
  elementName_eventName()
• Script at source example GOT 14.9
• Function name calling example BJS 6.4
• JavaScript does NOT support explicit calling of
  convention-named named subroutines as VB does.

9
Event mini-spec

• Add two checkboxes to an existing form
• Add validation to check that at least one of the
  checkboxes has been checked.
• BJS ch6_examp4eventRaw.html

10
Rollovers (JSV4 3.5)

• Understanding (rather than hacking) rollovers
  pulls many concepts together. It requires
  understanding
• Image tags
• Events
• Functions
• Arrays

11
Understanding State Information

• State Information
• Information about individual visits to a Web site
• HTTP was originally designed to be stateless
• Web browsers stored no persistent data about a
  visit to a Web site
• Design was efficient, but limiting

12
Understanding State Information (Cont.)

• Server that maintains state information can
• Customize individual Web pages based on user
  preferences
• Temporarily store information for a user as a
  browser navigates within a multipart form
• Allow a user to create bookmarks for returning to
  specific locations within a Web site

13
Understanding State Information (Cont.)

• Provide shopping carts that store order
  information
• Store user IDs and passwords
• Use counters to keep track of how many times a
  user has visited a site

14
All State Saving TechniquesRequire Familiarity
withStrings
15
The String Object

• String object
• Represents all literal strings and string
  variables in JavaScript
• Contains methods for manipulating text strings
• Length property returns the number of characters
  in a string

16
The String Object (Cont.)
Methods see Gosselin, pp. 396-397 Many are
similar to VB indexOf(text, indexTOStartAt) sear
ch(pattern) substring(start, end) indexOf is a
function Search and substring are methods
17
Manipulating Strings

• Parsing
• Refers to the act of extracting characters or
  substrings from a larger string
• Essentially the same concept as the parsing
  (rendering) that occurs in a Web browser

18
Parsing a String

• The first parsing task
• Remove question mark at the start of query string
• Use substring() method combined with length
  property
• Substring() method takes two arguments
• Starting index number and an ending index number
• The first character in a string has an index
  number of 0

19
Parsing a String (Cont.)

• The next step
• Convert individual pieces of information in
  queryData variable into array elements using the
  split() method
• Pass to the split() method the character that
  separates each individual piece of information in
  a string

20
Cookies

• Cookies are small data files stored on your hard
  disk by the browser
• They are the only persistent interaction between
  your browser and your PC
• Cookies can be turned off or the browser can be
  set to advise you of cookie write attempts
• SO dont write mission critical software that
  depends on cookies

21
Cookies (2)

• Uses for cookies
• User preferences
• User history
• Overcoming statelessness of HTML
• Cookies are domain specific only the site
  that wrote a cookie should be able to read it.

22
Cookies (3)

• Cookie values are stored as a string of
  semicolon delimited attribute value pairs
• Example nameFredage21lastpickpink
• Most non-programmers will rely on pre-written
  functions to determine cookie values
• To understand the example youll need to know ?

23
Cookies (4)

• Cookies are string objects in JavaScript and one
  of the helpful functions they posses is
  split().
• Split takes a string like the cookie value
  and splits it into pieces based on what is set
  to.

24
Cookies (5)

• A Cookie is an object in JavaScript
• To set its value property use the syntax
• Document.cookie attributevalue
• Cookies normally go away when the browser
  closes. To make a persistent (stored on disk)
  cookie, change the expires property to a future
  date
• And now, the example, 14.10

25
Other State Saving Methods

• Hidden Variables
• Query strings

26
Saving State Information with Hidden Form Fields
(Cont.)

• Is created using the same syntax used for other
  fields created with the ltinputgt element
• ltinput type"hidden"gt
• Name and value attributes are the only attributes
  that you can include with it

27
Saving State Information with Query Strings

• A query string
• Set of namevalue pairs appended to a target URL
• Consists of a single text string containing one
  or more pieces of information
• To pass information from one Web page to another
  using a query string
• Add a question mark (?) immediately after a URL,
  followed by the query string (in namevalue
  pairs) for the information you want to preserve

28
The String Object
For next class read Chapter 8 and
become Intimately familiar with the
programs CustomerInfo.html FormProcessor.html
ProductInfo.html ProductRegistration.html Regist
er.html These are all in lecture10files.zip on my
web site
29
More string handling (stringExampleClass.html)

• Develop a subroutine that will
• Accept 2 parameters
• a cookie or query string
• The name of an attribute in the string i.e.
  name
• Returns the value of the attribute
• Uses search() or indexOf() and substring() only
• Does not use split