1356 Part V . Putting JavaScript to Work (Starting a web site)
1356 Part V . Putting JavaScript to Work and so on). Therefore, if the first band is brown and the second band is black, the number you start off with is 10. The third band is a multiplier. Each color determines the power of ten by which you multiply the first digits. For example, the red color corresponds to a multiplier of 102, so that 10 102 equals 1,000 ohms. A fourth band, if present, indicates the tolerance of the component how far, plus or minus, the resistance measurement can fluctuate due to variations in the manufacturing process. Gold means a tolerance of plus-or-minus 5 percent; silver means plus-or-minus 10 percent; and no band means a 20 percent tolerance. A pinch of extra space typically appears between the main group of three-color bands and the one tolerance band. User Interface Ideas The quick-and-dirty, non-graphical approach for a user interface was to use a sin gle frame with four SELECT elements defined as pop-up menus (one for each of the four color bands on a resistor), a button to trigger calculation, and a field to show the numeric results. How dull. It occurred to me that if I design the art carefully, I can have JavaScript assemble an updated image of the resistor consisting of different slices of art: static images for the resistor s left and right ends, and variable slivers of color bands for the mid dle. Rather than use the brute force method of creating an image for every possible combination of colors (3,600 images total!), a far more efficient approach is to have one image file for each color (12 colors plus 1 empty) and enable JavaScript to call them from the server, as needed, in the proper order. If not for client-side JavaScript, a CGI script on the server would have to handle this kind of intelligence and user interaction. But with this system, any dumb server can dish up the image files as called by the JavaScript script. The first generation of this resistor calculator used two frames, primarily because I needed a second frame to update the calculator s art dynamically while keeping the pop-up color menus stationary. Images couldn t be swapped back in those frontier days, so the lower frame had to be redrawn for each color choice. Fortunately, NN3 and IE4 enabled me to update individual image objects in a loaded document without any document reloading. Moreover, with all the images pre- cached in memory, page users experience no (or virtually no) delay in making a change from one value to another. The design for the new version is a simple, single-document interface (see Figure 53-1). Four pop-up menus let you match colors of a resistor, whereas the onChange event handler in each menu automatically triggers an image and calculation update. To hold the art together on the page, a table border surrounds the images on the page, whereas the numeric value of the component appears in a text field.
You need excellent and relaible webhost company to host your web applications? Then pay a visit to Inexpensive Web Hosting services.