1. JavaScript and The Document Object Model MMIS 656 Web Design Technologies Acknowledgements: 1.Notes from David Shrader, NSU GSCIS 2.Some material adapted from Conallen, Building Web Applications with UML.

2. S5: July 23, 2003MMIS 656 / Session 52 Objectives Document Object Model (DOM) JavaScript Language JavaScript Practice Exercise 5

3. S5: July 23, 2003MMIS 656 / Session 53 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. S5: July 23, 2003MMIS 656 / Session 54 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. S5: July 23, 2003MMIS 656 / Session 55 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. S5: July 23, 2003MMIS 656 / Session 56 The DOM Interface Browser HTML Script Compiled modules DOM

7. S5: July 23, 2003MMIS 656 / Session 57 DOM Example The new HTML 4.0 specification includes support for Style sheets Internationalization Tables and Forms Scripting and multimedia

8. S5: July 23, 2003MMIS 656 / Session 58 Class Diagram of Document Body Paragraph UnOrderedList List item Figure only presents a subset of model.

9. S5: July 23, 2003MMIS 656 / Session 59 Object (Instance) Diagram : Body : Paragraph The new HTML 4.0 specification includes additional support for : UnOrderedList : ListItem Scripting and multimedia : ListItem Internationalization : ListItem Tables and Forms : ListItem Style sheets

10. S5: July 23, 2003MMIS 656 / Session 510 The DOM Hierarchy window frame document location history layer link image area anchor applet form text hidden reset radio checkbox button select password submit option

11. S5: July 23, 2003MMIS 656 / Session 511 JavaScript Most common scripting technology in browsers (VBScript is also available) Resembles Java but discards Java’s type checking Object-based (not Object-oriented) Interpreted, not compiled Dynamic binding and runtime checking Easier than programming

12. S5: July 23, 2003MMIS 656 / Session 512 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. S5: July 23, 2003MMIS 656 / Session 513 JavaScript Basics Usually placed directly in HTML document Can be either in head (preferred) or body Placed within block tags Use HTML comment tags for compatibility with older browsers

14. S5: July 23, 2003MMIS 656 / Session 514 JavaScript Example <!-- alert(‘Hello, World!’) -->

15. S5: July 23, 2003MMIS 656 / Session 515 JavaScript Features User-defined functions Conditional logic (if/then/else) DOM and JavaScript Objects Events and Event Handlers

16. S5: July 23, 2003MMIS 656 / Session 516 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 element’s input field Submit  User submits a form Unload  User exits the page.

17. JavaScript Examples (In-class Demonstration)

18. S5: July 23, 2003MMIS 656 / Session 518 Next Class Web site design and planning Readings:  Review Shiple Information Architecture Article.