Cpanel web hosting - 319Chapter 15Generic HTML Element ObjectsOne reason to use
319Chapter 15Generic HTML Element ObjectsOne reason to use setExpression()for dynamic properties is to let the property alwaysrespond to the current conditions on the page. For example, if you set a property that isdependent on the current width of the body, then you want a recalculation that is applied tothe property if the user resizes the window. The browser automatically responds to manyevents and updates any dynamic properties. In essence, the browser recalculates the expres- sions and applies the new values to the property. Keyboard events, in particular, trigger thiskind of automatic recalculation for you. But if your scripts perform actions on their own (inother words, not triggered by events), then your scripts need to force the recalculation of theexpressions. The document.recalc()method takes care of this, but you must invoke it toforce the recalculation of dynamic properties in these cases. ExampleListing 15-32 shows the setExpression(), recalc(), and getExpression()methods atwork in a DHTML-based clock. Figure 15-1 shows the clock. As time clicks by, the bars forhours, minutes, and seconds adjust their widths to reflect the current time. At the same time, the innerHTMLof spanelements to the right of each bar display the current numeric valuefor the bar. The dynamically calculated values in this example are based on the creation of a new dateobject over and over again to get the current time from the client computer clock. It is fromthe date object (stored in the variable called now) that the hour, minute, and second valuesare retrieved. Some other calculations are involved so that a value for one of these time com- ponents is converted into a pixel value for the width of the bars. The bars are divided into 24(for the hours) and 60 (for the minutes and seconds) parts, so the scale for the two types dif- fers. For the 60-increment bars in this application, each increment is set to 5 pixels (stored inshortWidth); the 24-increment bars are 2.5 times the shortWidth. Figure 15-1:A bar graph clock created with dynamic expressions. elementObject.setExpression()