Customizing Output Using URL Variables W hen you build a URL for a page, you can add a series of name-value pairs to the end of the URL in the following form: http://my.url/somepage.html?name1=value1&name2=value2& Essentially, these parameters are like variables: named containers for values. In JavaScript, the document object provides the URL property that contains the entire URL for your document, and using some manipulation on this property, you can extract some or all of the URL parameters contained in the URL. The following code displays all URL parameters for the current document: 1. In a script block in the body of a document, separate the current document’s URL at the question mark and store the two parts in the array urlParts: var urlParts = document.URL.split(“?”); 2. Split the part of the URL to the right of the question mark into one or more parts at the ampersand. This places each name-value pair into an array entry in the parameterParts array. var parameterParts = urlParts[1].split(“&”); 3. Output the HTML code to set up a table and display column headers for the table using the document.write method: document.write(“<table border=1 cellpadding=3 Æ cellspacing=0>”); document.write(“<tr>”); document.write(“<td><strong>Name</strong></td><td>Æ <strong>Value</strong></td>”); 4. Start a for loop that loops through each element in the parameterParts array. This means the loop should start at 0 and count up to one less than the length of the array; this is because in an array of 10 elements, the first index is 0 and the last index is 9. for (i = 0; i < parameterParts.length; i ++) { 5. Output HTML to start a table row for each name-value pair: document.write(“<tr>”); 6. Separate the name-value pair at the equal sign, and store the results in the pairParts array. The first entry (at index 0) contains the name of the pair, and the second entry (at index 1) contains the value of the entry: var pairParts = parameterParts[i].split(“=”); note • The logic of the code in this task is simple: Split the string at the question mark, take the part to the right of the question mark and split it at each ampersand, and then take each of the resulting substrings and split them at the equal sign to split the URL parameters between their name and value parts. Using the split method of the string object helps make this process easy. 106 Part 2 Task 52 caution • The code in this task will only work properly if there is at least one URL para- meter passed to the script. When doing this, keep a couple points in mind: First, you must access the file through a Web server and not open it as a local file, and second, you must include at least one name- value pair after the ques- tion mark in the URL. 03 542419 Ch02.qxd 11/19/03 10:01 AM Page 106 tips • One of the powerful fea- tures of any dynamic pro- gramming language for Web pages, including JavaScript, is the ability to pass data between pages and then act on that data in the target pages. One of the most common ways to pass data between pages is to use URL parameters. • Not all characters are valid in URLs. For instance, spaces are not allowed.To handle this, URL parameter values are escaped where these special characters are replaced with codes; for instance, spaces become %20. To really work with your URL parameters, you will want to unencode the values of each parame- ter to change these special codes back to the correct characters. The unescape function returns a string unencoded in this way. • To separate the URL at the question mark, use the split method of the string object,which will return the part to the left of the question mark as the first entry (entry 0) in the array and the part to the right of the question mark that contains the URL para- meters as the second entry in the array (entry 1). 7. Display the name and value in table cells. Make sure the value of the pair is unencoded with the unescape function: document.write(“<td>” + pairParts[0] + “</td>”); document.write(“<td>” + unescape(pairParts[1]) + “</td>”); 8. Output HTML to close the table row, and close the loop with a clos- ing curly bracket: document.write(“</tr>”); } 9. Output HTML to complete the table, and then close the script with a closing script tag. The final source code should look like Listing 52-1, and when viewed in the browser, if the URL has para- meters, they will be displayed in a table like the one illustrated in Figure 52-1. <script language=”JavaScript”> var urlParts = document.URL.split(“?”); var parameterParts = urlParts[1].split(“&”); document.write(“<table border=1 cellpadding=3 Æ cellspacing=0>”); document.write(“<tr>”); document.write(“<td><strong>Name</strong></td><td>Æ <strong>Value</strong></td>”); for (i = 0; i < parameterParts.length; i ++) { document.write(“<tr>”); var pairParts = parameterParts[i].split(“=”); document.write(“<td>” + pairParts[0] + “</td>”); document.write(“<td>” + unescape(pairParts[1]) + Æ “</td>”); document.write(“</tr>”); } document.write(“</table>”); </script> Listing 52-1: A script to display URL parameters in a table. Figure 52-1: Displaying URL parameters as name-value pairs in a table. Outputting to the Browser 107 Task 52 03 542419 Ch02.qxd 11/19/03 10:01 AM Page 107 Dynamically Generating a Menu T o illustrate some of the power of dynamic output combine with URL parame- ters, this task shows how to build a simple menu system. In this example, a single JavaScript page handles a menu of five choices and renders appropriate output for each of the five choices. This script assumes that the user’s current selection is passed to the script through the URL parameter named choice. The actual practical implementa- tion is as follows; this code assumes the script is in a file called menu.html: 1. Start a script block with the script tag: <script language=”JavaScript”> 2. Create a variable called choice to hold the user’s selection; by default, the value is zero, which indicates no selection: var choice = 0; 3. Split the URL into the array urlParts at the question mark: var urlParts = document.URL.split(“?”); 4. Use the if statement to check if, in fact, there are any URL parame- ters. If there are, then the length of the urlParts array should be greater than 1: if (urlParts.length > 1) { 5. Split the list of URL parameters into their parts, and check if the pair is named choice; if it is, store the value of the pair in the choice array created earlier: var parameterParts = urlParts[1].split(“&”); for (i = 0; i < parameterParts.length; i++) { var pairParts = parameterParts[i].split(“=”); var pairName = pairParts[0]; var pairValue = pairParts[1]; if (pairName == “choice”) { choice = pairValue; } } 6. Close the if statement with a closing curly bracket: } notes • The logic of the script is straightforward. Extract the choice parameter from the document’s URL. Next, dis- play a menu of five choices; the choices should be clickable links, except for the current selected choice. Finally, display the content for the selected choice; if this is the first visit to the page, no choice is selected and no content other than the menu in the previous step should be displayed. • To extract the choice URL parameter, simply extract the name and value into the variables pairName and pairValue. Check if pairName is the choice URL parameter, and if it is, assign the value of pairValue to the choice variable. • For each menu entry you need to check if the vari- able choice indicates that selection. If it does, display the menu entry as regular text; otherwise, make a link back to the same page, with the URL parameter choice set appropriately. 108 Part 2 Task 53 03 542419 Ch02.qxd 11/19/03 10:01 AM Page 108 tip • When working with JavaScript that manipulates URL parameters, you must be accessing the page through a Web server using a URL such as http:// my.url/test.html and not directly using a local file path such as c:\myfiles\test. html . URL parameters are not available with file path access to files. 7. The next step is to display the menu itself. This requires five if statements: one for each menu entry. Each if statement looks like the following, adjusted for a particular choice and the appropriate output for that choice. The result is a menu that might look like Figure 53-1. if (choice == 1) { document.write(“<strong>Choice 1</strong><br>”); } else { document.write(“<a href=’menu.html?choice=1’>Æ Choice 1</a><br>”); } Figure 53-1: The menu as displayed when no choice is selected. 8. Display a divider to separate the menu from the body text of the page using the document.write method: document.write(“<hr>”); 9. Use five if statements, which test the value of the choice variable to display the appropriate body content. Each if statement should look like the following but be adjusted for the appropriate choice value and output: if (choice == 1) { document.write(“Body content for choice 1”); } 10. Close the script with a closing script tag; when viewed in a browser, a page might look like Figure 53-2: </script> Figure 53-2: A completed page with Choice 3 selected. Outputting to the Browser 109 Task 53 cross-reference • Refer to Task 52 for a discussion of how to split a URL into its parts and extract the name- value pairs of the URL parameters. 03 542419 Ch02.qxd 11/19/03 10:01 AM Page 109 Replacing the Browser Document with a New Document Y ou can replace the browser document with a new document by using two main methods of the document object: • document.open: Opens a new document stream • document.close: Closes a document stream opened by document.open To use these methods, you use a structure like the following: document.open(); One or more document.write or document.writeln commands document.close(); The following example creates a page with a JavaScript function that displays a new document using document.open and document.close. The user can click on a link to trigger the function and display the new page without accessing the server. 1. Start a script block with the script tag: <script language=”JavaScript”> 2. Start a new function called newDocument: function newDocument() { 3. Open a new document stream with document.open: document.open(); 4. Write out the content of the new document: document.write(“<p>This is a New Document.</p>”); 5. Close the document stream with document.close: document.close(); 6. Close the function with a closing curly bracket: } 7. Close the script with a closing script tag: </script> note • In addition to outputting content into the current document stream that the browser is rendering, you can also use the document object to replace the currently dis- played object with new content without sending the user to the server for the new document. 110 Part 2 Task 54 03 542419 Ch02.qxd 11/19/03 10:01 AM Page 110 8. In the body of the HTML document, include a link with an onClick event handler that calls the newDocument function; a sample final page is shown in Listing 54-1. <head> <script language=”JavaScript”> function newDocument() { document.open(); document.write(“<p>This is a New Document.</p>”); document.close(); } </script> </head> <body> <p>This is the original document.</p> <p><a href=”#” onClick=”newDocument()”>Display New Æ Document</a></p> </body Listing 54-1: This code displays a second document stream to the browser. 9. Open the document in a browser. Initially you will see the body text of the HTML document as in Figure 54-1. After clicking on the link, you should see the content output by the newDocument function. Figure 54-1: The original HTML page. Outputting to the Browser 111 Task 54 cross-reference • Event handlers are discussed in Part 9.The onClick event handlers are introduced in Task 220. 03 542419 Ch02.qxd 11/19/03 10:01 AM Page 111 Redirecting the User to a New Page U nlike the document.URL property, which is static, the window.location property allows you to actually reset the location associated with a window and effectively redirect users to a new URL. For instance, consider the following simple page: <head> <script language=”JavaScript”> window.location = “http://www.yahoo.com/”; </script> </head> <body> <p>You are here now</p> </body> In this case, the text “You are here now” will not even display in the browser; as soon as the page loads, the user will immediately be directed to the Yahoo! Web site. The following script leverages the window.location property to allow users to enter the location they would like to visit in a form field and then takes them there when they click on the Go button: 1. Start a form with the form tag. This form will never be submitted anywhere, so it doesn’t actually need method or action attributes: <form> 2. Create a text box named url: Enter a URL: <input type=”text” name=”url”> 3. Create a button with the label “Go”. This form control should be of type button and not type submit, since the button is not being used to submit the form anywhere: <input type=”button” value=”Go”> 4. Add an onClick attribute to the button’s tag. The value of this attribute is HTML code to assign the value stored in the url text field to the window.location property: <input type=”button” value=”Go” onClick=”window.location Æ = this.form.url.value”> 5. Close the form with a closing form tag so that the complete form looks like the following: <form> Enter a URL: <input type=”text” name=”url”> notes • The window object pro- vides properties and meth- ods for manipulating the current window. One of the properties is the location property, which contains the URL of the document displayed in the current window. • The onClick attribute takes as its value JavaScript code to execute when the user clicks on the button. 112 Part 2 Task 55 03 542419 Ch02.qxd 11/19/03 10:01 AM Page 112 tip • In an event handler used for a form such as onClick, you can refer to the current form as this.form. That means this.form.url refers to the text field named url, and this.form.url. value refers to the text entered in the url text field. <input type=”button” value=”Go” Æ onClick=”window.location = this.form.url.value”> </form> 6. Store the form in an HTML file, and open that file in a Web browser. You will see a form. 7. Enter a URL in the form’s text field, as illustrated in Figure 55-1. Figure 55-1: Entering a URL in the form. 8. Click on the Go button, and you will be redirected to the URL you entered, as shown in Figure 55-2. Figure 55-2: Redirecting to the new URL. Outputting to the Browser 113 Task 55 cross-reference • This task accesses data in forms and uses event han- dlers. Part 4 of the book addresses working with forms, while Part 9 dis- cusses event handlers. 03 542419 Ch02.qxd 11/19/03 10:01 AM Page 113 Creating a “Page Loading ” Placeholder T his task looks at how to create a “page loading” placeholder that pops up in a separate window while the main document is loading. When the main docu- ment finishes loading, the placeholder window will close. This task uses two methods of the window object plus one event handler: • window.open: Opens a new window and loads a document in that window • window.close: Closes a window • onLoad: Used in the body tag to trigger JavaScript to execute when a document continues loading The following steps create the placeholder window: 1. Create an HTML file to serve as the content of the “page loading” placeholder window. Any content you want the user to see in that window should be placed in this file. Name the file holder.html. The following is a simple file that tells the user the main page is loading: <html> <head> <title>Page Loading </title> </head> <body> <strong> Page Loading Please Wait </strong> </body> </html> 2. Create the HTML file for your main document in the same direc- tory. For this task, the file is named mainpage.html. A simple mainpage.html file might look like this: <html> <head> <title>The Main Page</title> </head> <body> <p>This is the main page</p> </body> </html> notes • Some sites create “page loading” placeholder pages.These are typically used when loading a page that will take a long time to load either because of the amount of content being loaded or, more commonly in the case of dynamic content, when processing the page for delivery to the user will take a long time. • You can use a number of strategies for creating a “page loading” placeholder. Such strategies can involve content being pushed from the server, or they can be entirely implemented in JavaScript on the client. This task takes the latter approach. 114 Part 2 Task 56 03 542419 Ch02.qxd 11/19/03 10:01 AM Page 114 tip • This type of placeholder doesn’t make much sense for a document as short as mainpage.html. In this case, the placeholder will appear and disappear almost immediately. You really need a long, compli- cated HTML document or a dynamic document that takes time to generate to make this type of place- holder worthwhile. 3. In mainpage.html, add a script block to the header of the document: <script language=”JavaScript”> </script> 4. In the script block, open a new window with window.open. This method takes three arguments: the file to load in the window, the name of the window, and a series of parameters that define the features of the window—in this case, the width and height of the window are set to 200 pixels. The method returns a reference to the window’s objects so that it is possible to manipulate the window later. This reference is stored in the variable placeHolder: var placeHolder = window.open(“holder.html”,”Æ holderWindow,”width=200,height=200”); 5. Add an onLoad attribute to the body tag: <body onLoad=””> 6. As the value of the onLoad attribute, use placeHolder.close(). This closes the placeholder window once the main document finishes loading. The final mainpage.html code looks like Listing 56-1. <html> <head> <script language=”JavaScript”> var placeHolder = Æ window.open(“holder.html”,”placeholder”,”width=200,Æ height=200”); </script> <title>The Main Page</title> </head> <body onLoad=”placeHolder.close()”> <p>This is the main page</p> </body> </html> Listing 56-1: Integrating the placeholder code into an HTML document. 7. Make sure holder.html and mainpage.html are in the same directory and then load mainpage.html in your browser window. A window with the contents of holder.html should appear above the main window and then disappear as soon as the main window finishes loading. Outputting to the Browser 115 Task 56 03 542419 Ch02.qxd 11/19/03 10:01 AM Page 115 [...]... Triggering a Rollover in a Different Location with a Link Task 75: Using Image Maps and Rollovers Together Task 76: Generating Animated Banners in JavaScript Task 77: Displaying a Random Banner Ad 118 Task 57 Part 3 Accessing an HTML-Embedded Image in JavaScript J note • The images array contains one entry for image in the order in which the images are specified in your code Therefore, the first image’s... Math.floor performs a function similar to rounding in that it removes the decimal part of a number The difference is that the result of rounding can be the next highest or next lowest integer value, depending on the size of the decimal portion of the number With Math.floor the result is always the next lowest integer Therefore, rounding 2.999 would result in the integer 3, but applying Math.floor to... rounding in that it removes the decimal part of a number The difference is that the result of rounding can be the next highest or next lowest integer value, depending on the size of the decimal portion of the number With Math.floor the result is always the next lowest integer Therefore, rounding 2.999 would result in the integer 3, but applying Math.floor to the same number would result in the integer... Task 66: Using a Function to Trigger a Rollover Task 67: Using Functions to Create Multiple Rollovers in One Page Task 68: Creating a Simple Rollover Menu System Task 69: Creating a Slide Show in JavaScript Task 70: Randomizing Your Slide Show Task 71: Triggering Slide Show Transitions from Links Task 72: Including Captions in a Slide Show Task 73: Testing if an Image Is Loaded Task 74: Triggering a Rollover... the images array contains one entry for image in the order in which the images are specified in your code Therefore, the first image’s object is document images[0], the second is document.images[1], and so on This only applies to images in your HTML document Image objects created in JavaScript as shown in this task do not appear in the images array 5 Include a link for displaying the height, and add... clicking on (especially in the case of numerous images in close proximity to each other in a complex layout) 128 Task 62 Part 3 Using Multiple Rollovers in One Page B uilding on the rollover effect illustrated in Task 61, this task shows how the principle can be extended to support multiple rollovers in a single page This is useful when you are building a menu out of rollover images The following steps. ..Part 3: Images and Rollovers Task 57: Accessing an HTML-Embedded Image in JavaScript Task 58: Loading an Image Using JavaScript Task 59: Detecting MouseOver Events on Images Task 60: Detecting Click Events on Images Task 61: Switching an Image Programatically Task 62: Using Multiple Rollovers in One Page Task 63: Displaying a Random Image Task 64: Displaying Multiple Random Images Task 65: Using a... to the same number would result in the integer 2 Notice how the img tag is built out of two strings combined with an array variable; the combining is done with plus signs When you are working with string values, plus signs perform concatenation of strings, as discussed in Task 15 Concatenation means that “ab” + “cd” results in “abcd” The script created in the following steps illustrates this process:... dismiss the dialog box It takes a single string as an argument, which should be the message to be displayed in the dialog box This method is discussed in Task 25 120 Task 58 Part 3 Loading an Image Using JavaScript I n addition to creating Image objects by loading an image in HTML, you can create an Image object programmatically in JavaScript Loading an image in JavaScript is a two-step process: 1... and code for creating and triggering each rollover becomes noticeably simpler The task of code creation, code management, and code accuracy becomes increasingly daunting as the number of rollover images in a document increases At some point, the task of ensuring bugfree code and debugging becomes problematic The approach in this task is aimed at mitigating this to a degree The following steps show . main window and then disappear as soon as the main window finishes loading. Outputting to the Browser 115 Task 56 03 542419 Ch02.qxd 11/19/ 03 10: 01 AM Page 115 03 542419 Ch02.qxd 11/19/ 03 10: 01. set appropriately. 108 Part 2 Task 53 03 542419 Ch02.qxd 11/19/ 03 10: 01 AM Page 108 tip • When working with JavaScript that manipulates URL parameters, you must be accessing the page through a Web server using a. new content without sending the user to the server for the new document. 110 Part 2 Task 54 03 542419 Ch02.qxd 11/19/ 03 10: 01 AM Page 110 8. In the body of the HTML document, include a link with an onClick event