Java Server Pages, Java Programming - Cheap Web Hosting Blog

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.
Note: If you are looking for cheap webhost to host and run your apache application check Vision jboss web hosting services

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.
Note: In case you are looking for affordable webhost to host and run your servlet application check Vision ecommerce web hosting services

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.
Note: In case you are looking for affordable webhost to host and run your servlet application check Vision make web site services

123Chapter 11Scripting Frames and Multiple WindowsIt is often difficult at first to visualize the frameset as a window object in the hierarchy. Afterall, with the exception of the URL showing in the Location/Address field, you don t seeanything about the frameset in the browser. But that window object exists in the objectmodel. Notice, too, that in the diagram the framesetting parent window has no documentobject showing. This may also seem odd because the window obviously requires an HTMLfile containing the specifications for the frameset. In truth, the parent window has a documentobject associated with it, but it is omitted from the diagram to better portray the relation- ships among parent and child windows. A frameset parent s document cannot contain mostof the typical HTML objects such as forms and controls, so references to the parent s docu- ment are rarely, if ever, used. If you add a script to the framesetting document that needs to access a property or methodof that window object, references are like any single-frame situation. Think about the point ofview of a script located in that window. Its immediate universe is the very same window. Things get more interesting when you start looking at the child frames. Each of these framescontains a documentobject whose content you see in the browser window. And the structureis such that each frame s document is entirely independent of the other. It is as if each docu- ment lived in its own browser window. Indeed, that s why each child frame is also a windowtype of object. A frame has the same kinds of properties and methods of the windowobjectthat occupies the entire browser. From the point of view of either child window in Figure 11-2, its immediate container is theparentwindow. When a parentwindow is at the very top of the hierarchical model loaded inthe browser, that window is also referred to as the topobject. References among Family MembersGiven the frame structure of Figure 11-2, it s time to look at how a script in any one of thosewindows can access objects, functions, or variables in the others. An important point toremember about this facility is that if a script has access to an object, function, or global vari- able in its own window, that same item can be reached by a script from another frame in thehierarchy (provided both documents come from the same Web server). A script reference may need to take one of three possible routes in the two-generation hierar- chy described so far: parent to child; child to parent; or child to child. Each of the pathsbetween these windows requires a different reference style. Parent-to-child referencesProbably the least common direction taken by references is when a script in the parent document needs to access some element of one of its frames. The parent contains two ormore frames, which means the parent maintains an array of the child frame objects. Youcanaddress a frame by array syntax or by the name you assign to it with the nameattributeinside the tag. In the following examples of reference syntax, I substitute a placeholdernamed ObjFuncVarNamefor whatever object, function, or global variable you intend to accessin the distant window or frame. Remember that each visible frame contains a documentobject, which is generally the container of elements you script be sure references to the elementsinclude document. With that in mind, a reference from a parent to one of its child frames fol- lows any of these models:
Note: In case you are looking for affordable webhost to host and run your servlet application check Vision servlet hosting services

122Part IIJavaScript TutorialFigure 11-1:Single-frame window and documenthierarchy. This HTML splits the browser window into two frames side by side, with a different documentloaded into each frame. The model is concerned only with structure it doesn t care aboutthe relative sizes of the frames or whether they re set up in columns or rows. Framesets establish relationships among the frames in the collection. Borrowing terminologyfrom the object-oriented programming world, the framesetting document loads into a parentwindow. Each of the frames defined in that parent window document is a child frame. Figure11-2 shows the hierarchical model of a two-frame environment. This illustration reveals a lotof subtleties about the relationships among framesets and their frames. Figure 11-2:Two-frame window and document hierarchy.
Note: If you are looking for high quality webhost to host and run your jsp application check Vision christian web host services

