writing javascript functions

19
CSCI N341: CSCI N341: Client-Side Web Programming Client-Side Web Programming Copyright Copyright ©2004 ©2004 Department of Computer & Information Science Department of Computer & Information Science Writing JavaScript Writing JavaScript Functions Functions

Upload: tonya

Post on 05-Jan-2016

18 views

Category:

Documents


0 download

DESCRIPTION

Writing JavaScript Functions. Goals. By the end of this unit, you should understand … How to breakdown applications into individual, re-usable modules. How to develop JavaScript functions using a well-defined, well-planned methodology. How to identify module inputs, processes and outputs. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Writing JavaScript Functions

CSCI N341:CSCI N341: Client-Side Web ProgrammingClient-Side Web Programming

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

Writing JavaScript Writing JavaScript FunctionsFunctions

Page 2: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

GoalsGoals

By the end of this unit, you should By the end of this unit, you should understand …understand …

• How to breakdown applications into How to breakdown applications into individual, re-usable modules.individual, re-usable modules.

• How to develop JavaScript functions How to develop JavaScript functions using a well-defined, well-planned using a well-defined, well-planned methodology.methodology.

• How to identify module inputs, How to identify module inputs, processes and outputs.processes and outputs.

Page 3: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Steps for Writing FunctionsSteps for Writing Functions

1.1. Identify the inputs, processes and Identify the inputs, processes and outputs that your main function will outputs that your main function will handle.handle.

2.2. Identify the inputs, processes and Identify the inputs, processes and outputs that other functions will outputs that other functions will handle.handle.

3.3. Develop pseudocode for each of your Develop pseudocode for each of your functions.functions.

4.4. Code your program.Code your program.

Page 4: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Guidelines for Writing Guidelines for Writing FunctionsFunctions

• Have your main function handle (a) Have your main function handle (a) getting initial inputs from the user, (b) getting initial inputs from the user, (b) processing of those inputs (if necessary) processing of those inputs (if necessary) and (c) outputs to the user ONLY. Your and (c) outputs to the user ONLY. Your main function should do little else.main function should do little else.

• Keep function length short – about 1 editor Keep function length short – about 1 editor screen per function, give or take.screen per function, give or take.

• Use the main function as a mechanism for Use the main function as a mechanism for communicating among functions.communicating among functions.

Page 5: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Let’s Try One!Let’s Try One!

• PROBLEM:PROBLEM:“Develop an application for car loans. “Develop an application for car loans. Your application will ask for the Your application will ask for the sales sales priceprice, , down payment amountdown payment amount, , APRAPR and the and the length of the loan (in length of the loan (in months)months). Using the formula on the . Using the formula on the next screen, your program will return next screen, your program will return a a monthly paymentmonthly payment.”.”

Page 6: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Formula for Monthly Formula for Monthly PaymentPayment

