Pemrograman Teknologi Internet W09: DOM & DHTML
2 Objectives DOM: DOM: DOM Nodes & Trees DOM Nodes & Trees Traversing & Modifying DOM Trees Traversing & Modifying DOM Trees DOM Collections DOM Collections Dynamic Styles Dynamic Styles DHTML (IE Only) DHTML (IE Only) Filter & Transitions Filter & Transitions
DOM DOM stands for Document Object Model DOM stands for Document Object Model DOM is a cross-platform and language- independent convention for representing and interacting with objects in HTML, XHTML and XML documents. DOM is a cross-platform and language- independent convention for representing and interacting with objects in HTML, XHTML and XML documents. 3
Object Referencing The simplest way to reference an element is by using the element’s id attribute. The element is represented as an object, and its various XHTML attributes become properties that can be manipulated by scripting The simplest way to reference an element is by using the element’s id attribute. The element is represented as an object, and its various XHTML attributes become properties that can be manipulated by scripting 4
Using id (IE Only) <html><head> <title>Intro</title> <!-- function start() { alert(pText.innerText); pText.innerText = "Thanks for coming"; } // --> </script></head> Welcome to our Web Page! Welcome to our Web Page! </body></html> 5
Collections ‘all’ The all collection is a collection of all the XHTML elements in a document, in the order in which they appear. The all collection is a collection of all the XHTML elements in a document, in the order in which they appear. This provides an easy way of referring to any specific element, especially if it does not have an id. This provides an easy way of referring to any specific element, especially if it does not have an id. 6
Collections ‘all’ var elements = ""; function start() { for (var loop = 0; loop < document.all.length; ++loop) elements += " " + document.all[loop].tagName; pText.innerHTML += elements; alert(elements);} 7
Collections ‘children’ A collection similar to the all collection is the children collection, which for a specific element contains that element’s child elements. A collection similar to the all collection is the children collection, which for a specific element contains that element’s child elements. For example, an html element has only two children—the head element and the body element. For example, an html element has only two children—the head element and the body element. 8
Collections ‘children’ var elements = " "; function child(object) { var loop = 0; elements += " " + object.tagName + " "; for (loop = 0; loop < object.children.length; loop++) { if (object.children[loop].children.length) child(object.children[loop]);else elements += " " + object.children[loop].tagName + " "; } elements += " "; } 9
Dynamic Styles An element’s style can be changed dynamically. An element’s style can be changed dynamically. For example: For example: the background color as document.body.style.backgroundColor the background color as document.body.style.backgroundColor the body property of the document object refers to the body element. the body property of the document object refers to the body element. the style object (a property of most XHTML elements) to set the background-color CSS property the style object (a property of most XHTML elements) to set the background-color CSS property 10
Dynamic Styles 1 function start() { var inputColor = prompt("Enter a background color name"); document.body.style.backgroundColor = inputColor; } 11
Dynamic Styles 2 <html><head> CSS Demo CSS Demo.bigText { font-size: 3em; font-weight: bold }.smallText { font-size:.75em }</style> 12
Dynamic Styles 2 <!-- function start() { var inputClass = prompt("Enter a css name"); // IE Only // pText.className = inputClass; document.getElementById('pText').className = inputClass; } // --> </script></head> Welcome to our Web page! Welcome to our Web page! </body></html> 13
Dynamic Positioning Another important feature of Dynamic HTML is dynamic positioning, by means of which XHTML elements can be positioned with scripting. Another important feature of Dynamic HTML is dynamic positioning, by means of which XHTML elements can be positioned with scripting. This is done by declaring an element’s CSS position property to be either absolute or relative, and then moving the element by manipulating any of the top, left, right or bottom CSS properties. This is done by declaring an element’s CSS position property to be either absolute or relative, and then moving the element by manipulating any of the top, left, right or bottom CSS properties. 14
Dynamic Positioning <html><head> Dynamic Positioning Dynamic Positioning <!-- var speed = 5; var count = 10; var direction = 1; var firstLine = "Text growing"; var fontStyle = ["serif", "sans-serif", "monospace"]; var fontStylecount = 0; function start() { window.setInterval("run()", 100); } 15
Dynamic Positioning function run() { count += speed; if ((count % 200) == 0) { speed *= -1; direction = !direction; pText.style.color = (speed < 0) ? "red" : "blue"; firstLine = (speed < 0) ? "Text shrinking" : "Text growing"; pText.style.fontFamily = fontStyle[++fontStylecount % 3]; } pText.style.fontSize = count / 3; pText.style.left = count; pText.innerHTML = firstLine + " Font size: " + count + "px"; } 16
Dynamic Positioning // --> </script></head> Welcome!</p></body></html> 17
Object Model Chart 18
Filter and Transitions The difference between Filter and Transition: The difference between Filter and Transition: Applying filters to text and images causes changes that are persistent. Applying filters to text and images causes changes that are persistent. Transitions are temporary Transitions are temporary Filters and transitions do not add content to your pages—rather, they present existing content in an engaging manner to capture the user’s attention Filters and transitions do not add content to your pages—rather, they present existing content in an engaging manner to capture the user’s attention 19
Flip Filter <html><head> <title>Intro</title> body { background-color: #CCFFCC } table { font-size: 3em; font-family: Arial, sans-serif; background-color: #FFCCCC; border-style: ridge; border-collapse: collapse } td { border-style: groove; padding: 1ex } </style></head> 20
Flip Filter <body><table><tr> Text Text <td>Text</td></tr><tr> Text Text </tr></table></body></html> 21
Adding Shadow to Text A simple filter that adds depth to your text is the shadow filter. A simple filter that adds depth to your text is the shadow filter. This filter creates a shadowing effect that gives your text a three-dimensional appearance. This filter creates a shadowing effect that gives your text a three-dimensional appearance. 22
Adding Shadow to Text <html><head> <title>Shadow</title></head><body> Shadow Direction: 0 Shadow Direction: 0 </html> 23
Making Text Glow The glow filter adds an aura of color around text. The glow filter adds an aura of color around text. The color and strength can both be specified as demonstrated in the following code: The color and strength can both be specified as demonstrated in the following code: Glowing Text Glowing Text 24
Other Filter Effects: Gradient To create gradient effects dynamically, using the alpha filter. To create gradient effects dynamically, using the alpha filter. The style property of the filter determines in what style the opacity is applied: The style property of the filter determines in what style the opacity is applied: a value of 0 applies uniform opacity, a value of 0 applies uniform opacity, a value of 1 applies a linear gradient, a value of 1 applies a linear gradient, a value of 2 applies a circular gradient a value of 2 applies a circular gradient and a value of 3 applies a rectangular gradient. and a value of 3 applies a rectangular gradient. The opacity and finishopacity properties are both percentages determining at what percent opacity the specified gradient will start and finish, respectively. The opacity and finishopacity properties are both percentages determining at what percent opacity the specified gradient will start and finish, respectively. 25
Other Filter Effects: blur The blur filter creates an illusion of motion by blurring text or images in a certain direction. The blur filter creates an illusion of motion by blurring text or images in a certain direction. The blur filter can be applied in any of eight directions, and its strength can vary. The blur filter can be applied in any of eight directions, and its strength can vary. The add property, when set to true, adds a copy of the original image over the blurred image, creating a more subtle blurring effect. The add property, when set to true, adds a copy of the original image over the blurred image, creating a more subtle blurring effect. The direction property determines in which direction the blur filter will be applied. This is expressed in angular form (as with the shadow filter). The direction property determines in which direction the blur filter will be applied. This is expressed in angular form (as with the shadow filter). The strength property determines how strong the blurring effect is. The strength property determines how strong the blurring effect is. 26
Transition The transitions included with Internet Explorer give the author control of many scriptable PowerPoint type effects. The transitions included with Internet Explorer give the author control of many scriptable PowerPoint type effects. Transitions are set as values of the filter CSS property, just as regular filters are. Transitions are set as values of the filter CSS property, just as regular filters are. We then use scripting to begin the transition We then use scripting to begin the transition A simple example is the blendTrans transition, which creates a smooth fade-in/fade-out effect. A simple example is the blendTrans transition, which creates a smooth fade-in/fade-out effect. 27
blendTrans <head> Using blendTrans Using blendTrans <!-- function blendOut() { textInput.filters("blendTrans").apply(); textInput.style.visibility = "hidden"; textInput.filters("blendTrans").play();} // --> </script> 28
blendTrans </head><body> Some fading text Some fading text </div></body></html> 29