JavaScript 1.5 - Lab 8 pdf

Lab 8: Event Handling 8-30 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 8: Event Handling 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 SpreadSheet.html, SpreadSheet.js, and SpreadSheet.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 8 Overview JavaScript 1.5 8-31 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 8 Overview In this lab you will learn how to add simple convenience functionality into an application by incorporating events. To complete this lab, you will need to work through two exercises:  Mouse Interception  Title Cell 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. Lab 8: Event Handling 8-32 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Mouse Interception Objective In this exercise, you‘ll create the guts of your simple mouse listener event. The application in question is the provided spreadsheet application, SpreadSheet.html and SpreadSheet.js. Feel free to browse through and see how the entire application operates. The goal of this exercise is to create a mouseover listener on the form, so that the current cell that the mouse pointer is over reports its name to the status bar. Things to Consider  You will want to use functions to separate this new functionality from the already functioning code.  Event handlers should be initialized after the page loads, so create a function that fires with the body‘s onload event handler.  The status bar is accessed using window.status.  Remember Internet Explorer and W3C compliant browsers handle event objects differently!  Unless it is helpful to what you are scripting outside of this class, do not worry about Netscape 4 for this exercise. Step-by-Step Instructions 1. Open SpreadSheet.js in your editor. Look over the code briefly to get an idea of what is going on. First, you will create a function to initialize the event listeners. Right under the global variables, abc and formname, create a function called initEvents(). You will want to use the formname to create a reference to the form using the eval method, with the statement var elemnt = eval(“document.” + formname);. On the next line, define the event handler, using the statement elemnt.onmouseover = updateStatus;. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Mouse Interception JavaScript 1.5 8-33 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. var abc = "abcdefghijklmnopqrstuvwxyz"; var formname = "ssform"; function initEvents() { var elemnt = eval("document." + formname); elemnt.onmouseover = updateStatus; } 2. For Netscape 6 and W3C compliant browsers, you should add an if statement with the condition (elemnt.addEventListener). This is known as object detection. Basically if the if elemnt has the method addEventListener, then this is a W3C DOM, like Mozilla 1+. On the first statement in the if block add the mouseover event listener: element.addEventListener(“mouseover”, updateStatus, true);. Finally, add one last statement to the if block, elemnt.onmouseover = null;, to guarantee that the new event listener you created will function in Netscape 6+ browsers (as well as in Opera). function initEvents() { var elemnt = eval("document." + formname); elemnt.onmouseover = updateStatus; if (elemnt.addEventListener) { elemnt.addEventListener("mouseover", updateStatus, true); elemnt.onmouseover = null; } 3. Create a nested function inside of initEvents() called updateStatus(evnt). You will recall from the chapter that, for browsers that implement the W3C object model, your event handling functions must include a parameter that represents the event the function will catch. Within the updateStatus()function, create a new variable called trgt, and add an if/else block to test the event model type for Internet Explorer compatibility, using the statement if (window.event). Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 8: Event Handling 8-34 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. if (elemnt.addEventListener) { elemnt.addEventListener("mouseover", updateStatus, true); elemnt.addEventListener("click", setTitle, true); elemnt.onmouseover = null; elemnt.onclick = null; } function updateStatus(evnt) { var trgt; if(window.event) { } else { } } 4. Within the if block, assign window.event to the evnt variable to make sure evnt is defined properly if the client browser is Internet Explorer. On the next line, set trgt to reference the event‘s target, using the statement trgt = evnt.srcElement;. If the client‘s browser is not Internet Explorer, then the else block will execute, and trgt should be set to reference evnt.target. function updateStatus(evnt) { var trgt; if(window.event) { evnt = window.event; trgt = evnt.srcElement; } else { trgt = evnt.target; } } 5. Create an if block with the condition trgt.type == “text” && trgt.name.match(/cell/g)). This ensures that you are in a textfield within the spreadsheet, which has ―cell‖ within the name. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Mouse Interception JavaScript 1.5 8-35 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. function updateStatus(evnt) { var trgt; if(window.event) { evnt = window.event; trgt = evnt.srcElement; } else { trgt = evnt.target; } if (trgt.type == "text" && trgt.name.match(/cell/g)) { } } 6. Finally, inside of the if /else statement, populate the status bar with the target‘s name using the statement window.status = trgt.name;. if (trgt.type == "text" && trgt.name.match(/cell/g)) { window.status = trgt.name; } } 7. Test the application by running SpreadSheet.html in your browser. When you mouseover a cell, its name should appear in the status bar, as shown in Figure 7. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 8: Event Handling 8-36 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Figure 7. Cell 1_1 shows in the status bar in Mozilla. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Title Cell Info JavaScript 1.5 8-37 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Title Cell Info Objective In this exercise, you will make the title show the information provided in the cell on the window title area. Capturing the onclick event, the title will be adjusted to inform the user of the page they are on, and the current cell‘s information. Things to Consider  With text, password, and textarea objects, the onclick event bubbles up through the document hierarchy, or captures downwards through the hierarchy. However, onBlur and onChange only fire at the object level.  Prior to Internet Explorer 4 and Netscape Navigator 6, you can only read the document title.  The cell‘s onclick event will still fire, even when you catch it higher up in the document.  You will need to use a provided method, getNumAlpha(cell column number) to determine what letter(s) the current column is. (A – ZZZZ and beyond). Step-by-Step Instructions 1. This exercise builds on the functionality of the previous exercise. While the contents of updateStatus are similar to the function needed for this exercise, to reduce confusion, updateStatus will be copied to a new function called setTitle. Remove the line that sets the window.status. function setTitle(evnt) { var trgt; if(window.event) { evnt = window.event; trgt = evnt.srcElement; } else { trgt = evnt.target; } Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 8: Event Handling 8-38 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. if (trgt.type == "text" && trgt.name.match(/cell/g)) { window.status = trgt.name; } } 2. Inside of the second if/else block, the one that checks for the cell type and name, start a new string: var strTitle = “SpreadSheet: ” and then separate the properties located in the target cell‘s name, using the statement var id = trgt.name.substring(4, (trgt.name.length));. if (trgt.type == "text" && trgt.name.match(/cell/g)) { var strTitle = "SpreadSheet: "; var id = trgt.name.substring(4, (trgt.name.length)); } 3. Redefine your code so that the variable id refers to an array of cell information by splitting itself into its component elements, using the statement id = id.split(“_”);. This places the column number in id[0] and the row number in id[1]. if (trgt.type == "text" && trgt.name.match(/cell/g)) { var strTitle = "SpreadSheet: "; var id = trgt.name.substring(4, (trgt.name.length)); id = id.split("_"); } 4. Append cell information onto the strTitle with the statement strTitle += “ Current Cell: ” + getNumAlpha(id[0]) + id[1];. The function getNumAlpha() returns the column letter equivalent of the column number you pass in. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Title Cell Info JavaScript 1.5 8-39 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. if (trgt.type == "text" && trgt.name.match(/cell/g)) { var strTitle = "SpreadSheet: "; var id = trgt.name.substring(4, (trgt.name.length)); id = id.split("_"); strTitle += " Current Cell: " + getNumAlpha(id[0]) + id[1]; } 5. Add an if statement to the block with the condition (trgt.value). For the first statement in the new if block, add the value of the cell to the title string: strTitle += “ – Value: ” + trgt.value;. id = id.split("_"); strTitle += " Current Cell: " + getNumAlpha(id[0]) + id[1]; if(trgt.value) { strTitle += " Value: " + trgt.value; } 6. At the end of the if block, add another if statement with the condition (trgt.formula), then for the first line in that block add the formula information to the title: strTitle += “ – Formula: (” + trgt.formula + “)”;. if(trgt.value) { strTitle += " Value: " + trgt.value; } if(trgt.formula) { strTitle += " Formula: (" + trgt.formula + ")"; } 7. Finally, add a line immediately following the if block to change the window title to reflect the new title string, using the statement document.title = strTitle;. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. [...]... Figure 8 Figure 8 Mouse clicked on cell C1, with the formula in the Mozilla browser Feb 19 20 08 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- 4 1 Lab 8: Event Handling Feb 19 20 08 3:29PM Dao Dung dungdq@edt.com.vn 8- 4 2... 19 20 08 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 9-7 Error Handling . step-by- step instructions. Feb 19 20 08 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 8: Event Handling 8- 3 2 JavaScript 1. 5 Copyright. source files instead. Feb 19 20 08 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 8 Overview JavaScript 1. 5 8- 31 Copyright © 2003 by. evnt.target; } Feb 19 20 08 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 8: Event Handling 8- 3 8 JavaScript 1. 5 Copyright © 2003