Copyright ©2005  Department of Computer & Information Science JavaScript Modularity

Copyright ©2005  Department of Computer & Information Science Goals By the end of this lecture you should … Understand how to write JavaScript functions.Understand how to write JavaScript functions. Understand how to perform unit testing.Understand how to perform unit testing.

Copyright ©2005  Department of Computer & Information Science Problem Statement Develop an application to calculate a monthly payment for a car loan, including data validation.Develop an application to calculate a monthly payment for a car loan, including data validation. Display the payment calculation in the format $XXX.YY.Display the payment calculation in the format $XXX.YY. Ask the user if they want to calculate another monthly payment.Ask the user if they want to calculate another monthly payment.

Copyright ©2005  Department of Computer & Information Science Take the next few minutes to identify the inputs, processes & outputs for the application.

Copyright ©2005  Department of Computer & Information Science What are the Inputs? INPUTSOURCE DATA TYPE Sales Price User Input Number (Float) Down Pymnt. User Input Number (Float) APR User Input Number (Float) continued …

Copyright ©2005  Department of Computer & Information Science What are the Inputs? INPUTSOURCE DATA TYPE Loan Length User Input Number (Float) Credit Rating User Input String Another loan? User Input Boolean

Copyright ©2005  Department of Computer & Information Science What are the Processes? Validate for number data, when appropriate.Validate for number data, when appropriate. Validate for appropriate ranges for APR & Loan Length (both must be positive).Validate for appropriate ranges for APR & Loan Length (both must be positive). Validate loan length is within an appropriate range.Validate loan length is within an appropriate range. continued …

Copyright ©2005  Department of Computer & Information Science What are the Processes? Convert loan length from years to months.Convert loan length from years to months. Validate for appropriate ranges for credit rating.Validate for appropriate ranges for credit rating. Adjust APR, according to Credit Rating.Adjust APR, according to Credit Rating. Convert the adjusted APR to monthly figure.Convert the adjusted APR to monthly figure. continued …

Copyright ©2005  Department of Computer & Information Science What are the Processes? Validate for YES/NO response to request for another loan calculation.Validate for YES/NO response to request for another loan calculation. Calculate monthly payment using the formula on the next slide …Calculate monthly payment using the formula on the next slide …

Copyright ©2005  Department of Computer & Information Science Equation for Payment

Copyright ©2005  Department of Computer & Information Science What are the Outputs? Display a splash screen introducing the program.Display a splash screen introducing the program. Display an appropriate message with the monthly payment information.Display an appropriate message with the monthly payment information.

Copyright ©2005  Department of Computer & Information Science Developing a Module for Splash Screen We need to develop a module for a splash screen to start our application.We need to develop a module for a splash screen to start our application. INPUTS: It has none.INPUTS: It has none. PROCESSES/OUTPUTS: Display basic program information, including title, author, version, etc.PROCESSES/OUTPUTS: Display basic program information, including title, author, version, etc. TYPE: SubprogramTYPE: Subprogram

Copyright ©2005  Department of Computer & Information Science Creating a JavaScript Subprogram Remember that we use subprograms to perform some task without returning a value to the procedure that calls it. Conversely, functions perform a task AND return a value.Remember that we use subprograms to perform some task without returning a value to the procedure that calls it. Conversely, functions perform a task AND return a value. JavaScript doesn’t differentiate between the two, however, so their syntax is similar …JavaScript doesn’t differentiate between the two, however, so their syntax is similar …