Scripting Framesand MultipleWindowsOne of the attractive aspects of JavaScript for some applicationson the client is that it allows user actions in one frame or win- dow to influence what happens in other frames and windows. In thissection of the tutorial, you extend your existing knowledge of objectreferences to the realm of multiple frames and windows. Frames: Parents and ChildrenYou ve see in earlier top-level hierarchy illustrations (such as Figure 4-1) that the windowobject is at the very top of the chart. Thewindowobject also has several synonyms, which stand in forthewindowobject in special cases. For instance, in Chapter 8, youlearned that selfis synonymous with windowwhen the referenceapplies to the same window that contains the script s document. Inthis lesson, you learn the roles of three other references that pointtoobjects behaving as windows frame, top, and parent. Loading an ordinary HTML document into the browser creates amodel in the browser that starts out with one windowobject and thedocument it contains. (The document likely contains other elements, but I m not concerned with that stuff yet.) The top rungs of the hier- archy model are as simple as can be, as shown in Figure 11-1. This iswhere references begin with windowor self(or with documentbecause the current window is assumed). The instant a framesetting document loads into a browser, thebrowser starts building a slightly different hierarchy model. The pre- cise structure of that model depends entirely on the structure of theframeset defined in that framesetting document. Consider the follow- ing skeletal frameset definition: 1111CHAPTER …In This ChapterRelationships amongframes in the browserwindowHow to access objectsand values in otherframesHow to controlnavigation of multipleframesCommunication skillsbetween separatewindows …
Note: If you are looking for cheap and reliable webhost to host and run your web application check Vision coldfusion web hosting services

119Chapter 10Strings, Math, and DatesExercises1.Create a Web page that has one form field for entry of the user s e-mail address and aSubmit button. Include a pre-submission validation routine that verifies that the textfield has the @ symbol found in all e-mail addresses before you allow submission of theform. 2.Given the string Internet Explorer , fill in the blanks of the string.substring() method parameters here that yield the results shown to the right of each method call: var myString = Internet Explorer ; myString.substring(___,___) // result = Int myString.substring(___,___) // result = plorer myString.substring(___,___) // result = net Exp 3.Fill in the rest of the function in the listing that follows so that it looks through everycharacter of the entry field and counts how many times the letter e appears in thefield. (Hint: All that is missing is a forrepeat loop.)

4.Create a page that has two fields and one button. The button should trigger a functionthat generates two random numbers between 1 and 6, placing each number in one ofthe fields. (Think of using this page as a substitute for rolling a pair of dice in a boardgame.) 5.Create a page that displays the number of days between today and next Christmas. …
Note: If you are looking for high quality webhost to host and run your jsp application check Vision jsp web hosting services

118Part IIJavaScript TutorialListing 10-1:Date Object Calculations Today is:
Next week will be: In the Body portion, the first script runs as the page loads, setting a global variable (today) to the current date and time. The string equivalent is written to the page. In the second Bodyscript, the document.write()method invokes the nextWeek()function to get a value to dis- play. That function utilizes the todayglobal variable, copying its millisecond value to a newvariable: todayInMS. To get a date seven days from now, the next statement adds the numberof milliseconds in seven days (60 seconds times 60 minutes times 24 hours times seven daystimes 1000 milliseconds) to today s millisecond value. The script now needs a new Dateobject calculated from the total milliseconds. This requires invoking the Dateobject con- structor with the milliseconds as a parameter. The returned value is a Dateobject, which isautomatically converted to a string version for writing to the page. To add or subtract time intervals from a Dateobject, you can use a shortcut that doesn trequire the millisecond conversions. By combining the date object s set and get methods, youcan let the Dateobject work out the details. For example, in Listing 10-1 you could eliminatethe function entirely, and let the following two statements in the second Body script obtainthe desired result: today.setDate(today.getDate() + 7); document.write(today); Because JavaScript tracks the date and time internally as milliseconds, the accurate dateappears in the end, even if the new date is into the next month. JavaScript automaticallytakes care of figuring out how many days there are in a month as well as in leap years. Many other quirks and complicated behavior await you if you script dates in your page. Aslater chapters demonstrate, however, the results may be worth the effort.
Note: In case you are looking for affordable and reliable webhost to host and run your business application check Vision ftp web hosting services

