XP Tutorial 4 New Perspectives on JavaScript, Comprehensive1 Working with Objects Creating an Animated Web Page

XP Tutorial 4New Perspectives on JavaScript, Comprehensive2 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive3 Objectives Modify an object’s properties Apply a method to an object Create a cross-browser Web site using object detection

XP Tutorial 4New Perspectives on JavaScript, Comprehensive4 Objectives Work with the style object to change the styles associated with an object Write functions to apply positioning styles to an object

XP Tutorial 4New Perspectives on JavaScript, Comprehensive5 Objectives 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 Create customized objects, properties, and methods

XP Tutorial 4New Perspectives on JavaScript, Comprehensive6 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive7 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive8 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive9 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive10 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive11 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive12 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive13 Exploring the Document Object Model Development of a Common DOM

XP Tutorial 4New Perspectives on JavaScript, Comprehensive14 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive15 Exploring the Document Object Model The document tree

XP Tutorial 4New Perspectives on JavaScript, Comprehensive16 Referencing Objects A DOM can be used by any scripting language including JavaScript and Java

XP Tutorial 4New Perspectives on JavaScript, Comprehensive17 Referencing Objects Object Names –Each object is identified by an object name

XP Tutorial 4New Perspectives on JavaScript, Comprehensive18 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive19 Referencing Objects Working with Object Collections –Objects are organized into arrays called object collections document.collection

XP Tutorial 4New Perspectives on JavaScript, Comprehensive20 Referencing Objects Working with Object Collections

XP Tutorial 4New Perspectives on JavaScript, Comprehensive21 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”)

XP Tutorial 4New Perspectives on JavaScript, Comprehensive22 Referencing Objects Referencing Tags –Internet Explorer DOM document.all.tags(tag) –W3C DOMs document.getElementsbyTagName(“tag”) document.getElementsbyTagName(“p”)[0]

XP Tutorial 4New Perspectives on JavaScript, Comprehensive23 Working with Object Properties The syntax for setting the value of an object property is object.property = expression Example document.title = “Avalon Books”

XP Tutorial 4New Perspectives on JavaScript, Comprehensive24 Working with Object Properties

XP Tutorial 4New Perspectives on JavaScript, Comprehensive25 Working with Object Properties Some properties are read-only

XP Tutorial 4New Perspectives on JavaScript, Comprehensive26 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” }

XP Tutorial 4New Perspectives on JavaScript, Comprehensive27 Working with Object Methods object.method(parameters)

XP Tutorial 4New Perspectives on JavaScript, Comprehensive28 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive29 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive30 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;

XP Tutorial 4New Perspectives on JavaScript, Comprehensive31 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive32 Creating a Cross-Browser Web Site Employing Cross-Browser Strategies

XP Tutorial 4New Perspectives on JavaScript, Comprehensive33 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive34 Creating a Cross-Browser Web Site Employing Cross-Browser Strategies

XP Tutorial 4New Perspectives on JavaScript, Comprehensive35 Working with the style Object The syntax for applying a style is object.style.attribute = value

XP Tutorial 4New Perspectives on JavaScript, Comprehensive36 Working with the style Object Setting an Element’s Position

XP Tutorial 4New Perspectives on JavaScript, Comprehensive37 Working with the style Object Positioning Properties in the IE DOM

XP Tutorial 4New Perspectives on JavaScript, Comprehensive38 Creating the Positioning Functions for Avalon Books Example function xCoord(id) { object=document.getElementByID(id); xc=parseInt(object.style.left); return xc; }

XP Tutorial 4New Perspectives on JavaScript, Comprehensive39 Animating an Object Working with Time-Delayed Commands setTimeout(“command”, delay); timeID = setTimeout(“command”, delay); clearTimeout(timeID); clearTimeout();

XP Tutorial 4New Perspectives on JavaScript, Comprehensive40 Animating an Object Running Commands at Specified Intervals timeID=setInterval(“command”,interval); setInterval(“command”, interval); clearInterval(timeID); clearInterval();

XP Tutorial 4New Perspectives on JavaScript, Comprehensive41 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; }

XP Tutorial 4New Perspectives on JavaScript, Comprehensive42 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive43 Controlling Layout for Different Monitor Resolutions Calculating the Size of the Display Window document.documentElement.offsetWidth document.documentElement.offsetHeight

XP Tutorial 4New Perspectives on JavaScript, Comprehensive44 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

XP Tutorial 4New Perspectives on JavaScript, Comprehensive45 Using Path Animation

XP Tutorial 4New Perspectives on JavaScript, Comprehensive46 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