JavaScript Debugging JavaScript 1.5 9-27 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 9: Error 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 JMartSale.html and JMartSale.js, 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 9: Error Handling 9-28 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 9 Overview In this lab you will learn how to insert simple error handling into the JMart script and to throw custom error messages as well as catching basic JavaScript messages. To complete this lab, you‟ll need to work through three exercises, and optionally, the third exercise for the Venkman Debugger: Bullet-Proof Functions Nested Try/Catch Venkman Test 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. Bullet-Proof Functions JavaScript 1.5 9-29 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Bullet-Proof Functions Objective In this exercise, you will set up error handling in the two main functions of the JMart application. Most functionality will be encapsulated, and each try/catch block will utilize a finally block as well. Things to Consider While this exercise captures almost any functionality, it is not necessary to wrap an entire function into try/catch blocks when the code obviously will not produce errors, such as in default variable declarations. You can throw any object as an error. It is in better style to actually throw an error of type Error() object: var customerror = new Error(„error message‟);. To help ensure cross-browser compatibility, stick to using the basic name and message properties of an error object. Step-by-Step Instructions 1. Open JMartSale.js in this lab‟s directory. JMartSale.html contains a form and a Click for new products! button, which launches the main script. You will not have to edit this file; you will simply use it to test the application. 2. The first task is to modify the code in such a way as to break the application. Under the categories variable declaration near the top of JMartSale.js, add another line to break it: categories = “”. This will not throw a JavaScript error, but will produce undesirable results in the alert when the script executes. This is because the application assumes that the categories variable references a valid string object, and encounters problems when it tries to perform methods on the empty string that categories references. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 9: Error Handling 9-30 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. <! //J-Mart Stock Display var categories = "Batteries,Soap,Magazines,Tires"; categories = ""; 3. To bullet-proof the functions, it is essential to determine where they are most likely to break. In the createArray() function, the weak spots are the incoming parameters. In showArray(), the weak spot is the call to createArray(), because a broken or null array could be returned. Surround the entire contents of the createArray() function in a try block, followed by a catch block and a finally block. function createArray(catlist, products, delim) { try { // surround the current contents of the // createArray()function in the try block } catch() { } finally { } } 4. Move the line return aresult; into the finally block. The statement in the finally block is guaranteed to execute, regardless of whether an error occurs or not. function createArray(catlist, products, delim) { try { // contents of original createArray() function } catch() { } finally { return aresult; } } 5. For the catch block, specify err as the error parameter that is passed to the catch method, catch (err). Within the catch block, add an alert: createArray (parent error handler) threw “ + err.name + “:\n” + Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Bullet-Proof Functions JavaScript 1.5 9-31 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. err.message. On the next line, set aresult to null so that it returns a null value: aresult = null. function createArray(catlist, products, delim) { try { // contents of original createArray() function } catch(err) { alert("createArray (parent error handler) threw " + err.name + ":\n" + err.message); aresult = null; } finally { return aresult; } } 6. In the try block in createArray(), add an if block: if (catlist ==””) {} under the third line of the function (var cats = catlist.split(delim);). On the first line in the if block, add a statement to define a new Error object in the event that catlist is an empty string: var noCatError = new Error(“No categories were available.”);. On the following line, add the statement noCatError.name = “Category Definition Error”; to give the new error object a specific name. On the last line of the if block, add the statement throw noCatError. This ensures that the error is caught if an empty string category is defined, much like the one you created in Step 2. try { var cats = catlist.split(delim); if(catlist == "") { var noCatError = new Error("No categories were available."); noCatError.name = "Category Definition Error"; throw noCatError; } var aresult = new Array(); 7. Surround the contents of the showArray() function in a try/catch/finally block, placing the code in the try section, to catch any errors that may arise. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 9: Error Handling 9-32 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. function showArray() { try { // surround the current contents of the // showArray()function in the try block } catch (err) { } finally { } 8. Move the last line, alert(msg), to the finally block to ensure that it always executes. For the catch block, catch the variable err with the statement catch (err) and a single statement in the catch block to customize the error message that will be generated in the event of an error: msg = “showArray threw ” + err.name + “:\n” + err.message;. function showArray() { try { //CURRENT CONTENTS OF showArray() } catch (err) { msg = "showArray threw " + err.name + ":\n" + err.message; } finally { alert(msg); } 9. After the marray is defined at the top of showArray(), add an if block to check whether marray exists: if (!marray) {}. For the first statement in the if block, add a statement to create a new error in the event that marray does not exist: var nullarray = new Error(“Array evaluated to null.”). try { var marray = createArray(categories, aProducts, ","); if (!marray) { var nullarray = new Error("Array evaluated to null."); } } catch (err) { Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Bullet-Proof Functions JavaScript 1.5 9-33 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. 10. On the next line of the if block, add a statement to set a specific name for the new Error object: nullarray.name = “Null Array Error”. Finally, on the last line of the if block, add a statement to throw the error: throw nullarray. if (!marray) { var nullarray = new Error("Array evaluated to null."); nullarray.name = "Null Array Error"; throw nullarray; } 11. Test the application by launching JMartSale.html. Upon pressing the Click for new products! button, an alert indicating a Category Definition Error should appear, followed by a Null Array Error alert as in Figure 11. Figure 11. Errors caught in exception handling for JMartSale.js. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 9: Error Handling 9-34 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Nested Try/Catch Objective In this exercise, you will capture errors on a lower level within the createArray() function using a nested try/catch block. Things to Consider If an error is thrown from a nested try/catch block, via the event model, it bubbles up to the top-level try/catch block. Step-by-Step Instructions 1. Open the JMartSale.js file you completed in the first exercise. The first thing to do is comment out the line from the first exercise that produces the error. At the top of the file, right under the categories declaration, categories was set to an empty string. Comment out that line: NOTE The completed files are set up for the first exercise. You must comment the line that sets the categories to an empty string as shown below, and perform Step 2 on the completed file before you run it. <! //J-Mart Stock Display var categories = "Batteries,Soap,Magazines,Tires"; //categories = ""; 2. In the createArray() function, break the for loop by adding + 10 after the cats.length in the loop‟s expression: for (ca = 0; ca < cats.length + 10; ca++). When the code tries to access an array position beyond the length of the array itself, it will generate an error. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Nested Try/Catch JavaScript 1.5 9-35 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. ArrayLoop: for (ca = 0; ca < cats.length + 10; ca++) { } 3. In the for loop located in createArray(), add a try/catch block under the line: tmparray[0] = cats[ca] near the top of the function: ArrayLoop: for (ca = 0; ca < cats.length; ca++) { var tmparray = new Array(2); tmparray[0] = cats[ca]; try { } catch () { } aresult[ca] = tmparray; } 4. Move the two lines that define the tmparray variable into the try part of the block (tmparray[1] = products[ca].split(delim); and tmparray[1] = tmparray[1].sort;). Catch the variable err in the catch block using the statement catch (err), and in the body of the catch block, add the line throw err;. try { tmparray[1] = products[ca].split(delim); tmparray[1] = tmparray[1].sort(); } catch (err) { throw err; } 5. Now it is time to test the application. When the Click for new products! button is clicked, the nested try/catch that you just added will throw an error. Remember that there are actually only four entries in the categories array, and therefore the length of the array is 4. Since you add ten to the loop counter, the code will try to access an index position that exceeds the array size, and an error will be generated when the for loop code tries to access the fifth element in the categories array. The catch block in createArray() will catch the error and process it, thereby displaying the alert dialog box. Finally, showArray(), which calls the createArray() Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 9: Error Handling 9-36 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. function, will throw an error as well because of the null results that createArray() returns. The error results are shown in Figure 12. Figure 12. An error thrown by a nested try/catch and caught by a parent try/catch in createArray. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. [...]... encoding="utf-8"?> Lab 10 - Animal Crackers divstyle { background-color: #EFEFEF; border: 1px solid #000000; overflow: auto; height: 250px; width: 250px; } Feb 19 2008 3:29PM Dao Dung... once the application has been run The error to fix is shown in Figure 13 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 9- 3 7 Lab 9: Error Handling Figure 13 Find the root cause of this error When the browser... described earlier in this section More advanced functionality for prototyping is available, however, the browsers are not at all standardized on prototyping This creates problems with cross-browser scripting that you can avoid by creating well-formed JavaScript objects 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... length method Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 1 0-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 Objects and Properties Objects and Properties In JavaScript, functions can have properties, which you can define using most JavaScript variable... define a JavaScript object on the fly by calling new 9 If a method of an object provides functionality that is only useful to that object, what kind of function should you use? 10 You have created an object called cosmicObject How do you create an instance of it? Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 1 0-2 4 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright... additional instances of this object type Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 1 0-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 Objects and Properties Another method for creating objects is available to Internet Explorer 4+ and Netscape Navigator... you only need one instance of a truck, rather than multiple truck objects 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 1 0 -9 Custom Objects Objects and Methods Function objects can also include methods... cat.legs + "\nTail: " + cat.tail); You can see here how simple it is to create a JavaScript object A function object can contain custom properties and have custom methods to manipulate the object’s data Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 1 0-2 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights... is covered later in the chapter Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn 1 0-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 Variables and Arguments Variables and Arguments You can also pass parameters to JavaScript functions Within the parentheses... which makes it difficult to isolate statements that go together: 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 1 0-1 7 Custom Objects //Un-refactored code: for (c = 0; c < 3; c++) { //Set cracker & cracker . 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. Bullet-Proof Functions JavaScript 1. 5 9- 2 9 Copyright. shown in Figure 13 . Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 9: Error Handling 9- 3 8 JavaScript 1. 5 Copyright ©. categories references. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 9: Error Handling 9- 3 0 JavaScript 1. 5 Copyright © 2003