ITEC136 - Lab 2 Population

ITEC136 - Lab 2 Population Purpose To assess your ability to apply the knowledge and skills developed up though week 7. Emphasis will be placed on the following learning outcomes: 1. Decompose a problem into modularized components. 2. Write and call function(s) that utilize parameters and return values. 3. Write correct selection 'if', 'if/else' or ternary operator statements to solve a given problem. 4. Write correct iteration 'for', 'do-while' or 'while' statements to solve a given problem. 5. Perform validation of input data. Assignment Lab 2 analyzes population growth of a town as well as compare the population growth of two towns. For population growth of a town, the program receives the population, projected population growth rate, and number of years. It display the population growth in table form. (A sample input is: Population of town A = 10000, growth rate of town A = 5%, and number of years = 10) For population comparison between two towns, the program receives the population of town A, population of town B, the projected population growths of town A and B. The program outputs population of each town until population of town A is greater than the population of town B. (A sample input is: Population of town A = 10000, growth rate of town A = 5%, population of town B = 20000, and growth rate of town B = 2%.) Create a program that prompts the user to choose between computing the population growth of a town or population comparison of two towns. Validate the input values as described below.. The program output will be in the form of an HTML table. See the sample screen shots. Your submission must demonstrate your solution in action. Each ZIP file should contain at least one HTML and JS file all in the same folder. Action Items/Programming Requirements The solution must use and deliver at least one HTML and one JS file. Provide more if needed to demonstrate your solution in action. Theprompt() function must be used to all gather information from the user just as was done in the example screen shots. Do not use<input> tags or hard coded input values. Declare local variables within the functions only. No global variables permitted. All JS files must use the strict directive at the top of the file. Strict declarative will allow the JavaScript Console in a browser to display an error for undeclared variables. Follow the input-process-output program model. Read and output in the main control function only. The other functions should not communicate with the user. The return value should be all the main function needs to build output. ITEC136 Page 1 of 12

You should have at least these functions: The main population function gets user input on which type of population analysis and call the appropriate population function to do the work. Validate the input to be integer value greater than zero. Create a function that returns Boolean true or false for reusability. See the screen shots for examples of alert() messages upon bad input. Population of one town -- For one town/city population analysis. This function should prompt for user inputs, validate the inputs, output the input values, create and display the HTML table. The input values must meet the following criteria: o Population is positive number o Projected population is a number. It could be positive or negative number o Number of years is a positive number Population of two town -- function for the population analysis of two towns. This function should prompt for user inputs, validate the inputs, output the input values, create and display the HTML table. The input values must meet the following criteria: o Town A population is positive number o Town b population is positive number o Town A population is less than town B o Town A growth rate is greater than town B You should create functions that generates the HTML table for population analysis. You would need two such functions, one for the p popofonetown function and one for popoftwotown function. These functions will build a string that contains the HTML code for the table of results and use the return statement to return this string to the function caller. Put the HTML and JS files in the same folder. Try to make your solution look similar to the screen shots. Put identifying information in your files: your name, assignment name/number term/class. Example for HTML: o <!-- YourName Lab 2 2015-FA-ITEC136 --> o Example for the block comment at the top of the JS file: /** * @author YourName * Lab 2-2015-FA-ITEC 136 */ Don t forget to comment each function with function block comments too. Review code against the documentation and style requirements Word document available on the course web site for the assignment. You will find that both documentation and style requirements are facilitated by the Aptana Integrated Development Environment (IDE). ITEC136 Page 2 of 12

Screen Shots (FireFox): Population of one town ITEC136 Page 3 of 12

Population of two towns: ITEC136 Page 4 of 12

ITEC136 Page 5 of 12

Here are some invalid inputs examples These are not comprehensive. see the programming requirements for more details. ITEC136 Page 6 of 12

Invalid choice of operations available Invalid population ITEC136 Page 7 of 12

Town A population is larger than town B Town A growth rate is smaller than town B ITEC136 Page 8 of 12

