Variable Scope JavaScript 1.5 3-13 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Answers 1. Which operators allow you to concatenate strings? The addition and the add-by-value operators 2. What would you use the indexOf() method for? To determine whether a substring exists within a larger string, and the starting index of that string if it does exist. 3. How do you use the substring() method? To extract a copy of a substring from a larger string by passing it the index of the first character of the substring and the index of the character after the last character of the substring. 4. What is the purpose of a function? A function executes a predefined set of statements and optionally returns a value. 5. True/False: A function call does not have to pass the same number of parameters as the function definition. False. A function call’s parameter values must match the function’s definition. 6. How many return values can a function have? Just one 7. True/False: A local variable defined in function showMsg() can be used in function alertUser(). False. Local variables can be used only within the function in which they are defined. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 3: Strings and Functions 3-14 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 3: Strings and Functions 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 MortgageCalc.html, in the same directory as the sample project. To avoid typing the code, you can cut/paste it from the source file instead. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 3 Overview JavaScript 1.5 3-15 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Lab 3 Overview In this lab you will learn how to effectively manipulate strings. You’ll also learn how to create functions that simplify your code. To complete this lab, you will need to work through two exercises: Build the Page Dynamically Create a Function for the Calculations 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 3: Strings and Functions 3-16 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Build the Page Dynamically Objective In this exercise, you will create a function that dynamically builds an HTML string that represents a series of controls for your page. The function will return this string. You will also pass this function to a document.write() statement, in the body of your page, in order to render the controls on the page. Things to Consider HTML is just formatted text. Using a JavaScript document method to write a formatted HTML string is no different than defining it within the body of the page. Step-by-Step Instructions 1. Open the MortgageCalc.html file located in this lab’s directory. It is just a simple page with a header. 2. Create a new function called buildPage(). <script language="JavaScript" type="text/javascript"> <! <! Exercise 1: Build the Page Dynamically > function buildPage() { } // > </script> 3. Within your function buildPage(), define a variable named html, and initialize it to an empty string, using the statement var html = "";. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Build the Page Dynamically JavaScript 1.5 3-17 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. function buildPage() { var html=””; } 4. Next, you want to create a string within the function that defines the HTML that you want the browser to render on the page. The controls are listed in Table 2. See Figure 1 at the end of this exercise for the final results. Element Description Form Table width = 400, cellspacing = 10 Table header Caption, “Mortgage Calculator” Label, w/ textbox “Loan Amount” Label, w/ textbox “Term of Loan” Label, w/ textbox “Interest rate” follow textbox w/ “%” label. Button “Calculate” Label, w/ textbox “Monthly Payment” Table 2. Elements for this exercise’s form. 5. Append the following code to the html variable defined in the last step. The use of the add-by-value operator (+=) will make this easier. For your convenience, the code is as follows: Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 3: Strings and Functions 3-18 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. html += "<form name=\"form1\"><table width=\"400\"" + …."cellspacing=\"10\">"; html += "<tr><td align=\"center\" colspan=\"2\"><h3>Mortgage" + "Calculator</h3><hr/></td></tr>"; html += "<tr><td>Loan Amount</td>"; html += "<td><input type=\"text\" name=\"loanAmount\"/></td></tr>"; html += "<tr><td>Term of Loan</td>"; html += "<td><input type=\"text\" name=\"loanTerm\"/>" + "Years</td></tr>"; html += "<tr><td>Annual Interest Rate</td>"; html += "<td><input type=\"text\" name=\"interestRate\"/> %</td></tr>"; html += "<tr><td colspan=\"2\">"; html += "<input type=\"button\" value=\"Calculate\" onClick=\"\"/>"; html += "</td></tr>"; html += "<tr><td>Monthly Payment</td>"; html += "<td><input type=\"text\"" + name=\"monthlyPayment\"/></td></tr>"; html += "</table></form>"; 6. Return the string value from the function using the statement return html;. html += "<td><input type=\"text\"" + name=\"monthlyPayment\"/></td></tr>"; html += "</table></form>"; return html; 7. Finally, in the body of the page, between the <script> tags that are provided for you, make a call to document.write(), passing your new function buildPage() as the parameter, using the statement document.write(buildPage());. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Build the Page Dynamically JavaScript 1.5 3-19 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. <body> <script language="JavaScript"> document.write(buildPage()); </script> </body> 8. Save the file and test the exercise by launching MortgageCalc.html in a browser: You should see the controls displayed in Figure 1. Figure 1. The result of the first exercise. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 3: Strings and Functions 3-20 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. Create a Function for the Calculations Objective In this exercise, you’ll create a function that calculates monthly payments for a mortgage. Once the function is created, you will hook it to the onClick event of the Calculate button that you created in the last exercise. Additional Information The equation for finding the monthly payments on an amortized loan, is: P = ((r * M)/(1 - (1 + r/n)^-nt)) /n P = the payment, r = the annual interest rate, M = the mortgage amount, t = the number of years, and n = the number of payments per year. TIP: You will need to make use of a couple of JavaScript Math object methods that you may not be familiar with. The first method is Math.pow(value, power), which raises a value to a power. The second method is Math.floor(value), which rounds the parameter value down to the next integer less than or equal to itself. Step-by-Step Instructions 1. You will be building on the work that you did in the last example, so continue to use the same XHTML file. If you didn’t complete the exercise, you can open the MortgageCalc_Ex2.html file in this lab’s directory. 2. Create a new function named calcValues() under the buildPage function from the first exercise. function calcValues() { } Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Create a Function for the Calculations JavaScript 1.5 3-21 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. 3. Declare a variable r, to represent that interest rate. Initialize variable r with the value from the interestRate edit box, divided by 100. This is important, because the input control asks for a percentage, but the calculation requires the decimal equivalent. var r = (document.form1.interestRate.value)/100; 4. Declare a variable M, to represent the total amount of the mortgage, and initialize the variable with the value from the loanAmount edit box. var M = document.form1.loanAmount.value; 5. Declare a variable t, to represent the number of years in the loan term. Initialize the variable with the value from the loanTerm edit box. var t = document.form1.loanTerm.value; 6. Translate the mortgage equation given in the Additional Information section into a JavaScript statement, and return the value. You will need to make use of the Math.pow() method. You can break the statement into multiple statements in order to work with them, but the following code will handle the equation in one statement: return ((r*M)/(1-(Math.pow((1+r/12),(-12*t)))))/12; 7. Modify the buildPage() function that you wrote in the first example to call your new function calcPayments() within the onClick event for the Calculate button and write the result to the monthlyPayment edit box: html += "<input type=\"button\" value=\"Calculate\"" + "onClick=\"document.form1.monthlyPayment.value=" + "calcPayments()\"/>"; 8. Test the exercise at this point to make sure that everything is working. When you enter values into the edit boxes on the page, you should get a float value in the monthlyPayment edit box, with more than two decimal places. To complete the exercise, you should format the value so that it only has two decimal places. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 3: Strings and Functions 3-22 JavaScript 1.5 Copyright © 2003 by Application Developers Training Company All rights reserved. Reproduction is strictly prohibited. 9. Create a function formatResult(), which accepts a parameter named number. 10. Write a statement for formatResult() that preserves only two decimal places, by multiplying the parameter by 100, dropping all of the decimals of the new value by using the Math.floor() method, and dividing the result by 100 in order to return to the original order of magnitude. You should return the following result: return Math.floor(number * 100) / 100; 11. Now, modify the return statement in function calcPayments() to make use of your new formatting function: return formatResult(((r*M)/(1-(Math.pow((1+r/12), (-12*t)))))/12); 12. Test the exercise by launching MortgageCalc.html in your browser. The exercise will look like Figure 2. Figure 2. The result of the second exercise. Feb 19 2008 3:29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. [...]... implementation The resulting page appears in Figure 3 Figure 3 The “elements” page using parallel arrays See ParallelArray.js The JavaScript file for this page defines the parallel arrays and the generateElements() function Feb 19 2008 3: 29PM Dao Dung dungdq@edt.com.vn 4-1 2 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright © 20 03 by Application Developers Training Company... forms 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 © 20 03 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 4-1 7 Arrays Using the Array Object Arrays are full-blown objects in JavaScript, meaning that they have properties and methods like other built-in objects Properties... 19 2008 3: 29PM Dao Dung dungdq@edt.com.vn 4-2 2 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright © 20 03 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited Using the Array Object Questions 1 True/False: Arrays are the only data collection type in JavaScript 2 Which JavaScript types are allowed in arrays? 3 What... code creates the HTML page that displays the elements 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 © 20 03 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 4-1 3 Arrays ... Why do you use the slice() method? 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 © 20 03 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 4-2 3 Arrays Answers 1 True/False: Arrays are the only data collection type in JavaScript True Arrays are flexible enough to... in Figure 2 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 © 20 03 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 4-7 Arrays Figure 2 The name and weight populate dynamically when the element symbol changes See StructureArray.js The JavaScript source for this... helium.name = "helium" helium.weight = 2 var lithium = new Array(); lithium.symbol = "Li" lithium.name = "lithium" lithium.weight = 3 Feb 19 2008 3: 29PM Dao Dung dungdq@edt.com.vn 4-8 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright © 20 03 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited Arrays as Structures var... renders the Structure Array JavaScript example: Feb 19 2008 3: 29PM Dao Dung dungdq@edt.com.vn 4-1 0 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright © 20 03 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited Arrays as Structures ... to manage structures Learn about JavaScript array properties and array methods Use the join and slice array methods 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 © 20 03 by Application Developers Training Company All rights reserved Reproduction is strictly prohibited 4-1 Arrays Introduction to Arrays Arrays... are the only collection type built into the JavaScript language Therefore, you use them any time you need to organize a collection of information You will see that arrays offer a great deal of flexibility in their Feb 19 2008 3: 29PM Dao Dung dungdq@edt.com.vn 4-2 For product evaluation only– not for distribution or commercial use .JavaScript 1.5 Copyright © 20 03 by Application Developers Training Company . instead. Feb 19 2008 3: 29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 3 Overview JavaScript 1. 5 3 - 15 Copyright © 20 03 by Application. 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 3: Strings and Functions 3 -1 6 JavaScript 1. 5. defined. Feb 19 2008 3: 29PM Dao Dung dungdq@edt.com.vn For product evaluation only– not for distribution or commercial use. Lab 3: Strings and Functions 3 -1 4 JavaScript 1. 5 Copyright © 20 03 by Application