1 / 60

Chapter 10

JavaScript, Third Edition. Chapter 10. Dynamic HTML (DHTML). Objectives. Use JavaScript to modify CSS styles Work with CSS positioning Create DHTML menus Learn how to check for browser compatibility. Introduction.

angie
Download Presentation

Chapter 10

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. JavaScript, Third Edition Chapter 10 Dynamic HTML (DHTML)

  2. Objectives • Use JavaScript to modify CSS styles • Work with CSS positioning • Create DHTML menus • Learn how to check for browser compatibility JavaScript, Third Edition

  3. Introduction • DHTML requires a strong knowledge of XHTML, Cascading Style Sheets (CSS), and JavaScript • Specifically, you will learn: • How to use JavaScript to dynamically modify CSS styles and dynamically position elements • How to create DHTML menus and check for browser compatibility JavaScript, Third Edition

  4. JavaScript and CSS • Earlier versions of Internet Explorer and Navigator supported incompatible Document object properties and methods • JavaScript uses Document object properties and methods to access CSS styles JavaScript, Third Edition

  5. JavaScript and CSS (Cont.) • To manipulate CSS in older browsers, you had three options: • Write code that functioned only in Navigator • Write code that functioned only in Internet Explorer • Write both sets of code and design the script so that correct set would execute depending on which browser rendered the page JavaScript, Third Edition

  6. JavaScript and CSS (Cont.) • If you anticipate that your DHTML code will run in older browsers: • Learn the DTHML techniques for each type of browser JavaScript, Third Edition

  7. Modifying styles with the this reference • To refer to a CSS style in JavaScript: • Use the this reference and the style property in an event handler within the element itself • The style property: • Every element has a style property. • Use itto modify an element’s CSS properties with JavaScript JavaScript, Third Edition

  8. Modifying styles with the this reference (Cont.) • To refer to a style with the this reference: • Use a period to append the style property to it, followed by another period and a CSS property • Seems that you can store a value into a style property, but cannot get a value out of a style property unless you’ve stored a value in it • Cannot test to see what value a style has! JavaScript, Third Edition

  9. Modifying styles with the this reference (Cont.) <html> <head> <title>Example of this</title> <style type="text/css"> p {color:green; text-align:center} </style> <SCRIPT LANGUAGE="JavaScript"> function changeColor(junk) { if (junk == 'blue') return("green"); else return("blue"); } </SCRIPT> </head> <body> <p onClick = " this.style.color = changeColor(this.style.color);">This is an example</p> </body> </html> JavaScript, Third Edition

  10. Modifying Styles with the getElementById() Method • To modify CSS properties without using the this reference: • First gain access to the styles by using either • The getElementById(ID) method OR • The getElementsByTagName(element) method JavaScript, Third Edition

  11. Modifying Styles with the getElementById() Method (Cont.) • Cascading Style Sheets • ID attribute • Value of an ID attribute uniquely identifies individual tags in an HTML document • Syntax: • <tag id=“unique_name”> • Example: <style type = "text/css"> #level1 {color: red; font-family: “serif”} </style> <h1 id=“level1”>This is red text</h1> JavaScript, Third Edition

  12. Modifying Styles with the getElementById() Method (Cont.) • Example: • thisExample.html JavaScript, Third Edition

  13. Modifying Styles with the getElementById() Method (Cont.) • The getElementById(ID) methodreturns the element represented by ID • The getElementsByTagName(element) methodreturns an array of elements represented by element. The element will be something like “p” or “b” JavaScript, Third Edition

  14. Modifying Styles with the getElementById() Method (Cont.) • To use the getElementById() method: • Append it to the document object with a period • Pass it the value assigned to the ID attribute of the element whose styles you want to manipulate document.getElementById(“idName”); JavaScript, Third Edition

  15. Modifying Styles with the getElementById() Method (Cont.) • You may assign the value returned from the getElementById() method to a variable • Append the style property and specific CSS property to the variable var myEl = document.getElementById(“idName”); myEl.style.color = “red”; Or can access directly: document.getElementById(“idName”).style.color = “red”; JavaScript, Third Edition

  16. CSS Positioning • Used to position or lay out elements on a Web page JavaScript, Third Edition

  17. Using JavaScript and Styles with W3C DOM • Node properties • can change a property using methods: getAttribute( ), setAttribute( ), removeAttribute( ) • example: var headline = document.getElementById(“headline”); headline.setAttribute(“align”, “center”); • or can access properties directly: headline.align = “center”; JavaScript, Third Edition

  18. Using JavaScript and Styles with W3C DOM • example: var headline = document.getElementById(“headline”); headline.setAttribute(“style”, “background-color:red;”+“font-family:monospace; border: solid black 3px;”); • or headline.style = “background-color:red; font-family:monospace;” + “ border: solid black 3px”; • or headline.style = “background-color:red; font-family:monospace; border: solid black 3px”; JavaScript, Third Edition

  19. Replacing text and html shortcuts • Use special properties: innerText, outerText, innerHTML, outerHTML • These are not actually part of DOM. There are built-in functions that replace HTML and text in DOM. • However, most major browser recognizes these short cuts. • Firefox properties: textContent, innerHTML, outerHTML JavaScript, Third Edition

  20. Animation and Cascading Style Sheets Replacing text and html • innerHTML: setting this property of any element to a string of HTML text causes that HTML to be parsed and inserted as the content of the element. Does not change the actual element type. • outerHTML: replaces an element’s content and the entire element itself with a specified string of HTML text. • innerText: same as innerHTML but does not parse the string, rather treats it as text. • outerText: same as innerHTML but does not parse the string, rather treats it as text. • textContent: same as innerText but only works in Firefox JavaScript, Third Edition

  21. Replacing text and html in Older IE and in W3C DOM • Example: var idTag = document.getElementById(“pText”); var pTag = document.getElementsByTagName("p"); document.getElementById(“pText”).innerText = "Thanks for comming!"; idTag.innerText = "We appreciate your business!"; pTag[0].innerText = "Please come again!"; // in Firefox: idTag.textContent = "We appreciate your business!"; pTag[0]. textContent = "Please come again!"; JavaScript, Third Edition

  22. Replacing text and html Example 1 <script type = "text/javascript"> function start(theNode) { theNode.innerHTML= “<b style=‘color:green’>Thanks for coming<b>."; } </script> </head> <body onload = "start(getElementById(“pText”)) "> <h1>Changing tags</h1> <p id = "pText">Welcome to our Web page!</p> <p> Note that you have to use the function with the <b>onload</b> event. If you just try to put the code into a script in the head section, then the code will run before the html body is loaded and the script will not know the id's assigned to the tags. </p> </body> JavaScript, Third Edition

  23. Replacing text and html Example 2 <script type = "text/javascript"> function start(theNode) { theNode[0].innerHTML= “<b style=‘color:green’>Thanks for coming<b>."; } </script> </head> <body onload = "start(getElemenstByTagName(“p”)) "> <h1>Changing tags</h1> <p id = "pText">Welcome to our Web page!</p> <p> Note that you have to use the function with the <b>onload</b> event. If you just try to put the code into a script in the head section, then the code will run before the html body is loaded and the script will not know the id's assigned to the tags. </p> </body> JavaScript, Third Edition

  24. Function start changes the text of pNode We check to see if the innerText property is defined for the body tag. If so, we can use it. If not, we must be in Firefox so use the textContent property instead The innerText property of the object is dynamically changed (Thanks for coming.). The onloadevent calls the JavaScript start function when document loading completes. Use textContent to change the text in Firefox 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 13.1: reference.html --> 6 <!-- Object Model Introduction --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Object Model</title> 11 12 <script language = “JavaScript"> 13 <!-- 14 function start(pNode) 15 { // check to see if we’re in Firefox or some other browser var hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false; if (hasInnerText){ alert(pNode.innerText); pNode.innerTextL= “Thanks for coming"; } else{ alert(pNode.textContent); pNode.textContent = “Thanks for coming"; } 18 } 19 // --> 20 </script> 21 22 </head> 23 24 <body onload ="start(getElementById(“pText”))"> 25 <p id ="pText">Welcome to our Web page!</p> 26 </body> 27 </html>

  25. The value of pNode.innerText when the page is first loaded. An alert box displaying the value of pNode.innerText. The value of pNode.innerText after the function start is invoked. Program Output

  26. CSS Positioning JavaScript, Third Edition

  27. Dynamic positioning • Easiest way to dynamically position an element with CSS: • Use left and top properties • Left property: • Specifies an element’s horizontal distance from the upper-left corner of the window JavaScript, Third Edition

  28. Dynamic positioning (Cont.) • The top property: • Specifies an element’s vertical distance from the upper-left corner of the window • Both property values are assigned in pixels JavaScript, Third Edition

  29. Dynamic Positioning with W3C DOM-Compliant Browsers • CSS Positioning • Can dynamically change CSS styles to implement traveling animation • Example: • document. getElementByID(“sampleimage”) .style.left = “3.00in”; • Moves element with an ID of sampleimage three inches to the right by changing its left property JavaScript, Third Edition

  30. Dynamic Positioning with W3C DOM-Compliant Browsers • See • OrbitW3C.html • BlizzardW3C.html. • FishTankW3C.html. • KangarooW3C.html. • PilotW3C.html. • RacetrackW3C.html. JavaScript, Third Edition

  31. DHTML Menus • Types include: • Expandable menus • Navigation menus • Sliding menus. • DHTML menus are most often used for organizing navigational links to other Web pages JavaScript, Third Edition

  32. Expandable Menus • The display property: • Specifies whether to display an element on a Web page • Can be used to simulate expandable and collapsible menus on a Web page • Used with a block-level element • Gives a Web page its structure JavaScript, Third Edition

  33. Expandable Menus (Cont.) • Inline, or text-level, elements: • Describe the text that appears on a Web page • Unlike block-level elements, they do not appear on their own lines • Appear within the line of the block-level element that contains them JavaScript, Third Edition

  34. Expandable Menus (Cont.) • <div> element: • Formats a group of block-level and inline elements with styles • By placing elements and text within a <div> element, you can use the display property to simulate expandable and collapsible menus JavaScript, Third Edition

  35. Expandable Menus (Cont.) • A class selector: • Defines different groups of styles for the same element • You create a class selector within a <style> element by: • Appending a name for the class to a selector with a period • Then assign the class name to the class attribute of elements in the document that you want to format with the class’s style definitions JavaScript, Third Edition

  36. Navigation Menus • Menus: • Can greatly improve the design of the Web page • Are very useful in helping visitors navigate through the Web site • Easiest way to create a navigation menu: • Use a table to contain your menu items JavaScript, Third Edition

  37. Navigation Menus (Cont.) • Visibility property: • Used to show and hide each menu • Determines whether an element is visible • Differs from the display property in that it allocates space for an element on a Web page JavaScript, Third Edition

  38. Example: pop up menus JavaScript, Third Edition

  39. This is the name of the styles The position determines exactly where the popUp menu will appear on the page Example: pop up menusfirst create named classes <style type="text/css"> #layer1 { position: absolute; left: 1.1in; top: 1.25in; color:blue; background-color: lightgreen; visibility:hidden; width:125px;height:50px; text-align:left; padding:.5em; } #layer2 { position: absolute; left: 1.1in; top: 1.65in; color:green; background-color:lightgreen; visibility:hidden; width:125px;height:50px; text-align:left; padding:.5em; } #layer3 { position: absolute; left: 1.1in; top: 2.05in; color:red; background-color:lightgreen; visibility:hidden; width:125px;height:50px; text-align:left; padding:.5em; } </style> JavaScript, Third Edition

  40. The div tag will contain the menu items. Set its size and color Each item will capture the onMouseOver event and then call the function display to hide and show the appropriate boxes. This div is just a hidden box (its color is white) that is positioned next to the menu bar. When the user goes out of a menu box and into this div, all menu boxes will be hidden Example: pop up menusin body, create the menu bar <body> <div style="width:100px;height:300px; background-color:lightblue"> <h1 onMouseOver="display('visible','hidden', 'hidden');">Item 1.</h1> <h1 onMouseOver="display('hidden','visible', 'hidden');">Item 2.</h1> <h1 onMouseOver="display('hidden', 'hidden','visible');">Item 3.</h1> </div> <div style="position:absolute; left:1.15in; top:1.05in; width:140px;height:300px; background-color:white" onMouseOver="display('hidden','hidden', 'hidden');"> <br /> </div> JavaScript, Third Edition

  41. Each box is positioned by it’s named style (eg, “layer1”) Links are added to the div box Example: pop up menusin body, create the pop up menus <div id="layer1"> <a href="visibilityExample.html">Visibility example</a> <a href="pop-upTest.html">Pop-up example</a> </div> <div id="layer2"> <a href="visibilityExample.html">Visibility example</a> <a href="pop-upTest.html">Pop-up example</a> </div> <div id="layer3" style="font-size:12pt"> <a href="http://www.google.com">Google</a><br /> <a href="http://www.apple.com">Apple Computer</a><br /> <a href="http://www.ithaca.edu">Ithaca College</a> </div> </body> </html> JavaScript, Third Edition

  42. Example: pop up menusin head, create the script <SCRIPT LANGUAGE="JavaScript"> function display(value1, value2, value3){ document.getElementById("layer1").style.visibility = value1; document.getElementById("layer2").style.visibility = value2; document.getElementById("layer3").style.visibility = value3; } } </SCRIPT> JavaScript, Third Edition

  43. Example: pop up menusscript that checks for browser type <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM INCOMPATIBLE BROWSERS function display(value1, value2, value3){ if (document.layers){ // test for Netscape document.layers.layer1.visibility = value1; document.layers.layer2.visibility = value2; document.layers.layer3.visibility = value3; } else if (document.getElementById){ // W3C complient document.getElementById("layer1").style.visibility = value1; document.getElementById("layer2").style.visibility = value2; document.getElementById("layer3").style.visibility = value3; } else { // o.w. it's old IE document.all.layer1.style.visibility = value1; document.all.layer2.style.visibility = value2; document.all.layer3.style.visibility = value3; } } // STOP HIDING FROM INCOMPATIBLE BROWSERS --> </SCRIPT> JavaScript, Third Edition

  44. pop up menus version 2 JavaScript, Third Edition

  45. pop up menus version 2first create named classes (same) <style type="text/css"> #layer1 { position: absolute; left: 1.1in; top: 1.25in; color:blue; background-color: lightgreen; visibility:hidden; width:125px;height:50px; text-align:left; padding:.5em; } #layer2 { position: absolute; left: 1.1in; top: 1.65in; color:green; background-color:lightgreen; visibility:hidden; width:125px;height:50px; text-align:left; padding:.5em; } #layer3 { position: absolute; left: 1.1in; top: 2.05in; color:red; background-color:lightgreen; visibility:hidden; width:125px;height:50px; text-align:left; padding:.5em; } </style> JavaScript, Third Edition

  46. For each item in each pop out menu add a onmouseover event handler to show this menu and hide the others. O.w. menu will disappear when mouse leaves each item! pop up menus version 2in body, create the menu bar <body> <div style="width:100px;height:300px; background-color:lightblue"> <h1 onMouseOver="display('visible','hidden', 'hidden');">Item 1.</h1> <h1 onMouseOver="display('hidden','visible', 'hidden');">Item 2.</h1> <h1 onMouseOver="display('hidden', 'hidden','visible');">Item 3.</h1> </div> <div id="layer1" onMouseOut="display('hidden','hidden', 'hidden');"> <a href="visibilityExample.html" onmouseover="display('visible','hidden', 'hidden');">Visibility example</a> <a href="pop-upTest.html" onmouseover="display('visible','hidden', 'hidden');">Pop-up example</a> </div> JavaScript, Third Edition

  47. For each item in each pop out menu add a onmouseover event handler to show this menu and hide the others. o.w. menu will disappear when mouse leaves each item! pop up menus version 2in body, create the menu bar <div id="layer2" onMouseOut="display('hidden','hidden', 'hidden');"> <a href="visibilityExample.html" onmouseover="display('hidden','visible', 'hidden');">Visibility example</a> <a href="pop-upTest.html" onmouseover="display('hidden','visible', 'hidden');">Pop-up example</a> </div> <div id="layer3" style="font-size:12pt" onMouseOut="display('hidden','hidden', 'hidden');"> <a href="visibilityExample.html" onmouseover="display('hidden','hidden', 'visible');">Visibility example</a> <a href="pop-upTest.html" onmouseover="display('hidden','hidden', 'visible');">Pop-up example</a> </div> JavaScript, Third Edition

  48. pop up menus version 2in body, create the pop up menus (same) <div id="layer1"> <a href="visibilityExample.html">Visibility example</a> <a href="pop-upTest.html">Pop-up example</a> </div> <div id="layer2"> <a href="visibilityExample.html">Visibility example</a> <a href="pop-upTest.html">Pop-up example</a> </div> <div id="layer3" style="font-size:12pt"> <a href="http://www.google.com">Google</a><br /> <a href="http://www.apple.com">Apple Computer</a><br /> <a href="http://www.ithaca.edu">Ithaca College</a> </div> </body> </html> JavaScript, Third Edition

  49. Example: pop up menusin body, create the pop up menusVersion 2 (same) <SCRIPT LANGUAGE="JavaScript"> function display(value1, value2, value3){ document.getElementById("layer1").style.visibility = value1; document.getElementById("layer2").style.visibility = value2; document.getElementById("layer3").style.visibility = value3; } } </SCRIPT> JavaScript, Third Edition

  50. Sliding Menus • Menus that appear to slide open and closed • Although the visibility and display properties are quite effective in showing and hiding menus: • They simply display their associated elements without any sort of effect JavaScript, Third Edition

More Related