Java Server Pages, Java Programming - Cheap Web Hosting Blog

133Chapter 12Images and Dynamic HTMLListing 12-1:Precaching Images

Image Object

As the page loads, it executes several statements immediately. These statements create anempty array that is populated with four new memory image objects. Each image object has afilename assigned to its srcproperty. These images are loaded into the image cache as thepage loads. Down in the Body portion of the document, an tag stakes its turf on thepage and loads one of the images as a starting image. A selectelement lists user-friendly names for the pictures while housing the names of imageobjects already precached in memory. When the user makes a selection from the list, theloadCached()function extracts the selected item s value which is a string index of theimage within the imageLibraryarray. The srcproperty of the chosen image object isassigned to the srcproperty of the visible image object on the page, and the precachedimage appears instantaneously.

132Part IIJavaScript TutorialThe script behind this kind of image change is simple enough. All it entails is assigning a newURL to the image object s srcproperty. The size of the image on the page is governed by theheightand widthattributes set in the tag as the page loads. The most common imagerollovers use the same size image for each of the rollover states. Precaching imagesImages take extra time to download from a Web server until the images are stored in thebrowser s cache. If you design your page so that an image changes in response to user action, you usually want the same fast response that users are accustomed to in other programs. Making the user wait seconds for an image to change can severely detract from enjoyment ofthe page. JavaScript comes to the rescue by enabling scripts to load images into the browser s memorycache without displaying the image, a technique called precaching images. The tactic thatworks best is to preload the image into the browser s image cache while the page initiallyloads. Users are less impatient for those few extra seconds as the main page loads than wait- ing for an image to download in response to some mouse action. Precaching an image requires constructing an image object in memory. An image object cre- ated in memory differs in some respects from the document image object that you createwith the tag. Memory-only objects are created by script, and you don t see them onthe page at all. But their presence in the document code forces the browser to load theimages as the page loads. The object model provides an Imageobject constructor function tocreate the memory type of image object as follows: var myImage = new Image(width, height); Parameters to the constructor function are the pixel width and height of the image. Thesedimensions should match the tag s widthand heightattributes. Once the imageobject exists in memory, you can then assign a filename or URL to the srcproperty of thatimage object: myImage.src = someArt.gif ; When the browser encounters a statement assigning a URL to an image object s srcproperty, the browser fetches and loads that image into the image cache. All the user sees is someextra loading information in the status bar, as if another image were in the page. By the timethe entire page loads, all images generated in this way are tucked away in the image cache. You can then assign your cached image s srcproperty or the actual image URL to the srcproperty of the document image created with the tag: document.images[0].src = myImage.src; The change to the image in the document is instantaneous. Listing 12-1 is a simple listing for a page that has one tag and a select list that enablesyou to replace the image in the document with any of four precached images (including theoriginal image specified for the tag). If you type this listing as I strongly recommend youcan obtain copies of the four image files from the companion CD-ROM in the Chapter 12 direc- tory of listings (you must still type the HTML and code, however).

Images andDynamic HTMLThe previous eight lessons have been intensive, covering a lot ofground for both programming concepts and JavaScript. Now it stime to apply those fundamentals to the learning of more advancedtechniques. I cover two areas here. First, I show you how to imple- ment the ever-popular mouse rolloverin which images swap when theuser rolls the cursor around the screen. Then I introduce you to tech- niques for modifying a page s content after the page has loaded. The Image ObjectOne of the objects contained by the document is the image object supported in all scriptable browsers since the days of NN3 and IE4. Image object references for a document are stored in the objectmodel as an array belonging to the documentobject. You can there- fore reference an image by array index or image name. Moreover, thearray index can be a string version of the image s name. Thus, all ofthe following are valid references to an image object: document.images[n] document.images[ imageName ] document.imageNameIf your goal is to support scriptable images for browsers such as NN3and NN4, you must be aware of image object limitations for thosebrowsers. In particular, the range of scriptable properties is limited, although the all-important srcproperty is accessible. Also, nomouse-related event handlers are affiliated with the image object(until you get to IE4+ and NN6+). If you want to make an image a clickable item in older browsers, surround it with a link (and settheimage s border to zero) or attach a client-side image map to it. The combination of a link and image is how you make a backward- compatible clickable image button. Interchangeable imagesThe advantage of having a scriptable image object is that a script canchange the image occupying the rectangular space already occupiedby an image. In IE4+ and NN6+, the images can even change size, withsurrounding content automatically reflowing around the resized image. 1212CHAPTER …In This ChapterHow to precacheimagesHow to swap imagesfor mouse rolloversAssigning scripts as URLsModifying Body contentdynamically …

130Part IIJavaScript TutorialExercisesBefore answering the first three questions, study the structure of the following frameset for aWeb site that lists college courses: 1.Each document that loads into the description frame has an onloadevent handler inits tag that stores a course identifier in the framesetting document s global variable called currCourse. Write the onloadevent handler that sets this value to history101 . 2.Draw a block diagram that describes the hierarchy of the windows and frames repre- sented in the frameset definition. 3.Write the JavaScript statements located in the navigation frame that loads the file french201M.html into the mechanics frame and the file french201D.html intothe description frame. 4.While a frameset is still loading, a JavaScript error message suddenly appears sayingthat window.document.navigation.form.selector is undefined. What do you think ishappening in the application s scripts, and how can you solve the problem? 5.A script in a child frame of the main window uses window.open()to generate a secondwindow. How can a script in the second window access the locationobject (URL) ofthe top (framesetting) window in the main browser window? …

