Download presentation
Presentation is loading. Please wait.
Published byDwain Benson Modified over 9 years ago
1
Copyright ©2005 Department of Computer & Information Science JavaScript Modularity
2
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.
3
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.
4
Copyright ©2005 Department of Computer & Information Science Take the next few minutes to identify the inputs, processes & outputs for the application.
5
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 …
6
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
7
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 …
8
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 …
9
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 …
10
Copyright ©2005 Department of Computer & Information Science Equation for Payment
11
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.
12
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
13
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 …
14
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
15
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);
16
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
17
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 …
18
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
19
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
20
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).
21
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).
22
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
23
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).
24
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.
25
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
26
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.
27
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.
28
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
29
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.
30
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.
31
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
32
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.
33
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.
34
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
35
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.
36
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
37
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
38
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 …
39
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.
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.