Helpful Hints The following hints may help you to solve the problem: Make your life easier #1. Use function(s) to validate input. This is a great chance to get function reuse and shorten the programming time. No less than 7 variable need to be validated, a perfect place for a function. Four times validation must occur for a positive number and once for a number either positive or negative Make your life easier #2. Look for repetitive operations just like the validation above. See any more? I do. I see several places where a tabletd cell must be created with a variable into a string. My solution used the helper function below that allowed me to speed up the development and have less errors to create my td strings. Here is my function less the block comment. Probably looks pretty simple. But I didn't want to have to debug mismatched double quotes on my strings! function td(val) { return "<td>" + val + "</td>"; } Probably looks pretty simple. But I didn't want to have to debug mismatched double quotes on my strings! It reduced the code in my loop to build strings of HTML and variable appending to result to these lines! You are free to use the above function provided you attribute it to me, thus avoiding any plagiarism. result += "<tr>"; result += td(ctr); result += td(populationvar); result += "</tr>"; If a td function isn't for you, the following code snippet is an example on how to create a string containing the HTML table: var result = "<table border='1'><tr><th>col 1</th><th>Col 2</th></tr>"; result += "<tr>"; result += td(col1_data); result += td(col2_data); result += "</tr>"; Use of theprompt() function to input data. var favcolor = prompt("what is your favorite color?", "yellow ); The first parameter is shown to the user and the second parameter is the optional default response. Recall that prompt() returns a string value. Receiving a string value is actually good so that you can create the validation function(s) more easily. Image if the prompt() returned a number. In that case prompt() would have to do validation. ITEC136 Page 9 of 12

The parseint() function will convert a string into an integer number if possible. After the JavaScript below, totalpeople will hold the integer value of 123, ready to be used in math operations. Likewise, age variable will hold an integer value, the two functions are called in a compound style on one line of code. Either form is fine. var totalpeopleasstring = "123"; var totalpeople = parseint(totalpeopleasstring); var age = parseint(prompt("how old are you?")); The parsefloat() function will convert a string into a floating point number if possible. After the JavaScript below,receipttotal will hold a floating point value with decimal precision, ready to be used in math operations. Likewise, num will have decimal precision. var numberasstring = "6.023"; var receipttotal = parsefloat(numberasstring); var num = parsefloat(prompt("what is 5 / 2?")); Use Math.round() to round a number to the nearest integer var wholenum = Math.round(20.49); // Returns 20 var temp = Math.round(50.63); // Returns 51 Use document.writeln() for output in the appropriate places depending on the lab instructions. ITEC136 Page 10 of 12

ITEC 136 Coding Conventions Lab assignments will be graded in at least the following areas: Correct results the program should work, and be seen to work. This involves not only producing correct output, but also reacting well to user error, incorrect input, etc. The code should be robust. Test it thoroughly. Coding standards It is not uncommon for industry to impose a way of writing software that is uniform across all programmers. For the purpose of this class, we have the following: o The use of variable names that is descriptive of the use of the variable. Variable names should follow camelcaseconventions. For instance, use the variable name hoursworked to keep track of the number of hours a person has worked, instead of usingx. o Limit the number of global variables used. o Each function should perform one task, and no function should reasonably exceed 50 lines (this is a guideline, not a rule; I won t be counting lines). Function names should followcamelcaseconventions, and be descriptive of their purpose. o Symbolic constants should be named descriptively, and be in all upper case letters (i.e. var PI = 3.1415926535) o No line should exceed 80 characters in length. o Indent the body of blocks (while loops, 'if' statements, for loops, etc.) and tags (in HTML) consistently using 4 spaces (not tabs). You may want to adjust your editor to substitute spaces for tabs. o Code one statement per line, and leave blank lines to separate out logically connected chunks of code. o Follow structured programming techniques. These include writing modular code having only one entry point, and one exit point. o Write standard, portable code. Your programs will be tested in FireFox 3.5 or greater. Documentation Good programs require more explanation than is available in the code listing itself. It is required that you place comments throughout your code that explain the workings of your algorithms, the use of variables, any special or tricky points of code, and any modifications of global variables. When in doubt, write comments. If all your code were stripped out, a reader should still be able to follow your thought process as you were programming. ITEC136 Page 11 of 12

In addition, you will need to follow a special commenting format for files and functions. These conventions were adapted from the JSDoc project (a tool that will automatically generate API documentation from JavaScript files http://jsdoc.sourceforge.net/). For the purpose of this class, we have the following: o A comment box at the beginning of the file that has the following format (the first is for JavaScript and the second is for HTML): /** * A description of what the program does goes here. This * should be a general restatement of the assignment. * * @author Your Name Here * @version 1/31/2010 (i.e. the due date) */ <!-- * A description of what the program does goes here. This * should be a general restatement of the assignment. * * @author Your Name Here * @version 1/31/2010 (i.e. the due date) --> o Each function should be documented with a comment block similar to the following: /** * A description of what the function does goes here. * Remember that documentation tells what the function * _should_ do, not what it actually does. So, for a * makebold function you would write: This function will * take the input text and return it surrounded by "<b>" * and "</b>" effectively making it bold. * * @param {String} a string to convert to bold * @return {String} a bolded string suitable for rendering */ function makebold(text) { // code goes here } ITEC136 Page 12 of 12