CT30675E Application Development for the Web

1
CT30675E Application Developmentfor the Web

• Week 9Javascript Object Model Validation

2
Whats in store this week

• News
• Client-side Validation
• When to use it
• Javascript Object Model
• DOM
• Javascript Validation
• How to do it

3
Input Validation

• In the early weeks of the module, we looked
  briefly at validating user input.
• A user can enter anything into a form - including
  characters we arent expecting.
• Validation takes place at two main times
• On the users side - Client-side validation
• Within the script - Server-side validation
• Question Do we need two different approaches?

4
Input Validation

• Client-side validation is for the users benefit
  only.
• It can be circumvented, as the users machine has
  ultimate control over what data will be sent to
  the server
• e.g. switching off Javascript
• older browsers with no/buggy Javascript
• appending data using GET method
• or maybe writing their own web browser?

5
Input Validation

• Server-side validation is to ensure that invalid
  data does not cause our application to react in
  unpredictable or undesirable ways.
• The implications of invalid data will be
  discussed in detail in weeks 10 and 11.
• It is strongly suggested that you validate
  everything on the server side as a minimum.

6
Client-Side Validation

• Why would we want to bother with Client-side
  validation then?
• It saves bandwidth
• The data does not have to be sent to the server,
  then an error page generated, and returned to the
  client
• Processor time
• The script handling data has to be executed,
  taking up CPU time on the server
• It avoids unnecessary delays to the user

7
Client-Side Validation

• With that in mind, lets look at what can be done
  at the client-side.
• Where possible, text-based input fields can be
  substituted for radio buttons or drop-down lists.
• Input fields can be validated for format, size
  etc. using regular expressions (Javascript
  supports regular expressions).
• Instant feedback can be given to the user, by
  using alert(), or by rewriting HTML pages

8
Client-Side Validation

• A form can be stopped from being submitted to its
  final action.
• Data in fields can be rewritten, and focus on
  screen moved between fields programmatically.
• However, checks to an external data source such
  as a database is better handled on the
  server-side.
• Otherwise youd have to send all the
  possibilities to the Form - this will take up
  space, and may reveal sensitive data.

9
Document Object Model

• The Document Object Model is a platform- and
  language-neutral interface that will allow
  programs and scripts to dynamically access and
  update the content, structure and style of
  documents. W3C, http//www.w3.org/DOM/
• The page sitting inside a browser window can be
  viewed as a document, with structure and
  elements.
• This document can be structured as a tree.

10
Document Object Model
From the mirror of Voodoos JavaScript tutorial
at http//mercury.tvu.ac.uk/adw/jsintro/part2/part
2.htm
11
Document Object Model

• We can navigate through the tree manually, using
  the folllowing methods.
• parentNode - accesses the parent of the current
  element
• childNodes - accesses the chidren of the
  current element(an array)
• nodeValue - we can set and get this value for any
  element in the tree.

12
Document Object Model

• Or access elements directly
• getElementsByTagName() - accesses a node by
  HTML tag (in order of occurrence)
• getElementById() - accesses a node by its name
  parameter
• When dealing with the Document Objects used in an
  HTML page, there are easier ways to navigate!

13
Document Object Model

• The DOM is divided into three Levels
• Level 1 core elements HTML
• Level 2 Stylesheets events (and others)
• (Level 3 is still under development)
• Microsoft IE has a slightly different
  interpretation of the DOM, leading to
  incompatibilities.
• Do other browsers follow the standards (and so
  pages designed for IE might not work), or
  follow IE (and ignore published standards)?

14
Document Object Model

• Before the Document Object Model (DOM) was
  standardised by the W3C, each browser had its own
  type of model.
• This still occurs partly - IE has a slightly
  different DOM to Netscape.
• A de facto standard DOM supported by almost all
  Javascript-enabled browsers is known as the Level
  0 DOM - but this is very basic.

15
Windows

• The most basic object in a web browser is the
  window.
• The window forms the key object in
  Browser-oriented Javascript.

16
Windows - Properties

• A browser window consists of a number of
  properties
• frames - an array of the frames (if any) making
  up the document. The frames are listed in the
  order they appear in the HTML.
• location - the Location object representing the
  URL of the window.
• opener - a reference to the window that created
  this one (if applicable)
• name - the name of this window
• document - the document contained in the window.

17
frames
18
Windows - Methods

• ...and methods
• alert(), confirm(), prompt() - These display
  simple dialogue boxes, and in the case of
  confirm() and prompt() return user response.
• close() - Closes the window.
• open() - opens a new top level window.
• moveBy(), moveTo() - moves the current window
• resizeBy(), resizeTo() - resizes the current
  window.

19
Document Object Model

• As just mentioned, every browser window object
  has a document property.
• This document object represents the HTML document
  which is displayed in the window.
