Show Navigation

7. Objects and Methods

What We Will Cover Announcements Please silence all cell phones and pagers When class is over, please shut down your computer if it is on. Elucidations 7.1: Introduction to DHTML and DOMs 7.1.1: Introduction to DHTML 7.1.2: About JavaScript Objects 7.1.3: Development of a Common DOM 7.1.4: Summary Activity 7.1 7.2: Working with Objects 7.2.1: Using the DOM 7.2.2: Referencing DOM Objects 7.2.3: Working with Object Properties 7.2.4: Working with Object Methods 7.2.5: Summary Activity 7.2 7.3: Creating a Cross-Browser Web Site 7.3.1: About Cross-Browser Web Sites 7.3.2: Using Browser Detection 7.3.3: Using Object Detection 7.3.4: Employing Cross-Browser Strategies 7.3.5: Summary Activity 7.3 7.4: Animating Avalon Books 7.4.1: Creating Custom Functions for Avalon Books 7.4.2: Working with the style Object 7.4.3: Setting an Element's Position 7.4.4: Applying an Event Handler 7.4.5: Animating the Objects 7.4.6: Controlling Layout for Different Monitor Resolutions 7.4.7: Using Path Animation 7.4.8: Summary Activity 7.4 Wrap Up Due Next: A7: Animating Objects (10/23/06) Discussion 6 and Quiz 6 (10/23/06) Elucidations Questions from last class? Homework Questions? A6: Arrays, Loops and Conditions (10/16/06) Discussion 5 and Quiz 5 (10/16/06) Homework Discussion Questions What are the differences between program loops and conditional statements? Has anyone with programming experience used arrays, program loops and conditionals in their applications? If so: What were some the advantages each one provided? Where there any issues with utilizing them? Aside from the calendar application, what other types of programs could you envision creating with JavaScript that would utilize arrays, loops and conditional statements? How do you see arrays being similar to variables when working with JavaScript? Other than days of the week or the months of the year, what other data would be conducive to being placed in an array? ^ top 7.1: Introduction to DHTML and DOMs Learner Outcomes At the end of the lesson the student will be able to: Define DHTML and describe its uses Discuss objects, properties, methods, and the document object model Distinguish between different object models ^ top 7.1.1: Introduction to DHTML Early in the development of HTML, web page designers were limited to static web pages Developers began to look for ways to create dynamic pages Eventually browsers writers developed a new approach, in which the HTML code itself supported dynamic elements Available starting in the 4.0 and later versions of Netscape and Internet Explorer These enhancements were known collectively as dynamic HTML, or DHTML DHTML is not a technology itself, but a collection of technologies that use: 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 Some of the dynamic capabilities include: Animated text Pop-up menus Rollovers Web pages that retrieve their content from external data sources Elements that can be dragged and dropped We will look at how to create some of these effects in this and future lessons Today we will look at adding animated effects to a web page Case Study: Avalon Books To help us learn, the textbook presents a case study on page JVS 159 You can see the design of the web site here: Avalon Books The page contains five different items placed in div elements (view the source) The position of the five elements is set using absolute positioning with CSS: styles.css Our job is to add eye-catching animation to the page You can see the final animation here: Animated Avalon Books ^ top 7.1.2: About JavaScript Objects JavaScript is an object-based language We have already used some JavaScript objects: Date and Math There are also objects for any item associated with a Web page or Web browser For example: windows, forms and tables are all objects Every object has: Properties Methods We will look at some of these properties and methods later in the lesson The Document Object Model All the objects in the browser and documents need to be organized so that programming languages like JavaScript can use them This 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 The organization of the objects in the DOM is a hierarchy known as a document tree The following diagram from page JVS 166 of the textbook shows part of the DOM tree HTML Document Tree ^ top 7.1.3: Development of a Common DOM The first DOM was introduced in Netscape Navigator 2.0 This is referred to as the Basic model, or DOM Level 0 The basic model supported the browser, browser window and Web document However, you could not change the properties once the page was loaded, except for form elements After this, development followed two paths: one adopted by Netscape and the other adopted by Internet Explorer W3C stepped in to develop specifications for a common document object model W3C has developed 3 specifications with increasing levels of support: DOM Level 1 DOM Level 2 DOM Level 3 For a summary of the DOMs and their support in different browsers, see pages JVS 165 of the textbook Within each DOM, particular features may not be supported by every browser As a developer, you want your Web pages to be compatible with the browsers in current use The textbook suggest that your code should be compatible with: Netscape 4 Internet Explorer 5 W3C DOM Level 1 and 2 However, you can argue with this list based on some sampling statistics In any case, the techniques from the textbook for cross-browser compatibility are still applicable ^ top 7.1.4: Summary HTML Web pages were originally static As the Web became more popular, the need to create dynamic Web content arose One of the solutions was dynamic HTML (DHTML) DHTML is not a technology itself, but a collection of technologies that use: 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 You can create many dynamic effects with DHTML including: animated text, pop-up menus, and rollovers To create dynamic effects you need to know how to use JavaScript to work with different page objects All the objects within documents and Web browsers are organized in the document object model or DOM In practice, different browsers have different DOMs Because of the DOM differences, it is difficult to write dynamic Web pages that work with all browsers In general, to ensure the best compatibility, the code should be compatible with the following DOMs: Netscape 4 (not as essential any more) Internet Explorer 5 W3C DOM Level 1 and 2 DOMs organize objects into the document tree hierarchy, which we reviewed Check Yourself What is the document object model? What DOMs should you write code for to ensure the widest range of browsers and browser versions? ^ top Activity 7.1 Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute. Quick Quiz DHTML means _______dynamic HTML. DHTML is a language first introduced by Netscape. True False AnswerFalse (reason) DOM stands for: Document object model Document object map Dynamic object model Dynamic object methodology AnswerA Writing code compatible with the W3C DOM Level 1 ensures that your page will work properly in all Web browsers. True False AnswerFalse ^ top 7.2: Working with Objects Learner Outcomes At the end of the lesson the student will be able to: Work with object references and object collections Modify an object's properties Apply a method to an object ^ top 7.2.1: Using the DOM A DOM can be used by any language including JavaScript and Java Each object is identified by an object name You can see some of these names in the following table Object Names Object Name Description window The browser window document The web document displayed in the window document.body The body of the web document displayed in the window event Events or actions occurring within the browser window history The list of previously visited web sites within the window location The URL of the document currently displayed navigator The browser itself screen The screen displaying the document ^ top 7.2.2: Referencing DOM Objects To use an object, you need some way to connect to it This is known as referring to, or referencing, an object You can reference any object in the hierarchy using the form: object1.object2.object3 ... Where each object in the hierarchy is separated by a dot (.) For instance, to refer to the body object, you would use: document.body Similarly, for the history object you would use: window.history However, sometimes you do not need to indicate an objects location in the hierarchy For example, you can refer to the window.history object as history JavaScript automatically assumes the window object by default Object Collections Objects are organized into arrays called object collections To reference a particular collection, you use the form: document.collection Where collection is the name of the object collection You can see a list of object collections and browser support on page JVS 168 of the textbook Also, you can see some of them at the W3 Schools site: HTML DOM Document Object Note that not all collections are supported by all browsers or browser versions To reference a specific object in a collection, you can use either of the following: document.collection["idref"] document.collection.idref Where idref is either an index number of the value of the id or name attribute of an element For example, if the first form element in the page is: <form id="Survey"> ... </form> Then you can reference the form using any of the following: document.forms[0] document.forms["Survey"] document.forms.Survey Every collection has a length property This allows you to use loops to access every item in a collection Accessing Elements not in a Collection Not all elements are associated with an object collection You can reference these objects by using their id values For Internet Explorer you can use: document.all["id"] document.all.id id For example, using the IE DOM you can reference an element whose id value is "intro" by using any of: document.all["intro"] document.all.intro intro For both W3C DOMs and Internet Explorer, you can use: document.getElementById("id") Thus, referencing an element with an id of "intro" would be: document.getElementById("intro") Note the lowercase "d" One of the most common errors using this method is use of a capital "D" Referencing Tags You can create object collections based on HTML tag names In the Internet Explorer DOM you use: document.all.tags(tag) For example, to return a collection of the paragraph tags, you use: document.all.tags("p") To reference the first paragraph tag in the collection you use: document.all.tags("p")[0] In W3C DOMs you use: document.getElementsByTagName("tag") For example, to access a documents first paragraph: document.getElementsByTagName("p")[0] ^ top 7.2.3: Working with Object Properties Each object has properties associated with it A property is some characteristic or trait of an object In programming terms, a property is a variable that is part of an object Like a variable, you can set the value of a property using the syntax: object.property = expression For example, to set the title element of a document: document.title = "Avalon Books" You can see an example list of properties on page JVS 171 of the textbook Note that some properties are read-only Thus, you can get their values but you cannot set them When you get the value of a property, you can store it in a variable using the form: variable = object.property For example: var browserName = navigator.appName; Also, you can use properties in a conditional expression like: if(document.bgColor=="black") { document.fgColor="white"; } else { document.fgColor="black"; } ^ top 7.2.4: Working with Object Methods You can manipulate objects by applying methods to them Syntax: object.method(parameters) For example, we have been using object methods previously like: document.write("Hello world"); Page JVS 173 of the textbook shows several examples ^ top 7.2.5: Summary The document object model can be used with several languages including JavaScript and Java Each object is identified by an object name and we looked at a list of objects high in the hierarchy You can reference any object in the hierarchy using the form: object1.object2.object3 ... Where each object in the hierarchy is separated by a dot (.) Objects are organized into arrays called object collections To reference a particular collection, you use the form: document.collection Where collection is the name of the object collection To reference a specific object in a collection, you can use either of the following: document.collection["idref"] document.collection.idref Where idref is either an index number of the value of the id or name attribute of an element Not all elements are associated with an object collection You can reference these objects by using their id values Each object has properties associated with it Like a variable, you can set the value of a property using the syntax: object.property = expression You can also manipulate objects by applying methods to them using the syntax: object.method(parameters) Check Yourself Refer to page JVS 178 of the textbook and review the Session 4.1 Quick Check questions #3-7. ^ top Activity 7.2 Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute. Quick Quiz Which of the following presents an invalid syntax for applying a method? window.scroll(x, y) document.write("Avalon Books") document.forms[0].submit() location.reload AnswerD When more than one of the same type of object exists, these objects are organized into arrays called object __________collections. You can change the value of any property. True False AnswerFalse ^ top 7.3: Creating a Cross-Browser Web Site Learner Outcomes At the end of the lesson the student will be able to: Create a cross-browser Web site using object detection ^ top 7.3.1: About Cross-Browser Web Sites Current browsers support the W3C Level 1 and Level 2 DOMs However, to support older browsers your code must be able to support different DOMs This type of code is known as cross-browser code Cross-browser code depends on checking various properties of the DOM You can see the support for these properties on your browser using: Browser Properties Taken from the student downloads for the textbook: There are two approaches for detecting browser capabilities: Browser detection Object detection We will start with a discussion of browser detection ^ top 7.3.2: Using Browser Detection Browser detection uses code to determine which browser the user is running There are three main properties used for detecting the type of browser: navigator.appName navigator.appVersion navigator.userAgent Here is a short script to read and display these values: <script type="text/javascript"> var browser = navigator.appName; var version = navigator.appVersion; var uaString = navigator.userAgent; document.write("appname=" + browser); document.write("<br />appVersion =" + version); document.write("<br />userAgent =" + uaString); </script> The values it displays on your browser are: It is fairly easy to determine which browser a user is running However, it is not so easy to determine its version Thus, these scripts tend to get complex Also, new browser versions appear all the time and this technique does not age gracefully More Information The Ultimate JavaScript Client Sniffer ^ top 7.3.3: Using Object Detection The object detection approach does not rely on identifying the browser Instead, it determines which DOM is supported by the browser You can see which DOM(s) a browser supports by testing for features unique to the DOM For example, the following checks for key features of the major DOMs: <script type="text/javascript"> var NS4DOM = document.layers ? true: false; var IEDOM = document.all ? true: false; var W3CDOM = document.getElementById ? true: false; document.write("NS4DOM=" + NS4DOM); document.write("<br />IEDOM =" + IEDOM); document.write("<br />W3CDOM =" + W3CDOM); </script> The values it displays on your browser are: If you need to use specific parts of the object model, then you can test for those parts Many web developers prefer object detection because it can work for any object and any browser Another advantage is that you can use it to support earlier DOM versions More Information Object Detection: from the Apple Developer Connection ^ top 7.3.4: Employing Cross-Browser Strategies Once you settle on how you want to determine a browser's capability, you need to choose a cross-browser strategy There are a number of strategies including: Page branching Internal branching Creating a custom API Page Branching 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 This is shown in the following diagram from the textbook on page JVS 176 To automatically load a page into a browser based on the type of the browser detected, use the command: location.href = url; As you can see, page branching requires you to maintain several versions of the same page Internal Branching A second cross-browser strategy is to use internal branching Internal branching encloses the JavaScript code in multiple else-if statements For example: if (document.getElementById) { // code for W3C DOM } else if (document.all) { // code for IE DOM } else if (document.layers) { // code for Netscape 4 DOM } You would need to repeat this construction every time you ran JavaScript commands Using an API File Most web developers apply a third cross-browser strategy These developers develop a library of functions called an application programming interface An application programming interface (API) is an external file that contains custom functions You write these functions to resolve any cross-browser differences When you develop a page, you make use of your library of API functions This is shown in the following diagram from the textbook on page JVS 177 ^ top 7.3.5: Summary In this section, we looked at the problem of support different browser DOMs We first looked at browser detection, which primarily uses the navigator object to determine which browser the user is running It is fairly easy to determine which browser a user is running However, it is not so easy to determine its version We also looked at object detection, which determines what DOM is supported by looking at features unique to a specific DOM Many web developers prefer object detection because it can work for any object and any browser Once you settle on how you want to determine a browser's capability, you need to choose a cross-browser strategy We looked at three strategies: Page branching Internal branching Creating a custom API 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 Internal branching encloses the JavaScript code in multiple else-if statements A third strategy is to develop an application programming interface (API) An API is an external file that contains custom functions When you develop a page, you make use of your library of API functions, which are written to resolve any cross-browser differences Check Yourself What is browser detection? What is object detection? How would you use object detection to determine which DOM a user's browser supports? What is page branching? What is internal branching? What is an API? What are the advantages of creating your own API? ^ top Activity 7.3 Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute. Quick Quiz You can use the _________________navigator.appName property to retrieve the browser's name. One advantage of the object detection approach is that it can work for any object and any browser. True False AnswerTrue Which command can be used to automatically load a page into a browser? browser.redirect("url"); location.href="url"; location.load("url"); document.load("url"); AnswerB In addition, let us find examples of Web sites that offer free cross-browser DHTML APIs. Google search: free DHTML API Which API seems better? ^ top 7.4: Animating Avalon Books Learner Outcomes At the end of the lesson the student will be able to: Work with the style object to change the styles associated with an object Write functions to apply positioning styles to an object 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 ^ top 7.4.1: Creating Custom Functions for Avalon Books In this section we create a set of custom functions for our case study: Avalon Books To create the animation, we will develop the functions shown here: scriptxt.js In this section, you will work to develop these functions First we will get set up for later exercises Exercise Instructions Turn your computer on and complete the exercises on these pages of the textbook: JVS 161 JVS 178 Student downloads are available here or here If you have difficulty, ask a classmate or the instructor for help When you are finished, let the instructor know ^ top 7.4.2: Working with the style Object To implement these functions, we will use the style object We will use the style object to place each of the five div elements at specific locations on the page The syntax for applying a style is: object.style.attribute = value; Where object is a reference to an object in the web document and attribute is one of the CSS styles A style attribute is converted to a JavaScript style value by removing any dashes in the style name For example: background-image becomes backgroundImage Thus, to change the font size of the first paragraph in a document you use a statement like: document.getElementByTagName("p")[0].style.fontSize="16pt"; Figure 4-13 on page JVS 179 of the textbook shows several other examples Which Styles are Affected? An important consideration is which styles you can affect with a script You can only reference styles created using JavaScript or as inline styles Styles defined in embedded or external styles sheets are not available to a script ^ top 7.4.3: Setting an Element's Position JavaScript uses the same positioning styles values as CSS Thus, using the style object, you can: Set an element's top and left coordinates Specify an element's z-index value (for stacked elements) Hide or re-display an element using the display or visibility styles Figure 4-14 on page JVS 180 of the textbook shows a list of the positioning styles Note that coordinate values also contain the unit of length (e.g. "px") Thus, mathematical operations cannot be directly applied to the values Instead you need to calculate the unit and then append the length type For instance, to apply a value contained in a variable x to the left style of an object with the id "avalon": var object = document.getElementById("avalon"); object.style.left = x + "px"; Creating the Positioning Functions Now let us create the positioning functions needed for the Avalon Books Web site For example, here is one of the functions: function xCoord(id) { object = document.getElementByID(id); xc = parseInt(object.style.left); return xc; } Exercise Instructions Open your textbook and complete all the exercises on pages JVS 181 through 184 If you have difficulty, ask a classmate or the instructor for help When you are finished, let the instructor know ^ top 7.4.4: Applying an Event Handler Next we are going to use the functions you just entered to create an animation We will create the animation in several steps: First we are going to link the scripts.js file to the Avalon web page Next we will create a function named placeObjects() to position the elements using the functions from scripts.js Then we will call the placeObjects() function using an event handler Recall that an event handler runs a programmer specified script in response to an event Also, remember that a JavaScript command invoked with an event handler does not require a <script> tag After we get the everything connected and operating in the Avalon web page, we will add the animation Exercise Instructions Open your textbook and complete all the exercises on pages JVS 185 through 187 Your completed exercises should run without error and look like this If you have difficulty, ask a classmate or the instructor for help When you are finished, let the instructor know ^ top 7.4.5: Animating the Objects In this section we will animate the objects we have set up: First we will animate the word "Avalon" to drop down the page Next we will animate the word "Book" to move horizontally Then we will display the hidden objects To move the objects, we will use a technique known as recursion Recursion is a way to create a loop by having a function call itself See if you can see the loop (recursion) in the following function: function moveAvalon() { var y = yCoord("avalon"); if (y <= 260) { shiftIt("avalon", 0, 10); shiftIt("books", 0 , 10); moveAvalon() } else { // run moveBooks() function } } There are some things to notice about the function: First, it gets the current y-coordinate using the yCoord() function you entered Second, it uses the shiftIt() function to move both words down the page together Finally, it calls itself to move the words again That final step is the recursion that causes the repetition Slowing Down from Super Speed The above function will run in about a millisecond Since the function calls itself only 27 times, it will appear to move in the blink of an eye To slow it down, we need to use time-delayed commands Recall that time-delayed command run after a particular amount of time has passed Here is the syntax of some of the commands: setTimeout("command", delay); timeID = setTimeout("command", delay); clearTimeout(timeID); clearTimeout(); For example, to run the moveAvalon() function after 30 milliseconds have passed: setTimeout("moveAvalon()", 30); By setting the delay, we can control the speed of our animation Generally, you have to experiment with the movement and time-delay values to get a smooth animation Exercise Instructions Open your textbook and complete all the exercises on pages JVS 188 through 191 Your completed exercises should run without error and look like this If you have difficulty, ask a classmate or the instructor for help When you are finished, let the instructor know ^ top 7.4.6: Controlling Layout for Different Monitor Resolutions Different screen resolutions may result in unexpected page layouts See page JVS 192 of the textbook for a display of screens at different resolutions We can work around this problem by centering our animation in the display window Since the Avalon animation uses a 620 x 300 pixel area, we can center it in most browsers Calculating the Size of the Display Window W3C DOMs store the width and height in the properties: window.outerWidth window.outerHeight However, these values are for the whole browser window including toolbars, sidebars, borders, handles, etc. To find the size without these features, we can use: window.innerWidth window.innerHeight The problem is that no version of IE yet supports these properties For IE 4 and 5, the closest approximation is: document.body.clientWidth document.body.clientHeight However, these properties are not supported in IE 6 Instead, about the best you can use (without causing errors in other browsers) is: document.documentElement.offsetWidth document.documentElement.offsetHeight Unfortunately, these values do not agree exactly, though they are close Currently, this is one of the problems of DHTML If you want to do precise work with the dimensions of the window then you will need to account for the few pixels difference in the methods Fortunately, we do not need anything that precise for our page Thus we can write a simple cross-browser function using internal branching like: if (window.innerWidth) { // use window.innerHeight; } else if (document.documentElement) { // use document.documentElement.offsetWidth; } else if (document.body.clientWidth) { // use document.body.clientWidth; } We will use this strategy in the next exercise Exercise Instructions Open your textbook and complete all the exercises on pages JVS 195 through 197 Your completed exercises should run without error and look like this If you have difficulty, ask a classmate or the instructor for help When you are finished, let the instructor know ^ top 7.4.7: Using Path Animation The animation created so far is linear A different type of animation is called path animation Path animation moves from point-to-point along a path You can see the difference between linear and path animation by comparing the following two diagrams: Each of the set of coordinates of the path is entered into arrays The following shows a code sample using path animation Example of Path Animation 1 2 3 4 5 6 7 8 9 10 11 x = new Array(0, 40, 80, 150, 300, 400, 300, 150); y = new Array(0, 40, 80, 120, 120, 80, 50, 0); index = 0; function moveObject() { if (index < x.length) { shiftIt("pathObject", x[index], y[index]); index++; setTimeout("moveObject()", 50); } } ^ top 7.4.8: Summary In this section we applied the knowledge we learned earlier in this lesson We worked with the style object to change the styles associated with an object We wrote functions to apply positioning styles to an object We placed a JavaScript command in a link to include an external API We ran timed-delay commands We worked with the properties of the display window In addition, we discussed the techniques of linear and path animation 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 to create more interesting visual effects Break up your animated effects into separate functions Check Yourself Refer to page JVS 201-202 of the textbook and review the Session 4.3 Quick Check questions. ^ top Activity 7.4 Take one minute to read over the following Quick Quiz questions. We will discuss the questions in one minute. Quick Quiz JavaScript uses the same positioning style values as JScript VBScript CSS DHTML AnswerC JavaScript treats the styles associated with an element as an object. True False AnswerTrue The ______onload event handler is triggered when the browser has completed loading the document. JavaScript provides a pause command to temporarily halt the execution of program code. True False AnswerFalse What is the time unit used in the setTimeout() method? Seconds Milliseconds Microseconds Nanoseconds AnswerB To use ____path animation, you can store the x- and y-coordinate values in arrays. ^ top Wrap Up Due Next: A7: Animating Objects (10/23/06) Discussion 6 and Quiz 6 (10/23/06) ^ top Show Navigation Last Updated: November 18 2006 @17:39:49