| |
Deliverables:
To complete this assignment you must --
1.) Write the HTML and JavaScript page described below.
2.) Complete the lab during the time provided or email your results to your lab instructor.
Introduction:
The goal of this assignment is to give you experience working with
IF-THEN-ELSE blocks. IF-THEN-ELSE blocks let
you choose what parts of your code execute based on input data. See notes explaining if-else statements.
JavaScript allows you to conditionally execute (run) code with if statements. Ex:
var a = 5;
if(a == 5) // No semicolon at end of if (...)
document.write("a = 5");
This will simply write a = 5 to the document. However, if a was not equal to 5, then it would not.
If you want code to be executed if a case is not true:
var a = 7;
if(a == 5) // No semicolon at end of if (...)
document.write("a = 5");
else
document.write("a not = 5");
This will write a not = 5 to the document. However, if a was equal to 5, it would write a = 5 to the document.
If you want to test for cases that exclude prior ones:
var a = 7;
if(a == 5)
document.write("a = 5");
else if(a == 7)
document.write("a = 7");
else
document.write("a not = 5 or 7.");
First, a is assigned to 7. Then, the browser checks a == 5, if a is equal to 5, then it writes a = 5 to the document and no other checks are performed. If a does not equal 5, then the browser checks if a is equal to 7, if a is, then it writes a = 7 to the document and no other checks are performed. Finally, if all the prior checks failed, the statement inside the else is executed, namely, it writes a not = 5 or 7 to the document.
If more than one statement needs to be executed based on the condition of the clause (if/else if/else), then they need to be grouped into a block with { ... }, which will be treated altogether as one statement:
var a = 5;
if(a == 5)
{
document.write("a = 5");
document.write(a);
}
This will display a = 5 and then display the value of a (5) to the document.
Procedures:
- Use a text editor to complete your assignment.
- Using your text editor create a new document named "cop2500lab3.html".
Make sure you save the file as a plain text document with extension ".html".
-
Convert the following two algorithms into JavaScript code within your HTML document.
Your final web page should display the algorithm title, the input and the output.
The specific format you use to display the results is up to you, but it should be
clear what the input and output means (in other words, don't just list rows of
numbers without words or labels describing them). The first algorithm calculates the maximum of three numbers. The second algorithm computes a letter grade from a numeric grade.
-
Note that the Instructions shown here are not working Javascript code - they are only meant to demonstrate the working of the algorithm. The syntax used by Javascript is somewhat different - a trivial example is the fact that the 'if' and 'else' keywords should be in lower case for Javascript to recognize it. More importantly, there are no "ENDIF" or "THEN" keywords in Javascript. Braces ("{" and "}") are used to serve the same purpose - delimiting the boundaries of the code that is executed based on the if statement. Think of statements in braces as a unit in some sense - they're what we call blocks or compound statements.
Finding the largest number.
| Section |
Instructions |
Comments |
| INPUT: | var x, y, z; |
We require three numbers | |
| OTHER VARIABLES: | var max;
| |
| INITIALIZATION: |
x = 34, y = 10,
z = 42
|
| COMPUTATION: | IF (x > y) THEN
max = x;
ELSE
max = y;
ENDIF
IF (z > max) THEN
max = z;
ENDIF
|
Convince yourself these
comparisons provide the
correct result. |
| OUTPUT: | display max using document.write() or some other output function |
Remember to format your results
in a sensible way. |
LetterGrade(x): Computes a letter grade.
| Section | Pseudocode | Comments |
| INPUT: | var NumGrade; |
This is the numeric grade,
0 - 100 percent.
Set NumGrade to 76
|
| OTHER VARIABLES: | var AlphGrade; |
This is where we will
store the letter grade. |
| INITIALIZATION: | NumGrade is given. |
| COMPUTATION: |
IF (NumGrade > 89) THEN
AlphGrade = "A";
ELSE
IF (NumGrade > 79) THEN
AlphGrade = "B";
ELSE
IF (NumGrade > 69) THEN
AlphGrade = "C";
ELSE
IF (NumGrade > 59) THEN
AlphGrade = "D";
ELSE
AlphGrade = "F";
ENDIF
ENDIF
ENDIF
ENDIF
| Note the use of the "nested" IF-THEN-ELSE
structures. It may be easier to do one at a time, then view it. |
| OUTPUT: | display AlphGrade using document.write() or some other output function | | |
-
Open a browser and verify that the file displays properly. In order to obtain full credit for the lab you need to email your source code to your grader.
|