1 / 50

Working with Objects

Working with Objects. Creating an Animated Web Page. Objectives. Define DHTML and describe its uses Understand objects, properties, methods, and the document object model Distinguish between different object models Work with object references and object collections. Objectives.

albertsonb
Télécharger la présentation

Working with Objects

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Working with Objects Creating an Animated Web Page New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  2. Objectives • Define DHTML and describe its uses • Understand objects, properties, methods, and the document object model • Distinguish between different object models • Work with object references and object collections New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  3. Objectives • Modify an object’s properties • Apply a method to an object • Create a cross-browser Web site using object detection New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  4. Objectives • Work with the style object to change the styles associated with an object • Write functions to apply positioning styles to an object New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  5. Objectives • Insert event handlers to run a script in response to an event • Place a JavaScript command in a link • Run timed-delay and timed-interval commands • Work with the properties of the display window • Describe the techniques of linear and path animation New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  6. Introduction to DHTML • Developers began to look for ways to create dynamic pages • New approach, in which the HTML code itself supported dynamic elements • Known collectively as dynamic HTML, or DHTML New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  7. Introduction to DHTML • Interaction of three aspects • A page’s HTML/XHTML code • A style sheet that defines the styles used in the page • A script to control the behavior of elements on the page New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  8. Introduction to DHTML • Some uses • Animated text • Pop-up menus • Rollovers • Web pages that retrieve their content from external data sources • Elements that can be dragged and dropped New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  9. Understanding JavaScript Objects • JavaScript is an object-based language • An object is any item associated with a Web page or Web browser • Each object has • Properties • Methods New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  10. Exploring the Document Object Model • The organized structure of objects and events is called the document object model, or DOM • Every object related to documents or to browsers should be part of the document object model • In practice, browsers differ in the objects that their document object models support New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  11. Exploring the Document Object Model • Development of a Common DOM • Basic model, or DOM Level 0 • Supported browser window, Web document, and the browser itself • Development followed two paths: one adopted by Netscape and the other adopted by Internet Explorer • Internet Explorer DOM also provided for capturing events New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  12. Exploring the Document Object Model • Development of a Common DOM • World Wide Web Consortium (W3C) stepped in to develop specifications for a common document object model • DOM Level 1 • DOM Level 2 • DOM Level 3 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  13. Exploring the Document Object Model • Development of a Common DOM New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  14. Exploring the Document Object Model • Development of a Common DOM • Within each DOM, particular features may not be supported by every browser • Code should be compatible with • Netscape 4 • Internet Explorer 5 • W3C DOM Level 1 and 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  15. Exploring the Document Object Model • The document tree New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  16. Referencing Objects • A DOM can be used by any scripting language including JavaScript and Java New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  17. Referencing Objects • Object Names • Each object is identified by an object name New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  18. Referencing Objects • Object Names • General form is object1.object2.object3… • To reference the history you would use the form window.history • For the body, you would use document.body New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  19. Referencing Objects • Working with Object Collections • Objects are organized into arrays called object collections document.collection New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  20. Referencing Objects • Working with Object Collections New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  21. Referencing Objects • Using document.all and document.getElementById • Not all elements are associated with an object collection • Can reference these objects using their id values document.all[“id”] document.all.id document.getElementById(“id”) New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  22. Referencing Objects • Referencing Tags • Internet Explorer DOM document.all.tags(tag) document.all.tags(tag) • W3C DOMs document.getElementsbyTagName(“tag”) document.getElementsbyTagName(“p”)[0] New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  23. Working with Object Properties • The syntax for setting the value of an object property is object.property = expression • Example document.title = “Avalon Books” New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  24. Working with Object Properties New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  25. Working with Object Properties • Some properties are read-only New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  26. Working with Object Properties • Storing a Property in a Variable variable = object.property • Using Properties in a Conditional Expressions if(document.bgColor==“black”) { document.fgColor=“white” } else { document.fgColor=“black” } New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  27. Working with Object Methods object.method(parameters) New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  28. Creating a Cross-Browser Web Site • You can create this kind of code, known as cross-browser code, using two different approaches: browser detection or object detection New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  29. Creating a Cross-Browser Web Site • Using Browser Detection • Using browser detection, your code determines which browser (and browser version) a user is running navigator.appName • Most browser detection scripts – commonly known as browser sniffers – use this property to extract information about the version number navigator.uerAgent New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  30. Creating a Cross-Browser Web Site • Using Object Detection • With object detection, you determine which document object model a browser supports var NS4DOM = document.layers ? true:false; var IEDOM = document.all ? true:false; var W3CDOM = document.getElementByID ? true:false; New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  31. Creating a Cross-Browser Web Site • Employing Cross-Browser Strategies • One strategy, called page branching, creates separate pages for each browser along with an initial page • A script determines the capabilities of the user’s browser and automatically loads the appropriate page New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  32. Creating a Cross-Browser Web Site • Employing Cross-Browser Strategies New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  33. Creating a Cross-Browser Web Site • Employing Cross-Browser Strategies • To automatically load a page into a browser based on the type of the browser detected, use the command location.href = url; • A second cross-browser strategy is to use internal branching • Most web developers apply a third cross-browser strategy • Application programming interface or API New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  34. Creating a Cross-Browser Web Site • Employing Cross-Browser Strategies New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  35. Working with the style Object • The syntax for applying a style is object.style.attribute = value New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  36. Working with the Style Object • Setting an Element’s Position New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  37. Working with the style Object • Positioning Properties in the IE DOM New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  38. Creating the Positioning Functions for Avalon Books • Example function xCoord(id) { object=document.getElementByID(id); xc=parseInt(object.style.left); return xc; } New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  39. Working with Event Handlers • An event handler is an attribute added to an element that specifies a program to be run in response to an event New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  40. Working with Event Handlers New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  41. Working with Event Handlers New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  42. Working with Event Handlers • Running JavaScript Commands as Links <a href=“javascript.script”>content</a> • Using the onLoad Event Handler New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  43. Animating an Object • Working with Time-Delayed Commands setTimeout(“command”, delay); timeID = setTimeout(“command”, delay); clearTimeout(timeID); clearTimeout(); New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  44. Animating an Object • Running Commands at Specified Intervals timeID=setInterval(“command”,interval); setInterval(“command”, interval); clearInterval(timeID); clearInterval(); New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  45. Animating an Object • Animating the Avalon Books Web page • Example Function moveAvalon() { var y=yCoord(“avalon”); if (y <= 260) { shiftIt(“avalon”, 0, 10); shiftIt(“books”, 0, 10); setTimeout(“moveAvalon()”, 30); } else { // run moveBooks function; } } New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  46. Controlling Layout for Different Monitor Resolutions • Calculating the Size of the Display Window window.outerWidth window.outerHeight window.innerWidth window.innerHeight document.body.clientWidth document.body.clientHeight New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  47. Controlling Layout for Different Monitor Resolutions • Calculating the Size of the Display Window document.documentElement.offsetWidth document.documentElement.offsetHeight New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  48. Using Path Animation • Linear animation means that the animation takes place over a straight line • Path animation means each set of coordinates in the path is entered into an array, and the animation moves point to point New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  49. Using Path Animation New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  50. Tips for working with JavaScript Objects and DHTML • If your code reuses the same object reference, store the object in a variable • Place your customized functions in external files • Use object detection • Use path animation and create interesting visual effects • Break up your animated effects into separate functions New Perspectives on HTML, XHTML, and DHTML, Comprehensive

More Related