JavaScript 1.5 - Lab 7 pptx

Windows and Frames 7-22 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Answers 1. How do you open a new window from within your scripts? By invoking the window.open() method. 2. True/False: You must always assign the return value of window.open() to a variable. False. It is perfectly acceptable to not assign the return value to a variable if you don’t intend to reference the new window in your scripts. 3. What is the easiest way to dynamically create content for a spawned window? By building a dynamic HTML string that defines the content of the new page and writing it to the new window through its window.document.write() method. 4. Which property enables a new window to reference the window that created it? The opener property 5. What is the term for a frame that is created by a frameset? Child frame 6. Which property enables a frame to access the document that created it? The parent property 7. Which property enables a frame to access the highest object in its object hierarchy? The top property 8. True/False: An iframe is constrained to the edges of the document area of a window. False. An iframe can float anywhere within the document that you chose to define it. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. The Window Object JavaScript 1.5 7-23 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 7: Windows and Frames TIP: Because this lab includes a great deal of typed code, we’ve tried to make it simpler for you. You will find all the code in Windows and Frames.html, monthFrame.html, SimpleCalendar.html, SimpleCalendar.js, and SimpleCalendar.css in the same directory as the sample project. To avoid typing the code, you can cut/paste it from the source files instead. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 7: Windows and Frames 7-24 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 7 Overview In this lab you will learn how to use frames and spawned windows effectively. Through the course of the lab, you will improve upon a simple calendar by adding a date selection frame and pop-up info about a limited list of holidays. To complete this lab, you will need to work through two exercises:  The Date Selection Frame  Important Date Pop-Up Info Each exercise includes an “Objective” section that describes the purpose of the exercise. You are encouraged to try to complete the exercise from the information given in the Objective section. If you require more information to complete the exercise, the Objective section is followed by detailed step-by- step instructions. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. The Date Selection Frame JavaScript 1.5 7-25 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. The Date Selection Frame Objective In this exercise, you’ll create a frameset to contain your date selection frame, and a frame to contain the calendar. You’ll also create the controls for your date selection frame, and the functions that will update the calendar frame. Things to Consider  Rather than overwriting an entire html page, you can overwrite just the html within a <div> tag by modifying the innerHTML property of the <div> tag. The way in which Internet Explorer and Netscape Navigator support this property differ, so examine monthFrame.html to get a feel for the differences. This can prevent you from overwriting functions and variables that you need to persist within the page.  The scope of items in a .js file is the same as if the text in that file were substituted for the script tag in which it is referenced. Therefore, accessing items in a .js file is the same as accessing those in the containing XHTML file. Step-by-Step Instructions 1. Open the incomplete AdvancedCalendar.html file and look for the comment that indicates Exercise 1. 2. In the space noted by the comment, add the XHTML code necessary to create a frameset that defines two frames, organized in columns. The left frame should use the provided monthFrame.html file as its source, while the right frame should use the provided SimpleCalendar.html file as its source. The exact dimensions of each frame are up to you, but you should make sure that each frame fully displays its controls. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 7: Windows and Frames 7-26 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. </head> <frameset cols="15%,85%"> <frame name="monthFrame" src="monthFrame.html"> <frame name="calendarFrame" src="SimpleCalendar.html"> </frameset> </html> 3. Next, open the incomplete monthFrame.html file and locate the comments that indicate Exercise 1. Within the function populateDays(), you must first determine how many days are in the selected month so that you can populate the select list with the available days of the month. There is already a function called getMonthLen() in the provided SimpleCalendar.js file that does this, so rather than rewriting it, simply call the existing function and assign its return value to a new variable named monthLength. var monthLength = parent.calendarFrame.getMonthLen( document.controls.month.selectedIndex, document.controls.year.value); 4. Examine the function replaceCalendar(), which is intended to replace the HTML within the <div> tag of SimpleCalendar.html with code that defines the new calendar. This code is different than the existing statement within the original file, in that it passes the date specified by the controls in the left frame into the call to buildCalendar() in the right frame. The replaceCalendar() function has already defined the left side of the assignment statement needed, which will be different based on which browser is being used to view the page. You must combine the string in the divRef variable with a string that defines the right side of the assignment statement. This will be the actual text that you want to go in the <div> tag of the right frame, which extends the original, by adding a date value. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. The Date Selection Frame JavaScript 1.5 7-27 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. eval(divRef + " = top.calendarFrame.buildCalendar(" + "new Date(" +document.controls.year.value + ", " + document.controls.month.selectedIndex + ", " + document.controls.day.value + "))"); 5. Open the AdvancedCalendar.html file in your browser and test the functionality of both frames (see Figure 3). Figure 3. The Advanced Calendar in Internet Explorer. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 7: Windows and Frames 7-28 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Important Date Pop-Up Info Objective In this exercise, you’ll create an array of information about important dates and display the info for each date in a new window whenever the user clicks on that date. Things to Consider  This example only considers events that happen on the same date every year. If you want to consider roving holidays, feel free to adapt the example once you are done. Step-by-Step Instructions 1. Open the incomplete SimpleCalendar.js file, and look for the comments indicating Exercise 2. 2. Examine the dateInfo array at the beginning of the file, which is the data structure that the important date information is to be stored in. The file provides you with three sample entries, but you should feel free to add your own dates, such as important birthdays. The format that we set for each record in the array follows the pattern: date(mmdd):Name(text):Description(text). Examine the entries provided for a practical example. Since all of the information to be stored in the array will be strings, this will make it easier for you to manipulate each record and access multiple pieces of information. 3. Complete the displayDateInfo() function defined at the end of the file. The first thing that you will want to do is to open a new window, which won’t need much space to display the date information: //Open the new window. var infoWindow = window.open("","infoWindow", "height=200,width=400,dependent"); 4. Notice that displayDateInfo() takes three parameters, m, d, and y, which represent the month, day, and year of the date that the user selects. Since the first portion of each record in the dateInfo array is the month and the Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Important Date Pop-Up Info JavaScript 1.5 7-29 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. day in mmdd format, you may need to pad one or both of the m and d parameters to be two digits each. TIP: Since the parameter values are being passed as integers, you may want to force a conversion to string values, or else any attempt to concatenate the two strings with the addition operator will add the integer values of the two parameters. //If m and d have only a single digit, pad them with a //leading 0. var mStr = "" + m; var dStr = "" + d; if (mStr.length < 2) { mStr = "0" + mStr; } if (dStr.length < 2) { dStr = "0" + dStr; } 5. Next, within displayDateInfo(), begin constructing a string that contains the XHTML for the new page. Focus on the tags up to the <body> tag, ensuring that you specify a title: //Construct the HTML string var infoHTML = ""; infoHTML += "<?xml version=\"1.0\" encoding="; infoHTML += "\"utf-8\"?>"; infoHTML += "<!DOCTYPE html public"; infoHTML += "\"-//W3C//DTD XHTML 1.0 Strict//EN\""; infoHTML += "\http://www.w3.org/TR/xhtml1/"; infoHTML += "DTD/xhtml1-strict.dtd\">"; infoHTML += "<html xmlns=\http://www.w3.org"; infoHTML += "/1999/xhtml\" "; infoHTML += "xml:lang=\"en\" lang=\"en\"><head>"; infoHTML += "<title>Date Details</title>" infoHTML += "<body>"; Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 7: Windows and Frames 7-30 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. 6. Next, add a string to the XHTML string that displays the date in an <h3> tag. //Display the date, no matter what. infoHTML += "<h3>" + m + "/" + d + "/" + y + "</h3>"; 7. The next step within displayDateInfo() is to write a for loop that iterates through the dateInfo array and check if the mmdd portion of the string in any of the records match the month and day that were passed in as parameters. If there is a match, then you should add the date info to the XHTML string and break out of the function. You can get the special name of the date, as well as the descriptive text for the date, out of the record in discrete elements by using the string.split() method on any matching record in dateInfo. //Iterate through the dateInfo array and check for a //match on the date. for (var i = 0; i < dateInfo.length; i++) { if (dateInfo[i].substring(0,4) == mStr + dStr) { //If a matching record is found, split the //strings within based on the ":" delimiter //and store the values in a new array. var dateRecord = dateInfo[i].split(":"); //Add the date details to the HTML string. infoHTML += dateRecord[1]; infoHTML += "<br>"; infoHTML += dateRecord[2]; infoHTML += "<br>"; break; } } 8. Next, finalize the XHTML string to close the <body> and <html> tags: infoHTML += "</body>"; infoHTML += "</html>"; Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Important Date Pop-Up Info JavaScript 1.5 7-31 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. 9. To finalize the body of displayDateInfo(), add a statement that writes the XHTML string that you constructed to the new window. Don’t forget to close the document stream. //Write the information to the new window. infoWindow.document.write(infoHTML); infoWindow.document.close(); 10. Finally, you need to have the calendar call your new function whenever the user clicks on a date. This is done in two places, as the cells of the first row are generated separately from the rest of the rows. Look for the sections where the HTML string that defines the cells is generated, and change the onClick event for both to call displayDateInfo(), passing the required parameters. Be careful with embedded quotes in your string construction. html += "\" onmouseover=\"" + "this.style.cursor='hand'" + " \" onclick=\"displayDateInfo(" + year + ", " + (date.getMonth() + 1) + ", " + (c + 1) + ") " + "\">" + (c + 1) + "</td>"; // And: html += "\" onmouseover=\"" + "this.style.cursor='hand'" + " \" onclick=\"displayDateInfo(" + year + ", " + (date.getMonth() + 1) + ", " + p + ") " + "\">" + p + "</td>"; 11. Test the exercise by loading AdvanceCalendar.html, setting the date to one of the special dates that you added to the array, and clicking on that date in the calendar. If you were successful, you should see a description for that day pop-up in a new window (see Figure 4). If there are no details for that date in the array, then just the date will display in the new window. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. [...].. .Lab 7: Windows and Frames Figure 4 Pop-up display for Christmas Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 7- 3 2 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly... Dung dungdq@edt.com.vn JavaScript 1.5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 8-1 1 Event Handling function sendEvent(evnt) { alert("Target:... it Consider the following code: Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn JavaScript 1.5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 8-1 7 Event Handling function showEventNN4Cap(evnt) { alert("NN4 Target: " + evnt.target.name);... about the actual event object?‖ Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 8-1 4 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited Event Objects Event Objects When you script event-handling routines, it will come in handy to know what the various properties... are not defined within the HTML page, you need to script them: window.onclick = wine; document.onclick = doc; function wine() { alert("window"); }... dungdq@edt.com.vn 8-1 6 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited Event Objects Figure 6 A Netscape Navigator 4+ event passing In contrast, the following code will generate an error because the event is not defined: ... Event() object Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn JavaScript 1.5 For product evaluation only– not for distribution or commercial use Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 8-1 Event Handling Popular Browser Event Models When you create interactive Web pages in JavaScript, it is important to understand the concept of... mousetrail Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 8-2 4 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited Event Types Keyboard Event Types: text, password, & textarea The following event types are available to help your scripts deal with keyboard events:... behavior when the window.onClick event is triggered in Netscape Navigator 4 Figure 3 Netscape Navigator 4 event example Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 8-8 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited Popular Browser Event Models When you script . step-by- step instructions. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. The Date Selection Frame JavaScript 1. 5 7- 25 Copyright. files instead. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 7: Windows and Frames 7- 2 4 JavaScript 1. 5 Copyright © 2003. its controls. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 7: Windows and Frames 7- 2 6 JavaScript 1. 5 Copyright © 2003