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

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Goals By the end of this unit, you should understand … How to breakdown applications into individual, re-usable modules.How to breakdown applications into individual, re-usable modules. How to develop JavaScript functions using a well-defined, well-planned methodology.How to develop JavaScript functions using a well-defined, well-planned methodology. How to identify module inputs, processes and outputs.How to identify module inputs, processes and outputs.

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Steps for Writing Functions 1.Identify the inputs, processes and outputs that your main function will handle. 2.Identify the inputs, processes and outputs that other functions will handle. 3.Develop pseudocode for each of your functions. 4.Code your program.

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Guidelines for Writing Functions Have your main function handle (a) getting initial inputs from the user, (b) processing of those inputs (if necessary) and (c) outputs to the user ONLY. Your main function should do little else.Have your main function handle (a) getting initial inputs from the user, (b) processing of those inputs (if necessary) and (c) outputs to the user ONLY. Your main function should do little else. Keep function length short – about 1 editor screen per function, give or take.Keep function length short – about 1 editor screen per function, give or take. Use the main function as a mechanism for communicating among functions.Use the main function as a mechanism for communicating among functions.

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Let’s Try One! PROBLEM: “Develop an application for car loans. Your application will ask for the sales price, down payment amount, APR and the length of the loan (in months). Using the formula on the next screen, your program will return a monthly payment.”PROBLEM: “Develop an application for car loans. Your application will ask for the sales price, down payment amount, APR and the length of the loan (in months). Using the formula on the next screen, your program will return a monthly payment.”

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Formula for Monthly Payment

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Step 1a – Identify Inputs for main() Yes/No to question “Do you want to calculate the monthly payment for a car loan?” (Validate for Yes/No)Yes/No to question “Do you want to calculate the monthly payment for a car loan?” (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 for Number)Length of Loan (In Months; Validate for Number)

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Step 1b – Identify Processes for main() Call Yes/No validation functionCall Yes/No validation function Call number validation functionCall number validation function Calculate Loan Amount: Car Price – Down PaymentCalculate Loan Amount: Car Price – Down Payment Convert APR from percentage format to floating point number: APR / 100Convert APR from percentage format to floating point number: APR / 100 Call function to calculate monthly paymentCall function to calculate monthly payment Concatenate output messageConcatenate output message

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Step 1c – Output for main() Output a message that includes loan amount, APR, monthly payment and loan length.Output a message that includes loan amount, APR, monthly payment and loan length.

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Step 2 for Yes/No Validator Function Inputs:Inputs: –Question to Ask (get from main()) –Default Text (get from main()) ProcessesProcesses –Ask user the question and see if their answer did not equal “YES” AND did not equal “NO.” –If the user didn’t answer “YES” or “NO”, let them know that “YES” and “NO” are the only acceptable answers. Ask the user the question again until they answer “YES” or “NO.” OutputsOutputs –Give the validated answer back to main().

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Step 2 for Number Validator Function Inputs:Inputs: –Question to Ask (get from main()) –Default Text (get from main()) ProcessesProcesses –Ask the user to enter a number and check to see if they entered data that can be converted to a number. –If the user didn’t enter numeric data, let them know that the program only accepts numbers. Ask the user the question again until they enter numeric data. OutputsOutputs –Give the validated answer back to main().

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Step 2 for Calculate Monthly Payment Function Inputs:Inputs: –Loan Amount –APR –Length of the Loan, in months ProcessesProcesses –Figure the monthly interest: APR / 12 –Use the formula below to calculate monthly payment OutputsOutputs –Give the monthly payment back to main().

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Step 3: Develop Pseudocode NOTE: Instructor will give you pseudocode in class.NOTE: Instructor will give you pseudocode in class.

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Step 4: Code the Program Finished Code:Finished Code:

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Let’s Try Another One! PROBLEM: “Develop an application to calculate a student’s semester grade. Your application will ask for the scores from three exams. The application will then calculate the average of the exam scores and return the average along with a letter grade. The teacher uses a standard grading scale.”PROBLEM: “Develop an application to calculate a student’s semester grade. Your application will ask for the scores from three exams. The application will then calculate the average of the exam scores and return the average along with a letter grade. The teacher uses a standard grading scale.”

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science The Coded Product Finished Code:Finished Code:

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Commenting Functions In your code, you need to provide descriptive comments for each of your functions.In your code, you need to provide descriptive comments for each of your functions. When writing function comments, include the following:When writing function comments, include the following: –A brief (less than 1 line) description of the function –A list of arguments for the function –A list of values returned by the function –A statement of the function’s purpose

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Commenting Functions Example:Example: /*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. */ */

CSCI N341: Client-Side Web Programming Copyright ©2004  Department of Computer & Information Science Questions?