JavaScript and The Document Object Model

1
JavaScript and The Document Object Model

• MMIS 656 Web Design Technologies

• Acknowledgements
• Notes from David Shrader, NSU GSCIS
• Some material adapted from Conallen, Building Web
  Applications with UML.

2
Objectives

• Document Object Model (DOM)
• JavaScript Language
• JavaScript Practice
• Exercise 5

3
Dynamic Clients

• Originally driven by need to enhance the user
  interface rendered by web pages.
• Can also be used to implement some business logic
  functions.
• Key is the ability to make Web page content
  accessible to scripts and modules on the client

4
Document Object Model

• Platform-neutral interface to the browser and the
  HTML document
• Common API for developers to manipulate the
  content
• Programs and scripts can dynamically access and
  update document content, structure, and style
• Browser is now responsible for rendering the HTML
  page which could be changed AND execution of
  scripts and compiled programs specified by the
  page.

5
Document Object Model

• Three principle goals
• Interfaces and objects used to represent and
  manipulate a document
• Semantics of these interfaces and object,
  including both behavior and attributes
• Relationships and collaborations among these
  interfaces and objects.

6
The DOM Interface
7
DOM Example

• ltbodygt
• ltpgtThe new HTML 4.0 specification includes
  support forlt/pgt
• ltulgt
• ltligtStyle sheetslt/ligt
• ltligtInternationalizationlt/ligt
• ltligtTables and Formslt/ligt
• ltligtScripting and multimedialt/ligt
• lt/ulgt
• lt/bodygt

8
Class Diagram of Document
Figure only presents a subset of model.
9
Object (Instance) Diagram
Body
10
The DOM Hierarchy
11
JavaScript

• Most common scripting technology in browsers
  (VBScript is also available)
• Resembles Java but discards Javas type checking
• Object-based (not Object-oriented)
• Interpreted, not compiled
• Dynamic binding and runtime checking
• Easier than programming

12
JavaScript Uses

• Validating form entries
• Window popup
• Detect browser type and version
• Conditional redirection to another URL
• Get, set, and delete cookies
• Date and time
• Simple tools (i.e., loan calculator)

13
JavaScript Basics

• Usually placed directly in HTML document
• Can be either in head (preferred) or body
• Placed within ltscriptgt block tags
• Use HTML comment tags for compatibility with
  older browsers

14
JavaScript Example

• ltSCRIPT LANGUAGEJavaScriptgt
• lt!--
• alert(Hello, World!)
• --gt
• lt/SCRIPTgt

15
JavaScript Features

• User-defined functions
• Conditional logic (if/then/else)
• DOM and JavaScript Objects
• Events and Event Handlers

16
Events

• Abort
• User aborts loading of an image
• Blur
• User removes input focus from window, frame, or
  form element
• Click
• User clicks from element or link
• Change
• User changes value of element
• Error
• Loading a document causes an error
• Focus
• User gives input focus to window, frame, or form
  element

• Load
• User loads the page
• Mouseout
• User moves mouse pointer out of an area or link
• Mouseover
• User moves mouse point over a link
• Reset
• User resets a form
• Select
• User selects from elements input field
• Submit
• User submits a form
• Unload
• User exits the page.

17
JavaScript Examples

• (In-class Demonstration)

18
Next Class

• Web site design and planning
• Readings
• Review Shiple Information Architecture Article.