Download intro - La Salle University

DHTML - Introduction
Introduction to DHTML, the DOM,
JS review
What is DHTML?
• Dynamic HTML is web pages that can
interact with the user.
• DHTML uses web pages created with CSS
and a scripting language to make changes to
the pages.
• This technology is the marriage of existing
components:
CSS+JavaScript+DOM+HTML=DHTML
• DHTML attempts to overcome limitations
of Web pages designed with common
HTML.
• The resulting pages act and react to a user
without continually returning to the server
for more data.
• All of the code for the site is placed on the
client-side.
• DHTML does not require plug-ins
• In most cases, it works across many
browsers. Be wary of Microsoft's ActiveX
version of DHTML.
• It helps to enhance the interactivity and
visual appeal of the page.
Browser Specific
• DHTML uses the Document Object Model as the basis for changing
the appearance.
– window.document.img.freddy
– <img src="fred.gif" id="freddy"/>
• You need to check on the version of the DOM which the browser
implements.
Old Netscape-based tested for document.layers
Old IE tested for document.all (see DHTML demo on schedule)
• You may need to check the user’s browser before allowing the
DHTML to continue, but not if you use standards-based DHTML:
• Key to that
getElementById()
getElementsByTagName()
Advantages
•
•
•
•
•
•
•
Support by most browsers
Small file size
No plug-ins
Easy to learn
Fast development
Faster Web experience
No Java programming required
Disadvantages
• Browser and OS incompatibilities
• Picky coding of scripting language and CSS
• Buggy Browsers
An Alternative
• Flash
– It is consistent
– It is ubiquitous (requires a plug-in)
– Attractive and small
BUT
• Flash
– Can be difficult to learn and create
– Has a plug-in phobia
– Has complicated usability which requires great
responsibility on the part of the designer. Leads to a
lack of standard Web conventions.
– May not be small—requiring extensive downloads
– SEO problems: hard to search
So—which to use
• Need to consider
– Audience’s technology
– Money budgeted for the project
– Need for sound, animation or other media
• Usually Flash
– Presentation of large amounts of text
• Usually DHTML
– Development and maintenance time
• DHTML is usually faster to create
– Audience’s expectations
• This example shows the <script> element (type
not needed in HTML5), a function that sets a
variable, passes it an argument, and changes a
property
<script type="text/javascript">
function doSomething (objectID) {
var foo=document.getElementById(objectID);
foo.property=somethingNew;
}
</script> then <div id="fred" onClick="doSomething('fred');">
Document Object Model – the
DOM
• Address through which you locate objects on the
HTML page and send it a message. Parent objects
contain children, etc. e.g.
window.document.someid
• Can be referenced and changed through
JavaScript.
• Most objects in a page have names and/or ids.:
– getElementById()
window.document.img.fredddy
– <img src="fred.gif" id="fredddy"/>
Create an object in CSS
• Define a style in the stylesheet with the id
• #freddy { }
• When you wish to reference the object in
the body of the document, use the id
attribute on the tag and give it the name you
defined in the stylesheet.
• Now you may use event handlers for the HTML
tag, to cause changes in the HTML object.
• You may reference the object by using the name
you defined in the id attribute.
• The attribute will ONLY change when the event
occurs.
• If there are multiple events you wish to execute on
the same event-handler, you need to separate the
events by semicolons.
Events
• Recall that JavaScript acts through
– event + object = (re)action
• Events are things like "user moves mouse
over image"
• Event handlers are the XHTML attributes
for that action
– <img id="fred" onmouseover="function();" />
• See list on schedule page
Getting elements
• Recall that an element is <tag>content</tag>.
• In addition to
getElementById()
• You will see
getElementsByTagName
(note it's plural) used in combination with the
getAttribute() method. Methods are pre-existing
JavaScript functions
Let’s look at some of the code to get
an element and move it.
• Move demo
Passing events
• Event detection varies by browser
– evt object is understood by IE
– window.event object is W3C standard
• Most use getElementById plus event
handlers; also getElementsByTagName
(Zeldman CH. 15)
Feature sensing
• See if browser understands a method such
as innerHeight
– if {window.innerHeight) {do something}
• Also used to go to another page in nonstandard DOM:
– if (!document.getElementById) {
window.location = "http://www.cnn.com"
}
Some things to detect
• Browser detection is alternate to feature detection
• Note that browser object is navigator
– navigator.userAgent
•
•
•
•
•
•
Finding Screen Dimension
Finding the number of colors
Finding Browser Window’s Dimensions
Finding the Visible Page Dimensions
Finding the Page’s Location and Title
Finding the Page’s Scroll Position
• Finding an Object’s Dimensions
• Finding an Object’s Top and Left Positions
• Finding an Object’s Right and Bottom
Positions
• Finding an Object’s 3-D position
• Finding an Object’s Visibility State
• Finding an Object’s Visible Area (clip
settings)
• What else can be detected
– position
– z-index
– event properties (event.type)