117Chapter 10Strings, Math, and Dateshowever, extract components of the Dateobject via a series of methods that you apply to aDateobject instance. Table 10-1 shows an abbreviated listing of these properties and infor- mation about their values. Table 10-1: Some Date Object MethodsMethodValue RangeDescriptiondateObj.getTime()0-…Milliseconds since 1/1/70 00:00:00 GMTdateObj.getYear()70-…Specified year minus 1900; four-digit year for2000+ dateObj.getFullYear()1970-…Four-digit year (Y2K-compliant); version 4+ browsersdateObj.getMonth()0-11Month within the year (January = 0) dateObj.getDate()1-31Date within the monthdateObj.getDay()0-6Day of week (Sunday = 0) dateObj.getHours()0-23Hour of the day in 24-hour timedateObj.getMinutes()0-59Minute of the specified hourdateObj.getSeconds()0-59Second within the specified minutedateObj.setTime(val)0-…Milliseconds since 1/1/70 00:00:00 GMTdateObj.setYear(val)70-…Specified year minus 1900; four-digit year for2000+ dateObj.setMonth(val)0-11Month within the year (January = 0) dateObj.setDate(val)1-31Date within the monthdateObj.setDay(val)0-6Day of week (Sunday = 0) dateObj.setHours(val)0-23Hour of the day in 24-hour timedateObj.setMinutes(val)0-59Minute of the specified hourdateObj.setSeconds(val)0-59Second within the specified minuteBe careful about values whose ranges start with zero, especially the months. ThegetMonth()and setMonth()method values are zero based, so the numbers are one lessthan the month numbers you are accustomed to working with (for example, January is 0, December is 11). You may notice one difference about the methods that set values of a Dateobject. Ratherthan returning some new value, these methods actually modify the value of the Dateobjectreferenced in the call to the method. Date CalculationsPerforming calculations with dates frequently requires working with the millisecond values ofthe Dateobjects. This is the surest way to compare date values. To demonstrate a few Dateobject machinations, Listing 10-1 displays the current date and time as the page loads. Another script shows one way to calculate the date and time seven days from the currentdate and time value. Caution
Note: In case you are looking for affordable webhost to host and run your web application check Vision cheap hosting services

116Part IIJavaScript Tutorialwhere nequals the top number of the range. For the dice game, the formula for each die isnewDieValue = Math.floor(Math.random() * 6) + 1; To see this, enter the right-hand part of the preceding statement in the top text box of TheEvaluator Jr. and repeatedly click the Evaluate button. One bit of help JavaScript doesn t offer except in IE5.5+ and Mozilla-based browsers is a wayto specify a number-formatting scheme. Floating-point math can display more than a dozennumbers to the right of the decimal. Moreover, results can be influenced by each operatingsystem s platform-specific floating-point errors, especially in earlier versions of scriptablebrowsers. For other browsers you must perform any number formatting for dollars andcents, for example through your own scripts. Chapter 28 provides an example. The Date ObjectWorking with dates beyond simple tasks can be difficult business in JavaScript. A lot of thedifficulty comes with the fact that dates and times are calculated internally according toGreenwich Mean Time (GMT) provided the visitor s own internal PC clock and control panelare set accurately. As a result of this complexity, better left for Chapter 29, this section of thetutorial touches on only the basics of the JavaScript Dateobject. A scriptable browser contains one global Dateobject (in truth, one Dateobject per window) that is always present, ready to be called upon at any moment. The Dateobject is anotherone of those static objects. When you wish to work with a date, such as displaying today sdate, you need to invoke the Dateobject constructor function to obtain an instance of a Dateobject tied to a specific time and date. For example, when you invoke the constructor withoutany parameters, as invar today = new Date(); the Dateobject takes a snapshot of the PC s internal clock and returns a date object for thatinstant. Notice the distinction between the static Dateobject and a Dateobject instance, which contains an actual date value. The variable, today, contains not a ticking clock, but avalue that you can examine, tear apart, and reassemble as needed for your script. Internally, the value of a Dateobject instance is the time, in milliseconds, from zero o clockon January 1, 1970, in the Greenwich Mean Time zone the world standard reference pointfor all time conversions. That s how a Dateobject contains both date and time information. You can also grab a snapshot of the Dateobject for a particular date and time in the past orfuture by specifying that information as parameters to the Dateobject constructor function: var someDate = new Date( Month dd, yyyy hh:mm:ss ); var someDate = new Date( Month dd, yyyy ); var someDate = new Date(yy,mm,dd,hh,mm,ss); var someDate = new Date(yy,mm,dd); var someDate = new Date(GMT milliseconds from 1/1/1970); If you attempt to view the contents of a raw Dateobject, JavaScript converts the value to thelocal time zone string as indicated by your PC s control panel setting. To see this in action, use The Evaluator Jr. s top text box to enter the following: new Date(); Your PC s clock supplies the current date and time as the clock calculates them (eventhoughJavaScript still stores the date object s millisecond count in the GMT zone). You can,
Note: In case you are looking for affordable and reliable webhost to host and run your j2ee application check Vision web design programs services