Homework SoursePurpose To assess your ability to apply the knowledge and sk
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 1st side of a triangle
o The length of the 2nd side of a triangle
o The length of the 3rd 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):
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.
Solution
HTML file
<!Doctype HTML>
<html lang=\"en\">
<head>
<meta utf=\"charset\">
<script src=\"triangle.js\"></script>
</head>
<body>
<script>
<!-- Taking input from user -->
var side1 = prompt(\"Enter first side of the triange: \");
var side2 = prompt(\"Enter second side of the triange: \");
var side3 = prompt(\"Enter third side of the triange: \");
categorizeTriangle(side1, side2, side3);
</script>
</body>
triangle.js File
function categorizeTriangle(s1, s2, s3)
{
printSides(s1, s2, s3);
if(isEquilateral(s1, s2, s3))
print(\"Equilateral\");
if(isIsosceles(s1, s2, s3))
print(\"Isosceles\");
if(isScalene(s1,s2,s3))
print(\"Scalene\");
if(isRight(s1,s2, s3))
print(\"Right\");
if(isObtuse(s1, s2, s3))
print(\"Obtuse\");
if(isAcute(s1,s2,s3))
print(\"Acute\");
}
function isEquilateral(s1, s2, s3) {
return (s1==s2 && s2==s3);
}
function isIsosceles(s1, s2, s3) {
return (s1==s2 || s2==s3 || s1==s3);
}
function isScalene(s1, s2, s3) {
return (s1!=s2 && s1!=s3 && s2!=s3);
}
function isRight(s1, s2, s3) {
var sides = getSidesWithLargestAtFirst(s1, s2, s3);
return Math.pow(sides[0], 2) == Math.pow(sides[1], 2) + Math.pow(sides[2], 2);
}
function isObtuse(s1, s2, s3) {
var sides = getSidesWithLargestAtFirst(s1, s2, s3);
//Using Math.pow() to calculate square
return Math.pow(sides[0], 2) > Math.pow(sides[1], 2) + Math.pow(sides[2], 2);
}
function isAcute(s1, s2, s3) {
return !isObtuse(s1, s2, s3);
}
function getSidesWithLargestAtFirst(s1, s2, s3) {
var sides = new Array();
//Using Math.max() to find maximum
var max = Math.max(s1, s2, s3);
var side1, side2;
if (max - s1 == 0) {
side1 = s2;
side2 = s3;
}
else if (max - s2 == 0) {
side1 = s1;
side2 = s3;
}
else if (max - s3 == 0) {
side1 = s1;
side2 = s2;
}
sides.push(max);
sides.push(side1);
sides.push(side2);
return sides;
}
function print(triangleType) {
document.write(\"Triangle is \" + triangleType + \"<br>\");
}
function printSides(s1, s2, s3) {
document.write(\"You inputted a triangle with sides \" + s1 + \", \" + s2 + \" and \" + s3 + \"<br>\");
}
