Java Server Pages, Java Programming - Cheap Web Hosting Blog

86Part IIJavaScript TutorialIf you issue window.close(), self.close(), or just close()in the main window s script, the method closes the main window (after confirming with the user) and not the subwindow. To address another window, then, you must include a reference to that window as part of thecomplete reference. This has an impact on your code because you probably want the variableholding the reference to the subwindow to be valid as long as the main document is loadedinto the browser. For that to happen, the variable has to be initialized as a global variable, rather than inside a function (although you can set its value inside a function). That way, onefunction can open the window while another function closes it. Listing 8-1 is a page that has a button for opening a blank, new window and closing that win- dow from the main window. To view this demonstration, shrink your main browser window toless than full screen. Then when the new window is generated, reposition the windows so youcan see the smaller, new window when the main window is in front. (If you lose a windowbehind another, use the browser s Window menu to choose the hidden window.) The keypoint of Listing 8-1 is that the newWindowvariable is defined as a global variable so that boththe makeNewWindow()and closeNewWindow()functions have access to it. When a variable isdeclared with no value assignment, its initial value is null. A nullvalue is interpreted to bethe same as falsein a condition, while the presence of any non-zero value is the same astruein a condition. Therefore, in the closeNewWindow()function, the condition testswhether the window has been created before issuing the subwindow s close()method. Then, to clean up, the function sets the newWindowvariable to nullso that another click ofthe Close button doesn t try to close a nonexistent window. Listing 8-1:References to Window Objects

Note: In case you are looking for affordable webhost to host and run your web application check Vision cheap hosting services

85Chapter 8Window and Document ObjectsA windowobject also has a synonym when the script doing the referencing points to the win- dow that houses the document. The synonym is self. Reference syntax then becomesself.propertyNameself.methodName([parameters]) You can use these initial reference object names interchangeably, but I tend to reserve theuse of selffor more complex scripts that involve multiple frames and windows. The selfmoniker more clearly denotes the current window holding the script s document. It makesthe script more readable by me and by others. Back in Chapter 4, I indicated that because the windowobject is always there when a scriptruns, you could omit it from references to any objects inside that window. Therefore, the fol- lowing syntax models assume properties and methods of the current window: propertyNamemethodName([parameters]) In fact, as you will see in a few moments, some methods may be more understandable if youomit the windowobject reference. The methods run just fine either way. Creating a windowA script does not create the main browser window. A user does that by virtue of launchingthe browser or by opening a URL or file from the browser s menus (if the window is notalready open). But a script can generate any number of subwindows once the main window isopen (and that window contains a document whose script needs to open subwindows). The method that generates a new window is window.open(). This method contains up tothree parameters that define window characteristics, such as the URL of the document toload, its name for targetattribute reference purposes in HTML tags, and physical appear- ance (size and chrome contingent). I don t go into the details of the parameters here (they recovered in great depth in Chapter 16), but I do want to expose you to an important conceptinvolved with the window.open()method. Consider the following statement that opens a new window to a specific size and with anHTML document from the same server directory that holds the current page: var subWindow = window.open( define.html , def , height=200,width=300 ); The important thing to note about this statement is that it is an assignment statement. Something gets assigned to that variable subWindow. What is it? It turns out that when thewindow.open()method runs, it not only opens up that new window according to specifica- tions set as parameters, but it also evaluates to a reference to that new window. In program- ming parlance, the method is said to return a value in this case, a genuine object reference. The value returned by the method is assigned to the variable. Your script can now use that variable as a valid reference to the second window. If you needto access one of its properties or methods, you must use that reference as part of the com- plete reference. For example, to close the subwindow from a script in the main window, usethis reference to the close()method for that subwindow: subWindow.close();
Note: In case you are looking for affordable and reliable webhost to host and run your j2ee application check Vision web design programs services