129Chapter 11Scripting Frames and Multiple WindowsListing 11-2:A Main Window Document

All of the action in the subwindow document comes in the onchangeevent handler of the textfield. It assigns the subwindow field s own value to the value of the field in the opener win- dow s document. Remember that the contents of each window and frame belong to a docu- ment. So even after your reference targets a specific window or frame, the reference mustcontinue helping the browser find the ultimate destination, which is generally some elementof the document. Listing 11-3:A Subwindow Document

Just one more lesson to go before I let you explore all the details elsewhere in the book. I usethe final tutorial chapter to show you some fun things you can do with your Web pages, suchas changing images when the user rolls the mouse atop a picture.

128Part IIJavaScript TutorialKnowing that navigation from page to page in the upper-right frame requires knowledge ofwhich page is currently loaded there, I build some other scripting into both the parent docu- ment and each of the documents that loads into that frame. A global variable calledcurrTitleis defined in the parent document. Its value is an integer indicating which page ofthe sequence (1 through 5) is currently loaded. An onloadevent handler in each of the fivedocuments (named dh1.htm, dh2.htm, dh3.htm, dh4.htm, and dh5.htm) assigns its pagenumber to that parent global variable. This arrangement allows all frames in the frameset toshare that value easily. When a user clicks the right-facing arrow to move to the next page, the goNext()function iscalled. The first statement gets the currTitlevalue from the parent window and assigns it toa local variable: currOffset. An if…elseconstruction tests whether the current pagenumber is less than five. If so, the add-by-value operator adds one to the local variable so Ican use that value in the next two statements. In those next two statements, I adjust the content of the two right frames. Using the parentreference to gain access to both frames, I set the location.hrefproperty of the top-rightframe to the name of the file next in line (by concatenating the number with the surroundingparts of the filename). The second statement sets the location.hashproperty (which con- trols the anchor being navigated to) to the corresponding anchor in the instructionsframe(anchor names help1, help2, help3, help4, and help5). A click of the left-facing arrow reverses the process, subtracting 1 from the current page num- ber (using the subtract-by-value operator) and changing the same frames accordingly. The example shown in Listing 11-1 is one of many ways to script a navigation frame inJavaScript. Whatever methodology you use, much interaction occurs among the frames in theframeset. References for Multiple WindowsIn Chapter 8, you saw how to create a new window and communicate with it by way of thewindowobject reference returned from the window.open()method. In this section, I showyou how one of those subwindows can communicate with objects, functions, and variables inthe window or frame that creates the subwindow. Every windowobject has a property called opener. This property contains a reference to thewindow or frame that held the script whose window.open()statement generated the subwin- dow. For the main browser window and frames therein, this value is null. Because theopenerproperty is a valid window reference, you can use it to begin the reference to items inthe original window just like a script in a child frame uses parentto access items in theparent document. The parent-child terminology doesn t apply to subwindows, however. Listings 11-2 and 11-3 contain documents that work together in separate windows. Listing11-2 displays a button that opens a smaller window and loads Listing 11-3 into it. The mainwindow document also contains a text field that gets filled in when you enter text into a cor- responding field in the subwindow. In the main window document, the newWindow()function generates the new window. Because no other statements in the document require the reference to the new window justopened, the statement does not assign its returned value to any variable. This is an accept- able practice in JavaScript if you don t need the returned value of a function or method.

127Chapter 11Scripting Frames and Multiple WindowsListing 11-1:A Graphical Navigation Bar Look first at the HTML section for the Body portion. Almost everything there is standard stufffor defining client-side image maps. The coordinates define rectangles around each of thearrows in the larger image. The hrefattributes for the two areas point to JavaScript functionsdefined in the Head portion of the document (the javascript:pseudo-URL is covered in thenext chapter). In the frameset that defines the Decision Helper application, names are assigned to eachframe. The upper-right frame is called entryForms; the bottom frame is calledinstructions.

126Part IIJavaScript TutorialControlling Multiple Frames Navigation BarsIf you are enamored of frames as a way to help organize a complex Web page, you may findyourself wanting to control the navigation of one or more frames from a static navigationpanel. Here, I demonstrate scripting concepts for such control using an application calledDecision Helper (which you can find in Chapter 55 on the CD-ROM). The application consistsof three frames (see Figure 11-3). The top-left frame is one image that has four graphical but- tons in it. The goal is to turn that image into a client-side image map and script it so the pageschange in the right-hand and bottom frames. In the upper-right frame, the script loads anentirely different document along the sequence of five different documents that go in there. Inthe bottom frame, the script navigates to one of five anchors to display the segment ofinstructions that applies to the document loaded in the upper-right frame. Listing 11-1 shows a slightly modified version of the actual file for the Decision Helper appli- cation s navigation frame. The listing contains a couple of new objects and concepts not yetcovered in this tutorial. But as you will see, they are extensions to what you already knowabout JavaScript and objects. To help simplify the discussion here, I remove the scripting andHTML for the top and bottom button of the area map. In addition, I cover only the two naviga- tion arrows. Figure 11-3:The Decision Helper screen.