• The document object contains all the objects
  inside the document - these are (rather
  ambiguously) known as document objects.

20
DOM - Methods

• Methods of the document object
• open() - opens a new document inside the window,
  erasing any already existing document.
• close() - closes a document which was begun with
  open().
• write() and writeln() - append text into the
  currently open document writeln() additionally
  adds a new line (carriage return) after the text.

21
Anatomy of a Document
22
DOM - Properties

• Links
• alinkColor - colour of active links.
• vlinkColor - colour of visited links.
• linkColor - colour of all other links.
• anchors - an array containing all anchor
  objects representing the local anchor points in
  the document (lta name".."gt).
• links - an array containing all the link
  objects representing the links in the document.

23
DOM - Properties

• images - an array containing the image objects
  representing each ltimggt tag in the document.
• As with all arrays mentioned with respect to the
  Document Object Model, the arrays contain
  elements in the order they appear in the HTML
  code.

24
images
25
DOM - Properties

• bgColor - colour of the page background (same as
  the bgcolor attribute of the ltbodygt tag)
• fgColor - colour of the page text (same as the
  text attribute of the ltbodygt tag)
• forms - an array containing the form objects
  representing each ltformgt tag in the document.
• title - the text representing the lttitlegt header
  tag for this document.
• These properties can only be set before the
  ltbodygt tag is parsed.

26
DOM - Properties

• embeds - an array containing any embedded
  objects representing each ltembedgt or ltobjectgt tag
  in the document.
• URL / location - a string specifying the URL that
  the page was loaded from (this is usually the
  same as the location.href property of the window
  object)

27
Naming of Document Objects

• A number of document objects (typically, Image
  and Form objects) can be named with the HTML
  parameter name
• ltform name"logo"gt
• This adds a new property to the document object
  bearing the same name as the tag.
• document.forms0
• (this version will be explained later)
• document.logo
• Both these refer to the same form object.

28
Image objects

• The main document objects we tend to manipulate
  with Javascript are Form and Image objects.
• With regards to the Image object, the most
  interesting property is the src property, which
  gives the URL of the image source.
• If a new value is written to this property, the
  displayed image will be replaced with the URL the
  value represents.

29
Manipulating images

• document.images2.src "top.gif"
• A common use of this is the roll-over - when the
  user moves their mouse over the image, it changes
  to a different image, and when the mouse is moved
  off, it changes back.
• ltimg name"button" src"off.gif" onMouseOver"doc
  ument.button.src'on.gif'" onMouseOut"document.b
  utton.src'off.gif'"gt

30
Form objects

• Since form objects typically contain user
  interface items (buttons, input fields), forms
  are particularly important in browser-oriented
  Javascript.
• Forms (as with images, etc) are stored in an
  array as a property of the document.
• document.forms0 would be the first form in an
  HTML page.
• As has been noted, forms can be given a name with
  the name parameter.

31
Form objects

• The elements of a form are stored as a property
  of a form object.
• The array elements.
• Form elements can also be named. This will
  define a property inside the relevent form
  object.
• e.g. a text field called "input1" inside the
  first form on an HTML page will be
  document.form0.input1

32
Document Object Model

• Named sections/fields (using the name
  attribute) appear as children of the document
  element
• There are also elements to represent the browser
  history, the screen, the links, the images, the
  forms etc. etc.
• You can access the value of an element directly.

33
Document Object Model

• Examples of DOM
• (We switched to our favourite web browser and
  looked at a couple of web pages, breaking it down
  into a simple partial DOM model on the
  whiteboard. If you missed the lecture, too bad!)

34
JavaScript

• Introduced by Netscape in the mid-90s (under the
  names mocha and livescript), and finally
  standardised as ECMAScript during 1997-1999.
• Not to be confused with Java (it is nothing to do
  Suns product)
• Microsoft had a rival standard called Jscript.

35
JavaScript

• An object based language
• Case sensitive - Capitalisation matters.
• Built-in objects
• Array
• Boolean
• Date
• Function
• Math
• Number
• Object
• RegExp
• String.

36
JavaScript

• Standard control structures (many of which are as
  C or Java)
• if
• while
• do while
• for
• for in
• switch

37
JavaScript

• An event-driven structure
• onFocus - when an element is selected
• onChange - when an element is changed
• onClick - when the mouse is clicked
• onDblClick - when the mouse is double-clicked
• onMouseOver - when the mouse moves into the
  element
• onMouseOut - when the mouse moves out of the
  element
• onMouseUp - when the mouse button is released
• There are many others

38
JavaScript Validation

• You can access the values stored in the DOM and
  use JavaScript to check them
• The code can be executed on a click of the button
  (onClick)
• The remainder of the workshop will be spent
  looking at HTML pages and accessing the elements
  using JavaScript