84Part IIJavaScript TutorialFigure 8-1:The top-level browser object model for all scriptable browsers. The window ObjectAt the very top of the object hierarchy is the windowobject. This object gains that exaltedspot in the object food chain because it is the master container for all content you view in theWeb browser. As long as a browser window is open even if no document is loaded in thewindow the windowobject is defined in the current model in memory. In addition to the content part of the window where documents go, a window s sphere ofinfluence includes the dimensions of the window and all of the stuff that surrounds the con- tent area. The area where scrollbars, toolbars, the status bar, and (non-Macintosh) menu barlive is known as a window s chrome. Not every browser has full scripted control over thechrome of the main browser window, but you can easily script the creation of additional win- dows sized the way you want and that have only the chrome elements you wish to display inthe subwindow. Although the discussion about frames comes in Chapter 11, I can safely say now that eachframe is also considered a windowobject. If you think about it, that makes sense becauseeach frame can hold a different document. When a script runs in one of those documents, itregards the frame that holds the document as the windowobject in its view of the object hierarchy. As you learn in this chapter, the windowobject is a convenient place for the document objectmodel to attach methods that display modal dialog boxes and adjust the text that displays inthe status bar at the bottom of the browser window. A windowobject method enables you tocreate a separate window that appears on the screen. When you look at all of the properties, methods, and event handlers defined for the windowobject (see Chapter 16), it should beclear why they are attached to window objects visualize their scope and the scope of abrowser window. Accessing window properties and methodsYou can word script references to properties and methods of the windowobject in severalways, depending more on whim and style than on specific syntactical requirements. The mostlogical and common way to compose such references includes the windowobject in thereference: window.propertyNamewindow.methodName([parameters]) windowdocumentnavigatorscreenhistorylocation
Note: In case you are looking for affordable webhost to host and run your servlet application check Vision servlet hosting services

Window andDocument ObjectsNow that you have exposure to programming fundamentals, itiseasier to demonstrate how to script objects in documents. Starting with this lesson, the tutorial turns back to the documentobject model, diving more deeply into each of the objects you willplace in many of your documents. Top-Level ObjectsAs a refresher, study the hierarchy of top-level objects in Figure 8-1. This chapter focuses on objects of this level that you ll frequentlyencounter in your scripting: window, location, navigator, anddocument. The goal is not only to equip you with the basics so youcan script simple tasks, but also to prepare you for in-depth examina- tions of each object and its properties, methods, and event handlersin Part III of this book. I introduce only the basic properties, methods, and event handlers for objects in this tutorial you can find farmorein Part III. Examples in that part of the book assume you knowthe programming fundamentals covered in previous chapters. 88CHAPTER …In This ChapterWhat the windowobject doesHow to access keywindowobjectproperties and methodsHow to trigger scriptactions after adocument loadsThe purposes of thelocationandhistoryobjectsHow the documentobject is createdHow to access keydocumentobjectproperties and methods …
Note: In case you are looking for affordable and reliable webhost to host and run your j2ee application check Vision web design programs services

