Presentation is loading. Please wait.

Presentation is loading. Please wait.

DHTML - Introduction Introduction to DHTML, the DOM, JS review.

Similar presentations


Presentation on theme: "DHTML - Introduction Introduction to DHTML, the DOM, JS review."— Presentation transcript:

1 DHTML - Introduction Introduction to DHTML, the DOM, JS review

2 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

3 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.

4 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.

5 Browser Specific DHTML uses the Document Object Model as the basis for changing the appearance. –window.document.img.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()

6 Advantages Support by most browsers Small file size No plug-ins Easy to learn Fast development Faster Web experience No Java programming required

7 Disadvantages Browser and OS incompatibilities Picky coding of scripting language and CSS Buggy Browsers

8 An Alternative Flash –It is consistent –It is ubiquitous (requires a plug-in) –Attractive and small BUT

9 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

10 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

11 This example shows the element (type not needed in HTML5), a function that sets a variable, passes it an argument, and changes a property function doSomething (objectID) { var foo=document.getElementById(objectID); foo.property=somethingNew; } then

12 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 –

13 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.

14 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.

15 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 – See list on schedule page

16 Getting elements Recall that an element is content. 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

17 Let’s look at some of the code to get an element and move it. Move demo

18 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)

19 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" }

20 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

21 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)

22 What else can be detected –position –z-index –event properties (event.type)


Download ppt "DHTML - Introduction Introduction to DHTML, the DOM, JS review."

Similar presentations


Ads by Google