CS 330 Class 4

1
CS 330 Class 4

• Programming plan for 9/17/2007
• Flanagan Ch 15, 17, 18
• Goal play with enough examples using the
  Document object to understand the
• possibilities and approach
• Debugging
• javascript essential
• experts-exchange even better
• Confession

2
15 Scripting Documents

• Motivation be able to access the elements in an
  HTML page
• e.g. popup a list of all the links in a separate
  widow
• go to (crawl) every page linked from a given page
  
• Document object
• the window
• Document content
• a bunch of objects (tables, forms, links,...)
• DOM
• standard for representing a document and
  accessing and manipulating various elements
• an API that defines this structure
• used in HTML and XML
• elements are viewed as a tree which may be
  traversed

3
15.3 Legacy DOM

• Naming
• user-defined identifiers attached to individual
  elements name "..."
• built-in definitions for each element e.g.
  forms0, forms1...
• Example 15-1 (15-1.js, 15-1.htm)
• the names of anchors are extracted from the
  current document
• the pieces of HTML are concatenated
• the anchor is written to a new window
• Example listing links in a separate window names
  of the links are extracted from the current
  document and written to a new window
• Image rotation 1, 2

4
15.4 Overview of the W3C DOM

• 
  Documents are represented as trees
• 
  Nodes have properties that
  can be
• 
  accessed and/or
  manipulated

Figure 15-1. The tree representation of an HTML
document Copied from JavaScript by Flanagan.
5
lthtmlgt //document.childNodes0
ltheadgt //document.childNodes0.ch
ildNodes0 lttitlegt
//document.childNodes0.childNodes0.childNodes
0 The Titlelt/titlegtltbodygt
//document.childNodes0.childNodes1lth1gtHellolt/
h1gt //document.childNodes0.childNodes1.
childnodes0ltform name"theForm"gt
//document.childNodes0.childNodes1.childnodes
1 ltinput type"text" name"theName"gt
//document....childnodes0lt/formgtlth1gtByelt/h1gt
// document.childNodes0.childNodes1.ch
ildnodes2lt/bodygt
Alternately, nodes have a parent
theName.parentNode //theForm
6
W3C DOM Examples

• Event handlers on document objects (loan.htm)
• Dropdown menus with rollovers in ccs
• uses getElementByID
• Change contents in lth1gt tags (h1_dom.htm)
• uses getElementsByTagName
• headeri.innerHTML "HEADER " i " "
  headeri.innerHTML
• (reassigns the contents of the header)
• Text
• alphabetize contents of a list
• 15-6 convert lower case content to uppercase

7
Chapter 17 Event Handlers

• JavaScript programming model event-driven
• Event
• a document has finished loading, user clicks a
  mouse
• good list on p. 390
• distinction between semantic (onload) and input
  (onchange)
• device dependent (onclick) versus independent
  (onchange)
• Event handler
• code that responds to the event
• Text covers
• original model
• standard model (supported by all but IE)
• IE model

YUK
8
17.1.2 Event Handlers as Attributes17.1.3
Event Handlers as Properties

• Apply function validateform()
• As an attribute in the body
• ltform name "theForm" onsubmit"return
  validateform()"gt //attribute
• As a property
• in the header (any of the following)
• theForm.onsubmitvalidateform //using the
  name
• form0.onsubmitvalidateform //using the
  position
• for (int i0 i lt forms.length i)
  //applying to all forms
• formsi.onsubmitvalidateform
• in the body
• ltform name "theForm"gt ...
• (works inconsistently, we won't use this)

9
18 Forms

• A bit repetitive
• read as needed
• table 18-1 a good list of form elements
• Forms an opportunity for user input
• Two aspects to handling form data
• event-handling by the client
• submitting data to a server for processing there
  (need a submit button)
• The input can be either
• processed by the browser (client-side
  event-handler)
• sent to the server and processed there
  (server-side)
• mailed somewhere

10
Examples of Form Interaction

• 1. Signing a guest book (guest.htm)
• Output is mailed to cshilepsky_at_wells.edu.
• Sample of what is received
• guestNamefredfink
• guestEmailFred40wells.edu
• guestPwdaaaaaa
• 2. Pizza survey (pizza.htm) interacts with data
  saved on the server

11
Form Syntax

• The form tag
• ltform (attributes)gt
• (input tags)
• lt/formgt
• form properties
• action what processes the form (usually a URL)
• method the format in which it's data is
  submitted (GET or POST)
• tag properties
• type (required) button, checkbox, file, image,
  hidden, password, radio, reset, select, submit,
  text, textarea.
• size spaces to allow for the input box
• value an (optional) initial value
• Event handlers (in JavaScript) respond to user
  interaction

12
Goal use JavaScript for Form Verification

• Two options
• verify each element as it is added via onchange
  event
• verify the entire form as it is submitted to the
  server (onsubmit)
• How can we identify a valid zip?
• Simple case
• length 5
• all digits
• Examples valid1.htm, valid2.htm
• What about
• phone numbers
• email addresses
• names
• This week use string properties to identify
  valid fields
• Next week regular expressions for pattern
  matching