81Chapter 7Programming Fundamentals, Part II2.Examine the following function definition. Can you spot any problems with the defini- tion? If so, how can you fix the problems? function format(ohmage) { var result; if ohmage >= 1e6 { ohmage = ohmage / 1e6; result = ohmage + Mohms ; } else { if (ohmage >= 1e3) ohmage = ohmage / 1e3; result = ohmage + Kohms ; elseresult = ohmage + ohms ; } alert(result); 3.Devise your own syntax for the scenario of looking for a ripe tomato at the grocerystore, and write a forloop using that object and property syntax. 4.Modify Listing 7-2 so it does not reuse the hisDogvariable inside the function. 5.Given the following table of data about several planets of our solar system, create aWeb page that enables users to enter a planet name and, at the click of a button, havethe distance and diameter appear either in an alert box or (as extra credit) in separatefields of the page. PlanetDistance from the SunDiameterMercury36 million miles3,100 milesVenus67 million miles7,700 milesEarth93 million miles7,920 milesMars141 million miles4,200 miles …
Note: If you are looking for cheap and reliable webhost to host and run your mysql application check Vision professional web hosting services

80Part IIJavaScript Tutorialis found. When the forloop breaks, the value of the icounter is fixed at the row of theUSStatesarray containing the entered state. I need that index value to find the correspond- ing entry in the other array. Even though the counting variable, i, is initialized in the forloop, it is still alive and in the scope of the function for all statements after the initialization. That s why I can use it to extract the value of the row of the stateEnteredarray in the finalstatement that displays the results in an alert message. This application of a forloop and array indexes is a common one in JavaScript. Study thecode carefully and be sure you understand how it works. This way of cycling through arraysplays a role not only in the kinds of arrays you create in your code, but also with the arraysthat browsers generate for the document object model. Document objects in arraysIf you look at the documentobject portions of the Quick Reference in Appendix A, you cansee that the properties of some objects are listed with square brackets after them. These are, indeed, the same kind of square brackets you just saw for array indexes. That s because whena document loads, the browser creates arrays of like objects in the document. For example, ifyour page includes two

79Chapter 7Programming Fundamentals, Part IIIf a Web page included these data tables and a way for a user to look up the entry date for agiven state, the page would need a way to look through all of the USStatesentries to find theindex value of the one that matches the user s entry. Then, that index value could be appliedto the stateEnteredarray to find the matching year. For this demo, the page includes a text entry field in which the user types the name of thestate to look up. In a real application, this methodology is fraught with peril unless the scriptperforms some error checking in case the user makes a mistake. But for now, I assume thatthe user always types a valid state name. (Don t ever make this assumption in your Web site spages.) An event handler from either the text field or a clickable button calls a function thatlooks up the state name, fetches the corresponding entry year, and displays an alert messagewith the information. The function is as follows: function getStateDate() { var selectedState = document.getElementById( entry ).value; for ( var i = 0; i < USStates.length; i++) { if (USStates[i] == selectedState) { break; } } alert( That state entered the Union in + stateEntered[i] + . ); } In the first statement of the function, I grab the value of the text box and assign the value to avariable, selectedState. This is mostly for convenience because I can use the shorter vari- able name later in the script. In fact, the usage of that value is inside a forloop, so the scriptis marginally more efficient because the browser doesn t have to evaluate that long referenceto the text field each time through the loop. The key to this function is in the forloop. Here is where I combine the natural behavior ofincrementing a loop counter with the index values assigned to the two arrays. Specificationsfor the loop indicate that the counter variable, i, is initialized with a value of zero. The loop isdirected to continue as long as the value of iis less than the length of the USStatesarray. Remember that the length of an array is always one more than the index value of the lastitem. Therefore, the last time the loop runs is when iis 50, which is both less than the lengthof 51 and equal to the index value of the last element. Each time after the loop runs, thecounter increments by one. Nested inside the forloop is an ifconstruction. The condition tests the value of an elementof the array against the value typed in by the user. Each time through the loop, the conditiontests a different row of the array starting with row zero. In other words, this ifconstructioncan be performed dozens of times before a match is found, but each time the value of iis onelarger than the previous try. The equality comparison operator (==) is strict when it comes to comparing string values. Such comparisons respect the case of each letter. In our example, the user must type thestate name exactly as it is stored in the USStatesarray for the match to be found. In Chapter10, you learn about some helper methods that eliminate case and sensitivity in stringcomparisons. When a match is found, the statement nested inside the ifconstruction runs. The breakstatement is designed to help control structures bail out if the program needs it. For thisapplication, it is imperative that the forloop stop running when a match for the state name
Note: If you are looking for cheap and reliable webhost to host and run your web application check Vision coldfusion web hosting services

78Part IIJavaScript Tutorialcollections is small enough not to severely impact page loading even for dial-up users at28.8 Kbps. In Chapter 30, you also see some syntax shortcuts for creating arrays that reducesource code character counts. Accessing array dataThe array index is the key to accessing an array element. The name of the array and an indexin square brackets evaluates to the content of that array location. For example, after theUSStatesarray is built, a script can display an alert with Alaska s name in it with the follow- ing statement: alert( The largest state is + USStates[1] + . ); Just as you can retrieve data from an indexed array element, so can you change the elementby reassigning a new value to any indexed element in the array. Parallel arraysNow I show you why the numeric index methodology works well in JavaScript. To help withthe demonstration, I generate another array that is parallel with the USStatesarray. Thisnew array is also 51 elements long, and it contains the year in which the state in the corre- sponding row of USStatesentered the Union. That array construction looks like thefollowing: var stateEntered = new Array(51); stateEntered [0] = 1819; stateEntered [1] = 1959; stateEntered [2] = 1912; stateEntered [3] = 1836; … stateEntered [50] = 1890; In the browser s memory, then, are two data tables that you can visualize as looking like themodel in Figure 7-1. I can build more arrays that are parallel to these for items such as thepostal abbreviation and capital city. The important point is that the zeroth element in each ofthese tables applies to Alabama, the first state in the USStatesarray. Figure 7-1:Visualization of two related parallel data tables. “Alabama” “Alaska” “Arizona” “Arkansas” “Wyoming” 18191959191218361890[0] [1] [2] [3] [50] stateEnteredUSStates…. …. ….
Note: In case you are looking for affordable webhost to host and run your servlet application check Vision servlet hosting services

77Chapter 7Programming Fundamentals, Part IIitem in an array, you need to know the name of the array and the index for the row. Becauseindex values start with zero, the total number of items of the array (as determined by thearray s lengthproperty) is always one more than the highest index value of the array. More advanced array concepts enable you to create the equivalent of an array with multiple columns (described in Chapter 30). For this tutorial, I stay with the single- column basic array. Data elements inside JavaScript arrays can be any data type, including objects. And, unlike alot of other programming languages, different rows of the same JavaScript array can containdifferent data types. Creating an arrayAn array is stored in a variable, so when you create an array you assign the new array objectto the variable. (Yes, arrays are objects, but they belong to the core JavaScript languagerather than the document object model.) A special keyword new preceding a call to theJavaScript function that generates arrays creates space in memory for the array. An optionalparameter to the Array()function enables you to specify at the time of creation how manyelements (rows) of data eventually will occupy the array. JavaScript is very forgiving aboutthis because you can change the size of an array at any time. Therefore, if you omit a parame- ter when generating a new array, your script incurs no penalty. To demonstrate the array creation process, I create an array that holds the names of the50states plus the District of Columbia (a total of 51). The first task is to create that arrayandassign it to a variable of any name that helps me remember what this collection of dataisabout: var USStates = new Array(51); At this point, the USStatesarray is sitting in memory like a 51-row table with no data in it. Tofill the rows, I must assign data to each row. Addressing each row of an array requires a spe- cial way of indicating the index value of the row: square brackets after the name of the array. The first row of the USStatesarray is addressed asUSStates[0] To assign the string name of the first state of the alphabet to that row, I use a simple assign- ment operator: USStates[0] = Alabama ; To fill in the rest of the rows, I include a statement for each row: USStates[1] = Alaska ; USStates[2] = Arizona ; USStates[3] = Arkansas ; … USStates[50] = Wyoming ; Therefore, if you want to include a table of information in a document from which a scriptcanlook up information without accessing the server, you include the data in the documentin the form of an array creation sequence. When the statements run as the document loads, by the time the document finishes loading into the browser, the data collection array is builtand ready to go. Despite what appears to be the potential for a lot of statements in a docu- ment for such a data collection, the amount of data that must download for typical array
Note: In case you are looking for affordable webhost to host and run your servlet application check Vision servlet hosting services

76Part IIJavaScript Tutorialnot overridden by a local is available for use inside the function. The expression is accumu- lating HTML to be written to the page, so it ends with a period and a
tag. The final state- ment of the function writes the content to the page. After the function completes its task, the next statement in the Body script writes anotherstring to the page. Because this script statement is executing in global space (that is, notinside any function), it accesses only global variables including those defined in another