dhtml - introduction introduction to dhtml, the dom, js review
Post on 25-Dec-2015
311 Views
Preview:
TRANSCRIPT
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.layersOld 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 non-standard 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)
top related