JavaScript and The Document Object Model MMIS 656 Web Design Technologies Acknowledgements: 1.Notes...
18
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.
-
Upload
aubrie-watson -
Category
Documents
-
view
212 -
download
0
Transcript of JavaScript and The Document Object Model MMIS 656 Web Design Technologies Acknowledgements: 1.Notes...
JavaScript and The Document Object Model
MMIS 656 Web Design Technologies
Acknowledgements: 1. Notes from David Shrader, NSU GSCIS2. Some material adapted from Conallen, Building Web Applications with UML.
S5: July 23, 2003 MMIS 656 / Session 5 2
Objectives
Document Object Model (DOM) JavaScript Language JavaScript Practice Exercise 5
S5: July 23, 2003 MMIS 656 / Session 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
S5: July 23, 2003 MMIS 656 / Session 5 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.
S5: July 23, 2003 MMIS 656 / Session 5 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.
S5: July 23, 2003 MMIS 656 / Session 5 6
The DOM Interface
Browser
HTML
Script
Compiledmodules
DOM
S5: July 23, 2003 MMIS 656 / Session 5 7
DOM Example
<body><p>The new HTML 4.0 specification
includes support for</p><ul>
<li>Style sheets</li><li>Internationalization</li><li>Tables and Forms</li><li>Scripting and multimedia</li>
</ul></body>
S5: July 23, 2003 MMIS 656 / Session 5 8
Class Diagram of Document
Body
Paragraph UnOrderedList
List itemFigure only presents a subset of model.
S5: July 23, 2003 MMIS 656 / Session 5 9
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
S5: July 23, 2003 MMIS 656 / Session 5 10
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
S5: July 23, 2003 MMIS 656 / Session 5 11
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
S5: July 23, 2003 MMIS 656 / Session 5 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)
S5: July 23, 2003 MMIS 656 / Session 5 13
JavaScript Basics
Usually placed directly in HTML document
Can be either in head (preferred) or body
Placed within <script> block tags Use HTML comment tags for
compatibility with older browsers
S5: July 23, 2003 MMIS 656 / Session 5 14
JavaScript Example
<SCRIPT LANGUAGE=“JavaScript”>
<!--alert(‘Hello, World!’)
-->
</SCRIPT>
S5: July 23, 2003 MMIS 656 / Session 5 15
JavaScript Features
User-defined functions Conditional logic (if/then/else) DOM and JavaScript Objects Events and Event Handlers
S5: July 23, 2003 MMIS 656 / Session 5 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 element’s input field
Submit User submits a form
Unload User exits the page.
JavaScript Examples
(In-class Demonstration)
S5: July 23, 2003 MMIS 656 / Session 5 18
Next Class
Web site design and planning Readings:
Review Shiple Information Architecture Article.