LoanLengthMoIntRate)(11

MoIntRate*LoanAmtMoPmt

LoanLengthMoIntRate)(11

MoIntRate*LoanAmtMoPmt

Page 7: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Step 1a – Identify Inputs for Step 1a – Identify Inputs for main()main()

• Yes/No to question Yes/No to question “Do you want to “Do you want to calculate the monthly payment for a calculate the monthly payment for a car loan?” car loan?” (Validate for Yes/No)(Validate for Yes/No)

• Sales Price (Validate for Number)Sales Price (Validate for Number)• Down Payment (Validate for Number)Down Payment (Validate for Number)• APR (Validate for Number)APR (Validate for Number)• Length of Loan (In Months; Validate Length of Loan (In Months; Validate

for Number)for Number)

Page 8: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Step 1b – Identify Step 1b – Identify Processes for main()Processes for main()

• Call Yes/No validation functionCall Yes/No validation function• Call number validation functionCall number validation function• Calculate Loan Amount:Calculate Loan Amount:

Car Price – Down PaymentCar Price – Down Payment• Convert APR from percentage format to Convert APR from percentage format to

floating point number:floating point number:APR / 100APR / 100

• Call function to calculate monthly paymentCall function to calculate monthly payment• Concatenate output messageConcatenate output message

Page 9: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Step 1c – Output for main()Step 1c – Output for main()

• Output a message that includes loan Output a message that includes loan amount, APR, monthly payment and amount, APR, monthly payment and loan length.loan length.

Page 10: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Step 2 for Step 2 for Yes/No Validator FunctionYes/No Validator Function

• Inputs:Inputs:– Question to Ask (get from main())Question to Ask (get from main())– Default Text (get from main())Default Text (get from main())

• ProcessesProcesses– Ask user the question and see if their answer did not Ask user the question and see if their answer did not

equal “YES” AND did not equal “NO.”equal “YES” AND did not equal “NO.”– If the user didn’t answer “YES” or “NO”, let them know If the user didn’t answer “YES” or “NO”, let them know

that “YES” and “NO” are the only acceptable answers. that “YES” and “NO” are the only acceptable answers. Ask the user the question again until they answer “YES” Ask the user the question again until they answer “YES” or “NO.”or “NO.”

• OutputsOutputs– Give the validated answer back to main().Give the validated answer back to main().

Page 11: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Step 2 for Step 2 for Number Validator FunctionNumber Validator Function

• Inputs:Inputs:– Question to Ask (get from main())Question to Ask (get from main())– Default Text (get from main())Default Text (get from main())

• ProcessesProcesses– Ask the user to enter a number and check to see if they Ask the user to enter a number and check to see if they

entered data that can be converted to a number.entered data that can be converted to a number.– If the user didn’t enter numeric data, let them know that If the user didn’t enter numeric data, let them know that

the program only accepts numbers. Ask the user the the program only accepts numbers. Ask the user the question again until they enter numeric data.question again until they enter numeric data.

• OutputsOutputs– Give the validated answer back to main().Give the validated answer back to main().

Page 12: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Step 2 for Calculate Monthly Step 2 for Calculate Monthly Payment FunctionPayment Function

• Inputs:Inputs:– Loan AmountLoan Amount– APRAPR– Length of the Loan, in monthsLength of the Loan, in months

• ProcessesProcesses– Figure the monthly interest:Figure the monthly interest:

APR / 12APR / 12– Use the formula below to calculate monthly paymentUse the formula below to calculate monthly payment

• OutputsOutputs– Give the monthly payment back to main().Give the monthly payment back to main().

LoanLengthMoIntRate)(11

MoIntRate*LoanAmtMoPmt

LoanLengthMoIntRate)(11

MoIntRate*LoanAmtMoPmt

Page 13: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Step 3: Develop PseudocodeStep 3: Develop Pseudocode

• NOTENOTE: Instructor will give you : Instructor will give you pseudocode in class.pseudocode in class.

Page 14: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Step 4: Code the ProgramStep 4: Code the Program

• Finished Code:Finished Code:

http://www.cs.iupui.edu/~rmolnar/n341/examples/n341WritingFunctions.html

Page 15: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Let’s Try Another One!Let’s Try Another One!

• PROBLEM:PROBLEM:“Develop an application to calculate a “Develop an application to calculate a student’s semester grade. Your student’s semester grade. Your application will ask for the application will ask for the scores from scores from three examsthree exams. The application will then . The application will then calculate the average of the exam calculate the average of the exam scores and scores and return the average along with return the average along with a letter gradea letter grade. The teacher uses a . The teacher uses a standard grading scale.”standard grading scale.”

Page 16: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

The Coded ProductThe Coded Product

• Finished Code:Finished Code:

http://www.cs.iupui.edu/~rmolnar/n341/examples/n341FunctionsPassingValues.html

Page 17: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Commenting FunctionsCommenting Functions

• In your code, you need to provide In your code, you need to provide descriptive comments for each of your descriptive comments for each of your functions.functions.

• When writing function comments, include When writing function comments, include the following:the following:– A brief (less than 1 line) description of the functionA brief (less than 1 line) description of the function– A list of arguments for the functionA list of arguments for the function– A list of values returned by the functionA list of values returned by the function– A statement of the function’s purposeA statement of the function’s purpose

Page 18: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Commenting FunctionsCommenting Functions• Example:Example:

/*FUNCTION: calcAvg() /*FUNCTION: calcAvg() ** *PARAMETERS: IntX, IntY, IntZ – All*PARAMETERS: IntX, IntY, IntZ – All *integer numbers*integer numbers ** *RETURNS: The calculated average;*RETURNS: The calculated average; *stored in local variable rtnAvg*stored in local variable rtnAvg ** *PURPOSE: To calculate the average*PURPOSE: To calculate the average *of three integer values, passed*of three integer values, passed *by a calling procedure and then*by a calling procedure and then *return that average to the procedure.*return that average to the procedure. */*/

Page 19: Writing JavaScript Functions

CSCI N341: Client-Side Web ProgrammingCSCI N341: Client-Side Web ProgrammingCopyright Copyright ©2004 ©2004 Department of Computer & Information ScienceDepartment of Computer & Information Science

Questions?Questions?