copyright ©2005 department of computer & information science javascript modularity

Copyright Copyright ©2005 ©2005 Department of Computer & Information ScienceDepartment of Computer & Information Science

JavaScript ModularityJavaScript Modularity


GoalsGoals

By the end of this lecture you By the end of this lecture you should …should …

• Understand how to write Understand how to write JavaScript functions.JavaScript functions.

• Understand how to perform unit Understand how to perform unit testing.testing.


Problem StatementProblem Statement

• Develop an application to Develop an application to calculate a monthly payment for a calculate a monthly payment for a car loan, including data validation.car loan, including data validation.

• Display the payment calculation Display the payment calculation in the format in the format $XXX.YY$XXX.YY..

• Ask the user if they want to Ask the user if they want to calculate another monthly calculate another monthly payment.payment.


Take the next few minutes to identify the inputs, processes & outputs for the application.


What are the Inputs?What are the Inputs?

INPUTINPUT SOURCESOURCE DATA TYPEDATA TYPE

Sales PriceSales Price User InputUser Input Number (Float)Number (Float)

Down Pymnt.Down Pymnt. User InputUser Input Number (Float)Number (Float)

APRAPR User InputUser Input Number (Float)Number (Float)

continued …continued …


What are the Inputs?What are the Inputs?

INPUTINPUT SOURCESOURCE DATA TYPEDATA TYPE

Loan LengthLoan Length User InputUser Input Number (Float)Number (Float)

Credit RatingCredit Rating User InputUser Input StringString

Another loan?Another loan? User InputUser Input BooleanBoolean


What are the Processes?What are the Processes?

• Validate for number data, when Validate for number data, when appropriate.appropriate.

• Validate for appropriate ranges for Validate for appropriate ranges for APR & Loan Length (both must be APR & Loan Length (both must be positive).positive).

• Validate loan length is within an Validate loan length is within an appropriate range.appropriate range.




• Convert loan length from years to Convert loan length from years to months.months.

• Validate for appropriate ranges for Validate for appropriate ranges for credit rating.credit rating.

• Adjust APR, according to Credit Adjust APR, according to Credit Rating.Rating.

• Convert the adjusted APR to monthly Convert the adjusted APR to monthly figure.figure.




• Validate for YES/NO response to Validate for YES/NO response to request for another loan request for another loan calculation.calculation.

• Calculate monthly payment Calculate monthly payment using the formula on the next using the formula on the next slide …slide …


Equation for PaymentEquation for Payment