Copyright ©2005  Department of Computer & Information Science General form of a Function/Subprogram Definition function Identifier (par1, par2, … parN) { //Executable block return value; return value; /* Return value for /* Return value for * functions only */ * functions only */}//End

Copyright ©2005  Department of Computer & Information Science Calling a Subprogram/Function To call a subprogram, just call the subprogram by its identifier: GenerateSplashScreen();To call a subprogram, just call the subprogram by its identifier: GenerateSplashScreen(); To call a function (which returns a value), assign the result of the function to a variable: fltAvg = CalcAverage(1,2,3);To call a function (which returns a value), assign the result of the function to a variable: fltAvg = CalcAverage(1,2,3);

Copyright ©2005  Department of Computer & Information Science Using the file javaScriptTemplate.html, take the next few minutes to develop a module to display a splash screen. Save your new file as: carLoanCalculator.html Then look at the following file: javaScriptModularity_01.html

Copyright ©2005  Department of Computer & Information Science Input Numeric Data Module Consider the validation rules for the Sales Price, the Down Payment and the APR.Consider the validation rules for the Sales Price, the Down Payment and the APR. –They all need to be able to be converted to a numeric data type. –They all need to be a positive amount (>0). We can use the same function to input each …We can use the same function to input each …

Copyright ©2005  Department of Computer & Information Science IPO for Numeric Data Input Function INPUTSPROCESSESOUTPUTS 1.Label for Number (String) 2.Positive Number Indicator (Boolean) 1.While loop to force user to input positive number type. 1.Positive number value

Copyright ©2005  Department of Computer & Information Science Open the file carLoanCalculator.html. Take the next few minutes to develop a function to input Sales Price, Down Payment & APR. Then look at the following file: javaScriptModularity_02.html

Copyright ©2005  Department of Computer & Information Science Loan Length Module We’ll use another function to get the loan amount (a float data type). However, we’ll limit the user’s choice using a integer menu representing the available loan terms (2 years, 5 years, or 6 years).We’ll use another function to get the loan amount (a float data type). However, we’ll limit the user’s choice using a integer menu representing the available loan terms (2 years, 5 years, or 6 years).

Copyright ©2005  Department of Computer & Information Science IPO for Loan Length Function INPUTSPROCESSESOUTPUTS 1.None 1.Determine desired loan length. 2.Validate user’s choice. 1.Float number representing loan amount (in months).

Copyright ©2005  Department of Computer & Information Science Open the file carLoanCalculator.html. Take the next few minutes to develop a function to input the length of the loan. Then look at the following file: javaScriptModularity_03.html

Copyright ©2005  Department of Computer & Information Science Credit Rating Module We’ll create a function to determine the user’s credit rating. Again, we’ll limit the user’s choices using a integer menu (1=superior; 2=good; 3=average; 4=below average; 5=poor).We’ll create a function to determine the user’s credit rating. Again, we’ll limit the user’s choices using a integer menu (1=superior; 2=good; 3=average; 4=below average; 5=poor).

Copyright ©2005  Department of Computer & Information Science IPO for Credit Rating Function INPUTSPROCESSESOUTPUTS 1.None 1.Determine desired credit rating. 2.Validate user’s choice. 1.String value representing customer credit rating.

Copyright ©2005  Department of Computer & Information Science Open the file carLoanCalculator.html. Take the next few minutes to develop a function to input & validate the customer’s credit rating. Then look at the following file: javaScriptModularity_04.html

Copyright ©2005  Department of Computer & Information Science Monthly Interest Rate Module We’ll create a function to determine the monthly interest rate. Based on the credit rating, we’ll add points to the APR (1.0 for good credit rating; 1.05 for average credit rating; 1.1 for below average credit rating; 1.25 for poor credit rating). Finally, we’ll divide the adjusted APR by 12 to get the monthly interest rate.We’ll create a function to determine the monthly interest rate. Based on the credit rating, we’ll add points to the APR (1.0 for good credit rating; 1.05 for average credit rating; 1.1 for below average credit rating; 1.25 for poor credit rating). Finally, we’ll divide the adjusted APR by 12 to get the monthly interest rate.

Copyright ©2005  Department of Computer & Information Science IPO for Credit Rating Function INPUTSPROCESSESOUTPUTS 1.Credit rating (String) 2.Raw APR (Float) 1.Determine adjusted APR, based on credit. 2.Divide adjusted APR by 12 1.Float value indicating the monthly interest rate.

Copyright ©2005  Department of Computer & Information Science Open the file carLoanCalculator.html. Take the next few minutes to determine a monthly interest rate. Then look at the following file: javaScriptModularity_05.html

Copyright ©2005  Department of Computer & Information Science Calculate Payment Module Now we’ll create a function to determine the monthly payment. We’ll need the loan principle, the monthly interest rate and the length of the loan as inputs.Now we’ll create a function to determine the monthly payment. We’ll need the loan principle, the monthly interest rate and the length of the loan as inputs.

Copyright ©2005  Department of Computer & Information Science IPO for Calculate Payment Function INPUTSPROCESSESOUTPUTS 1.Principle 2.Monthly Rate 3.Loan Length (All Floats) 1.Use the equation on the next slide. 1.Float value indicating the monthly payment.

Copyright ©2005  Department of Computer & Information Science Open the file carLoanCalculator.html. Take the next few minutes to develop a function to calculate the monthly payment. Then look at the following file: javaScriptModularity_06.html

Copyright ©2005  Department of Computer & Information Science Display Payment Module Now we’ll create a sub-program to display the monthly payment. We’ll need the monthly payment as an input.Now we’ll create a sub-program to display the monthly payment. We’ll need the monthly payment as an input.

Copyright ©2005  Department of Computer & Information Science IPO for Display Monthly Payment Subprogram INPUTSPROCESSESOUTPUTS 1.Monthly Payment (Float) 1.Create a custom message with monthly payment. 1.Display message.

Copyright ©2005  Department of Computer & Information Science Open the file carLoanCalculator.html. Take the next few minutes to develop a subprogram to display the monthly payment. Then look at the following file: javaScriptModularity_07.html

Copyright ©2005  Department of Computer & Information Science Continue Program Module Now we’ll create a function to ask the user if they wish to calculate another loan. We’ll ask them if want to continue; validate they typed YES or NO. The value yes or no is returned to the main program.Now we’ll create a function to ask the user if they wish to calculate another loan. We’ll ask them if want to continue; validate they typed YES or NO. The value yes or no is returned to the main program.

Copyright ©2005  Department of Computer & Information Science IPO for Continue Program Function INPUTSPROCESSESOUTPUTS 1.Answer to continue program question (string) 1.Validate answer is YES or NO. 2.If YES, return true 3.If NO, return false 1.Boolean value, based on process criteria

Copyright ©2005  Department of Computer & Information Science Open the file carLoanCalculator.html. Take the next few minutes to develop a function to determine if the user wishes to continue. Then look at the following file: javaScriptModularity_08.html

Copyright ©2005  Department of Computer & Information Science Summary Subprograms perform tasks without returning a value; functions do the same, but DO return a value.Subprograms perform tasks without returning a value; functions do the same, but DO return a value. JavaScript uses the keyword function for both functions and subprograms.JavaScript uses the keyword function for both functions and subprograms. continued …

Copyright ©2005  Department of Computer & Information Science Summary We can perform unit testing by delivering test values to completed modules before writing additional modules.We can perform unit testing by delivering test values to completed modules before writing additional modules. We use the main module as the central point through which data is delivered to and from other modules.We use the main module as the central point through which data is delivered to and from other modules.