125Chapter 11Scripting Frames and Multiple WindowsFrame Scripting TipsOne of the first mistakes that frame scripting newcomers make is writing immediate scriptstatements that call upon other frames while the pages load. The problem here is that youcannot rely on the document loading sequence to follow the frameset source code order. Allyou know for sure is that the parent document beginsloading first. Regardless of the order oftags, child frames can begin loading at any time. Moreover, a frame s loading timedepends on other elements in the document, such as images or Java applets. Fortunately, you can use a certain technique to initiate a script once all of the documents inthe frameset are completely loaded. Just as the onloadevent handler for a document fireswhen that document is fully loaded, a parent s onloadevent handler fires after the onloadevent handler in its child frames is fired. Therefore, you can specify an onloadevent handlerin the tag. That handler might invoke a function in the framesetting documentthat then has the freedom to tap the objects, functions, or variables of all frames throughoutthe object hierarchy. Make special note that a reference to a frame as a type of window object is quite separatefrom a reference to the frameelement object. An element object is one of those DOM elementnodes in the document node tree (see Chapter 4). The properties and methods of this nodediffer from the properties and methods that accrue to a window-type object. It may be a diffi- cult distinction to grasp, but it s an important one. The way you reference a frame as a win- dow object or element node determines which set of properties and methods are availableto your scripts. See Chapter 15 for a more detailed introduction to element node scripting. If you start with a reference to the frameelement object, you can still reach a reference to thedocumentobject loaded into that frame. But the syntax is different depending on the browser. IE4+ and Safari let you use the same documentreference as for a window; Mozilla-basedbrowsers follow the W3C DOM standard more closely, using the contentDocumentpropertyof the frame element. To accommodate both syntaxes you can build a reference as follows: var docObj; var frameObj = document.getElementById( myFrame ); if (frameObj.contentDocument) { docObj = frameObj.contentDocument; } else { docObj = frameObj.document; } About iframe ElementsThe iframeelement is supported as a scriptable object in IE4+, Mozilla-based browsers, andSafari (among other modern browsers). It is often used as a way to fetch and load HTML orXML from a server without disturbing the current HTML page. Therefore it s not uncommonfor an iframeto be hidden from view, while scripts handle all of the processing between itand the main document. An iframeelement becomes another member of the current window s framescollection. Butyou may also reference the iframeas an element object through W3C DOM document. getElementById()terminology. As with the distinction between the traditional frame-as- window object and DOM element object, a script reference to the documentobject within aniframeelement object needs special handling. See Chapter 16 for additional details.

124Part IIJavaScript Tutorial[window.]frames[n].ObjFuncVarName[window.]frames[ frameName ].ObjFuncVarName[window.]frameName.ObjFuncVarNameNumeric index values for frames are based on the order in which their tags appearin the framesetting document. You will make your life easier, however, if you assign recogniz- able names to each frame and use the frame s name in the reference. Child-to-parent referencesIt is not uncommon to place scripts in the parent (in the Head portion) that multiple childframes or multiple documents in a frame use as a kind of script library. By loading in theframeset, these scripts load only once while the frameset is visible. If other documents fromthe same server load into the frames over time, they can take advantage of the parent sscripts without having to load their own copies into the browser. From the child s point of view, the next level up the hierarchy is called the parent. Therefore, a reference from a child frame to items at the parent level is simplyparent.ObjFuncVarNameIf the item accessed in the parent is a function that returns a value, the returned value tran- scends the parent/child borders down to the child without hesitation. When the parent window is also at the very top of the object hierarchy currently loaded intothe browser, you can optionally refer to it as the top window, as intop.ObjFuncVarNameUsing the topreference can be hazardous if for some reason your Web page gets displayed insome other Web site s frameset. What is your top window is not the master frameset s topwindow. Therefore, I recommend using the parentreference whenever possible (unless youwant to blow away an unwanted framer of your Web site). Child-to-child referencesThe browser needs a bit more assistance when it comes to getting one child window to com- municate with one of its siblings. One of the properties of any window or frame is its parent(whose value is nullfor a single window). A reference must use the parentproperty to workits way out of the current frame to a point that both child frames have in common the par- ent in this case. Once the reference is at the parent level, the rest of the reference can carryon as if starting at the parent. Thus, from one child to one of its siblings, you can use any ofthe following reference formats: parent.frames[n].ObjFuncVarNameparent.frames[ frameName ].ObjFuncVarNameparent.frameName.ObjFuncVarNameA reference from the other sibling back to the first looks the same, but the frames[]arrayindex or frameNamepart of the reference differs. Of course, much more complex frame hier- archies exist in HTML. Even so, the object model and referencing scheme provide a solutionfor the most deeply nested and gnarled frame arrangement you can think of following thesame precepts you just learned.