LoanLengthMoIntRate)(11

MoIntRate*LoanAmt LoanLengthMoIntRate)(11

MoIntRate*LoanAmt


What are the Outputs?What are the Outputs?

• Display a splash screen Display a splash screen introducing the program.introducing the program.

• Display an appropriate Display an appropriate message with the monthly message with the monthly payment information.payment information.


Developing a Module Developing a Module for Splash Screenfor Splash Screen

• We need to develop a module for a We need to develop a module for a splash screen to start our splash screen to start our application. application.

• INPUTS: It has none.INPUTS: It has none.• PROCESSES/OUTPUTS: Display PROCESSES/OUTPUTS: Display

basic program information, basic program information, including title, author, version, etc.including title, author, version, etc.

• TYPE: SubprogramTYPE: Subprogram


Creating a JavaScript Creating a JavaScript SubprogramSubprogram

• Remember that we use Remember that we use subprogramssubprograms to perform some task without to perform some task without returning a value to the procedure returning a value to the procedure that calls it. Conversely, that calls it. Conversely, functionsfunctions perform a task AND return a value.perform a task AND return a value.

• JavaScript doesn’t differentiate JavaScript doesn’t differentiate between the two, however, so their between the two, however, so their syntax is similar …syntax is similar …


General form of a General form of a Function/Subprogram Function/Subprogram

DefinitionDefinitionfunction function IdentifierIdentifier ( (par1, par2, par1, par2, … parN… parN))

{{//Executable block //Executable block

return return valuevalue;; /* Return value for /* Return value for * functions only */* functions only */}//End }//End


Calling a Calling a Subprogram/FunctionSubprogram/Function

• To call a subprogram, just call the To call a subprogram, just call the subprogram by its identifier:subprogram by its identifier:GenerateSplashScreen();GenerateSplashScreen();

• To call a function (which returns a To call a function (which returns a value), assign the result of the value), assign the result of the function to a variable:function to a variable:fltAvg = CalcAverage(1,2,3);fltAvg = CalcAverage(1,2,3);


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


Input Numeric Data ModuleInput Numeric Data Module

• Consider the validation rules for Consider the validation rules for the Sales Price, the Down the Sales Price, the Down Payment and the APR.Payment and the APR.– They all need to be able to be converted They all need to be able to be converted

to a numeric data type.to a numeric data type.– They all need to be a positive amount They all need to be a positive amount

(>0).(>0).

• We can use the same function to We can use the same function to input each …input each …


IPO for Numeric IPO for Numeric Data Input FunctionData Input Function

INPUTSINPUTS PROCESSEPROCESSESS

OUTPUTSOUTPUTS

1.1. Label for Label for Number Number (String)(String)

2.2. Positive Positive Number Number Indicator Indicator (Boolean)(Boolean)

1.1. While While loop to loop to force force user to user to input input positive positive number number type.type.

1.1. Positive Positive number number valuevalue


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


Loan Length ModuleLoan Length Module

• We’ll use another function to get We’ll use another function to get the loan amount (a float data the loan amount (a float data type). However, we’ll limit the type). However, we’ll limit the user’s choice using a integer user’s choice using a integer menu representing the available menu representing the available loan terms (2 years, 5 years, or 6 loan terms (2 years, 5 years, or 6 years).years).


IPO for Loan Length IPO for Loan Length FunctionFunction

INPUTSINPUTS PROCESSESPROCESSES OUTPUTSOUTPUTS

1.1. NoneNone 1.1. Determine Determine desired desired loan loan length.length.

2.2. Validate Validate user’s user’s choice.choice.

1.1. Float Float number number representinrepresenting loan g loan amount (in amount (in months).months).


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


Credit Rating ModuleCredit Rating Module

• We’ll create a function to We’ll create a function to determine the user’s credit determine the user’s credit rating. Again, we’ll limit the rating. Again, we’ll limit the user’s choices using a integer user’s choices using a integer menu (1=superior; 2=good; menu (1=superior; 2=good; 3=average; 4=below average; 3=average; 4=below average; 5=poor).5=poor).


IPO for Credit Rating IPO for Credit Rating FunctionFunction


1.1. NoneNone 1.1. Determine Determine desired desired credit credit rating.rating.

2.2. Validate Validate user’s user’s choice.choice.

1.1. String value String value representinrepresenting customer g customer credit credit rating.rating.


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


Monthly Interest Rate Monthly Interest Rate ModuleModule

• We’ll create a function to determine the We’ll create a function to determine the monthly interest rate. Based on the monthly interest rate. Based on the credit rating, we’ll add points to the APR credit rating, we’ll add points to the APR (1.0 for good credit rating; 1.05 for (1.0 for good credit rating; 1.05 for average credit rating; 1.1 for below average credit rating; 1.1 for below average credit rating; 1.25 for poor average credit rating; 1.25 for poor credit rating). Finally, we’ll divide the credit rating). Finally, we’ll divide the adjusted APR by 12 to get the monthly adjusted APR by 12 to get the monthly interest rate.interest rate.


IPO for Credit Rating IPO for Credit Rating FunctionFunction

INPUTSINPUTS PROCESSESPROCESSES OUTPUTSOUTPUTS1.1. Credit Credit

rating rating (String)(String)

2.2. Raw Raw APR APR (Float)(Float)

1.1. Determine Determine adjusted adjusted APR, APR, based on based on credit.credit.

2.2. Divide Divide adjusted adjusted APR by 12APR by 12

1.1. Float Float value value indicating indicating the the monthly monthly interest interest rate.rate.


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


Calculate Payment ModuleCalculate Payment Module

• Now we’ll create a function to Now we’ll create a function to determine the monthly payment. determine the monthly payment. We’ll need the loan principle, the We’ll need the loan principle, the monthly interest rate and the monthly interest rate and the length of the loan as inputs.length of the loan as inputs.


IPO for Calculate Payment IPO for Calculate Payment FunctionFunction

INPUTSINPUTS PROCESSESPROCESSES OUTPUTSOUTPUTS1.1. PrinciplPrincipl

ee

2.2. Monthly Monthly RateRate

3.3. Loan Loan LengthLength

(All Floats)(All Floats)

1.1. Use the Use the equation equation on the on the next slide.next slide.

1.1. Float Float value value indicating indicating the the monthly monthly payment.payment.


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


Display Payment ModuleDisplay Payment Module

• Now we’ll create a sub-program Now we’ll create a sub-program to display the monthly payment. to display the monthly payment. We’ll need the monthly payment We’ll need the monthly payment as an input.as an input.


IPO for Display MonthlyIPO for Display MonthlyPayment SubprogramPayment Subprogram


1.1. Monthly Monthly PaymenPayment (Float)t (Float)

1.1. Create a Create a custom custom message message with with monthly monthly payment.payment.

1.1. Display Display message.message.


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


Continue Program ModuleContinue Program Module

• Now we’ll create a function to Now we’ll create a function to ask the user if they wish to ask the user if they wish to calculate another loan. We’ll ask calculate another loan. We’ll ask them if want to continue; them if want to continue; validate they typed YES or NO. validate they typed YES or NO. The value yes or no is returned The value yes or no is returned to the main program.to the main program.


IPO for Continue Program IPO for Continue Program FunctionFunction

INPUTSINPUTS PROCESSESPROCESSES OUTPUTSOUTPUTS1.1. Answer Answer

to to continucontinue e prograprogram m questioquestion n (string)(string)

1.1. Validate Validate answer is answer is YES or YES or NO.NO.

2.2. If YES, If YES, return return truetrue

3.3. If NO, If NO, return return falsefalse

1.1. Boolean Boolean value, value, based on based on process process criteriacriteria


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


SummarySummary

• Subprograms perform tasks Subprograms perform tasks without returning a value; without returning a value; functions do the same, but DO functions do the same, but DO return a value.return a value.

• JavaScript uses the keyword JavaScript uses the keyword functionfunction for both functions and for both functions and subprograms.subprograms.



SummarySummary

• We can perform We can perform unit testingunit testing by by delivering test values to completed delivering test values to completed modules before writing additional modules before writing additional modules.modules.

• We use the We use the mainmain module as the module as the central point through which data is central point through which data is delivered to and from other delivered to and from other modules.modules.

copyright ©2005 department of computer & information science javascript modularity

Documents