Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
DHTML - Introduction Chapter 11-13 Introduction to DHTML, the DOM, JS review What is DHTML? • Dynamic HTML are web pages which 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+XHTML=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 extensive 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 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 Document Object Model – the DOM • Address through which you locate objects on the HTML page and send it a message. • 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 • #name { } • 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. • Chapter 12.4 Passing events • Event detection varies by browser – evt object is understood by IE – window.event object is W3C standard • Note that Teague says he normally uses getElementById plus event handlers 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) • Skim chapters 14, 15 to learn what else can be detected – position – z-index – event properties (event.type)