Lab 1 Purpose To assess your ability to apply the knowledge and skills developed in weeks 1 through 4. Emphasis will be placed on the following learning outcomes: 1. Create and display simple syntactically correct HTML documents. 2. Describe the execution a JavaScript program in a web browser. 3. Write and call functions that utilize parameters and return values. 4. Declare, define, and use variables in a script. 5. Correctly use the JavaScript conditional "if" statement. Assignment Your local school district wants a web page to analyze triangles based on the lengths of the three sides. You have been selected to create the HTML and JavaScript files needed to implement this analyzer. This application is to determine two things about each triangle once it determines that the inputs can form a triangle: Categorize by the number of sides with equal lengths o Equilateral triangle (all 3 sides are the same length) o Isosceles triangle (two sides are of the same length, the third is of a different length) o Scalene triangle (all 3 sides are of differing lengths) Categorize by largest angle o Right triangle (triangle contains a 90 degree angle) o Obtuse triangle (triangle contains an angle > 90 degrees) o Acute triangle (triangle only contains angles < 90 degrees) Categorizing by largest angle only using the lengths of the sides can be accomplished as follows: Determine which of the three sides is the longest. We will call this s1 The other two sides we will call s2 and s3 Calculate the squares of each of the three sides. We will call these s1sq, s2sq and s3sq Compare s1sq to the sum of s2sq and s3sq If they equal then the triangle is a right triangle o This is the Pythagorean theorem If s1sq is bigger than the sum then it is an obtuse triangle Otherwise it is an acute triangle The first step is verifying that the inputs can form triangle. If the sum of the lengths of the two shorter sides is less than the longest side s length then those three sides cannot construct a triangle. Action Items/Programming Requirements
The solution must use and deliver both an HTML and a JS file. The JS file must be referenced in the <head> tag of the HTML document using the <script> tag to load your function so it can be called later on. The solution should use a <script> in the <body> of the HTML to prompt the user for the necessary input information, then call the function passing the input information as parameters. The input information is: o The length of the 1 st side of a triangle o The length of the 2 nd side of a triangle o The length of the 3 rd side of a triangle The prompt() 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. The function shall calculate the answers, build and output additional HTML with analysis information. Function Requirements You must use a function as described below o Function must have three parameters, representing the lengths of the three sides of a triangle. o The function must be in the JS file. o Do not prompt for user input within the analysis function, input values must be passed as function parameters. o The function parameters must be used for all analysis in the function. No global variables allowed. 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: <!-- YourName Lab 1 2015-Wi-ITEC136 --> Example for JS: /** * @author YourName * Lab 1-2015-WI-ITEC 136 */ 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). Screenshots (FireFox): Prompting the sides of a triangle:
Displaying results for can t form a triangle :
Displaying results for an analysis: Helpful Hints The following hints may help you to solve the problem: Use the prompt() function to input data. For example: 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. Use the parsefloat() function to convert a string into a floating point number. After the JavaScript below, receipttotal will hold a floating point value with decimal precision, ready to be used in math operations. var numberasstring = "6.023"; var receipttotal = parsefloat(numberasstring); Use the parseint() function to convert a string into an integer number. After the JavaScript below, totalpeople will hold a whole number value of 123, ready to be used in math operations. var totalpeopleasstring = "123"; var totalpeople = parseint(totalpeopleasstring); Use the tofixed() method of any Number object (variable) to convert a number into a string with a fixed number of decimal places. For example: var mypi = 3.1415926535;
document.writeln(mypi.tofixed(4)); // writes out 3.1416 Use Math.round() to round a number to the nearest integer var wholenum = Math.round(20.49); // Returns 20 Grading Criteria Quality of the solution: 0 50 points o Documentation (internal comments) (0 5 points) It is not uncommon for industry to impose a way of documenting software that is uniform across all programmers. Documentation standards are outlined in the same document referenced in the style bullet below. o Style (formatting, naming conventions and appearance of solution code) (0 5 points) As listed in the action items of the course web page lab assignment, ensure that your solution code meets the documentation and style guidelines for this course. The documentation and style requirements Word document titled "DocumentationAndStyleGuidelines.doc exists in the Resources folder on your course CD and as a link on the lab assignment page web page. Review your code against this document. I am looking for consistency also. For example, if you prefer to put your curly braces on the same line as the if statement rather than the next line, that is fine provided you are consistent throughout your code. o Correctness (how the program works under test) (0 40 points) The program should work, and be seen to work. The code should be robust. Note that grammar, spelling, and writing mechanics do not contribute to the total points for this assignment; however, improper grammar, poor spelling, or poor writing mechanics may result in significant point deductions.